Layout changes

frontend/src/App.vue

@@ -19,6 +19,8 @@ import NavBar from "@/components/navigation/NavBar.vue";
 import { computed, onBeforeMount, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { useLocale } from "@/stores/locale-store";
+import { useThemeStore } from "@/stores/theme-store";
+import { useTheme } from "vuetify";
 
 const navBar = ref<InstanceType<typeof NavBar> | null>(null);
 
@@ -28,6 +30,15 @@ const hideHeader = computed(() => currentRoute.meta.hideHeader);
 onBeforeMount(() => {
     const { locale } = useI18n();
     const { selectedLocale } = useLocale();
+    const { storedTheme } = useThemeStore();
+    const theme = useTheme();
     locale.value = selectedLocale;
+    theme.global.name.value = storedTheme;
 });
 </script>
+
+<style>
+.v-main {
+    background-color: rgb(var(--v-theme-background));
+}
+</style>

frontend/src/assets/base.scss

@@ -5,7 +5,7 @@
     --color-primary-dark: color-mod(var(--color-primary) shade(15%));
     --color-primary-bg: color-mod(var(--color-primary) alpha(30));
 
-    --color-secondary: #dfe5f7;
+    --color-secondary: #ebeffb;
 
     --color-accent: #ffd200;
     --color-accent-light: color-mod(var(--color-accent) tint(15%));

frontend/src/components/ApolloHeader.vue

@@ -1,5 +1,5 @@
 <template>
-    <v-app-bar>
+    <v-app-bar class="bg-primary elevation-1">
         <v-app-bar-nav-icon variant="text" @click="emit('toggleNav')"></v-app-bar-nav-icon>
         <RouterLink to="/">
             <img alt="Logo" class="logo" src="@/assets/logo_white_transparant.png" />
@@ -10,15 +10,17 @@
         <div class="leftContent" v-else>
             <LogoutButton class="logout" v-if="isLoggedIn" />
             <LocaleSwitcher />
+            <ThemeSwitcher class="switcher" />
         </div>
     </v-app-bar>
 </template>
 
 <script setup lang="ts">
 import { RouterLink } from "vue-router";
 import { useDisplay } from "vuetify";
-import LocaleSwitcher from "./LocaleSwitcher.vue";
+import LocaleSwitcher from "./switcher/LocaleSwitcher.vue";
 import DropDownMobile from "@/components/navigation/DropDownMobile.vue";
+import ThemeSwitcher from "@/components/switcher/ThemeSwitcher.vue";
 import LogoutButton from "@/components/buttons/LogoutButton.vue";
 import { useAuthStore } from "@/stores/auth-store";
 import { storeToRefs } from "pinia";
@@ -39,15 +41,24 @@ const { isLoggedIn } = storeToRefs(useAuthStore());
 }
 
 .v-app-bar {
-    padding: 5px 0px;
+    padding: 5px 0;
 }
+
+.v-app-bar-nav-icon {
+    color: rgb(var(--v-theme-navtext));
+}
+
 .leftContent {
     margin-left: auto;
     display: flex;
     align-items: center;
 }
 
 .logout {
-    margin-right: 15px;
+    color: rgb(var(--v-theme-navtext));
+}
+
+.switcher {
+    margin-left: 20px;
 }
 </style>

frontend/src/components/buttons/LogoutButton.vue

@@ -1,5 +1,5 @@
 <template>
-    <v-btn variant="text" class="logout" @click="logout"> logout </v-btn>
+    <v-btn variant="text" class="logout" @click="logout"> {{ $t("logout") }} </v-btn>
 </template>
 
 <script setup lang="ts">

frontend/src/components/home/cards/HomeScreenCard.vue

@@ -1,5 +1,5 @@
 <template>
-    <v-card variant="text" :title="$t(title)" class="card">
+    <v-card :title="$t(title)" class="card" variant="flat">
         <slot></slot>
     </v-card>
 </template>
