From 7c73b927552836ac818f2c26c516d3f2cdbfa406 Mon Sep 17 00:00:00 2001
From: yatharthchopra2424 <yc9891966@gmail.com>
Date: Thu, 23 Apr 2026 22:11:47 +0530
Subject: [PATCH] feat: standardise dropdown UI and fix dark-mode visibility
 issues

- Implemented '.gc-select' utility in globals.css with custom chevron and dark-themed options list.
- Added browser autofill overrides to prevent white-background obscuring text in dark mode.
- Applied the new dropdown styling to the Onboarding page, Company Dashboard scheduler, and GridCastApp monolith.
- Resolved 'non-visible text' issue for dropdown selectors across the platform.
---
 .../app/(protected)/company/page.tsx          |  2 +-
 .../app/(protected)/onboarding/page.tsx       |  6 ++++-
 gridcast-react/app/globals.css                | 25 +++++++++++++++++++
 gridcast-react/components/GridCastApp.tsx     | 12 ++++-----
 4 files changed, 37 insertions(+), 8 deletions(-)

diff --git a/gridcast-react/app/(protected)/company/page.tsx b/gridcast-react/app/(protected)/company/page.tsx
index 5060084..f4eec33 100644
--- a/gridcast-react/app/(protected)/company/page.tsx
+++ b/gridcast-react/app/(protected)/company/page.tsx
@@ -1109,7 +1109,7 @@ export default function CompanyDashboard() {
                           <select
                             value={newTaskRegion}
                             onChange={(e) => setNewTaskRegion(e.target.value)}
-                            className="gc-input"
+                            className="gc-input gc-select"
                             style={{ cursor: "pointer" }}
                           >
                             {REGIONS.map((r) => (
diff --git a/gridcast-react/app/(protected)/onboarding/page.tsx b/gridcast-react/app/(protected)/onboarding/page.tsx
index fb9eb92..251f98e 100644
--- a/gridcast-react/app/(protected)/onboarding/page.tsx
+++ b/gridcast-react/app/(protected)/onboarding/page.tsx
@@ -246,6 +246,7 @@ export default function OnboardingPage() {
                 <div style={{ gridColumn: "span 2" }}>
                   <label className="gc-label">Industry / Facility Type *</label>
                   <select
+                    className="gc-select"
                     style={{ ...inputStyle, cursor: "pointer" }}
                     value={form.industry}
                     onChange={(e) => update("industry", e.target.value)}
@@ -296,6 +297,7 @@ export default function OnboardingPage() {
                 <div>
                   <label className="gc-label">Grid Region</label>
                   <select
+                    className="gc-select"
                     style={{ ...inputStyle, cursor: "pointer" }}
                     value={form.region}
                     onChange={(e) => update("region", e.target.value)}
@@ -403,6 +405,7 @@ export default function OnboardingPage() {
                 <div>
                   <label className="gc-label">Operational Shift Pattern</label>
                   <select
+                    className="gc-select"
                     style={{ ...inputStyle, cursor: "pointer" }}
                     value={form.shift}
                     onChange={(e) => update("shift", e.target.value)}
@@ -541,6 +544,7 @@ export default function OnboardingPage() {
                 <div>
                   <label className="gc-label">Annual Electricity Budget</label>
                   <select
+                    className="gc-select"
                     style={{ ...inputStyle, cursor: "pointer" }}
                     value={form.budgetRange}
                     onChange={(e) => update("budgetRange", e.target.value)}
@@ -555,7 +559,7 @@ export default function OnboardingPage() {
 
                 <div>
                   <label className="gc-label">Primary Optimisation Priority</label>
-                  <select style={{ ...inputStyle, cursor: "pointer" }}>
+                  <select className="gc-select" style={{ ...inputStyle, cursor: "pointer" }}>
                     <option>Cost Reduction (₹ savings)</option>
                     <option>Carbon Footprint (tCO₂)</option>
                     <option>Grid Reliability / Uptime</option>
diff --git a/gridcast-react/app/globals.css b/gridcast-react/app/globals.css
index 674d0e0..0a5256d 100644
--- a/gridcast-react/app/globals.css
+++ b/gridcast-react/app/globals.css
@@ -173,6 +173,31 @@ body {
 .gc-input:focus   { border-color: rgba(6, 182, 212, 0.6); }
 .gc-input::placeholder { color: var(--gc-subtle); }
 
+.gc-select {
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 12px center;
+  background-size: 16px;
+  padding-right: 36px !important;
+  cursor: pointer;
+}
+
+.gc-select option {
+  background-color: #0a1929;
+  color: #e2e8f0;
+}
+
+/* Autofill overrides for dark mode */
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+  -webkit-box-shadow: 0 0 0 30px #020f1a inset !important;
+  -webkit-text-fill-color: #e2e8f0 !important;
+  transition: background-color 5000s ease-in-out 0s;
+}
+
 .gc-label {
   font-size: 11px;
   color: var(--gc-muted);
diff --git a/gridcast-react/components/GridCastApp.tsx b/gridcast-react/components/GridCastApp.tsx
index 52585d2..cdbf1f3 100644
--- a/gridcast-react/components/GridCastApp.tsx
+++ b/gridcast-react/components/GridCastApp.tsx
@@ -1039,7 +1039,7 @@ function CompanyFormPage({ onNavigate }: { onNavigate: (p: string) => void }) {
                 <div><label className="gc-label">Employees</label><input style={inputSt} type="number" placeholder="500" value={formData.employees} onChange={e => update("employees", e.target.value)} /></div>
                 <div style={{ gridColumn: "span 2" }}>
                   <label className="gc-label">Industry / Facility Type *</label>
-                  <select style={{ ...inputSt, cursor: "pointer" }} value={formData.industry} onChange={e => update("industry", e.target.value)}>
+                  <select className="gc-select" style={{ ...inputSt, cursor: "pointer" }} value={formData.industry} onChange={e => update("industry", e.target.value)}>
                     <option value="">Select your industry…</option>
                     {INDUSTRY_TYPES.map(t => <option key={t.value} value={t.value}>{t.label}</option>)}
                   </select>
@@ -1047,7 +1047,7 @@ function CompanyFormPage({ onNavigate }: { onNavigate: (p: string) => void }) {
                 </div>
                 <div>
                   <label className="gc-label">Grid Region</label>
-                  <select style={{ ...inputSt, cursor: "pointer" }} value={formData.region} onChange={e => update("region", e.target.value)}>
+                  <select className="gc-select" style={{ ...inputSt, cursor: "pointer" }} value={formData.region} onChange={e => update("region", e.target.value)}>
                     {REGIONS.map(r => <option key={r.id} value={r.id}>{r.label}</option>)}
                   </select>
                 </div>
@@ -1068,7 +1068,7 @@ function CompanyFormPage({ onNavigate }: { onNavigate: (p: string) => void }) {
                 <div><label className="gc-label">Sanctioned Load (kW)</label><input style={inputSt} type="number" placeholder="8500" value={formData.sanctionedLoad} onChange={e => update("sanctionedLoad", e.target.value)} /></div>
                 <div>
                   <label className="gc-label">Shift Pattern</label>
-                  <select style={{ ...inputSt, cursor: "pointer" }} value={formData.shift} onChange={e => update("shift", e.target.value)}>
+                  <select className="gc-select" style={{ ...inputSt, cursor: "pointer" }} value={formData.shift} onChange={e => update("shift", e.target.value)}>
                     {SHIFT_PATTERNS.map(s => <option key={s.value} value={s.value}>{s.label}</option>)}
                   </select>
                 </div>
@@ -1099,14 +1099,14 @@ function CompanyFormPage({ onNavigate }: { onNavigate: (p: string) => void }) {
                 </div>
                 <div>
                   <label className="gc-label">Annual Electricity Budget</label>
-                  <select style={{ ...inputSt, cursor: "pointer" }} value={formData.budgetRange} onChange={e => update("budgetRange", e.target.value)}>
+                  <select className="gc-select" style={{ ...inputSt, cursor: "pointer" }} value={formData.budgetRange} onChange={e => update("budgetRange", e.target.value)}>
                     <option value="">Select range…</option>
                     <option>₹1–5 Cr / year</option><option>₹5–25 Cr / year</option><option>₹25–100 Cr / year</option><option>₹100 Cr+ / year</option>
                   </select>
                 </div>
                 <div>
                   <label className="gc-label">Primary Optimisation Priority</label>
-                  <select style={{ ...inputSt, cursor: "pointer" }}>
+                  <select className="gc-select" style={{ ...inputSt, cursor: "pointer" }}>
                     <option>Cost Reduction (₹ savings)</option><option>Carbon Footprint (tCO₂)</option><option>Grid Reliability / Uptime</option><option>Regulatory Compliance</option>
                   </select>
                 </div>
@@ -1496,7 +1496,7 @@ function CompanyDashboard({ onNavigate }: { onNavigate: (p: string) => void }) {
                           <div><label className="gc-label">Preferred Time</label><input type="time" value={newTaskTime} onChange={e => setNewTaskTime(e.target.value)} className="gc-input" /></div>
                           <div>
                             <label className="gc-label">Grid Region</label>
-                            <select value={newTaskRegion} onChange={e => setNewTaskRegion(e.target.value)} className="gc-input" style={{ cursor: "pointer" }}>
+                            <select value={newTaskRegion} onChange={e => setNewTaskRegion(e.target.value)} className="gc-input gc-select" style={{ cursor: "pointer" }}>
                               {REGIONS.map(r => <option key={r.id} value={r.id}>{r.label}</option>)}
                             </select>
                           </div>