Update Header.tsx

aelassas · Dec 13, 2024 · 8d7d83e · 8d7d83e
1 parent fc71c7b
commit 8d7d83e
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 11 deletions.
diff --git a/backend/src/assets/css/header.css b/backend/src/assets/css/header.css
@@ -44,6 +44,10 @@
 
   .header-desktop {
     display: flex;
+    flex-direction: row;
+    flex-grow: 1;
+    justify-content: flex-end;
+    align-items: center;
   }
 
   .header-mobile {

diff --git a/backend/src/components/Header.tsx b/backend/src/components/Header.tsx
@@ -334,7 +334,7 @@ const Header = ({
               </IconButton>
             )}
             {isLoaded && !loading && (
-              <Button variant="contained" startIcon={<LanguageIcon />} onClick={handleLangMenuOpen} disableElevation fullWidth className="btn-primary">
+              <Button variant="contained" startIcon={<LanguageIcon />} onClick={handleLangMenuOpen} disableElevation className="btn-primary">
                 {lang?.label}
               </Button>
             )}
@@ -346,7 +346,7 @@ const Header = ({
           </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 className="btn-primary">
                 {lang?.label}
               </Button>
             )}

diff --git a/frontend/src/assets/css/common.css b/frontend/src/assets/css/common.css
@@ -41,6 +41,10 @@
   margin-bottom: 10px !important;
 }
 
+.bold {
+  font-weight: 500 !important;
+}
+
 .validate-email {
   margin: 15px;
 }

diff --git a/frontend/src/assets/css/header.css b/frontend/src/assets/css/header.css
@@ -34,6 +34,10 @@
 
 .header-desktop {
   display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+  justify-content: flex-end;
+  align-items: center;
 }
 
 .header-mobile {
@@ -43,6 +47,7 @@
 .header .btn {
   background-color: transparent !important;
   color: #121212 !important;
+  text-transform: none !important;
 }
 
 .header .btn:hover {

diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
@@ -32,13 +32,15 @@ import {
   LocationOn as LocationIcon,
   PrivacyTip as PrivacyIcon,
   QuestionAnswer as FaqIcon,
+  PersonOutline as SignUpIcon,
 } from '@mui/icons-material'
 import { toast } from 'react-toastify'
 import { CircleFlag } from 'react-circle-flags'
 import * as bookcarsTypes from ':bookcars-types'
 import env from '@/config/env.config'
-import { strings } from '@/lang/header'
 import { strings as commonStrings } from '@/lang/common'
+import { strings as suStrings } from '@/lang/sign-up'
+import { strings } from '@/lang/header'
 import * as UserService from '@/services/UserService'
 import * as NotificationService from '@/services/NotificationService'
 import Avatar from './Avatar'
@@ -398,23 +400,28 @@ const Header = ({
             </Drawer>
             {(env.isMobile || !headerTitle) && <div style={classes.grow} />}
             <div className="header-desktop">
-              {!hideSignin && !isSignedIn && isLoaded && !loading && (
-                <Button variant="contained" startIcon={<LoginIcon />} href="/sign-in" disableElevation fullWidth className="btn" style={{ minWidth: '170px' }}>
-                  {strings.SIGN_IN}
-                </Button>
-              )}
               {isLoaded && !loading && (
-                <Button variant="contained" onClick={handleCurrencyMenuOpen} disableElevation fullWidth className="btn">
+                <Button variant="contained" onClick={handleCurrencyMenuOpen} disableElevation className="btn bold">
                   {StripeService.getCurrency()}
                 </Button>
               )}
               {isLoaded && !loading && (
-                <Button variant="contained" onClick={handleLangMenuOpen} disableElevation fullWidth className="btn">
+                <Button variant="contained" onClick={handleLangMenuOpen} disableElevation className="btn">
                   <div className="language">
                     <CircleFlag countryCode={lang?.countryCode as string} height={flagHeight} className="flag" title={lang?.label} />
                   </div>
                 </Button>
               )}
+              {!hideSignin && !isSignedIn && isLoaded && !loading && (
+                <Button variant="contained" size="small" startIcon={<SignUpIcon />} href="/sign-up" disableElevation className="btn">
+                  {suStrings.SIGN_UP}
+                </Button>
+              )}
+              {!hideSignin && !isSignedIn && isLoaded && !loading && (
+                <Button variant="contained" size="small" startIcon={<LoginIcon />} href="/sign-in" disableElevation className="btn">
+                  {strings.SIGN_IN}
+                </Button>
+              )}
               {isSignedIn && (
                 <IconButton aria-label="" onClick={handleNotificationsClick} className="btn">
                   <Badge badgeContent={notificationCount > 0 ? notificationCount : null} color="error">
@@ -430,7 +437,7 @@ const Header = ({
             </div>
             <div className="header-mobile">
               {!loading && (
-                <Button variant="contained" onClick={handleCurrencyMenuOpen} disableElevation fullWidth className="btn">
+                <Button variant="contained" onClick={handleCurrencyMenuOpen} disableElevation fullWidth className="btn bold">
                   {StripeService.getCurrency()}
                 </Button>
               )}