Update layout

components/FooterApp.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-footer app>
+  <v-footer app dark>
     <v-row justify="center" no-gutters>
       <v-col cols="12" class="text-center">
         <span class="text-caption">&copy; {{ new Date().getFullYear() }}</span>

components/NavigationDrawer.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-navigation-drawer v-if="$store.state.user" app clipped :mini-variant="miniVariant">
+  <v-navigation-drawer v-if="$store.state.user" app dark clipped :mini-variant="miniVariant">
     <v-list>
       <v-list-item link class="px-2" @click="gotoProfilePage">
         <v-list-item-avatar>

layouts/default.vue

@@ -1,13 +1,15 @@
 <template>
-  <v-app dark>
+  <v-app :style="{ background: $vuetify.theme.themes[theme].background }">
     <NavigationDrawer ref="navDrawer" />
-    <v-app-bar app clipped-left>
+    <v-app-bar app dark clipped-left>
       <v-app-bar-nav-icon @click="toggleNavDrawer" />
       <v-toolbar-title v-text="title" />
       <v-spacer />
+      <!-- TODO: Enable theme switching some time maybe
       <v-btn icon @click="$vuetify.theme.dark = !$vuetify.theme.dark">
         <v-icon>mdi-theme-light-dark</v-icon>
       </v-btn>
+      -->
       <v-btn v-if="loggedIn" icon @click="logout">
         <v-icon>mdi-logout-variant</v-icon>
       </v-btn>
@@ -32,6 +34,9 @@ export default {
     }
   },
   computed: {
+    theme () {
+      return (this.$vuetify.theme.dark) ? 'dark' : 'light'
+    },
     loggedIn () {
       return this.$store.state.user
     }

layouts/empty.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-app>
+  <v-app :style="{ background: $vuetify.theme.themes[theme].background }">
     <v-main>
       <Nuxt />
     </v-main>
@@ -11,6 +11,11 @@
 <script>
 export default {
   name: 'EmptyLayout',
-  layout: 'empty'
+  layout: 'empty',
+  computed: {
+    theme () {
+      return (this.$vuetify.theme.dark) ? 'dark' : 'light'
+    }
+  }
 }
 </script>

layouts/error.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-app dark>
+  <v-app :style="{ background: $vuetify.theme.themes[theme].background }">
     <h1 v-if="error.statusCode === 404">
       {{ pageNotFound }}
     </h1>
@@ -27,6 +27,7 @@ export default {
       otherError: 'An error occurred',
     }
   },
+  
   head() {
     const title =
       this.error.statusCode === 404 ? this.pageNotFound : this.otherError
@@ -34,6 +35,11 @@ export default {
       title,
     }
   },
+  computed: {
+    theme () {
+      return (this.$vuetify.theme.dark) ? 'dark' : 'light'
+    }
+  }
 }
 </script>
 

layouts/unverified.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-app>
+  <v-app :style="{ background: $vuetify.theme.themes[theme].background }">
     <v-main>
       <v-container fill-height>
         <v-card max-width="500px" class="mx-auto">
@@ -35,6 +35,9 @@ export default {
     }
   },
   computed: {
+    theme () {
+      return (this.$vuetify.theme.dark) ? 'dark' : 'light'
+    },
     userEmail () {
       return this.$auth.currentUser.email
     }

nuxt.config.js

@@ -80,6 +80,7 @@ export default {
           info: colors.blue.base,
           success: colors.green.base,
           warning: colors.orange.darken1,
+          background: '#f1f2f6' // same as MyCampus
         },
         dark: {
           // Vuetify default dark theme colors

pages/dashboard.vue

@@ -1,9 +1,22 @@
 <template>
-  <v-container>
+  <v-container fluid>
     <v-row>
-      <v-col v-for="course, id in courses" :key="id">
+      <v-col v-for="(course, id) in courses" :key="id" cols="12" lg="6">
-        <v-card :width="vCardSize" :height="vCardSize" align="center" justify="center" @click="openCourse(id)">
+        <v-card flat width="100%" class="rounded-lg" @click="openCourse(id)">
-          {{ id.toUpperCase() }} - {{ course.name }}
+          <v-row no-gutters class="flex-nowrap">
+            <v-col cols="auto">
+              <v-img
+                src="https://www.onlinecollegeplan.com/wp-content/uploads/2018/05/computer-programming.jpg"
+                :width="imgSize"
+                :height="imgSize"
+                class="rounded-l-lg"
+              ></v-img>
+            </v-col>
+            <v-col cols="auto">
+              <v-card-title class="text--secondary text-subtitle-1">{{ id.toUpperCase() }}</v-card-title>
+              <v-card-subtitle class="text--primary text-h6 text-wrap">{{ course.name }}</v-card-subtitle>
+            </v-col>
+          </v-row>
         </v-card>
       </v-col>
     </v-row>
@@ -13,16 +26,20 @@
 <script>
 import _cloneDeep from 'lodash-es/cloneDeep'
 import { collection, getDocs } from 'firebase/firestore'
+import { demoAccounts } from '~/components/DemoInfoDialog.vue'
 
 export default {
   name: 'DashboardPage',
   layout ({ $auth }) {
     // Ref: https://firebase.google.com/docs/reference/js/v8/firebase.auth.Auth#currentuser
-    return $auth.currentUser.emailVerified ? 'default' : 'unverified'
+    // return $auth.currentUser.emailVerified ? 'default' : 'unverified'
+
+    // TODO: For demo purposes only. Delete in production.
+    return $auth.currentUser.emailVerified || demoAccounts.includes($auth.currentUser.email) ? 'default' : 'unverified'
   },
   data () {
     return {
-      vCardSize: 150
+      imgSize: 125
     }
   },
   computed: {