From cae7de3a1fe6897d0cacc04f08d2030cf5a08458 Mon Sep 17 00:00:00 2001
From: BinarySandia04 <aranseraroig@gmail.com>
Date: Mon, 8 Jun 2026 15:14:39 +0200
Subject: [PATCH] More IA fix with slop

---
 .../parts/site_options/LanguageSelector.vue   |  27 +++--
 .../parts/site_options/ThemeSelector.vue      | 113 ++++++++++--------
 2 files changed, 81 insertions(+), 59 deletions(-)

diff --git a/frontend/app/components/parts/site_options/LanguageSelector.vue b/frontend/app/components/parts/site_options/LanguageSelector.vue
index ff40197..e21a986 100644
--- a/frontend/app/components/parts/site_options/LanguageSelector.vue
+++ b/frontend/app/components/parts/site_options/LanguageSelector.vue
@@ -35,16 +35,18 @@ const changeLocale = (lang) => {
 
 <template>
 <div class="menu-container" ref="menuContainer">
-  <button class="menu-button" @click="toggleDropdown">{{ $t("site_options.language_selector.dropdown") }} </button>
+  <button class="menu-button" @click="toggleDropdown">{{ $t("site_options.language_selector.dropdown") }} ▾</button>
 
-  <div class="dropdown" v-show="dropdownVisible">
-    <div class="section">
-      <div :class="{'menu-item': true, 'active': locale === loc.code}"
-       v-for="loc in locales" @click="changeLocale(loc)">
-        {{ $t('locales.' + loc.code) }}
+  <Transition name="dropdown">
+    <div class="dropdown" v-show="dropdownVisible">
+      <div class="section">
+        <div :class="{'menu-item': true, 'active': locale === loc.code}"
+         v-for="loc in locales" @click="changeLocale(loc)">
+          {{ $t('locales.' + loc.code) }}
+        </div>
       </div>
     </div>
-  </div>
+  </Transition>
 </div>
 </template>
 
@@ -63,8 +65,17 @@ const changeLocale = (lang) => {
     background-color: #30363d;
   }
 }
