Feature/final styles fix

src/App.css

@@ -191,6 +191,21 @@
   background-color: black;
 }
 
+.pages-layout {
+  width: 100%;
+  height: 100vh;
+  min-height: 450px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 1.2rem;
+}
+
+.tesla-logo-mobile {
+  display: none !important;
+}
+
 @media screen and (max-width: 767px) {
   .burger-menu {
     display: flex !important;
@@ -285,6 +300,10 @@
   .form-label {
     width: 100%;
   }
+
+  .tesla-logo-mobile {
+    display: block;
+  }
 }
 
 @media screen and (min-width: 768px) and (max-width: 950px) {

src/components/CarsCard/CarsCard.jsx

@@ -10,6 +10,7 @@ import { useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
 import CarDetails from '../CarDetails/CarDetails';
 import deleteCar from '../../redux/requests/deleteCar';
+import Logo from '../Sidebar/Logo';
 
 const CarsCard = ({ cars, delete: isDeleteMode }) => {
   const dispatch = useDispatch();
@@ -46,6 +47,9 @@ const CarsCard = ({ cars, delete: isDeleteMode }) => {
 
   return (
     <div className="card-model ">
+      <div className="position-absolute top-0 start-0 m-4 rosetta">
+        <Logo />
+      </div>
       {!selectedCar && (
         <div className="d-flex flex-column align-items-center mb-5">
           {isDeleteMode ? (

src/components/DeleteCar/DeleteCar.jsx

@@ -5,6 +5,7 @@ import Sidebar from '../Sidebar/Sidebar';
 import Session from '../Session/Session';
 import getCars from '../../redux/requests/getCars';
 import CarsCard from '../CarsCard/CarsCard';
+import BurgerMenu from '../Menu/BurgerMenu';
 
 const DeleteCar = () => {
   const user = useSelector((state) => state.login.data);
@@ -26,6 +27,7 @@ const DeleteCar = () => {
     <div className="d-flex justify-content-between align-items-center background-container">
       <div>
         <Sidebar />
+        <BurgerMenu />
       </div>
 
       <CarsCard cars={cars} onCarClick={handleCarClick} delete />

src/components/Menu/BurgerMenu.jsx

@@ -15,22 +15,20 @@ const BurgerMenu = () => {
     <>
       <div className="burger-menu position-absolute top-0 w-100 d-flex flex-row-reverse justify-content-between align-items-start gap-5 z-2">
         <div className="burger-menu-header d-flex justify-content-between align-items-start w-100">
-
           <div
             className={`d-flex flex-column justify-content-between align-content-center pt-4 pb-3 w-100 ps-4 ${
               sidebarVisible ? 'hide' : 'show'
             }`}
           >
             <Logo />
-
           </div>
 
-          <button
-            type="button"
-            onClick={handleClick}
-            className="btn btn-dark mt-3 mx-3"
-          >
-            {sidebarVisible ? <box-icon name="arrow-back" color="#fff" /> : <box-icon name="menu" color="#fff" />}
+          <button type="button" onClick={handleClick} className="btn btn-dark mt-3 mx-3">
+            {sidebarVisible ? (
+              <box-icon name="arrow-back" color="#fff" />
+            ) : (
+              <box-icon name="menu" color="#fff" />
+            )}
           </button>
 
           <div
@@ -41,7 +39,11 @@ const BurgerMenu = () => {
             <div className="d-flex flex-column justify-content-between align-items-center gap-4">
               <Logo />
               <div className="sidebar-menu-ul d-flex flex-column align-self-start my-3">
-                <NavLink to="/home" className="sidebar-menu-navlink text-end" activeclassname="active">
+                <NavLink
+                  to="/home"
+                  className="sidebar-menu-navlink text-end"
+                  activeclassname="active"
+                >
                   HOME
                 </NavLink>
                 <NavLink
@@ -65,9 +67,13 @@ const BurgerMenu = () => {
                 >
                   ADD CARS
                 </NavLink>
-                <button type="button" className="sidebar-menu-navlink text-end">
+                <NavLink
+                  to="/delete-car"
+                  className="sidebar-menu-navlink text-end"
+                  activeclassname="active"
+                >
                   DELETE CAR
-                </button>
+                </NavLink>
               </div>
             </div>
             <div>

src/components/Sidebar/Sidebar.jsx

@@ -49,7 +49,7 @@ const Sidebar = () => {
 
         <div>
           <div
-            className={`position-absolute d-flex flex-column justify-content-between align-content-center pt-4 pb-3 w-100 ps-4 ${
+            className={`tesla-logo-mobile position-absolute d-flex flex-column justify-content-between align-content-center pt-4 pb-3 w-100 ps-4 ${
               sidebarVisible ? 'hide' : 'show'
             }`}
           >

src/pages/AddCar/AddCar.jsx

@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
 import Sidebar from '../../components/Sidebar/Sidebar';
 import createCar from '../../redux/requests/createCar';
+import Logo from '../../components/Sidebar/Logo';
 
 const AddCar = () => {
   const navigate = useNavigate();
@@ -41,16 +42,21 @@ const AddCar = () => {
         <Sidebar />
       </div>
 
-      <div className="w-100 vh-100 mx-3 py-3">
+      <div className="pages-layout">
         <button
-          className="border-1 btn m-2 btn btn-outline-dark"
+          className="btn btn-outline-dark align-self-end"
           onClick={() => navigate('/home')}
           type="button"
         >
           Back
         </button>
 
+        <div className="position-absolute start-0 pt-2 pb-3 w-50 ps-4">
+          <Logo />
+        </div>
+
         <div className="container mx-auto my-5">
+          <h1 className="text-center font-weight-bold mb-4">Add Car</h1>
           <form
             onSubmit={handleSubmit}
             className="d-flex flex-column justify-content-center align-items-center"
@@ -187,7 +193,7 @@ const AddCar = () => {
 
             <div className="row d-flex justify-content-center">
               <div className="col-md text-center">
-                <button className="btn btn-dark px-5 mx-5 text-white" type="submit">
+                <button className="btn btn-dark px-5 mx-5 mb-3 text-white" type="submit">
                   Submit
                 </button>
               </div>

src/pages/AddReservation/AddReservation.jsx

@@ -4,6 +4,7 @@ import { useNavigate, useParams } from 'react-router-dom';
 import Sidebar from '../../components/Sidebar/Sidebar';
 import getUser from '../../redux/requests/getUser';
 import createUserReservation from '../../redux/requests/createUserReservation';
+import Logo from '../../components/Sidebar/Logo';
 
 const AddReservation = () => {
   const dispatch = useDispatch();
@@ -54,97 +55,99 @@ const AddReservation = () => {
         <Sidebar />
       </div>
 
-      <div className="w-100 vh-100 mx-3 py-3">
+      <div className="pages-layout">
         <button
-          className="border-1 btn m-2 btn btn-outline-dark"
+          className="btn btn-outline-dark align-self-end"
           onClick={() => navigate('/home')}
           type="button"
         >
           Back
         </button>
+
+        <div
+          className="position-absolute start-0 pt-2 pb-3 w-50 ps-4"
+        >
+          <Logo />
+        </div>
+
         <div className="container">
-          <div className="row">
-            <div className="col-12">
-              <div className="card bg-transparent border-light mt-5">
-                <div className="card-body create-form vh-75 mobile-text-reserve">
-                  <h3 className="text-center text-white ">Reserve a Car</h3>
-                  <div className="my-1">
-                    <p className="my-1 shadow p-3 mb-5 bg-body-tertiary text-center">
-                      Current User:
-                      <span className="px-2">
-                        {currentUser ? currentUser.username : 'Loading...'}
-                      </span>
-                    </p>
-                  </div>
+          <div className="card bg-transparent border-light mt-5">
+            <div className="card-body create-form vh-75 mobile-text-reserve">
+              <div className="my-1">
+                <h1 className="text-center font-weight-bold">Reserve Model</h1>
+                <p className="my-1 shadow p-3 mb-5 bg-body-tertiary text-center">
+                  Current User:
+                  <span className="px-2">{currentUser ? currentUser.username : 'Loading...'}</span>
+                </p>
+              </div>
 
-                  <div className="my-1">
-                    <p className="my-1 shadow p-3 mb-5 bg-body-tertiary text-center">
-                      Select Tesla Model:
-                      <span className="px-2">
-                        {cars ? (
-                          <select
-                            id="car_selection"
-                            value={selectedCar ? selectedCar.id : ''}
-                            onChange={(e) => setSelectedCar(e.target.value)}
-                            required
-                          >
-                            {cars.map((car) => (
-                              <option key={car.id} value={car.id}>
-                                {car.name}
-                              </option>
-                            ))}
-                          </select>
-                        ) : (
-                          <p>Cars loading or no cars, please add cars</p>
-                        )}
-                      </span>
-                    </p>
-                  </div>
-                  <form className="needs-validation" noValidate onSubmit={handleReservation}>
-                    <div className="my-2 text-center">
-                      <label htmlFor="start_time">
-                        Start Time:
-                        <input
-                          type="datetime-local"
-                          id="start_time"
-                          value={startTime}
-                          onChange={(e) => setStartTime(e.target.value)}
-                          required
-                        />
-                      </label>
-                    </div>
-                    <div className="my-2 text-center">
-                      <label htmlFor="end_time">
-                        Final Time:
-                        <input
-                          type="datetime-local"
-                          id="end_time"
-                          value={endTime}
-                          onChange={(e) => setEndTime(e.target.value)}
-                          required
-                        />
-                      </label>
-                    </div>
-                    <div className="my-2 text-center">
-                      <label htmlFor="city">
-                        Pick a city:
-                        <input
-                          type="text"
-                          id="city"
-                          value={city}
-                          onChange={(e) => setCity(e.target.value)}
-                          required
-                        />
-                      </label>
-                    </div>
-                    <div className="my-2 text-center">
-                      <button className="btn btn-dark" type="submit">
-                        Reserve
-                      </button>
-                    </div>
-                  </form>
-                </div>
+              <div className="my-1">
+                <p className="my-1 shadow p-3 mb-5 bg-body-tertiary text-center">
+                  Select Tesla Model:
+                  <span className="px-2">
+                    {cars ? (
+                      <select
+                        id="car_selection"
+                        value={selectedCar ? selectedCar.id : ''}
+                        onChange={(e) => setSelectedCar(e.target.value)}
+                        required
+                      >
+                        {cars.map((car) => (
+                          <option key={car.id} value={car.id}>
+                            {car.name}
+                          </option>
+                        ))}
+                      </select>
+                    ) : (
+                      <p>Cars loading or no cars, please add cars</p>
+                    )}
+                  </span>
+                </p>
               </div>
+              <form className="needs-validation" noValidate onSubmit={handleReservation}>
+                <div className="my-3 text-center">
+                  <label htmlFor="start_time">
+                    Start Time:
+                    <input
+                      type="datetime-local"
+                      id="start_time"
+                      value={startTime}
+                      onChange={(e) => setStartTime(e.target.value)}
+                      required
+                    />
+                  </label>
+                </div>
+                <div className="my-3 text-center">
+                  <label htmlFor="end_time">
+                    Final Time:
+                    <input
+                      type="datetime-local"
+                      id="end_time"
+                      value={endTime}
+                      onChange={(e) => setEndTime(e.target.value)}
+                      required
+                    />
+                  </label>
+                </div>
+                <div className="my-3 text-center">
+                  <label htmlFor="city">
+                    Pick a city:
+                    <input
+                      type="text"
+                      id="city"
+                      value={city}
+                      onChange={(e) => setCity(e.target.value)}
+                      required
+                    />
+                  </label>
+                </div>
+
+                <div className="my-4 text-center">
+                  <button className="btn btn-dark" type="submit">
+                    Reserve
+                  </button>
+                </div>
+              </form>
             </div>
           </div>
         </div>