Add French and Spanish languages to dropdown selectors (#1435)

apps/browser-extension/src/i18n/config.ts

@@ -5,7 +5,9 @@
 
 import deTranslations from './locales/de.json';
 import enTranslations from './locales/en.json';
+import esTranslations from './locales/es.json';
 import fiTranslations from './locales/fi.json';
+import frTranslations from './locales/fr.json';
 import heTranslations from './locales/he.json';
 import itTranslations from './locales/it.json';
 import nlTranslations from './locales/nl.json';
@@ -26,9 +28,15 @@ export const LANGUAGE_RESOURCES = {
   en: {
     translation: enTranslations
   },
+  es: {
+    translation: esTranslations
+  },
   fi: {
     translation: fiTranslations
   },
+  fr: {
+    translation: frTranslations
+  },
   he: {
     translation: heTranslations
   },
@@ -72,12 +80,24 @@ export const AVAILABLE_LANGUAGES: ILanguageConfig[] = [
     nativeName: 'English',
     flag: '🇺🇸'
   },
+  {
+    code: 'es',
+    name: 'Spanish',
+    nativeName: 'Español',
+    flag: '🇪🇸'
+  },
   {
     code: 'fi',
     name: 'Finnish',
     nativeName: 'Suomi',
     flag: '🇫🇮'
   },
+  {
+    code: 'fr',
+    name: 'French',
+    nativeName: 'Français',
+    flag: '🇫🇷'
+  },
   {
     code: 'he',
     name: 'Hebrew',

apps/mobile-app/android/app/src/main/res/xml/locales_config.xml

@@ -2,7 +2,9 @@
 <locale-config xmlns:android="http://schemas.android.com/apk/res/android">
     <locale android:name="de" />
     <locale android:name="en" />
+    <locale android:name="es" />
     <locale android:name="fi" />
+    <locale android:name="fr" />
     <locale android:name="he" />
     <locale android:name="it" />
     <locale android:name="nl" />

apps/mobile-app/i18n/index.ts

@@ -4,7 +4,9 @@ import { initReactI18next } from 'react-i18next';
 
 import de from './locales/de.json';
 import en from './locales/en.json';
+import es from './locales/es.json';
 import fi from './locales/fi.json';
+import fr from './locales/fr.json';
 import he from './locales/he.json';
 import it from './locales/it.json';
 import nl from './locales/nl.json';
@@ -17,7 +19,9 @@ import zh from './locales/zh.json';
 const resources = {
   de: { translation: de },
   en: { translation: en },
+  es: { translation: es },
   fi: { translation: fi },
+  fr: { translation: fr },
   he: { translation: he },
   nl: { translation: nl },
   it: { translation: it },

apps/mobile-app/ios/AliasVault.xcodeproj/project.pbxproj

@@ -716,7 +716,9 @@
 				Base,
 				de,
 				en,
+				es,
 				fi,
+				fr,
 				he,
 				nl,
 				it,

apps/mobile-app/ios/AliasVault/Info.plist

@@ -23,7 +23,9 @@
 	<array>
 		<string>de</string>
 		<string>en</string>
+		<string>es</string>
 		<string>fi</string>
+		<string>fr</string>
 		<string>he</string>
 		<string>it</string>
 		<string>nl</string>

apps/mobile-app/ios/Autofill/Info.plist

@@ -6,7 +6,9 @@
 	<array>
 		<string>de</string>
 		<string>en</string>
+		<string>es</string>
 		<string>fi</string>
+		<string>fr</string>
 		<string>he</string>
 		<string>it</string>
 		<string>nl</string>

apps/server/AliasVault.Client/Services/LanguageService.cs

@@ -32,7 +32,9 @@ public class LanguageService(
     {
         new LanguageConfig("de", "Deutsch", "🇩🇪"),
         new LanguageConfig("en", "English", "🇺🇸"),
+        new LanguageConfig("es", "Español", "🇪🇸"),
         new LanguageConfig("fi", "Suomi", "🇫🇮"),
+        new LanguageConfig("fr", "Français", "🇫🇷"),
         new LanguageConfig("he", "עברית", "🇮🇱"),
         new LanguageConfig("it", "Italiano", "🇮🇹"),
         new LanguageConfig("nl", "Nederlands", "🇳🇱"),

apps/server/AliasVault.Client/wwwroot/css/tailwind.css

@@ -690,6 +690,18 @@ video {
   top: 100%;
 }
 
+.bottom-full {
+  bottom: 100%;
+}
+
+.right-3 {
+  right: 0.75rem;
+}
+
+.top-3 {
+  top: 0.75rem;
+}
+
 .-z-10 {
   z-index: -10;
 }
@@ -710,6 +722,10 @@ video {
   z-index: 1000;
 }
 
+.z-20 {
+  z-index: 20;
+}
+
 .col-span-1 {
   grid-column: span 1 / span 1;
 }
@@ -722,6 +738,10 @@ video {
   grid-column: 1 / -1;
 }
 
+.col-span-3 {
+  grid-column: span 3 / span 3;
+}
+
 .float-left {
   float: left;
 }
@@ -744,6 +764,11 @@ video {
   margin-right: auto;
 }
 
+.my-1 {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
 .my-4 {
   margin-top: 1rem;
   margin-bottom: 1rem;
@@ -754,6 +779,19 @@ video {
   margin-bottom: 1.5rem;
 }
 
+.-mx-2 {
+  margin-left: -0.5rem;
+  margin-right: -0.5rem;
+}
+
+.-ml-0 {
+  margin-left: -0px;
+}
+
+.-ml-0\.5 {
+  margin-left: -0.125rem;
+}
+
 .-ml-1 {
   margin-left: -0.25rem;
 }
@@ -914,6 +952,10 @@ video {
   display: grid;
 }
 
+.contents {
+  display: contents;
+}
+
 .hidden {
   display: none;
 }
@@ -930,6 +972,10 @@ video {
   height: 3rem;
 }
 
+.h-14 {
+  height: 3.5rem;
+}
+
 .h-16 {
   height: 4rem;
 }
@@ -1002,6 +1048,10 @@ video {
   max-height: 90vh;
 }
 
+.max-h-64 {
+  max-height: 16rem;
+}
+
 .min-h-\[250px\] {
   min-height: 250px;
 }
@@ -1014,10 +1064,18 @@ video {
   min-height: 600px;
 }
 
+.min-h-full {
+  min-height: 100%;
+}
+
 .min-h-screen {
   min-height: 100vh;
 }
 
+.min-h-\[40px\] {
+  min-height: 40px;
+}
+
 .w-1 {
   width: 0.25rem;
 }
@@ -1046,6 +1104,10 @@ video {
   width: 3rem;
 }
 
+.w-14 {
+  width: 3.5rem;
+}
+
 .w-16 {
   width: 4rem;
 }
@@ -1142,6 +1204,18 @@ video {
   max-width: 80rem;
 }
 
+.max-w-\[100px\] {
+  max-width: 100px;
+}
+
+.max-w-\[120px\] {
+  max-width: 120px;
+}
+
+.max-w-\[150px\] {
+  max-width: 150px;
+}
+
 .max-w-lg {
   max-width: 32rem;
 }
@@ -1460,6 +1534,10 @@ video {
   white-space: pre-line;
 }
 
+.whitespace-pre-wrap {
+  white-space: pre-wrap;
+}
+
 .break-words {
   overflow-wrap: break-word;
 }
@@ -1551,6 +1629,10 @@ video {
   border-top-width: 2px;
 }
 
+.border-dashed {
+  border-style: dashed;
+}
+
 .border-amber-400 {
   --tw-border-opacity: 1;
   border-color: rgb(251 191 36 / var(--tw-border-opacity));
@@ -1636,6 +1718,10 @@ video {
   border-color: rgb(254 240 138 / var(--tw-border-opacity));
 }
 
+.border-transparent {
+  border-color: transparent;
+}
+
 .bg-amber-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(254 243 199 / var(--tw-bg-opacity));
@@ -1761,6 +1847,11 @@ video {
   background-color: rgb(249 115 22 / var(--tw-bg-opacity));
 }
 
+.bg-orange-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(234 88 12 / var(--tw-bg-opacity));
+}
+
 .bg-primary-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(253 222 133 / var(--tw-bg-opacity));
@@ -1911,11 +2002,24 @@ video {
   padding: 2rem;
 }
 
+.p-1 {
+  padding: 0.25rem;
+}
+
+.p-1\.5 {
+  padding: 0.375rem;
+}
+
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
 
+.px-2\.5 {
+  padding-left: 0.625rem;
+  padding-right: 0.625rem;
+}
+
 .px-3 {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
@@ -1956,6 +2060,11 @@ video {
   padding-bottom: 0.25rem;
 }
 
+.py-1\.5 {
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+}
+
 .py-2 {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
@@ -1986,10 +2095,19 @@ video {
   padding-bottom: 2rem;
 }
 
+.px-3\.5 {
+  padding-left: 0.875rem;
+  padding-right: 0.875rem;
+}
+
 .pb-28 {
   padding-bottom: 7rem;
 }
 
+.pb-4 {
+  padding-bottom: 1rem;
+}
+
 .pb-6 {
   padding-bottom: 1.5rem;
 }
@@ -2050,6 +2168,10 @@ video {
   padding-top: 2rem;
 }
 
+.pr-8 {
+  padding-right: 2rem;
+}
+
 .text-left {
   text-align: left;
 }
@@ -2272,6 +2394,10 @@ video {
   color: rgb(234 88 12 / var(--tw-text-opacity));
 }
 
+.text-orange-600\/80 {
+  color: rgb(234 88 12 / 0.8);
+}
+
 .text-orange-700 {
   --tw-text-opacity: 1;
   color: rgb(194 65 12 / var(--tw-text-opacity));
@@ -2312,6 +2438,10 @@ video {
   color: rgb(220 38 38 / var(--tw-text-opacity));
 }
 
+.text-red-600\/80 {
+  color: rgb(220 38 38 / 0.8);
+}
+
 .text-red-700 {
   --tw-text-opacity: 1;
   color: rgb(185 28 28 / var(--tw-text-opacity));
@@ -2519,12 +2649,41 @@ video {
   color: rgb(184 112 47 / var(--tw-text-opacity));
 }
 
+.placeholder\:text-gray-400::-moz-placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+
+.placeholder\:text-gray-400::placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+
+.last\:border-b-0:last-child {
+  border-bottom-width: 0px;
+}
+
 .hover\:scale-105:hover {
   --tw-scale-x: 1.05;
   --tw-scale-y: 1.05;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.hover\:border-orange-400:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(251 146 60 / var(--tw-border-opacity));
+}
+
+.hover\:border-red-300:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(252 165 165 / var(--tw-border-opacity));
+}
+
+.hover\:border-primary-500:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(244 149 65 / var(--tw-border-opacity));
+}
+
 .hover\:bg-blue-600:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(37 99 235 / var(--tw-bg-opacity));
@@ -2585,6 +2744,16 @@ video {
   background-color: rgb(22 101 52 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-orange-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 237 213 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-orange-500:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 115 22 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-primary-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(253 222 133 / var(--tw-bg-opacity));
@@ -2610,6 +2779,16 @@ video {
   background-color: rgb(154 93 38 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-red-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 226 226 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-red-50:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 242 242 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-red-600:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(220 38 38 / var(--tw-bg-opacity));
@@ -2625,6 +2804,16 @@ video {
   background-color: rgb(153 27 27 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-primary-500:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(244 149 65 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-primary-50:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 224 150 / var(--tw-bg-opacity));
+}
+
 .hover\:from-primary-600:hover {
   --tw-gradient-from: #d68338 var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(214 131 56 / 0) var(--tw-gradient-to-position);
@@ -2670,6 +2859,11 @@ video {
   color: rgb(17 24 39 / var(--tw-text-opacity));
 }
 
+.hover\:text-orange-600:hover {
+  --tw-text-opacity: 1;
+  color: rgb(234 88 12 / var(--tw-text-opacity));
+}
+
 .hover\:text-primary-600:hover {
   --tw-text-opacity: 1;
   color: rgb(214 131 56 / var(--tw-text-opacity));
@@ -2700,10 +2894,29 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.hover\:text-red-500:hover {
+  --tw-text-opacity: 1;
+  color: rgb(239 68 68 / var(--tw-text-opacity));
+}
+
+.hover\:text-gray-600:hover {
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity));
+}
+
+.hover\:text-green-700:hover {
+  --tw-text-opacity: 1;
+  color: rgb(21 128 61 / var(--tw-text-opacity));
+}
+
 .hover\:underline:hover {
   text-decoration-line: underline;
 }
 
+.hover\:opacity-80:hover {
+  opacity: 0.8;
+}
+
 .hover\:file\:bg-primary-100::file-selector-button:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(253 222 133 / var(--tw-bg-opacity));
@@ -2741,6 +2954,16 @@ video {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
+.focus\:ring-1:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.focus\:ring-inset:focus {
+  --tw-ring-inset: inset;
+}
+
 .focus\:ring-blue-300:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity));
@@ -2786,6 +3009,16 @@ video {
   --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity));
 }
 
+.focus\:ring-orange-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(249 115 22 / var(--tw-ring-opacity));
+}
+
+.focus\:ring-orange-600:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(234 88 12 / var(--tw-ring-opacity));
+}
+
 .focus\:ring-primary-200:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(251 203 116 / var(--tw-ring-opacity));
@@ -2816,6 +3049,10 @@ video {
   --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity));
 }
 
+.focus\:ring-offset-1:focus {
+  --tw-ring-offset-width: 1px;
+}
+
 .focus\:ring-offset-2:focus {
   --tw-ring-offset-width: 2px;
 }
@@ -2887,6 +3124,11 @@ video {
   border-color: rgb(194 65 12 / var(--tw-border-opacity));
 }
 
+.dark\:border-orange-800:is(.dark *) {
+  --tw-border-opacity: 1;
+  border-color: rgb(154 52 18 / var(--tw-border-opacity));
+}
+
 .dark\:border-primary-500:is(.dark *) {
   --tw-border-opacity: 1;
   border-color: rgb(244 149 65 / var(--tw-border-opacity));
@@ -2927,6 +3169,11 @@ video {
   border-color: rgb(133 77 14 / var(--tw-border-opacity));
 }
 
+.dark\:border-primary-400:is(.dark *) {
+  --tw-border-opacity: 1;
+  border-color: rgb(246 167 82 / var(--tw-border-opacity));
+}
+
 .dark\:bg-amber-800\/30:is(.dark *) {
   background-color: rgb(146 64 14 / 0.3);
 }
@@ -2970,11 +3217,19 @@ video {
   background-color: rgb(55 65 81 / var(--tw-bg-opacity));
 }
 
+.dark\:bg-gray-700\/50:is(.dark *) {
+  background-color: rgb(55 65 81 / 0.5);
+}
+
 .dark\:bg-gray-800:is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(31 41 55 / var(--tw-bg-opacity));
 }
 
+.dark\:bg-gray-800\/50:is(.dark *) {
+  background-color: rgb(31 41 55 / 0.5);
+}
+
 .dark\:bg-gray-900:is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(17 24 39 / var(--tw-bg-opacity));
@@ -3000,6 +3255,11 @@ video {
   background-color: rgb(251 146 60 / var(--tw-bg-opacity));
 }
 
+.dark\:bg-orange-700:is(.dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(194 65 12 / var(--tw-bg-opacity));
+}
+
 .dark\:bg-orange-900\/20:is(.dark *) {
   background-color: rgb(124 45 18 / 0.2);
 }
@@ -3008,6 +3268,10 @@ video {
   background-color: rgb(124 45 18 / 0.3);
 }
 
+.dark\:bg-orange-900\/40:is(.dark *) {
+  background-color: rgb(124 45 18 / 0.4);
+}
+
 .dark\:bg-primary-500:is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(244 149 65 / var(--tw-bg-opacity));
@@ -3064,6 +3328,10 @@ video {
   background-color: rgb(127 29 29 / 0.3);
 }
 
+.dark\:bg-red-900\/40:is(.dark *) {
+  background-color: rgb(127 29 29 / 0.4);
+}
+
 .dark\:bg-yellow-800:is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(133 77 14 / var(--tw-bg-opacity));
@@ -3073,6 +3341,10 @@ video {
   background-color: rgb(113 63 18 / 0.2);
 }
 
+.dark\:bg-opacity-75:is(.dark *) {
+  --tw-bg-opacity: 0.75;
+}
+
 .dark\:bg-opacity-80:is(.dark *) {
   --tw-bg-opacity: 0.8;
 }
@@ -3162,11 +3434,20 @@ video {
   color: rgb(254 215 170 / var(--tw-text-opacity));
 }
 
+.dark\:text-orange-300:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(253 186 116 / var(--tw-text-opacity));
+}
+
 .dark\:text-orange-400:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(251 146 60 / var(--tw-text-opacity));
 }
 
+.dark\:text-orange-400\/80:is(.dark *) {
+  color: rgb(251 146 60 / 0.8);
+}
+
 .dark\:text-primary-200:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(251 203 116 / var(--tw-text-opacity));
@@ -3192,11 +3473,20 @@ video {
   color: rgb(254 202 202 / var(--tw-text-opacity));
 }
 
+.dark\:text-red-300:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(252 165 165 / var(--tw-text-opacity));
+}
+
 .dark\:text-red-400:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(248 113 113 / var(--tw-text-opacity));
 }
 
+.dark\:text-red-400\/80:is(.dark *) {
+  color: rgb(248 113 113 / 0.8);
+}
+
 .dark\:text-red-500:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(239 68 68 / var(--tw-text-opacity));
@@ -3222,6 +3512,11 @@ video {
   color: rgb(250 204 21 / var(--tw-text-opacity));
 }
 
+.dark\:text-primary-300:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(248 185 99 / var(--tw-text-opacity));
+}
+
 .dark\:placeholder-gray-400:is(.dark *)::-moz-placeholder {
   --tw-placeholder-opacity: 1;
   color: rgb(156 163 175 / var(--tw-placeholder-opacity));
@@ -3250,6 +3545,26 @@ video {
   color: rgb(248 185 99 / var(--tw-text-opacity));
 }
 
+.dark\:placeholder\:text-gray-500:is(.dark *)::-moz-placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+
+.dark\:placeholder\:text-gray-500:is(.dark *)::placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+
+.dark\:hover\:border-orange-500:hover:is(.dark *) {
+  --tw-border-opacity: 1;
+  border-color: rgb(249 115 22 / var(--tw-border-opacity));
+}
+
+.dark\:hover\:border-red-700:hover:is(.dark *) {
+  --tw-border-opacity: 1;
+  border-color: rgb(185 28 28 / var(--tw-border-opacity));
+}
+
 .dark\:hover\:bg-blue-500:hover:is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
@@ -3275,11 +3590,19 @@ video {
   background-color: rgb(75 85 99 / var(--tw-bg-opacity));
 }
 
+.dark\:hover\:bg-gray-600\/50:hover:is(.dark *) {
+  background-color: rgb(75 85 99 / 0.5);
+}
+
 .dark\:hover\:bg-gray-700:hover:is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(55 65 81 / var(--tw-bg-opacity));
 }
 
+.dark\:hover\:bg-gray-700\/50:hover:is(.dark *) {
+  background-color: rgb(55 65 81 / 0.5);
+}
+
 .dark\:hover\:bg-gray-800:hover:is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(31 41 55 / var(--tw-bg-opacity));
@@ -3290,6 +3613,15 @@ video {
   background-color: rgb(21 128 61 / var(--tw-bg-opacity));
 }
 
+.dark\:hover\:bg-orange-600:hover:is(.dark *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(234 88 12 / var(--tw-bg-opacity));
+}
+
+.dark\:hover\:bg-orange-900\/30:hover:is(.dark *) {
+  background-color: rgb(124 45 18 / 0.3);
+}
+
 .dark\:hover\:bg-primary-600:hover:is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(214 131 56 / var(--tw-bg-opacity));
@@ -3309,6 +3641,22 @@ video {
   background-color: rgb(185 28 28 / var(--tw-bg-opacity));
 }
 
+.dark\:hover\:bg-red-900\/20:hover:is(.dark *) {
+  background-color: rgb(127 29 29 / 0.2);
+}
+
+.dark\:hover\:bg-red-900\/30:hover:is(.dark *) {
+  background-color: rgb(127 29 29 / 0.3);
+}
+
+.dark\:hover\:bg-primary-900\/40:hover:is(.dark *) {
+  background-color: rgb(123 74 30 / 0.4);
+}
+
+.dark\:hover\:bg-primary-900\/20:hover:is(.dark *) {
+  background-color: rgb(123 74 30 / 0.2);
+}
+
 .dark\:hover\:from-primary-500:hover:is(.dark *) {
   --tw-gradient-from: #f49541 var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(244 149 65 / 0) var(--tw-gradient-to-position);
@@ -3349,6 +3697,11 @@ video {
   color: rgb(209 213 219 / var(--tw-text-opacity));
 }
 
+.dark\:hover\:text-orange-400:hover:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(251 146 60 / var(--tw-text-opacity));
+}
+
 .dark\:hover\:text-primary-300:hover:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(248 185 99 / var(--tw-text-opacity));
@@ -3379,6 +3732,11 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.dark\:hover\:text-green-300:hover:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(134 239 172 / var(--tw-text-opacity));
+}
+
 .dark\:hover\:file\:bg-primary-800\/60:is(.dark *)::file-selector-button:hover {
   background-color: rgb(154 93 38 / 0.6);
 }
@@ -3433,6 +3791,11 @@ video {
   --tw-ring-color: rgb(22 101 52 / var(--tw-ring-opacity));
 }
 
+.dark\:focus\:ring-orange-500:focus:is(.dark *) {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(249 115 22 / var(--tw-ring-opacity));
+}
+
 .dark\:focus\:ring-primary-500:focus:is(.dark *) {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(244 149 65 / var(--tw-ring-opacity));
@@ -3480,6 +3843,16 @@ video {
     grid-column: span 3 / span 3;
   }
 
+  .sm\:mx-0 {
+    margin-left: 0px;
+    margin-right: 0px;
+  }
+
+  .sm\:my-8 {
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+  }
+
   .sm\:mb-0 {
     margin-bottom: 0px;
   }
@@ -3488,10 +3861,18 @@ video {
     margin-left: 0.25rem;
   }
 
+  .sm\:ml-4 {
+    margin-left: 1rem;
+  }
+
   .sm\:mr-4 {
     margin-right: 1rem;
   }
 
+  .sm\:mt-0 {
+    margin-top: 0px;
+  }
+
   .sm\:inline-block {
     display: inline-block;
   }
@@ -3500,6 +3881,14 @@ video {
     display: flex;
   }
 
+  .sm\:h-10 {
+    height: 2.5rem;
+  }
+
+  .sm\:w-10 {
+    width: 2.5rem;
+  }
+
   .sm\:w-auto {
     width: auto;
   }
@@ -3508,6 +3897,26 @@ video {
     width: 100%;
   }
 
+  .sm\:max-w-lg {
+    max-width: 32rem;
+  }
+
+  .sm\:max-w-2xl {
+    max-width: 42rem;
+  }
+
+  .sm\:max-w-md {
+    max-width: 28rem;
+  }
+
+  .sm\:max-w-sm {
+    max-width: 24rem;
+  }
+
+  .sm\:max-w-xl {
+    max-width: 36rem;
+  }
+
   .sm\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -3520,10 +3929,26 @@ video {
     flex-direction: row;
   }
 
+  .sm\:flex-row-reverse {
+    flex-direction: row-reverse;
+  }
+
+  .sm\:items-start {
+    align-items: flex-start;
+  }
+
+  .sm\:items-center {
+    align-items: center;
+  }
+
   .sm\:rounded-lg {
     border-radius: 0.5rem;
   }
 
+  .sm\:p-0 {
+    padding: 0px;
+  }
+
   .sm\:p-6 {
     padding: 1.5rem;
   }
@@ -3532,6 +3957,15 @@ video {
     padding: 2rem;
   }
 
+  .sm\:px-6 {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+
+  .sm\:text-left {
+    text-align: left;
+  }
+
   .sm\:text-2xl {
     font-size: 1.5rem;
     line-height: 2rem;
@@ -3542,6 +3976,10 @@ video {
     line-height: 1.25rem;
   }
 
+  .sm\:leading-6 {
+    line-height: 1.5rem;
+  }
+
   .sm\:shadow-xl {
     --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
     --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);

docs/contributing/ui-translations.md

@@ -11,16 +11,18 @@ Help make AliasVault accessible to users worldwide by translating the user inter
 
 AliasVault is currently available in the following languages. See how complete each language is on the [Crowdin project page](https://crowdin.com/project/aliasvault). **Don't see your language?** Contact us and we'll add it so you can get started translating.
 
-- 🇬🇧 English
 - 🇨🇳 Chinese (Simplified)
 - 🇳🇱 Dutch
+- 🇬🇧 English
 - 🇫🇮 Finnish
+- 🇫🇷 French
 - 🇩🇪 German
 - 🇮🇱 Hebrew
 - 🇮🇹 Italian
 - 🇵🇱 Polish
 - 🇧🇷 Portuguese (Brazilian)
 - 🇷🇺 Russian
+- 🇪🇸 Spanish
 - 🇺🇦 Ukrainian
 
 ---