adding latest

src/App.vue

@@ -1,10 +1,18 @@
 <template>
-  <v-app :style="{ background: $vuetify.theme.themes.light.background }">
-    <v-content>
-      <Appbar></Appbar>
-      <router-view></router-view>
-    </v-content>
-  </v-app>
+  <div>
+    <v-app
+      :style="{ background: $vuetify.theme.themes.light.background }"
+      class="fontColor"
+    >
+      <v-content>
+        <Appbar></Appbar>
+        <transition name="slide">
+          <router-view></router-view>
+        </transition>
+        <v-row> </v-row>
+      </v-content>
+    </v-app>
+  </div>
 </template>
 
 <script>
@@ -15,7 +23,20 @@ export default {
   components: { Appbar },
 
   data: () => ({
-    //
+    video: require("./assets/videos/optical.mp4")
   })
 };
 </script>
+
+<style lang="scss">
+#app {
+  font-family: $gilroy, sans-serif, Arial, Helvetica;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.fontColor, .theme--light.v-application, .theme--light.v-sheet {
+  // color: $mainColor !important;
+  color: $mainColor !important;
+}
+</style>

src/components/Appbar.vue

@@ -1,58 +1,43 @@
 <template>
-  <!-- <v-container class="pb-0"> -->
   <div>
-    <v-app-bar flat color="indigo" app class="hidden-md-and-up">
+    <!-- <v-app-bar flat color="indigo" app class="hidden-md-and-up">
       <v-row>
-        <v-col cols="8" class="appTitle d-flex justify-start">
+        <v-col cols="8" class="d-flex justify-start">
           <v-toolbar-title>
             Savvy Firebase
           </v-toolbar-title>
         </v-col>
         <v-col cols="4" class="d-flex justify-end">
-          <v-btn color="primary">
+          <v-btn color="white">
             Sign In
           </v-btn>
         </v-col>
-        <!-- <v-col>
-          <v-btn color="primary">
-            Register
-          </v-btn>
-        </v-col> -->
       </v-row>
-    </v-app-bar>
+    </v-app-bar> -->
+    <!-- <v-app-bar flat app class="hidden-sm-and-down" color="#EEEEEE"> -->
     <v-app-bar
       flat
       app
       class="hidden-sm-and-down"
-      src="https://www.stellamccartney.com/cloud/smcwp/uploads/2016/01/1920x1080-black-solid-color-background.jpg"
+      color="#EEEEEE"
+      v-if="!this.$store.getters.fullScreen"
     >
-      <template v-slot:img="{ props }">
-        <v-img
-          v-bind="props"
-          gradient="to top right, rgba(100,115,201,.7), rgba(25,32,72,.7)"
-        ></v-img>
-      </template>
       <v-row>
         <v-col cols="2"></v-col>
-        <v-col cols="4" class="appTitle d-flex justify-start">
-          <v-toolbar-title>
+        <v-col cols="4" class="d-flex justify-start">
+          <v-toolbar-title class="appTitle">
             Savvy Firebase Tutorial
           </v-toolbar-title>
         </v-col>
-        <v-col>
-          <v-spacer> </v-spacer>
-        </v-col>
-        <v-col cols="2">
-          <v-btn color="primary" class="mr-2">
-            Sign In
-          </v-btn>
-          <v-btn color="primary">
-            Register
-          </v-btn>
+        <v-col cols="4" class="d-flex justify-end align-self-center">
+          <router-link :to="{ name: 'Login' }" class="routerLink">
+            <span class="mr-3">Sign In</span>
+          </router-link>
+          <span class="mr-3">Register</span>
         </v-col>
+        <v-col cols="2"></v-col>
       </v-row>
     </v-app-bar>
-    <!-- </v-container> -->
   </div>
 </template>
 
