diff --git a/src/components/SearchInput/SearchInput.css b/src/components/SearchInput/SearchInput.css index 84f6507..0add54d 100644 --- a/src/components/SearchInput/SearchInput.css +++ b/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 { diff --git a/src/components/SearchInput/SearchInput.tsx b/src/components/SearchInput/SearchInput.tsx index 106e809..610dfed 100644 --- a/src/components/SearchInput/SearchInput.tsx +++ b/src/components/SearchInput/SearchInput.tsx @@ -15,7 +15,7 @@ const SearchInput: React.FC = () => { }; return (
- +