Skip to content

feat: standardise dropdown UI and fix dark-mode visibility issues #46

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
yatharthchopra2424 merged 2 commits into from
Apr 23, 2026
Merged

feat: standardise dropdown UI and fix dark-mode visibility issues #46

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7c73b92
feat: standardise dropdown UI and fix dark-mode visibility issues
yatharthchopra2424 Apr 23, 2026
7811d38
Merge branch 'main' into yatharth-full-frontend-upgrade-V3
yatharthchopra2424 Apr 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion gridcast-react/app/(protected)/company/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) => (
Expand Down
6 changes: 5 additions & 1 deletion gridcast-react/app/(protected)/onboarding/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)}
Expand Down Expand Up @@ -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)}
Expand Down Expand Up @@ -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)}
Expand Down Expand Up @@ -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)}
Expand All @@ -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>
Expand Down
25 changes: 25 additions & 0 deletions gridcast-react/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
12 changes: 6 additions & 6 deletions gridcast-react/components/GridCastApp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1039,15 +1039,15 @@ 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>
{industryDef && <div style={{ marginTop: 10, background: "rgba(6,182,212,0.06)", border: "1px solid rgba(6,182,212,0.15)", borderRadius: 8, padding: "10px 14px", fontSize: 12, color: "#94a3b8" }}>⚡ Typical base load: <span style={{ color: "#06b6d4", fontFamily: "JetBrains Mono" }}>{industryDef.baseLoad} MW</span> · PUE: <span style={{ color: "#f59e0b", fontFamily: "JetBrains Mono" }}>{industryDef.pue}</span></div>}
</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>
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
Loading