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"

src/components/index.ts

@@ -4,8 +4,6 @@ export { default as Panorama } from "./Panorama/Panorama";
 export { default as Info } from "./Info/Info";
 export { default as Toolbar } from "./Toolbar/Toolbar";
 export { default as IconGrid } from "./IconGrid/IconGrid";
-export { default as IconGridStatic } from "./IconGrid/IconGridStatic";
-export { default as IconGridUV } from "./IconGrid/IconGridUV";
 export { default as ColorInput } from "./ColorInput/ColorInput";
 export { default as SearchInput } from "./SearchInput/SearchInput";
 export { default as SizeInput } from "./SizeInput/SizeInput";