From 08ed0dfcee0a8698bfff56625d83af5d4672740b Mon Sep 17 00:00:00 2001
From: Tanmayi Manku <tanmayitanum@gmail.com>
Date: Thu, 14 Dec 2023 21:24:42 +0530
Subject: [PATCH 1/3] Update test cases

---
 src/__tests__/MyReservationsList.test.js      | 44 ++++++-------------
 .../__snapshots__/AddNewCar.test.js.snap      | 30 ++++++-------
 .../MyReservationsList.test.js.snap           | 18 ++++++++
 .../__snapshots__/SignIn.test.js.snap         | 12 ++---
 .../__snapshots__/SignUp.test.js.snap         | 20 ++++-----
 .../MyReservations/EachReservation.js         | 13 ++++++
 .../MyReservations/MyReservationsList.js      | 12 +++--
 7 files changed, 79 insertions(+), 70 deletions(-)
 create mode 100644 src/components/MyReservations/EachReservation.js

diff --git a/src/__tests__/MyReservationsList.test.js b/src/__tests__/MyReservationsList.test.js
index d9896c3..ba3dae6 100644
--- a/src/__tests__/MyReservationsList.test.js
+++ b/src/__tests__/MyReservationsList.test.js
@@ -1,44 +1,26 @@
-import '@testing-library/jest-dom';
-import { render } from '@testing-library/react';
 import React from 'react';
-import { MemoryRouter } from 'react-router-dom';
+import { render } from '@testing-library/react';
+import EachReservation from 'components/MyReservations/EachReservation';
 import { Provider } from 'react-redux';
-import configureMockStore from 'redux-mock-store';
-import MyReservations from '../pages/LandingPage/MyReservation/MyReservation';
-
-const mockStore = configureMockStore();
+import store from 'redux/store';
+import { MemoryRouter } from 'react-router-dom';
 
