From 1cef565dfe64281f17922a4fbce4de7af5744860 Mon Sep 17 00:00:00 2001 From: aelassas Date: Sat, 21 Dec 2024 09:23:29 +0100 Subject: [PATCH] Refactor navigation links to use useNavigate and update CSS class names for consistency --- frontend/src/assets/css/booking-list.css | 1 + frontend/src/assets/css/bookings.css | 7 +- frontend/src/assets/css/car.css | 2 +- frontend/src/assets/css/change-password.css | 4 +- frontend/src/assets/css/common.css | 15 +- frontend/src/assets/css/header.css | 9 ++ frontend/src/assets/css/index.css | 2 +- .../src/assets/css/location-carrousel.css | 2 +- frontend/src/assets/css/signin.css | 2 +- frontend/src/components/BookingList.tsx | 5 +- frontend/src/components/Error.tsx | 27 ++-- frontend/src/components/FaqList.tsx | 63 ++++---- frontend/src/components/Header.tsx | 138 +++++++++++++----- frontend/src/components/Map.tsx | 1 - frontend/src/components/SuspenseRouter.tsx | 1 + frontend/src/pages/Activate.tsx | 7 +- frontend/src/pages/Error.tsx | 17 ++- frontend/src/pages/ForgotPassword.tsx | 10 +- frontend/src/pages/Home.tsx | 5 +- frontend/src/pages/Info.tsx | 19 ++- frontend/src/pages/NoMatch.tsx | 9 +- frontend/src/pages/ResetPassword.tsx | 4 +- frontend/src/pages/SignIn.tsx | 9 +- frontend/src/pages/SignUp.tsx | 2 +- 24 files changed, 235 insertions(+), 126 deletions(-) diff --git a/frontend/src/assets/css/booking-list.css b/frontend/src/assets/css/booking-list.css index f62cb3b90..2cb6a46ca 100644 --- 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 index 63d93149b..0c45640dc 100644 --- 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 index 6718763a1..ebf03edc1 100644 --- 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 index a9115ae1f..669536628 100644 --- 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 index 36906d21b..22904201e 100644 --- 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 index 198277b68..d2450d5bf 100644 --- 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 index c720c1d3f..1ce9b051d 100644 --- 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 index 9ff2ff578..bbd42051b 100644 --- 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 index 8ccce7b66..73b2e2248 100644 --- 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 index 9e4318130..1ac717c8e 100644 --- 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() 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 ( <> - + navigate(`/booking?b=${row._id}`)}> diff --git a/frontend/src/components/Error.tsx b/frontend/src/components/Error.tsx index b582d0cf0..d8ae32bcd 100644 --- 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) => ( -
-
- {message} -
- {homeLink && ( -

- {commonStrings.GO_TO_HOME} -

+const Error = ({ message, style, homeLink }: ErrorProps) => { + const navigate = useNavigate() + + return ( +
+
+ {message} +
+ {homeLink && ( +

+ +

)} -
+
) +} export default Error diff --git a/frontend/src/components/FaqList.tsx b/frontend/src/components/FaqList.tsx index 8dd022005..43cac139f 100644 --- 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 = () => ( -
-

{strings.FAQ_TITLE}

-
- - } className="accordion-title">{strings.FAQ_DOCUMENTS_TITLE} - {strings.FAQ_DOCUMENTS_TEXT} - - - } className="accordion-title">{strings.FAQ_SERVICES_TITLE} - {strings.FAQ_SERVICES_TEXT} - +const Faq = () => { + const navigate = useNavigate() - - } className="accordion-title">{strings.FAQ_AGE_TITLE} - {strings.FAQ_AGE_TEXT} - - - } className="accordion-title">{strings.FAQ_CANCEL_TITLE} - {strings.FAQ_CANCEL_TEXT} - + return ( +
+

{strings.FAQ_TITLE}

+
+ + } className="accordion-title">{strings.FAQ_DOCUMENTS_TITLE} + {strings.FAQ_DOCUMENTS_TEXT} + + + } className="accordion-title">{strings.FAQ_SERVICES_TITLE} + {strings.FAQ_SERVICES_TEXT} + + + + } className="accordion-title">{strings.FAQ_AGE_TITLE} + {strings.FAQ_AGE_TEXT} + + + } className="accordion-title">{strings.FAQ_CANCEL_TITLE} + {strings.FAQ_CANCEL_TEXT} + +
+
- -
-) + ) +} export default Faq diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx index 668d65200..84e6b7e03 100644 --- a/frontend/src/components/Header.tsx +++ b/frontend/src/components/Header.tsx @@ -11,10 +11,9 @@ import { Button, Drawer, List, - ListItemButton, ListItemIcon, ListItemText, - Link + ListItem } from '@mui/material' import { Menu as MenuIcon, @@ -60,8 +59,6 @@ interface HeaderProps { headerTitle?: string } -const ListItemLink = (props: any) => - const Header = ({ user, hidden, @@ -345,59 +342,122 @@ const Header = ({ - BookCars + {!env.isMobile && headerTitle &&
{headerTitle}
} )} - + + - - + { + navigate('/') + handleSideMenuClose() + }} + > + - + {isSignedIn && ( - - + { + navigate('/bookings') + handleSideMenuClose() + }} + > + - + )} - - + { + navigate('/suppliers') + handleSideMenuClose() + }} + > + - - - + + { + navigate('/locations') + handleSideMenuClose() + }} + > + - - - + + { + navigate('/about') + handleSideMenuClose() + }} + > + - - - + + { + navigate('/privacy') + handleSideMenuClose() + }} + > + - - - + + { + navigate('/tos') + handleSideMenuClose() + }} + > + - - - + + { + navigate('/faq') + handleSideMenuClose() + }} + > + - - - + + { + navigate('/contact') + handleSideMenuClose() + }} + > + - + {env.isMobile && !hideSignin && !isSignedIn && isLoaded && !loading && ( - - - - + <> + { + navigate('/sign-in') + handleSideMenuClose() + }} + > + + + + { + navigate('/sign-up') + handleSideMenuClose() + }} + > + + + + )} + {(env.isMobile || !headerTitle) &&
}
{isLoaded && !loading && ( @@ -413,12 +473,12 @@ const Header = ({ )} {!hideSignin && !isSignedIn && isLoaded && !loading && ( - )} {!hideSignin && !isSignedIn && isLoaded && !loading && ( - )} diff --git a/frontend/src/components/Map.tsx b/frontend/src/components/Map.tsx index 3f35151bc..c3841028e 100644 --- a/frontend/src/components/Map.tsx +++ b/frontend/src/components/Map.tsx @@ -193,7 +193,6 @@ const Map = ({ > diff --git a/frontend/src/components/SuspenseRouter.tsx b/frontend/src/components/SuspenseRouter.tsx index 0ffcc534e..642db9862 100644 --- a/frontend/src/components/SuspenseRouter.tsx +++ b/frontend/src/components/SuspenseRouter.tsx @@ -10,6 +10,7 @@ export interface BrowserRouterProps { export const SuspenseRouter = ({ basename, children, window }: BrowserRouterProps) => { const historyRef = useRef(null) + // eslint-disable-next-line @typescript-eslint/no-unused-vars const [isPending, startTransition] = useTransition() if (historyRef.current == null) { diff --git a/frontend/src/pages/Activate.tsx b/frontend/src/pages/Activate.tsx index d507fb5f0..f530e35db 100644 --- a/frontend/src/pages/Activate.tsx +++ b/frontend/src/pages/Activate.tsx @@ -6,7 +6,6 @@ import { FormHelperText, Button, Paper, - Link } from '@mui/material' import { useNavigate } from 'react-router-dom' import * as bookcarsTypes from ':bookcars-types' @@ -166,7 +165,7 @@ const Activate = () => { {mStrings.RESEND}

- {commonStrings.GO_TO_HOME} +

@@ -206,10 +205,10 @@ const Activate = () => {
- -
diff --git a/frontend/src/pages/Error.tsx b/frontend/src/pages/Error.tsx index d8a93f5f3..554e6c24d 100644 --- a/frontend/src/pages/Error.tsx +++ b/frontend/src/pages/Error.tsx @@ -1,16 +1,21 @@ 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' interface ErrorProps { style?: React.CSSProperties } -const Error = ({ style }: ErrorProps) => ( -
-

{commonStrings.GENERIC_ERROR}

- {commonStrings.GO_TO_HOME} -
+const Error = ({ style }: ErrorProps) => { + const navigate = useNavigate() + + return ( +
+

{commonStrings.GENERIC_ERROR}

+ +
) +} export default Error diff --git a/frontend/src/pages/ForgotPassword.tsx b/frontend/src/pages/ForgotPassword.tsx index f0f2d7693..3f590c7ca 100644 --- a/frontend/src/pages/ForgotPassword.tsx +++ b/frontend/src/pages/ForgotPassword.tsx @@ -1,4 +1,5 @@ import React, { useState } from 'react' +import { useNavigate } from 'react-router-dom' import { Input, InputLabel, @@ -6,7 +7,6 @@ import { FormHelperText, Button, Paper, - Link } from '@mui/material' import validator from 'validator' import * as bookcarsTypes from ':bookcars-types' @@ -21,6 +21,8 @@ import NoMatch from './NoMatch' import '@/assets/css/forgot-password.css' const ForgotPassword = () => { + const navigate = useNavigate() + const [email, setEmail] = useState('') const [visible, setVisible] = useState(false) const [error, setError] = useState(false) @@ -126,7 +128,7 @@ const ForgotPassword = () => {
{strings.EMAIL_SENT}

- {commonStrings.GO_TO_HOME} +

)} @@ -145,10 +147,10 @@ const ForgotPassword = () => {
- -
diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx index eea19d215..3f223ca88 100644 --- a/frontend/src/pages/Home.tsx +++ b/frontend/src/pages/Home.tsx @@ -1,4 +1,5 @@ import React, { useEffect, useState } from 'react' +import { useNavigate } from 'react-router-dom' import { Button, // Checkbox, @@ -46,6 +47,8 @@ import Maxi from '@/assets/img/maxi.png' import '@/assets/css/home.css' const Home = () => { + const navigate = useNavigate() + const [suppliers, setSuppliers] = useState([]) const [countries, setCountries] = useState([]) const [pickupLocation, setPickupLocation] = useState('') @@ -533,7 +536,7 @@ const Home = () => { diff --git a/frontend/src/pages/Info.tsx b/frontend/src/pages/Info.tsx index ce02203c3..7287ca751 100644 --- a/frontend/src/pages/Info.tsx +++ b/frontend/src/pages/Info.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' interface InfoProps { @@ -14,11 +15,15 @@ const Info = ({ message, hideLink, style -}: InfoProps) => ( -
-

{message}

- {!hideLink && {commonStrings.GO_TO_HOME}} -
-) +}: InfoProps) => { + const navigate = useNavigate() + + return ( +
+

{message}

+ {!hideLink && } +
+ ) +} export default Info diff --git a/frontend/src/pages/NoMatch.tsx b/frontend/src/pages/NoMatch.tsx index ab88e8a30..935317f8e 100644 --- a/frontend/src/pages/NoMatch.tsx +++ b/frontend/src/pages/NoMatch.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 { strings } from '@/lang/no-match' import Layout from '@/components/Layout' @@ -9,10 +10,14 @@ interface NoMatchProps { } const NoMatch = ({ hideHeader }: NoMatchProps) => { + const navigate = useNavigate() + const noMatch = () => (

{strings.NO_MATCH}

- {commonStrings.GO_TO_HOME} +

+ +

) diff --git a/frontend/src/pages/ResetPassword.tsx b/frontend/src/pages/ResetPassword.tsx index 207b83fb3..b8b888285 100644 --- a/frontend/src/pages/ResetPassword.tsx +++ b/frontend/src/pages/ResetPassword.tsx @@ -166,10 +166,10 @@ const ResetPassword = () => {
- -
diff --git a/frontend/src/pages/SignIn.tsx b/frontend/src/pages/SignIn.tsx index e4b2f4677..78eacdc4b 100644 --- a/frontend/src/pages/SignIn.tsx +++ b/frontend/src/pages/SignIn.tsx @@ -5,7 +5,6 @@ import { InputLabel, Input, Button, - Link } from '@mui/material' import { useNavigate } from 'react-router-dom' import * as bookcarsTypes from ':bookcars-types' @@ -137,17 +136,17 @@ const SignIn = () => {
-
- {strings.RESET_PASSWORD} +
+
- -
diff --git a/frontend/src/pages/SignUp.tsx b/frontend/src/pages/SignUp.tsx index 538fad6d6..9c57b0c83 100644 --- a/frontend/src/pages/SignUp.tsx +++ b/frontend/src/pages/SignUp.tsx @@ -392,7 +392,7 @@ const SignUp = () => { -