Make appearance settings translateable

resources/assets/components/partials/navbar.vue

@@ -270,7 +270,7 @@
 										<li class="nav-item">
 											<a class="nav-link" href="/i/web" @click.prevent="openUserInterfaceSettings">
 												<span class="icon text-lighter"><i class="far fa-brush"></i></span>
-												UI Settings
+												{{ $t('navmenu.appearance') }}
 											</a>
 										</li>
 
@@ -337,12 +337,12 @@
 			hide-footer
 			centered
 			body-class="p-0 ui-menu"
-			title="UI Settings">
+			title="{{ $t('navmenu.appearance') }}">
 			<div class="list-group list-group-flush">
 				<div class="list-group-item px-3">
 					<div class="d-flex justify-content-between align-items-center">
 						<div>
-							<p class="font-weight-bold mb-1">Theme</p>
+							<p class="font-weight-bold mb-1">{{ $t('appearance.theme') }}</p>
 							<p class="small text-muted mb-0"></p>
 						</div>
 
@@ -351,19 +351,19 @@
 								class="btn"
 								:class="[ uiColorScheme == 'system' ? 'btn-primary' : 'btn-outline-primary']"
 								@click="toggleUi('system')">
-								Auto
+								{{ $t('appearance.auto') }}
 							</button>
 							<button
 								class="btn"
 								:class="[ uiColorScheme == 'light' ? 'btn-primary' : 'btn-outline-primary']"
 								@click="toggleUi('light')">
-								Light mode
+								{{ $t('appearance.lightMode') }}
 							</button>
 							<button
 								class="btn"
 								:class="[ uiColorScheme == 'dark' ? 'btn-primary' : 'btn-outline-primary']"
 								@click="toggleUi('dark')">
-								Dark mode
+								{{ $t('appearance.darkMode') }}
 							</button>
 						</div>
 					</div>
@@ -372,7 +372,7 @@
 				<div class="list-group-item px-3">
 					<div class="d-flex justify-content-between align-items-center">
 						<div>
-							<p class="font-weight-bold mb-1">Profile Layout</p>
+							<p class="font-weight-bold mb-1">{{ $t('appearance.profileLayout') }}</p>
 							<p class="small text-muted mb-0"></p>
 						</div>
 
@@ -381,19 +381,19 @@
 								class="btn"
 								:class="[ profileLayout == 'grid' ? 'btn-primary' : 'btn-outline-primary']"
 								@click="toggleProfileLayout('grid')">
-								Grid
+								{{ $t('appearance.grid') }}
 							</button>
 							<button
 								class="btn"
 								:class="[ profileLayout == 'masonry' ? 'btn-primary' : 'btn-outline-primary']"
 								@click="toggleProfileLayout('masonry')">
-								Masonry
+								{{ $t('appearance.masonry') }}
 							</button>
 							<button
 								class="btn"
 								:class="[ profileLayout == 'feed' ? 'btn-primary' : 'btn-outline-primary']"
 								@click="toggleProfileLayout('feed')">
-								Feed
+								{{ $t('appearance.feed') }}
 							</button>
 						</div>
 					</div>
@@ -402,7 +402,7 @@
 				<div class="list-group-item px-3">
 					<div class="d-flex justify-content-between align-items-center">
 						<div>
-							<p class="font-weight-bold mb-0">Compact Media Previews</p>
+							<p class="font-weight-bold mb-0">{{ $t('appearance.compactPreviews') }}</p>
 						</div>
 						<b-form-checkbox v-model="fixedHeight" switch size="lg" />
 					</div>
@@ -411,7 +411,7 @@
 				<div class="list-group-item px-3">
 					<div class="d-flex justify-content-between align-items-center">
 						<div>
-							<p class="font-weight-bold mb-0">Load Comments</p>
+							<p class="font-weight-bold mb-0">{{ $t('appearance.loadComments') }}</p>
 						</div>
 						<b-form-checkbox v-model="autoloadComments" switch size="lg" />
 					</div>
@@ -420,7 +420,7 @@
 				<div class="list-group-item px-3">
 					<div class="d-flex justify-content-between align-items-center">
 						<div>
-							<p class="font-weight-bold mb-0">Hide Counts & Stats</p>
+							<p class="font-weight-bold mb-0">{{ $t('appearance.hideStats') }}</p>
 						</div>
 						<b-form-checkbox v-model="hideCounts" switch size="lg" />
 					</div>

resources/lang/en/web.php

@@ -59,6 +59,7 @@ return [
 		'profile' => 'Profile',
 		'drive' => 'Drive',
 		'settings' => 'Settings',
+        'appearance' => 'Appearance',
 		'compose' => 'Create New',
 		'logout' => 'Logout',
 
@@ -205,4 +206,20 @@ return [
 		'contactAdminMsg' => 'If you\'d like to contact an administrator about this post or report',
 	],
 
+    'appearance' => [
+        'theme' => 'Theme',
+        'profileLayout' => 'Profile Layout',
+        'compactPreviews' => 'Compact Media Previews',
+        'loadComments' => 'Load Comments',
+        'hideStats' => 'Hide Counts & Stats',
+
+        'auto' => 'Auto',
+        'lightMode' => 'Light mode',
+        'darkMode' => 'Dark mode',
+
+        'grid' => 'Grid',
+        'masonry' => 'Masonry',
+        'feed' => 'Feed',
+    ],
+
 ];

resources/lang/es/web.php

@@ -59,6 +59,7 @@ return [
 		'profile' => 'Perfil',
 		'drive' => 'Multimedia',
 		'settings' => 'Ajustes',
+        'appearance' => 'Aspecto',
 		'compose' => 'Crear Nuevo',
 		'logout' => 'Cerrar sesión',
 
@@ -205,4 +206,20 @@ return [
 		'contactAdminMsg' => 'Si quieres contactar un administrador sobre esta publicación o reporte',
 	],
 
+    'appearance' => [
+        'theme' => 'Tema',
+        'profileLayout' => 'Arreglo de Perfil',
+        'compactPreviews' => 'Previstas Compactas de Medios',
+        'loadComments' => 'Cargar Comentarios',
+        'hideStats' => 'Ocultar Cuentas y Estadísticas',
+
+        'auto' => 'Automático',
+        'lightMode' => 'Modo claro',
+        'darkMode' => 'Modo oscuro',
+
+        'grid' => 'Cuadrícula',
+        'masonry' => 'Mampostería',
+        'feed' => 'Feed',
+    ],
+
 ];