theme + homescreen + login

SELab-2 · Apr 27, 2024 · 1b64dbe · 1b64dbe
1 parent 16e3050
commit 1b64dbe
Show file tree

Hide file tree

Showing 11 changed files with 45 additions and 24 deletions.
diff --git a/frontend/src/assets/base.scss b/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%));

diff --git a/frontend/src/components/ApolloHeader.vue b/frontend/src/components/ApolloHeader.vue
@@ -41,6 +41,11 @@ const { isLoggedIn } = storeToRefs(useAuthStore());
 .v-app-bar {
     padding: 5px 0px;
 }
+
+.v-app-bar-nav-icon{
+    color: rgb(var(--v-theme-secondary));
+}
+
 .leftContent {
     margin-left: auto;
     display: flex;
@@ -49,5 +54,6 @@ const { isLoggedIn } = storeToRefs(useAuthStore());
 
 .logout {
     margin-right: 15px;
+    color: rgb(var(--v-theme-secondary));
 }
 </style>
diff --git a/frontend/src/components/LocaleSwitcher.vue b/frontend/src/components/LocaleSwitcher.vue
@@ -29,7 +29,7 @@ function handleLocaleChange(selectedLocale: string) {
 
 <style lang="scss" scoped>
 .switcher {
-    color: var(--color-text-on-primary);
+    color: rgb(var(--v-theme-secondary));
     display: flex;
     align-items: center;
 }
@@ -39,7 +39,7 @@ function handleLocaleChange(selectedLocale: string) {
 }
 
 .selected-option {
-    color: var(--color-text-on-primary);
+    color: rgb(var(--v-theme-secondary));
     font-style: bold;
 }
 </style>
diff --git a/frontend/src/components/home/cards/HomeScreenCard.vue b/frontend/src/components/home/cards/HomeScreenCard.vue
@@ -12,8 +12,9 @@ defineProps<{
 
 <style scoped>
 .card {
-    background-color: white;
-    color: black;
-    border-radius: 5px;
+    background-color: rgb(var(--v-theme-secondary));
+    color: rgb(var(--v-theme-text));
+    border-radius: 2px;
+    text-transform: capitalize;
 }
 </style>
diff --git a/frontend/src/components/home/listcontent/DeadlineItem.vue b/frontend/src/components/home/listcontent/DeadlineItem.vue
@@ -51,17 +51,17 @@ const navigateToProject = () => {
 <style scoped>
 .projectbtn {
     margin: 5px;
-    background-color: #F0F0F0;
+    background-color: #ffffff;
     display: flex;
     transition: background-color 0.3s;
     align-items: center;
     cursor: pointer;
-    border-radius: 5px;
     height: 65px;
+    border-radius: 2px;
 }
 
 .projectbtn:hover {
-    background-color: lightgray;
+    background-color: #E9EDFA;
 }
 
 .block{

diff --git a/frontend/src/components/home/listcontent/SubjectItem.vue b/frontend/src/components/home/listcontent/SubjectItem.vue
@@ -41,12 +41,12 @@ const navigateToCourse = () => {
     align-items: center;
     transition: background-color 0.3s;
     cursor: pointer;
-    background-color: #F0F0F0;
-    border-radius: 5px;
+    background-color: #ffffff;
+    border-radius: 2px;
 }
 
 .coursebtn:hover {
-    background-color: lightgray;
+    background-color: #E9EDFA;
 }
 
 .chevron {

diff --git a/frontend/src/components/navigation/NavBar.vue b/frontend/src/components/navigation/NavBar.vue
@@ -42,7 +42,7 @@ defineExpose({
 
 <style scoped lang="scss">
 .v-navigation-drawer {
-    background: linear-gradient(var(--color-primary), #0e2057);
+    background: rgb(var(--v-theme-primary));
     padding: 10px;
 }
 

diff --git a/frontend/src/components/navigation/NavButton.vue b/frontend/src/components/navigation/NavButton.vue
@@ -22,6 +22,10 @@ defineProps<{
     justify-content: space-between;
     align-items: center;
     width: 100%;
+    color: rgb(var(--v-theme-secondary));
+    text-transform: capitalize;
+
+
 }
 
 .v-icon {

diff --git a/frontend/src/plugins/vuetify.ts b/frontend/src/plugins/vuetify.ts
@@ -25,10 +25,11 @@ const vuetify = createVuetify({
             lightTheme: {
                 dark: false,
                 colors: {
-                    background: "#ECEFF8",
+                    background: "#ffffff",
                     surface: "#ffffff",
-                    text: "#000000",
+                    text: "#0E2057",
                     primary: "#1d357e",
+                    secondary: "#DFE5F7"
                     // TODO: Add rest of colors
                 },
             },
@@ -38,7 +39,8 @@ const vuetify = createVuetify({
                     background: "#222222",
                     surface: "#222222",
                     text: "#ffffff",
-                    primary: "#1d357e"
+                    primary: "#1d357e",
+                    secondary: "#DFE5F7",
                     // TODO: Add rest of colors
                 },
             },

diff --git a/frontend/src/views/HomeScreenView.vue b/frontend/src/views/HomeScreenView.vue
@@ -1,7 +1,7 @@
 <template>
-    <h1 v-if="isLoading">Loading...</h1>
-    <h1 v-else class="title">{{ $t("home.welcome", { name: user!.given_name }) }}</h1>
     <v-container v-if="smAndDown">
+        <h1 v-if="isLoading">Loading...</h1>
+        <h1 v-else class="title">{{ $t("home.welcome", { name: user!.given_name }) }}</h1>
         <div class="mobileCard">
             <DeadlinesCard />
         </div>
@@ -13,6 +13,8 @@
         </div>
     </v-container>
     <v-container v-else>
+        <h1 v-if="isLoading">Loading...</h1>
+        <h1 v-else class="title">{{ $t("home.welcome", { name: user!.given_name }) }}</h1>
         <v-row>
             <v-col>
                 <DeadlinesCard />
@@ -41,7 +43,12 @@ const { smAndDown } = useDisplay();
 
 <style scoped lang="scss">
 .title {
-    margin: 30px;
+    background-color: rgb(var(--v-theme-secondary));
+    color: rgb(var(--v-theme-text));
+    margin-bottom: 15px;
+    margin-top: 15px;
+    padding: 10px;
+    border-radius: 2px;
 }
 
 .mobileCard {

diff --git a/frontend/src/views/LoginView.vue b/frontend/src/views/LoginView.vue
@@ -38,7 +38,7 @@ import LocaleSwitcher from "@/components/LocaleSwitcher.vue";
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    background-color: var(--color-primary);
+    background: linear-gradient(rgb(var(--v-theme-primary)), #0E2057);
     height: 100%;
 }
 
@@ -60,20 +60,21 @@ import LocaleSwitcher from "@/components/LocaleSwitcher.vue";
 }
 
 .login-button {
-    background-color: var(--gray-4);
+    background-color: rgba(225,225,225,0.1);
     color: var(--white);
-    border: 2px solid var(--color-border);
+    text-decoration: none;
+    border: 1px solid var(--color-border);
     padding: 10px 20px;
     font-size: 16px;
-    border-radius: 50px;
+    border-radius: 15px;
     cursor: pointer;
     transition:
         background-color 0.3s,
         color 0.3s;
 }
 
 .login-button:hover {
-    background-color: var(--gray-3);
+    background-color: rgba(225,225,225,0.2);
     color: var(--white);
 }