Footer with theme switch, data notice, upgrade cta and a github link

src/App.vue

@@ -16,6 +16,9 @@ export default {
   created() {
     this.pauseAnimationsUntilLoaded();
   },
+  mounted() {
+    this.initColorScheme();
+  },
   methods: {
     jsLoaded() {
       document.body.classList.remove('js-loading');
@@ -24,6 +27,24 @@ export default {
       document.body.classList.add('js-loading');
       window.addEventListener('load', this.jsLoaded, false);
     },
+    initColorScheme() {
+      // local storage is used to override OS theme settings
+      if (localStorage.getItem('theme')) {
+        if (localStorage.getItem('theme') === 'dark') {
+          this.$store.commit('themes/theme', 'dark');
+          return document.documentElement.setAttribute('data-theme', 'dark');
+        }
+      } else if (!window.matchMedia) {
+        // matchMedia method not supported
+        return false;
+      } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        // OS theme setting detected as dark
+        this.$store.commit('themes/theme', 'dark');
+        console.log('hello there');
+        return document.documentElement.setAttribute('data-theme', 'dark');
+      }
+      document.documentElement.setAttribute('data-theme', this.theme || 'light');
+    },
   },
 };
 </script>

src/assets/scss/_buttons.scss

@@ -1,9 +1,14 @@
 .btn {
   border-width: 0;
 
-  &-sm {
-    &.btn--icon-left {
-      padding-left: $btn-padding-x-sm / 2;
+  &--icon {
+    &-left {
+      .btn-sm {
+        padding-left: $btn-padding-x-sm / 2;
+      }
+    }
+    img {
+      max-width: 1.5rem;
     }
   }
 

src/assets/scss/_scaffolding.scss

@@ -1,6 +1,6 @@
 .app {
   &__content {
-    padding-top: 32px;
+    //padding-top: 32px;
     padding-right: 66px;
     padding-left: 66px;
     will-change: padding-left;

src/views/dashboard/Dashboard.vue

@@ -1,11 +1,46 @@
 <template>
     <div>
-        <div class="container-fluid app__content">
+        <div class="container app__content">
             <div class="row justify-content-center">
-                <div class="min-vh-100 col-xl-10 col-xxl-8 pb-5">
+                <div class="d-flex flex-column justify-content-between col-12 min-vh-100 pt-5 pb-2">
                     <transition name="fade" mode="out-in">
                         <router-view/>
                     </transition>
+                    <footer class="col-12 d-flex justify-content-between align-items-center text-secondary px-0">
+                        <button class="btn btn-sm text-secondary" @click="toggleTheme">
+                            Lights {{ theme === 'dark' ? 'on' : 'off' }}
+                            <i class="material-icons material-icons-round md-14 align-text-bottom ml-1">
+                                {{ theme === 'dark' ? 'wb_sunny' : 'brightness_2' }}
+                            </i>
+                        </button>
+                        <div>
+                            <small v-b-tooltip.hover
+                                   title="All your data is saved in your browser and not on any server.
+                                   This application is truly serverless and we do not have access to any of your data."
+                                   class="pointer">
+                                What about my data?
+                            </small>
+                            <small class="pl-2">
+                                Made with
+                                <i class="material-icons material-icons-round md-14 align-text-bottom">favorite</i>
+                                by
+                                <a href="https://mokuapp.io/" class="text-secondary" target="_blank">Moku</a>.
+                            </small>
+                            <a href="https://github.com/mokuappio/serverless-invoices"
+                               class="btn btn-sm btn--icon ml-2"
+                               target="_blank">
+                                <img src="@/assets/img/github.png"
+                                     alt="Serverless Invoices Github"
+                                     v-if="theme === 'dark'">
+                                <img src="@/assets/img/github-dark.png"
+                                     alt="Serverless Invoices Github"
+                                     v-else>
+                            </a>
+                            <a  href="https://app.mokuapp.io/"
+                                class="btn btn-sm btn-primary ml-2"
+                                target="_blank">Upgrade</a>
+                        </div>
+                    </footer>
                 </div>
             </div>
         </div>
@@ -15,12 +50,16 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import { mapGetters, mapState } from 'vuex';
 import ClientModal from '@/components/clients/ClientModal';
 import BankAccountModal from '@/components/bank-accounts/BankAccountModal';
+import { VBTooltip } from 'bootstrap-vue';
 
 
 export default {
+  directives: {
+    'b-tooltip': VBTooltip,
+  },
   components: {
     BankAccountModal,
     ClientModal,
@@ -29,6 +68,20 @@ export default {
     ...mapGetters({
       team: 'teams/team',
     }),
+    ...mapState({
+      theme: state => state.themes.theme,
+    }),
+  },
+  methods: {
+    toggleTheme() {
+      if (this.theme === 'light') {
+        this.$store.commit('themes/theme', 'dark');
+      } else {
+        this.$store.commit('themes/theme', 'light');
+      }
+      localStorage.setItem('theme', this.theme);
+      document.documentElement.setAttribute('data-theme', this.theme);
+    },
   },
 };
 </script>