forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
feat: polish ui and ux on settings page (#1026)
authored by
Alex Savelyev
and committed by
GitHub
a729534a
18bcb8a3
+38
-32
+4
-2
app/components/Settings/AccentColorPicker.vue
+4
-2
app/components/Settings/AccentColorPicker.vue
···
16
16
</script>
17
17
18
18
<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
+
>
20
22
<legend class="sr-only">{{ $t('settings.accent_colors') }}</legend>
21
23
<label
22
24
v-for="color in accentColors"
···
35
37
/>
36
38
</label>
37
39
<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"
39
41
>
40
42
<input
41
43
type="radio"
+3
-1
app/components/Settings/BgThemePicker.vue
+3
-1
app/components/Settings/BgThemePicker.vue
···
14
14
</script>
15
15
16
16
<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
+
>
18
20
<legend class="sr-only">{{ $t('settings.background_themes') }}</legend>
19
21
<label
20
22
v-for="theme in backgroundThemes"
+10
-4
app/components/Settings/Toggle.client.vue
+10
-4
app/components/Settings/Toggle.client.vue
···
2
2
defineProps<{
3
3
label?: string
4
4
description?: string
5
+
class?: string
5
6
}>()
6
7
7
8
const checked = defineModel<boolean>({
···
12
13
<template>
13
14
<button
14
15
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"
16
17
role="switch"
17
18
:aria-checked="checked"
18
19
@click="checked = !checked"
20
+
:class="class"
19
21
>
20
22
<span v-if="label" class="text-sm text-fg font-medium text-start">
21
23
{{ label }}
22
24
</span>
23
25
<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
+
"
26
32
aria-hidden="true"
27
33
>
28
34
<span
···
30
36
/>
31
37
</span>
32
38
</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">
34
40
{{ description }}
35
41
</p>
36
42
</template>
+21
-25
app/pages/settings.vue
+21
-25
app/pages/settings.vue
···
50
50
</h1>
51
51
<button
52
52
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"
54
54
@click="router.back()"
55
55
>
56
56
<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>
58
58
</button>
59
59
</div>
60
60
<p class="text-fg-muted text-lg">
···
66
66
<div class="space-y-8">
67
67
<!-- APPEARANCE Section -->
68
68
<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">
70
70
{{ $t('settings.sections.appearance') }}
71
71
</h2>
72
72
<div class="bg-bg-subtle border border-border rounded-lg p-4 sm:p-6 space-y-6">
···
78
78
<select
79
79
id="theme-select"
80
80
: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"
82
82
@change="
83
83
colorMode.preference = ($event.target as HTMLSelectElement).value as
84
84
| 'light'
···
114
114
115
115
<!-- DISPLAY Section -->
116
116
<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">
118
118
{{ $t('settings.sections.display') }}
119
119
</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">
121
121
<!-- Relative dates toggle -->
122
122
<SettingsToggle
123
123
:label="$t('settings.relative_dates')"
···
125
125
/>
126
126
127
127
<!-- Divider -->
128
-
<div class="border-t border-border" />
128
+
<div class="border-t border-border my-4" />
129
129
130
130
<!-- 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
+
/>
138
136
139
137
<!-- Divider -->
140
-
<div class="border-t border-border" />
138
+
<div class="border-t border-border my-4" />
141
139
142
140
<!-- 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
+
/>
150
146
</div>
151
147
</section>
152
148
153
149
<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">
155
151
{{ $t('settings.sections.language') }}
156
152
</h2>
157
153
<div class="bg-bg-subtle border border-border rounded-lg p-4 sm:p-6 space-y-4">
···
165
161
<select
166
162
id="language-select"
167
163
: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"
169
165
@change="setLocale(($event.target as HTMLSelectElement).value as typeof locale)"
170
166
>
171
167
<option v-for="loc in locales" :key="loc.code" :value="loc.code" :lang="loc.code">
···
176
172
<select
177
173
id="language-select"
178
174
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"
180
176
>
181
177
<option>{{ $t('common.loading') }}</option>
182
178
</select>