Add background color to search inputs

acelaya · Feb 22, 2025 · 3693ed2 · 3693ed2
1 parent f0d4f9e
commit 3693ed2
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 3 deletions.
diff --git a/src/components/Search.tsx b/src/components/Search.tsx
@@ -36,7 +36,7 @@ export const Search: FC<SearchProps> = ({ posts }) => {
     <>
       <section className="mb-6">
         <input
-          className="w-full border-2 focus:border-primary rounded-sm p-2 outline-0 transition text-main"
+          className="w-full border-2 focus:border-primary rounded-sm p-2 outline-0 transition text-main bg-white"
           type="search"
           name="q"
           placeholder="Search…"

diff --git a/src/components/header/HeaderSearch.tsx b/src/components/header/HeaderSearch.tsx
@@ -14,7 +14,7 @@ export const HeaderSearch: FC<{ className?: string }> = ({ className }) => {
       <input
         type="search"
         className={clsx(
-          'md:absolute right-0 rounded-sm p-2 md:pr-9 outline-0 text-main',
+          'md:absolute right-0 rounded-sm p-2 md:pr-9 outline-0 text-main bg-white',
           'w-full md:w-0 md:opacity-0 md:focus:w-80 focus:opacity-100 transition-appear',
         )}
         placeholder="Search…"
@@ -32,7 +32,7 @@ export const HeaderSearch: FC<{ className?: string }> = ({ className }) => {
       />
       <button
         tabIndex={-1}
-        className="absolute right-2 top-2"
+        className="absolute right-2 top-2 cursor-pointer"
         onClick={() => ref.current?.focus()}
       >
         <FontAwesomeIcon