Skip to content

Commit 86aeaeb

Browse files
explodingcameraexplodingcamera
committed
chore: improve combobox, dorop rules css
Signed-off-by: Henry <mail@henrygressmann.de>
1 parent af9beb7 commit 86aeaeb

9 files changed

Lines changed: 252 additions & 231 deletions

File tree

‎packages/web/src/components/settings/api-keys.tsx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ export const ApiKeys = () => {
113113
{
114114
id: "name",
115115
header: "Name",
116-
render: (key) => <strong>{key.displayName}</strong>,
116+
render: (key) => <a href={appPath(`/settings/api-keys/${key.id}`)}>{key.displayName}</a>,
117117
nowrap: true,
118118
full: true,
119119
},
@@ -226,7 +226,6 @@ export const ApiKeys = () => {
226226
onDelete={(index) =>
227227
setForm({ ...form, selectedEntities: selectedEntities.filter((_, i) => i !== index) })
228228
}
229-
noOptionsText="No more entities"
230229
/>
231230
)}
232231
</div>
@@ -254,7 +253,6 @@ export const ApiKeys = () => {
254253
onDelete={(index) =>
255254
setForm({ ...form, selectedProjects: selectedProjects.filter((_, i) => i !== index) })
256255
}
257-
noOptionsText="No more projects"
258256
/>
259257
)}
260258
</div>
@@ -429,7 +427,7 @@ const ApiKeyEditor = ({ initialKey }: { initialKey: ApiKey }) => {
429427
<>
430428
<SettingsForm>
431429
<SettingsHeader title={key.displayName} backHref={appPath("/settings/api-keys")} backLabel="Back to API Keys" />
432-
<fieldset disabled={saving || regenerating} className={`${styles.detailPanel} ${styles.userDetailPanel}`}>
430+
<fieldset disabled={saving || regenerating} className={`${styles.detailPanel} ${styles.apiKeyDetailPanel}`}>
433431
<SettingsField label="Name" description="Identifies this key in the dashboard." name="displayName">
434432
<input
435433
required
@@ -484,7 +482,6 @@ const ApiKeyEditor = ({ initialKey }: { initialKey: ApiKey }) => {
484482
setForm({ ...form, selectedEntities: next });
485483
save({ ...key, entities: next.map((tag) => tag.value) });
486484
}}
487-
noOptionsText="No more entities"
488485
/>
489486
)}
490487
</div>
@@ -528,7 +525,6 @@ const ApiKeyEditor = ({ initialKey }: { initialKey: ApiKey }) => {
528525
setForm({ ...form, selectedProjects: next });
529526
save({ ...key, projects: next.map((tag) => tag.value) });
530527
}}
531-
noOptionsText="No more projects"
532528
/>
533529
)}
534530
</div>

‎packages/web/src/components/settings/entities/index.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -270,7 +270,6 @@ const EntitySettingsContent = ({ entityId }: { entityId: string }) => {
270270
setForm({ ...form, selectedProjects: next });
271271
saveEntity(displayName, next);
272272
}}
273-
noOptionsText="No matching projects"
274273
/>
275274
<div className={styles.dangerZone}>
276275
<div>
@@ -417,7 +416,12 @@ const EntitySettingsContent = ({ entityId }: { entityId: string }) => {
417416
<SettingsPanel value="filters">
418417
<SettingsField
419418
label="Allowed hostnames"
420-
description="Only accept events from matching hostnames. Leave empty to allow all hostnames."
419+
description={
420+
<>
421+
Only accept events from matching hostnames. Leave empty to allow all hostnames. Type a hostname and
422+
press Enter. Supports exact hostnames and <code>*.</code> wildcards in the subdomain position.
423+
</>
424+
}
421425
name="allowedHostnames"
422426
>
423427
<AllowedHostnamesEditor

‎packages/web/src/components/settings/filters.module.css‎

Lines changed: 76 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -27,46 +27,32 @@
2727
line-height: 1.3;
2828
}
2929

30-
.empty {
31-
margin: 0.5rem 0 0;
32-
padding: 0.75rem;
33-
border: 1px dashed var(--field-border);
34-
border-radius: var(--radius);
35-
background: color-mix(in srgb, var(--field) 55%, transparent);
36-
color: var(--text-muted);
37-
font-size: 0.875rem;
38-
text-align: center;
39-
}
40-
4130
.ruleFooter {
4231
display: flex;
43-
margin-top: 0.5rem;
44-
justify-content: flex-start;
32+
justify-content: center;
33+
padding: 0.2rem 0.65rem;
34+
border-top: 1px solid var(--border);
4535
}
4636

