Skip to content

Commit e09c8cd

Browse files
subodhkjclaude
andcommitted
fix(executive-dashboard): remove Both filter, improve filter button visibility
- Removed "Both" button; default view is V1 Forms - Buttons styled as a joined segmented control (shared border, no gap) - V1 always renders in blue, EDS always in purple — colour-coded even when inactive - Active state uses solid fill (blue/purple); inactive has coloured text + white bg - Hover shows a tinted background matching the form type colour - Button labels expanded to "V1 Forms" / "EDS Forms" for clarity Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1 parent f386fa3 commit e09c8cd

1 file changed

Lines changed: 21 additions & 16 deletions

File tree

dashboards/executive-dashboard.js

Lines changed: 21 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -188,25 +188,31 @@ const STYLE = `
188188
.form-filter-btns{
189189
margin-left:auto;
190190
display:flex;
191-
gap:6px;
191+
gap:0;
192192
align-items:center;
193+
border-radius:8px;
194+
overflow:hidden;
195+
border:1px solid var(--border);
193196
}
194197
.form-filter-btn{
195-
padding:4px 12px;
196-
border-radius:6px;
197-
border:1px solid var(--border);
198+
padding:7px 20px;
199+
border:none;
200+
border-right:1px solid var(--border);
198201
background:white;
199-
font-size:11px;
200-
font-weight:600;
201-
color:var(--muted);
202+
font-size:12px;
203+
font-weight:700;
204+
letter-spacing:.4px;
202205
cursor:pointer;
203-
transition:background .15s,color .15s,border-color .15s;
206+
transition:background .15s,color .15s;
204207
font-family:'IBM Plex Sans',system-ui,sans-serif;
205208
}
206-
.form-filter-btn:hover{background:#f8fafc}
207-
.form-filter-btn.active[data-filter="both"]{background:var(--navy);color:white;border-color:var(--navy)}
208-
.form-filter-btn.active[data-filter="v1"]{background:var(--blue-lt);color:var(--blue);border-color:var(--blue-mid)}
209-
.form-filter-btn.active[data-filter="eds"]{background:var(--purple-lt);color:var(--purple);border-color:var(--purple-mid)}
209+
.form-filter-btn:last-child{border-right:none}
210+
.form-filter-btn[data-filter="v1"]{color:var(--blue)}
211+
.form-filter-btn[data-filter="eds"]{color:var(--purple)}
212+
.form-filter-btn[data-filter="v1"]:hover:not(.active){background:var(--blue-lt)}
213+
.form-filter-btn[data-filter="eds"]:hover:not(.active){background:var(--purple-lt)}
214+
.form-filter-btn.active[data-filter="v1"]{background:var(--blue);color:white}
215+
.form-filter-btn.active[data-filter="eds"]{background:var(--purple);color:white}
210216
.section-hdr h2{
211217
font-family:'Playfair Display',Georgia,serif;
212218
font-size:20px;
@@ -1074,12 +1080,11 @@ class ExecutiveDashboard extends HTMLElement {
10741080
<h2>Weekly Trends</h2>
10751081
<span class="section-sub">${trendsSubText}</span>
10761082
<div class="form-filter-btns" id="trends-filter-btns">
1077-
<button class="form-filter-btn active" data-filter="both">Both</button>
1078-
<button class="form-filter-btn" data-filter="v1">V1</button>
1079-
<button class="form-filter-btn" data-filter="eds">EDS</button>
1083+
<button class="form-filter-btn active" data-filter="v1">V1 Forms</button>
1084+
<button class="form-filter-btn" data-filter="eds">EDS Forms</button>
10801085
</div>
10811086
</div>
1082-
<div id="trends-table-wrap">${renderTrendsTable(aprilWeeks)}</div>
1087+
<div id="trends-table-wrap">${renderTrendsTable(aprilWeeks, 'v1')}</div>
10831088
</div>
10841089
10851090
<div class="monthly-section">

0 commit comments

Comments
 (0)