fix(Search input): increase font-size, and set white bg (#496)

* set input bg to white

* increase default input font size to 16px

* increase search icon size

Author: mikewuu

assets/icons/search.svg

@@ -7,28 +7,28 @@ export function SearchIcon(props: SVGProps<SVGSVGElement>): JSX.Element {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width={20}
-      height={20}
+      width={24}
+      height={25}
       fill='none'
       {...props}
     >
       <mask
         id='search_svg__a'
-        width={20}
-        height={20}
+        width={24}
+        height={25}
         x={0}
         y={0}
         maskUnits='userSpaceOnUse'
         style={{
           maskType: 'alpha',
         }}
       >
-        <path fill='#D9D9D9' d='M0 0h20v20H0z' />
+        <path fill='#D9D9D9' d='M0 .988h24v24H0z' />
       </mask>
       <g mask='url(#search_svg__a)'>
         <path
-          fill='#6E7179'
-          d='m16.333 17.5-5.25-5.25a5.08 5.08 0 0 1-3.167 1.083c-1.513 0-2.794-.524-3.843-1.572C3.024 10.71 2.5 9.43 2.5 7.917c0-1.514.524-2.796 1.573-3.845C5.122 3.024 6.403 2.5 7.917 2.5c1.514 0 2.795.524 3.844 1.572 1.048 1.05 1.572 2.33 1.572 3.845a5.08 5.08 0 0 1-1.083 3.166l5.25 5.25-1.167 1.167Zm-8.416-5.833c1.041 0 1.927-.365 2.656-1.094.73-.73 1.094-1.615 1.094-2.656 0-1.042-.365-1.928-1.094-2.657-.73-.729-1.615-1.093-2.656-1.093-1.042 0-1.928.364-2.657 1.093-.729.73-1.093 1.615-1.093 2.657 0 1.041.364 1.927 1.093 2.656.73.73 1.615 1.094 2.657 1.094Z'
+          fill='#232B3A'
+          d='m19.6 21.988-6.3-6.3a6.096 6.096 0 0 1-3.8 1.3c-1.817 0-3.354-.629-4.612-1.887C3.629 13.843 3 12.305 3 10.488c0-1.816.63-3.354 1.888-4.613C6.146 4.617 7.683 3.988 9.5 3.988c1.817 0 3.354.63 4.613 1.887C15.371 7.134 16 8.672 16 10.488a6.096 6.096 0 0 1-1.3 3.8l6.3 6.3-1.4 1.4Zm-10.1-7c1.25 0 2.313-.437 3.188-1.312S14 11.738 14 10.488c0-1.25-.437-2.312-1.312-3.188-.875-.874-1.938-1.312-3.188-1.312-1.25 0-2.313.438-3.188 1.312C5.437 8.176 5 9.238 5 10.488c0 1.25.437 2.313 1.312 3.188S8.25 14.988 9.5 14.988Z'
         />
       </g>
     </svg>

src/lib/icons/Search.tsx

@@ -1,9 +1,20 @@
 @use './colors';
 @use './typography';
 
+@mixin search-text-field {
+  .seam-search-text-field {
+    svg {
+      * {
+        fill: colors.$text-gray-2;
+      }
+    }
+  }
+}
+
 @mixin text-field {
   .seam-text-field {
     > .seam-main {
+      background: colors.$white;
       border: 1px solid colors.$text-gray-3;
       border-radius: 8px;
       display: flex;
@@ -24,6 +35,7 @@
       border: 0;
       width: 100%;
       border-radius: 8px;
+      font-size: 16px;
 
       @include typography.font-family;
 
@@ -92,7 +104,6 @@
 
         > .seam-text-field-input {
           height: 48px;
-          font-size: 16px;
         }
       }
     }
@@ -111,4 +122,5 @@
 
 @mixin all {
   @include text-field;
+  @include search-text-field;
 }