From 0632b201dc20f9b709e4afee9e8425f941ad259c Mon Sep 17 00:00:00 2001
From: --headM <amanitoussaintgreen@gmail.com>
Date: Sun, 27 Oct 2019 02:49:18 -0400
Subject: [PATCH 1/3] Created dark theme

- Added dark color scheme togglable through button in MainPage.vue
- Theme colors available in app.js
- Primary color in dark theme is "discord orange"
- Changed cookie banner color to "discord purple"
- Semester status colors when adding classes are now more intense
- Dark theme uses Halloween colors :)
- Dark state is managed in the Vuex store
- Theme colors are accessible via this.$vuetify.theme...
- Color variants are toggled in the setter for "useDark" in MainPage
---
 src/App.vue                     |  1 +
 src/app.js                      | 23 +++++++++++++++++++-
 src/assets/css/coursecolors.css |  2 +-
 src/components/ClassSearch.vue  |  2 +-
 src/components/RoadTabs.vue     |  6 +++---
 src/components/Semester.vue     | 37 ++++++++++++++++++---------------
 src/pages/MainPage.vue          | 27 ++++++++++++++++++++----
 src/stores/courseData.js        |  4 ++++
 8 files changed, 75 insertions(+), 27 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 6d68691d..68cbe14b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,6 +2,7 @@
   <v-app
     id="app-wrapper"
   >
+    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
     <router-view />
   </v-app>
 </template>
diff --git a/src/app.js b/src/app.js
index 608e7490..f90b7dd9 100644
--- a/src/app.js
+++ b/src/app.js
@@ -6,6 +6,7 @@ import About from './pages/About.vue';
 import Vuetify from 'vuetify';
 import VueRouter from 'vue-router';
 import VueCookies from 'vue-cookies';
+import colors from 'vuetify/es5/util/colors';
 import './css/app.css';
 
 import { library } from '@fortawesome/fontawesome-svg-core';
@@ -18,7 +19,27 @@ library.add(faSignInAlt, faSignOutAlt, faCloudDownloadAlt, faCloudUploadAlt);
 
 Vue.component('font-awesome-icon', FontAwesomeIcon);
 
-Vue.use(Vuetify);
+Vue.use(Vuetify, {
+  theme: {
+    primary: "#F26521",
+    defaultPrimary: "#1976D2",
+    discordOrange: "#F26521",
+    discordPurple: "#7289DA",
+    crlogo: colors.blueGrey.darken2,
+    crlogoDark: colors.blueGrey.darken2,
+    crlogoLight: colors.blueGrey.lighten5,
+    background: colors.grey.darken4,
+    background2: colors.grey.darken4,
+    search: colors.grey.darken4,
+    backgroundDark: colors.grey.darken4,
+    backgroundLight: colors.grey.lighten2,
+    background2Light: colors.grey.lighten4,
+    searchLight: colors.shades.white,
+    warning: colors.yellow.base,
+    success: colors.green.base,
+    error: colors.red.base
+  }
+});
 Vue.use(VueCookies);
 Vue.use(VueRouter);
 
