Skip to content

Commit a729534

Browse files
alexdlnalexdln
authored
feat: polish ui and ux on settings page (#1026)
1 parent 18bcb8a commit a729534

File tree

4 files changed

+38
-32
lines changed

4 files changed

+38
-32
lines changed

‎app/components/Settings/AccentColorPicker.vue‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,9 @@ onPrehydrate(el => {
1616
</script>
1717

1818
<template>
19-
<fieldset class="flex items-center gap-4">
19+
<fieldset
20+
class="flex items-center gap-4 has-[input:focus-visible]:(outline-solid outline-accent/70 outline-offset-4) rounded-xl w-fit"
21+
>
2022
<legend class="sr-only">{{ $t('settings.accent_colors') }}</legend>
2123
<label
2224
v-for="color in accentColors"
@@ -35,7 +37,7 @@ onPrehydrate(el => {
3537
/>
3638
</label>
3739
<label
38-
class="size-6 rounded-full transition-transform duration-150 motion-safe:hover:scale-110 cursor-pointer has-[:checked]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle) has-[:focus-visible]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle) flex items-center justify-center bg-accent-fallback"
40+
class="size-6 rounded-full transition-transform duration-150 motion-safe:hover:scale-110 cursor-pointer has-[:checked]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle) has-[:focus-visible]:(ring-2 ring-fg ring-offset-2 ring-offset-bg-subtle) flex items-center justify-center bg-fg"
3941
>
4042
<input
4143
type="radio"

‎app/components/Settings/BgThemePicker.vue‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,9 @@ onPrehydrate(el => {
1414
</script>
1515

1616
<template>
17-
<fieldset class="flex items-center gap-4">
17+
<fieldset
18+
class="flex items-center gap-4 has-[input:focus-visible]:(outline-solid outline-accent/70 outline-offset-4) rounded-xl w-fit"
19+
>
1820
<legend class="sr-only">{{ $t('settings.background_themes') }}</legend>
1921
<label
2022
v-for="theme in backgroundThemes"

‎app/components/Settings/Toggle.client.vue‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
defineProps<{
33
label?: string
44
description?: string
5+
class?: string
56
}>()
67
78
const checked = defineModel<boolean>({
@@ -12,25 +13,30 @@ const checked = defineModel<boolean>({
1213
<template>
1314
<button
1415
type="button"
15-
class="w-full flex items-center justify-between gap-4 group"
16+
class="w-full flex items-center justify-between gap-4 group focus-visible:outline-none py-1 -my-1"
1617
role="switch"
1718
:aria-checked="checked"
1819
@click="checked = !checked"
20+
:class="class"
1921
>
2022
<span v-if="label" class="text-sm text-fg font-medium text-start">
2123
{{ label }}
2224
</span>
2325
<span
24-
class="inline-flex items-center h-6 w-11 shrink-0 rounded-full border p-0.25 transition-colors duration-200 shadow-sm ease-in-out motion-reduce:transition-none cursor-pointer"
25-
:class="checked ? 'bg-accent border-accent' : 'bg-fg/50 border-fg/50'"
26+
class="inline-flex items-center h-6 w-11 shrink-0 rounded-full border p-0.25 transition-colors duration-200 shadow-sm ease-in-out motion-reduce:transition-none cursor-pointer group-focus-visible:(outline-accent/70 outline-offset-2 outline-solid)"
27+
:class="
28+
checked
29+
? 'bg-accent border-accent group-hover:bg-accent/80'
30+
: 'bg-fg/50 border-fg/50 group-hover:bg-fg/70'
31+
"
2632
aria-hidden="true"
2733
>
2834
<span
2935
class="block h-5 w-5 rounded-full bg-bg shadow-sm transition-transform duration-200 ease-in-out motion-reduce:transition-none"
3036
/>
3137
</span>
3238
</button>
33-
<p v-if="description" class="text-sm text-fg-muted">
39+
<p v-if="description" class="text-sm text-fg-muted mt-2">
3440
{{ description }}
3541
</p>
3642
</template>

‎app/pages/settings.vue‎

Lines changed: 21 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -50,11 +50,11 @@ const setLocale: typeof setNuxti18nLocale = locale => {
5050
</h1>
5151
<button
5252
type="button"
53-
class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0"
53+
class="inline-flex items-center gap-2 font-mono text-sm text-fg-muted hover:text-fg transition-colors duration-200 rounded focus-visible:outline-accent/70 shrink-0 p-1.5 -mx-1.5"
5454
@click="router.back()"
5555
>
5656
<span class="i-carbon:arrow-left rtl-flip w-4 h-4" aria-hidden="true" />
57-
<span class="hidden sm:inline">{{ $t('nav.back') }}</span>
57+
<span class="sr-only sm:not-sr-only">{{ $t('nav.back') }}</span>
5858
</button>
5959
</div>
6060
<p class="text-fg-muted text-lg">
@@ -66,7 +66,7 @@ const setLocale: typeof setNuxti18nLocale = locale => {
6666
<div class="space-y-8">
6767
<!-- APPEARANCE Section -->
6868
<section>
69-
<h2 class="text-xs text-fg-subtle uppercase tracking-wider mb-4">
69+
<h2 class="text-xs text-fg-muted uppercase tracking-wider mb-4">
7070
{{ $t('settings.sections.appearance') }}
7171
</h2>
7272
<div class="bg-bg-subtle border border-border rounded-lg p-4 sm:p-6 space-y-6">
@@ -78,7 +78,7 @@ const setLocale: typeof setNuxti18nLocale = locale => {
7878
<select
7979
id="theme-select"
8080
:value="colorMode.preference"
81-
class="w-full sm:w-auto min-w-48 bg-bg border border-border rounded-md px-3 py-2 text-sm text-fg cursor-pointer"
81+
class="w-full sm:w-auto min-w-48 bg-bg border border-border rounded-md px-3 py-2 text-sm text-fg cursor-pointer duration-200 transition-colors hover:border-fg-subtle"
8282
@change="
8383
colorMode.preference = ($event.target as HTMLSelectElement).value as
8484
| 'light'
@@ -114,44 +114,40 @@ const setLocale: typeof setNuxti18nLocale = locale => {
114114

115115
<!-- DISPLAY Section -->
116116
<section>
117-
<h2 class="text-xs text-fg-subtle uppercase tracking-wider mb-4">
117+
<h2 class="text-xs text-fg-muted uppercase tracking-wider mb-4">
118118
{{ $t('settings.sections.display') }}
119119
</h2>
120-
<div class="bg-bg-subtle border border-border rounded-lg p-4 sm:p-6 space-y-4">
120+
<div class="bg-bg-subtle border border-border rounded-lg p-4 sm:p-6">
121121
<!-- Relative dates toggle -->
122122
<SettingsToggle
123123
:label="$t('settings.relative_dates')"
124124
v-model="settings.relativeDates"
125125
/>
126126

127127
<!-- Divider -->
128-
<div class="border-t border-border" />
128+
<div class="border-t border-border my-4" />
129129

130130
<!-- Include @types in install toggle -->
131-
<div class="space-y-2">
132-
<SettingsToggle
133-
:label="$t('settings.include_types')"
134-
:description="$t('settings.include_types_description')"
135-
v-model="settings.includeTypesInInstall"
136-
/>
137-
</div>
131+
<SettingsToggle
132+
:label="$t('settings.include_types')"
133+
:description="$t('settings.include_types_description')"
134+
v-model="settings.includeTypesInInstall"
135+
/>
138136

139137
<!-- Divider -->
140-
<div class="border-t border-border" />
138+
<div class="border-t border-border my-4" />
141139

142140
<!-- Hide platform-specific packages toggle -->
143-
<div class="space-y-2">
144-
<SettingsToggle
145-
:label="$t('settings.hide_platform_packages')"
146-
:description="$t('settings.hide_platform_packages_description')"
147-
v-model="settings.hidePlatformPackages"
148-
/>
149-
</div>
141+
<SettingsToggle
142+
:label="$t('settings.hide_platform_packages')"
143+
:description="$t('settings.hide_platform_packages_description')"
144+
v-model="settings.hidePlatformPackages"
145+
/>
150146
</div>
151147
</section>
152148

153149
<section>
154-
<h2 class="text-xs text-fg-subtle uppercase tracking-wider mb-4">
150+
<h2 class="text-xs text-fg-muted uppercase tracking-wider mb-4">
155151
{{ $t('settings.sections.language') }}
156152
</h2>
157153
<div class="bg-bg-subtle border border-border rounded-lg p-4 sm:p-6 space-y-4">
@@ -165,7 +161,7 @@ const setLocale: typeof setNuxti18nLocale = locale => {
165161
<select
166162
id="language-select"
167163
:value="locale"
168-
class="w-full sm:w-auto min-w-48 bg-bg border border-border rounded-md px-3 py-2 text-sm text-fg focus-visible:outline-accent/70 cursor-pointer"
164+
class="w-full sm:w-auto min-w-48 bg-bg border border-border rounded-md px-3 py-2 text-sm text-fg focus-visible:outline-accent/70 cursor-pointer duration-200 transition-colors hover:border-fg-subtle"
169165
@change="setLocale(($event.target as HTMLSelectElement).value as typeof locale)"
170166
>
171167
<option v-for="loc in locales" :key="loc.code" :value="loc.code" :lang="loc.code">
@@ -176,7 +172,7 @@ const setLocale: typeof setNuxti18nLocale = locale => {
176172
<select
177173
id="language-select"
178174
disabled
179-
class="w-full sm:w-auto min-w-48 bg-bg border border-border rounded-md px-3 py-2 text-sm text-fg opacity-50 cursor-wait"
175+
class="w-full sm:w-auto min-w-48 bg-bg border border-border rounded-md px-3 py-2 text-sm text-fg opacity-50 cursor-wait duration-200 transition-colors hover:border-fg-subtle"
180176
>
181177
<option>{{ $t('common.loading') }}</option>
182178
</select>

0 commit comments

Comments
 (0)