Skip to content

Commit aba94c6

Browse files
author
Frank
committed
wip: zen
1 parent 6e318ba commit aba94c6

File tree

4 files changed

+235
-229
lines changed

4 files changed

+235
-229
lines changed

‎packages/console/app/src/routes/workspace/[id]/graph-section.module.css‎

Lines changed: 132 additions & 128 deletions
Original file line numberDiff line numberDiff line change
@@ -1,141 +1,145 @@
1-
[data-component="empty-state"] {
2-
padding: var(--space-20) var(--space-6);
3-
text-align: center;
4-
border: 1px dashed var(--color-border);
5-
border-radius: var(--border-radius-sm);
6-
height: 400px;
7-
display: flex;
8-
align-items: center;
9-
justify-content: center;
10-
}
11-
12-
[data-component="empty-state"] p {
13-
font-size: var(--font-size-sm);
14-
color: var(--color-text-muted);
15-
}
16-
17-
[data-slot="filter-container"] {
18-
margin-bottom: 0;
19-
display: flex;
20-
align-items: center;
21-
gap: var(--space-3);
22-
}
23-
24-
[data-slot="month-picker"] {
25-
display: flex;
26-
align-items: center;
27-
background-color: var(--color-bg);
28-
border: 1px solid var(--color-border);
29-
border-radius: var(--border-radius-sm);
30-
padding: 0;
31-
}
32-
33-
[data-slot="month-button"] {
34-
display: flex;
35-
align-items: center;
36-
justify-content: center;
37-
background: none;
38-
border: none !important;
39-
color: var(--color-text);
40-
cursor: pointer;
41-
padding: var(--space-2) var(--space-3);
42-
border-radius: var(--border-radius-xs);
43-
transition: background-color 0.2s;
44-
line-height: 1;
45-
}
46-
47-
[data-slot="month-button"]:hover {
48-
background-color: var(--color-bg-hover);
49-
}
50-
51-
[data-slot="month-button"] svg {
52-
display: block;
53-
width: 16px;
54-
height: 16px;
55-
stroke-width: 2;
56-
}
57-
58-
[data-slot="month-label"] {
59-
font-size: var(--font-size-sm);
60-
font-weight: 500;
61-
color: var(--color-text);
62-
line-height: 1.5;
63-
min-width: 140px;
64-
text-align: center;
65-
white-space: nowrap;
66-
}
67-
68-
[data-slot="filter-container"] [data-component="dropdown"] [data-slot="trigger"] {
69-
border: 1px solid var(--color-border);
70-
background-color: var(--color-bg);
71-
padding: var(--space-2) var(--space-3);
72-
border-radius: var(--border-radius-sm);
73-
color: var(--color-text);
74-
font-size: var(--font-size-sm);
75-
line-height: 1.5;
76-
77-
&:hover {
78-
border-color: var(--color-accent);
1+
.root {
2+
[data-component="empty-state"] {
3+
padding: var(--space-20) var(--space-6);
4+
text-align: center;
5+
border: 1px dashed var(--color-border);
6+
border-radius: var(--border-radius-sm);
7+
height: 400px;
8+
display: flex;
9+
align-items: center;
10+
justify-content: center;
11+
12+
p {
13+
font-size: var(--font-size-sm);
14+
color: var(--color-text-muted);
15+
}
7916
}
8017

81-
&:focus {
82-
outline: none;
83-
border-color: var(--color-accent);
84-
box-shadow: 0 0 0 3px var(--color-accent-alpha);
18+
[data-slot="filter-container"] {
19+
margin-bottom: 0;
20+
display: flex;
21+
align-items: center;
22+
gap: var(--space-3);
23+
24+
[data-component="dropdown"] {
25+
[data-slot="trigger"] {
26+
border: 1px solid var(--color-border);
27+
background-color: var(--color-bg);
28+
padding: var(--space-2) var(--space-3);
29+
border-radius: var(--border-radius-sm);
30+
color: var(--color-text);
31+
font-size: var(--font-size-sm);
32+
line-height: 1.5;
33+
34+
&:hover {
35+
border-color: var(--color-accent);
36+
}
37+
38+
&:focus {
39+
outline: none;
40+
border-color: var(--color-accent);
41+
box-shadow: 0 0 0 3px var(--color-accent-alpha);
42+
}
43+
}
44+
45+
[data-slot="chevron"] {
46+
opacity: 0.6;
47+
}
48+
49+
[data-slot="dropdown"] {
50+
min-width: 200px;
51+
max-height: 300px;
52+
overflow-y: auto;
53+
padding: var(--space-1);
54+
}
55+
}
8556
}
86-
}
87-
88-
[data-slot="filter-container"] [data-component="dropdown"] [data-slot="chevron"] {
89-
opacity: 0.6;
90-
}
9157

92-
[data-slot="filter-container"] [data-component="dropdown"] [data-slot="dropdown"] {
93-
min-width: 200px;
94-
max-height: 300px;
95-
overflow-y: auto;
96-
padding: var(--space-1);
97-
}
98-
99-
[data-slot="model-item"] {
100-
display: flex;
101-
align-items: center;
102-
gap: var(--space-2);
103-
padding: var(--space-2) var(--space-3);
104-
cursor: pointer;
105-
transition: background-color 0.2s;
106-
font-size: var(--font-size-sm);
107-
color: var(--color-text);
108-
border: none !important;
109-
background: none;
110-
width: 100%;
111-
text-align: left;
112-
white-space: nowrap;
113-
}
58+
[data-slot="month-picker"] {
59+
display: flex;
60+
align-items: center;
61+
background-color: var(--color-bg);
62+
border: 1px solid var(--color-border);
63+
border-radius: var(--border-radius-sm);
64+
padding: 0;
65+
}
11466

115-
[data-slot="model-item"]:hover {
116-
background: var(--color-bg-hover);
117-
}
67+
[data-slot="month-button"] {
68+
display: flex;
69+
align-items: center;
70+
justify-content: center;
71+
background: none;
72+
border: none !important;
73+
color: var(--color-text);
74+
cursor: pointer;
75+
padding: var(--space-2) var(--space-3);
76+
border-radius: var(--border-radius-xs);
77+
transition: background-color 0.2s;
78+
line-height: 1;
79+
80+
&:hover {
81+
background-color: var(--color-bg-hover);
82+
}
83+
84+
svg {
85+
display: block;
86+
width: 16px;
87+
height: 16px;
88+
stroke-width: 2;
89+
}
90+
}
11891

119-
[data-slot="model-item"] span {
120-
flex: 1;
121-
user-select: none;
122-
}
92+
[data-slot="month-label"] {
93+
font-size: var(--font-size-sm);
94+
font-weight: 500;
95+
color: var(--color-text);
96+
line-height: 1.5;
97+
min-width: 140px;
98+
text-align: center;
99+
white-space: nowrap;
100+
}
123101

124-
[data-slot="chart-container"] {
125-
padding: var(--space-6);
126-
background: var(--color-bg-secondary);
127-
border: 1px solid var(--color-border);
128-
border-radius: var(--border-radius-sm);
129-
height: 400px;
130-
}
102+
[data-slot="model-item"] {
103+
display: flex;
104+
align-items: center;
105+
gap: var(--space-2);
106+
padding: var(--space-2) var(--space-3);
107+
cursor: pointer;
108+
transition: background-color 0.2s;
109+
font-size: var(--font-size-sm);
110+
color: var(--color-text);
111+
border: none !important;
112+
background: none;
113+
width: 100%;
114+
text-align: left;
115+
white-space: nowrap;
116+
117+
&:hover {
118+
background: var(--color-bg-hover);
119+
}
120+
121+
span {
122+
flex: 1;
123+
user-select: none;
124+
}
125+
}
131126

132-
@media (max-width: 40rem) {
133127
[data-slot="chart-container"] {
134-
height: 300px;
135-
padding: var(--space-4);
128+
padding: var(--space-6);
129+
background: var(--color-bg-secondary);
130+
border: 1px solid var(--color-border);
131+
border-radius: var(--border-radius-sm);
132+
height: 400px;
136133
}
137134

138-
[data-component="empty-state"] {
139-
height: 300px;
135+
@media (max-width: 40rem) {
136+
[data-slot="chart-container"] {
137+
height: 300px;
138+
padding: var(--space-4);
139+
}
140+
141+
[data-component="empty-state"] {
142+
height: 300px;
143+
}
140144
}
141145
}

‎packages/console/app/src/routes/workspace/[id]/graph-section.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { createStore } from "solid-js/store"
99
import { withActor } from "~/context/auth.withActor"
1010
import { Dropdown } from "~/component/dropdown"
1111
import { IconChevronLeft, IconChevronRight } from "~/component/icon"
12-
import "./graph-section.module.css"
12+
import styles from "./graph-section.module.css"
1313
import {
1414
Chart,
1515
BarController,
@@ -346,7 +346,7 @@ export function GraphSection() {
346346
onCleanup(() => chartInstance?.destroy())
347347

348348
return (
349-
<section>
349+
<section class={styles.root}>
350350
<div data-slot="section-title">
351351
<h2>Cost</h2>
352352
<p>Usage costs broken down by model.</p>

0 commit comments

Comments
 (0)