+/* Dropdown transitions */
+.dropdown-enter-active, .dropdown-leave-active {
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+.dropdown-enter-from, .dropdown-leave-to {
+  opacity: 0;
+  transform: translateY(-8px);
+}
+
 .dropdown {
-z-index: 10;
+ z-index: 10;
   position: absolute;
   top: 50px;
   right: 110px;
diff --git a/frontend/app/components/parts/site_options/ThemeSelector.vue b/frontend/app/components/parts/site_options/ThemeSelector.vue
index 0bed30e..49d1775 100644
--- a/frontend/app/components/parts/site_options/ThemeSelector.vue
+++ b/frontend/app/components/parts/site_options/ThemeSelector.vue
@@ -30,58 +30,60 @@ onUnmounted(() => {
 
 <template>
 <div class="menu-container" ref="menuContainer">
-  <button class="menu-button" @click="toggleDropdown">{{ $t('site_options.theme_selector.dropdown') }} </button>
+  <button class="menu-button" @click="toggleDropdown">{{ $t('site_options.theme_selector.dropdown') }} ▾</button>
 
-  <div class="dropdown" v-show="dropdownVisible">
-    <div class="two-columns">
-        <div class="section">
-            <div class="menu-section">
-                <div class="menu-header">
-                    {{ $t('site_options.theme_selector.dropdown') }}
-                </div>
-            </div>
-            <div class="divider"></div>
-            <div class="menu-section">
-                <div :class="{'menu-item': true, 'active': theme === 'dark' }" @click="setTheme('dark')">
-                    <div class="circle dark"></div>
-                    {{ $t('themes.dark') }}
-                </div>
-                <div :class="{'menu-item': true, 'active': theme === 'light' }" @click="setTheme('light')">
-                    <div class="circle light"></div>
-                    {{ $t('themes.light') }}
-                </div>
-            </div>
-        </div>
-        <div class="section">
-            <div class="menu-section">
-                <div class="menu-header">
-                    {{ $t('site_options.theme_selector.dragon') }}
-                </div>
-            </div>
-            <div class="divider"></div>
-            <div class="menu-section">
-                <div :class="{'menu-item': true, 'active': accent === 'katlum' }" @click="setAccent('katlum')">
-                    <div class="circle katlum"></div>
-                    {{ $t('themes.accents.katlum') }}
-                </div>
-                <div :class="{'menu-item': true, 'active': accent === 'solus' }" @click="setAccent('solus')">
-                    <div class="circle solus"></div>Solus
-                </div>
-                <!--
-                <div :class="{'menu-item': true, 'active': accent === 'silang' }" @click="setAccent('silang')">
-                    <div class="circle silang"></div>Silang
-                </div>
-                <div :class="{'menu-item': true, 'active': accent === 'nozt' }" @click="setAccent('nozt')">
-                    <div class="circle nozt"></div>Nozt
-                </div>
-                <div :class="{'menu-item': true, 'active': accent === 'albor' }" @click="setAccent('albor')">
-                    <div class="circle albor"></div>Albor
-                </div>
-                -->
-            </div>
-        </div>
+  <Transition name="dropdown">
+    <div class="dropdown" v-show="dropdownVisible">
+      <div class="two-columns">
+          <div class="section">
+              <div class="menu-section">
+                  <div class="menu-header">
+                      {{ $t('site_options.theme_selector.dropdown') }}
+                  </div>
+              </div>
+              <div class="divider"></div>
+              <div class="menu-section">
+                  <div :class="{'menu-item': true, 'active': theme === 'dark' }" @click="setTheme('dark')">
+                      <div class="circle dark"></div>
+                      {{ $t('themes.dark') }}
+                  </div>
+                  <div :class="{'menu-item': true, 'active': theme === 'light' }" @click="setTheme('light')">
+                      <div class="circle light"></div>
+                      {{ $t('themes.light') }}
+                  </div>
+              </div>
+          </div>
+          <div class="section">
+              <div class="menu-section">
+                  <div class="menu-header">
+                      {{ $t('site_options.theme_selector.dragon') }}
+                  </div>
+              </div>
+              <div class="divider"></div>
+              <div class="menu-section">
+                  <div :class="{'menu-item': true, 'active': accent === 'katlum' }" @click="setAccent('katlum')">
+                      <div class="circle katlum"></div>
+                      {{ $t('themes.accents.katlum') }}
+                  </div>
+                  <div :class="{'menu-item': true, 'active': accent === 'solus' }" @click="setAccent('solus')">
+                      <div class="circle solus"></div>Solus
+                  </div>
+                  <!--
+                  <div :class="{'menu-item': true, 'active': accent === 'silang' }" @click="setAccent('silang')">
+                      <div class="circle silang"></div>Silang
+                  </div>
+                  <div :class="{'menu-item': true, 'active': accent === 'nozt' }" @click="setAccent('nozt')">
+                      <div class="circle nozt"></div>Nozt
+                  </div>
+                  <div :class="{'menu-item': true, 'active': accent === 'albor' }" @click="setAccent('albor')">
+                      <div class="circle albor"></div>Albor
+                  </div>
+                  -->
+              </div>
+          </div>
+      </div>
     </div>
-  </div>
+  </Transition>
 </div>
 </template>
 
@@ -146,9 +148,18 @@ onUnmounted(() => {
   margin-right: 15px;
 }
 
+/* Dropdown transitions */
+.dropdown-enter-active, .dropdown-leave-active {
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+.dropdown-enter-from, .dropdown-leave-to {
+  opacity: 0;
+  transform: translateY(-8px);
+}
+
 /* Dropdown */
 .dropdown {
-z-index: 10;
+ z-index: 10;
   position: absolute;
   top: 50px;
   right: 0;