From 524f7005aadd318e9f405e42194cd3edbb160a3f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez?= <userquin@gmail.com>
Date: Thu, 29 Dec 2022 20:27:11 +0100
Subject: [PATCH] fix: color mode settings button (#648)

---
 components/settings/SettingsColorMode.vue |  6 ++--
 locales/en-GB.json                        |  6 +++-
 locales/en-US.json                        |  6 +++-
 locales/es-ES.json                        | 44 +++++++++++++++++++++--
 pages/settings/interface/index.vue        |  8 +++--
 pages/settings/users/index.vue            |  4 +--
 6 files changed, 62 insertions(+), 12 deletions(-)

diff --git a/components/settings/SettingsColorMode.vue b/components/settings/SettingsColorMode.vue
index 2d2c52a3..2a0f5b72 100644
--- a/components/settings/SettingsColorMode.vue
+++ b/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>
diff --git a/locales/en-GB.json b/locales/en-GB.json
index cec224ae..942dcbab 100644
--- a/locales/en-GB.json
+++ b/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"
     }
   },
diff --git a/locales/en-US.json b/locales/en-US.json
index 264f98f1..2d3ea811 100644
--- a/locales/en-US.json
+++ b/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"
     }
   },
diff --git a/locales/es-ES.json b/locales/es-ES.json
index 1f060a9b..7a43134d 100644
--- a/locales/es-ES.json
+++ b/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",
-      "user_picker": "User Picker",
-      "virtual_scroll": "Virtual Scrolling"
+      "github_cards": "Tarjetas GitHub",
+      "title": "Características experimentales",
+      "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": {
diff --git a/pages/settings/interface/index.vue b/pages/settings/interface/index.vue
index 8a9c319e..d567efe8 100644
--- a/pages/settings/interface/index.vue
+++ b/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>
-        <p font-medium>{{ $t('settings.interface.color_mode') }}</p>
+      <div space-y-2>
+        <p font-medium>
+          {{ $t('settings.interface.color_mode') }}
+        </p>
         <SettingsColorMode />
-      </label>
+      </div>
     </div>
   </MainContent>
 </template>
diff --git a/pages/settings/users/index.vue b/pages/settings/users/index.vue
index 2a81c2f9..c3cdaee8 100644
--- a/pages/settings/users/index.vue
+++ b/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>