fix: color mode settings button (#648)

components/settings/SettingsColorMode.vue

@@ -12,19 +12,21 @@ function setColorMode(mode: ColorMode) {
   <div flex="~ gap4" w-full>
     <button
       btn-text flex-1 flex="~ gap-1 center" p4 border="~ base rounded" bg-base
+      :tabindex="colorMode.value === 'dark' ? 0 : -1"
       :class="colorMode.value === 'dark' ? 'pointer-events-none' : 'filter-saturate-0'"
       @click="setColorMode('dark')"
     >
       <div i-ri:moon-line />
-      Dark Mode
+      {{ $t('settings.interface.dark_mode') }}
     </button>
     <button
       btn-text flex-1 flex="~ gap-1 center" p4 border="~ base rounded" bg-base
+      :tabindex="colorMode.value === 'light' ? 0 : -1"
       :class="colorMode.value === 'light' ? 'pointer-events-none' : 'filter-saturate-0'"
       @click="setColorMode('light')"
     >
       <div i-ri:sun-line />
-      Light Mode
+      {{ $t('settings.interface.light_mode') }}
     </button>
   </div>
 </template>

locales/en-GB.json

@@ -225,8 +225,10 @@
     },
     "interface": {
       "color_mode": "Color Mode",
+      "dark_mode": "Dark Mode",
       "font_size": "Font Size",
-      "label": "Interface"
+      "label": "Interface",
+      "light_mode": "Light Mode"
     },
     "language": {
       "display_language": "Display Language",
@@ -251,6 +253,8 @@
     },
     "select_a_settings": "Select a settings",
     "users": {
+      "export": "Export User Tokens",
+      "import": "Import User Tokens",
       "label": "Logged in users"
     }
   },

locales/en-US.json

@@ -225,8 +225,10 @@
     },
     "interface": {
       "color_mode": "Color Mode",
+      "dark_mode": "Dark Mode",
       "font_size": "Font Size",
-      "label": "Interface"
+      "label": "Interface",
+      "light_mode": "Light Mode"
     },
     "language": {
       "display_language": "Display Language",
@@ -251,6 +253,8 @@
     },
     "select_a_settings": "Select a settings",
     "users": {
+      "export": "Export User Tokens",
+      "import": "Import User Tokens",
       "label": "Logged in users"
     }
   },

locales/es-ES.json

@@ -205,11 +205,49 @@
     "search_desc": "Buscar personas y etiquetas"
   },
   "settings": {
+    "about": {
+      "label": "Acerca de"
+    },
     "feature_flags": {
       "avatar_on_avatar": "Avatar en Avatar",
-      "github_cards": "GitHub Cards",
+      "github_cards": "Tarjetas GitHub",
-      "user_picker": "User Picker",
+      "title": "Características experimentales",
-      "virtual_scroll": "Virtual Scrolling"
+      "user_picker": "Selector de usuarios",
+      "virtual_scroll": "Desplazamiento virtual"
+    },
+    "interface": {
+      "color_mode": "Modos de color",
+      "dark_mode": "Modo Oscuro",
+      "font_size": "Tamaño de Letra",
+      "label": "Interfaz",
+      "light_mode": "Modo Claro"
+    },
+    "language": {
+      "display_language": "Idioma de la pantalla",
+      "label": "Idioma"
+    },
+    "preferences": {
+      "label": "Preferencias"
+    },
+    "profile": {
+      "appearance": {
+        "bio": "Bio",
+        "description": "Editar avatar, nombre de usuario, perfil, etc.",
+        "display_name": "Nombre a mostrar",
+        "label": "Apariencia",
+        "title": "Editar perfil"
+      },
+      "featured_tags": {
+        "description": "Las personas pueden navegar por sus publicaciones públicas con estos hashtags.",
+        "label": "Hashtags destacados"
+      },
+      "label": "Perfil"
+    },
+    "select_a_settings": "Seleccionar una configuración",
+    "users": {
+      "export": "Exportar tokens de usuario",
+      "import": "Importar tokens de usuario",
+      "label": "Usuarios conectados"
     }
   },
   "state": {

pages/settings/interface/index.vue

@@ -10,10 +10,12 @@
         <p font-medium>{{ $t('settings.interface.font_size') }}</p>
         <SettingsFontSize select-settings />
       </label>
-      <label space-y-2>
+      <div space-y-2>
-        <p font-medium>{{ $t('settings.interface.color_mode') }}</p>
+        <p font-medium>
+          {{ $t('settings.interface.color_mode') }}
+        </p>
         <SettingsColorMode />
-      </label>
+      </div>
     </div>
   </MainContent>
 </template>

pages/settings/users/index.vue

@@ -79,12 +79,12 @@ async function importTokens() {
         <div my4 border="t base" />
         <button btn-text flex="~ gap-2" items-center @click="exportTokens">
           <div i-ri-download-2-line />
-          Export User Tokens
+          {{ $t('settings.users.export') }}
         </button>
       </template>
       <button btn-text flex="~ gap-2" items-center @click="importTokens">
         <div i-ri-upload-2-line />
-        Import User Tokens
+        {{ $t('settings.users.import') }}
       </button>
     </div>
   </MainContent>