fixed the order via whatsapp button and cancel button that are overflowing from parent container

client/src/components/Card/Cart/Cart.css

@@ -101,3 +101,98 @@
   justify-content: flex-end;
   align-items: center;
 }
+
+/* Checkout form button styles */
+.checkout-buttons {
+  display: flex;
+  gap: 8px;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  width: 100%;
+  padding: 0;
+  margin-top: 10px;
+  box-sizing: border-box;
+}
+
+.checkout-buttons .whatsapp-btn,
+.checkout-buttons .cancel-btn {
+  flex: 1;
+  min-width: 100px;
+  max-width: 160px;
+  height: 40px;
+  font-size: 0.85rem;
+  padding: 8px 12px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  box-sizing: border-box;
+}
+
+.checkout-buttons .whatsapp-btn {
+  background-color: #25D366 !important;
+  color: white !important;
+  font-size: 0.75rem !important;
+}
+
+.checkout-buttons .cancel-btn {
+  border-color: #666;
+  color: #666;
+}
+
+/* Mobile responsive */
+@media (max-width: 520px) {
+  .checkout-buttons {
+    flex-direction: column;
+    gap: 10px;
+    padding: 0 5px;
+  }
+
+  .checkout-buttons .whatsapp-btn,
+  .checkout-buttons .cancel-btn {
+    width: 100%;
+    max-width: none;
+    min-width: auto;
+    flex: none;
+  }
+}
+
+@media (max-width: 400px) {
+  .checkout-buttons .whatsapp-btn {
+    font-size: 0.75rem;
+    padding: 10px 8px;
+  }
+
+  .checkout-buttons .cancel-btn {
+    font-size: 0.8rem;
+    padding: 10px 8px;
+  }
+}
+
+/* Checkout form container improvements */
+.checkout-form {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+  box-sizing: border-box;
+  overflow-y: auto;
+}
+
+.checkout-form h3 {
+  margin: 0 0 15px 0;
+  text-align: center;
+  font-size: 1.2rem;
+  color: var(--text-primary, #333);
+}
+
+/* Ensure modal content fits properly */
+.checkout-form > div {
+  margin-bottom: 12px;
+}
+
+.checkout-form > div:last-child {
+  margin-bottom: 0;
+  margin-top: auto;
+}

client/src/components/Card/Cart/Cart.js

@@ -13,19 +13,23 @@ import land from "../../../asset/brand/cart.jpg";
 
 const style = {
   position: "absolute",
-  top: "60%",
+  top: "50%",
   left: "50%",
   transform: "translate(-50%, -50%)",
-  minWidth: "350px",
-  width: "90%", // mobile ke liye responsive
-  maxWidth: "500px",
-  height: "400px",
+  minWidth: "320px",
+  width: "90%",
+  maxWidth: "480px",
+  height: "auto",
+  maxHeight: "90vh",
   bgcolor: "background.paper",
-  border: "5px solid #FFE26E",
-  borderRadius: "15px",
+  border: "3px solid #FFE26E",
+  borderRadius: "12px",
   boxShadow: 24,
-  p: 4,
-  zIndex: 1500, // Drawer ke upar
+  p: 2,
+  zIndex: 1500,
+  overflow: "hidden",
+  display: "flex",
+  flexDirection: "column"
 };
 
 const Cart = () => {
@@ -146,9 +150,9 @@ const Cart = () => {
       <Modal open={openCheckoutModal} onClose={handleCheckoutClose}>
         <Box sx={style}>
           <div className="checkout-form">
-            <h3 style={{ marginBottom: '20px', textAlign: 'center' }}>Complete Your Order</h3>
+            <h3>Complete Your Order</h3>
 
-            <div style={{ marginBottom: '15px' }}>
+            <div>
               <TextField
                 fullWidth
                 label="Full Name *"
@@ -160,7 +164,7 @@ const Cart = () => {
               />
             </div>
 
-            <div style={{ marginBottom: '15px' }}>
+            <div>
               <TextField
                 fullWidth
                 label="Phone Number *"
@@ -172,7 +176,7 @@ const Cart = () => {
               />
             </div>
 
-            <div style={{ marginBottom: '15px' }}>
+            <div>
               <TextField
                 fullWidth
                 label="Email (Optional)"
@@ -183,7 +187,7 @@ const Cart = () => {
               />
             </div>
 
-            <div style={{ marginBottom: '20px' }}>
+            <div>
               <TextField
                 fullWidth
                 label="Delivery Address (Optional)"
@@ -196,21 +200,21 @@ const Cart = () => {
               />
             </div>
 
-            <div style={{ textAlign: 'center', marginBottom: '15px' }}>
-              <strong>Total: ${totalBill.toFixed(2)}</strong>
+            <div style={{ textAlign: 'center', fontWeight: 'bold', fontSize: '1.1rem' }}>
+              Total: ${totalBill.toFixed(2)}
             </div>
 
-            <div style={{ display: 'flex', gap: '10px', justifyContent: 'center' }}>
+            <div className="checkout-buttons">
               <Button 
                 variant="contained" 
                 onClick={handleWhatsAppOrder}
                 startIcon={<WhatsAppIcon />}
-                style={{ backgroundColor: '#25D366', color: 'white' }}
+                className="whatsapp-btn"
               >
                 Order via WhatsApp
               </Button>
-              <Button variant="outlined" onClick={handleCheckoutClose}>
-                Cancel
+              <Button variant="outlined" onClick={handleCheckoutClose} className="cancel-btn">
+                CANCEL
               </Button>
             </div>
           </div>

client/src/components/Card/LoginCard/LoginCard.js

@@ -25,7 +25,17 @@ const LoginCard = ({ email, password, setEmail, setPassword }) => {
                 navigate('/');
             }, 100); // Navigate to account page after login
         } catch (error) {
-            const errorMessage = error.response ? error.response.data.message : error.message;
+            console.error('Login error:', error);
+            let errorMessage = 'Login failed. Please try again.';
+
+            if (error.response && error.response.data && error.response.data.message) {
+                errorMessage = error.response.data.message;
+            } else if (error.message) {
+                errorMessage = error.message;
+            } else if (error.code === 'ECONNREFUSED') {
+                errorMessage = 'Cannot connect to server. Please make sure the server is running.';
+            }
+
             alert(`Login failed: ${errorMessage}`);
         }
     };

server/controllers/authController.js

@@ -35,6 +35,11 @@ exports.loginUser = asyncHandler(async (req, res) => {
     const { email, password } = req.body;
 
     try {
+        // Validate input
+        if (!email || !password) {
+            return res.status(400).json({ message: 'Email and password are required' });
+        }
+
         const user = await User.findOne({ email });
         if (!user) {
             return res.status(400).json({ message: 'Invalid email or password' });
@@ -51,10 +56,10 @@ exports.loginUser = asyncHandler(async (req, res) => {
             { expiresIn: '1h' }
         );
 
-        res.json({ token });
+        res.json({ token, message: 'Login successful' });
     } catch (error) {
         console.error('Login error:', error);
-        res.status(500).json({ message: error.message });
+        res.status(500).json({ message: error.message || 'Internal server error' });
     }
 });
 

server/server.js

@@ -14,7 +14,7 @@ connectDB();
 app.use(express.json());
 app.use(express.urlencoded({ extended: false }));
 //app.use(cors()); 
-app.use(cors({ origin: 'http://localhost:3000', credentials: true }));
+app.use(cors({ origin: ['http://localhost:3000', 'http://localhost:3001'], credentials: true }));
 app.use("/public", express.static(path.join(__dirname, "public")));
 
 // Define routes