47-
.ruleFooter button,
48-
.ruleFooter button:hover {
37+
.ruleFooter button {
38+
display: inline-flex;
39+
flex-direction: row-reverse;
40+
align-items: center;
41+
gap: 0.4rem;
4942
width: fit-content;
43+
min-height: 1.75rem;
5044
margin: 0;
51-
padding: 0.25rem 0;
45+
padding: 0.2rem 0.5rem;
5246
border: 0;
47+
border-radius: var(--control-radius);
5348
background: transparent;
54-
color: var(--settings-icon-color);
55-
font-size: 0.875rem;
56-
font-weight: 500;
57-
opacity: 0.78;
49+
color: var(--text);
5850
box-shadow: none;
59-
white-space: nowrap;
60-
}
61-
62-
.ruleFooter button::before {
63-
margin-right: 0.35rem;
64-
content: "+";
6551
}
6652

6753
.ruleFooter button:hover {
68-
color: var(--settings-icon-color);
69-
opacity: 1;
54+
background: var(--surface-hover);
55+
color: var(--text);
7056
}
7157

7258
.addRuleAction {
@@ -99,12 +85,17 @@
9985
opacity: 1;
10086
}
10187

102-
.ruleFooter button:focus-visible,
10388
.addRuleAction button:focus-visible {
10489
outline: 2px solid var(--focus);
10590
outline-offset: 2px;
10691
}
10792

93+
.ruleFooter button:focus-visible {
94+
outline: none;
95+
background: var(--surface-hover);
96+
text-decoration: underline;
97+
}
98+
10899
.hostnameEditor {
109100
display: grid;
110101
gap: 0.35rem;
@@ -114,24 +105,25 @@
114105
display: flex;
115106
flex-wrap: wrap;
116107
align-items: center;
117-
gap: 0.35rem;
108+
gap: 0.25rem;
118109
min-height: 2.15rem;
119-
padding: 0.15rem 0.25rem;
110+
padding: 0.15rem 0.2rem;
120111
border: 1px solid var(--field-border);
121112
border-radius: var(--control-radius);
122113
background-color: var(--field);
123114
color: var(--text);
124115
}
125116

126117
.hostnameBox:focus-within {
127-
border-color: var(--accent-hover);
118+
border-color: var(--focus);
128119
}
129120

130121
.hostnameBox input {
131122
flex: 1;
132123
min-width: 6rem;
133124
height: 1.5rem;
134125
min-height: 1.5rem;
126+
font-size: 0.9rem;
135127
margin: 0;
136128
padding: 0 0.25rem;
137129
border: 0;
@@ -142,6 +134,10 @@
142134
appearance: none;
143135
}
144136

137+
.hostnameBox:has(.hostnameChip) input {
138+
padding-left: 0;
139+
}
140+
145141
.hostnameBox input:focus,
146142
.hostnameBox input:focus-visible {
147143
box-shadow: none;
@@ -158,12 +154,12 @@
158154
align-items: center;
159155
max-width: 100%;
160156
gap: 0.25rem;
161-
padding: 0.18rem 0.28rem 0.18rem 0.55rem;
162-
border-radius: 0.4rem;
163-
background: var(--accent-fill);
157+
padding: 0.25rem 0.28rem 0.25rem 0.55rem;
158+
border-radius: 0.25rem;
159+
background: var(--tag-background);
164160
color: var(--accent-contrast);
165-
font-size: 0.875rem;
166-
line-height: 1.4;
161+
font-size: 0.9rem;
162+
line-height: 1.25;
167163
}
168164

169165
.hostnameChipRemove {
@@ -174,7 +170,7 @@
174170
width: 1.15rem;
175171
height: 1.15rem;
176172
cursor: pointer;
177-
border-radius: 0.4rem;
173+
border-radius: 0.25rem;
178174
color: inherit;
179175
}
180176

@@ -186,18 +182,8 @@
186182
outline: none;
187183
}
188184

189-
.hostnameHelp {
190-
color: var(--text-muted);
191-
}
192-
193-
.hostnameHelp code {
194-
padding: 0;
195-
background: transparent;
196-
}
197-
198185
.filterList {
199186
display: grid;
200-
gap: 0.45rem;
201187
}
202188

