From 87ece7ed69cbae5c667d4c0249f6fd846c2662f9 Mon Sep 17 00:00:00 2001
From: Gwendolyn Faraday <gwenfaraday@pm.me>
Date: Fri, 27 Sep 2024 09:10:14 -0400
Subject: [PATCH] Add theme toggle and update/fix styling

---
 curriculum-front/src/App.vue                  |  9 ++---
 curriculum-front/src/assets/main.css          | 35 -------------------
 curriculum-front/src/components/TopNav.vue    | 21 +++++++++--
 curriculum-front/src/main.js                  |  1 -
 .../src/views/auth/AuthTemplate.vue           | 16 +++++----
 .../src/views/auth/ForgotPassword.vue         | 10 +++---
 curriculum-front/src/views/auth/Login.vue     | 10 +++---
 curriculum-front/src/views/auth/Register.vue  | 10 +++---
 .../src/views/auth/ResetPassword.vue          | 20 ++++-------
 9 files changed, 53 insertions(+), 79 deletions(-)
 delete mode 100644 curriculum-front/src/assets/main.css

diff --git a/curriculum-front/src/App.vue b/curriculum-front/src/App.vue
index fd55883..cb340ed 100644
--- a/curriculum-front/src/App.vue
+++ b/curriculum-front/src/App.vue
@@ -1,9 +1,9 @@
 <template>
-  <v-app>
-    <TopNav :openDrawer="openDrawer" />
+  <v-app :theme="theme">
+    <TopNav :openDrawer="openDrawer" v-model:theme="theme" />
     <MobileDrawer />
 
-    <v-content mb-8>
+    <v-content>
       <RouterView />
     </v-content>
     <v-snackbar v-model="snackbarOptions.show" :multi-line="true" :right="true" :top="true" :timeout="6000"
@@ -20,7 +20,7 @@
 </template>
 
 <script setup>
-import { toRefs } from 'vue'
+import { ref, toRefs } from 'vue'
 import { RouterView } from 'vue-router'
 import { useGeneralStore } from '@/stores/general'
 
@@ -29,4 +29,5 @@ import MobileDrawer from '@/components/MobileDrawer.vue'
 
 const generalStore = useGeneralStore()
 const { snackbarOptions, isLoading } = toRefs(generalStore)
+const theme = ref('light')
 </script>
diff --git a/curriculum-front/src/assets/main.css b/curriculum-front/src/assets/main.css
deleted file mode 100644
index 360ad30..0000000
--- a/curriculum-front/src/assets/main.css
+++ /dev/null
@@ -1,35 +0,0 @@
-@import url('./base.css');
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  font-weight: normal;
-}
-
-a,
-.green {
-  text-decoration: none;
-  color: hsl(160deg 100% 37% / 100%);
-  transition: 0.4s;
-  padding: 3px;
-}
-
-@media (hover: hover) {
-  a:hover {
-    background-color: hsl(160deg 100% 37% / 20%);
-  }
-}
-
-@media (width >= 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
-}
diff --git a/curriculum-front/src/components/TopNav.vue b/curriculum-front/src/components/TopNav.vue
index 465cc7a..07918f7 100644
--- a/curriculum-front/src/components/TopNav.vue
+++ b/curriculum-front/src/components/TopNav.vue
@@ -11,6 +11,9 @@
 
     <v-spacer></v-spacer>
 
+    <v-btn :prepend-icon="theme === 'light' ? 'mdi-weather-sunny' : 'mdi-weather-night'" text="Toggle Theme" slim
+      @click="toggleTheme" variant="outlined" class="mr-4" />
+
     <v-toolbar-items v-if="mobile">
       <v-btn @click="openDrawer()">
         Menu
@@ -27,13 +30,13 @@
       <v-btn v-if="user.token" to="/curricula/create" text>
         Create
       </v-btn>
