Skip to content

Commit d961981

Browse files
adamdotdevinadamdotdevin
committed
fix(app): list item background colors
1 parent 5576662 commit d961981

6 files changed

Lines changed: 33 additions & 24 deletions

File tree

‎packages/app/src/components/dialog-select-server.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@ function ServerForm(props: ServerFormProps) {
121121

122122
return (
123123
<div class="px-5">
124-
<div class="bg-surface-raised-base rounded-md p-5 flex flex-col gap-3">
124+
<div class="bg-surface-base rounded-md p-5 flex flex-col gap-3">
125125
<div class="flex-1 min-w-0 [&_[data-slot=input-wrapper]]:relative">
126126
<TextField
127127
type="text"
@@ -542,7 +542,7 @@ export function DialogSelectServer() {
542542
if (x) select(x)
543543
}}
544544
divider={true}
545-
class="px-5 [&_[data-slot=list-search-wrapper]]:w-full [&_[data-slot=list-scroll]]h-[300px] [&_[data-slot=list-scroll]]:overflow-y-auto [&_[data-slot=list-items]]:bg-surface-raised-base [&_[data-slot=list-items]]:rounded-md [&_[data-slot=list-item]]:min-h-14 [&_[data-slot=list-item]]:p-3 [&_[data-slot=list-item]]:!bg-transparent"
545+
class="px-5 [&_[data-slot=list-search-wrapper]]:w-full [&_[data-slot=list-scroll]]h-[300px] [&_[data-slot=list-scroll]]:overflow-y-auto [&_[data-slot=list-items]]:bg-surface-base [&_[data-slot=list-items]]:rounded-md [&_[data-slot=list-item]]:min-h-14 [&_[data-slot=list-item]]:p-3 [&_[data-slot=list-item]]:!bg-transparent"
546546
>
547547
{(i) => {
548548
const key = ServerConnection.key(i)

‎packages/app/src/components/settings-general.tsx‎

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { usePlatform } from "@/context/platform"
1212
import { useSettings, monoFontFamily } from "@/context/settings"
1313
import { playSound, SOUND_OPTIONS } from "@/utils/sound"
1414
import { Link } from "./link"
15+
import { SettingsList } from "./settings-list"
1516

1617
let demoSoundState = {
1718
cleanup: undefined as (() => void) | undefined,
@@ -177,7 +178,7 @@ export const SettingsGeneral: Component = () => {
177178

178179
const GeneralSection = () => (
179180
<div class="flex flex-col gap-1">
180-
<div class="bg-surface-raised-base px-4 rounded-lg">
181+
<SettingsList>
181182
<SettingsRow
182183
title={language.t("settings.general.row.language.title")}
183184
description={language.t("settings.general.row.language.description")}
@@ -248,15 +249,15 @@ export const SettingsGeneral: Component = () => {
248249
triggerStyle={{ "min-width": "180px" }}
249250
/>
250251
</SettingsRow>
251-
</div>
252+
</SettingsList>
252253
</div>
253254
)
254255

255256
const AppearanceSection = () => (
256257
<div class="flex flex-col gap-1">
257258
<h3 class="text-14-medium text-text-strong pb-2">{language.t("settings.general.section.appearance")}</h3>
258259

259-
<div class="bg-surface-raised-base px-4 rounded-lg">
260+
<SettingsList>
260261
<SettingsRow
261262
title={language.t("settings.general.row.colorScheme.title")}
262263
description={language.t("settings.general.row.colorScheme.description")}
@@ -333,15 +334,15 @@ export const SettingsGeneral: Component = () => {
333334
)}
334335
</Select>
335336
</SettingsRow>
336-
</div>
337+
</SettingsList>
337338
</div>
338339
)
339340

340341
const NotificationsSection = () => (
341342
<div class="flex flex-col gap-1">
342343
<h3 class="text-14-medium text-text-strong pb-2">{language.t("settings.general.section.notifications")}</h3>
343344

344-
<div class="bg-surface-raised-base px-4 rounded-lg">
345+
<SettingsList>
345346
<SettingsRow
346347
title={language.t("settings.general.notifications.agent.title")}
347348
description={language.t("settings.general.notifications.agent.description")}
@@ -377,15 +378,15 @@ export const SettingsGeneral: Component = () => {
377378
/>
378379
</div>
379380
</SettingsRow>
380-
</div>
381+
</SettingsList>
381382
</div>
382383
)
383384

384385
const SoundsSection = () => (
385386
<div class="flex flex-col gap-1">
386387
<h3 class="text-14-medium text-text-strong pb-2">{language.t("settings.general.section.sounds")}</h3>
387388

388-
<div class="bg-surface-raised-base px-4 rounded-lg">
389+
<SettingsList>
389390
<SettingsRow
390391
title={language.t("settings.general.sounds.agent.title")}
391392
description={language.t("settings.general.sounds.agent.description")}
@@ -430,15 +431,15 @@ export const SettingsGeneral: Component = () => {
430431
)}
431432
/>
432433
</SettingsRow>
433-
</div>
434+
</SettingsList>
434435
</div>
435436
)
436437

437438
const UpdatesSection = () => (
438439
<div class="flex flex-col gap-1">
439440
<h3 class="text-14-medium text-text-strong pb-2">{language.t("settings.general.section.updates")}</h3>
440441

441-
<div class="bg-surface-raised-base px-4 rounded-lg">
442+
<SettingsList>
442443
<SettingsRow
443444
title={language.t("settings.updates.row.startup.title")}
444445
description={language.t("settings.updates.row.startup.description")}
@@ -474,7 +475,7 @@ export const SettingsGeneral: Component = () => {
474475
: language.t("settings.updates.action.checkNow")}
475476
</Button>
476477
</SettingsRow>
477-
</div>
478+
</SettingsList>
478479
</div>
479480
)
480481

@@ -504,7 +505,7 @@ export const SettingsGeneral: Component = () => {
504505
<div class="flex flex-col gap-1">
505506
<h3 class="text-14-medium text-text-strong pb-2">{language.t("settings.desktop.section.wsl")}</h3>
506507
507-
<div class="bg-surface-raised-base px-4 rounded-lg">
508+
<SettingsList>
508509
<SettingsRow
509510
title={language.t("settings.desktop.wsl.title")}
510511
description={language.t("settings.desktop.wsl.description")}
@@ -517,7 +518,7 @@ export const SettingsGeneral: Component = () => {
517518
/>
518519
</div>
519520
</SettingsRow>
520-
</div>
521+
</SettingsList>
521522
</div>
522523
)
523524
}}
@@ -537,7 +538,7 @@ export const SettingsGeneral: Component = () => {
537538
<div class="flex flex-col gap-1">
538539
<h3 class="text-14-medium text-text-strong pb-2">{language.t("settings.general.section.display")}</h3>
539540

540-
<div class="bg-surface-raised-base px-4 rounded-lg">
541+
<SettingsList>
541542
<SettingsRow
542543
title={
543544
<div class="flex items-center gap-2">
@@ -555,7 +556,7 @@ export const SettingsGeneral: Component = () => {
555556
<Switch checked={value() === "wayland"} onChange={onChange} />
556557
</div>
557558
</SettingsRow>
558-
</div>
559+
</SettingsList>
559560
</div>
560561
)
561562
}}

‎packages/app/src/components/settings-keybinds.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import fuzzysort from "fuzzysort"
99
import { formatKeybind, parseKeybind, useCommand } from "@/context/command"
1010
import { useLanguage } from "@/context/language"
1111
import { useSettings } from "@/context/settings"
12+
import { SettingsList } from "./settings-list"
1213

1314
const IS_MAC = typeof navigator === "object" && /(Mac|iPod|iPhone|iPad)/.test(navigator.platform)
1415
const PALETTE_ID = "command.palette"
@@ -406,7 +407,7 @@ export const SettingsKeybinds: Component = () => {
406407
<Show when={(filtered().get(group) ?? []).length > 0}>
407408
<div class="flex flex-col gap-1">
408409
<h3 class="text-14-medium text-text-strong pb-2">{language.t(groupKey[group])}</h3>
409-
<div class="bg-surface-raised-base px-4 rounded-lg">
410+
<SettingsList>
410411
<For each={filtered().get(group) ?? []}>
411412
{(id) => (
412413
<div class="flex items-center justify-between gap-4 py-3 border-b border-border-weak-base last:border-none">
@@ -432,7 +433,7 @@ export const SettingsKeybinds: Component = () => {
432433
</div>
433434
)}
434435
</For>
435-
</div>
436+
</SettingsList>
436437
</div>
437438
</Show>
438439
)}

‎packages/app/src/components/settings-list.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { type Component, type JSX } from "solid-js"
2+
3+
export const SettingsList: Component<{ children: JSX.Element }> = (props) => {
4+
return <div class="bg-surface-base px-4 rounded-lg">{props.children}</div>
5+
}

‎packages/app/src/components/settings-models.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { type Component, For, Show } from "solid-js"
88
import { useLanguage } from "@/context/language"
99
import { useModels } from "@/context/models"
1010
import { popularProviders } from "@/hooks/use-providers"
11+
import { SettingsList } from "./settings-list"
1112

1213
type ModelItem = ReturnType<ReturnType<typeof useModels>["list"]>[number]
1314

@@ -100,7 +101,7 @@ export const SettingsModels: Component = () => {
100101
<ProviderIcon id={group.category} class="size-5 shrink-0 icon-strong-base" />
101102
<span class="text-14-medium text-text-strong">{group.items[0].provider.name}</span>
102103
</div>
103-
<div class="bg-surface-raised-base px-4 rounded-lg">
104+
<SettingsList>
104105
<For each={group.items}>
105106
{(item) => {
106107
const key = { providerID: item.provider.id, modelID: item.id }
@@ -124,7 +125,7 @@ export const SettingsModels: Component = () => {
124125
)
125126
}}
126127
</For>
127-
</div>
128+
</SettingsList>
128129
</div>
129130
)}
130131
</For>

‎packages/app/src/components/settings-providers.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { useGlobalSync } from "@/context/global-sync"
1111
import { DialogConnectProvider } from "./dialog-connect-provider"
1212
import { DialogSelectProvider } from "./dialog-select-provider"
1313
import { DialogCustomProvider } from "./dialog-custom-provider"
14+
import { SettingsList } from "./settings-list"
1415

1516
type ProviderSource = "env" | "api" | "config" | "custom"
1617
type ProviderItem = ReturnType<ReturnType<typeof useProviders>["connected"]>[number]
@@ -136,7 +137,7 @@ export const SettingsProviders: Component = () => {
136137
<div class="flex flex-col gap-8 max-w-[720px]">
137138
<div class="flex flex-col gap-1" data-component="connected-providers-section">
138139
<h3 class="text-14-medium text-text-strong pb-2">{language.t("settings.providers.section.connected")}</h3>
139-
<div class="bg-surface-raised-base px-4 rounded-lg">
140+
<SettingsList>
140141
<Show
141142
when={connected().length > 0}
142143
fallback={
@@ -169,12 +170,12 @@ export const SettingsProviders: Component = () => {
169170
)}
170171
</For>
171172
</Show>
172-
</div>
173+
</SettingsList>
173174
</div>
174175

175176
<div class="flex flex-col gap-1">
176177
<h3 class="text-14-medium text-text-strong pb-2">{language.t("settings.providers.section.popular")}</h3>
177-
<div class="bg-surface-raised-base px-4 rounded-lg">
178+
<SettingsList>
178179
<For each={popular()}>
179180
{(item) => (
180181
<div class="flex flex-wrap items-center justify-between gap-4 min-h-16 py-3 border-b border-border-weak-base last:border-none">
@@ -232,7 +233,7 @@ export const SettingsProviders: Component = () => {
232233
{language.t("common.connect")}
233234
</Button>
234235
</div>
235-
</div>
236+
</SettingsList>
236237

237238
<Button
238239
variant="ghost"

0 commit comments

Comments
 (0)