Feat/header

src/App.tsx

@@ -13,14 +13,14 @@ import PopUpRedirect from './components/atoms/PopUpRedirect';
 import WidgetsTemplate from './components/organisms/WidgetsTemplate';
 // main components height - must add up to 100
 
-const headerHeight = '5vh';
+const headerHeight = '6vh';
 const pageContentHeight = '88vh';
-const footerHeight = '7vh';
+const footerHeight = '6vh';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     pageContent: {
-      overflow: 'auto',
+      overflow: 'hidden',
     },
   }),
 );

src/components/atoms/AppBar.tsx

@@ -1,14 +1,13 @@
 import React, { FC } from 'react';
 import MatAppBar from '@material-ui/core/AppBar';
 import { createStyles, makeStyles, Theme } from '@material-ui/core';
-import { smokeWhiteColor } from 'style';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
       position: 'relative',
       flexGrow: 1,
-      backgroundColor: smokeWhiteColor,
+      backgroundColor: '#2081c3',
       display: 'flex',
       flexDirection: 'row',
       alignItems: 'center',

src/components/atoms/SignInIcon.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { createStyles, makeStyles, Theme } from '@material-ui/core';
-import { blackColor } from 'style';
+import { blackColor, whiteColor } from 'style';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
-      color: blackColor,
+      color: whiteColor,
       marginRight: '5px',
       cursor: 'default',
       display: 'flex',

src/components/molecules/Header.tsx

@@ -20,6 +20,8 @@ const useStyles = makeStyles({
   userSection: {
     display: 'flex',
     alignItems: 'center',
+    justifyContent: 'space-between',
+    width: '12%',
   },
 });
 
@@ -85,10 +87,10 @@ const Header: FC = () => {
       );
     } else {
       authElement = (
-        <>
+        <Box style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
           <LogInLinkGoogle />
           <SignInIcon />
-        </>
+        </Box>
       );
     }
   }
@@ -98,7 +100,6 @@ const Header: FC = () => {
       <Logo src={logo} alt={'Anyway'} height={30} onClick={reloadHomePage} />
       <Box className={classes.userSection}>
         <Button.Standard onClick={() => setOpen(true)}>{t('header.Search')}</Button.Standard>
-        {FEATURE_FLAGS.language && <LanguageMenu />}
         {authElement}
       </Box>
       <MapDialog

src/components/molecules/LogInLinkGoogle.tsx

@@ -1,16 +1,16 @@
 import { makeStyles } from '@material-ui/core/styles';
-import { oceanBlueColor, skyBlueColor } from 'style';
+import { blackColor, oceanBlueColor, skyBlueColor, smokeWhiteColor, whiteColor } from 'style';
 import React from 'react';
 import { AUTH_LOGIN_GOOGLE_URL } from 'const/generalConst';
 import { openSignInWindow } from 'services/signInWindow';
 import { useTranslation } from 'react-i18next';
 const useStyles = makeStyles((theme) => ({
   userButton: {
     padding: theme.spacing(1),
-    color: `${oceanBlueColor}`,
+    color: `${whiteColor}`,
     textDecoration: 'none',
     '&:hover': {
-      color: `${skyBlueColor}`,
+      color: `${smokeWhiteColor}`,
     },
     cursor: 'pointer',
   },

src/pages/HomePage.tsx

@@ -9,7 +9,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     display: 'flex',
     flexDirection: 'row',
     flexWrap: 'wrap',
-    marginTop: '24px',
+    margin: '16px',
     justifyContent: 'center',
     overflow: 'auto',
   },