my commit

src/App.jsx

@@ -5,7 +5,7 @@ import { Success } from '../src/Components/Top-level/Response/Success/Success.js
 import './App.css';
 import { AuthPage } from './Pages/AuthPage.jsx';
 import { ProtectedRoute } from './auth/ProtectedRoute.jsx';
-import { Logoutpage } from './Pages/Logoutpage.jsx';
+import { Bookingpage } from './Pages/BookingPage.jsx';
 
 export const App = () => {
   return (
@@ -16,7 +16,7 @@ export const App = () => {
           path="/select-seat"
           element={
             <ProtectedRoute>
-              <Logoutpage/>
+              <Bookingpage/>
             </ProtectedRoute>
           }
         />

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

@@ -88,7 +88,7 @@
 }
 
 .secondary:disabled {
-  background-color: #cdcaca;
+  background-color: #979595;
   cursor: not-allowed;
 }
 

src/Components/Base/Screen/Screen.jsx

@@ -11,6 +11,6 @@ export const Screen = ({ width = 600, height = 210 }) => (
       </defs>
       <path d="M30 60 Q150 36 270 60 L285 130 L10 130 Z" fill="url(#lightGradient)" />
       <path d="M30 60 Q150 36 270 60" stroke="#fff" strokeWidth="2" fill="none" strokeLinecap="round" />
-    </svg>
+    </svg>  
   </div>
 );

src/Components/Base/Screen/Screen.module.css

@@ -6,5 +6,9 @@
    min-width: 30rem;
    position: relative;
    bottom: 1rem;
-
+}
+@media(min-width:320px){
+    .shadow{
+        min-width: 15rem;
+    }
 }
\ No newline at end of file

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

 
 .seat {
   display: inline-block;
-  width: 10px;
-  height: 10px;
+  width: 7px;
+  height: 7px;
   background-color: transparent;
   border: 2px solid #ccc;
   border-radius: 15px;
@@ -46,19 +46,35 @@
 .legendItem {
   display: inline-flex;
   align-items: center;
-  gap: 10px;
+  gap: 3px;
   font-size: 14px;
   color: white;
   font-family: 'Segoe UI';
   font-weight: 500;
-  font-size: 17px;
+  font-size: 13px;
+}
+@media(min-width:425px){
+  .legend{
+    column-gap: 80px;
+  }
+   .legendItem{
+    font-size: 15px;
+   }
 }
 @media (min-width:640px) {
+  .seat{
+    width: 10px;
+  height: 10px;
+  }
   .legend{
     flex-direction: row;
-    /* column-gap: 0; */
     column-gap: 150px;
     justify-content: center;
     align-items: center;
+    margin-bottom: 2rem;
   }
-}
+  .legendItem{
\ No newline at end of file
+    gap: 15px;
+    font-size: 20px;
+  }
+}

src/Components/Top-level/Seat/Seat.jsx

@@ -8,6 +8,7 @@ export const Seat = ({ seatNo, status, onClick }) => {
     [styles.available]: status === 'available',
     [styles.reserved]: status === 'reserved',
     [styles.selected]: status === 'selected',
+    [styles.mine]:status === 'mine',
   });
 
   return (

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

@@ -2,10 +2,10 @@
   display: inline-block;
   background-color: transparent;
   border: 0.5px solid rgba(164,175,255,255);         
-  width: 27px;                     
-  height: 27px;                     
+  width: 18px;                     
+  height: 18px;                     
   border-radius: 5px;
-  margin: 8px;                      
+  margin: 6px;                      
   cursor: pointer;
   transition: transform 0.2s ease-in-out;
   position: relative;
@@ -26,6 +26,9 @@
 .reserved {
   background-color:#5b66cb;
 }
+.mine{
+  background-color: white;
+}
 
 .reserved:hover {
   transform: none;
@@ -86,3 +89,19 @@
   visibility: visible;
   opacity: 1;
 }
+ @media (min-width:425px){
+    .seat{
+      width:23px;
+      height: 23px;
+      margin: 8px;
+    }
+  }
+@media (min-width:640px){
+  .seat{
+    width:27px;
+    height:27px;
+    margin: 8px;
+  }
+ 
+}
+

src/Components/Top-level/SeatLayout/SeatLayout.jsx

@@ -67,7 +67,7 @@ export const SeatLayout = ({
  console.log(selectedSeats);
   return (
     <div className={styles.container}>
-      <div>
+  
         {renderedSeats.map((rowSeats, i) => (
           <div key={i} className={styles.seatcontainer}>
             {rowSeats.map((seat, j) => (
@@ -75,7 +75,7 @@ export const SeatLayout = ({
             ))}
           </div>
         ))}
-      </div>
+     
     </div>
   );
 };

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

 .container{
     display: flex;
     justify-content: center;
+    flex-direction: column;
+    align-items: center;
     margin-bottom: 5rem;
+    width: 100%;
+  overflow-x: auto;
 
 }
 .seatcontainer {
   display: flex;
   align-items: center;
   margin-bottom: 4px;
-  gap: 8px;
-  padding: 2px 2px;
+  gap:1px;
+  padding: 1px 1px;
 
 }
 
-.seatcontainer:last-child{
-  margin-left:8px;
-}
-.seatcontainer:first-child{
-  margin-left: 4px;
-}
+
 /* .seats {
   width: 23px;
   height: 23px;
@@ -29,10 +28,33 @@
   border: 2px solid #999;
 
 } */
-@media (max-width:640px) {
+ @media(min-width:425px){
+  .container{
+    align-items:center;
+  }
+   /* .seatcontainer:last-child{
+  margin-left:1px;
+
+}
+.seatcontainer:first-child{
+margin-left: 1px;
+} */
+ }
+@media (min-width:640px) {
  .seatcontainer{
-  gap: 3px;
-  padding: 1px 1px;
+  gap: 8px;
+  padding: 2px 2px;
  }
-  
-}
+  .container{
+     display: flex;
\ No newline at end of file
+     justify-content: center;
+     align-items: center;
+  }
+  /* .seatcontainer:last-child{
+  margin-left:1px;
+
+}
+.seatcontainer:first-child{
+margin-left: 1px;
+} */
+}

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

@@ -129,7 +129,7 @@ export const Selectseat = ({onLogout}) => {
         </div>
 
         <div className={styles.button}>
-          <Button variant="secondary" label="Confirm" size='md' onClick={confirmHandler} />
+          <Button variant="secondary" label="Confirm" size='md' onClick={confirmHandler} disabled={selectedSeats.length!=seatCount}/>
         </div>
 
         <div className={styles.legend}>

src/Components/Top-level/Seatselect/Selectseat.module.css

@@ -18,9 +18,8 @@ body {
   position: relative;
   top:1rem;
   text-align: center;
-  margin-top: 1rem;
   color: white;
-  font-size: 2.3em;
+  font-size:2em;
   padding: 0 1rem;
 }
 
@@ -28,7 +27,7 @@ body {
   display: flex;
   justify-content: center;
   position: relative;
-  bottom: 5rem;
+  bottom: 4rem;
   padding: 0 1rem;
 
 }
@@ -131,7 +130,9 @@ position: relative;
 top: 2rem;
 right: 1.5rem;
 color: white;
-font-size: 2rem;
+font-size: 1.5rem;
+z-index: 1001;
+cursor:pointer;
 }
 
   /* .legend {
@@ -140,6 +141,13 @@ font-size: 2rem;
 
 @media (min-width:640px){
   .text{
+    position: relative;
+    top:1rem;
     text-align: center;
+   font-size: 2.3em;
   }
+  .logoutButton{
+    font-size:2rem;
+  }
+ 
 }
\ No newline at end of file

src/Components/Typography.stories.jsx

@@ -4,7 +4,6 @@ export default {
 
 export const TitleAndParagraph = () => (
   <div className="container">
-
       <h1>Heading</h1>
       <h2>Heading</h2>
       <h3>Heading</h3>

src/Pages/Auth/Auth.stories.jsx

-import { AuthPage } from "../AuthPage"
-export default{
-    title:'Auth/Auth',
-    component:AuthPage,
-    argTypes: {
-    onClick: {
-      action: "clicked",
-    },
-  },
-}
-export const Default=(args)=><AuthPage {...args}/>
+// Auth.stories.jsx
+import { Auth } from "../Auth/Auth.jsx";
+import {Login} from '../../Components/Form/Login/Login.jsx'
+import { SignUp } from "../../Components/Form/SignUp/SignUp.jsx";
+export default {
+  title: "Auth/Auth",
+  component: Auth,
+};
+
+const DummyLogin = ({ onLogin }) => (
+  <div>
\ No newline at end of file
+    <Login/>
+  </div>
+);
+
+const DummySignUp = ({ onSubmit }) => (
+  <div>
+  <SignUp/>
+  </div>
+);
+
+export const Default = () => (
+  <Auth
+    LoginComponent={DummyLogin}
+    SignUpComponent={DummySignUp}
+    onLoginSubmit={(data) => console.log("Login Submit:", data)}
+    onSignUpSubmit={() => console.log("SignUp Submit")}
+  />
+);

src/Pages/Logoutpage.jsx → src/Pages/BookingPage.jsx

 import { Selectseat } from "../Components/Top-level/Seatselect/Selectseat";
 import { logout } from "../auth/authService";
 
-export const Logoutpage = () => {
+export const Bookingpage = () => {
   const onLogout = () => {
     logout(); 
     

src/db.json

@@ -8,7 +8,9 @@
         "G3",
         "F3",
         "F4",
-        "G2"
+        "G2",
+        "C2",
+        "C8"
       ]
     },
     {
@@ -16,14 +18,15 @@
       "phoneNumber": "9361775481",
       "name": "mani",
       "reservedSeats": [
-        "B8",
-        "B7",
-        "B6",
-        "D5",
-        "B4",
-        "B3",
-        "E7"
+        "C4"
       ]
+    },
+    {
+      "id": "cbc2",
+      "name": "mani",
+      "email": "mani@gmail.com",
+      "phoneNumber": "9934782103",
+      "reservedSeats": []
     }
   ]
 }
\ No newline at end of file