@@ -12,8 +12,9 @@ defineProps<{
 
 <style scoped>
 .card {
-    background-color: white;
-    color: black;
-    border-radius: 20px;
+    background-color: rgb(var(--v-theme-secondary));
+    color: rgb(var(--v-theme-text));
+    border-radius: 2px;
+    text-transform: capitalize;
 }
 </style>

frontend/src/components/home/listcontent/DeadlineItem.vue

@@ -1,5 +1,6 @@
 <template>
-    <div :class="getBackgroundClass()" @click="navigateToProject">
+    <div class="projectbtn" @click="navigateToProject">
+        <div :class="getBackgroundClass()"></div>
         <div class="leftcontent">
             <h3>{{ deadline.project.name }}</h3>
             <p class="p">{{ deadline.project.subject_id }}</p>
@@ -23,7 +24,7 @@ const { deadline } = toRefs(props);
 
 const getBackgroundClass = () => {
     return {
-        projectbtn: true,
+        block: true,
         accepted: deadline.value.status === "accepted",
         rejected: deadline.value.status === "rejected",
         none: deadline.value.status === "none",
@@ -47,39 +48,39 @@ const navigateToProject = () => {
 
 <style scoped>
 .projectbtn {
-    margin: 10px;
-    width: calc(100% - 20px);
-    background-color: white;
-    padding: 10px;
+    margin: 5px;
+    background-color: rgb(var(--v-theme-background));
     display: flex;
-    align-items: center;
     transition: background-color 0.3s;
-    border-radius: 10px;
+    align-items: center;
     cursor: pointer;
+    height: 65px;
+    border-radius: 2px;
 }
 
-.none {
-    background-color: #eeeeee;
+.projectbtn:hover {
+    background-color: rgb(var(--v-theme-tertiary));
 }
 
-.accepted {
-    background-color: #e3f7e4;
+.block {
+    margin-left: 10px;
+    width: 5px;
+    height: 100%;
 }
 
-.rejected {
-    background-color: #ffcaca;
+.none {
+    background-color: gray;
 }
 
-.accepted:hover {
-    background-color: #c3f2c6;
+.accepted {
+    background-color: green;
 }
 
-.rejected:hover {
-    background-color: #ff9898;
+.rejected {
+    background-color: darkred;
 }
-
-.none:hover {
-    background-color: lightgray;
+.leftcontent {
+    margin-left: 20px;
 }
 
 .rightcontent {
@@ -89,6 +90,6 @@ const navigateToProject = () => {
 }
 
 .p {
-    color: lightslategrey;
+    color: rgb(var(--v-theme-textsecondary));
 }
 </style>

frontend/src/components/home/listcontent/SubjectItem.vue

@@ -1,5 +1,4 @@
 <template>
-    <v-divider></v-divider>
     <div class="coursebtn" @click="navigateToCourse">
         <div>
             <h3>{{ subject.name }}</h3>
@@ -35,17 +34,19 @@ const navigateToCourse = () => {
 
 <style scoped>
 .coursebtn {
-    width: 100%;
-    background-color: white;
+    width: calc(100% - 10px);
+    margin: 5px;
     padding: 10px;
     display: flex;
     align-items: center;
     transition: background-color 0.3s;
     cursor: pointer;
+    background-color: rgb(var(--v-theme-background));
+    border-radius: 2px;
 }
 
 .coursebtn:hover {
-    background-color: lightgray;
+    background-color: rgb(var(--v-theme-tertiary));
 }
 
 .chevron {
@@ -55,6 +56,6 @@ const navigateToCourse = () => {
 }
 
 .teacher {
-    color: lightslategrey;
+    color: rgb(var(--v-theme-textsecondary));
 }
 </style>

frontend/src/components/navigation/DropDownList.vue

@@ -1,17 +1,21 @@
 <template>
-    <v-list class="items">
+    <v-list class="items bg-primary">
         <v-list-item data-test="logoutButton" v-if="loggedInValue.value">
             <LogoutButton />
         </v-list-item>
         <v-list-item data-test="localeSwitcher">
             <LocaleSwitcher />
         </v-list-item>
+        <v-list-item data-test="themeSwitcher">
+            <themeSwitcher />
+        </v-list-item>
     </v-list>
 </template>
 
 <script setup lang="ts">
-import LocaleSwitcher from "@/components/LocaleSwitcher.vue";
+import LocaleSwitcher from "@/components/switcher/LocaleSwitcher.vue";
 import LogoutButton from "@/components/buttons/LogoutButton.vue";
+import ThemeSwitcher from "@/components/switcher/ThemeSwitcher.vue";
 
 import { useAuthStore } from "@/stores/auth-store";
 import { storeToRefs } from "pinia";

frontend/src/components/navigation/NavBar.vue

@@ -1,5 +1,5 @@
 <template>
-    <v-navigation-drawer v-model="isOpen" app>
+    <v-navigation-drawer v-model="isOpen" app class="text-background">
         <div class="navbuttons">
             <NavButton
                 v-for="nav in navigations"
@@ -11,12 +11,7 @@
         </div>
         <template v-slot:append>
             <div class="ugent-logo">
-                <img
-                    alt="Logo"
-                    class="logo"
-                    src="@/assets/universiteit-gent-logo-white.png"
-                    height="150"
-                />
+                <img alt="Logo" class="logo" :src="`src/assets/${$t('logo')}`" height="150" />
             </div>
         </template>
     </v-navigation-drawer>
@@ -42,13 +37,12 @@ defineExpose({
 
 <style scoped lang="scss">
 .v-navigation-drawer {
-    background: linear-gradient(var(--color-primary), #0e2057);
+    background: rgb(var(--v-theme-primary));
     padding: 10px;
 }
 
 .ugent-logo {
     bottom: 0;
-    margin-bottom: 30px;
 }
 
 .navbuttons {

frontend/src/components/navigation/NavButton.vue

@@ -22,6 +22,8 @@ defineProps<{
     justify-content: space-between;
     align-items: center;
     width: 100%;
+    color: rgb(var(--v-theme-navtext));
+    text-transform: capitalize;
 }
 
 .v-icon {

frontend/src/components/LocaleSwitcher.vue → frontend/src/components/switcher/LocaleSwitcher.vue

@@ -1,6 +1,5 @@
 <template>
     <div class="switcher">
-        <v-icon icon="mdi-earth" />
         <template v-for="(availableLocale, index) in availableLocales" :key="availableLocale">
             <v-btn
                 variant="text"
@@ -29,7 +28,7 @@ function handleLocaleChange(selectedLocale: string) {
 
 <style lang="scss" scoped>
 .switcher {
-    color: var(--color-text-on-primary);
+    color: rgb(var(--v-theme-navtext));
     display: flex;
     align-items: center;
 }
@@ -39,7 +38,7 @@ function handleLocaleChange(selectedLocale: string) {
 }
 
 .selected-option {
-    color: var(--color-text-on-primary);
+    color: rgb(var(--v-theme-navtext));
     font-style: bold;
 }
 </style>

frontend/src/components/switcher/ThemeSwitcher.vue

@@ -0,0 +1,41 @@
+<template>
+    <div class="container">
+        <v-icon class="moon" icon="mdi mdi-moon-waning-crescent"></v-icon>
+        <v-switch
+            class="switcher"
+            color="white"
+            v-model="switchValue"
+            false-value="darkTheme"
+            true-value="lightTheme"
+        ></v-switch>
+        <v-icon class="sun" icon="mdi mdi-white-balance-sunny"></v-icon>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useTheme } from "vuetify";
+import { ref, watch } from "vue";
+import { useThemeStore } from "@/stores/theme-store";
+const theme = useTheme();
+const { storedTheme, setTheme } = useThemeStore();
+
+const switchValue = ref(storedTheme);
+
+watch(switchValue, (newValue) => {
+    theme.global.name.value = newValue;
+    setTheme(newValue);
+    console.log(localStorage.getItem("theme"));
+});
+</script>
+
+<style scoped>
+.container {
+    display: flex;
+    align-items: center;
+}
+.switcher {
+    margin-left: 5px;
+    margin-right: 10px;
+    display: flex;
+}
+</style>

frontend/src/i18n/locales/en.ts

@@ -7,6 +7,8 @@ export default {
             loading_page: "Loading...",
         },
     },
+    logo: "ghent-university-logo-white.png",
+    logout: "logout",
     login: {
         about: "The official submission application of Ghent University",
         login: "Login",

frontend/src/i18n/locales/nl.ts

@@ -7,6 +7,8 @@ export default {
             loading_page: "Aan het laden...",
         },
     },
+    logo: "universiteit-gent-logo-white.png",
+    logout: "uitloggen",
     login: {
         about: "De officiële indienapplicatie van de Universiteit Gent",
         login: "Inloggen",