code refactor done

db.json

@@ -15,6 +15,14 @@
     {
       "id": "e770",
       "email": "new@gmail.com"
+    },
+    {
+      "id": "5f85",
+      "email": "test@krds.fr"
+    },
+    {
+      "id": "5647",
+      "email": "anas@krds.fr"
     }
   ],
   "selectedSeats": [
@@ -75,6 +83,42 @@
           "seat": 4
         }
       ]
+    },
+    {
+      "id": "5f85",
+      "userid": "5f85",
+      "selected": [
+        {
+          "row": 4,
+          "seat": 7
+        },
+        {
+          "row": 4,
+          "seat": 8
+        },
+        {
+          "row": 4,
+          "seat": 5
+        },
+        {
+          "row": 4,
+          "seat": 6
+        }
+      ]
+    },
+    {
+      "id": "5647",
+      "userid": "5647",
+      "selected": [
+        {
+          "row": 7,
+          "seat": 8
+        },
+        {
+          "row": 7,
+          "seat": 6
+        }
+      ]
     }
   ]
 }
\ No newline at end of file

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

@@ -11,7 +11,6 @@
   justify-content: center;
   font-size: 1rem;
   box-sizing: border-box;
-  /* flex: 1; */
 }
 
 .primary {

src/components/Base/Input/Index.jsx

 import PropTypes from 'prop-types';
 import styles from './styles.module.css';
 
-const Input = ({ 
-    type = 'text',
-    name,
-    value,
-    onChange,
-    label,
-    placeholder = '',
-    disabled = false,
-    error = '',
-    ...inputPprops 
-}) => {
+const Input = ({ name, label, error = '', ...inputPprops }) => {
   return (
     <div className={styles.inputWrapper}>
-            {label && <label htmlFor={name} className={styles.label}>{label}</label>}
+      {label && (
+        <label htmlFor={name} className={styles.label}>
+          {label}
+        </label>
+      )}
       <input
-                type={type}
         name={name}
         id={name}
-                value={value}
-                placeholder={placeholder}
-                onChange={onChange}
-                disabled={disabled}
         className={`${styles.input} ${error ? styles.errorInput : ''}`}
         {...inputPprops}
       />
       {error && <p className={styles.errorText}>{error}</p>}
     </div>
-        // <input className={styles.input} {...inputPprops} />
-    )
-}
+  );
+};
 
 Input.propTypes = {
   onChange: PropTypes.func.isRequired,
   type: PropTypes.string,
   value: PropTypes.string,
   placeholder: PropTypes.string
-}
+};
 
 export default Input;

src/components/Base/Legend/Index.jsx

 import styles from './styles.module.css';
 import PropTypes from 'prop-types';
 
-const Legend = ({ children, type="available" }) => {
-
+const Legend = ({ children, type = 'available' }) => {
   return (
     <div className={styles['legend-wrapper']}>
       <div className={styles[type]}></div>
       <div className={styles.title}>{children}</div>
     </div>
-  )
-}
+  );
+};
 Legend.propTypes = {
-  // children: PropTypes.node,
-  type: PropTypes.oneOf(["selected", "reserved", "available"])
-}
+  children: PropTypes.node.isRequired,
+  type: PropTypes.oneOf(['selected', 'reserved', 'available'])
+};
 export default Legend;
-

src/components/Base/Legend/Legend.stories.jsx

-import Legend from "./Index"
+import Legend from './Index';
 
 export default {
-    title: "Component/Base/Legend",
-    tags: ["autodocs"],
+  title: 'Component/Base/Legend',
+  tags: ['autodocs'],
   component: Legend,
   argTypes: {
     type: {
       control: { type: 'select' },
       options: ['available', 'reserved', 'selected'],
-            description: "Seat's status",
-
-        },
+      description: "Seat's status"
     },
-}
-
-const getStoryTitle = (type) => {
-    switch (type) {
-        case 'selected':
-            return "Selected";
-        case 'reserved':
-            return 'Reserved';
-        case 'available':
-            return 'Available';
-        default:
-            return "Available"
+    children: {
+      control: 'text',
+      description: 'Content inside the Legent (usually a title)'
     }
-}
-
-export const Default = {
-    args:{
-        type: "available"
-    },
-    render: (args) => {
-        return <Legend type={args.type}>{getStoryTitle(args.type)}</Legend>
   }
 };
 
+const Template = (args) => <Legend {...args} />;
 
+export const Default = Template.bind({});
+Default.args = {
+  type: 'available',
+  children: 'Available'
+};

src/components/Base/Typography/Index.jsx

-import styles from './styles.module.css';
-
-const Typography = ({ children }) => {
-   return (
-      <div>{children}</div>
-   )
-}
-
-export default Typography;
\ No newline at end of file

src/components/Base/Typography/Typography.stories.jsx

-import Typography from "./Index"
-
-
 export default {
-   title: "component/Base/Typography",
-   tags: ["autodocs"],
-   component: Typography
-}
+  title: 'component/Base/Typography',
+  tags: ['autodocs']
+};
 
 export const Default = {
   render: () => {
     return (
-         <div style={{color: 'white',  fontFamily:'Poppins-Medium', fontWeight: "400"}}>
+      <div
+        style={{
+          color: 'white',
+          fontFamily: 'Poppins-Medium',
+          fontWeight: '400'
+        }}>
         <h1>Heading 1</h1>
         <h2>Heading 2</h2>
         <h3>Heading 3</h3>
         <h4>Heading 4</h4>
         <h5>Heading 5</h5>
         <h6>Heading 6</h6>
-            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate, velit!</p>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate,
+          velit!
+        </p>
       </div>
-      )
+    );
   }
