Header: Use custom focus styling

The current focus outline is using a rectangle, while the input is rounded, which looks very ugly. This commit uses a `box-shadow` instead of the regular `outline` to solve this issue.

Author: Turbo87

app/components/header.module.css

@@ -58,6 +58,12 @@ input.search {
     background-size: 14px 15px;
     border-radius: 15px;
     box-shadow: none;
+    transition: box-shadow 150ms;
+
+    &:focus {
+        outline: none;
+        box-shadow: 0 0 0 4px var(--yellow);
+    }
 }
 
 .mobile-search {