https://jira.fingo.info/browse/IJ-343 Redesign TopBar

view.react/src/components/topbar/TopBar.jsx

@@ -1,12 +1,12 @@
+import LogoutIcon from '@mui/icons-material/Logout';
 import classNames from "classnames";
 import PropTypes from 'prop-types';
 import {useEffect, useState} from "react";
-import {Container, Navbar} from 'react-bootstrap';
-import {GearFill as GearIcon, List as ListIcon, Power as PowerIcon} from "react-bootstrap-icons";
+import {Col,Container, Navbar, Row} from 'react-bootstrap';
+import {GearFill as GearIcon, List as ListIcon} from "react-bootstrap-icons";
 
 import {getFullUserName, getUserTeams} from "../../api/services/session.service";
 import logoImg from '../../assets/logo.svg';
-import UrlopiaLogo from '../../assets/logo-urlopia.png';
 import {fetchWorkingHoursPreferences} from "../../contexts/user-preferences-context/actions/fetchWorkingHoursPreferences";
 import {useUserPreferences} from "../../contexts/user-preferences-context/userPreferencesContext";
 import { isNoAuthMode, logout } from "../../helpers/authentication/LogoutHelper";
@@ -45,31 +45,35 @@ export const TopBar = ({onHamburgerClick}) => {
             />
             <Navbar className={styles.topBar} variant="dark" expand="lg" collapseOnSelect sticky='top'>
                 <Container fluid className='px-0'>
-                    <button
-                        type="button"
-                        className={listBtnClass}
-                        onClick={onHamburgerClick}
-                    >
-                        <ListIcon className={listIconClass}/>
-                    </button>
-
-                    <Navbar.Brand href='/#/calendar' className="d-none d-lg-block">
-                        <img src={logoImg} alt="FINGO logo" className={styles.brandLogo}/>
-                    </Navbar.Brand>
-
-                    <img src={UrlopiaLogo} alt={"Urlopia"} className={styles.appLogo}/>
-                    <div className={styles.mobileRightSide}>
-                        {
-                            isNoAuth && <NoAuthUsersDropdown />
-                        }
-                        <button type="button" className={styles.settingsButton} onClick={() => setShowModal(true)}>
-                            <GearIcon className={styles.settingsIcon} size={20}/>
-                        </button>
-                        <TeamDropdown userName={userName} teams={teams}/>
-                        <button type="button" className={styles.button} onClick={handleLogout}>
-                            <PowerIcon className={styles.icon}/>
-                        </button>
-                    </div>
+                    <Row className={styles.fullWidth}>
+                                 <button
+                                type="button"
+                                className={listBtnClass}
+                                onClick={onHamburgerClick}
+                            >
+                                <ListIcon className={listIconClass}/>
+                            </button>
+                            <Col xs={{ span: 4, offset: 4 }}>
+                                <div className={styles.topBarLogo}>
+                                    <div className={styles.topBarName}>Urlopia</div>
+                                    <img src={logoImg} alt="FINGO logo" className={styles.brandLogo}/>
+                                </div>
+                            </Col>
+                            <Col xs={{ span: 3, offset: 1 }}>
+                                <div className={styles.mobileRightSide}>
+                                    {
+                                        isNoAuth && <NoAuthUsersDropdown />
+                                    }
+                                    <button type="button" className={styles.settingsButton} onClick={() => setShowModal(true)}>
+                                        <GearIcon className={styles.settingsIcon} size={20}/>
+                                    </button>
+                                    <TeamDropdown userName={userName} teams={teams}/>
+                                    <button type="button" className={styles.button} onClick={handleLogout}>
+                                        <LogoutIcon className={styles.icon}/>
+                                    </button>
+                                </div>
+                            </Col>
+                            </Row>
                 </Container>
             </Navbar>
         </>

view.react/src/components/topbar/TopBar.module.scss

@@ -1,13 +1,37 @@
 @import "src/global-styles/color-variables";
 
 .topBar {
-  background-color: $BASE-COLOR;
+  background-color: white;
   width: 100%;
 }
 
+.topBarLogo {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  flex-direction: column;
+  background-color: #78A612;
+  border-radius: 50%;
+  height: 640px;
+  margin-top: -456px;
+}
+
+.topBarName {
+  font-size: 60px;
+  line-height: 90px;
+  font-weight: 275;
+  color: white;
+}
+
+.fullWidth {
+  width: 100%;
+  align-items: center;
+}
+
 .mobileRightSide {
   padding: 0.5rem;
   display: flex;
+  align-items: center;
 }
 
 .hamburger {
@@ -29,27 +53,29 @@
 }
 
 .settingsIcon {
-  color: $WHITESMOKE_COLOR;
+  color: #002900;
 
   &:hover {
-    color: $HOVER-COLOR;
+    color: #78a612;
   }
 }
 
 .icon {
-  color: white;
+  color: #002900;
   font-size: 1.5rem;
-  margin: 0 0.5rem;
+  margin: 0 2rem;
+  transition: transform 0.3s ease-in-out;
 
   &:hover {
-    color: $HOVER-COLOR;
+    color: #78a612;
+    transform: scale(1.2);
   }
 }
 
 .brandLogo {
   width: 100px;
   height: 45.5px;
-  margin-left: 30px;
+  margin-bottom: 40px;
 }
 
 .appLogo {

view.react/src/components/topbar/noauth-users-dropdown/NoAuthUsersDropdown.tsx

@@ -20,7 +20,7 @@ export const NoAuthUsersDropdown = () => {
             <InputLabel
                 id="no-auth-user-selector-label"
                 sx = {{
-                    color: "white",
+                    color: "#002900",
                     fontSize: '1.3rem',
                     "&.Mui-focused": {
                         color: "white",
@@ -33,13 +33,12 @@ export const NoAuthUsersDropdown = () => {
                 onChange={handleChange}
                 sx = {{
                     fontSize: '1.3rem',
-                    color: 'white',
-                    minWidth: '200px',
+                    color: '#002900',
                     "&:after": {
                         borderBottomColor: "white",
                     },
                     "& .MuiSvgIcon-root": {
-                        color: "white",
+                        color: "#002900",
                     },
                     boxShadow: 'none', '.MuiOutlinedInput-notchedOutline': { border: 0 },
                     "&.Mui-focused": {

view.react/src/components/topbar/team-dropdown/TeamDropdown.module.scss

@@ -5,16 +5,19 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  text-decoration: none;
 
   p {
-    color: white;
+    color: #002900;
     border: none;
-    text-decoration: underline $BASE-COLOR;
+    text-decoration: none;
     margin: 0;
+    font-weight: 600;
+    font-size: 23px;
   }
 
   &:hover * {
-    color: $HOVER-COLOR;
+    color: #78a612;
   }
 }
 
@@ -45,12 +48,12 @@
 }
 
 .icon {
-  color: white;
-  font-size: 1.5rem;
+  color: #002900;
+  font-size: 2.5rem;
   margin: 0 0.5rem;
   padding: 0;
 
   &:hover {
-    color: $HOVER-COLOR;
+    color: #78a612;;
   }
 }