From c698b5e0d7fa812a33e7bee09c4ee67dbe279850 Mon Sep 17 00:00:00 2001 From: Toyyib Date: Tue, 12 Dec 2023 10:58:49 +0100 Subject: [PATCH 1/2] styling --- src/components/Form/FormField.js | 32 +++++++--- src/components/Form/HideableTextFormField.js | 8 ++- src/layout/LandingPage/LandingPageLayout.js | 10 ++- .../UsersDashboard/sideNav/navConfig.js | 12 ++-- src/pages/LandingPage/Home/Home.js | 64 ++++++++++++++----- .../UserDashboard/AddNewCar/AddNewCarForm.js | 3 +- src/pages/UserDashboard/DashboardHome.js | 44 ++++--------- .../authentication/authenticationSlice.js | 4 +- src/redux/thunk.js | 5 +- src/routes/routes.js | 12 ++-- src/styles/App.css | 58 +++++++++++++++++ 11 files changed, 175 insertions(+), 77 deletions(-) diff --git a/src/components/Form/FormField.js b/src/components/Form/FormField.js index 0a36224..3b665f8 100644 --- a/src/components/Form/FormField.js +++ b/src/components/Form/FormField.js @@ -23,9 +23,9 @@ export const DateField = ({ {label} helpers.setTouched(true)} /> @@ -44,16 +44,20 @@ DateField.propTypes = { }; export const SelectField = ({ - label, className, name, id, options, ...props + label, className, name, id, options, ...rest }) => { const [field, meta] = useField(name); return ( - + {label} - {options.map((option) => ( - + {meta.touched && meta.error ? ( {meta.error} @@ -150,13 +159,20 @@ export const FileInputField = ({ const handleChange = (event) => { const file = event.currentTarget.files[0]; - helpers.setValue(file); + // helpers.setValue(file); + console.log('FIle', file); }; return ( {label} - helpers.setTouched(true)} /> + helpers.setTouched(true)} + /> {meta.touched && meta.error ? ( {meta.error} ) : null} diff --git a/src/components/Form/HideableTextFormField.js b/src/components/Form/HideableTextFormField.js index e9baf7c..5df8878 100644 --- a/src/components/Form/HideableTextFormField.js +++ b/src/components/Form/HideableTextFormField.js @@ -32,7 +32,13 @@ const HideableTextFormField = ({ {label} - + {showKey ? ( ( <>
-
+
-
+
); export default LandingPageLayout; + +const Main = styled.main` + background-color: yellow; + border: 1rem solid yellow; +`; diff --git a/src/layout/UsersDashboard/sideNav/navConfig.js b/src/layout/UsersDashboard/sideNav/navConfig.js index f992630..78d9905 100644 --- a/src/layout/UsersDashboard/sideNav/navConfig.js +++ b/src/layout/UsersDashboard/sideNav/navConfig.js @@ -1,5 +1,5 @@ import { - RESERVE_CARS, + // RESERVE_CARS, MY_RESERVATIONS, USERDASHBOARDHOME, ADD_NEW_CAR, @@ -20,11 +20,11 @@ const navConfig = [ // icon: JobsIcon(), }, - { - title: 'Reserve Cars', - path: RESERVE_CARS, - // icon: PlaneIcon(), - }, + // { + // title: 'Reserve Cars', + // path: RESERVE_CARS, + // // icon: PlaneIcon(), + // }, { title: 'Add New Cars', diff --git a/src/pages/LandingPage/Home/Home.js b/src/pages/LandingPage/Home/Home.js index 7919121..67ae51b 100644 --- a/src/pages/LandingPage/Home/Home.js +++ b/src/pages/LandingPage/Home/Home.js @@ -2,41 +2,71 @@ import React from 'react'; import styled from '@emotion/styled'; import AuthNav from '../../../layout/LandingPage/nav/AuthNav'; -import bicycleImage from '../../../components/asset/bicycle.jpg'; +// import bicycleImage from '../../../components/asset/bicycle.jpg'; const Home = () => ( - - Bicycle - - CarBooky - - - + + + CarBooky +
+ Book A car today + + + + + ); export default Home; const Container = styled.div` - width: 100%; + // backgroun-color: yellow; + border: 15rem solid yellow; + margin-bottom: 8rem; + margin-top: 6rem; + @media (max-width: 768px) { + margin-left: 2rem; + } +`; + +const Content = styled.div` + margin-top: 20rem; + position: relative; + max-width: 1200px; + // background-color: green; + + @media (max-width: 768px) { + padding: 0 20px; + } `; const Paragraph = styled.p` font-size: 3rem; margin-top: -40rem; - margin-left: 25rem; - color: green; -`; - -const Image = styled.div` - // width: 100%; + margin-left: -4rem; + background color: blue; + text-align: center; - img { - width: 100%; + @media (max-width: 768px) { + font-size: 2rem; + margin-top: -20rem; + margin-left: 10rem; } `; +// const Image = styled.div` +// img { +// width: 100%; +// } +// `; + const Auth = styled.div` margin-left: -10rem; + + @media (max-width: 768px) { + margin-left: 0; + text-align: center; + } `; diff --git a/src/pages/UserDashboard/AddNewCar/AddNewCarForm.js b/src/pages/UserDashboard/AddNewCar/AddNewCarForm.js index 6e09b3a..bfa5eac 100644 --- a/src/pages/UserDashboard/AddNewCar/AddNewCarForm.js +++ b/src/pages/UserDashboard/AddNewCar/AddNewCarForm.js @@ -2,7 +2,7 @@ import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { useNavigate } from 'react-router-dom'; import { CarSchema, carInitialValues } from '../../../models/car.model'; -import { TextInputField, TextAreaInputField } from '../../../components/Form/FormField'; +import { TextInputField, TextAreaInputField, FileInputField } from '../../../components/Form/FormField'; import FormSubmitButton from '../../../components/Button/FormSubmitButton'; import FormComponent2 from '../../../components/Form/FormComponent2'; import { postNewCar } from '../../../redux/thunk'; @@ -32,6 +32,7 @@ const AddNewCarForm = () => { + Create Car diff --git a/src/pages/UserDashboard/DashboardHome.js b/src/pages/UserDashboard/DashboardHome.js index a8329c5..281669b 100644 --- a/src/pages/UserDashboard/DashboardHome.js +++ b/src/pages/UserDashboard/DashboardHome.js @@ -6,43 +6,17 @@ import { useSelector } from 'react-redux'; import DisplayCartCard from '../../components/Card/DisplayCartCard'; import colorWheel from '../../components/asset/small_color_wheel.png'; -const DummyCards = [ - { - imageName: { colorWheel }, - name: 'Bicycle', - shortNote: - 'The VESPA C20 is a stunning moped with a modern electronic system and more', - }, - { - imageName: { colorWheel }, - name: 'Bicycle', - shortNote: - 'The VESPA C20 is a stunning moped with a modern electronic system and more', - }, - { - imageName: { colorWheel }, - name: 'Bicycle', - shortNote: - 'The VESPA C20 is a stunning moped with a modern electronic system and more', - }, - { - imageName: { colorWheel }, - name: 'Bicycle', - shortNote: - 'The VESPA C20 is a stunning moped with a modern electronic system and more', - }, -]; - const DashboardHome = () => { const [currentIndex, setCurrentIndex] = useState(0); const cars = useSelector((state) => state.cars.cars); + console.log('Cars', cars); const handleNext = () => { - setCurrentIndex((prevIndex) => (prevIndex + 3) % DummyCards.length); + setCurrentIndex((prevIndex) => (prevIndex + 3) % cars.length); }; const handlePrev = () => { - setCurrentIndex((prevIndex) => (prevIndex - 3 + DummyCards.length) % DummyCards.length); + setCurrentIndex((prevIndex) => (prevIndex - 3 + cars.length) % cars.length); }; return ( @@ -56,9 +30,9 @@ const DashboardHome = () => { - {cars.slice(currentIndex, currentIndex + 3).map((data, index) => ( + {cars.slice(currentIndex, currentIndex + 3).map((data) => ( { state.authenticatedUser = {}; - console.log('user has been logged out'); + // console.log('user has been logged out'); state.status = action.payload.status; - console.log('current status is:', state.status); + // console.log('current status is:', state.status); }) .addCase(logoutUser.rejected, (state, action) => { state.status = 'failed'; diff --git a/src/redux/thunk.js b/src/redux/thunk.js index 3d50f14..47c6576 100644 --- a/src/redux/thunk.js +++ b/src/redux/thunk.js @@ -15,9 +15,9 @@ export const getAuthenticationToken = () => localStorage.getItem('token') || fal const removeAuthenticationToken = () => localStorage.removeItem('token'); const handleResponse = async (response) => { - const { status, data, headers } = response; + const { status, data } = response; - console.log('Response headers: ', headers); + // console.log('Response headers: ', headers); if (status === 200 || status === 201) { return { data, status: 'succeeded' }; @@ -133,6 +133,7 @@ export const postNewCar = createAsyncThunk( Authorization: token, }, }); + console.log('Response', response); const { data } = await handleResponse(response); if (response.status === 200 || response.status === 201) { diff --git a/src/routes/routes.js b/src/routes/routes.js index f7a56c6..3869647 100644 --- a/src/routes/routes.js +++ b/src/routes/routes.js @@ -32,12 +32,12 @@ import DashboardHome from '../pages/UserDashboard/DashboardHome'; import AddNewCar from '../pages/UserDashboard/AddNewCar/AddNewCar'; import Contact from '../pages/LandingPage/Contact/Contact'; import DeleteList from '../components/DeleteCars/DeleteList'; -import LoadingText from '../pages/LoadingText'; +// import LoadingText from '../pages/LoadingText'; export default function Router() { const authenticationStatus = useSelector((state) => state.authentication.status); const isAuthenticated = authenticationStatus === 'succeeded'; - const isLoading = authenticationStatus === 'loading'; + // const isLoading = authenticationStatus === 'loading'; return useRoutes([ { @@ -48,10 +48,10 @@ export default function Router() { ], }, - isLoading && { - path: USERS_DASHBOARD, - element: , - }, + // isLoading && { + // path: USERS_DASHBOARD, + // element: , + // }, isAuthenticated && { path: USERS_DASHBOARD, diff --git a/src/styles/App.css b/src/styles/App.css index b3edad1..4c72826 100644 --- a/src/styles/App.css +++ b/src/styles/App.css @@ -84,3 +84,61 @@ select.css-zdsokt { gap: 10px; justify-content: space-between; } + +/* Styles for screens up to 480px wide */ +@media (max-width: 480px) { + .signin-page-outer, + .signup-page-outer, + .my-reservations-page-outer, + .reserve-cars-page-outer { + gap: 1rem; + } + + p.user-headline { + width: 90%; + } + + .reserve-page-head-description { + width: 90%; + } + + .city-submit-div { + gap: 1rem; + padding: 10px; + } +} + +/* Styles for screens between 480px and 760px wide */ +@media (min-width: 481px) and (max-width: 760px) { + .signin-page-outer, + .signup-page-outer, + .my-reservations-page-outer, + .reserve-cars-page-outer { + gap: 1.5rem; + } + + p.user-headline { + width: 80%; + } + + .reserve-page-head-description { + width: 80%; + } + + .city-submit-div { + gap: 1.5rem; + padding: 15px; + } +} + +/* Styles for screens 760px wide and above */ +@media (min-width: 761px) { + .reserve-car-inner { + padding: 2rem; + } + + .each-reservation-div { + padding: 1rem 3rem; + gap: 15px; + } +} \ No newline at end of file From aa8705169cfc826df32bf2784180e330a150b171 Mon Sep 17 00:00:00 2001 From: Toyyib Date: Tue, 12 Dec 2023 11:18:03 +0100 Subject: [PATCH 2/2] linters error cleared --- src/styles/App.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/App.css b/src/styles/App.css index 4c72826..67b477f 100644 --- a/src/styles/App.css +++ b/src/styles/App.css @@ -141,4 +141,4 @@ select.css-zdsokt { padding: 1rem 3rem; gap: 15px; } -} \ No newline at end of file +}