feat: restyle search icon

assets/styles/base.scss

@@ -24,7 +24,6 @@ h1, h2, h3, h4, h5, h6, ol, ul, thead {
   opacity: 0.3;
   transition: opacity 0.3s ease;
   color: var(--secondary);
-
 }
 
 p, ul, text {
@@ -381,11 +380,24 @@ header {
     flex: 1 1 auto;
   }
 
-  & > svg {
+  #search-icon {
+    background-color: var(--lightgray);
+    border-radius: 4px;
+    height: 2em;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    & > p {
+      display: inline;
+      padding-left: 0.5em;
+    }
+  }
+
+  & svg {
     cursor: pointer;
     width: 18px;
     min-width: 18px;
-    margin: 0 1em;
+    margin: 0 0.5em;
 
     &:hover .search-path {
       stroke: var(--tertiary);
@@ -592,4 +604,3 @@ header {
   }
 }
 
-