adding latest

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>