🔥 Changes Required : Checked :check

README.md

@@ -1,4 +1,5 @@
 <a name="readme-top"></a>
+
 <details>
 <summary>Table of Contents</summary>
 
@@ -8,26 +9,26 @@
   - [📋 Kanban Board](#-kanban-board)
     - [Kanban Board.](#kanban-board)
     - [The members: @Salwa, @Ahmed, @Talha](#the-members-salwa-ahmed-talha)
-  - [Tech Stack  ](#tech-stack--)
-  - [✨ Key Features  ](#-key-features--)
-  - [📘 Getting Started  ](#-getting-started--)
+  - [Tech Stack ](#tech-stack--)
+  - [✨ Key Features ](#-key-features--)
+  - [📘 Getting Started ](#-getting-started--)
     - [📋 Prerequisites](#-prerequisites)
     - [Setup ](#setup-)
     - [📥 Installation](#-installation)
     - [💾 Database](#-database)
     - [💻 Usage](#-usage)
     - [🧪 Tests](#-tests)
-  - [👨‍💻 Authors  ](#-authors--)
+  - [👨‍💻 Authors ](#-authors--)
     - [👤 **Salwa Ballouti**:](#-salwa-ballouti)
     - [👤 **Ahmed Hasan Rony**](#-ahmed-hasan-rony)
     - [👤 **Muhammad Talha Hanif**](#-muhammad-talha-hanif)
-  - [🎯 Future Features  ](#-future-features--)
+  - [🎯 Future Features ](#-future-features--)
   - [🙏 Acknowledgements](#-acknowledgements)
   - [💎 Resources](#-resources)
-  - [🤝 Contribution  ](#-contribution--)
-  - [💖 Show Your Support  ](#-show-your-support--)
+  - [🤝 Contribution ](#-contribution--)
+  - [💖 Show Your Support ](#-show-your-support--)
   - [📜 License ](#-license-)
-</details>
+  </details>
 
 # 🚗 RENTCAR - Luxury cars renting platform <a name="about-project"></a>
 
@@ -43,59 +44,54 @@
   <img src="https://github.com/roniy68/capstone-rails/assets/77187003/f2359c19-0684-4b01-97b2-66236afa374c" width=400 height=250 alt="screenshot" />
 </p>
 
-
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
-
 ## 🚀 Live Demo
 
 [RENTCAR-Luxury Cars](https://capstone-rails.onrender.com/)
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
-## 📋 Kanban Board 
+## 📋 Kanban Board
 
 We have used a Kanban board to split the tasks and simplify the project workflow.
 
 ### [Kanban Board](https://github.com/roniy68/capstone-rails/projects/1).
 
 ### The members: [@Salwa](https://github.com/Salwa99), [@Ahmed](https://github.com/roniy68), [@Talha](https://github.com/Talha-Hanif5666)
 
-
 <img src="https://github.com/roniy68/capstone-rails/assets/77187003/bdb6c83b-1e4c-4d1b-98ed-cf28d59ed7f2" width=600 height=400 alt="kanban board" />
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
-## Tech Stack  <a name="tech-stack"></a>
-
-- **Back-end** 💻:   
-  <details>
-  <summary>Client</summary>
-  <ul>
-    <li><a href="https://rubyonrails.org/">Ruby on Rails</a></li>
-    <li><a href="https://redux-toolkit.js.org/">PostgreSQL</a></li>
-  </ul>
-</details>
+## Tech Stack <a name="tech-stack"></a>
 
-  - **Front-end** 💻: 
+- **Back-end** 💻:
     <details>
     <summary>Client</summary>
     <ul>
-      <li><a href="https://react.dev/">React</a></li>
-      <li><a href="https://redux-toolkit.js.org/">Redux Toolkit</a></li>
-      <li><a href="https://reactrouter.com/en/main">React Router</a></li>
-      <li><a href="https://tailwindcss.com/">Tailwind</a></li>
-      <li><a href="https://reactrouter.com/en/main">React icons</a></li>
+      <li><a href="https://rubyonrails.org/">Ruby on Rails</a></li>
+      <li><a href="https://redux-toolkit.js.org/">PostgreSQL</a></li>
     </ul>
-</details>
+  </details>
 
+  - **Front-end** 💻:
+  <details>
+  <summary>Client</summary>
+  <ul>
+  <li><a href="https://react.dev/">React</a></li>
+  <li><a href="https://redux-toolkit.js.org/">Redux Toolkit</a></li>
+  <li><a href="https://reactrouter.com/en/main">React Router</a></li>
+  <li><a href="https://tailwindcss.com/">Tailwind</a></li>
+  <li><a href="https://reactrouter.com/en/main">React icons</a></li>
+  </ul>
+  </details>
 
-- **Tools** 🛠: 
+- **Tools** 🛠:
   - [Rspec](https://rspec.info/)
   - [Esbuild](https://esbuild.github.io/)
   - [Render](https://render.com/)
 
-
 <details>
 <summary>Linter</summary>
   <ul>
@@ -107,7 +103,7 @@ We have used a Kanban board to split the tasks and simplify the project workflow
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
-## ✨ Key Features  <a name="key-features"></a>
+## ✨ Key Features <a name="key-features"></a>
 
 - **Log in with a username to access the palteform.**
 - **Browse list of available cars.**
@@ -118,13 +114,14 @@ We have used a Kanban board to split the tasks and simplify the project workflow
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
-## 📘 Getting Started  <a name="getting-started"></a>
+## 📘 Getting Started <a name="getting-started"></a>
 
 To get a local copy up and running, follow these steps.
 
 ### 📋 Prerequisites
 
 Make sure you have the following installed on your machine:
+
 - [Ruby 3.1.3 or higher](https://www.ruby-lang.org/en/)
 - [Rails 7.0.4 or higher](https://rubyonrails.org/)
 - [PostgreSQL 15.2 or higher](https://www.postgresql.org/)
@@ -143,6 +140,7 @@ Clone this repository to your desired foler.
 ```
 
 ### 📥 Installation
+
 Install the required gems with:
 
 ```sh
@@ -155,6 +153,8 @@ Install the node dependencies with:
 yarn install
 ```
 
+or
+
 ```sh
 npm install
 ```
@@ -187,19 +187,21 @@ To run the project, execute the following command:
 ```sh
   ./bin/dev
 ```
+
 ### 🧪 Tests
 
 To run tests, run the following command:
 
 ```sh
-rspec spec 
+rspec spec
 ```
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
-## 👨‍💻 Authors  <a name="author"></a>
+## 👨‍💻 Authors <a name="author"></a>
 
 ### 👤 **Salwa Ballouti**:
+
 - GitHub: [@Salwa99](https://github.com/Salwa99)
 - Twitter: [@SalwaBallouti](https://twitter.com/salwa_ballouti)
 - LinkedIn: [LinkedIn](https://www.linkedin.com/in/salwa-ballouti)
@@ -218,7 +220,7 @@ rspec spec
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
-## 🎯 Future Features  <a name="future-features"></a>
+## 🎯 Future Features <a name="future-features"></a>
 
 - [ ] Implement the full authentication.
 - [ ] Implement edit car or reservation.
@@ -228,7 +230,7 @@ rspec spec
 
 ## 🙏 Acknowledgements
 
-This app was designed based on an original design idea by [Murat Korkmaz](https://www.behance.net/muratk) on Behance. 
+This app was designed based on an original design idea by [Murat Korkmaz](https://www.behance.net/muratk) on Behance.
 We would like to thank Murat Korkmaz for this inspiring design.
 
 - [App Design Template](https://www.behance.net/gallery/26425031/Vespa-Responsive-Redesign)
@@ -238,20 +240,22 @@ We would like to thank Murat Korkmaz for this inspiring design.
 ## 💎 Resources
 
 🎨 **Colors**
+
 - 🟢 Accent: #96bf01
 
 🖌 **Fonts**
+
 - Normal: [Roboto](https://fonts.google.com/specimen/Roboto)
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
-## 🤝 Contribution  <a name="contribution"></a>
+## 🤝 Contribution <a name="contribution"></a>
 
 Contributions, issues, and feature requests are welcome!
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
-## 💖 Show Your Support  <a name="support"></a>
+## 💖 Show Your Support <a name="support"></a>
 
 If you like this project, please consider giving it a ⭐.
 

app/javascript/components/fragments/Layout.jsx

@@ -2,11 +2,11 @@ import React, { useEffect, useState } from 'react'
 import Sidebar from './Sidebar'
 import { Outlet, useNavigate } from 'react-router-dom'
 // import NavBar from './NavBar'
-import { HiOutlineMenu, HiAnnotation, HiBell, HiOutlineUser } from 'react-icons/hi'
+import { HiOutlineMenu, HiAnnotation, HiOutlineUser } from 'react-icons/hi'
 import { AiOutlineLogout } from "react-icons/ai";
 
 const Layout = () => {
-  const [show, setShow] = useState(true)
+  const [show, setShow] = useState(false)
 
   const handleClick = (e) => {
     setShow(current => !current)
@@ -41,19 +41,19 @@ const Layout = () => {
             <div className="flex bg-[#96bf01] lg:h-[80px] md:h-[60px] p-4 sticky top-0 z-10 items-center justify-between">
               {/* Navbar Ham burger */}
               <div onClick={handleClick} className='flex-none text-white'>
-                <HiOutlineMenu size={36} />
+                <HiOutlineMenu size={30} />
               </div>
               {/* Navbar Menus */}
               <div className='flex text-slate-50 justify-end flex-auto gap-2'>
                 <div className='p-6'>
-                  <HiAnnotation size={36} />
+                  <HiAnnotation size={30} />
                 </div>
                 <div className='p-6'>
-                  <HiOutlineUser size={36} />
+                  <HiOutlineUser size={30} />
                 </div>
 
                 <div className='p-6'>
-                  <AiOutlineLogout size={36} onClick={handleLogout} />
+                  <AiOutlineLogout size={30} onClick={handleLogout} />
                 </div>
               </div>
             </div>

app/javascript/components/fragments/Sidebar.jsx

@@ -50,7 +50,7 @@ const Sidebar = () => {
           {links.map((link) => (
             <Link to={link.url}>
               <li
-                className={`p-4 ml-6 mb-4 text-[20px] lg:text-[30px] rounded-md ${
+                className={`p-4 ml-6 mb-4 text-[15px] lg:text-[25px] rounded-md ${
                   location.pathname === link.url
                     ? "bg-[#96bf01] text-white"
                     : "hover:bg-[#96bf01] hover:text-white"

app/javascript/components/fragments/navigation/AddCar.jsx

@@ -51,7 +51,6 @@ const AddCar = () => {
 
       if (response.ok) {
         const newCar = await response.json();
-        console.log("New car added:", newCar);
 
         setCarData({
           name: "",
@@ -72,9 +71,14 @@ const AddCar = () => {
   };
 
   return (
-    <div className="flex flex-col items-center justify-center h-screen">
-      {carAdded && <p className="bg-green-200 font-bold mb-6 p-4 rounded shadow-lg">New car has been added!</p>}
-      <div className="h-auto lg:w-[800px] w-[600px] p-6 bg-slate-300 rounded-lg shadow-lg">
+    <div className="flex flex-col items-center justify-center">
+      {carAdded && (
+        <p className="bg-green-200 font-bold mb-6 p-2 rounded shadow-lg">
+          New car has been added!
+        </p>
+      )}
+      <div className="h-auto w-auto lg:w-[800px] p-6 bg-slate-300 rounded-lg shadow-lg">
+        <h1 className="text-center text-[25px] font-bold mb-6">Add Car</h1>
         <form onSubmit={handleSubmit} className="space-y-4 shadow">
           <div>
             <label htmlFor="name" className="block mb-1">
@@ -139,7 +143,6 @@ const AddCar = () => {
               onChange={handleChange}
               className="w-full border border-gray-300 rounded px-3 py-2"
             />
-
           </div>
           <div className="flex justify-center items-center">
             <button
@@ -155,4 +158,4 @@ const AddCar = () => {
   );
 };
 
-export default AddCar;
+export default AddCar;

app/javascript/components/fragments/navigation/AllCars.jsx

@@ -61,41 +61,45 @@ const AllCars = () => {
         return cars
             .slice(startIndex, endIndex + 1)
             .map((car) => (
-                <li key={car.id} className="flex items-center space-x-4 py-4" style={{ transform: "scale(1.7)", marginTop: "60px" }}>
-                    <Link to={`/detail/${car.id}`} className="flex-shrink-0">
-                        <img
-                            src={car.photo}
-                            alt={car.name}
-                            className="w-20 h-20 object-cover rounded p-2"
-                        />
-                    </Link>
-                    <div className="flex-grow">
-                        <p>
-                            {car.name} - {car.model}
-                        </p>
-                    </div>
-                    <button
-                        type="button" onClick={() => handleDelete(car.id)}
-                        className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-sm text-sm float-right "
-                    >
-                        Delete Car
-                    </button>
-                </li>
-
-
-            ));
+                <li
+  key={car.id}
+  className="flex items-center space-x-4 py-4 sm:max-w-600px mx-auto"
+  style={{ marginTop: "60px" }}
+>
+  <Link to={`/detail/${car.id}`} className="flex-shrink-0">
+    <img
+      src={car.photo}
+      alt={car.name}
+      className="w-24 h-24 lg:w-52 lg:h-auto object-cover rounded p-2"
+    />
+  </Link>
+  <div className="flex-grow text-center ml-6">
+    <p className="text-xl my-2">
+      {car.name} - {car.model}
+    </p>
+  </div>
+  <div>
+    <button
+      type="button"
+      onClick={() => handleDelete(car.id)}
+      className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-sm text-lg"
+    >
+      Delete
+    </button>
+  </div>
+</li>
+    ));
     };
 
     return (
-        <div className="flex flex-col items-center w-300px">
+        <div className=" flex flex-1 flex-col p-6 items-center w-auto ">
             <div>
                 <h1 className="flex items-center justify-center font-bold mt-10 text-5xl">
                     ALL CARS
                 </h1>
-                <p className="text-3xl">Please press the Delete button to delete cars</p>
             </div>
 
-            <div>
+            <div className=" w-auto lg:w-[800px]">
                 <ul>{renderCars()}</ul>
             </div>
         </div>