code changes

src/Components/Auth/Auth.jsx

@@ -47,9 +47,9 @@ export const Auth = ({
         {isLoginMode ? (
           <div className={styles.login}>
             <LoginComponent onLogin={onLoginSubmit} />
-            {showForgotPassword && (
+            {/* {showForgotPassword && (
               <a href="#" className={styles.forgotLink}>Forgot password?</a>
-            )}
+            )} */}
           </div>
         ) : (
           <div className={styles.signup}>

src/Components/Auth/Auth.module.css

@@ -6,16 +6,16 @@ body{
   justify-content: center;
   align-items: center;
   min-height: 100vh;
-  font-family: Arial, sans-serif;
+  font-family:'Segoe UI';
 
 }
 
 .formCard {
   background: #fff;
-  padding: 40px 30px;
+  padding: 2.5rem 1.5rem;
   border-radius: 12px;
-  width: 350px;
-  max-width: 400px;
+  width: 22rem;
+  max-width: 25rem;
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
   text-align: center;
  margin-left: 2rem ;
@@ -23,9 +23,9 @@ body{
 }
 
 .header {
-  font-size: 24px;
+  font-size: 1.5rem;
   font-weight: bold;
-  margin-bottom: 25px;
+  margin-bottom: 1.563rem;
 }
 
 .tabContainer {
@@ -33,15 +33,15 @@ body{
   justify-content: space-between;
   background: #f0f0f0;
   border-radius: 30px;
-  margin-bottom: 20px;
+  margin-bottom: 1.25rem;
   padding: 5px;
 }
 
 .tabButton {
   flex: 1;
-  padding: 10px;
+  padding: 0.625rem;
   border: none;
-  border-radius: 30px;
+  border-radius: 2rem;
   font-weight: bold;
   background: transparent;
   cursor: pointer;
@@ -76,8 +76,8 @@ body{
 }
 
 .signupPrompt {
-  margin-top: 15px;
-  font-size: 13px;
+  margin-top: 1rem;
+  font-size: 0.813rem;
   color: #333;
 }
 

src/Components/Auth/Auth.stories.jsx

@@ -4,7 +4,7 @@ import { SignUp } from "../Form/SignUp/SignUp.jsx";
 import { action } from "@storybook/addon-actions";
 
 export default {
-  title: "Auth/Auth",
+  title: "Auth/AuthCard",
   component: Auth,
   argTypes: {
     loginLabel: { control: "text", name: "Login Title" },
@@ -36,7 +36,7 @@ const DummySignUp = ({ onSubmit }) => (
   </div>
 );
 
-export const AuthTabs = (args) => (
+export const ModeSwitcher = (args) => (
   <Auth
     {...args}
     LoginComponent={DummyLogin}
@@ -46,7 +46,7 @@ export const AuthTabs = (args) => (
   />
 );
 
-AuthTabs.args = {
+ModeSwitcher.args = {
   loginLabel: "Login Form",
   signupLabel: "SignUp Form",
   loginTabLabel: "Login",

src/Components/Base/Buttons/Button.module.css

@@ -54,7 +54,7 @@
   cursor: pointer;
   transition: background-color 0.3s ease;
   display: inline-block;
-  padding:10px;
+  padding:0.625rem;
   font-weight: 600;
 }
 
@@ -79,7 +79,7 @@
 .secondary {
   background-color: var(--secondary);
   color: black;
-  border-radius: 15px;
+  border-radius: 1rem;
   width: 100%;
   /* min-width: 12rem; */
 }
@@ -96,16 +96,16 @@
 
 .sm {
   font-size: 0.875rem;
-  padding: 8px 16px;
+  padding: 0.5rem 1rem;
 }
 
 .md {
   font-size: 1.2rem;
-  padding: 12px 20px;
+  padding: 0.75rem 1.25rem;
 }
 .lg {
   font-size: 1.125rem;
-  padding: 16px 24px;
+  padding: 1rem 1.5rem;
 }
 .loading{
   cursor: wait !important;

src/Components/Base/Input/Input.jsx

 import React from 'react'
 import styles from "./Input.module.css"
 import { ErrorFormatter } from 'storybook/internal/components'
-export const Input =({type='text',placeholder='',isInvalid=false,onChange,value='',errorMessage="",variant,...props}) => {
+export const Input =({type='text',placeholder='',isInvalid=false,onChange,value='',errorMessage="",...props}) => {
   return (
     <div >
       <input className={`${styles.inputbox} ${isInvalid && styles.invalid}`} type={type} placeholder={placeholder}  onChange={onChange} {...props}/>

src/Components/Base/Input/Input.module.css

 .inputbox{
- padding: 12px 14px;
+ padding: 0.75rem 0.875rem;
   font-size: 1rem;
   border: 1px solid #ccc;
   border-radius: 6px;

src/Components/Base/Input/Input.stories.jsx

@@ -13,7 +13,6 @@ export const Default = {
   args: {
     type: "text",
     placeholder: "Enter mobile number",
-    variant: "inputbox",
   },
   render: (args) => (
     <div>

src/Components/Base/Modal/Modal.module.css

@@ -27,25 +27,25 @@
 }
 
 .modalheading {
-  font-size: 24px;
+  font-size: 1.5rem;
   font-weight: 600;
   text-align: center;
   color: #1f2937;
-  margin-bottom: 16px;
+  margin-bottom: 1rem;
 }
 
 .modalform {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 1rem;
 
 }
 
 .modalselect {
   padding: 10px;
   border: 1px solid #d1d5db;
-  border-radius: 8px;
-  font-size: 16px;
+  border-radius: 0.5rem;
+  font-size: 1rem;
   outline: none;
   transition: border-color 0.3s;
   width: 100%;
@@ -59,10 +59,10 @@
 .modalbutton {
   background-color: #2563eb;
   color: white;
-  padding: 10px;
+  padding: 0.625rem;
   border: none;
-  border-radius: 8px;
-  font-size: 16px;
+  border-radius: 0.5rem;
+  font-size: 1rem;
   cursor: pointer;
   transition: background-color 0.3s;
 

src/Components/Base/Select/Select.jsx

@@ -5,7 +5,7 @@ export const Select = ({ label, options, value, onChange }) => {
     <div className={styles.container}>
       {label && <label className={styles.label}>{label}</label>}
       <select className={styles.select} value={value} onChange={onChange} >
-        {options.map((opt, index) => (
+        {(options || []).map((opt, index) => (
           <option key={index} value={opt.value} className={styles.option}>
             {opt.label}
           </option>

src/Components/Base/Select/Select.module.css

@@ -10,7 +10,18 @@
 }
 
 .select {
-  padding: 0.5rem;
+  padding: 0.6rem;
   font-size: 1rem;
   border-radius: 4px;
+  
+   appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  
+  background: url('data:image/svg+xml;utf8,<svg fill="black" height="12" viewBox="0 0 24 24" width="12" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>') 
+              no-repeat right 12px center;
+              
+  background-color: white;
+  
+  border-radius: 4px;
 }

src/Components/Form/Login/Login.module.css

@@ -15,14 +15,14 @@
   font-size: 1.7rem;
    font-family:'Segoe UI';
   color: black;
-  margin-bottom: 24px;
+  margin-bottom: 1.5rem;
   text-align: center;
 }
 
 .form {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 1rem;
 }
 
 .form input[type="text"]:focus {

src/Components/Form/Login/Login.stories.jsx

 import { Login } from "./Login";
 
 export default {
-  title: "Toplevel/Login",
+  title: "Form/Login",
   component: Login,
    parameters: {
     backgrounds: { default: 'light',value:'F8F8F8' }

src/Components/Form/SeatSelectForm/SeatSelectForm.module.css

@@ -24,10 +24,10 @@
 .modalbutton {
   background-color: #2563eb;
   color: white;
-  padding: 10px;
+  padding: 0.625rem;
   border: none;
-  border-radius: 8px;
-  font-size: 16px;
+  border-radius: 0.5rem;
+  font-size: 1rem;
   cursor: pointer;
   transition: background-color 0.3s;
 }

src/Components/Form/SeatSelectForm/SeatSelectForm.stories.jsx

+import React from "react";
+import { SeatSelectForm } from "../../Form/SeatSelectForm/SeatSelectForm.jsx";
+import { action } from "@storybook/addon-actions";
+
+const seatOptions = [
+  { value: 1, label: "1 Seat" },
+  { value: 2, label: "2 Seats" },
+  { value: 3, label: "3 Seats" },
+  { value: 4, label: "4 Seats" },
+  { value: 5, label: "5 Seats" },
+];
+
+export default {
+  title: "Form/SeatSelect",
+  component: SeatSelectForm,
+  args: {
+    seatOptions,
+
+    setSeatCount: action("Seat count changed"),
+    onClose: action("Continue clicked"),
+  },
+};
+
+export const seatSelectForm = (args) => (
+  <SeatSelectForm
+    {...args}
+  />
+);

src/Components/Form/SignUp/SignUp.stories.jsx

@@ -2,7 +2,7 @@ import { SignUp } from "./SignUp.jsx";
 import React from "react";
 
 export default {
-  title: "Toplevel/SignUp",
+  title: "Form/SignUp",
   component: SignUp,
   parameters: {
     backgrounds: {

src/Components/Top-level/Notification/Notification.module.css

-.logoutButton{
-display: flex;
-justify-content: flex-end;
-position: relative;
-top: 2rem;
-right: 1.5rem;
-color: white;
-font-size: 2rem;
+.logoutButton {
+  display: flex;
+  justify-content: flex-end;
+  position: relative;
+  top: 2rem;
+  right: 1.5rem;
+  color: white;
+  font-size: 2rem;
 }
+
 .container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin-top:12rem;
-    text-align: center;
-    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
-    animation: fadeIn 0.5s ease-in-out;
-    width: 100%;
-    height: 100%;
-}
-.button{
-    max-width: 12rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-top: 20rem;
+  text-align: center;
+  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
+  animation: fadeIn 0.5s ease-in-out;
+  width: 100%;
+  max-width: 25rem;
+  background-color: #eff0ef;
+  padding: 3rem;
+  border-radius: 2rem;
+  margin: 10rem auto;
 }
-.container:hover {
-    transform: scale(1.02);
-    opacity: 0.95;
+
+/* .container:hover {
+  transform: scale(1.02);
+  opacity: 0.95;
+} */
+
+.span {
+  font-size: 4rem;
+  margin-bottom: 0.5rem;
 }
 
 .title {
-    margin-bottom: 0.5em;
-    font-size: 1.5rem;
-    color:white;
-    font-weight: bold;
-    font-family: 'Segoe UI';
+  margin-bottom: 0.5em;
+  font-size: 1.5rem;
+  color: rgb(16, 15, 15);
+  font-weight: bold;
+  font-family: 'Segoe UI';
 }
 
-.span {
-    font-size: 4rem;
-    margin-bottom: 0.5rem;
+.msg {
+  font-size: 1.5rem;
+  color: rgb(16, 15, 15);
+  margin-top: 0.5rem;
+  line-height: 1.5;
+  font-family: 'Segoe UI';
+  font-weight: bold;
+  margin-bottom: 2rem;
 }
 
+
 .success {
-    color: #2ecc71; /* green */
+  color: #2ecc71;
+  width: 9.375rem; 
+  height: auto;
+  animation: rotate 1s linear, glow 7s ease-in-out alternate;
 }
 
 .error {
-    color: #e74c3c; /* red */
+  color: #e74c3c;
+  height:9.375rem;
+  width: 12.5rem;
 }
 
-.msg {
-    font-size: 1.5rem;
-    color:white;
-    margin-top: 0.5rem;
-    line-height: 1.5;
-     font-family: 'Segoe UI';
-     font-weight: bold;
-     margin-bottom: 2rem;
+.button {
+  max-width: 12rem;
+  width: 100%;
+  text-align: center;
 }
 
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-        transform: translateY(-20px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
+.button button {
+  width: 100%;
+  padding: 0.75rem 1.5rem;
+  background-color: #007bff;
+  color: white;
+  font-size: 1rem;
+  border: none;
+  border-radius: 0.5rem;
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color 0.3s ease-in-out, transform 0.2s;
 }
-.success {
-    width: 150px; 
-    height: auto;
-    animation: rotate 1s linear , glow 7s ease-in-out alternate;
+
+.button button:hover {
+  background-color: #0056b3;
+  transform: translateY(-2px);
 }
 
-@keyframes rotate {
-    0% {
-        transform: rotate(250deg);
-    }
-    100% {
-        transform: rotate(360deg);
-    }
+.button button:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);
 }
 
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotate(250deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
 
 @keyframes glow {
-    from {
-        filter: drop-shadow(0 0 5px #ffffff);
-    }
-    to {
-        filter: drop-shadow(0 0 20px #eff0ef);
-    }
+  from {
+    filter: drop-shadow(0 0 5px #ffffff);
+  }
+  to {
+    filter: drop-shadow(0 0 20px #eff0ef);
+  }
 }
-.error{
-    height: 150px;
-    width: 200px;
-}
\ No newline at end of file

src/Components/Top-level/Seat-legend/Legend.module.css

@@ -34,8 +34,8 @@
   justify-content: center;
   align-items: center;
    margin:0 auto;
-    margin-top: 15px;
-  gap: 35px;
+    margin-top: 1rem;
+  gap: 2.188px;
   width: 100%;
 /* 
   flex-direction: column; */
@@ -47,34 +47,34 @@
   display: inline-flex;
   align-items: center;
   gap: 3px;
-  font-size: 14px;
+  font-size: 0.875px;
   color: white;
   font-family: 'Segoe UI';
   font-weight: 500;
-  font-size: 13px;
+  font-size: 0.813rem;
 }
 @media(min-width:425px){
   .legend{
-    column-gap: 80px;
+    column-gap: 5rem;
   }
    .legendItem{
-    font-size: 15px;
+    font-size: 0.938rem;
    }
 }
 @media (min-width:640px) {
   .seat{
-    width: 10px;
-  height: 10px;
+    width: 0.625rem;
+  height: 0.625rem;
   }
   .legend{
     flex-direction: row;
-    column-gap: 150px;
+    column-gap: 9.375rem;
     justify-content: center;
     align-items: center;
     margin-bottom: 2rem;
   }
   .legendItem{
-    gap: 15px;
-    font-size: 20px;
+    gap: 0.938rem;
+    font-size: 1.25rem;
   }
 }

src/Components/Top-level/Seat/Seat.module.css

@@ -42,8 +42,8 @@
 
 .noSeat {
   display: inline-block;
-  width: 30px;
-  height: 30px;
+  width: 1.875rem;
+  height: 1.875rem;
   margin: 5px;
   cursor: context-menu;
   background: transparent;
@@ -63,15 +63,15 @@
 
 .seat::before {
   bottom: 150%;
-  margin-left: -30px;
+  margin-left: -1.875rem;
   padding: 5px;
-  width: 60px;
+  width: 3.75rem;
   border-radius: 3px;
   background-color: #f7f4f4;
   color: #080808;
   content: attr(data-tooltip);
   text-align: center;
-  font-size: 12px;
+  font-size: 0.75rem;
   line-height: 1.2;
 }
 
@@ -96,15 +96,15 @@
 }
  @media (min-width:425px){
     .seat{
-      width:23px;
-      height: 23px;
-      margin: 8px;
+      width:1.438rem;
+      height:1.438rem;
+      margin: 0.5rem;
     }
   }
 @media (min-width:640px){
   .seat{
-    width:27px;
-    height:27px;
+    width:1.688rem;
+    height:1.688rem;
     margin: 8px;
   }
  

src/Components/Top-level/SeatLayout/SeatLayout.module.css

@@ -42,7 +42,7 @@ margin-left: 1px;
  }
 @media (min-width:640px) {
  .seatcontainer{
-  gap: 8px;
+  gap: 0.5rem;
   padding: 2px 2px;
  }
   .container{

src/Components/Top-level/Seatselect/Selectseat.jsx

@@ -11,7 +11,7 @@ import { Modal } from "../../Base/Modal/Modal";
 import { SeatSelectForm } from "../../Form/SeatSelectForm/SeatSelectForm";
 import { Screen } from "../../Shared/Screen/Screen";
 import { AiOutlineLogout } from "react-icons/ai";
-
+import { useRef } from "react";
 export const Selectseat = ({ onLogout }) => {
   const [selectedSeats, setSelectedSeats] = useState([]);
   const [selectedData, setselectedData] = useState([]);
@@ -19,6 +19,8 @@ export const Selectseat = ({ onLogout }) => {
   const [seatCount, setSeatCount] = useState(1);
   const [availableSeats, setAvailableSeats] = useState(0);
   const [showSelect, setShowSelect] = useState(true);
+ 
+ const hasWelcomed = useRef(false);
 
   useEffect(() => {
     getAllUsers()
@@ -41,7 +43,11 @@ export const Selectseat = ({ onLogout }) => {
 
         if (userSeats.length > 0) {
           setSeatCount(userSeats.length);
-          setShowSelect(false); // skip modal for existing users
+          setShowSelect(false); 
+        }
+         if (currentUser?.name && !hasWelcomed.current) {
+          toast.success(`Welcome, ${currentUser.name}`);
+          hasWelcomed.current = true;
         }
       })
       .catch(err => {

src/db.json

@@ -21,8 +21,9 @@
         "B3",
         "B2",
         "B1",
-        "C5",
-        "D6"
+        "D6",
+        "D7",
+        "C7"
       ]
     },
     {
@@ -143,6 +144,13 @@
         "D1",
         "D2"
       ]
+    },
+    {
+      "id": "f129",
+      "name": "mani",
+      "email": "mani@gmail.com",
+      "phoneNumber": "8976543210",
+      "reservedSeats": []
     }
   ]
 }
\ No newline at end of file