DCJ-155: Move sign in button from the home page body to the navigatio…

…n bar (#2658)
DataBiosphere · Sep 4, 2024 · c136a0d · c136a0d
1 parent 072172d
commit c136a0d
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 18 deletions.
diff --git a/src/App.jsx b/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>

diff --git a/src/components/DuosHeader.jsx b/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,
@@ -221,11 +224,35 @@ const NavigationTabsComponent = (props) => {
                 </li>
                 {contactUsButton}
                 {supportrequestModal}
+                {/* Sign-in button location when window is narrow and menu is vertical */}
+                {!isLogged && orientation === 'vertical' && <li style={{marginRight: 0}}>
+                  <SignInButton
+                    customStyle={undefined}
+                    props={props}
+                    onSignIn={onSignIn}
+                    history={history}/>
+                </li>}
               </ul>
             )
-          };
+          }
         </div>
         {/* Navbar right side */}
+        {/* Sign-in button location when window is wider and menu is not vertical */}
+        {!isLogged && orientation !== 'vertical' &&
+          <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 +337,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 +505,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 +554,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={() => {}}

diff --git a/src/pages/Home.jsx b/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>