From a79200383ac575f9cc8ca861256645f3ecc3c73a Mon Sep 17 00:00:00 2001
From: Rakantor <rakantor.dev@gmail.com>
Date: Sun, 30 Oct 2022 11:28:50 +0100
Subject: [PATCH] Update layout

---
 components/FooterApp.vue        |  2 +-
 components/NavigationDrawer.vue |  2 +-
 layouts/default.vue             |  9 +++++++--
 layouts/empty.vue               |  9 +++++++--
 layouts/error.vue               |  8 +++++++-
 layouts/unverified.vue          |  5 ++++-
 nuxt.config.js                  |  1 +
 pages/dashboard.vue             | 29 +++++++++++++++++++++++------
 8 files changed, 51 insertions(+), 14 deletions(-)

diff --git a/components/FooterApp.vue b/components/FooterApp.vue
index 299cea1..90e8c20 100644
--- a/components/FooterApp.vue
+++ b/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>
diff --git a/components/NavigationDrawer.vue b/components/NavigationDrawer.vue
index c20d1cb..fef1a91 100644
--- a/components/NavigationDrawer.vue
+++ b/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>
diff --git a/layouts/default.vue b/layouts/default.vue
index 4d15416..d651a80 100644
--- a/layouts/default.vue
+++ b/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
     }
diff --git a/layouts/empty.vue b/layouts/empty.vue
index 8878477..0f700c4 100644
--- a/layouts/empty.vue
+++ b/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>
\ No newline at end of file
diff --git a/layouts/error.vue b/layouts/error.vue
index ab865f7..31330b4 100644
--- a/layouts/error.vue
+++ b/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>
 
diff --git a/layouts/unverified.vue b/layouts/unverified.vue
index 23d0f87..de30ae7 100644
--- a/layouts/unverified.vue
+++ b/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
     }
diff --git a/nuxt.config.js b/nuxt.config.js
index e642c85..17fe448 100644
--- a/nuxt.config.js
+++ b/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
diff --git a/pages/dashboard.vue b/pages/dashboard.vue
index 8d7dd3a..76b517e 100644
--- a/pages/dashboard.vue
+++ b/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-card :width="vCardSize" :height="vCardSize" align="center" justify="center" @click="openCourse(id)">
-          {{ id.toUpperCase() }} - {{ course.name }}
+      <v-col v-for="(course, id) in courses" :key="id" cols="12" lg="6">
+        <v-card flat width="100%" class="rounded-lg" @click="openCourse(id)">
+          <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: {