Skip to content

Commit a3995d6

Browse files
authored
style: selected button highlighted (#743)
1 parent 220979b commit a3995d6

File tree

9 files changed

+38
-38
lines changed

9 files changed

+38
-38
lines changed

ui/src/app/(auth)/chip/[chipId]/qubit/[qubitId]/page.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ function QubitDetailPageContent() {
110110
<div className="join rounded-lg overflow-hidden">
111111
<button
112112
className={`join-item btn btn-sm ${
113-
viewMode === "dashboard" ? "btn-active" : ""
113+
viewMode === "dashboard" ? "btn-primary" : ""
114114
}`}
115115
onClick={() => setViewMode("dashboard")}
116116
>
@@ -119,7 +119,7 @@ function QubitDetailPageContent() {
119119
</button>
120120
<button
121121
className={`join-item btn btn-sm ${
122-
viewMode === "history" ? "btn-active" : ""
122+
viewMode === "history" ? "btn-primary" : ""
123123
}`}
124124
onClick={() => setViewMode("history")}
125125
>
@@ -128,7 +128,7 @@ function QubitDetailPageContent() {
128128
</button>
129129
<button
130130
className={`join-item btn btn-sm ${
131-
viewMode === "timeseries" ? "btn-active" : ""
131+
viewMode === "timeseries" ? "btn-primary" : ""
132132
}`}
133133
onClick={() => setViewMode("timeseries")}
134134
>

ui/src/components/features/analysis/CDFView.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -787,19 +787,19 @@ export function CDFView() {
787787
<div className="flex flex-wrap items-center gap-2 sm:gap-3">
788788
<div className="join h-8 sm:h-9">
789789
<button
790-
className={`join-item btn btn-sm h-full ${timeRange === "1d" ? "btn-active" : ""}`}
790+
className={`join-item btn btn-sm h-full ${timeRange === "1d" ? "btn-primary" : ""}`}
791791
onClick={() => setTimeRange("1d")}
792792
>
793793
1D
794794
</button>
795795
<button
796-
className={`join-item btn btn-sm h-full ${timeRange === "7d" ? "btn-active" : ""}`}
796+
className={`join-item btn btn-sm h-full ${timeRange === "7d" ? "btn-primary" : ""}`}
797797
onClick={() => setTimeRange("7d")}
798798
>
799799
7D
800800
</button>
801801
<button
802-
className={`join-item btn btn-sm h-full ${timeRange === "30d" ? "btn-active" : ""}`}
802+
className={`join-item btn btn-sm h-full ${timeRange === "30d" ? "btn-primary" : ""}`}
803803
onClick={() => setTimeRange("30d")}
804804
>
805805
30D
@@ -808,13 +808,13 @@ export function CDFView() {
808808

809809
<div className="join h-8 sm:h-9">
810810
<button
811-
className={`join-item btn btn-xs sm:btn-sm h-full ${selectionMode === "latest" ? "btn-active" : ""}`}
811+
className={`join-item btn btn-xs sm:btn-sm h-full ${selectionMode === "latest" ? "btn-primary" : ""}`}
812812
onClick={() => setSelectionMode("latest")}
813813
>
814814
Latest
815815
</button>
816816
<button
817-
className={`join-item btn btn-xs sm:btn-sm h-full ${selectionMode === "best" ? "btn-active" : ""} ${!isBestModeSupported ? "btn-disabled" : ""}`}
817+
className={`join-item btn btn-xs sm:btn-sm h-full ${selectionMode === "best" ? "btn-primary" : ""} ${!isBestModeSupported ? "btn-disabled" : ""}`}
818818
onClick={() => setSelectionMode("best")}
819819
disabled={!isBestModeSupported}
820820
title={
@@ -826,7 +826,7 @@ export function CDFView() {
826826
Best
827827
</button>
828828
<button
829-
className={`join-item btn btn-xs sm:btn-sm h-full ${selectionMode === "average" ? "btn-active" : ""}`}
829+
className={`join-item btn btn-xs sm:btn-sm h-full ${selectionMode === "average" ? "btn-primary" : ""}`}
830830
onClick={() => setSelectionMode("average")}
831831
title="Show average values"
832832
>

ui/src/components/features/analysis/CorrelationView/index.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -641,19 +641,19 @@ export function CorrelationView() {
641641
<div className="flex flex-wrap items-center gap-2 sm:gap-3">
642642
<div className="join h-8 sm:h-9">
643643
<button
644-
className={`join-item btn btn-sm h-full ${timeRange === "1d" ? "btn-active" : ""}`}
644+
className={`join-item btn btn-sm h-full ${timeRange === "1d" ? "btn-primary" : ""}`}
645645
onClick={() => setTimeRange("1d")}
646646
>
647647
1D
648648
</button>
649649
<button
650-
className={`join-item btn btn-sm h-full ${timeRange === "7d" ? "btn-active" : ""}`}
650+
className={`join-item btn btn-sm h-full ${timeRange === "7d" ? "btn-primary" : ""}`}
651651
onClick={() => setTimeRange("7d")}
652652
>
653653
7D
654654
</button>
655655
<button
656-
className={`join-item btn btn-sm h-full ${timeRange === "30d" ? "btn-active" : ""}`}
656+
className={`join-item btn btn-sm h-full ${timeRange === "30d" ? "btn-primary" : ""}`}
657657
onClick={() => setTimeRange("30d")}
658658
>
659659
30D
@@ -662,13 +662,13 @@ export function CorrelationView() {
662662

663663
<div className="join h-8 sm:h-9">
664664
<button
665-
className={`join-item btn btn-xs sm:btn-sm h-full ${selectionMode === "latest" ? "btn-active" : ""}`}
665+
className={`join-item btn btn-xs sm:btn-sm h-full ${selectionMode === "latest" ? "btn-primary" : ""}`}
666666
onClick={() => setSelectionMode("latest")}
667667
>
668668
Latest
669669
</button>
670670
<button
671-
className={`join-item btn btn-xs sm:btn-sm h-full ${selectionMode === "best" ? "btn-active" : ""} ${!isBestModeSupported ? "btn-disabled" : ""}`}
671+
className={`join-item btn btn-xs sm:btn-sm h-full ${selectionMode === "best" ? "btn-primary" : ""} ${!isBestModeSupported ? "btn-disabled" : ""}`}
672672
onClick={() => setSelectionMode("best")}
673673
disabled={!isBestModeSupported}
674674
title={
@@ -680,7 +680,7 @@ export function CorrelationView() {
680680
Best
681681
</button>
682682
<button
683-
className={`join-item btn btn-xs sm:btn-sm h-full ${selectionMode === "average" ? "btn-active" : ""}`}
683+
className={`join-item btn btn-xs sm:btn-sm h-full ${selectionMode === "average" ? "btn-primary" : ""}`}
684684
onClick={() => setSelectionMode("average")}
685685
title="Show average values"
686686
>

ui/src/components/features/analysis/HistogramView.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -798,19 +798,19 @@ export function HistogramView() {
798798
<div className="flex flex-wrap items-center gap-2 sm:gap-3">
799799
<div className="join h-8 sm:h-9">
800800
<button
801-
className={`join-item btn btn-sm h-full ${timeRange === "1d" ? "btn-active" : ""}`}
801+
className={`join-item btn btn-sm h-full ${timeRange === "1d" ? "btn-primary" : ""}`}
802802
onClick={() => setTimeRange("1d")}
803803
>
804804
1D
805805
</button>
806806
<button
807-
className={`join-item btn btn-sm h-full ${timeRange === "7d" ? "btn-active" : ""}`}
807+
className={`join-item btn btn-sm h-full ${timeRange === "7d" ? "btn-primary" : ""}`}
808808
onClick={() => setTimeRange("7d")}
809809
>
810810
7D
811811
</button>
812812
<button
813-
className={`join-item btn btn-sm h-full ${timeRange === "30d" ? "btn-active" : ""}`}
813+
className={`join-item btn btn-sm h-full ${timeRange === "30d" ? "btn-primary" : ""}`}
814814
onClick={() => setTimeRange("30d")}
815815
>
816816
30D
@@ -819,13 +819,13 @@ export function HistogramView() {
819819

820820
<div className="join h-8 sm:h-9">
821821
<button
822-
className={`join-item btn btn-xs sm:btn-sm h-full ${selectionMode === "latest" ? "btn-active" : ""}`}
822+
className={`join-item btn btn-xs sm:btn-sm h-full ${selectionMode === "latest" ? "btn-primary" : ""}`}
823823
onClick={() => setSelectionMode("latest")}
824824
>
825825
Latest
826826
</button>
827827
<button
828-
className={`join-item btn btn-xs sm:btn-sm h-full ${selectionMode === "best" ? "btn-active" : ""} ${!isBestModeSupported ? "btn-disabled" : ""}`}
828+
className={`join-item btn btn-xs sm:btn-sm h-full ${selectionMode === "best" ? "btn-primary" : ""} ${!isBestModeSupported ? "btn-disabled" : ""}`}
829829
onClick={() => setSelectionMode("best")}
830830
disabled={!isBestModeSupported}
831831
title={
@@ -837,7 +837,7 @@ export function HistogramView() {
837837
Best
838838
</button>
839839
<button
840-
className={`join-item btn btn-xs sm:btn-sm h-full ${selectionMode === "average" ? "btn-active" : ""}`}
840+
className={`join-item btn btn-xs sm:btn-sm h-full ${selectionMode === "average" ? "btn-primary" : ""}`}
841841
onClick={() => setSelectionMode("average")}
842842
title="Show average values"
843843
>

ui/src/components/features/execution/ExecutionClient.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -471,7 +471,7 @@ export function ExecutionDetailClient({
471471
<div className="btn-group self-start sm:self-auto">
472472
<button
473473
className={`btn btn-sm ${
474-
taskViewMode === "list" ? "btn-active" : ""
474+
taskViewMode === "list" ? "btn-primary" : ""
475475
}`}
476476
onClick={() => setTaskViewMode("list")}
477477
>
@@ -480,7 +480,7 @@ export function ExecutionDetailClient({
480480
</button>
481481
<button
482482
className={`btn btn-sm ${
483-
taskViewMode === "grid" ? "btn-active" : ""
483+
taskViewMode === "grid" ? "btn-primary" : ""
484484
}`}
485485
onClick={() => setTaskViewMode("grid")}
486486
>

ui/src/components/features/metrics/MetricsPageContent.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -347,7 +347,7 @@ export function MetricsPageContent() {
347347
<div className="join rounded-lg overflow-hidden">
348348
<button
349349
className={`join-item btn btn-sm ${
350-
timeRange === "1d" ? "btn-active" : ""
350+
timeRange === "1d" ? "btn-primary" : ""
351351
}`}
352352
onClick={() => setTimeRange("1d")}
353353
>
@@ -356,7 +356,7 @@ export function MetricsPageContent() {
356356
</button>
357357
<button
358358
className={`join-item btn btn-sm ${
359-
timeRange === "7d" ? "btn-active" : ""
359+
timeRange === "7d" ? "btn-primary" : ""
360360
}`}
361361
onClick={() => setTimeRange("7d")}
362362
>
@@ -365,7 +365,7 @@ export function MetricsPageContent() {
365365
</button>
366366
<button
367367
className={`join-item btn btn-sm ${
368-
timeRange === "30d" ? "btn-active" : ""
368+
timeRange === "30d" ? "btn-primary" : ""
369369
}`}
370370
onClick={() => setTimeRange("30d")}
371371
>
@@ -374,7 +374,7 @@ export function MetricsPageContent() {
374374
</button>
375375
<button
376376
className={`join-item btn btn-sm gap-1 ${
377-
timeRange === "custom" ? "btn-active" : ""
377+
timeRange === "custom" ? "btn-primary" : ""
378378
}`}
379379
onClick={() => setTimeRange("custom")}
380380
title="Set a custom time range in days"
@@ -397,15 +397,15 @@ export function MetricsPageContent() {
397397
<div className="join rounded-lg overflow-hidden">
398398
<button
399399
className={`join-item btn btn-sm ${
400-
selectionMode === "latest" ? "btn-active" : ""
400+
selectionMode === "latest" ? "btn-primary" : ""
401401
}`}
402402
onClick={() => setSelectionMode("latest")}
403403
>
404404
<span>Latest</span>
405405
</button>
406406
<button
407407
className={`join-item btn btn-sm ${
408-
selectionMode === "best" ? "btn-active" : ""
408+
selectionMode === "best" ? "btn-primary" : ""
409409
} ${!isBestModeSupported ? "btn-disabled" : ""}`}
410410
onClick={() => setSelectionMode("best")}
411411
disabled={!isBestModeSupported}
@@ -419,7 +419,7 @@ export function MetricsPageContent() {
419419
</button>
420420
<button
421421
className={`join-item btn btn-sm ${
422-
selectionMode === "average" ? "btn-active" : ""
422+
selectionMode === "average" ? "btn-primary" : ""
423423
}`}
424424
onClick={() => setSelectionMode("average")}
425425
title="Show average values within time range"

ui/src/components/features/provenance/LineageExplorerPanel.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -237,22 +237,22 @@ export function LineageExplorerPanel({
237237
</div>
238238
<div className="join">
239239
<button
240-
className={`btn btn-xs sm:btn-sm join-item ${viewMode === "graph" ? "btn-active" : ""}`}
240+
className={`btn btn-xs sm:btn-sm join-item ${viewMode === "graph" ? "btn-primary" : ""}`}
241241
onClick={() => setViewMode("graph")}
242242
>
243243
<GraphIcon className="h-3 w-3 sm:h-4 sm:w-4" />
244244
Graph
245245
</button>
246246
<button
247-
className={`btn btn-xs sm:btn-sm join-item ${viewMode === "list" ? "btn-active" : ""}`}
247+
className={`btn btn-xs sm:btn-sm join-item ${viewMode === "list" ? "btn-primary" : ""}`}
248248
onClick={() => setViewMode("list")}
249249
>
250250
<LayoutGrid className="h-3 w-3 sm:h-4 sm:w-4" />
251251
List
252252
</button>
253253
{versions.length > 1 && (
254254
<button
255-
className={`btn btn-xs sm:btn-sm join-item ${viewMode === "compare" ? "btn-active" : ""}`}
255+
className={`btn btn-xs sm:btn-sm join-item ${viewMode === "compare" ? "btn-primary" : ""}`}
256256
onClick={() => setViewMode("compare")}
257257
>
258258
<GitCompare className="h-3 w-3 sm:h-4 sm:w-4" />

ui/src/components/features/provenance/ProvenanceGraph.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1039,7 +1039,7 @@ export function ProvenanceGraph({
10391039
{effectiveShowAll ? "All" : `${focusHops}h`}
10401040
</div>
10411041
<button
1042-
className={`btn btn-xs pointer-events-auto ${effectiveShowAll ? "btn-active" : ""}`}
1042+
className={`btn btn-xs pointer-events-auto ${effectiveShowAll ? "btn-primary" : ""}`}
10431043
onClick={() => setShowAll((v) => !v)}
10441044
>
10451045
All
@@ -1061,13 +1061,13 @@ export function ProvenanceGraph({
10611061
</div>
10621062
<div className="join ml-2">
10631063
<button
1064-
className={`btn btn-xs join-item pointer-events-auto ${viewDetail === "full" ? "btn-active" : ""}`}
1064+
className={`btn btn-xs join-item pointer-events-auto ${viewDetail === "full" ? "btn-primary" : ""}`}
10651065
onClick={() => setViewDetail("full")}
10661066
>
10671067
Detail
10681068
</button>
10691069
<button
1070-
className={`btn btn-xs join-item pointer-events-auto ${viewDetail === "taskFlow" ? "btn-active" : ""}`}
1070+
className={`btn btn-xs join-item pointer-events-auto ${viewDetail === "taskFlow" ? "btn-primary" : ""}`}
10711071
onClick={() => setViewDetail("taskFlow")}
10721072
>
10731073
Task Flow

ui/src/components/features/qubit/TaskHistoryViewer.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -172,7 +172,7 @@ export function TaskHistoryViewer({
172172
<div className="join">
173173
<button
174174
className={`join-item btn btn-sm ${
175-
historyViewMode === "list" ? "btn-active" : ""
175+
historyViewMode === "list" ? "btn-primary" : ""
176176
}`}
177177
onClick={() => setHistoryViewMode("list")}
178178
title="List View"
@@ -182,7 +182,7 @@ export function TaskHistoryViewer({
182182
</button>
183183
<button
184184
className={`join-item btn btn-sm ${
185-
historyViewMode === "grid" ? "btn-active" : ""
185+
historyViewMode === "grid" ? "btn-primary" : ""
186186
}`}
187187
onClick={() => setHistoryViewMode("grid")}
188188
title="Grid View"

0 commit comments

Comments
 (0)