fix background color

web/src/app/globals.css

@@ -34,11 +34,12 @@
     /* -------------------------------------------------------
      * 2. Keep special, custom, or near-duplicate background
      * ------------------------------------------------------- */
-    --background: #fefcfa; /* slightly off-white, keep it */
+    --background: #fefcfa; /* slightly off-white */
+    --background-50: #fffdfb; /* a little lighter than background but not quite white */
     --input-background: #fefcfa;
     --input-border: #f1eee8;
     --text-text: #f4f2ed;
-    --background-dark: #e9e6e0;
+    --background-dark: #141414;
     --new-background: #ebe7de;
     --new-background-light: #d9d1c0;
     --background-chatbar: #f5f3ee;
@@ -234,6 +235,7 @@
 
     --text-text: #1d1d1d;
     --background-dark: #252525;
+    --background-50: #252525;
 
     /* --new-background: #fff; */
     --new-background: #2c2c2c;

web/src/components/admin/users/SignedUpUserTable.tsx

@@ -181,7 +181,7 @@ const SignedUpUserTable = ({
                 : "All Roles"}
             </SelectValue>
           </SelectTrigger>
-          <SelectContent className="bg-background">
+          <SelectContent className="bg-background-50">
             {Object.entries(USER_ROLE_LABELS)
               .filter(([role]) => role !== UserRole.EXT_PERM_USER)
               .map(([role, label]) => (

web/tailwind-themes/tailwind.config.js

@@ -108,6 +108,7 @@ module.exports = {
         "accent-background": "var(--accent-background)",
         "accent-background-hovered": "var(--accent-background-hovered)",
         "accent-background-selected": "var(--accent-background-selected)",
+        "background-50": "var(--background-50)",
         "background-dark": "var(--off-white)",
         "background-100": "var(--neutral-100-border-light)",
         "background-125": "var(--neutral-125)",