Refactor navigation links to use useNavigate and update CSS class nam…

…es for consistency
aelassas · Dec 21, 2024 · 1cef565 · 1cef565
1 parent 17fda84
commit 1cef565
Show file tree

Hide file tree

Showing 24 changed files with 235 additions and 126 deletions.
diff --git a/frontend/src/assets/css/booking-list.css b/frontend/src/assets/css/booking-list.css
@@ -120,6 +120,7 @@ div.bs-list div.booking-details div.bs-pending {
   background: #FBDCC2;
   color: #EF6C00;
 }
+
 div.bs-list div.booking-details div.bs-deposit {
   background: #CDECDA;
   color: #3CB371;

diff --git a/frontend/src/assets/css/bookings.css b/frontend/src/assets/css/bookings.css
@@ -2,13 +2,8 @@ div.bookings {
   display: flex;
   flex-direction: column;
   align-items: center;
-
   position: absolute;
-  top: 64px;
-  right: 0;
-  bottom: 0;
-  left: 0;
-
+  inset: 64px 0 0;
   transform: translate3d(0, 0, 0);
 }
 

diff --git a/frontend/src/assets/css/car.css b/frontend/src/assets/css/car.css
@@ -322,7 +322,7 @@ div.car-container article div.action {
     max-width: 600px;
   }
 
-    div.car-container article {
+  div.car-container article {
     flex-direction: column;
     width: calc(100% - 20px);
   }

diff --git a/frontend/src/assets/css/change-password.css b/frontend/src/assets/css/change-password.css
@@ -15,11 +15,11 @@ div.password-reset .password-reset-form-title {
 }
 
 div.password-reset .password-reset-form {
-  margin: 100px 0 300px 0;
+  margin: 100px 0 300px;
 }
 
 div.password-reset .password-reset-form div.buttons {
-  margin: 20px 0 40px 0;
+  margin: 20px 0 40px;
   display: flex;
   flex-direction: row;
   justify-content: center;

diff --git a/frontend/src/assets/css/common.css b/frontend/src/assets/css/common.css
@@ -41,6 +41,20 @@
   margin-bottom: 10px !important;
 }
 
+.btn-lnk {
+  background-color: transparent !important;
+  color: #1a1a1a !important;
+  font-weight: 400 !important;
+  text-decoration: underline !important;
+  font-size: 16px !important;
+  text-transform: none !important;
+  padding: 0 !important;
+}
+
+.btn-lnk:hover {
+  opacity: 0.8;
+}
+
 .bold {
   font-weight: 500 !important;
 }
@@ -75,7 +89,6 @@
 
 .msg p {
   color: #333;
-  margin-top: 0;
 }
 
 .msg .msg-link {

diff --git a/frontend/src/assets/css/header.css b/frontend/src/assets/css/header.css
@@ -27,6 +27,13 @@
   color: #1a1a1a;
 }
 
+.side-menu li {
+  cursor: pointer;
+}
+
+.side-menu li:hover {
+  background-color: #f1f1f1;
+}
 
 .header-action {
   margin-right: 20px;
@@ -60,6 +67,8 @@
 
 .header .logo {
   text-decoration: none;
+  text-transform: none;
+  background: transparent;
   font-size: 18px;
   font-weight: 500;
   color: #121212;

diff --git a/frontend/src/assets/css/index.css b/frontend/src/assets/css/index.css
@@ -8,6 +8,6 @@
   visibility: hidden !important;
 } */
 
-.github-fork-ribbon:before {
+.github-fork-ribbon::before {
   background-color: #272727;
 }
diff --git a/frontend/src/assets/css/location-carrousel.css b/frontend/src/assets/css/location-carrousel.css
@@ -2,7 +2,7 @@ div.location-caroussel .slick-dots {
   bottom: -60px;
 }
 
-div.location-caroussel .slick-dots li.slick-active button:before {
+div.location-caroussel .slick-dots li.slick-active button::before {
   color: #1976D2;
 }
 

diff --git a/frontend/src/assets/css/signin.css b/frontend/src/assets/css/signin.css
@@ -43,7 +43,7 @@ div.signin div.stay-connected label {
   user-select: none;
 }
 
-div.signin div.forgot-password {
+div.signin div.forgot-password-wrapper {
   margin-top: 15px;
 }
 

diff --git a/frontend/src/components/BookingList.tsx b/frontend/src/components/BookingList.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
 import {
   DataGrid,
   GridColDef,
@@ -69,6 +70,8 @@ const BookingList = ({
   checkboxSelection,
   onLoad,
 }: BookingListProps) => {
+  const navigate = useNavigate()
+
   const [user, setUser] = useState<bookcarsTypes.User>()
   const [page, setPage] = useState(0)
   const [pageSize, setPageSize] = useState(env.isMobile ? env.BOOKINGS_MOBILE_PAGE_SIZE : env.BOOKINGS_PAGE_SIZE)
@@ -255,7 +258,7 @@ const BookingList = ({
           return (
             <>
               <Tooltip title={strings.VIEW}>
-                <IconButton href={`booking?b=${row._id}`}>
+                <IconButton onClick={() => navigate(`/booking?b=${row._id}`)}>
                   <ViewIcon />
                 </IconButton>
               </Tooltip>

diff --git a/frontend/src/components/Error.tsx b/frontend/src/components/Error.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
-import { Link } from '@mui/material'
+import { useNavigate } from 'react-router-dom'
+import { Button } from '@mui/material'
 import { strings as commonStrings } from '@/lang/common'
 
 import '@/assets/css/error.css'
@@ -10,17 +11,21 @@ interface ErrorProps {
   homeLink?: boolean
 }
 
-const Error = ({ message, style, homeLink }: ErrorProps) => (
-  <div style={style || {}}>
-    <div className="error">
-      <span className="message">{message}</span>
-    </div>
-    {homeLink && (
-    <p>
-      <Link href="/">{commonStrings.GO_TO_HOME}</Link>
-    </p>
+const Error = ({ message, style, homeLink }: ErrorProps) => {
+  const navigate = useNavigate()
+
+  return (
+    <div style={style || {}}>
+      <div className="error">
+        <span className="message">{message}</span>
+      </div>
+      {homeLink && (
+        <p>
+          <Button variant="text" onClick={() => navigate('/')} className="btn-lnk">{commonStrings.GO_TO_HOME}</Button>
+        </p>
       )}
-  </div>
+    </div>
   )
+}
 
 export default Error
diff --git a/frontend/src/components/FaqList.tsx b/frontend/src/components/FaqList.tsx
@@ -1,40 +1,45 @@
 import React from 'react'
+import { useNavigate } from 'react-router-dom'
 import { Accordion, AccordionDetails, AccordionSummary, Button } from '@mui/material'
 import { ExpandMore } from '@mui/icons-material'
 import { strings } from '@/lang/faq-list'
 
 import '@/assets/css/faq-list.css'
 
-const Faq = () => (
-  <div className="faq-list">
-    <h2>{strings.FAQ_TITLE}</h2>
-    <div className="questions">
-      <Accordion>
-        <AccordionSummary expandIcon={<ExpandMore />} className="accordion-title">{strings.FAQ_DOCUMENTS_TITLE}</AccordionSummary>
-        <AccordionDetails className="accordion-details">{strings.FAQ_DOCUMENTS_TEXT}</AccordionDetails>
-      </Accordion>
-      <Accordion>
-        <AccordionSummary expandIcon={<ExpandMore />} className="accordion-title">{strings.FAQ_SERVICES_TITLE}</AccordionSummary>
-        <AccordionDetails className="accordion-details">{strings.FAQ_SERVICES_TEXT}</AccordionDetails>
-      </Accordion>
+const Faq = () => {
+  const navigate = useNavigate()
 
-      <Accordion>
-        <AccordionSummary expandIcon={<ExpandMore />} className="accordion-title">{strings.FAQ_AGE_TITLE}</AccordionSummary>
-        <AccordionDetails className="accordion-details">{strings.FAQ_AGE_TEXT}</AccordionDetails>
-      </Accordion>
-      <Accordion>
-        <AccordionSummary expandIcon={<ExpandMore />} className="accordion-title">{strings.FAQ_CANCEL_TITLE}</AccordionSummary>
-        <AccordionDetails className="accordion-details">{strings.FAQ_CANCEL_TEXT}</AccordionDetails>
-      </Accordion>
+  return (
+    <div className="faq-list">
+      <h2>{strings.FAQ_TITLE}</h2>
+      <div className="questions">
+        <Accordion>
+          <AccordionSummary expandIcon={<ExpandMore />} className="accordion-title">{strings.FAQ_DOCUMENTS_TITLE}</AccordionSummary>
+          <AccordionDetails className="accordion-details">{strings.FAQ_DOCUMENTS_TEXT}</AccordionDetails>
+        </Accordion>
+        <Accordion>
+          <AccordionSummary expandIcon={<ExpandMore />} className="accordion-title">{strings.FAQ_SERVICES_TITLE}</AccordionSummary>
+          <AccordionDetails className="accordion-details">{strings.FAQ_SERVICES_TEXT}</AccordionDetails>
+        </Accordion>
+
+        <Accordion>
+          <AccordionSummary expandIcon={<ExpandMore />} className="accordion-title">{strings.FAQ_AGE_TITLE}</AccordionSummary>
+          <AccordionDetails className="accordion-details">{strings.FAQ_AGE_TEXT}</AccordionDetails>
+        </Accordion>
+        <Accordion>
+          <AccordionSummary expandIcon={<ExpandMore />} className="accordion-title">{strings.FAQ_CANCEL_TITLE}</AccordionSummary>
+          <AccordionDetails className="accordion-details">{strings.FAQ_CANCEL_TEXT}</AccordionDetails>
+        </Accordion>
+      </div>
+      <Button
+        variant="contained"
+        className="btn-primary btn-home"
+        onClick={() => navigate('/contact')}
+      >
+        {strings.MORE_QUESTIONS}
+      </Button>
     </div>
-    <Button
-      variant="contained"
-      className="btn-primary btn-home"
-      href="/contact"
-    >
-      {strings.MORE_QUESTIONS}
-    </Button>
-  </div>
-)
+  )
+}
 
 export default Faq