DCJ-155: Move sign in button from the home page body to the navigation bar

src/App.jsx

@@ -83,7 +83,7 @@ function App() {
     <div className="body">
       <div className="wrap">
         <div className="main">
-          <DuosHeader onSignOut={signOut} />
+          <DuosHeader onSignOut={signOut} onSignIn={signIn} />
           <Spinner name="mainSpinner" group="duos" loadingImage={loadingImage} />
           <Routes onSignOut={signOut} onSignIn={signIn} isLogged={isLoggedIn} env={env} />
         </div>

src/components/DuosHeader.jsx

@@ -18,6 +18,7 @@ import Tab from '@mui/material/Tab';
 import Box from '@mui/material/Box';
 import {isFunction, isNil} from 'lodash/fp';
 import {DAAUtils} from '../utils/DAAUtils';
+import SignInButton from '../components/SignInButton';
 
 const styles = {
   drawerPaper: {
@@ -138,6 +139,8 @@ export const headerTabsConfig = [
 
 const NavigationTabsComponent = (props) => {
   const {
+    onSignIn,
+    history,
     orientation,
     makeNotifications,
     navbarDuosIcon, duosLogoImage, DuosLogo, navbarDuosText,
@@ -226,6 +229,22 @@ const NavigationTabsComponent = (props) => {
           };
         </div>
         {/* Navbar right side */}
+        {!isLogged &&
+          <div
+            style={{
+              minWidth: '185px',
+              display: 'flex',
+              alignItems: 'center',
+              flexDirection: orientation === 'vertical' ? 'column' : 'row'
+            }}
+          >
+            <SignInButton
+              customStyle={undefined}
+              props={props}
+              onSignIn={onSignIn}
+              history={history}/>
+          </div>
+        }
         {isLogged && (
           <div
             style={{ display: 'flex', alignItems: 'center', flexDirection: orientation === 'vertical' ? 'column' : 'row' }}
@@ -310,7 +329,7 @@ const navbarDuosText = {
 };
 
 const DuosHeader = (props) => {
-  const { location, classes } = props;
+  const {location, classes, onSignIn, history} = props;
   const [state, setState] = useState({
     showSupportRequestModal: false,
     hover: false,
@@ -478,6 +497,8 @@ const DuosHeader = (props) => {
         <div className="row no-margin" style={{ width: '100%' }}>
           {/* Standard navbar for medium sized displays and higher (pre-existing navbar) */}
           <NavigationTabsComponent
+            onSignIn={onSignIn}
+            history={history}
             goToLink={goToLink}
             makeNotifications={makeNotifications}
             duosLogoImage={duosLogoImage}
@@ -525,6 +546,8 @@ const DuosHeader = (props) => {
             onClose={() => toggleDrawer(false)}
           >
             <NavigationTabsComponent
+              onSignIn={onSignIn}
+              history={history}
               goToLink={goToLink}
               // Notifications are already displayed underneath the expanded drawer, no need to render them twice.
               makeNotifications={() => {}}

src/pages/Home.jsx

@@ -1,15 +1,11 @@
 import React from 'react';
-import SignInButton from '../components/SignInButton';
 import { ReadMore } from '../components/ReadMore';
 import homeHeaderBackground from '../images/home_header_background.png';
 import duosLogoImg from '../images/duos_logo.svg';
 import duosDiagram from '../images/DUOS_Homepage_diagram.svg';
 import { Link } from 'react-router-dom';
-import { Storage } from '../libs/storage';
 
 const Home = (props) => {
-  const { onSignIn, history } = props;
-  const isLogged = Storage.userIsLogged();
 
   const homeTitle = {
     color: '#FFFFFF',
@@ -82,22 +78,11 @@ const Home = (props) => {
     display: 'block'
   };
 
-  const signInPositionStyle = {
-    padding: '1em 1em 0 0',
-    alignItems: 'center',
-    position: 'absolute',
-    top: '0',
-    right: '1rem',
-  };
-
   return (
     <div className="row">
       <div className="col-lg-12 col-md-12 col-sm-12 col-xs-12">
         <div className="row" style={{ backgroundColor: 'white', height: '350px', position: 'relative', margin: '-20px auto auto 0' }}>
           <img style={{ height: 'inherit', minWidth: '100%' }} src={homeHeaderBackground} alt="Home header background" />
-          {!isLogged && <div style={signInPositionStyle}>
-            <SignInButton props={props} onSignIn={onSignIn} history={history} />
-          </div>}
           <div style={{ position: 'absolute', width: '100%', top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }}>
             <img style={duosLogo} alt="DUOS logo" src={duosLogoImg} />
             <h1 style={homeTitle}>Data Use Oversight System</h1>