From 4c125b3caff1d78f1f71802535d2d9d7acfff9fe Mon Sep 17 00:00:00 2001
From: kauzkoko <kamelkebab@tutanota.com>
Date: Mon, 11 Mar 2024 12:02:47 +0100
Subject: [PATCH 1/4] SEBSP-99 fix: persistent theme toggle

---
 .../src/components/layout/ContainerLayout.vue | 33 +++----------------
 client/src/components/views/LoginPage.vue     |  7 ++--
 2 files changed, 10 insertions(+), 30 deletions(-)

diff --git a/client/src/components/layout/ContainerLayout.vue b/client/src/components/layout/ContainerLayout.vue
index 391363d..1542a54 100644
--- a/client/src/components/layout/ContainerLayout.vue
+++ b/client/src/components/layout/ContainerLayout.vue
@@ -111,15 +111,6 @@
 
                         <v-divider></v-divider>
 
-                        <v-list-item >
-                            <v-btn-toggle v-model="languageToggle" variant="text" rounded="0" mandatory>
-                                    <v-btn @click="changeLocale('en')">EN</v-btn>
-                                    <v-btn @click="changeLocale('de')">DE</v-btn>
-                            </v-btn-toggle>
-                        </v-list-item>
-
-                        <v-divider></v-divider>
-
                         <v-list-item class="text-decoration-underline text-blue mx-auto" @click="authStore.logout()">
                             <v-list-item-title class="mx-auto">{{ $t("navigation.signOut") }}</v-list-item-title>
                         </v-list-item>
@@ -147,7 +138,6 @@
     import * as userAccountViewService from "@/services/component-services/userAccountViewService";
     import { useRoute } from "vue-router";
     import { useTheme } from "vuetify";
-    import { useI18n } from 'vue-i18n'
 
     //navigation
     const drawer = ref();
@@ -163,11 +153,9 @@
 
     //theme
     const theme = useTheme();
-    const themeToggle = ref<number>(theme.global.name.value === "light" ? 0 : 1);
-
-    //language
-    const languageToggle = ref<number>(0);
-    const language = ref<string>("EN");
+    const localstorageTheme: string | null = localStorage.getItem("theme");
+    theme.global.name.value = localstorageTheme ?? theme.global.name.value ?? "light";
+    const themeToggle = ref<number>(theme.global.name.value === "dark" ? 1 : 0);
 
     //gallery view
     const gridSizes: GridSize[] = [
@@ -178,16 +166,10 @@
         // {title: "6x6", value: 6},
     ];
 
-    // i18n
-    const { locale } = useI18n()
-
     //watchers
     watch(themeToggle, () => {
-        theme.global.name.value = themeToggle.value !== 1 ? "light" : "dark";
-    });
-
-    watch(languageToggle, () => {
-        language.value = languageToggle.value !== 1 ? "EN" : "DE";
+        theme.global.name.value = themeToggle.value === 0 ? "light" : "dark";
+        localStorage.setItem("theme", theme.global.name.value);
     });
 
     //methods
@@ -198,11 +180,6 @@
     async function userMenuOpened(){
         await userAccountViewService.setPersonalUserAccount();
     }
-
-    function changeLocale (newLocale: string) {
-        locale.value = newLocale
-    }
-
 </script>  
 
 <style scoped>
diff --git a/client/src/components/views/LoginPage.vue b/client/src/components/views/LoginPage.vue
index f57bec0..85ea8fe 100644
--- a/client/src/components/views/LoginPage.vue
+++ b/client/src/components/views/LoginPage.vue
@@ -92,8 +92,11 @@
     import * as authenticationService from "@/services/api-services/authenticationService";
     import {navigateTo} from "@/router/navigation";
     import { useLoadingStore, useAuthStore, useSettingsStore } from "@/store/app";
-    // import { useTheme } from "vuetify";
-    // const theme = useTheme();
+    import { useTheme } from "vuetify";
+
+    const theme = useTheme();
+    const localstorageTheme: string | null = localStorage.getItem("theme");
+    theme.global.name.value = localstorageTheme ?? theme.global.name.value ?? "light";
 
     // const username = ref("super-admin");
     // const password = ref("admin");

From d74b08dcc41460c0abd33d2543a5d55f9e78f9c0 Mon Sep 17 00:00:00 2001
From: kauzkoko <kamelkebab@tutanota.com>
Date: Mon, 11 Mar 2024 12:15:57 +0100
Subject: [PATCH 2/4] SEBSP-99 theme styles

---
 client/src/App.vue                               | 12 +++---------
 client/src/components/layout/ContainerLayout.vue |  2 +-
 client/src/components/views/LoginPage.vue        |  2 +-
 client/src/plugins/vuetify.ts                    |  8 ++++++--
 4 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/client/src/App.vue b/client/src/App.vue
index 3834215..5aa6040 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -24,13 +24,7 @@
 </script>
 
 <style>
-
-    .subtitle-color{
-        color: black;
-    }
-
-    .text-decoration-underline a:visited {
-        color: #2196F3 !important;
-    }
-
+  .text-decoration-underline a:visited {
+      color: #2196F3 !important;
+  }
 </style>
diff --git a/client/src/components/layout/ContainerLayout.vue b/client/src/components/layout/ContainerLayout.vue
index 1542a54..3b22eb3 100644
--- a/client/src/components/layout/ContainerLayout.vue
+++ b/client/src/components/layout/ContainerLayout.vue
@@ -6,7 +6,7 @@
         <v-sheet class="pa-4">
             <a href="/start" class="text-decoration-none text-black">
                 <v-img max-height="100" src="/img/seb-logo-no-border.png" alt="Logo ETH Zürich"></v-img>
