Dashboard Styling

src/components/Form/FormComponent.js

@@ -43,8 +43,11 @@ FormComponent.propTypes = {
 };
 
 const StyledForm = styled(Form)`
-  // border: 1px solid blue;
+  border: 1px solid blue;
   padding: 2rem;
+  @media (max-width: 375px) {
+    padding: 1rem;
+  }
 
   &.flex {
     display: flex;

src/components/Form/FormField.js

@@ -159,8 +159,8 @@ export const FileInputField = ({
 
   const handleChange = (event) => {
     const file = event.currentTarget.files[0];
-    // helpers.setValue(file);
-    console.log('FIle', file);
+    helpers.setValue(file);
+    // console.log('FIle', file);
   };
 
   return (
@@ -206,6 +206,9 @@ const FileInputWrapper = styled.div`
   display: flex;
   flex-direction: column;
   margin-bottom: 1rem;
+  @media (max-width: 375px) {
+    width: 80%;
+  }
 
   label {
     margin-bottom: 0.5rem;
@@ -231,6 +234,9 @@ const StyledDatePicker = styled(DatePicker)`
 export const InputWrapper = styled.div`
   width: 100%;
   margin-bottom: .5rem;
+  @media (max-width: 375px) {
+    width: 80%;
+  }
 `;
 
 export const InputLabel = styled.label`

src/layout/UsersDashboard/sideNav/Nav.js

@@ -14,7 +14,7 @@ const Nav = () => {
   const handleLogout = () => {
     dispatch(logoutUser());
     localStorage.removeItem('authenticationStatus');
-    console.log('log out successful');
+    // console.log('log out successful');
   };
   return (
     <Container>

src/pages/Auth/SignUp/SignupForm.js

@@ -12,7 +12,7 @@ const SignUpForm = () => {
   const dispatch = useDispatch();
   const navigate = useNavigate();
   const handleSubmit = (values) => {
-    console.log(values);
+    // console.log(values);
     dispatch(registerUser(values));
     navigate('/account/signin');
   };

src/pages/LandingPage/Home/Home.js

@@ -27,22 +27,23 @@ export default Home;
 
 const Container = styled.div`
   // backgroun-color: yellow;
-  border: 15rem solid #ffd700;
+  border: 12rem solid #ffd700;
   margin-bottom: 8rem;
   margin-top: 6rem;
-  @media (max-width: 768px) {
-    margin-left: 2rem;
+  @media (max-width: 375px) {
+    border: 20rem solid #ffd700;
+  }
+  @media (min-width: 375px) and (max-width: 768px) {
+    border: 20rem solid #ffd700;
   }
 `;
 
 const Content = styled.div`
   margin-top: 20rem;
   position: relative;
-  max-width: 1200px;
   // background-color: green;
-
-  @media (max-width: 768px) {
-    padding: 0 20px;
+  @media (max-width: 375px) {
+   margin-left: -5rem;
   }
 `;
 
@@ -52,11 +53,8 @@ const Paragraph = styled.p`
   margin-left: -4rem;
   background color: blue;
   text-align: center;
-
-  @media (max-width: 768px) {
-    font-size: 2rem;
-    margin-top: -20rem;
-    margin-left: 10rem;
+  @media (max-width: 375px) {
+    margin-left: -5rem;
   }
 `;
 

src/pages/UserDashboard/AddNewCar/AddNewCar.js

@@ -18,8 +18,6 @@ const Container = styled.div`
   flex-direction: column;
   align-items: center;
   justify-content: center;
-//   min-height: 100vh;
-//   height: fit-content;
 `;
 
 const SignUpContent = styled.div`
@@ -30,8 +28,17 @@ const SignUpContent = styled.div`
   align-items: center;
   background-color: white;
   box-shadow: 0 7px 8px rgba(0, 0, 0, 0.1);
+  @media (max-width: 375px) {
+    margin-left: 20rem;
+  }
+  @media (min-width: 375px) and (max-width: 768px) {
+    margin-left: 18rem;
+  }
 `;
 
 const Title = styled.p`
   font-size: 1rem;
+  @media (max-width: 375px) {
+    margin-left: 10rem;
+  }
 `;

src/pages/UserDashboard/DashboardHome.js

@@ -63,15 +63,21 @@ const Container = styled.div`
   flex-direction: column;
   width: 90%;
   margin: 3.5rem;
-  // border: 1px solid green;
-  @media (max-width: 768px) {
-    width: 80%;
+  @media (max-width: 375px) {
+    margin-left: -4rem;
+  }
+  @media (min-width: 375px) and (max-width: 768px) {
+    margin-left: -4rem;
   }
 `;
 
 const CardContainer = styled.div`
   display: flex;
   gap: 2rem;
+  @media (max-width: 375px) {
+    display: block;
+    margin-left: -1rem;
+  }
 `;
 
 const Arrow = styled.div`
@@ -84,19 +90,46 @@ 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;
+  }
 `;
 
 const ArrowLeft = styled(Arrow)`
   left: 15rem;
+  @media (max-width: 375px) {
+    display: none;
+  }
+  @media (min-width: 1024px) and (max-width: 1440px) {
+    top: 23rem;
+  }
 `;
 
 const ArrowRight = styled(Arrow)`
   right: 2rem;
   top: 22rem;
+  @media (max-width: 375px) {
+    display: none;
+  }
+  @media (min-width: 375px) and (max-width: 768px) {
+    display: none;
+  }
+  @media (min-width: 769px) and (max-width: 1024px) {
+    display: none;
+  }
 `;
 
 const Title = styled.div`
   font-size: 1rem;
   font-weight: 400;
   text-align: center;
+  @media (max-width: 375px) {
+    margin-left: 5rem;
+    font-size: 2rem;
+    text-align: center;
+  }
+  @media (min-width: 375px) and (max-width: 768px) {
+    // border: 1px solid blue;
+    padding-left: 25rem;
+  }
 `;

src/pages/UserDashboard/ItemDetail/ItemDetail.js

@@ -12,7 +12,7 @@ const ItemDetail = () => {
   // const {
   //   name, description, pricePerHr, seatingCapacity,
   // } = car;
-  console.log('car from the itemdetails: ', car);
+  // console.log('car from the itemdetails: ', car);
 
   return (
     <DisplayItemCard

src/redux/cars/carsSlice.js

@@ -15,9 +15,9 @@ const carsSlice = createSlice({
       const newState = state.cars.map(
         (car) => (car.id === action.payload ? ({ ...car, removed: true }) : car),
       );
-      console.log('from carslice but before the remove mark: ', state.cars);
+      // console.log('from carslice but before the remove mark: ', state.cars);
       state.cars = newState;
-      console.log('cars from the removeMarkStatus: ', state.cars);
+      // console.log('cars from the removeMarkStatus: ', state.cars);
     },
   },
   extraReducers: (builder) => {
@@ -29,15 +29,15 @@ const carsSlice = createSlice({
       .addCase(fetchCars.fulfilled, (state, action) => {
         state.status = 'succeeded';
         const rawcars = action.payload;
-        console.log('raw cars data testing the deleted at:', rawcars);
+        // console.log('raw cars data testing the deleted at:', rawcars);
         const customData = [];
         rawcars.forEach((car) => {
           const data = { ...car, removed: false };
           customData.push(data);
         });
-        console.log('now after adding removed: ', customData);
+        // console.log('now after adding removed: ', customData);
         state.cars = customData;
-        console.log('current state after adding removed:', state.cars);
+        // console.log('current state after adding removed:', state.cars);
       })
       .addCase(fetchCars.rejected, (state, action) => {
         state.status = 'failed';
@@ -50,9 +50,9 @@ const carsSlice = createSlice({
       .addCase(deleteCar.fulfilled, (state, action) => {
         state.status = 'succeeded';
         const deletedCarId = action.meta.arg; // Access the carId passed to the thunk
-        console.log('deleted car id: ', deletedCarId);
+        // console.log('deleted car id: ', deletedCarId);
         // state.cars = state.cars.filter((car) => car.id !== deletedCarId);
-        console.log('now cars after deleteion of one car: ', state.cars);
+        // console.log('now cars after deleteion of one car: ', state.cars);
       })
       .addCase(deleteCar.rejected, (state, action) => {
         state.status = 'failed';