-}
+};
\ No newline at end of file

src/components/Layout/Header/Index.jsx

@@ -6,7 +6,7 @@ const Header = ({ children }) => {
     <section className={styles['header-wrapper']}>
       <div className={styles.title}>{children}</div>
       <div className={styles.screenWrapper}>
-        <svg viewBox="0 20 480 130" xmlns="http://www.w3.org/2000/svg">
+        {/* <svg viewBox="0 20 480 130" xmlns="http://www.w3.org/2000/svg">
           <path
             d="M 30 70 Q 240 20 450 70"
             stroke="white"
@@ -60,6 +60,58 @@ const Header = ({ children }) => {
             fill="url(#glowColor)"
             mask="url(#glowMask)"
           />
+        </svg> */}
+        <svg viewBox="0 20 480 130" xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="M 30 70 Q 240 20 450 70"
+            stroke="white"
+            stroke-width="3"
+            fill="none"
+          />
+
+          <defs>
+            <mask id="glowMask">
+              <linearGradient
+                id="fadeGradient"
+                x1="0"
+                y1="70"
+                x2="0"
+                y2="150"
+                gradientUnits="userSpaceOnUse">
+                <stop offset="0%" stop-color="#9c6ad5" stop-opacity="1" />
+                <stop offset="60%" stop-color="#9c6ad5" stop-opacity="1" />
+                <stop offset="100%" stop-color="#9c6ad5" stop-opacity="1" />
+              </linearGradient>
+
+              <path
+                d="
+          M 30 70
+          Q 240 20 450 70
+          L 480 150
+          L 0 150
+          Z"
+                fill="url(#fadeGradient)"
+              />
+            </mask>
+
+            <linearGradient
+              id="glowColor"
+              x1="0"
+              y1="100"
+              x2="0"
+              y2="150"
+              gradientUnits="userSpaceOnUse">
+              <stop offset="0%" stop-color="#9c6ad5" stop-opacity="0.4" />
+              <stop offset="50%" stop-color="#9c6ad5" stop-opacity="0.2" />
+              <stop offset="100%" stop-color="#9c6ad5" stop-opacity="0" />
+            </linearGradient>
+          </defs>
+
+          <path
+            d="M 30 70 Q 240 20 450 70 L 480 150 L 0 150 Z"
+            fill="url(#glowColor)"
+            mask="url(#glowMask)"
+          />
         </svg>
       </div>
     </section>

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

@@ -16,6 +16,20 @@
   width: 50%;
   min-width: 300px;
 }
+.clipped-glow {
+  width: 500px;
+  height: 150px;
+  background: linear-gradient(
+    to bottom,
+    #9c6ad5 40%,
+    #9c6ad5aa 20%,
+    transparent 100%
+  );
+  clip-path: path('M 30 70 Q 240 20 450 70 L 500 150 L -20 150 Z');
+  -webkit-clip-path: path('M 30 70 Q 240 20 450 70 L 500 150 L -20 150 Z');
+  position: relative;
+  z-index: 0;
+}
 
 @media screen and (min-width: 768px) {
   .title {
@@ -26,7 +40,7 @@
 
   .screenWrapper {
     width: 30% !important;
-    max-width: 30%;
+    max-width: 20%;
     min-width: 400px;
   }
 

src/components/Shared/LogoutButton/LogoutButton.stories.jsx

+import img from '../../../assets/images/power-button_12080802.png';
+
+export default {
+  title: 'component/Shared/LogoutButton'
+  //   tags: ['autodocs']
+};
+
+export const Default = {
+  args: {},
+  render: () => (
+    <>
+      <img src={img} title="logout" width={50} />
+    </>
+  )
+};

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

 .btn-wrapper {
   display: flex;
   gap: 1rem;
-  /* margin: 1rem 0; */
   justify-content: end;
 }
 

src/components/TopLevel/LegendWrapper/Index.jsx

 import styles from './styles.module.css';
-import Legend from '../../Base/Legend/Index'
+import Legend from '../../Base/Legend/Index';
 const LegendWrapper = (props) => {
-
-    const legendData = [
-        {
-            id: 1,
-            label: "Selected",
-            status: 'selected'
-        },
-        {
-            id: 2,
-            label: "Reserved",
-            status: "reserved"
-        },
-        {
-            id: 3,
-            label: "Available",
-            status: "available"
-        }
-    ]
-
   return (
     <div className={styles.LegendWrapper}>
-            {legendData.map((ele) => (
-                <Legend type={ele.status}>{ele.label}</Legend>
-            ))}
+      <Legend type="selected">Selected</Legend>
+      <Legend type="reserved">Reserved</Legend>
+      <Legend type="available">Available</Legend>
     </div>
-    )
-}
+  );
+};
 
 export default LegendWrapper;
