update app component to utilize collapsing header and update style overrides

src/App.jsx

@@ -14,7 +14,10 @@ import {
   NavItem,
   Page,
   PageHeader,
-  PageSidebar
+  PageSidebar,
+  Toolbar,
+  ToolbarGroup,
+  ToolbarItem
 } from '@patternfly/react-core';
 import { global_breakpoint_md as breakpointMd } from '@patternfly/react-tokens';
 
@@ -87,6 +90,16 @@ class App extends React.Component {
     const { activeItem, activeGroup, isNavOpen } = this.state;
     const { logo, loginInfo } = this.props;
 
+    const PageToolbar = (
+      <Toolbar>
+        <ToolbarGroup>
+          <ToolbarItem>
+            <LogoutButton onDevLogout={() => this.onDevLogout()} />
+          </ToolbarItem>
+        </ToolbarGroup>
+      </Toolbar>
+    );
+
     return (
       <Router>
         <Fragment>
@@ -110,7 +123,7 @@ class App extends React.Component {
                 header={(
                   <PageHeader
                     logo={<TowerLogo onClick={this.onLogoClick} />}
-                    avatar={<LogoutButton onDevLogout={() => this.onDevLogout()} />}
+                    toolbar={PageToolbar}
                     showNavToggle
                     onNavToggle={this.onNavToggle}
                   />
@@ -329,6 +342,7 @@ class App extends React.Component {
                     )}
                   />
                 )}
+                useCondensed
               >
                 <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" exact path="/" component={() => (<Redirect to="/home" />)} />
                 <ConditionalRedirect shouldRedirect={() => !api.isAuthenticated()} redirectPath="/login" path="/home" component={Dashboard} />

src/app.scss

@@ -1,56 +1,24 @@
 //
-// page layout
+// masthead overrides
 //
 
-.pf-l-page__header {
-  --pf-l-page__header--MinHeight: 0px;
-  display: flex;
-  align-items: center;
-  height: 60px;
-}
-
 .pf-l-page__header-brand {
-  display: flex;
-  align-self: center;
-  height: 60px;
   max-width: 255px;
-  padding: 0px;
-  margin: 0px;
-}
-
-.pf-l-page__header-tools {
-  align-self: center;
-  height: 60px;
-  padding-left: 255px;
-
-  .fa-user:hover {
-    // temporary dev logout
-    cursor: pointer;
-  }
 }
 
 .pf-l-page__header-brand-link {
   max-width: 85px;
-  align-self: center;
 }
 
 .pf-l-page__header-brand-link img {
   transform: scale(1.1, 1.1);
   position: relative;
-  top: 6px;
+  top: -4px;
 }
 
-.pf-l-page__header-brand-toggle {
+//
-  align-self: center;
+// sidebar overrides
-  position: relative;
+//
-  right: 14px;
-  --pf-l-page__header-brand-link--MarginLeft: 0px;
-  --pf-l-page__header-brand-link--MarginLeft: 0px;
-
-  button {
-    --pf-l-page__header-sidebar-toggle--FontSize: 18px;
-  }
-}
 
 .pf-l-page__sidebar{
   --pf-l-page__sidebar--Width--lg: 255px;
@@ -84,16 +52,11 @@
   }
 }
 
-.pf-l-page__main-section {
-  --pf-l-page__main-section--PaddingTop: 11px;
-  --pf-l-page__main-section--PaddingLeft: 11px;
-}
-
 //
-// toolbar layout
+// page header overrides
 //
 
-.pf-l-toolbar {
+.pf-l-page__main-section.pf-m-condensed {
-  align-self: center;
+  padding-top: 16px;
-  height: 60px;
+  padding-bottom: 16px;
 }