feat: improve auth pages

app/components/ThemeSwitcher.vue

@@ -1,6 +1,10 @@
 <script setup lang="ts">
 import type { DropdownItem } from '~/types/dropdown';
 
+const props = defineProps<{
+    size: 'small' | 'medium' | 'large';
+}>();
+
 type Theme = 'light' | 'dark' | 'system';
 
 const { updateSettings, settings } = await useUserSettings();
@@ -34,7 +38,12 @@ const toggleDropdown = (e: MouseEvent) => {
 
 <template>
     <button aria-label="Open theme switcher" @click="toggleDropdown"
-        class="h-7 w-7 flex items-center justify-center rounded-lg hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] transition-colors active:text-[var(--text-primary)]">
-        <span :class="['text-5 pointer-events-none', currentOption!.icon]"></span>
+        class="flex items-center justify-center rounded-lg hover:bg-[var(--color-hover)] focus-visible:bg-[var(--color-hover)] transition-colors active:text-[var(--text-primary)]"
+        :class="{
+            'h-7 w-7 text-5': size === 'small',
+            'h-9 w-9 text-6': size === 'medium',
+            'h-11 w-11 text-7': size === 'large',
+        }">
+        <span :class="['pointer-events-none', currentOption!.icon]"></span>
     </button>
 </template>