-

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

 .LegendWrapper {
   display: flex;
   background-color: #3444c5;
-  /* height: 70px; */
-  /* position: fixed; */
-  right: 0;
-  left: 0;
-  bottom: 0;
   gap: 1rem;
   justify-content: center;
   padding: 1em 0;
-  /* border: 2px solid red */
 }
 
 @media screen and (min-width: 768px) {

src/components/TopLevel/Login/Index.jsx

@@ -20,7 +20,7 @@ const Login = ({ onSubmit }) => {
             Login with email and passoword to book seats.
           </div>
         </div>
-        <form className={styles.formWrapper} onSubmit={(e) => handleSubmit(e)}>
+        <form className={styles.formWrapper} onSubmit={handleSubmit}>
           <Input
             label="Email"
             name="email"

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

@@ -11,21 +11,6 @@
   background-color: #3444c5;
 }
 
-/* .bg::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background-image: url('/src/assets/images/background.png');
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  filter: blur(3px);
-  z-index: -1;
-  height: 100%;
-  height: 100vh;
-  width: 100%;
-} */
-
 .container {
   box-sizing: border-box;
   position: relative;

src/components/TopLevel/SeatSelectionContent/Index.jsx

@@ -3,8 +3,20 @@ import Button from '../../Base/Button/Index';
 import Modal from '../../Shared/Modal/Index';
 import styles from './styles.module.css';
 import PropTypes from 'prop-types';
+import { useState } from 'react';
 
 const Index = ({ onChange, onConfirm, disabled }) => {
+  const [isDisabled, setIsDisabled] = useState(true);
+
+  const handleInputChange = (e) => {
+    onChange(e.target.value);
+    if (e.target.value) {
+      setIsDisabled(false);
+    } else {
+      setIsDisabled(true);
+    }
+  };
+
   return (
     <Modal>
       <h2 className={styles['modal-title']}>Select Your Seats</h2>
@@ -17,10 +29,10 @@ const Index = ({ onChange, onConfirm, disabled }) => {
         type="number"
         max="10"
         min="1"
-        onChange={(e) => onChange(e.target.value)}
+        onChange={handleInputChange}
       />
       <div className={`${styles['btn-wrapper']} ${styles['flex-direction']}`}>
-        <Button size={'md'} onClick={onConfirm} disabled={disabled}>
+        <Button size={'md'} onClick={onConfirm} disabled={isDisabled}>
           Confirm
         </Button>
       </div>

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

 .btn-wrapper {
   display: flex;
-  /* justify-content: flex-end; */
   flex-direction: column;
   gap: 1rem;
   margin: 1rem 0;

src/components/TopLevel/SuccessModal/Index.jsx

@@ -19,7 +19,7 @@ const SuccessModal = ({ onConfirm }) => {
     <Modal>
       <div className={styles['content-wrapper']}>
         <div className={styles['btn-wrapper']}>
-          {showMessage && <p>Booked Successfully</p>}
+          {showMessage && <h3>Booked Successfully</h3>}
         </div>
         <Lottie
           className={styles.lottieSvg}
@@ -27,11 +27,13 @@ const SuccessModal = ({ onConfirm }) => {
           loop={false}
           autoplay={true}
         />
+        {showMessage && (
           <div className={styles['btn-wrapper']}>
             <Button size={'md'} onClick={onConfirm}>
-            Go Back
+              Edit Seats
             </Button>
           </div>
+        )}
       </div>
     </Modal>
   );

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

 .content-wrapper {
-  height: 300px;
+  max-height: 300px;
+  box-sizing: border-box;
+  padding: 1rem;
 }
 .btn-wrapper {
   display: flex;
@@ -7,5 +9,10 @@
 }
 .lottieSvg {
   width: 100%;
-  height: 60%;
+  height: 200px;
+}
+
+.btn-wrapper h3 {
+  margin: 0;
+  font-family: 'Poppins-Medium';
 }