legend wrapper spacing fix

db.json

@@ -23,6 +23,10 @@
     {
       "id": "5647",
       "email": "anas@krds.fr"
+    },
+    {
+      "id": "ad86",
+      "email": "test@gmail.com"
     }
   ],
   "selectedSeats": [
@@ -50,15 +54,15 @@
       "selected": [
         {
           "row": 8,
-          "seat": 1
+          "seat": 5
         },
         {
           "row": 8,
-          "seat": 2
+          "seat": 6
         },
         {
-          "row": 8,
-          "seat": 3
+          "row": 7,
+          "seat": 7
         }
       ]
     },
@@ -133,6 +137,20 @@
           "seat": 3
         }
       ]
+    },
+    {
+      "id": "ad86",
+      "userid": "ad86",
+      "selected": [
+        {
+          "row": 4,
+          "seat": 7
+        },
+        {
+          "row": 4,
+          "seat": 8
+        }
+      ]
     }
   ]
 }
\ No newline at end of file

src/components/Base/Button/Button.stories.jsx

@@ -16,19 +16,25 @@ export const Primary = {
       <>
         <h2 style={{ fontFamily: 'Poppins-Medium', color: 'white' }}>Size</h2>
         <Space>
-          <Button size={'sm'}>Small</Button>
-          <Button size={'md'}>Medium</Button>
-          <Button size={'lg'}>Large</Button>
+          <Button size={'sm'} variant="primary">
+            Small
+          </Button>
+          <Button size={'md'} variant="primary">
+            Medium
+          </Button>
+          <Button size={'lg'} variant="primary">
+            Large
+          </Button>
         </Space>
         <h2 style={{ fontFamily: 'Poppins-Medium', color: 'white' }}>Loader</h2>
         <Space>
-          <Button size={'sm'} loading={true}>
+          <Button size={'sm'} loading={true} variant="primary">
             Button
           </Button>
-          <Button size={'md'} loading={true}>
+          <Button size={'md'} loading={true} variant="primary">
             Button
           </Button>
-          <Button size={'lg'} loading={true}>
+          <Button size={'lg'} loading={true} variant="primary">
             Button
           </Button>
         </Space>
@@ -36,13 +42,13 @@ export const Primary = {
           Disabled
         </h2>
         <Space>
-          <Button size={'sm'} disabled={true}>
+          <Button size={'sm'} disabled={true} variant="primary">
             Button
           </Button>
-          <Button size={'md'} disabled={true}>
+          <Button size={'md'} disabled={true} variant="primary">
             Button
           </Button>
-          <Button size={'lg'} disabled={true}>
+          <Button size={'lg'} disabled={true} variant="primary">
             Button
           </Button>
         </Space>
@@ -50,13 +56,13 @@ export const Primary = {
           Loading & Disabled
         </h2>
         <Space>
-          <Button size={'sm'} disabled={true} loading={true}>
+          <Button size={'sm'} disabled={true} loading={true} variant="primary">
             Button
           </Button>
-          <Button size={'md'} disabled={true} loading={true}>
+          <Button size={'md'} disabled={true} loading={true} variant="primary">
             Button
           </Button>
-          <Button size={'lg'} disabled={true} loading={true}>
+          <Button size={'lg'} disabled={true} loading={true} variant="primary">
             Button
           </Button>
         </Space>

src/components/Base/Button/Index.jsx

@@ -9,9 +9,12 @@ const Button = ({ loading, size, disabled, children, variant, ...props }) => {
       }`}
       {...props}>
       {loading && (
+        <>
           <div className={`${styles.loader} ${styles[`loader-${size}`]}`}></div>
+          <span>please wait...</span>
+        </>
       )}
-      {children}
+      {!loading && children}
     </button>
   );
 };
@@ -22,5 +25,6 @@ Button.propTypes = {
   children: PropTypes.node.isRequired,
   disabled: PropTypes.bool,
   size: PropTypes.string,
-  loading: PropTypes.bool
+  loading: PropTypes.bool,
+  variant: PropTypes.oneOf(['primary', 'secondary'])
 };

src/components/Base/Button/styles.module.css

@@ -92,3 +92,8 @@
     transform: rotate(360deg);
   }
 }
+
+.button:has(.loader) {
+  opacity: 0.4;
+  pointer-events: none;
+}

src/components/Base/Input/Index.jsx

@@ -21,10 +21,9 @@ const Input = ({ name, label, error = '', ...inputPprops }) => {
 };
 
 Input.propTypes = {
-  onChange: PropTypes.func.isRequired,
-  type: PropTypes.string,
-  value: PropTypes.string,
-  placeholder: PropTypes.string
+  label: PropTypes.string,
+  name: PropTypes.string,
+  error: PropTypes.string
 };
 
 export default Input;

src/components/Base/Input/Input.stories.jsx

 import Input from './Index';
 export default {
-    title: "component/Base/Input",
-    tags: ["autodocs"],
+  title: 'component/Base/Input',
+  tags: ['autodocs'],
   component: Input,
   argTypes: {
-        onChange: { action: "changing" },
-        type: {
-            control: {
-                type: 'select'
-            },
-            options: ["text", "number"]
+    onChange: { action: 'changing' }
   }
-    }
-}
+};
 
 export const Default = {
   args: {
-        placeholder: "Placeholder",
-
+    placeholder: 'Placeholder'
   }
-}
\ No newline at end of file
+};

src/components/Base/Input/styles.module.css

@@ -19,3 +19,8 @@
   border: none;
   outline: none;
 }
+
+.errorText {
+  color: red;
+  font-family: 'Inter-Medium';
+}

src/components/Base/Legend/styles.module.css

@@ -9,7 +9,7 @@
   width: 15px;
   height: 15px;
   border-radius: 50%;
-  background-color: rgb(151, 155, 155);
+  background-color: rgb(108, 91, 133);
 }
 
 .available {

src/components/Layout/BookingWrapper/BookingWrapper.stories.jsx

@@ -5,7 +5,8 @@ export default {
   component: BookingWrapper,
   argTypes: {
     onSeatAdd: { action: 'Seat Add' },
-    onSeatRemove: { action: 'Seat Remove' }
+    onSeatRemove: { action: 'Seat Remove' },
+    onSeatsConfirm: { action: 'seat confirm' }
   }
 };
 

src/components/Layout/BookingWrapper/Index.jsx

@@ -109,5 +109,5 @@ BookingWrapper.propTypes = {
   onSeatAdd: PropTypes.func.isRequired,
   onSeatRemove: PropTypes.func.isRequired,
   onSeatsConfirm: PropTypes.func.isRequired,
-  buttonState: PropTypes.bool.isRequired
+  isDisabled: PropTypes.bool.isRequired
 };

src/components/Layout/BookingWrapper/styles.module.css

@@ -48,13 +48,13 @@
 }
 
 .btn-wrapper {
-  padding: 1.5em 0;
+  padding-top: 3rem;
 }
 
 @media screen and (min-width: 768px) {
   .seat {
-    width: 1.8em;
-    height: 1.8em;
+    width: 1.6em;
+    height: 1.6em;
   }
 
   .seat-row {

src/components/TopLevel/LegendWrapper/Index.jsx

@@ -3,10 +3,12 @@ import styles from './styles.module.css';
 const LegendWrapper = (props) => {
   return (
     <div className={styles.LegendWrapper}>
+      <div className={styles.columnWrapper}>
         <Legend type="selected">Selected</Legend>
         <Legend type="reserved">Reserved</Legend>
         <Legend type="available">Available</Legend>
       </div>
+    </div>
   );
 };
 

src/components/TopLevel/LegendWrapper/styles.module.css

 .LegendWrapper {
+  gap: 1rem;
+  background-color: #3444c5;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  height: max(12vh, 70px);
+}
+
+.columnWrapper {
   display: flex;
   gap: 1rem;
   justify-content: center;
@@ -7,7 +17,7 @@
 }
 
 @media screen and (min-width: 768px) {
-  .LegendWrapper {
+  .columnWrapper {
     gap: 4rem;
   }
 }

src/components/TopLevel/Login/Index.jsx

@@ -2,13 +2,24 @@ import PropTypes from 'prop-types';
 import Input from '@Base/Input/Index';
 import Button from '@Base/Button/Index';
 import styles from './styles.module.css';
+import { useState } from 'react';
 
 const Login = ({ onSubmit }) => {
-  const handleSubmit = (e) => {
+  const [isLoading, setIsLoading] = useState(false);
+  const handleSubmit = async (e) => {
     e.preventDefault();
     const formData = new FormData(e.target);
     const data = { ...Object.fromEntries(formData) };
+    const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (regex.test(data.email)) {
+      setIsLoading(true);
+      setTimeout(() => {
+        setIsLoading(false);
         onSubmit(data?.email);
+      }, 1000);
+    } else {
+      return;
+    }
   };
 
   return (
@@ -27,7 +38,9 @@ const Login = ({ onSubmit }) => {
             type="email"
             placeholder="Enter email"
           />
-          <Button size={'md'}>Confirm</Button>
+          <Button size={'md'} loading={isLoading}>
+            Confirm
+          </Button>
         </form>
       </section>
     </div>