diff --git a/src/assets/css/coursecolors.css b/src/assets/css/coursecolors.css
index 8c03b469..9c9c4470 100644
--- a/src/assets/css/coursecolors.css
+++ b/src/assets/css/coursecolors.css
@@ -52,4 +52,4 @@ https://github.com/venkatesh-sivaraman/fireroad-server/blob/develop/requirements
 .generic-HASS-H { background-color: #3946BF; }
 .generic-HASS-S { background-color: #7C39BF; }
 .generic-CI-H { background-color: #BF39B1; }
-.generic-CI-HW { background-color: #BF3961; }
+.generic-CI-HW { background-color: #BF3961; }
\ No newline at end of file
diff --git a/src/components/ClassSearch.vue b/src/components/ClassSearch.vue
index 66658bf4..7958c96b 100644
--- a/src/components/ClassSearch.vue
+++ b/src/components/ClassSearch.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-container :style="searchHeight + 'display: flex; flex-direction:column;'">
+<v-container :style="searchHeight + 'display: flex; flex-direction:column;'" class="search">
     <div>
       <filter-set v-model="chosenFilters.girInput" :label="'GIR'" :filters="allFilters.girInput" />
       <filter-set v-model="chosenFilters.hassInput" :label="'HASS'" :filters="allFilters.hassInput" />
diff --git a/src/components/RoadTabs.vue b/src/components/RoadTabs.vue
index ae7fe10f..03e36e1b 100644
--- a/src/components/RoadTabs.vue
+++ b/src/components/RoadTabs.vue
@@ -4,7 +4,7 @@
       v-model="tabRoad"
       show-arrows
     >
-      <v-tabs-slider />
+      <v-tabs-slider color="primary"/>
       <v-tab
         v-for="roadId in Object.keys(roads)"
         :key="roadId"
@@ -17,7 +17,7 @@
         </v-btn>
       </v-tab>
       <v-dialog v-model="editDialog" max-width="600" @input="newRoadName = ''">
-        <v-card>
+        <v-card :dark="$store.state.useDarkTheme">
           <v-btn icon flat style="float:right" @click="editDialog = false">
             <v-icon>close</v-icon>
           </v-btn>
@@ -76,7 +76,7 @@
             />
             <v-layout row>
               <v-flex xs6>
-                <v-switch v-model="duplicateRoad" label="Duplicate existing" />
+                <v-switch v-model="duplicateRoad" color="primary" label="Duplicate existing" />
               </v-flex>
               <v-flex>
                 <v-select v-model="duplicateRoadSource" :disabled="!duplicateRoad" :items="Object.keys(roads)">
diff --git a/src/components/Semester.vue b/src/components/Semester.vue
index c8c657a1..8c720270 100644
--- a/src/components/Semester.vue
+++ b/src/components/Semester.vue
@@ -35,7 +35,7 @@
           </v-flex>
         </v-layout>
         <v-layout v-else>
-          <v-flex xs10 :style="{ 'color': semData.textColor }">
+          <v-flex xs10 :class="semData.textColor+'--text '+textBrightness">
             {{ semData.message }}
           </v-flex>
         </v-layout>
@@ -43,7 +43,6 @@
     </v-container>
 
     <v-container
-      class="lighten-3"
       fluid
       grid-list-md
       :class="semData.bgColor"
@@ -93,6 +92,10 @@ export default {
     };
   },
   computed: {
+    textBrightness (){
+      var value = 'text--'+(this.$store.state.useDarkTheme ? 'lighten-2' : 'darken-4') ;
+      return value;
+    },
     isActiveRoad () {
       return this.$store.state.activeRoad === this.roadID;
     },
@@ -176,50 +179,50 @@ export default {
       if (this.addingFromCard || this.draggingOver) {
         if (!this.subjectsLoaded) {
           return {
-            bgColor: 'red',
+            bgColor: "error",
             message: 'Loading subjects... give us a minute',
-            textColor: 'DarkRed'
+            textColor: "error"
           };
         } else if (this.itemAdding === undefined) {
           return {
-            bgColor: 'red',
+            bgColor: "error",
             message: 'If you see this message, contact courseroad@mit.edu and tell them "710".',
-            textColor: 'DarkRed'
+            textColor: "error"
           };
         } else if (this.index === 0 || this.offeredNow) {
           return {
-            bgColor: 'green',
+            bgColor: "success",
             message: 'Add class here',
-            textColor: 'DarkGreen'
+            textColor: "success"
           };
         } else if (this.itemAddingNoLongerOffered) {
           return {
-            bgColor: 'yellow',
+            bgColor: "warning",
             message: 'Subject no longer offered',
-            textColor: 'DarkGoldenRod'
+            textColor: "warning"
           };
         } else if (this.itemAddingNotCurrentlyOffered) {
           return {
-            bgColor: 'yellow',
+            bgColor: "warning",
             message: 'Subject not offered this year',
-            textColor: 'DarkGoldenRod'
+            textColor: "warning"
           };
         } else if (this.isSameYear) {
           return {
-            bgColor: 'red',
+            bgColor: "error",
             message: 'Subject not available this semester',
-            textColor: 'DarkRed'
+            textColor: "error"
           };
         } else {
           return {
-            bgColor: 'yellow',
+            bgColor: "warning",
             message: 'Subject may not be available this semester',
-            textColor: 'DarkGoldenRod'
+            textColor: "warning"
           };
         }
       }
       return {
-        bgColor: 'grey',
+        bgColor: 'background',
         message: '',
         textColor: ''
       };
diff --git a/src/pages/MainPage.vue b/src/pages/MainPage.vue
index 529883c0..2ba3ac5f 100644
--- a/src/pages/MainPage.vue
+++ b/src/pages/MainPage.vue
@@ -2,6 +2,7 @@
 <template>
   <v-app
     id="app-wrapper"
+    :dark="useDark"
   >
     <v-dialog v-model="showMobile" fullscreen>
       <v-card height="100%">
@@ -30,7 +31,7 @@
         </v-container>
       </v-card>
     </v-dialog>
-    <v-toolbar fixed app dense class="elevation-2">
+    <v-toolbar fixed app dense class="elevation-2 background2">
       <road-tabs
         slot="extension"
         @delete-road="$refs.authcomponent.deleteRoad($event)"
@@ -76,7 +77,7 @@
       <v-container fill-height style="padding: 0;">
         <v-layout fill-height column>
           <v-layout shrink style="padding: 14px; padding-bottom: 0;" row align-center>
-            <v-flex shrink class="blue-grey lighten-5" style="user-select: none; color: inherit; text-decoration: none; border-radius: 2px; padding: 6px 8px; display: inline-block;">
+            <v-flex shrink class="crlogo" style="user-select: none; color: inherit; text-decoration: none; border-radius: 2px; padding: 6px 8px; display: inline-block;">
               <v-icon size="1.3em" color="#00b300">
                 check_box
               </v-icon>
@@ -84,6 +85,11 @@
                 C o u r s e R o a d
               </h3>
             </v-flex>
+            <v-flex>
+              <v-btn class="mx-2 elevation-2" dark fab small color="primary" @click="useDark = !useDark">
+                <v-icon>mdi-{{useDark ? 'white-balance-sunny' : 'weather-night'}}</v-icon>
+              </v-btn>
+            </v-flex>
             <v-flex>
               <router-link to="/about" style="float: right;">
                 About
@@ -165,7 +171,7 @@
 
     <v-footer v-if="!dismissedOld || !dismissedCookies" fixed style="height: unset;">
       <v-layout column>
-        <v-flex v-if="!dismissedOld" class="lime accent-1 py-1 px-2">
+        <v-flex v-if="!dismissedOld" class="discord-purple py-1 px-2">
           <v-layout row align-center>
             <v-flex>
               Looking for the old courseroad?  Visit the old website <a target="_blank" href="https://courseroad.mit.edu/old">here</a> and export your roads!
@@ -178,7 +184,7 @@
           </v-layout>
         </v-flex>
         <v-divider v-if="!dismissedOld && !dismissedCookies" />
-        <v-flex v-if="!dismissedCookies" class="lime accent-3 py-1 px-2">
+        <v-flex v-if="!dismissedCookies" class="discordPurple py-1 px-2">
           <v-layout row align-center>
             <v-flex>
               This website uses cookies and session storage to store your data and login token, and important features like saving roads will not work without them.
@@ -254,6 +260,19 @@ export default {
     };
   },
   computed: {
+    useDark: {
+      get() {
+        return this.$store.state.useDarkTheme;
+      },
+      set (value) {
+        this.$store.commit('setUseDarkTheme', value)
+        this.$vuetify.theme.primary = value ? this.$vuetify.theme.discordOrange : this.$vuetify.theme.defaultPrimary;
+        this.$vuetify.theme.background = value ? this.$vuetify.theme.backgroundDark : this.$vuetify.theme.backgroundLight;
+        this.$vuetify.theme.background2 = value ? this.$vuetify.theme.backgroundDark : this.$vuetify.theme.background2Light;
+        this.$vuetify.theme.search = value ? this.$vuetify.theme.backgroundDark : this.$vuetify.theme.searchLight;
+        this.$vuetify.theme.crlogo = value ? this.$vuetify.theme.crlogoDark : this.$vuetify.theme.crlogoLight;
+      }
+    },
     activeRoad: {
       get () {
         return this.$store.state.activeRoad;
diff --git a/src/stores/courseData.js b/src/stores/courseData.js
index 71a8cae0..ac96eb30 100644
--- a/src/stores/courseData.js
+++ b/src/stores/courseData.js
@@ -10,6 +10,7 @@ const DATE_FORMAT = 'YYYY-MM-DDTHH:mm:ss.SSS000Z';
 const store = new Vuex.Store({
   strict: process.env.NODE_ENV !== 'production',
   state: {
+    useDarkTheme: true,
     currentSemester: 1,
     activeRoad: '$defaultroad$',
     addingFromCard: false,
@@ -48,6 +49,9 @@ const store = new Vuex.Store({
     }
   },
   mutations: {
+    setUseDarkTheme(state, newValue){
+      state.useDarkTheme = newValue;
+    },
     addClass (state, newClass) {
       state.roads[state.activeRoad].contents.selectedSubjects[newClass.semester].push(newClass);
       Vue.set(state.roads[state.activeRoad], 'changed', moment().format(DATE_FORMAT));

From 3bf1c084b50b380788ff76e3019df679bd9ef502 Mon Sep 17 00:00:00 2001
From: Nate Foss <npfoss@gmail.com>
Date: Thu, 31 Oct 2019 12:11:57 -0400
Subject: [PATCH 2/3] lint

---
 src/app.js                      |  8 ++++----
 src/assets/css/coursecolors.css |  3 ++-
 src/components/ClassSearch.vue  |  2 +-
 src/components/RoadTabs.vue     |  2 +-
 src/components/Semester.vue     | 32 ++++++++++++++++----------------
 src/pages/MainPage.vue          | 15 +++++++++++----
 src/stores/courseData.js        |  2 +-
 7 files changed, 36 insertions(+), 28 deletions(-)

diff --git a/src/app.js b/src/app.js
index f90b7dd9..f4551704 100644
--- a/src/app.js
+++ b/src/app.js
@@ -21,10 +21,10 @@ Vue.component('font-awesome-icon', FontAwesomeIcon);
 
 Vue.use(Vuetify, {
   theme: {
-    primary: "#F26521",
-    defaultPrimary: "#1976D2",
-    discordOrange: "#F26521",
-    discordPurple: "#7289DA",
+    primary: '#F26521',
+    defaultPrimary: '#1976D2',
+    discordOrange: '#F26521',
+    discordPurple: '#7289DA',
     crlogo: colors.blueGrey.darken2,
     crlogoDark: colors.blueGrey.darken2,
     crlogoLight: colors.blueGrey.lighten5,
diff --git a/src/assets/css/coursecolors.css b/src/assets/css/coursecolors.css
index 9c9c4470..123fc283 100644
--- a/src/assets/css/coursecolors.css
+++ b/src/assets/css/coursecolors.css
@@ -52,4 +52,5 @@ https://github.com/venkatesh-sivaraman/fireroad-server/blob/develop/requirements
 .generic-HASS-H { background-color: #3946BF; }
 .generic-HASS-S { background-color: #7C39BF; }
 .generic-CI-H { background-color: #BF39B1; }
-.generic-CI-HW { background-color: #BF3961; }
\ No newline at end of file
+.generic-CI-HW { background-color: #BF3961; }
+
diff --git a/src/components/ClassSearch.vue b/src/components/ClassSearch.vue
index 7958c96b..f7e5cbc0 100644
--- a/src/components/ClassSearch.vue
+++ b/src/components/ClassSearch.vue
@@ -1,5 +1,5 @@
 <template>
-<v-container :style="searchHeight + 'display: flex; flex-direction:column;'" class="search">
+  <v-container :style="searchHeight + 'display: flex; flex-direction:column;'" class="search">
     <div>
       <filter-set v-model="chosenFilters.girInput" :label="'GIR'" :filters="allFilters.girInput" />
       <filter-set v-model="chosenFilters.hassInput" :label="'HASS'" :filters="allFilters.hassInput" />
diff --git a/src/components/RoadTabs.vue b/src/components/RoadTabs.vue
index 03e36e1b..116366ae 100644
--- a/src/components/RoadTabs.vue
+++ b/src/components/RoadTabs.vue
@@ -4,7 +4,7 @@
       v-model="tabRoad"
       show-arrows
     >
-      <v-tabs-slider color="primary"/>
+      <v-tabs-slider color="primary" />
       <v-tab
         v-for="roadId in Object.keys(roads)"
         :key="roadId"
diff --git a/src/components/Semester.vue b/src/components/Semester.vue
index 8c720270..fadb67cd 100644
--- a/src/components/Semester.vue
+++ b/src/components/Semester.vue
@@ -92,8 +92,8 @@ export default {
     };
   },
   computed: {
-    textBrightness (){
-      var value = 'text--'+(this.$store.state.useDarkTheme ? 'lighten-2' : 'darken-4') ;
+    textBrightness () {
+      var value = 'text--' + (this.$store.state.useDarkTheme ? 'lighten-2' : 'darken-4');
       return value;
     },
     isActiveRoad () {
@@ -179,45 +179,45 @@ export default {
       if (this.addingFromCard || this.draggingOver) {
         if (!this.subjectsLoaded) {
           return {
-            bgColor: "error",
+            bgColor: 'error',
             message: 'Loading subjects... give us a minute',
-            textColor: "error"
+            textColor: 'error'
           };
         } else if (this.itemAdding === undefined) {
           return {
-            bgColor: "error",
+            bgColor: 'error',
             message: 'If you see this message, contact courseroad@mit.edu and tell them "710".',
-            textColor: "error"
+            textColor: 'error'
           };
         } else if (this.index === 0 || this.offeredNow) {
           return {
-            bgColor: "success",
+            bgColor: 'success',
             message: 'Add class here',
-            textColor: "success"
+            textColor: 'success'
           };
         } else if (this.itemAddingNoLongerOffered) {
           return {
-            bgColor: "warning",
+            bgColor: 'warning',
             message: 'Subject no longer offered',
-            textColor: "warning"
+            textColor: 'warning'
           };
         } else if (this.itemAddingNotCurrentlyOffered) {
           return {
-            bgColor: "warning",
+            bgColor: 'warning',
             message: 'Subject not offered this year',
-            textColor: "warning"
+            textColor: 'warning'
           };
         } else if (this.isSameYear) {
           return {
-            bgColor: "error",
+            bgColor: 'error',
             message: 'Subject not available this semester',
-            textColor: "error"
+            textColor: 'error'
           };
         } else {
           return {
-            bgColor: "warning",
+            bgColor: 'warning',
             message: 'Subject may not be available this semester',
-            textColor: "warning"
+            textColor: 'warning'
           };
         }
       }
diff --git a/src/pages/MainPage.vue b/src/pages/MainPage.vue
index 2ba3ac5f..9e9935a1 100644
--- a/src/pages/MainPage.vue
+++ b/src/pages/MainPage.vue
@@ -86,8 +86,15 @@
               </h3>
             </v-flex>
             <v-flex>
-              <v-btn class="mx-2 elevation-2" dark fab small color="primary" @click="useDark = !useDark">
-                <v-icon>mdi-{{useDark ? 'white-balance-sunny' : 'weather-night'}}</v-icon>
+              <v-btn
+                class="mx-2 elevation-2"
+                dark
+                fab
+                small
+                color="primary"
+                @click="useDark = !useDark"
+              >
+                <v-icon>mdi-{{ useDark ? 'white-balance-sunny' : 'weather-night' }}</v-icon>
               </v-btn>
             </v-flex>
             <v-flex>
@@ -261,11 +268,11 @@ export default {
   },
   computed: {
     useDark: {
-      get() {
+      get () {
         return this.$store.state.useDarkTheme;
       },
       set (value) {
-        this.$store.commit('setUseDarkTheme', value)
+        this.$store.commit('setUseDarkTheme', value);
         this.$vuetify.theme.primary = value ? this.$vuetify.theme.discordOrange : this.$vuetify.theme.defaultPrimary;
         this.$vuetify.theme.background = value ? this.$vuetify.theme.backgroundDark : this.$vuetify.theme.backgroundLight;
         this.$vuetify.theme.background2 = value ? this.$vuetify.theme.backgroundDark : this.$vuetify.theme.background2Light;
diff --git a/src/stores/courseData.js b/src/stores/courseData.js
index ac96eb30..62344a01 100644
--- a/src/stores/courseData.js
+++ b/src/stores/courseData.js
@@ -49,7 +49,7 @@ const store = new Vuex.Store({
     }
   },
   mutations: {
-    setUseDarkTheme(state, newValue){
+    setUseDarkTheme (state, newValue) {
       state.useDarkTheme = newValue;
     },
     addClass (state, newClass) {

From 52e4240a9e775af234d3181ea777de5b5ae7ce0b Mon Sep 17 00:00:00 2001
From: Nate Foss <npfoss@gmail.com>
Date: Thu, 31 Oct 2019 12:12:42 -0400
Subject: [PATCH 3/3] remove extra line oops

---
 src/assets/css/coursecolors.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/assets/css/coursecolors.css b/src/assets/css/coursecolors.css
index 123fc283..8c03b469 100644
--- a/src/assets/css/coursecolors.css
+++ b/src/assets/css/coursecolors.css
@@ -53,4 +53,3 @@ https://github.com/venkatesh-sivaraman/fireroad-server/blob/develop/requirements
 .generic-HASS-S { background-color: #7C39BF; }
 .generic-CI-H { background-color: #BF39B1; }
 .generic-CI-HW { background-color: #BF3961; }
-