[READ-ONLY] a fast, modern browser for the npm registry
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

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
··· 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
··· 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
··· 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
··· 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>