-describe('MyReservations Component', () => {
-  it('renders reservations present', () => {
-    const store = mockStore({
-      authentication: {
-        authenticatedUser: {
-          username: 'testuser',
-        },
-        status: 'succeeded',
-      },
-      reservation: {
-        reservations: [
-          {
-            date: '2023-10-10',
-            city: 'City A',
-          },
-          {
-            date: '2022-11-11',
-            city: 'City B',
-          },
-        ],
-      },
-    });
+describe('EachReservation Component', () => {
+  it('renders reservation details', () => {
+    const reservation = {
+      id: 1,
+      car: { name: 'Test Car' },
+      date: '2023-01-01',
+      city: 'Test City',
+    };
 
     const { container } = render(
       <Provider store={store}>
         <MemoryRouter>
-          <MyReservations />
+          <EachReservation reservation={reservation} />
         </MemoryRouter>
       </Provider>,
     );
-
     expect(container).toMatchSnapshot();
   });
 });
diff --git a/src/__tests__/__snapshots__/AddNewCar.test.js.snap b/src/__tests__/__snapshots__/AddNewCar.test.js.snap
index e76755e..cc205c6 100644
--- a/src/__tests__/__snapshots__/AddNewCar.test.js.snap
+++ b/src/__tests__/__snapshots__/AddNewCar.test.js.snap
@@ -10,7 +10,7 @@ Object {
         class="add-new-car css-i51pdu"
       >
         <div
-          class="add-new-string css-1oq5xzy"
+          class="add-new-string css-5zoda1"
         >
           <label
             class="css-1mcvbvm"
@@ -29,7 +29,7 @@ Object {
           </div>
         </div>
         <div
-          class="add-new-string css-1oq5xzy"
+          class="add-new-string css-5zoda1"
         >
           <label
             class="css-1mcvbvm"
@@ -48,7 +48,7 @@ Object {
           </div>
         </div>
         <div
-          class="add-new-string css-1oq5xzy"
+          class="add-new-string css-5zoda1"
         >
           <label
             class="css-1mcvbvm"
@@ -67,7 +67,7 @@ Object {
           </div>
         </div>
         <div
-          class="add-new-string css-1oq5xzy"
+          class="add-new-string css-5zoda1"
         >
           <label
             class="css-1mcvbvm"
@@ -86,7 +86,7 @@ Object {
           </div>
         </div>
         <div
-          class="add-new-string css-1oq5xzy"
+          class="add-new-string css-5zoda1"
         >
           <label
             class="css-1mcvbvm"
@@ -105,7 +105,7 @@ Object {
           </div>
         </div>
         <div
-          class="add-new-string css-1ssprdq"
+          class="add-new-string css-md1mko"
         >
           <label
             class="css-1mcvbvm"
@@ -113,10 +113,9 @@ Object {
             Add Image of Car
           </label>
           <input
+            accept="image/*"
             class="css-iz78xn"
-            name="Add Image"
             type="file"
-            value=""
           />
         </div>
         <button
@@ -134,7 +133,7 @@ Object {
       class="add-new-car css-i51pdu"
     >
       <div
-        class="add-new-string css-1oq5xzy"
+        class="add-new-string css-5zoda1"
       >
         <label
           class="css-1mcvbvm"
@@ -153,7 +152,7 @@ Object {
         </div>
       </div>
       <div
-        class="add-new-string css-1oq5xzy"
+        class="add-new-string css-5zoda1"
       >
         <label
           class="css-1mcvbvm"
@@ -172,7 +171,7 @@ Object {
         </div>
       </div>
       <div
-        class="add-new-string css-1oq5xzy"
+        class="add-new-string css-5zoda1"
       >
         <label
           class="css-1mcvbvm"
@@ -191,7 +190,7 @@ Object {
         </div>
       </div>
       <div
-        class="add-new-string css-1oq5xzy"
+        class="add-new-string css-5zoda1"
       >
         <label
           class="css-1mcvbvm"
@@ -210,7 +209,7 @@ Object {
         </div>
       </div>
       <div
-        class="add-new-string css-1oq5xzy"
+        class="add-new-string css-5zoda1"
       >
         <label
           class="css-1mcvbvm"
@@ -229,7 +228,7 @@ Object {
         </div>
       </div>
       <div
-        class="add-new-string css-1ssprdq"
+        class="add-new-string css-md1mko"
       >
         <label
           class="css-1mcvbvm"
@@ -237,10 +236,9 @@ Object {
           Add Image of Car
         </label>
         <input
+          accept="image/*"
           class="css-iz78xn"
-          name="Add Image"
           type="file"
-          value=""
         />
       </div>
       <button
diff --git a/src/__tests__/__snapshots__/MyReservationsList.test.js.snap b/src/__tests__/__snapshots__/MyReservationsList.test.js.snap
index 9a903ec..7b07584 100644
--- a/src/__tests__/__snapshots__/MyReservationsList.test.js.snap
+++ b/src/__tests__/__snapshots__/MyReservationsList.test.js.snap
@@ -1,5 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`EachReservation Component renders reservation details 1`] = `
+<div>
+  <div
+    class="each-reservation-div"
+  >
+    <span>
+      Booked For 🚗: Test Car
+    </span>
+    <span>
+      Reservation is on 📆: 2023-01-01
+    </span>
+    <span>
+      Reservation is at  📍: Test City
+    </span>
+  </div>
+</div>
+`;
+
 exports[`MyReservations Component renders reservations present 1`] = `
 <div>
   <div
diff --git a/src/__tests__/__snapshots__/SignIn.test.js.snap b/src/__tests__/__snapshots__/SignIn.test.js.snap
index 58de010..5f4ce8a 100644
--- a/src/__tests__/__snapshots__/SignIn.test.js.snap
+++ b/src/__tests__/__snapshots__/SignIn.test.js.snap
@@ -23,10 +23,10 @@ Object {
         >
           <form
             action="#"
-            class="sign-in-form css-1tqyvtu"
+            class="sign-in-form css-l9cpgn"
           >
             <div
-              class="form-username css-1oq5xzy"
+              class="form-username css-5zoda1"
             >
               <label
                 class="css-1mcvbvm"
@@ -45,7 +45,7 @@ Object {
               </div>
             </div>
             <div
-              class="form-password css-1oq5xzy"
+              class="form-password css-5zoda1"
             >
               <label
                 class="css-1mcvbvm"
@@ -108,10 +108,10 @@ Object {
       >
         <form
           action="#"
-          class="sign-in-form css-1tqyvtu"
+          class="sign-in-form css-l9cpgn"
         >
           <div
-            class="form-username css-1oq5xzy"
+            class="form-username css-5zoda1"
           >
             <label
               class="css-1mcvbvm"
@@ -130,7 +130,7 @@ Object {
             </div>
           </div>
           <div
-            class="form-password css-1oq5xzy"
+            class="form-password css-5zoda1"
           >
             <label
               class="css-1mcvbvm"
diff --git a/src/__tests__/__snapshots__/SignUp.test.js.snap b/src/__tests__/__snapshots__/SignUp.test.js.snap
index 1883c6c..11a2351 100644
--- a/src/__tests__/__snapshots__/SignUp.test.js.snap
+++ b/src/__tests__/__snapshots__/SignUp.test.js.snap
@@ -23,10 +23,10 @@ Object {
         >
           <form
             action="#"
-            class="sign-up-form css-1tqyvtu"
+            class="sign-up-form css-l9cpgn"
           >
             <div
-              class="form-username css-1oq5xzy"
+              class="form-username css-5zoda1"
             >
               <label
                 class="css-1mcvbvm"
@@ -45,7 +45,7 @@ Object {
               </div>
             </div>
             <div
-              class="form-email css-1oq5xzy"
+              class="form-email css-5zoda1"
             >
               <label
                 class="css-1mcvbvm"
@@ -64,7 +64,7 @@ Object {
               </div>
             </div>
             <div
-              class="password_block css-1oq5xzy"
+              class="password_block css-5zoda1"
             >
               <label
                 class="css-1mcvbvm"
@@ -98,7 +98,7 @@ Object {
               </div>
             </div>
             <div
-              class="password_block css-1oq5xzy"
+              class="password_block css-5zoda1"
             >
               <label
                 class="css-1mcvbvm"
@@ -170,10 +170,10 @@ Object {
       >
         <form
           action="#"
-          class="sign-up-form css-1tqyvtu"
+          class="sign-up-form css-l9cpgn"
         >
           <div
-            class="form-username css-1oq5xzy"
+            class="form-username css-5zoda1"
           >
             <label
               class="css-1mcvbvm"
@@ -192,7 +192,7 @@ Object {
             </div>
           </div>
           <div
-            class="form-email css-1oq5xzy"
+            class="form-email css-5zoda1"
           >
             <label
               class="css-1mcvbvm"
@@ -211,7 +211,7 @@ Object {
             </div>
           </div>
           <div
-            class="password_block css-1oq5xzy"
+            class="password_block css-5zoda1"
           >
             <label
               class="css-1mcvbvm"
@@ -245,7 +245,7 @@ Object {
             </div>
           </div>
           <div
-            class="password_block css-1oq5xzy"
+            class="password_block css-5zoda1"
           >
             <label
               class="css-1mcvbvm"
diff --git a/src/components/MyReservations/EachReservation.js b/src/components/MyReservations/EachReservation.js
new file mode 100644
index 0000000..1cb7ffb
--- /dev/null
+++ b/src/components/MyReservations/EachReservation.js
@@ -0,0 +1,13 @@
+import React from 'react';
+
+const EachReservation = ({ reservation }) => {
+  return (
+    <div className="each-reservation-div" key={reservation.id}>
+      <span>{`Booked For 🚗: ${reservation.car && reservation.car.name ? reservation.car.name : 'Meow'}`}</span>
+      <span>{`Reservation is on 📆: ${reservation.date}`}</span>
+      <span>{`Reservation is at  📍: ${reservation.city}`}</span>
+    </div>
+  );
+};
+
+export default EachReservation;
\ No newline at end of file
diff --git a/src/components/MyReservations/MyReservationsList.js b/src/components/MyReservations/MyReservationsList.js
index 18c7ed4..8f9d88f 100644
--- a/src/components/MyReservations/MyReservationsList.js
+++ b/src/components/MyReservations/MyReservationsList.js
@@ -1,6 +1,7 @@
 import React, { useEffect } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { fetchCarReservations } from '../../redux/thunk';
+import EachReservation from './EachReservation';
 
 const MyReservationsList = () => {
   const authenticationStatus = useSelector((state) => state.authentication.status);
@@ -32,13 +33,10 @@ const MyReservationsList = () => {
 
   return (
     <div className="my-reservations-inner">
-      {myReservations && myReservations.map((reservation) => (
-        <div key={reservation.id} className="each-reservation-div">
-          <span>{`Booked For 🚗: ${reservation.car && reservation.car.name ? reservation.car.name : 'Meow'}`}</span>
-          <span>{`Reservation is on 📆: ${reservation.date}`}</span>
-          <span>{`Reservation is at  📍: ${reservation.city}`}</span>
-        </div>
-      ))}
+      {myReservations &&
+        myReservations.map((reservation) => (
+          <EachReservation key={reservation.id} reservation={reservation} />
+        ))}
     </div>
   );
 };

From 8c70b627d5f4f25ad7c205eb3d5ab5cb69349caa Mon Sep 17 00:00:00 2001
From: Tanmayi Manku <tanmayitanum@gmail.com>
Date: Fri, 15 Dec 2023 00:46:10 +0530
Subject: [PATCH 2/3] Update the failing test suites, update styles.

---
 .../MyReservationsList.test.js.snap           | 42 -------------------
 .../__snapshots__/SignIn.test.js.snap         |  4 +-
 .../__snapshots__/SignUp.test.js.snap         |  4 +-
 src/components/Card/DisplayCartCard.js        |  3 ++
 src/components/Card/DisplayItemCard.js        | 18 ++++++--
 src/components/Form/FormComponent.js          |  3 +-
 .../MyReservations/EachReservation.js         | 28 +++++++++----
 .../MyReservations/MyReservationsList.js      |  4 +-
 src/layout/LandingPage/LandingPageLayout.js   |  4 +-
 src/layout/LandingPage/nav/AuthNav.js         | 10 +++--
 .../UsersDashboard/UsersDashboardLayout.js    |  9 +++-
 src/layout/UsersDashboard/sideNav/Nav.js      |  7 ++--
 src/pages/Auth/SignUp/SignupForm.js           |  8 +++-
 src/pages/LandingPage/Home/Home.js            | 26 +++++++-----
 .../UserDashboard/AddNewCar/AddNewCar.js      |  2 +-
 src/pages/UserDashboard/DashboardHome.js      | 37 ++++++++--------
 src/redux/cars/carsSlice.js                   |  1 -
 17 files changed, 105 insertions(+), 105 deletions(-)

diff --git a/src/__tests__/__snapshots__/MyReservationsList.test.js.snap b/src/__tests__/__snapshots__/MyReservationsList.test.js.snap
index 7b07584..cf74d49 100644
--- a/src/__tests__/__snapshots__/MyReservationsList.test.js.snap
+++ b/src/__tests__/__snapshots__/MyReservationsList.test.js.snap
@@ -17,45 +17,3 @@ exports[`EachReservation Component renders reservation details 1`] = `
   </div>
 </div>
 `;
-
-exports[`MyReservations Component renders reservations present 1`] = `
-<div>
-  <div
-    class="my-reservations-page-outer"
-  >
-    <h1>
-      My Current Reservations
-    </h1>
-    <div
-      class="my-reservations-inner"
-    >
-      <div
-        class="each-reservation-div"
-      >
-        <span>
-          Car: non nome
-        </span>
-        <span>
-          Date: 2023-10-10
-        </span>
-        <span>
-          City: City A
-        </span>
-      </div>
-      <div
-        class="each-reservation-div"
-      >
-        <span>
-          Car: non nome
-        </span>
-        <span>
-          Date: 2022-11-11
-        </span>
-        <span>
-          City: City B
-        </span>
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/__tests__/__snapshots__/SignIn.test.js.snap b/src/__tests__/__snapshots__/SignIn.test.js.snap
index 5f4ce8a..2d1926c 100644
--- a/src/__tests__/__snapshots__/SignIn.test.js.snap
+++ b/src/__tests__/__snapshots__/SignIn.test.js.snap
@@ -23,7 +23,7 @@ Object {
         >
           <form
             action="#"
-            class="sign-in-form css-l9cpgn"
+            class="sign-in-form css-1u7ueiz"
           >
             <div
               class="form-username css-5zoda1"
@@ -108,7 +108,7 @@ Object {
       >
         <form
           action="#"
-          class="sign-in-form css-l9cpgn"
+          class="sign-in-form css-1u7ueiz"
         >
           <div
             class="form-username css-5zoda1"
diff --git a/src/__tests__/__snapshots__/SignUp.test.js.snap b/src/__tests__/__snapshots__/SignUp.test.js.snap
index 11a2351..cd6b6f5 100644
--- a/src/__tests__/__snapshots__/SignUp.test.js.snap
+++ b/src/__tests__/__snapshots__/SignUp.test.js.snap
@@ -23,7 +23,7 @@ Object {
         >
           <form
             action="#"
-            class="sign-up-form css-l9cpgn"
+            class="sign-up-form css-1u7ueiz"
           >
             <div
               class="form-username css-5zoda1"
@@ -170,7 +170,7 @@ Object {
       >
         <form
           action="#"
-          class="sign-up-form css-l9cpgn"
+          class="sign-up-form css-1u7ueiz"
         >
           <div
             class="form-username css-5zoda1"
diff --git a/src/components/Card/DisplayCartCard.js b/src/components/Card/DisplayCartCard.js
index a0b71c1..1b47042 100644
--- a/src/components/Card/DisplayCartCard.js
+++ b/src/components/Card/DisplayCartCard.js
@@ -43,6 +43,9 @@ const Container = styled(Link)`
   border-radius: 8px;
   overflow: hidden;
 //   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  @media (max-width: 768px) {
+    min-width: 320px;
+  }
 `;
 
 const Image = styled.img`
diff --git a/src/components/Card/DisplayItemCard.js b/src/components/Card/DisplayItemCard.js
index 0424f53..d280450 100644
--- a/src/components/Card/DisplayItemCard.js
+++ b/src/components/Card/DisplayItemCard.js
@@ -106,9 +106,9 @@ const Container = styled.div`
 //   width: 40%;
 //   overflow: hidden;
 //   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  @media (max-width: 380px) {
-    flex-direction: column;
-    -webkit-flex-direction: column;
+  @media (max-width: 768px) {
+     flex-direction: column;
+     align-items: center;
   }
 `;
 
@@ -118,6 +118,11 @@ const Image = styled.div`
   margin-right: 5rem;
   margin-top: 3rem;
   postion: relative;
+  @media (max-width: 768px) {
+    width: 20rem;
+    margin: 3rem 0;
+    height: auto;
+  }
   @media (max-width: 380px) {
     width: 100%;
     height: auto;
@@ -131,6 +136,10 @@ const Image1 = styled.img`
   margin-right: 2rem;
   transform: rotate(${(props) => props.rotation}deg);
   transition: transform 0.5s ease;
+  @media (max-width: 768px) {
+    width: 20rem;
+    border: 1px solid blue;
+  }
   @media (max-width: 380px) {
     width: 100%;
     margin-right: 0;
@@ -165,6 +174,9 @@ const Rotate = styled.div`
 
 const Content = styled.div`
   padding: 4rem 2rem;
+  @media (max-width: 768px) {
+    background: orange;
+  }
   @media (max-width: 380px) {
     padding: 1rem;
   }
diff --git a/src/components/Form/FormComponent.js b/src/components/Form/FormComponent.js
index 8e7bec0..3515bf1 100644
--- a/src/components/Form/FormComponent.js
+++ b/src/components/Form/FormComponent.js
@@ -45,8 +45,9 @@ FormComponent.propTypes = {
 const StyledForm = styled(Form)`
   border: 1px solid blue;
   padding: 2rem;
-  @media (max-width: 375px) {
+  @media (max-width: 768px) {
     padding: 1rem;
+    background: green;
   }
   @media (max-width: 380px) {
     padding: 0;
diff --git a/src/components/MyReservations/EachReservation.js b/src/components/MyReservations/EachReservation.js
index 1cb7ffb..4168d17 100644
--- a/src/components/MyReservations/EachReservation.js
+++ b/src/components/MyReservations/EachReservation.js
@@ -1,13 +1,23 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 
-const EachReservation = ({ reservation }) => {
-  return (
-    <div className="each-reservation-div" key={reservation.id}>
-      <span>{`Booked For 🚗: ${reservation.car && reservation.car.name ? reservation.car.name : 'Meow'}`}</span>
-      <span>{`Reservation is on 📆: ${reservation.date}`}</span>
-      <span>{`Reservation is at  📍: ${reservation.city}`}</span>
-    </div>
-  );
+const EachReservation = ({ reservation }) => (
+  <div className="each-reservation-div" key={reservation.id}>
+    <span>{`Booked For 🚗: ${reservation.car && reservation.car.name ? reservation.car.name : 'Meow'}`}</span>
+    <span>{`Reservation is on 📆: ${reservation.date}`}</span>
+    <span>{`Reservation is at  📍: ${reservation.city}`}</span>
+  </div>
+);
+
+EachReservation.propTypes = {
+  reservation: PropTypes.shape({
+    id: PropTypes.number.isRequired,
+    car: PropTypes.shape({
+      name: PropTypes.string.isRequired,
+    }).isRequired,
+    date: PropTypes.string.isRequired,
+    city: PropTypes.string.isRequired,
+  }).isRequired,
 };
 
-export default EachReservation;
\ No newline at end of file
+export default EachReservation;
diff --git a/src/components/MyReservations/MyReservationsList.js b/src/components/MyReservations/MyReservationsList.js
index 8f9d88f..52c0bce 100644
--- a/src/components/MyReservations/MyReservationsList.js
+++ b/src/components/MyReservations/MyReservationsList.js
@@ -33,8 +33,8 @@ const MyReservationsList = () => {
 
   return (
     <div className="my-reservations-inner">
-      {myReservations &&
-        myReservations.map((reservation) => (
+      {myReservations
+        && myReservations.map((reservation) => (
           <EachReservation key={reservation.id} reservation={reservation} />
         ))}
     </div>
diff --git a/src/layout/LandingPage/LandingPageLayout.js b/src/layout/LandingPage/LandingPageLayout.js
index eb546cb..56113ca 100644
--- a/src/layout/LandingPage/LandingPageLayout.js
+++ b/src/layout/LandingPage/LandingPageLayout.js
@@ -17,9 +17,9 @@ export default LandingPageLayout;
 const Main = styled.main`
   background-color: #ffd700;
   border: 1rem solid yellow;
-  @media (max-width: 380px) {
-    border: none;
+  @media (max-width: 768px) {
     width: 100%;
     height: 100vh;
+    border: none;
   }
 `;
diff --git a/src/layout/LandingPage/nav/AuthNav.js b/src/layout/LandingPage/nav/AuthNav.js
index 85bba09..132b68c 100644
--- a/src/layout/LandingPage/nav/AuthNav.js
+++ b/src/layout/LandingPage/nav/AuthNav.js
@@ -29,11 +29,13 @@ const Container = styled.div`
   padding-right: -5rem;
   justify-content: center;
   // margin-left: 8rem;
-  @media (max-width: 380px) {
-    display: flex;
+  @media (max-width: 768px) {
+    background: red;
+    background: red;
     flex-direction: column;
-    -webkit-flex-direction: column;
-    margin-left: 32px;
+    margin: 2rem 0;
+    justify-content: center;
+    align-items: center;
   }
 `;
 
diff --git a/src/layout/UsersDashboard/UsersDashboardLayout.js b/src/layout/UsersDashboard/UsersDashboardLayout.js
index bf0e467..d980c23 100644
--- a/src/layout/UsersDashboard/UsersDashboardLayout.js
+++ b/src/layout/UsersDashboard/UsersDashboardLayout.js
@@ -27,7 +27,9 @@ const Container = styled.div`
 const Section = styled.section`
   width: 80%;
   margin-left: 17rem;
-  @media (max-width: 380px) {
+  @media (max-width: 768px) {
+    background: purple;
+    background: purple;
     width: 100%;
     margin-left: 0;
   }
@@ -36,8 +38,11 @@ const Section = styled.section`
 const MainContent = styled.main`
   margin: 2rem 6.25rem 5.69rem 3.38rem;
   height: fit-content;
-  @media (max-width: 380px) {
+  @media (max-width: 768px) {
+    background: yellow;
     margin: 0;
     width: 100%;
+    margin: 0;
+    height: 100vh;
   }
 `;
diff --git a/src/layout/UsersDashboard/sideNav/Nav.js b/src/layout/UsersDashboard/sideNav/Nav.js
index 1916886..68ae386 100644
--- a/src/layout/UsersDashboard/sideNav/Nav.js
+++ b/src/layout/UsersDashboard/sideNav/Nav.js
@@ -7,7 +7,6 @@ import userIcon from '../../../assets/user.png';
 import navConfig from './navConfig';
 import { NavBoxItem } from '../../../components/Link/Link';
 import { logoutUser } from '../../../redux/thunk';
-import { HOME } from '../../../routes/routeConstants';
 
 const Nav = () => {
   const navigate = useNavigate();
@@ -24,11 +23,11 @@ const Nav = () => {
     if (status === 'succeeded') {
       dispatch(logoutUser());
       localStorage.removeItem('authenticationStatus');
-      navigate(`${HOME}`);
+      navigate('/');
     }
   };
   if (status === 'loading') {
-    return <p>{`${username} signin out!`}</p>;
+    return <p>{`${username} signing out!`}</p>;
   }
 
   return (
@@ -94,7 +93,7 @@ const NavbtnSection = styled.section`
 
 const LogoutBtn = styled.div`
   margin-top: 2rem;
-  @media (max-width: 380px) {
+  @media (max-width: 768px) {
     margin-top: 0;
   }
 `;
diff --git a/src/pages/Auth/SignUp/SignupForm.js b/src/pages/Auth/SignUp/SignupForm.js
index b52d1eb..ee5921c 100644
--- a/src/pages/Auth/SignUp/SignupForm.js
+++ b/src/pages/Auth/SignUp/SignupForm.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 import FormComponent from '../../../components/Form/FormComponent';
 import { SignUpSchema, signUpInitialValues } from '../../../models/signup.model';
@@ -11,11 +11,15 @@ import { registerUser } from '../../../redux/thunk';
 const SignUpForm = () => {
   const dispatch = useDispatch();
   const navigate = useNavigate();
+  const status = useSelector((state) => state.authentication.status);
   const handleSubmit = (values) => {
     dispatch(registerUser(values));
-    navigate('/account/signin');
   };
 
+  if (status === 'succeeded') {
+    navigate('/account/signin');
+  }
+
   return (
     <FormComponent
       initialValues={signUpInitialValues}
diff --git a/src/pages/LandingPage/Home/Home.js b/src/pages/LandingPage/Home/Home.js
index 8966c7d..d871039 100644
--- a/src/pages/LandingPage/Home/Home.js
+++ b/src/pages/LandingPage/Home/Home.js
@@ -24,26 +24,28 @@ const Home = () => (
 export default Home;
 
 const Container = styled.div`
-  border: 12rem solid #ffd700;
+  border: 15rem solid #ffd700;
   margin-bottom: 8rem;
   margin-top: 6rem;
-  @media (min-width: 375px) and (max-width: 768px) {
-    border: 20rem solid #ffd700;
+  @media (max-width: 768px) {
+    margin-left: 0;
+    margin-bottom: 0;
+    margin-top: 0;
+    border: 3rem solid;
   }
 
   @media (max-width: 380px) {
     border: 0;
-    margin-bottom: 0;
-    margin-top: 0;
-    margin-left: 0;
   }
 `;
 
 const Content = styled.div`
   margin-top: 20rem;
   position: relative;
-  @media (max-width: 375px) {
-   margin-left: -5rem;
+  max-width: 1200px;
+
+  @media (max-width: 768px) {
+    padding: 0 20px;
   }
 
   @media (max-width: 380px) {
@@ -60,13 +62,15 @@ const Paragraph = styled.p`
   margin-left: -4rem;
   background color: blue;
   text-align: center;
-  @media (max-width: 375px) {
-    margin-left: -5rem;
+
+  @media (max-width: 768px) {
+    font-size: 2rem;
+    margin-top: -19rem;
+    margin-left: 4rem;
   }
 
   @media (max-width: 380px) {
     color: red;
-    font-size: 2rem;
     margin-top: 0;
     margin-bottom: 0;
     margin-left: 0;
diff --git a/src/pages/UserDashboard/AddNewCar/AddNewCar.js b/src/pages/UserDashboard/AddNewCar/AddNewCar.js
index 47dbf72..3ef03bb 100644
--- a/src/pages/UserDashboard/AddNewCar/AddNewCar.js
+++ b/src/pages/UserDashboard/AddNewCar/AddNewCar.js
@@ -40,7 +40,7 @@ const SignUpContent = styled.div`
 
 const Title = styled.p`
   font-size: 1rem;
-  @media (max-width: 375px) {
+  @media (max-width: 768px) {
     margin-left: 10rem;
   }
 
diff --git a/src/pages/UserDashboard/DashboardHome.js b/src/pages/UserDashboard/DashboardHome.js
index 27156ed..a2094dc 100644
--- a/src/pages/UserDashboard/DashboardHome.js
+++ b/src/pages/UserDashboard/DashboardHome.js
@@ -26,11 +26,11 @@ const DashboardHome = () => {
   }
 
   const handleNext = () => {
-    setCurrentIndex((prevIndex) => (prevIndex + 3) % cars.length);
+    setCurrentIndex((prevIndex) => (prevIndex + 1) % cars.length);
   };
 
   const handlePrev = () => {
-    setCurrentIndex((prevIndex) => (prevIndex - 3 + cars.length) % cars.length);
+    setCurrentIndex((prevIndex) => (prevIndex - 1 + cars.length) % cars.length);
   };
 
   return (
@@ -40,7 +40,7 @@ const DashboardHome = () => {
         <p>Please select a Vehicle</p>
       </Title>
       <Inner>
-        <ArrowLeft onClick={handlePrev}>
+        <ArrowLeft onClick={handlePrev} disabled={cars.length <= 1}>
           <FaArrowLeft />
         </ArrowLeft>
         <CardContainer>
@@ -54,7 +54,7 @@ const DashboardHome = () => {
             />
           ))}
         </CardContainer>
-        <ArrowRight onClick={handleNext}>
+        <ArrowRight onClick={handleNext} disabled={cars.length <= 1}>
           <FaArrowRight />
         </ArrowRight>
       </Inner>
@@ -71,8 +71,8 @@ const Inner = styled.section`
   margin-top: 2rem;
   // border: 1px solid blue;
   // margin-left: 2rem;
-  @media (max-width: 380px) {
-    overflow-x: hidden;
+  @media (max-width: 768px) {
+    margin: auto;
   }
 `;
 
@@ -81,20 +81,19 @@ const Container = styled.div`
   flex-direction: column;
   width: 90%;
   margin: 3.5rem;
-  @media (max-width: 380px) {
-    width: 80%;
-  }
   @media (max-width: 768px) {
-    margin-left: 2.5rem;
+    margin: 0;
+    padding: 10%;
+    width: 100%;
   }
 `;
 
 const CardContainer = styled.div`
   display: flex;
   gap: 2rem;
-  @media (max-width: 375px) {
-    display: block;
-    margin-left: -1rem;
+  @media (max-width: 768px) {
+    width: 320px;
+    overflow-x: hidden;
   }
 `;
 
@@ -108,8 +107,8 @@ const Arrow = styled.div`
   border-radius: 50%;
   background-color: white;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-  @media (min-width: 375px) and (max-width: 768px) {
-    top: 30rem;
+  @media (max-width: 768px) {
+    top: 70%;
   }
   @media (max-width: 380px) {
     top: 82%;
@@ -118,8 +117,8 @@ const Arrow = styled.div`
 
 const ArrowLeft = styled(Arrow)`
   left: 15rem;
-  @media (max-width: 375px) {
-    display: none;
+  @media (max-width: 768px) {
+    left: 20%;
   }
   @media (min-width: 1024px) and (max-width: 1440px) {
     top: 23rem;
@@ -136,6 +135,10 @@ const ArrowRight = styled(Arrow)`
     right: 6rem;
     top: 34.2rem;
   }
+  @media (max-width: 768px) {
+    top: 70%;
+    right: 24%;
+  }
 `;
 
 const Title = styled.div`
diff --git a/src/redux/cars/carsSlice.js b/src/redux/cars/carsSlice.js
index e110db3..2eaf75d 100644
--- a/src/redux/cars/carsSlice.js
+++ b/src/redux/cars/carsSlice.js
@@ -56,7 +56,6 @@ const carsSlice = createSlice({
       .addCase(postNewCar.fulfilled, (state, action) => {
         state.status = 'succeeded';
         state.cars = [...state.cars, action.payload];
-        console.log('Car state :', state.cars);
       })
       .addCase(postNewCar.rejected, (state, action) => {
         state.status = 'failed';

From 3a9f7982b70c41238ee4cf492bed9a83f1c11995 Mon Sep 17 00:00:00 2001
From: Tanmayi Manku <tanmayitanum@gmail.com>
Date: Fri, 15 Dec 2023 00:53:31 +0530
Subject: [PATCH 3/3] remove back colors

---
 src/components/Form/FormComponent.js              | 1 -
 src/layout/LandingPage/nav/AuthNav.js             | 2 --
 src/layout/UsersDashboard/UsersDashboardLayout.js | 1 -
 src/pages/LandingPage/Home/Home.js                | 2 +-
 4 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/components/Form/FormComponent.js b/src/components/Form/FormComponent.js
index 3515bf1..270c5c3 100644
--- a/src/components/Form/FormComponent.js
+++ b/src/components/Form/FormComponent.js
@@ -47,7 +47,6 @@ const StyledForm = styled(Form)`
   padding: 2rem;
   @media (max-width: 768px) {
     padding: 1rem;
-    background: green;
   }
   @media (max-width: 380px) {
     padding: 0;
diff --git a/src/layout/LandingPage/nav/AuthNav.js b/src/layout/LandingPage/nav/AuthNav.js
index 132b68c..699512a 100644
--- a/src/layout/LandingPage/nav/AuthNav.js
+++ b/src/layout/LandingPage/nav/AuthNav.js
@@ -30,8 +30,6 @@ const Container = styled.div`
   justify-content: center;
   // margin-left: 8rem;
   @media (max-width: 768px) {
-    background: red;
-    background: red;
     flex-direction: column;
     margin: 2rem 0;
     justify-content: center;
diff --git a/src/layout/UsersDashboard/UsersDashboardLayout.js b/src/layout/UsersDashboard/UsersDashboardLayout.js
index d980c23..e21a6e5 100644
--- a/src/layout/UsersDashboard/UsersDashboardLayout.js
+++ b/src/layout/UsersDashboard/UsersDashboardLayout.js
@@ -28,7 +28,6 @@ const Section = styled.section`
   width: 80%;
   margin-left: 17rem;
   @media (max-width: 768px) {
-    background: purple;
     background: purple;
     width: 100%;
     margin-left: 0;
diff --git a/src/pages/LandingPage/Home/Home.js b/src/pages/LandingPage/Home/Home.js
index d871039..9749503 100644
--- a/src/pages/LandingPage/Home/Home.js
+++ b/src/pages/LandingPage/Home/Home.js
@@ -31,7 +31,7 @@ const Container = styled.div`
     margin-left: 0;
     margin-bottom: 0;
     margin-top: 0;
-    border: 3rem solid;
+    border: 3rem solid #ffd700;
   }
 
   @media (max-width: 380px) {