fix: use correct styles

components/layout/navigation/Sidebar.vue

@@ -82,6 +82,7 @@
             leave-to="-translate-x-full"
           >
             <DialogPanel class="relative mr-16 flex w-full max-w-xs flex-1">
+              <!-- Close button -->
               <TransitionChild
                 as="template"
                 enter="ease-in-out duration-300"

components/pages/posts/post/PostDownload.vue

@@ -19,7 +19,9 @@
 
   async function downloadMedia() {
     if (!isPremium.value) {
-      toast.error('You have found a Premium feature! Subscribe to use it.')
+      toast.error(
+        '[Premium feature] automatically download media with the correct name & extension: rule34.xxx-123.png'
+      )
       return
     }
 

components/pages/settings/SettingNumber.vue

@@ -1,36 +1,36 @@
 <script>
-export default {
-	inheritAttrs: false
-}
+  export default {
+    inheritAttrs: false
+  }
 </script>
 
 <script setup>
-import { SwitchGroup, SwitchLabel } from '@headlessui/vue'
+  import { SwitchGroup, SwitchLabel } from '@headlessui/vue'
 
-const props = defineProps(['modelValue'])
-const emit = defineEmits(['update:modelValue'])
+  const props = defineProps(['modelValue'])
+  const emit = defineEmits(['update:modelValue'])
 </script>
 
 <template>
-	<div class="flex gap-2 flex-row items-center justify-between">
-		<!-- TODO: Generate random label ID -->
-		<label class="flex flex-grow flex-col">
-			<span class="text-base-content-highlight font-medium leading-8">
-				<slot name="name" />
-			</span>
+  <div class="flex flex-row items-center justify-between gap-2">
+    <!-- TODO: Generate random label ID -->
+    <label class="flex flex-grow flex-col">
+      <span class="font-medium leading-8 text-base-content-highlight">
+        <slot name="name" />
+      </span>
 
-			<span class="text-sm text-base-content">
-				<slot name="description" />
-			</span>
-		</label>
+      <span class="text-sm text-base-content">
+        <slot name="description" />
+      </span>
+    </label>
 
-		<input
-			:value="modelValue"
-			class="focus-visible:focus-util w-12 h-6 rounded-full border-2 border-base-0/20 text-base-content-highlight bg-inherit px-2 text-center"
-			min="0"
-			type="number"
-			v-bind="$attrs"
-			@input="$emit('update:modelValue', $event.target.value)"
-		/>
-	</div>
+    <input
+      :value="modelValue"
+      class="focus-visible:focus-util h-6 w-12 rounded-full bg-inherit px-2 text-center text-base-content-highlight ring-2 ring-base-0/20"
+      min="0"
+      type="number"
+      v-bind="$attrs"
+      @input="$emit('update:modelValue', $event.target.value)"
+    />
+  </div>
 </template>

components/pages/settings/SettingSwitch.vue

@@ -1,47 +1,47 @@
 <script>
-export default {
-	inheritAttrs: false
-}
+  export default {
+    inheritAttrs: false
+  }
 </script>
 
 <script setup>
-import { Switch, SwitchDescription, SwitchGroup, SwitchLabel } from '@headlessui/vue'
+  import { Switch, SwitchDescription, SwitchGroup, SwitchLabel } from '@headlessui/vue'
 
-const props = defineProps(['modelValue'])
-const emit = defineEmits(['update:modelValue'])
+  const props = defineProps(['modelValue'])
+  const emit = defineEmits(['update:modelValue'])
 </script>
 
 <template>
-	<SwitchGroup
-		as="div"
-		class="flex flex-row items-center gap-2 justify-between"
-	>
-		<span class="flex flex-grow flex-col">
-			<SwitchLabel
-				as="span"
-				class="text-base-content-highlight font-medium leading-8"
-				passive
-			>
-				<slot name="name" />
-			</SwitchLabel>
+  <SwitchGroup
+    as="div"
+    class="flex flex-row items-center justify-between gap-2"
+  >
+    <span class="flex flex-grow flex-col">
+      <SwitchLabel
+        as="span"
+        class="font-medium leading-8 text-base-content-highlight"
+        passive
+      >
+        <slot name="name" />
+      </SwitchLabel>
 
-			<SwitchDescription
-				as="span"
-				class="text-sm text-base-content"
-			>
-				<slot name="description" />
-			</SwitchDescription>
-		</span>
+      <SwitchDescription
+        as="span"
+        class="text-sm text-base-content"
+      >
+        <slot name="description" />
+      </SwitchDescription>
+    </span>
 
-		<Switch
-			:modelValue="modelValue"
-			class="ui-checked:bg-primary-700 ui-not-checked:bg-base-1000 relative inline-flex h-6 w-12 flex-shrink-0 cursor-pointer rounded-full border-2 border-base-800 transition-colors duration-200 ease-in-out focus-visible:focus-util"
-			@update:modelValue="emit('update:modelValue', $event)"
-		>
-			<span
-				aria-hidden="true"
-				class="ui-checked:translate-x-6 ui-not-checked:translate-x-0 pointer-events-none inline-block h-5 w-5 transform rounded-full bg-base-content-highlight shadow ring-0 transition duration-200 ease-in-out"
-			/>
-		</Switch>
-	</SwitchGroup>
+    <Switch
+      :modelValue="modelValue"
+      class="focus-visible:focus-util relative inline-flex h-6 w-12 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent ring-2 ring-base-0/20 transition-colors duration-200 ease-in-out ui-checked:bg-primary-700 ui-not-checked:bg-base-1000"
+      @update:modelValue="emit('update:modelValue', $event)"
+    >
+      <span
+        aria-hidden="true"
+        class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-base-content-highlight shadow ring-0 transition duration-200 ease-in-out ui-checked:translate-x-6 ui-not-checked:translate-x-0"
+      />
+    </Switch>
+  </SwitchGroup>
 </template>

pages/DomainSelector.vue

@@ -127,7 +127,7 @@
                 <!-- Checked -->
                 <span
                   v-if="selected"
-                  :class="[active ? 'text-base-content-highlight' : 'text-base-content-highlight']"
+                  class="text-base-content-highlight"
                 >
                   <CheckIcon
                     aria-hidden="true"