From 1f62d64ace882d5d3882607fa014911cfdc5fee4 Mon Sep 17 00:00:00 2001
From: Hikari <hikari@nhcarrigan.com>
Date: Thu, 19 Feb 2026 20:42:06 -0800
Subject: [PATCH] fix: improve dropdown option contrast for readability

Add explicit background and text color styling to select option
elements to fix poor contrast that made dropdown options illegible.

Changes:
- Add option styling to settings component select dropdown
- Add option styling to admin reports component select dropdown
- Set background to match form background color
- Set text color to match standard text color
- Ensures dropdown options are readable on all backgrounds
---
 .../app/components/admin-reports/admin-reports.component.ts  | 5 +++++
 .../src/app/components/settings/settings.component.ts        | 5 +++++
 2 files changed, 10 insertions(+)

diff --git a/apps/frontend/src/app/components/admin-reports/admin-reports.component.ts b/apps/frontend/src/app/components/admin-reports/admin-reports.component.ts
index 000affc..fa840b4 100644
--- a/apps/frontend/src/app/components/admin-reports/admin-reports.component.ts
+++ b/apps/frontend/src/app/components/admin-reports/admin-reports.component.ts
@@ -1401,6 +1401,11 @@ import { ProfileReportWithUsers, CommentReportWithDetails, ReportStatus, ReportR
       cursor: pointer;
     }
 
+    select.form-control option {
+      background: var(--witch-moon);
+      color: var(--witch-purple);
+    }
+
     textarea.form-control {
       resize: vertical;
       min-height: 100px;
diff --git a/apps/frontend/src/app/components/settings/settings.component.ts b/apps/frontend/src/app/components/settings/settings.component.ts
index 0acb59b..8b7a369 100644
--- a/apps/frontend/src/app/components/settings/settings.component.ts
+++ b/apps/frontend/src/app/components/settings/settings.component.ts
@@ -304,6 +304,11 @@ import { User, PrimaryBadge } from '@library/shared-types';
       cursor: pointer;
     }
 
+    .form-group select option {
+      background: #1a1a2e;
+      color: var(--text-colour, #e0e0e0);
+    }
+
     .form-group input[type="text"]:focus,
     .form-group textarea:focus,
     .form-group select:focus {