From 0be74aa860c3da996293c1edfd9f9d4be7ed9dd2 Mon Sep 17 00:00:00 2001
From: aelassas <akram.elassas@gmail.com>
Date: Fri, 13 Dec 2024 20:59:18 +0100
Subject: [PATCH] Update frontend layout

---
 frontend/src/assets/css/checkout.css |   2 +-
 frontend/src/assets/css/contact.css  |   1 +
 frontend/src/assets/css/footer.css   |  13 +-
 frontend/src/assets/css/settings.css |   2 +
 frontend/src/components/Footer.tsx   |   4 +-
 frontend/src/pages/Settings.tsx      | 197 ++++++++++++++-------------
 6 files changed, 113 insertions(+), 106 deletions(-)

diff --git a/frontend/src/assets/css/checkout.css b/frontend/src/assets/css/checkout.css
index 62b98ff9e..bf3710096 100644
--- a/frontend/src/assets/css/checkout.css
+++ b/frontend/src/assets/css/checkout.css
@@ -3,9 +3,9 @@ div.checkout {
   flex: 1 0 auto;
   flex-direction: row;
   justify-content: center;
-  margin: 80px 0 200px 0;
   transform: translate3d(0, 0, 0);
   min-height: 100vh;
+  margin: 80px 0 200px 0;
 }
 
 @media only screen and (width <=960px) {
diff --git a/frontend/src/assets/css/contact.css b/frontend/src/assets/css/contact.css
index 544c1dadb..75827a973 100644
--- a/frontend/src/assets/css/contact.css
+++ b/frontend/src/assets/css/contact.css
@@ -4,6 +4,7 @@ div.contact {
   flex: 1 0 auto;
   align-items: center;
   transform: translate3d(0, 0, 0);
+  min-height: 100vh;
 }
 
 div.contact .form {
diff --git a/frontend/src/assets/css/footer.css b/frontend/src/assets/css/footer.css
index 439c68892..c9144dd95 100644
--- a/frontend/src/assets/css/footer.css
+++ b/frontend/src/assets/css/footer.css
@@ -54,35 +54,34 @@ div.footer ul.links li:hover {
   text-decoration: underline;
 }
 
-div.footer div.contact {
+div.footer div.footer-contact {
   display: flex;
   flex-direction: row;
   align-items: center;
   margin: 10px 0;
 }
 
-div.footer div.contact .icon {
+div.footer div.footer-contact .icon {
   color: #525252;
   margin-right: 5px;
 }
 
-div.footer div.contact a {
+div.footer div.footer-contact a {
   text-decoration: none;
   color: #1a1a1a;
 }
 
-div.footer div.contact a:hover {
+div.footer div.footer-contact a:hover {
   /* opacity: 0.85; */
   text-decoration: underline;
-  
 }
 
-div.footer div.contact .social-icon {
+div.footer div.footer-contact .social-icon {
   color: #525252;
   margin-right: 12px;
 }
 
-div.footer div.contact .social-icon:hover{
+div.footer div.footer-contact .social-icon:hover{
   color: #1a1a1a;
 }
 
diff --git a/frontend/src/assets/css/settings.css b/frontend/src/assets/css/settings.css
index 7307b128d..b1601f6ec 100644
--- a/frontend/src/assets/css/settings.css
+++ b/frontend/src/assets/css/settings.css
@@ -7,6 +7,8 @@ div.settings {
   align-items: center;
   margin: 45px 0;
   transform: translate3d(0, 0, 0);
+  margin: 80px 0 200px 0;
+  min-height: 100vh;
 }
 
 div.settings .settings-form-wrapper {
diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx
index 81d49afed..0edd1db5b 100644
--- a/frontend/src/components/Footer.tsx
+++ b/frontend/src/components/Footer.tsx
@@ -42,11 +42,11 @@ const Footer = () => {
             <li onClick={() => navigate('/contact')}>{strings.CONTACT}</li>
             <li onClick={() => navigate('/faq')}>{strings.FAQ}</li>
           </ul>
-          <div className="contact">
+          <div className="footer-contact">
             <MailOutline className="icon" />
             <a href="mailto:info@bookcars.ma">info@bookcars.ma</a>
           </div>
-          <div className="contact">
+          <div className="footer-contact">
             <Link href="https://www.facebook.com/" target="_blank"><FacebookIcon className="social-icon" /></Link>
             <Link href="https://x.com/" target="_blank"><X className="social-icon" /></Link>
             <Link href="https://www.linkedin.com/" target="_blank"><LinkedIn className="social-icon" /></Link>
diff --git a/frontend/src/pages/Settings.tsx b/frontend/src/pages/Settings.tsx
index 0b07d2710..18127de75 100644
--- a/frontend/src/pages/Settings.tsx
+++ b/frontend/src/pages/Settings.tsx
@@ -23,9 +23,10 @@ import Backdrop from '@/components/SimpleBackdrop'
 import DatePicker from '@/components/DatePicker'
 import Avatar from '@/components/Avatar'
 import * as helper from '@/common/helper'
+import DriverLicense from '@/components/DriverLicense'
+import Footer from '@/components/Footer'
 
 import '@/assets/css/settings.css'
-import DriverLicense from '@/components/DriverLicense'
 
 const Settings = () => {
   const navigate = useNavigate()
@@ -178,103 +179,107 @@ const Settings = () => {
   return (
     <Layout onLoad={onLoad} user={user} strict>
       {visible && user && (
-        <div className="settings">
-
-          <Paper className="settings-form settings-form-wrapper" elevation={10}>
-            <form onSubmit={handleSubmit}>
-              <Avatar
-                loggedUser={user}
-                user={user}
-                size="large"
-                readonly={false}
-                onBeforeUpload={onBeforeUpload}
-                onChange={onAvatarChange}
-                color="disabled"
-                className="avatar-ctn"
-              />
-              <FormControl fullWidth margin="dense">
-                <InputLabel className="required">{commonStrings.FULL_NAME}</InputLabel>
-                <Input type="text" required onChange={handleFullNameChange} autoComplete="off" value={fullName} />
-              </FormControl>
-              <FormControl fullWidth margin="dense">
-                <InputLabel className="required">{commonStrings.EMAIL}</InputLabel>
-                <Input type="text" value={user.email} disabled />
-              </FormControl>
-              <FormControl fullWidth margin="dense">
-                <InputLabel className="required">{commonStrings.PHONE}</InputLabel>
-                <Input type="text" required error={!phoneValid} onChange={handlePhoneChange} autoComplete="off" value={phone} />
-                <FormHelperText error={!phoneValid}>{(!phoneValid && commonStrings.PHONE_NOT_VALID) || ''}</FormHelperText>
-              </FormControl>
-              <FormControl fullWidth margin="dense">
-                <DatePicker
-                  label={commonStrings.BIRTH_DATE}
-                  value={birthDate}
-                  variant="standard"
-                  required
-                  onChange={(_birthDate) => {
-                    if (_birthDate) {
-                      const _birthDateValid = validateBirthDate(_birthDate)
-
-                      setBirthDate(_birthDate)
-                      setBirthDateValid(_birthDateValid)
-                    }
-                  }}
-                  language={user.language}
+        <>
+          <div className="settings">
+
+            <Paper className="settings-form settings-form-wrapper" elevation={10}>
+              <form onSubmit={handleSubmit}>
+                <Avatar
+                  loggedUser={user}
+                  user={user}
+                  size="large"
+                  readonly={false}
+                  onBeforeUpload={onBeforeUpload}
+                  onChange={onAvatarChange}
+                  color="disabled"
+                  className="avatar-ctn"
                 />
-                <FormHelperText error={!birthDateValid}>{(!birthDateValid && commonStrings.BIRTH_DATE_NOT_VALID) || ''}</FormHelperText>
+                <FormControl fullWidth margin="dense">
+                  <InputLabel className="required">{commonStrings.FULL_NAME}</InputLabel>
+                  <Input type="text" required onChange={handleFullNameChange} autoComplete="off" value={fullName} />
+                </FormControl>
+                <FormControl fullWidth margin="dense">
+                  <InputLabel className="required">{commonStrings.EMAIL}</InputLabel>
+                  <Input type="text" value={user.email} disabled />
+                </FormControl>
+                <FormControl fullWidth margin="dense">
+                  <InputLabel className="required">{commonStrings.PHONE}</InputLabel>
+                  <Input type="text" required error={!phoneValid} onChange={handlePhoneChange} autoComplete="off" value={phone} />
+                  <FormHelperText error={!phoneValid}>{(!phoneValid && commonStrings.PHONE_NOT_VALID) || ''}</FormHelperText>
+                </FormControl>
+                <FormControl fullWidth margin="dense">
+                  <DatePicker
+                    label={commonStrings.BIRTH_DATE}
+                    value={birthDate}
+                    variant="standard"
+                    required
+                    onChange={(_birthDate) => {
+                      if (_birthDate) {
+                        const _birthDateValid = validateBirthDate(_birthDate)
+
+                        setBirthDate(_birthDate)
+                        setBirthDateValid(_birthDateValid)
+                      }
+                    }}
+                    language={user.language}
+                  />
+                  <FormHelperText error={!birthDateValid}>{(!birthDateValid && commonStrings.BIRTH_DATE_NOT_VALID) || ''}</FormHelperText>
+                </FormControl>
+                <FormControl fullWidth margin="dense">
+                  <InputLabel>{commonStrings.LOCATION}</InputLabel>
+                  <Input id="location" type="text" onChange={handleLocationChange} autoComplete="off" value={location} />
+                </FormControl>
+                <FormControl fullWidth margin="dense">
+                  <InputLabel>{commonStrings.BIO}</InputLabel>
+                  <Input id="bio" type="text" onChange={handleBioChange} autoComplete="off" value={bio} />
+                </FormControl>
+                <div className="buttons">
+                  <Button
+                    variant="contained"
+                    className="btn-primary btn-margin btn-margin-bottom"
+                    size="small"
+                    onClick={(e) => {
+                      e.preventDefault()
+                      navigate('/change-password')
+                    }}
+                  >
+                    {commonStrings.RESET_PASSWORD}
+                  </Button>
+                  <Button type="submit" variant="contained" className="btn-primary btn-margin-bottom">
+                    {commonStrings.SAVE}
+                  </Button>
+                  <Button
+                    variant="outlined"
+                    color="primary"
+                    className="btn-secondary btn-margin-bottom"
+                    size="small"
+                    onClick={(e) => {
+                      e.preventDefault()
+                      navigate('/')
+                    }}
+                  >
+                    {commonStrings.CANCEL}
+                  </Button>
+                </div>
+              </form>
+            </Paper>
+
+            <Paper className="settings-form settings-form-wrapper" elevation={10}>
+              <h1 className="settings-form-title">{commonStrings.DRIVER_LICENSE}</h1>
+              <DriverLicense user={user} />
+            </Paper>
+
+            <Paper className="settings-net settings-net-wrapper" elevation={10}>
+              <h1 className="settings-form-title">{strings.NETWORK_SETTINGS}</h1>
+              <FormControl component="fieldset">
+                <FormControlLabel control={<Switch checked={enableEmailNotifications} onChange={handleEmailNotificationsChange} />} label={strings.SETTINGS_EMAIL_NOTIFICATIONS} />
               </FormControl>
-              <FormControl fullWidth margin="dense">
-                <InputLabel>{commonStrings.LOCATION}</InputLabel>
-                <Input id="location" type="text" onChange={handleLocationChange} autoComplete="off" value={location} />
-              </FormControl>
-              <FormControl fullWidth margin="dense">
-                <InputLabel>{commonStrings.BIO}</InputLabel>
-                <Input id="bio" type="text" onChange={handleBioChange} autoComplete="off" value={bio} />
-              </FormControl>
-              <div className="buttons">
-                <Button
-                  variant="contained"
-                  className="btn-primary btn-margin btn-margin-bottom"
-                  size="small"
-                  onClick={(e) => {
-                    e.preventDefault()
-                    navigate('/change-password')
-                  }}
-                >
-                  {commonStrings.RESET_PASSWORD}
-                </Button>
-                <Button type="submit" variant="contained" className="btn-primary btn-margin-bottom" size="small">
-                  {commonStrings.SAVE}
-                </Button>
-                <Button
-                  variant="outlined"
-                  color="primary"
-                  className="btn-secondary btn-margin-bottom"
-                  size="small"
-                  onClick={(e) => {
-                    e.preventDefault()
-                    navigate('/')
-                  }}
-                >
-                  {commonStrings.CANCEL}
-                </Button>
-              </div>
-            </form>
-          </Paper>
-
-          <Paper className="settings-form settings-form-wrapper" elevation={10}>
-            <h1 className="settings-form-title">{commonStrings.DRIVER_LICENSE}</h1>
-            <DriverLicense user={user} />
-          </Paper>
-
-          <Paper className="settings-net settings-net-wrapper" elevation={10}>
-            <h1 className="settings-form-title">{strings.NETWORK_SETTINGS}</h1>
-            <FormControl component="fieldset">
-              <FormControlLabel control={<Switch checked={enableEmailNotifications} onChange={handleEmailNotificationsChange} />} label={strings.SETTINGS_EMAIL_NOTIFICATIONS} />
-            </FormControl>
-          </Paper>
-
-        </div>
+            </Paper>
+
+          </div>
+
+          <Footer />
+        </>
       )}
       {loading && <Backdrop text={commonStrings.PLEASE_WAIT} />}
     </Layout>