-      <v-btn v-if="!user.token" to="/login" color="secondary" class="black--text">
+      <v-btn v-if="!user.token" to="/login">
         Log In
       </v-btn>
 
       <v-menu v-else left bottom offset-y>
         <template v-slot:activator="{ on }">
-          <v-btn v-on="on" color="secondary" class="black--text">
+          <v-btn v-on="on" color="secondary">
             <v-icon left>mdi-account-outline</v-icon>
             {{ user.username }}
           </v-btn>
@@ -67,4 +70,18 @@ const logout = () => {
 
 const authStore = useAuthStore()
 const { user } = toRefs(authStore)
+
+const props = defineProps({
+  theme: {
+    type: String,
+    required: true,
+  }
+})
+
+const emit = defineEmits(['update:theme'])
+
+function toggleTheme() {
+  const newTheme = props.theme === 'light' ? 'dark' : 'light'
+  emit('update:theme', newTheme)
+}
 </script>
diff --git a/curriculum-front/src/main.js b/curriculum-front/src/main.js
index 734cf8e..366f63d 100644
--- a/curriculum-front/src/main.js
+++ b/curriculum-front/src/main.js
@@ -1,6 +1,5 @@
 import 'vuetify/styles'
 import '@mdi/font/css/materialdesignicons.css'
-import './assets/main.css'
 import './sass/index.sass'
 
 import { createApp } from 'vue'
diff --git a/curriculum-front/src/views/auth/AuthTemplate.vue b/curriculum-front/src/views/auth/AuthTemplate.vue
index ba77f55..be1c75e 100644
--- a/curriculum-front/src/views/auth/AuthTemplate.vue
+++ b/curriculum-front/src/views/auth/AuthTemplate.vue
@@ -2,19 +2,21 @@
   <v-row class="auth-wrapper mt-10">
     <v-col md="4" offset-md="4" sm="6" offset-sm="3" cols="12">
       <v-form class="create-form">
-        <v-card>
-          <v-card-subtitle>
+        <v-card variant="outlined">
+          <v-card-title class="mb-2">
             <h3 class="title">
               <slot name="title"></slot>
             </h3>
-          </v-card-subtitle>
-          <v-card-text>
+          </v-card-title>
+          <v-card-text class="pb-0">
             <slot name="form"></slot>
           </v-card-text>
-          <v-card-actions>
-            <slot name="actions"></slot>
+          <v-card-actions class="pl-1">
+            <v-col>
+              <slot name="actions"></slot>
+              <slot name="link"></slot>
+            </v-col>
           </v-card-actions>
-          <slot name="link"></slot>
         </v-card>
       </v-form>
     </v-col>
diff --git a/curriculum-front/src/views/auth/ForgotPassword.vue b/curriculum-front/src/views/auth/ForgotPassword.vue
index 06a9ac4..b5b7fb4 100644
--- a/curriculum-front/src/views/auth/ForgotPassword.vue
+++ b/curriculum-front/src/views/auth/ForgotPassword.vue
@@ -4,16 +4,14 @@
       Forgot Password
     </template>
     <template #form>
-      <v-text-field
-        label="Email"
-        v-model="email"
-      />
+      <v-text-field label="Email" v-model="email" variant="outlined" />
     </template>
     <template #actions>
-      <v-btn @click="submit" color="primary">Submit</v-btn>
+      <v-btn @click="submit" color="primary" variant="outlined">Submit</v-btn>
     </template>
     <template #link>
-      <p class="pa-2">Don't have an account? <router-link :to="{name: 'register'}">Register here</router-link></p>
+      <p class="mb-1 mt-4">Don't have an account? <router-link :to="{ name: 'register' }">Register here</router-link>
+      </p>
     </template>
   </AuthTemplate>
 </template>
diff --git a/curriculum-front/src/views/auth/Login.vue b/curriculum-front/src/views/auth/Login.vue
index 82fb721..e111aa8 100644
--- a/curriculum-front/src/views/auth/Login.vue
+++ b/curriculum-front/src/views/auth/Login.vue
@@ -4,16 +4,16 @@
       Login
     </template>
     <template #form>
-      <v-text-field label="Email" v-model="email" :error-messages="emailErrors" required />
-      <v-text-field label="Password" v-model="password" :error-messages="passwordErrors" required />
+      <v-text-field label="Email" v-model="email" :error-messages="emailErrors" required variant="outlined" />
+      <v-text-field label="Password" v-model="password" :error-messages="passwordErrors" required variant="outlined" />
     </template>
     <template #actions>
-      <v-btn @click="submit" color="primary">Submit</v-btn>
+      <v-btn @click="submit" color="primary" variant="outlined">Submit</v-btn>
     </template>
     <template #link>
-      <p class="pa-2 mb-n1">Forgot Password? <router-link :to="{ name: 'forgot-password' }">Update password
+      <p class="mb-1 mt-4">Forgot Password? <router-link :to="{ name: 'forgot-password' }">Update password
           here</router-link></p>
-      <p class="pa-2">Don't have an account? <router-link :to="{ name: 'register' }">Register here</router-link></p>
+      <p>Don't have an account? <router-link :to="{ name: 'register' }">Register here</router-link></p>
     </template>
   </AuthTemplate>
 </template>
diff --git a/curriculum-front/src/views/auth/Register.vue b/curriculum-front/src/views/auth/Register.vue
index 81f69fb..97de211 100644
--- a/curriculum-front/src/views/auth/Register.vue
+++ b/curriculum-front/src/views/auth/Register.vue
@@ -4,15 +4,15 @@
       Register
     </template>
     <template #form>
-      <v-text-field label="Username" v-model="username" required />
-      <v-text-field label="Email" v-model="email" required />
-      <v-text-field label="Password" v-model="password" required />
+      <v-text-field label="Username" v-model="username" required variant="outlined" />
+      <v-text-field label="Email" v-model="email" required variant="outlined" />
+      <v-text-field label="Password" v-model="password" required variant="outlined" />
     </template>
     <template #actions>
-      <v-btn @click="submit" color="primary">Submit</v-btn>
+      <v-btn @click="submit" color="primary" variant="outlined">Submit</v-btn>
     </template>
     <template #link>
-      <p class="pa-2">Already have an account? <router-link :to="{ name: 'login' }">Login here</router-link></p>
+      <p class="mb-1 mt-4">Already have an account? <router-link :to="{ name: 'login' }">Login here</router-link></p>
     </template>
   </AuthTemplate>
 </template>
diff --git a/curriculum-front/src/views/auth/ResetPassword.vue b/curriculum-front/src/views/auth/ResetPassword.vue
index dc82c48..70da1e5 100644
--- a/curriculum-front/src/views/auth/ResetPassword.vue
+++ b/curriculum-front/src/views/auth/ResetPassword.vue
@@ -4,24 +4,16 @@
       Reset Password
     </template>
     <template #form>
-      <v-text-field
-        label="Code"
-        v-model="code"
-      />
-      <v-text-field
-        label="New Password"
-        v-model="password"
-      />
-      <v-text-field
-        label="Confirm Password"
-        v-model="confirmPassword"
-      />
+      <v-text-field label="Code" variant="outlined" v-model="code" />
+      <v-text-field label="New Password" variant="outlined" v-model="password" />
+      <v-text-field label="Confirm Password" variant="outlined" v-model="confirmPassword" />
     </template>
     <template #actions>
-      <v-btn @click="submit" color="primary">Submit</v-btn>
+      <v-btn @click="submit" color="primary" variant="outlined">Submit</v-btn>
     </template>
     <template #link>
-      <p class="pa-2">Don't have an account? <router-link :to="{name: 'register'}">Register here</router-link></p>
+      <p class="mb-1 mt-4">Don't have an account? <router-link :to="{ name: 'register' }">Register here</router-link>
+      </p>
     </template>
   </AuthTemplate>
 </template>