style search field, make main menu more fun

web/src/components/general/Icon.tsx

@@ -3,7 +3,7 @@ import styles from "./icon.module.scss";
 export default function Icon({
   type,
 }: {
-  type?: "doc" | "arrowUp" | "arrowRight" | "externalLink" | "tickets" | "list" | "calendar" | "filter" | "noFilter" | "instagram" | "facebook" | "flickr";
+  type?: "doc" | "arrowUp" | "arrowRight" | "externalLink" | "search" | "tickets" | "list" | "calendar" | "filter" | "noFilter" | "instagram" | "facebook" | "flickr";
 }) {
   return (
     <div className={styles.icon}>
@@ -29,6 +29,10 @@ export default function Icon({
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor"><path d="M257.39-235.61 197-296l381-381H238.39v-86h486v486h-86v-339.61l-381 381Z"/></svg>
       )}
 
+      {type === "search" && (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor"><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg>
+      )}
+
       {type === "tickets" && (
         <svg xmlns="http://www.w3.org/2000/svg"viewBox="0 -960 960 960" fill="currentColor"><path d="M480-280q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm0-160q17 0 28.5-11.5T520-480q0-17-11.5-28.5T480-520q-17 0-28.5 11.5T440-480q0 17 11.5 28.5T480-440Zm0-160q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm320 440H160q-33 0-56.5-23.5T80-240v-160q33 0 56.5-23.5T160-480q0-33-23.5-56.5T80-560v-160q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v160q-33 0-56.5 23.5T800-480q0 33 23.5 56.5T880-400v160q0 33-23.5 56.5T800-160Zm0-80v-102q-37-22-58.5-58.5T720-480q0-43 21.5-79.5T800-618v-102H160v102q37 22 58.5 58.5T240-480q0 43-21.5 79.5T160-342v102h640ZM480-480Z"/></svg>
       )}

web/src/components/layout/Header.tsx

@@ -154,22 +154,22 @@ export const Header = () => {
                 {/* TODO: skal trolig ikke være så synlig ved lansering */}
                 <Link href="/foreninger">Foreninger*</Link>
               </li>
-              <li className={styles.search}>
-                <label>
-                  <p>Søk</p>
-                  <input type="text" onKeyDown={handleSearch} />
-                </label>
-              </li>
               <li className={styles.galtinn}>
                 <a
                   href="https://galtinn.neuf.no/"
                   target="_blank"
-                  className="button tertiary"
                 >
-                  <span>Mitt medlemskap</span>
+                  <span>Mitt medlemskap</span>&nbsp;
                   <Icon type="externalLink" />
                 </a>
               </li>
+              <li className={styles.search}>
+                <label>
+                  <p>Søk</p>
+                  <input type="text" onKeyDown={handleSearch} placeholder="Søk" />
+                  <div className={styles.searchIcon}><Icon type="search" /></div>
+                </label>
+              </li>
             </ul>
           </div>
         </nav>

web/src/components/layout/header.module.scss

@@ -155,26 +155,77 @@
 
   transition: all var(--transition-easing);
 
+  a {
+    --size-icon: var(--font-size-caption);
+    display: inline-block;
+    padding: 0 calc(var(--size-icon) + .75rem);
+    transform: translateX(calc((var(--size-icon) + .75rem) * -1));
+    position: relative;
+    transition: transform .3s ease;
+
+    &:before {
+      content: "";
+      display: inline-block;
+      vertical-align: middle;
+      width: var(--size-icon);
+      height: var(--size-icon);
+      margin-bottom: .16rem;
+      margin-right: var(--spacing-xs);
+      border-radius: var(--size-icon);
+      background: var(--color-goldenOrange);
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      opacity: 0;
+      transition: transform .4s ease, opacity .2s ease;;
+    }
+
+    &:hover {
+      transform: translateX(0);
+      opacity: 1;
+      &:before {
+        opacity: 1;
+      }
+    }
+  }
+
   ul {
     display: flex;
     flex-direction: column;
     justify-content: center;
-    font-size: 1.4rem;
+    font-size: 1.2rem;
     padding: var(--spacing-sitepadding-block) 0;
   }
 }
 
 .menuItemLarge {
-  font-size: 2rem;
+  font-size: 1.6rem;
 }
 
 .divider {
-  margin-top: var(--spacing-l);
+  margin-top: var(--spacing-m);
 }
 
-.search,
+.search {
-.galtinn {
+  margin-top: var(--spacing-l);
-  margin-top: var(--spacing-m);
+  width: 100%;
+  max-width: 16rem;
+  font-size: var(--font-size-body);
+  font-weight: 500;
+  color: var(--color-deepBrick);
+  position: relative;
+
+  input {
+    width: 100%;
+    padding-right: 2rem;
+  }
+}
+
+.searchIcon {
+  position: absolute;
+  right: 1rem;
+  bottom: .6rem;
 }
 
 @media (max-width: 1200px) {

web/src/css/base.scss

@@ -124,13 +124,26 @@ blockquote {
 input[type="text"] {
   border-radius: 10rem;
   background: var(--color-white);
-  color: var(--color-text);
+  color: currentColor;
-  border: none;
+  border: 2px solid currentColor;
   padding: var(--spacing-xs) var(--spacing-s);
   font-family: inherit;
   font-size: var(--font-size-body);
   font-weight: 500;
   transition: opacity var(--transition-easing);
+
+  &::placeholder {
+    font-weight: 400;
+    color: currentColor;
+    opacity: .6;
+  }
+
+  &:focus, &:hover {
+    outline: none;
+    border-color: var(--color-goldenOrange);
+    box-shadow: 0 0 0 1px var(--color-goldenOrange);
+    transition: box-shadow .3s ease, border-color .3s ease;
+  }
 }
 
 select {

web/src/css/button.scss

@@ -11,7 +11,7 @@ button,
   margin: 0 0 var(--spacing-xs);
   font-family: var(--font-main);
   font-size: var(--font-size-body);
-  font-weight: 500;
+  font-weight: 500 !important;
   text-decoration: none;
   transition: opacity var(--transition-easing);
   cursor: pointer;