Add theme toggle and update/fix styling (#166)

Author: gwenf

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>

curriculum-front/src/assets/main.css

@@ -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>

curriculum-front/src/components/TopNav.vue

@@ -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'

curriculum-front/src/main.js

@@ -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>

curriculum-front/src/views/auth/AuthTemplate.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>

curriculum-front/src/views/auth/ForgotPassword.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>

curriculum-front/src/views/auth/Login.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>

curriculum-front/src/views/auth/Register.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>