add signin with google + improve UX

src/components/Navigation.vue

@@ -204,11 +204,12 @@ header {
   font-weight: 300;
   font-size: 16px;
   padding: 0 8px;
-  transition: 0.3s color ease;
+  border-radius: 30px;
+  transition: 0.3s background-color ease;
 }
 
 .link:hover {
-  color: red;
+  background-color: #eb9d63;
 }
 
 .logo {

src/views/Cart.vue

@@ -12,13 +12,14 @@
             <span>{{ item.quantity }}</span>
             <button @click="updateCartQuantity({ product: item, quantity: item.quantity + 1 })">+</button>
           </div>
-          <button @click="removeFromCart(item)">Remove</button>
+          <button @click="removeFromCart(item)" class="remove-item">Remove</button>
         </div>
       </div>
       <div class="cart-summary">
         <h2>Cart Summary</h2>
         <p>Total Items: {{ cartItemCount }}</p>
         <p>Total Price: {{ cartTotal | currency }}</p>
+        <button class="checkout-button">Checkout</button>
       </div>
     </div>
     <div v-else class="empty-cart">
@@ -41,16 +42,31 @@ export default {
 </script>
 
 <style scoped>
+body {
+  font-family: 'Courier New', Courier, monospace;
+  background-color: #f8f8f8;
+  margin: 0;
+  padding: 0;
+}
+
 .cart {
-  padding: 20px;
-  max-width: 1200px;
-  margin: 0 auto;
+  padding: 40px;
+  max-width: 650px;
+  margin: 20px auto;
+  background-color: #fff;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+  font-family: 'Courier New', Courier, monospace;
+  background-color: beige;
+
 }
 
 h1 {
-  font-size: 2.5rem;
+  font-size: 2rem;
   margin-bottom: 20px;
   text-align: center;
+  font-family: 'Courier New', Courier, monospace;
 }
 
 .cart-content {
@@ -62,15 +78,12 @@ h1 {
 .cart-item {
   display: flex;
   align-items: center;
-  padding: 20px;
-  border: 1px solid #ddd;
-  border-radius: 8px;
-  background-color: #fff;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  padding: 10px;
+  border-bottom: 1px dashed #ddd;
 }
 
 .cart-item-image {
-  width: 100px;
+  width: 80px;
   height: auto;
   margin-right: 20px;
 }
@@ -80,13 +93,13 @@ h1 {
 }
 
 .cart-item-details h2 {
-  font-size: 1.5rem;
-  margin: 0 0 10px 0;
+  font-size: 1.2rem;
+  margin: 0 0 5px 0;
 }
 
-.cart-item-details p {
+.cart-item-details .price {
   font-size: 1rem;
-  color: #555;
+  color: #333;
   margin: 5px 0;
 }
 
@@ -97,55 +110,79 @@ h1 {
 }
 
 .quantity-controls button {
-  background-color: #e91e63;
+  background-color: #333;
   color: #fff;
   border: none;
-  padding: 5px 10px;
+  padding: 5px;
   font-size: 1rem;
   cursor: pointer;
-  border-radius: 5px;
+  border-radius: 3px;
 }
 
 .quantity-controls span {
   margin: 0 10px;
-  font-size: 1.2rem;
+  font-size: 1rem;
 }
 
 .remove-item {
   background-color: transparent;
   border: none;
-  font-size: 1.5rem;
+  font-size: 1rem;
   color: #e91e63;
   cursor: pointer;
+  margin-top: 10px;
+  padding: 5px;
 }
 
 .cart-summary {
-  text-align: right;
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  align-items: center;
   margin-top: 20px;
 }
 
 .cart-summary h2 {
-  font-size: 1.8rem;
-  margin-bottom: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 400px;
+  font-size: 1.5rem;
+  margin-bottom: 10px;
+}
+
+.cart-summary p {
+  font-size: 1rem;
+  margin: 5px 0;
 }
 
 .checkout-button {
   background-color: #e91e63;
   color: #fff;
   border: none;
   padding: 10px 20px;
-  font-size: 1.2rem;
+  font-size: 1rem;
   cursor: pointer;
+  max-width: 300px;
   border-radius: 5px;
+  margin-top: 20px;
+  display: block;
+  width: 100%;
+}
+
+.checkout-button:hover {
+  background-color: #d81b60;
 }
 
 .empty-cart {
-  display: flex;
-  flex-direction: column;
   text-align: center;
   font-size: 1.5rem;
   color: #555;
-  justify-content: center;
   height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 </style>
+

src/views/Login.vue

@@ -18,12 +18,18 @@
         <div v-show='error' class="error">{{ this.errorMsg }}</div>
       </div>
       <router-link class='forgot-password' :to='{ name: "ForgotPassword" }'>Forgot your password?</router-link>
-      <button @click.prevent='signin'>Sign in</button>
+      <button @click.prevent='signin' :disabled="loading">
+        <span v-if="!loading">Sign in</span>
+        <span v-else class="spinner"></span>
+      </button>
+      <button @click.prevent='googleSignIn' :disabled="loading" class="google-button">
+        <span v-if="!loading">Sign in with Google</span>
+        <span v-else class="spinner"></span>
+      </button>
     </form>
   </div>
 </template>
 
-
 <script>
 import firebase from 'firebase/app';
 import email from '../assets/Icons/envelope-regular.svg';
@@ -32,31 +38,50 @@ import 'firebase/auth';
 
 export default {
   name: "Login",
-  components: { email , password},
+  components: { email, password },
   data() {
     return {
       email: '',
       password: '',
       error: false,
-      errorMsg: ''
+      errorMsg: '',
+      loading: false,
     }
   },
   methods: {
-    signin() {
-      firebase.auth().signInWithEmailAndPassword(this.email, this.password)
-        .then(() => {
-          this.$router.push({ name: 'Home' });
-          this.error = false;
-          this.errorMsg = '';
-        })
-        .catch((err) => {
-          this.error = true;
-          this.errorMsg = err.message;
-        });
+    async signin() {
+      this.loading = true;
+      this.error = false;
+      this.errorMsg = '';
+      try {
+        await firebase.auth().signInWithEmailAndPassword(this.email, this.password);
+        this.$router.push({ name: 'Home' });
+      } catch (err) {
+        this.error = true;
+        this.errorMsg = err.message;
+      } finally {
+        this.loading = false;
+      }
+    },
+    async googleSignIn() {
+      this.loading = true;
+      this.error = false;
+      this.errorMsg = '';
+      try {
+        const provider = new firebase.auth.GoogleAuthProvider();
+        await firebase.auth().signInWithPopup(provider);
+        this.$router.push({ name: 'Home' });
+      } catch (err) {
+        this.error = true;
+        this.errorMsg = err.message;
+      } finally {
+        this.loading = false;
+      }
     }
   }
 }
 </script>
+
 <style lang='scss'>
 .form-wrap {
   display: flex;
@@ -152,11 +177,43 @@ form {
     cursor: pointer;
     transition: background-color 0.3s;
     margin-top: 14px;
-  
+    padding: 10px 20px;
+    width: 100%;
+    font-size: 1rem;
+
     &:hover {
       background-color: #2980b9;
     }
+
+    &:disabled {
+      background-color: #b0c4de;
+      cursor: not-allowed;
+    }
+
+    .spinner {
+      width: 20px;
+      height: 20px;
+      border: 2px solid #fff;
+      border-top: 2px solid transparent;
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+    }
+  }
+
+  .google-button {
+    background-color: #db4437;
+
+    &:hover {
+      background-color: #c33d2e;
+    }
+  }
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
   }
 }
 </style>
 
+