From 1173f83525dd85ec2d458ec33c375e5709345e17 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Thu, 14 Aug 2025 17:08:40 +0200
Subject: [PATCH] fix(auth): make text always white on image

---
 .../src/components/misc/NoAuthWrapper.vue     | 80 +++++++++----------
 1 file changed, 36 insertions(+), 44 deletions(-)

diff --git a/frontend/src/components/misc/NoAuthWrapper.vue b/frontend/src/components/misc/NoAuthWrapper.vue
index 2e85d6a95..c76d4433c 100644
--- a/frontend/src/components/misc/NoAuthWrapper.vue
+++ b/frontend/src/components/misc/NoAuthWrapper.vue
@@ -1,35 +1,22 @@
 <template>
 	<div class="no-auth-wrapper">
-		<Logo
-			class="logo"
-			width="200"
-			height="58"
-		/>
+		<Logo class="logo" width="200" height="58" />
 		<div class="noauth-container">
-			<section
-				class="image"
-				:class="{'has-message': motd !== ''}"
-			>
+			<section class="image" :class="{ 'has-message': motd !== '' }">
 				<Message v-if="motd !== ''">
 					{{ motd }}
 				</Message>
 				<h2 class="image-title">
-					{{ $t('misc.welcomeBack') }}
+					{{ $t("misc.welcomeBack") }}
 				</h2>
 			</section>
 			<section class="content">
 				<div>
-					<h2
-						v-if="title"
-						class="title"
-					>
+					<h2 v-if="title" class="title">
 						{{ title }}
 					</h2>
 					<ApiConfig v-if="showApiConfig" />
-					<Message
-						v-if="motd !== ''"
-						class="is-hidden-tablet mbe-4"
-					>
+					<Message v-if="motd !== ''" class="is-hidden-tablet mbe-4">
 						{{ motd }}
 					</Message>
 					<slot />
@@ -41,36 +28,41 @@
 </template>
 
 <script lang="ts" setup>
-import {computed} from 'vue'
-import {useRoute} from 'vue-router'
-import {useI18n} from 'vue-i18n'
+import { computed } from "vue";
+import { useRoute } from "vue-router";
+import { useI18n } from "vue-i18n";
 
-import Logo from '@/components/home/Logo.vue'
-import Message from '@/components/misc/Message.vue'
-import Legal from '@/components/misc/Legal.vue'
-import ApiConfig from '@/components/misc/ApiConfig.vue'
+import Logo from "@/components/home/Logo.vue";
+import Message from "@/components/misc/Message.vue";
+import Legal from "@/components/misc/Legal.vue";
+import ApiConfig from "@/components/misc/ApiConfig.vue";
 
-import {useTitle} from '@/composables/useTitle'
-import {useConfigStore} from '@/stores/config'
+import { useTitle } from "@/composables/useTitle";
+import { useConfigStore } from "@/stores/config";
 
-withDefaults(defineProps<{
-	showApiConfig?: boolean
-}>(), {
-	showApiConfig: false,
-})
-const configStore = useConfigStore()
-const motd = computed(() => configStore.motd)
-
-const route = useRoute()
-const {t} = useI18n({useScope: 'global'})
-const title = computed(() => route.meta?.title ? t(route.meta.title as string) : '')
-useTitle(() => title.value)
+withDefaults(
+	defineProps<{
+		showApiConfig?: boolean;
+	}>(),
+	{
+		showApiConfig: false,
+	},
+);
+const configStore = useConfigStore();
+const motd = computed(() => configStore.motd);
 
+const route = useRoute();
+const { t } = useI18n({ useScope: "global" });
+const title = computed(() =>
+	route.meta?.title ? t(route.meta.title as string) : "",
+);
+useTitle(() => title.value);
 </script>
 
 <style lang="scss" scoped>
 .no-auth-wrapper {
-	background: var(--site-background) url('@/assets/llama.svg?url') no-repeat fixed bottom left;
+	background: var(--site-background) url("@/assets/llama.svg?url") no-repeat
+		fixed bottom left;
 	min-block-size: 100vh;
 	display: flex;
 	flex-direction: column;
@@ -107,7 +99,7 @@ useTitle(() => title.value)
 	}
 
 	@media screen and (min-width: $tablet) {
-		background: url('@/assets/no-auth-image.jpg') no-repeat bottom/cover;
+		background: url("@/assets/no-auth-image.jpg") no-repeat bottom/cover;
 		position: relative;
 
 		&.has-message {
@@ -115,13 +107,13 @@ useTitle(() => title.value)
 		}
 
 		&::before {
-			content: '';
+			content: "";
 			position: absolute;
 			inset-block-start: 0;
 			inset-inline-start: 0;
 			inset-inline-end: 0;
 			inset-block-end: 0;
-			background-color: rgba(0, 0, 0, .2);
+			background-color: rgba(0, 0, 0, 0.2);
 		}
 
 		> * {
@@ -153,7 +145,7 @@ useTitle(() => title.value)
 }
 
 .image-title {
-	color: var(--white);
+	color: hsl(0deg, 0%, 100%);
 	font-size: 2.5rem;
 }
 </style>