Merge pull request #10279 from flexion/10007-combine-headers

10007: Update Client Application to Use Single Header Component
flexion · Mar 5, 2024 · eb0430b · eb0430b
2 parents bd9c7ef + caee028
commit eb0430b
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 9 deletions.
diff --git a/web-client/src/presenter/computeds/headerHelper.ts b/web-client/src/presenter/computeds/headerHelper.ts
@@ -1,7 +1,7 @@
-import { state } from '@web-client/presenter/app.cerebral';
-
 import { ClientApplicationContext } from '@web-client/applicationContext';
 import { Get } from 'cerebral';
+import { state } from '@web-client/presenter/app.cerebral';
+
 export const headerHelper = (
   get: Get,
   applicationContext: ClientApplicationContext,
@@ -46,6 +46,7 @@ export const headerHelper = (
     defaultQCBoxPath: isOtherUser(userRole)
       ? '/document-qc/section/inbox'
       : '/document-qc/my/inbox',
+    isLoggedIn,
     pageIsDashboard: isDashboard && isExternalUser,
     pageIsDocumentQC: isWorkQueue,
     pageIsHome,

diff --git a/web-client/src/styles/nav.scss b/web-client/src/styles/nav.scss
@@ -17,6 +17,13 @@
 
       .usa-navbar {
         justify-content: space-between;
+        border-bottom: 0;
+        margin-top: 10px;
+        margin-bottom: 10px;
+      }
+
+      .header-welcome {
+        display: none;
       }
 
       .usa-navbar.usa-navbar-public {
@@ -98,10 +105,22 @@
       }
 
       .usa-navbar {
-        width: unset;
+        display: flex;
+        width: initial;
         justify-content: space-between;
+        border-bottom: 0;
+        margin-top: 10px;
+        margin-bottom: 10px;
+      }
+
+      .header-welcome {
+        margin-top: 15px;
+        margin-right: auto;
+        margin-left: 10px;
+        font-size: 26px;
+        text-wrap: nowrap;
       }
-      
+
       .usa-navbar.usa-navbar-public {
         justify-content: flex-start;
       }
@@ -183,6 +202,11 @@
         display: none;
       }
 
+      .usa-navbar {
+        margin-top: initial;
+        margin-bottom: initial;
+      }
+
       .usa-logo {
         width: 75px;
         max-width: 75px;

diff --git a/web-client/src/views/AppComponent.tsx b/web-client/src/views/AppComponent.tsx
@@ -54,7 +54,6 @@ import { Footer } from './Footer';
 import { ForgotPassword } from '@web-client/views/Login/ForgotPassword';
 import { GenericErrorModal } from './GenericErrorModal';
 import { Header } from './Header/Header';
-import { HeaderPublic } from '@web-client/views/Header/HeaderPublic';
 import { IdleLogout } from './IdleLogout';
 import { Interstitial } from './Interstitial';
 import { JudgeActivityReport } from './JudgeActivityReport/JudgeActivityReport';
@@ -251,7 +250,7 @@ export const AppComponent = connect(
               Skip to main content
             </a>
             <UsaBanner />
-            {IsPageWithBlueBackground ? <HeaderPublic /> : <Header />}
+            <Header />
           </>
         )}
 

diff --git a/web-client/src/views/Header/Header.tsx b/web-client/src/views/Header/Header.tsx
@@ -225,7 +225,6 @@ export const Header = connect(
     templateHelper: state.templateHelper,
     toggleBetaBarSequence: sequences.toggleBetaBarSequence,
     toggleMobileMenuSequence: sequences.toggleMobileMenuSequence,
-    user: state.user,
   },
   function Header({
     headerHelper,
@@ -236,7 +235,6 @@ export const Header = connect(
     templateHelper,
     toggleBetaBarSequence,
     toggleMobileMenuSequence,
-    user,
   }) {
     const headerRef = useRef(null);
 
@@ -282,6 +280,9 @@ export const Header = connect(
                       <img alt="USTC Seal" src={seal} />
                     </a>
                   </div>
+                  {!headerHelper.isLoggedIn && (
+                    <h1 className="header-welcome">Welcome to DAWSON</h1>
+                  )}
                   {headerHelper.showMobileAccountMenu && (
                     <button
                       className="usa-menu-btn"
@@ -308,7 +309,7 @@ export const Header = connect(
                   >
                     Close
                   </Button>
-                  {user &&
+                  {headerHelper.isLoggedIn &&
                     NavigationItems(headerHelper, {
                       isDocumentQCMenuOpen: menuHelper.isDocumentQCMenuOpen,
                       isMessagesMenuOpen: menuHelper.isMessagesMenuOpen,