Update layout and colors

aelassas · Jun 2, 2024 · b692ed7 · b692ed7
1 parent dc9ea5b
commit b692ed7
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 32 deletions.
diff --git a/frontend/public/cover.jpg b/frontend/public/cover.jpg
diff --git a/frontend/src/assets/css/header.css b/frontend/src/assets/css/header.css
@@ -22,6 +22,22 @@
   display: none;
 }
 
+.header .btn {
+  background-color: transparent !important;
+  color: #121212 !important;
+}
+
+/* .header .btn:hover {
+  background-color: rgb(0 0 0 / 5%) !important;
+} */
+
+.header .logo {
+  text-decoration: none;
+  font-size: 18px;
+  font-weight: 500;
+  color: #121212;
+}
+
 /* Device width is greater than or equal to 960px */
 
 @media only screen and (width >=960px) {

diff --git a/frontend/src/assets/css/home.css b/frontend/src/assets/css/home.css
@@ -1,6 +1,4 @@
 div.home {
-  position: absolute;
-  inset: 0;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -37,6 +35,7 @@ div.home div.home-content div.home-logo {
   justify-content: center;
   width: 100%;
   height: 180px;
+  display: none;
 }
 
 div.home div.home-content span.home-logo-main,
@@ -66,10 +65,6 @@ div.home div.home-content span.home-logo-registered::after {
   content: '®';
 }
 
-div.home div.home-content div.home-search {
-  display: block;
-}
-
 div.home div.home-content div.home-search form.home-search-form {
   display: table;
   width: 100%;
@@ -96,19 +91,30 @@ div.home div.home-content div.home-search .btn-search:hover {
   opacity: 0.95;
 }
 
+div.home div.home-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-image: url(/cover.jpg);
+  background-size: cover;
+  background-position: center bottom;
+  width: 100%;
+  height: 107vh;
+}
+
 /* Device width is less than or equal to 960px */
 
-@media only screen and (width <= 960px) {
+@media only screen and (width <=960px) {
   div.home div.home-content {
-    width: 100%;
-    margin: 145px 0 35px;
+    padding: 110px 0;
   }
 
   div.home div.home-content div.home-logo {
     display: flex;
     justify-content: center;
     width: 100%;
     height: 140px;
+    display: none;
   }
 
   div.home div.home-content span.home-logo-main,
@@ -132,31 +138,33 @@ div.home div.home-content div.home-search .btn-search:hover {
     padding: 10px;
   }
 
+  div.home div.home-content div.home-search {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: calc(100% - 30px);
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 20px;
+    margin: 10px 0;
+  }
+
   div.home footer div.secure-payment {
     display: none;
   }
 }
 
 /* Device width is between 500px and 960px */
 
-@media only screen and (width >= 500px) and (width <= 960px) {
+@media only screen and (width >=500px) and (width <=960px) {
   div.home footer div.secure-payment {
     bottom: 0;
   }
 }
 
 /* Device width is greater than or equal to 960px */
 
-@media only screen and (width >= 960px) {
-  div.home div.home-content {
-    width: 980px;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    margin-bottom: 65px;
-  }
-
+@media only screen and (width >=960px) {
   div.home div.home-content div.home-search .pickup-location {
     display: table-cell;
     width: 350px;
@@ -177,10 +185,19 @@ div.home div.home-content div.home-search .btn-search:hover {
     padding: 0 2px;
   }
 
+  div.home div.home-content div.home-search {
+    background-color: #fff;
+    display: block;
+    padding: 20px;
+    border-radius: 20px;
+    margin: 6% 5%;
+  }
+
   div.home footer div.secure-payment {
     position: absolute;
     right: 0;
     padding: 5px;
+    display: none;
   }
 
   div.home footer div.secure-payment img {

diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
@@ -13,7 +13,8 @@ import {
   List,
   ListItemButton,
   ListItemIcon,
-  ListItemText
+  ListItemText,
+  Link
 } from '@mui/material'
 import {
   Menu as MenuIcon,
@@ -89,6 +90,7 @@ const Header = ({
     },
     menuButton: {
       marginRight: 2,
+      color: '#121212',
     },
   }
 
@@ -263,6 +265,7 @@ const Header = ({
       transformOrigin={{ vertical: 'top', horizontal: 'right' }}
       open={isLangMenuOpen}
       onClose={handleLangMenuClose}
+      className="menu"
     >
       {
         env._LANGUAGES.map((language) => (
@@ -277,12 +280,15 @@ const Header = ({
   return (
     (!hidden && (
       <div style={classes.grow} className="header">
-        <AppBar position="fixed" sx={{ bgcolor: '#0D63C9' }}>
+        <AppBar position="fixed" sx={{ bgcolor: '#fff', boxShadow: 'none', borderBottom: '1px solid #ddd' }}>
           <Toolbar className="toolbar">
             {isLoaded && !loading && (
-              <IconButton edge="start" sx={classes.menuButton} color="inherit" aria-label="open drawer" onClick={handleSideMenuOpen}>
-                <MenuIcon />
-              </IconButton>
+              <>
+                <IconButton edge="start" sx={classes.menuButton} color="inherit" aria-label="open drawer" onClick={handleSideMenuOpen}>
+                  <MenuIcon />
+                </IconButton>
+                <Link href="/" className="logo">Movin&#39; In</Link>
+              </>
             )}
             <>
               <Drawer open={isSideMenuOpen} onClose={handleSideMenuClose} className="menu">
@@ -321,43 +327,43 @@ const Header = ({
             <div style={classes.grow} />
             <div className="header-desktop">
               {isSignedIn && (
-                <IconButton aria-label="" color="inherit" onClick={handleNotificationsClick}>
+                <IconButton aria-label="" color="inherit" onClick={handleNotificationsClick} className="btn">
                   <Badge badgeContent={notificationCount > 0 ? notificationCount : null} color="error">
                     <NotificationsIcon />
                   </Badge>
                 </IconButton>
               )}
               {!hideSignin && !isSignedIn && isLoaded && !loading && (
-                <Button variant="contained" startIcon={<LoginIcon />} href="/sign-in" disableElevation fullWidth className="btn-primary" style={{ minWidth: '180px' }}>
+                <Button variant="contained" startIcon={<LoginIcon />} href="/sign-in" disableElevation fullWidth className="btn" style={{ minWidth: '180px' }}>
                   {strings.SIGN_IN}
                 </Button>
               )}
               {isLoaded && !loading && (
-                <Button variant="contained" startIcon={<LanguageIcon />} onClick={handleLangMenuOpen} disableElevation fullWidth className="btn-primary">
+                <Button variant="contained" startIcon={<LanguageIcon />} onClick={handleLangMenuOpen} disableElevation fullWidth className="btn">
                   {lang?.label}
                 </Button>
               )}
               {isSignedIn && (
-                <IconButton edge="end" aria-label="account" aria-controls={menuId} aria-haspopup="true" onClick={handleAccountMenuOpen} color="inherit">
+                <IconButton edge="end" aria-label="account" aria-controls={menuId} aria-haspopup="true" onClick={handleAccountMenuOpen} color="inherit" className="btn">
                   <Avatar loggedUser={user} user={user} size="small" readonly />
                 </IconButton>
               )}
             </div>
             <div className="header-mobile">
               {!isSignedIn && !loading && (
-                <Button variant="contained" startIcon={<LanguageIcon />} onClick={handleLangMenuOpen} disableElevation fullWidth className="btn-primary">
+                <Button variant="contained" startIcon={<LanguageIcon />} onClick={handleLangMenuOpen} disableElevation fullWidth className="btn">
                   {lang?.label}
                 </Button>
               )}
               {isSignedIn && (
-                <IconButton color="inherit" onClick={handleNotificationsClick}>
+                <IconButton color="inherit" onClick={handleNotificationsClick} className="btn">
                   <Badge badgeContent={notificationCount > 0 ? notificationCount : null} color="error">
                     <NotificationsIcon />
                   </Badge>
                 </IconButton>
               )}
               {isSignedIn && (
-                <IconButton aria-label="show more" aria-controls={mobileMenuId} aria-haspopup="true" onClick={handleMobileMenuOpen} color="inherit">
+                <IconButton aria-label="show more" aria-controls={mobileMenuId} aria-haspopup="true" onClick={handleMobileMenuOpen} color="inherit" className="btn">
                   <MoreIcon />
                 </IconButton>
               )}