style search field, make main menu more fun

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,
-.galtinn {
-  margin-top: var(--spacing-m);
+.search {
+  margin-top: var(--spacing-l);
+  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) {