Add svg background to login page

rommapp · Jan 31, 2025 · c90ad9d · c90ad9d
1 parent e708719
commit c90ad9d
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 21 deletions.
diff --git a/frontend/assets/auth_background.svg b/frontend/assets/auth_background.svg
diff --git a/frontend/assets/styled_bg.png b/frontend/assets/styled_bg.png
diff --git a/frontend/src/RomM.vue b/frontend/src/RomM.vue
@@ -17,6 +17,7 @@ const selectedLanguage = ref(
 locale.value = selectedLanguage.value.value;
 storeLanguage.setLanguage(selectedLanguage.value);
 </script>
+
 <template>
   <v-app>
     <v-main height="100dvh">

diff --git a/frontend/src/layouts/Auth.vue b/frontend/src/layouts/Auth.vue
@@ -8,7 +8,7 @@ const heartbeatStore = storeHeartbeat();
 
 <template>
   <notification />
-  <v-container class="fill-height justify-center">
+  <v-container id="container" class="fill-height justify-center">
     <router-view />
   </v-container>
   <div id="version" class="position-absolute">
@@ -26,4 +26,10 @@ const heartbeatStore = storeHeartbeat();
   bottom: 0.3rem;
   right: 0.5rem;
 }
+
+#container {
+  background-image: url("/assets/auth_background.svg");
+  background-size: cover;
+  max-width: 100vw;
+}
 </style>
diff --git a/frontend/src/styles/themes.ts b/frontend/src/styles/themes.ts
@@ -9,39 +9,33 @@ const commonColors = {
 export const dark = {
   dark: true,
   colors: {
-    primary: "#8B74E8", // Slightly desaturated for better readability
-    secondary: "#9E8CD6", // Better contrast with primary
-    tertiary: "#C5B6AE", // Lightened for better visibility
-    accent: "#FF9B85", // Slightly muted to reduce visual harshness
+    primary: "#8B74E8",
+    secondary: "#9E8CD6",
+    accent: "#E1A38D",
     background: "#0D1117",
     surface: "#161B22",
-    toplayer: "#1C2330", // Slightly darker for better depth
-    "primary-lighten": "#A18FFF", // More vibrant for interactive elements
-    "primary-darken": "#6043C8", // Deeper purple for emphasis
-    "secondary-lighten": "#EBE7FA", // More saturated for better contrast
-    "secondary-darken": "#7A6BB4", // Darker for better hierarchy
-    "tertiary-lighten": "#E5D6CC", // Warmer tone
-    "tertiary-darken": "#A69589", // More neutral dark tone
+    toplayer: "#1C2330",
+    "primary-lighten": "#A18FFF",
+    "primary-darken": "#6043C8",
+    "secondary-lighten": "#EBE7FA",
+    "secondary-darken": "#7A6BB4",
     ...commonColors,
   },
 };
 
 export const light = {
   dark: false,
   colors: {
-    primary: "#371f69", // Slightly darker for better contrast on light
+    primary: "#371f69",
     secondary: "#553e98",
-    tertiary: "#8A7A71", // Darker for better readability
-    accent: "#FF7A5C", // More vibrant for better visibility
+    accent: "#E1A38D",
     surface: "#FFFFFF",
-    background: "#F2F4F8", // Darker to create more separation from background
+    background: "#F2F4F8",
     toplayer: "#E4E9F0",
-    "primary-lighten": "#7850E6", // More saturated for interactive states
+    "primary-lighten": "#7850E6",
     "primary-darken": "#452788",
-    "secondary-lighten": "#F0EBFA", // Slightly warmer purple tint
-    "secondary-darken": "#9B8BD0", // More saturated for emphasis
-    "tertiary-lighten": "#CFC2B8",
-    "tertiary-darken": "#766961", // Darker for better contrast
+    "secondary-lighten": "#F0EBFA",
+    "secondary-darken": "#9B8BD0",
     ...commonColors,
   },
 };