SearchInput: update style to match spec

src/components/SearchInput/SearchInput.css

@@ -1,30 +1,39 @@
 .search-bar {
-  position: relative;
   display: flex;
-  align-items: center;
   flex: 2;
-  margin: 4px;
-  padding: 8px 16px;
-  border: 1px solid black;
-  border-radius: 24px;
-  background-color: white;
+  align-items: center;
+  height: 48px;
+  margin: 0 4px;
+  padding: 0 24px;
+  border-radius: 8px;
+  color: white;
+  background-color: #494650;
 }
 
 .search-bar:focus-within {
   outline: none;
-  border: 1px solid violet;
-  border-radius: 24px;
+  color: black !important;
+  background-color: white !important;
 }
 
 .search-bar input {
+  height: 100%;
   flex: 1;
   border: none;
-  margin-left: 8px;
-  padding: 2px 0px 0px;
+  margin-left: 12px;
+  padding: 0;
+  font-size: 16px;
+  color: white;
+  background-color: transparent !important;
+}
+
+::placeholder {
+  color: white !important;
 }
 
 .search-bar input:focus {
   outline: none;
+  color: black;
 }
 
 .search-bar input::placeholder {

src/components/SearchInput/SearchInput.tsx

@@ -15,7 +15,7 @@ const SearchInput: React.FC<SearchInputProps> = () => {
   };
   return (
     <div className="search-bar">
-      <Search />
+      <Search size={24} />
       <input
         id="search-input"
         aria-label="Search for an icon"