Merge pull request #101 from HTBox/vuetify-theme-color

Apply TwoWeeksReady theme colors

Author: David Paquette

2wr-app/package-lock.json

@@ -25,7 +25,7 @@
     "uuid": "^3.4.0",
     "vue": "^2.6.11",
     "vue-router": "^3.4.9",
-    "vuetify": "^2.4.2",
+    "vuetify": "^2.5.10",
     "vuex": "^3.6.0"
   },
   "devDependencies": {

2wr-app/package.json

@@ -1,5 +1,5 @@
 <template>
-  <v-app>
+  <v-app :style="{background: $vuetify.theme.themes[theme].background}">
     <div v-if="isBusy" class="loading-line"></div>
     <v-main>
       <router-view></router-view>
@@ -21,24 +21,24 @@
       <!-- show login when not authenticated -->
 
       <!-- show logout when authenticated -->
-      <v-bottom-navigation app fixed grow color="primary">
-        <v-btn v-if="!$auth.isAuthenticated" height="100%" @click="login">
+      <v-bottom-navigation app fixed background-color="secondary">
+        <v-btn v-if="!$auth.isAuthenticated" height="100%" @click="login" color="secondary">
           <span>login</span>
           <v-icon>mdi-login-variant</v-icon>
         </v-btn>
-        <v-btn v-if="$auth.isAuthenticated" to="/prepare" height="100%">
+        <v-btn v-if="$auth.isAuthenticated" to="/prepare" height="100%" color="secondary">
           <span>Prepare</span>
           <v-icon>mdi-clipboard-list-outline</v-icon>
         </v-btn>
-        <v-btn v-if="$auth.isAuthenticated" to="/recent" height="100%">
+        <v-btn v-if="$auth.isAuthenticated" to="/recent" height="100%" color="secondary">
           <span>Recent Events</span>
           <v-icon>mdi-calendar-star</v-icon>
         </v-btn>
-        <v-btn v-if="$auth.isAuthenticated" to="/settings" height="100%">
+        <v-btn v-if="$auth.isAuthenticated" to="/settings" height="100%" color="secondary">
           <span>Settings</span>
           <v-icon>mdi-cog</v-icon>
         </v-btn>
-        <v-btn v-if="$auth.isAuthenticated" @click="logout" height="100%">
+        <v-btn v-if="$auth.isAuthenticated" @click="logout" height="100%" color="secondary">
           <span>Logout</span>
           <v-icon>mdi-logout-variant</v-icon>
         </v-btn>
@@ -59,6 +59,9 @@ export default {
     },
     error() {
       return this.$store.state.error;
+    },
+     theme(){
+      return (this.$vuetify.theme.dark) ? 'dark' : 'light'
     }
   },
   methods: {

2wr-app/src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="mb-1">
-    <v-app-bar app flat dense fixed color="blue-grey lighten-4">
+    <v-app-bar app flat dense fixed color="background" >
       <v-icon class="mr-2" v-on:click="goBack()">mdi-arrow-left</v-icon>
       <v-toolbar-title>{{ title }}</v-toolbar-title>
     </v-app-bar>

2wr-app/src/components/common/InfoBar.vue

@@ -1,6 +1,6 @@
 <template>
   <v-container class="py-0">
-    <v-app-bar app flat dense fixed>
+    <v-app-bar app flat dense fixed  color="background">
       <v-icon class="mr-2" v-on:click="goBack()">mdi-arrow-left</v-icon>
       <v-icon class="mr-2">mdi-medical-bag</v-icon>
       <v-toolbar-title>Emergency Kit Create</v-toolbar-title>

2wr-app/src/components/prepare/emergency-kits/emergency-kit-create.vue

@@ -6,7 +6,7 @@
         size="64"
       ></v-progress-circular>
     </v-overlay>
-    <v-app-bar app flat dense fixed>
+    <v-app-bar app flat dense fixed  color="background">
       <v-icon class="mr-2" v-on:click="goBack()">mdi-arrow-left</v-icon>
       <v-icon class="mr-2">mdi-medical-bag</v-icon>
       <v-toolbar-title>Emergency Kit Edit</v-toolbar-title>

2wr-app/src/components/prepare/emergency-kits/emergency-kit-edit.vue

@@ -1,6 +1,6 @@
 <template>
   <v-container class="py-0">
-    <v-app-bar app flat dense fixed>
+    <v-app-bar app flat dense fixed color="background">
       <v-icon class="mr-2" v-on:click="goBack()">mdi-arrow-left</v-icon>
       <v-icon class="mr-2">mdi-medical-bag</v-icon>
       <v-toolbar-title>Emergency Kit List</v-toolbar-title>

2wr-app/src/components/prepare/emergency-kits/emergency-kit-list.vue

@@ -15,7 +15,7 @@
       </v-btn>
     </v-fab-transition>
     <InfoBar title="My Family Plan"></InfoBar>
-    <v-tabs background-color="blue" dark grow v-model="currentTab">
+    <v-tabs background-color="transparent" grow v-model="currentTab">
       <v-tab> My Family Plan </v-tab>
       <v-tab>
         Plans Shared<br />
@@ -24,6 +24,7 @@
     </v-tabs>
     <v-tabs-items v-model="currentTab">
       <v-tab-item>
+        <v-card color="background">
         <v-data-iterator
           :items="familyPlans"
           disable-pagination
@@ -37,7 +38,6 @@
                 v-for="item in props.items"
                 :key="item.id"
                 class="mx-2 my-2"
-                color="#eee"
                 ripple
                 :to="`/prepare/familyplan/${item.id}`"
               >
@@ -54,6 +54,7 @@
             </div>
           </template>
         </v-data-iterator>
+        </v-card>
       </v-tab-item>
       <v-tab-item>
         <p>Shared Plans</p>

2wr-app/src/components/prepare/family-plans/family-plans-list.vue

@@ -61,7 +61,7 @@
     <div class="info-table">
       <v-card
         class="mx-2 my-2"
-        color="#eee"
+        color="primary"
         ripple
         @click="ensureNamed('Emergency Contacts', 'emergencycontacts')"
       >
@@ -74,7 +74,7 @@
       </v-card>
       <v-card
         class="mx-2 my-2"
-        color="#eee"
+        color="primary"
         ripple
         @click="ensureNamed('Routes and Locations', 'routes')"
       >
@@ -87,7 +87,7 @@
       </v-card>
       <v-card
         class="mx-2 my-2"
-        color="#eee"
+        color="primary"
         ripple
         @click="ensureNamed('Children', 'children')"
       >
@@ -100,7 +100,7 @@
       </v-card>
       <v-card
         class="mx-2 my-2"
-        color="#eee"
+        color="primary"
         ripple
         @click="ensureNamed('Pets', 'pets')"
       >

2wr-app/src/components/prepare/family-plans/family-plans-view.vue

@@ -15,7 +15,7 @@
       </v-btn>
     </v-fab-transition>
     <InfoBar :title="`${ plan.title } - Routes and Locations`"></InfoBar>
-    <v-app-bar app flat dense fixed>
+    <v-app-bar app flat dense fixed  color="background">
       <v-icon class="mr-2" v-on:click="goBack()">mdi-arrow-left</v-icon>
       <v-toolbar-title>{{ plan.title }} - Routes and Locations</v-toolbar-title>
     </v-app-bar>