fix: Firebase development mode warning

.prettierignore

@@ -0,0 +1,7 @@
+node_modules
+
+dist
+
+data
+
+tsconfig.json

.prettierrc

@@ -0,0 +1,10 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "vetur.format.defaultFormatterOptions": {
+    "prettier": {
+      "singleQuote": true
+    }
+  },
+  "jsxSingleQuote": true
+}

assets/styles/reset.css

@@ -2,10 +2,14 @@
   box-sizing: border-box;
   -webkit-font-smoothing: antialiased;
 }
-body{
-  font-family: 'Karla', Roboto, sans-serif
+body {
+  font-family: 'Karla', Roboto, sans-serif;
 }
-html, body, ul, ol, fieldset {
+html,
+body,
+ul,
+ol,
+fieldset {
   margin: 0;
   padding: 0;
 }
@@ -24,6 +28,21 @@ img {
 .sitecontent img {
   width: 100%;
 }
+img[lazy='loaded'] {
+  animation-name: fadein;
+  animation-duration: 2s;
+}
+img[lazy='loading'] {
+  filter: blur(10px);
+}
+@keyframes fadein {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
 @media screen and (max-width: 800px) {
   .sitecontent img {
     height: 478px;
@@ -97,4 +116,4 @@ button {
   font-size: 28px;
   padding: 1rem;
   border-bottom: 1px solid #ccc;
-}
+}

assets/styles/transitions.css

@@ -1,8 +1,10 @@
-.page-enter-active, .page-leave-active {
-  transition: opacity .5s
+.page-enter-active,
+.page-leave-active {
+  transition: opacity 0.5s;
 }
-.page-enter, .page-leave-active {
-  opacity: 0
+.page-enter,
+.page-leave-active {
+  opacity: 0;
 }
 .slide-left-enter,
 .slide-right-leave-active {
@@ -26,8 +28,8 @@
 .mb-36 {
   margin-bottom: -36px;
 }
-.flex{
+.flex {
   display: flex;
   justify-content: space-between;
   align-items: center;
-}
+}

components/CartButtons.vue

@@ -1,26 +1,49 @@
 <template>
   <div class="align">
     <div
-      v-if="!checkCart({_id:product._id})"
-      @click="addToCart({_id:product._id,name:product.name,img:product.img,price:product.price,qty:1});"
+      v-if="!checkCart({ _id: product._id })"
+      @click="
+        addToCart({
+          _id: product._id,
+          name: product.name,
+          img: product.img,
+          price: product.price,
+          qty: 1
+        })
+      "
     >
       <button class="button1 buttonrounded1 btnalign">
         <img src="/plus.svg" />
       </button>
-
     </div>
     <div v-else>
       <div class="size1">
         <button
           class="button1 buttonrounded1 "
-          @click="addToCart({_id:product._id,name:product.name,img:product.img,price:product.price,qty:-1});"
+          @click="
+            addToCart({
+              _id: product._id,
+              name: product.name,
+              img: product.img,
+              price: product.price,
+              qty: -1
+            })
+          "
         >
           <img src="/minus.svg" />
         </button>
-        <span class="size2">{{getQty({_id:product._id})}}</span>
+        <span class="size2">{{ getQty({ _id: product._id }) }}</span>
         <button
           class="button1 button.is-danger buttonrounded1 btnplus-clr"
-          @click="addToCart({_id:product._id,name:product.name,img:product.img,price:product.price,qty:1});"
+          @click="
+            addToCart({
+              _id: product._id,
+              name: product.name,
+              img: product.img,
+              price: product.price,
+              qty: 1
+            })
+          "
         >
           <img src="/plus.svg" />
         </button>
@@ -29,12 +52,12 @@
   </div>
 </template>
 <script>
-import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
+import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
 export default {
-  props: ["product"],
+  props: ['product'],
   methods: {
     ...mapActions({
-      addToCart: "cart/addToCart"
+      addToCart: 'cart/addToCart'
     })
   },
   computed: {
@@ -44,14 +67,14 @@ export default {
       cartItems: state => state.cart.items || []
     }),
     ...mapGetters({
-      checkCart: "cart/checkCart",
-      checkviewdetails: "viewdetails/checkviewdetails",
-      getQty: "cart/getQty"
+      checkCart: 'cart/checkCart',
+      checkviewdetails: 'viewdetails/checkviewdetails',
+      getQty: 'cart/getQty'
     })
   }
-};
+}
 </script>
-<style>
+<style scoped>
 .size1 {
   display: flex;
   flex-direction: row;
@@ -132,6 +155,4 @@ export default {
 .addalign {
   padding-top: 4px;
 }
-
 </style>
-

components/Header.vue

@@ -8,86 +8,62 @@
       <div class="navbar-brand">
         <a class="navbar-item a1">
           <router-link to="/">
-            <img
-              class="logo"
-              src="/logo.png"
-              alt="FoodFire"
-              height="28"
-            >
+            <img class="logo" src="/logo.png" alt="FoodFire" height="28" />
           </router-link>
         </a>
       </div>
       <div class="header-right navbar-item fx">
-        <a
-          role="button"
-          href="https://github.com/itswadesh/foodfire"
-        >
+        <a role="button" href="https://github.com/itswadesh/foodfire">
           ⭐me @ GitHub
         </a>
-        <a
-          role="button"
-          aria-label="menu"
-        >
-          <img
-            v-if="user"
-            :src="user.avatar"
-            @click="go('/my/profile')"
-          />
-          <img
-            v-else
-            class="img"
-            src="/person.svg"
-            @click="googleSignIn()"
-          />
+        <a role="button" aria-label="menu">
+          <img v-if="user" :src="user.avatar" @click="go('/my/profile')" />
+          <img v-else class="img" src="/person.svg" @click="googleSignIn()" />
         </a>
-        <a
-          role="button"
-          aria-label="menu"
-          @click="go('/cart',false)"
-        >
+        <a role="button" aria-label="menu" @click="go('/cart', false)">
           <img src="/bag.svg" />
         </a>
         <a
           v-if="user"
           role="button"
           aria-label="menu"
-          @click="go('/my/orders',true)"
+          @click="go('/my/orders', true)"
         >
           <img src="/orderstatus.svg" />
         </a>
       </div>
     </div>
   </nav>
 </template>
-  <script>
-import { mapActions } from "vuex";
+<script>
+import { mapActions } from 'vuex'
 
 export default {
   data() {
     return {
       loading: false
-    };
+    }
   },
   methods: {
     go(url, auth) {
       if (auth && !this.user) {
-        this.googleSignIn();
+        this.googleSignIn()
       } else {
-        this.$router.push(url);
+        this.$router.push(url)
       }
     },
     ...mapActions({
-      googleSignIn: "auth/googleSignIn"
+      googleSignIn: 'auth/googleSignIn'
     })
   },
   computed: {
     user() {
-      return (this.$store.state.auth || {}).user || null;
+      return (this.$store.state.auth || {}).user || null
     }
   }
-};
+}
 </script>
-    <style scoped>
+<style scoped>
 .header-right {
   display: inline-flex;
   align-items: center;