slightly less bad search box bg

packages/app/src/Element/SearchBox.tsx

@@ -170,8 +170,8 @@ export default function SearchBox() {
           <div
             className={`p-2 cursor-pointer ${
               activeIndex === 0
-                ? "bg-neutral-300 dark:bg-neutral-800 hover:bg-neutral-400 dark:hover:bg-neutral-600"
-                : "hover:bg-neutral-200 dark:hover:bg-neutral-800"
+                  ? "bg-bg-secondary"
+                  : "bg-bg-color hover:bg-bg-secondary"
             }`}
             onMouseEnter={() => setActiveIndex(0)}
             onClick={() => navigate(`/search/${encodeURIComponent(search)}`, { state: { forceRefresh: true } })}>
@@ -182,8 +182,8 @@ export default function SearchBox() {
               key={idx}
               className={`p-2 cursor-pointer ${
                 activeIndex === idx + 1
-                  ? "bg-neutral-300 dark:bg-neutral-800 hover:bg-neutral-400 dark:hover:bg-neutral-600"
-                  : "hover:bg-neutral-200 dark:hover:bg-neutral-800"
+                  ? "bg-bg-secondary"
+                  : "bg-bg-color hover:bg-bg-secondary"
               }`}
               onMouseEnter={() => setActiveIndex(idx + 1)}>
               <ProfileImage pubkey={result.pubkey} showProfileCard={false} />

packages/app/src/index.css

@@ -98,7 +98,7 @@ html.light {
   --dm-gradient: var(--gray);
   --invoice-gradient: linear-gradient(45deg, var(--gray-superdark) 50%, #f7b73333, #fc4a1a33);
   --paid-invoice-gradient: linear-gradient(45deg, var(--gray-superdark) 50%, #f7b73399, #fc4a1a99);
-  --bg-secondary: #fff;
+  --bg-secondary: #f5f5f5;
   --sub-bg: #fff;
   --btn-color: #fff;
 }

packages/app/tailwind.config.js

@@ -9,6 +9,7 @@ module.exports = {
         "border-color": "var(--border-color)",
         highlight: "var(--highlight)",
         "bg-color": "var(--bg-color)",
+        "bg-secondary": "var(--bg-secondary)",
       },
       textColor: {
         "nostr-blue": "var(--repost)",