-                <div class="app-title text-h6">{{ $t("navigation.title") }}</div>
+                <div class="app-title text-h6 text-title">{{ $t("navigation.title") }}</div>
             </a>
         </v-sheet>
 
diff --git a/client/src/components/views/LoginPage.vue b/client/src/components/views/LoginPage.vue
index 85ea8fe..e997081 100644
--- a/client/src/components/views/LoginPage.vue
+++ b/client/src/components/views/LoginPage.vue
@@ -22,7 +22,7 @@
                     Sign in
                 </v-card-title>
                 <v-card-subtitle>
-                    <span class="subtitle-color">
+                    <span class="text-subtitle">
                         Please fill the form to sign in to your SEB screen proctoring account.
                     </span>
                 </v-card-subtitle>
diff --git a/client/src/plugins/vuetify.ts b/client/src/plugins/vuetify.ts
index 2c7a01a..a38aa0a 100644
--- a/client/src/plugins/vuetify.ts
+++ b/client/src/plugins/vuetify.ts
@@ -9,14 +9,18 @@ export default createVuetify({
         colors: {
           primary: "#215CAF",
           secondary: "#5CBBF6",
-          blue: "#2196F3"
+          blue: "#2196F3",
+          title: "#000000",
+          subtitle: "#000000",
           // background: "#eef5f9",
           // surface: "#4D7DBF"
         },
       },
       dark: {
         colors: { 
-          primary: "#ffff00",
+          primary: "#2196F3",
+          title: "#ffffff",
+          subtitle: "#ffffff",
         }
       },
       tableTheme: {

From f16e49847622b90e3df343bc5d822cca932e3e61 Mon Sep 17 00:00:00 2001
From: kauzkoko <kamelkebab@tutanota.com>
Date: Mon, 11 Mar 2024 12:20:18 +0100
Subject: [PATCH 3/4] SEPSP99 feat:dark mode eth logo login screen

---
 client/src/components/views/LoginPage.vue | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/client/src/components/views/LoginPage.vue b/client/src/components/views/LoginPage.vue
index e997081..1dbc4fa 100644
--- a/client/src/components/views/LoginPage.vue
+++ b/client/src/components/views/LoginPage.vue
@@ -4,7 +4,7 @@
 
             <v-card class="pa-10">
                 <div class="d-flex ml-15 mr-15">
-                    <img src="/img/logo.svg" alt="Logo ETH Zürich" />
+                    <img src="/img/logo.svg" :class="isDark ? 'invert' : ''" alt="Logo ETH Zürich" />
                 </div>
 
                 <div class="mt-10">
@@ -88,7 +88,7 @@
 </template>
   
 <script setup lang="ts">
-    import { ref } from "vue";
+    import { ref, computed } from "vue";
     import * as authenticationService from "@/services/api-services/authenticationService";
     import {navigateTo} from "@/router/navigation";
     import { useLoadingStore, useAuthStore, useSettingsStore } from "@/store/app";
@@ -97,6 +97,7 @@
     const theme = useTheme();
     const localstorageTheme: string | null = localStorage.getItem("theme");
     theme.global.name.value = localstorageTheme ?? theme.global.name.value ?? "light";
+    const isDark = computed<boolean>(() => theme.global.current.value.dark);
 
     // const username = ref("super-admin");
     // const password = ref("admin");
@@ -137,7 +138,8 @@
 
 </script>
   
-
 <style scoped>
-
+.invert{
+    filter: invert(1);
+}
 </style>
\ No newline at end of file

From b381ad4c36746e8b5952c96513c5bc52fcd973f5 Mon Sep 17 00:00:00 2001
From: Nadim Ritter <nadim.ritter@let.ethz.ch>
Date: Tue, 12 Mar 2024 11:51:58 +0100
Subject: [PATCH 4/4] darkmodelogintoggle language toggle

---
 client/src/components/views/LoginPage.vue | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/client/src/components/views/LoginPage.vue b/client/src/components/views/LoginPage.vue
index 1dbc4fa..c2f403d 100644
--- a/client/src/components/views/LoginPage.vue
+++ b/client/src/components/views/LoginPage.vue
@@ -94,11 +94,6 @@
     import { useLoadingStore, useAuthStore, useSettingsStore } from "@/store/app";
     import { useTheme } from "vuetify";
 
-    const theme = useTheme();
-    const localstorageTheme: string | null = localStorage.getItem("theme");
-    theme.global.name.value = localstorageTheme ?? theme.global.name.value ?? "light";
-    const isDark = computed<boolean>(() => theme.global.current.value.dark);
-
     // const username = ref("super-admin");
     // const password = ref("admin");
     const username = ref("");
@@ -112,8 +107,14 @@
     const loadingStore = useLoadingStore();
     const settingsStore = useSettingsStore();
 
-    async function signIn(){
+    //theme
+    const theme = useTheme();
+    const localStorageTheme: string | null = localStorage.getItem("theme");
+    theme.global.name.value = localStorageTheme ?? theme.global.name.value ?? "light";
+    const isDark = computed<boolean>(() => theme.global.current.value.dark);
 
+    
+    async function signIn(){
         loginError.value = false;
 
         try{