@@ -64,6 +49,11 @@ export default {
 
 <style lang="scss" scoped>
 .appTitle {
-  color: white;
+  font-family: $gilroy-bold;
+}
+
+.routerLink {
+  text-decoration: none;
+  color: $mainColor
 }
 </style>

src/components/LoginFull.vue

@@ -0,0 +1,26 @@
+<template>
+  <video-background
+    :src="video"
+    style=" height: 100vh;"
+    overlay="linear-gradient(45deg,#2a4ae430,#fb949e6b)"
+  >
+  </video-background>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      video: require("../assets/videos/optical.mp4")
+    };
+  },
+  created () {
+    this.$store.commit("fullScreen", true);
+  },
+  beforeDestroy () {
+    this.$store.commit("fullScreen", false);
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>

src/main.js

@@ -1,14 +1,16 @@
-import Vue from 'vue'
-import App from './App.vue'
-import router from './router'
-import store from './store'
-import vuetify from './plugins/vuetify';
+import Vue from "vue";
+import App from "./App.vue";
+import router from "./router";
+import store from "./store";
+import vuetify from "./plugins/vuetify";
+import VideoBackground from "vue-responsive-video-background-player";
 
-Vue.config.productionTip = false
+Vue.config.productionTip = false;
+Vue.component("video-background", VideoBackground);
 
 new Vue({
   router,
   store,
   vuetify,
   render: h => h(App)
-}).$mount('#app')
+}).$mount("#app");

src/plugins/vuetify.js

@@ -9,10 +9,10 @@ export default new Vuetify({
     iconfont: "mdi"
   },
   theme: {
-      themes: {
-          light: {
-              background: "#EEEEEE"
-          }
+    themes: {
+      light: {
+        background: "#fff"
       }
+    }
   }
 });

src/router/index.js

@@ -1,29 +1,36 @@
-import Vue from 'vue'
-import VueRouter from 'vue-router'
-import Home from '../views/Home.vue'
+import Vue from "vue";
+import VueRouter from "vue-router";
+import Home from "../views/Home.vue";
 
-Vue.use(VueRouter)
+Vue.use(VueRouter);
 
 const routes = [
   {
-    path: '/',
-    name: 'Home',
+    path: "/",
+    name: "Home",
     component: Home
   },
   {
-    path: '/about',
-    name: 'About',
+    path: "/about",
+    name: "About",
     // route level code-splitting
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+    component: () =>
+      import(/* webpackChunkName: "about" */ "../views/About.vue")
+  },
+  {
+    path: "/login",
+    name: "Login",
+    component: () =>
+      import(/* webpackChunkName: "login" */ "../components/LoginFull.vue")
   }
-]
+];
 
 const router = new VueRouter({
-  mode: 'history',
+  mode: "history",
   base: process.env.BASE_URL,
   routes
-})
+});
 
-export default router
+export default router;

src/scss/_variables.scss

@@ -0,0 +1,27 @@
+@font-face {
+  font-family: "Gilroy";
+  src: url("~@/assets/fonts/Gilroy-Regular.otf") format("opentype");
+}
+
+@font-face {
+  font-family: "Gilroy-bold";
+  src: url("~@/assets/fonts/Gilroy-Bold.otf") format("opentype");
+}
+
+$gilroy: "Gilroy", sans-serif !default;
+$gilroy-bold: "Gilroy-bold", sans-serif !default;
+
+@import "../../node_modules/vuetify/src/styles/styles.sass";
+$body-font-family: $gilroy;
+$heading-font-family: $gilroy;
+
+@import "~vuetify/src/styles/settings/variables";
+$body-font-family: $gilroy;
+$heading-font-family: $gilroy;
+
+$mainColor: #323947;
+
+.fontColor, .theme--light.v-application, .theme--light.v-sheet {
+  // color: $mainColor !important;
+  color: red !important;
+}

src/store/index.js

@@ -1,15 +1,22 @@
-import Vue from 'vue'
-import Vuex from 'vuex'
+import Vue from "vue";
+import Vuex from "vuex";
 
-Vue.use(Vuex)
+Vue.use(Vuex);
 
 export default new Vuex.Store({
   state: {
+    fullScreen: false
+  },
+  getters: {
+    fullScreen: state => {
+      return state.fullScreen
+    }
   },
   mutations: {
+    fullScreen(state, fullScreen) {
+      state.fullScreen = fullScreen;
+    }
   },
-  actions: {
-  },
-  modules: {
-  }
-})
+  actions: {},
+  modules: {}
+});

src/views/Home.vue

@@ -1,11 +1,11 @@
 <template>
-  <v-container>
-    <v-row>
-      <v-col>
-        Hello
-      </v-col>
-    </v-row>
-  </v-container>
+    <v-container>
+      <v-row>
+        <v-col>
+          Hello
+        </v-col>
+      </v-row>
+    </v-container>
 </template>
 
 <script>