203189
.ruleList {
@@ -208,59 +194,55 @@
208194

209195
.ruleCard {
210196
margin: 0;
211-
padding: 0.85rem 0.95rem;
212-
border: 1px solid var(--field-border);
197+
border: 1px solid var(--surface-outline);
213198
border-radius: var(--radius);
214-
background: color-mix(in srgb, var(--field) 45%, transparent);
215-
box-shadow: none;
199+
background: var(--inset-surface);
200+
overflow: hidden;
201+
animation: ruleEnter 0.16s cubic-bezier(0.2, 0.8, 0.2, 1);
216202
}
217203

218-
.ruleCard:has(> small) {
219-
display: grid;
220-
grid-template-columns: minmax(0, 1fr) auto;
221-
align-items: center;
222-
gap: 0.5rem 1rem;
204+
@keyframes ruleEnter {
205+
from {
206+
opacity: 0;
207+
}
223208
}
224209

225-
.ruleCard:has(> small) .ruleHeader {
226-
grid-column: 1 / -1;
210+
.ruleCard[data-removing] {
211+
pointer-events: none;
212+
animation: ruleExit 0.14s ease-in forwards;
227213
}
228214

229-
.ruleCard:has(> small) > small {
230-
color: var(--text-muted);
215+
@keyframes ruleExit {
216+
to {
217+
opacity: 0;
218+
}
231219
}
232220

233-
.ruleCard:has(> small) > .ruleFooter {
234-
margin: 0;
221+
@media (prefers-reduced-motion: reduce) {
222+
.ruleCard {
223+
animation: none;
224+
}
225+
}
226+
227+
.ruleCard:has(> small) > small {
228+
display: block;
229+
padding: 0.5rem 0.65rem;
230+
color: var(--text-muted);
235231
}
236232

237233
.ruleHeader {
238234
display: flex;
239-
align-items: flex-start;
235+
align-items: center;
240236
justify-content: space-between;
241237
gap: 0.75rem;
242-
margin-bottom: 0.6rem;
238+
padding: 0.45rem 0.65rem;
239+
border-bottom: 1px solid var(--border);
243240
}
244241

245-
.ruleTitle {
246-
display: flex;
247-
flex-wrap: wrap;
248-
align-items: baseline;
249-
gap: 0.25rem;
250-
}
251-
252-
.ruleTitle small {
242+
.ruleHeader strong {
253243
color: var(--text-muted);
254-
}
255-
256-
.ruleTitle small::before {
257-
margin-right: 0.25rem;
258-
content: "·";
259-
}
260-
261-
.ruleTitle strong {
262-
font-size: 0.9rem;
263-
font-weight: 500;
244+
font-size: 0.8rem;
245+
font-weight: 600;
264246
}
265247

266248
.ruleActions {
@@ -302,8 +284,10 @@
302284

303285
.ruleActions .iconButton,
304286
.ruleActions .iconButton:hover {
305-
margin-top: -0.2rem;
306-
margin-right: -0.3rem;
287+
width: 1.25rem;
288+
height: 1.25rem;
289+
min-height: 1.25rem;
290+
flex-basis: 1.25rem;
307291
}
308292

309293
.ruleActions .iconButton:focus-visible,
@@ -318,10 +302,11 @@
318302
grid-template-columns: minmax(0, 1fr) auto;
319303
align-items: center;
320304
gap: 0.75rem;
321-
padding: 0.55rem 0.65rem;
322-
border: 1px solid var(--border);
323-
border-radius: var(--radius);
324-
background: var(--field);
305+
padding: 0.5rem 0.65rem;
306+
}
307+
308+
.filterRow + .filterRow {
309+
border-top: 1px solid var(--border);
325310
}
326311

327312
.filterText {
@@ -338,28 +323,17 @@
338323
font-weight: 600;
339324
}
340325

341-
.filterText code {
326+
.filterValue {
342327
max-width: 100%;
343328
overflow: hidden;
344329
text-overflow: ellipsis;
345330
white-space: nowrap;
346-
padding: 0.12rem 0.3rem;
347-
background: var(--surface-hover);
348331
color: var(--text);
332+
font-weight: 500;
349333
}
350334

351335
.filterRow button {
352336
width: fit-content;
353337
margin: 0;
354338
padding: 0.32rem 0.55rem;
355339
}
356-
357-
@media (max-width: 700px) {
358-
.ruleCard:has(> small) {
359-
grid-template-columns: 1fr;
360-
}
361-
362-
.ruleCard:has(> small) > .ruleFooter {
363-
justify-content: flex-start;
364-
}
365-
}

0 commit comments

Comments
 (0)