diff --git a/src/App.jsx b/src/App.jsx
index cabdf6ddfa..3952904781 100644
--- a/src/App.jsx
+++ b/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 = (
+
+
+
+ this.onDevLogout()} />
+
+
+
+ );
+
return (
@@ -110,7 +123,7 @@ class App extends React.Component {
header={(
}
- avatar={ this.onDevLogout()} />}
+ toolbar={PageToolbar}
showNavToggle
onNavToggle={this.onNavToggle}
/>
@@ -329,6 +342,7 @@ class App extends React.Component {
)}
/>
)}
+ useCondensed
>
!api.isAuthenticated()} redirectPath="/login" exact path="/" component={() => ()} />
!api.isAuthenticated()} redirectPath="/login" path="/home" component={Dashboard} />
diff --git a/src/app.scss b/src/app.scss
index 21548b6901..d31a962175 100644
--- a/src/app.scss
+++ b/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;
- 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;
- }
-}
+//
+// sidebar overrides
+//
.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 {
- align-self: center;
- height: 60px;
+.pf-l-page__main-section.pf-m-condensed {
+ padding-top: 16px;
+ padding-bottom: 16px;
}
\ No newline at end of file