Task: page layout

src/app/views/App.styles.ts

@@ -69,7 +69,9 @@ export const appStyles = (theme: ITheme) => {
       marginTop: 5
     },
     statusAreaFullScreen: {
-      marginTop: 10
+      marginTop: 6,
+      position: 'relative',
+      bottom: 0
     },
     vResizeHandle: {
       zIndex: 1,

src/app/views/App.tsx

@@ -433,19 +433,12 @@ class App extends Component<IAppProps, IAppState> {
                 handleClasses={{
                   right: classes.vResizeHandle
                 }}
-                bounds={'window'}
+                bounds={'parent'}
                 size={{
                   width: sideWidth,
                   height: ''
                 }}
               >
-
-                {mobileScreen && appTitleDisplayOnMobileScreen(
-                  stackTokens,
-                  classes,
-                  this.toggleSidebar
-                )}
-
                 {/* {!mobileScreen && appTitleDisplayOnFullScreen(classes)} */}
 
                 {showSidebar && ( <Sidebar currentTab = { this.state.sidebarTabSelection }
@@ -466,7 +459,7 @@ class App extends Component<IAppProps, IAppState> {
                   width: graphExplorerMode === Mode.TryIt ? '100%' : contentWidth,
                   height: contentHeight
                 }}
-                style={!sidebarProperties.showSidebar && !mobileScreen ? { marginLeft: '8px' } : {}}
+                style={!sidebarProperties.showSidebar && !mobileScreen ? { marginLeft: '8px', flex: 1 } : {flex: 1}}
               >
                 <div style={{ marginBottom: 8 }} >
                   <QueryRunner onSelectVerb={this.handleSelectVerb} />

src/app/views/app-sections/FeedbackButton.tsx

@@ -19,7 +19,8 @@ export const FeedbackButton = () => {
   const feedbackIconStyles = {
     root:{
       height: '50px',
-      width: '50px'
+      width: '50px',
+      marginTop: '-8px'
     }
   }
   const calloutProps = {

src/app/views/main-header/MainHeader.styles.ts

@@ -0,0 +1,17 @@
+import { ITheme } from '@fluentui/react';
+
+export const mainHeaderStyles = (theme: ITheme) => {
+  return {
+    rootStyles: {
+      root: {
+        background: theme.semanticColors.bodyBackground,
+        height: 50,
+        marginBottom: '-9px'
+      }
+    },
+    authenticationItemStyles: {
+      alignItems: 'center',
+      display: 'flex'
+    }
+  }
+}

src/app/views/main-header/MainHeader.tsx

@@ -6,6 +6,7 @@ import {
   IconButton,
   IStackStyles,
   IStackTokens,
+  ITheme,
   Label,
   MessageBar,
   MessageBarType,
@@ -20,44 +21,38 @@ import { Authentication } from '../authentication';
 import { useSelector } from 'react-redux';
 import { IRootState } from '../../../types/root';
 import { Mode } from '../../../types/enums';
+import { mainHeaderStyles } from './MainHeader.styles';
 
 
 interface MainHeaderProps {
   minimised: boolean;
   toggleSidebar: Function;
 }
-const currentTheme = getTheme();
 const sectionStackTokens: IStackTokens = {
   childrenGap: 0 };
 const itemAlignmentsStackTokens: IStackTokens = {
   childrenGap: 10,
   padding: 10
 };
-const itemAlignmentsStackStyles: IStackStyles = {
-  root: {
-    background: currentTheme.palette.neutralLight,
-    height: 50
-  }
-};
-const itemStyles: React.CSSProperties = {
-  alignItems: 'center',
-  display: 'flex'
-};
 
 export const MainHeader: React.FunctionComponent <MainHeaderProps> = (props: MainHeaderProps) => {
   const { authToken, graphExplorerMode } = useSelector(
     (state: IRootState) => state
   );
   const tokenPresent = !!authToken.token;
   const minimised = props.minimised;
+  const currentTheme = getTheme();
+  const itemAlignmentStackStyles = mainHeaderStyles(currentTheme).rootStyles;
+  const itemStyles = mainHeaderStyles(currentTheme).authenticationItemStyles;
 
   return (
     <Stack tokens={sectionStackTokens}>
       <Stack
         horizontal
         horizontalAlign="space-between"
-        styles={itemAlignmentsStackStyles}
+        styles={itemAlignmentStackStyles}
         tokens={itemAlignmentsStackTokens}>
+
         <Stack horizontal>
           <TooltipHost
             content={!minimised ? 'Minimize sidebar' : 'Maximize sidebar'}
@@ -73,25 +68,25 @@ export const MainHeader: React.FunctionComponent <MainHeaderProps> = (props: Mai
               iconProps={{ iconName: 'GlobalNavButton' }}
               //className={classes.sidebarToggle}
               ariaLabel={!minimised ? 'Minimize sidebar' : 'Maximize sidebar'}
-              styles={{root: { position:'relative', top: '3px'}}}
               onClick={() => props.toggleSidebar()} />
           </TooltipHost>
           <Label
-            style={{fontSize: FontSizes.xLarge,
-              fontWeight: 600}}>
-          Graph Explorer
+            style={{ fontSize: FontSizes.xLarge, fontWeight: 600 }}>
+            Graph Explorer
           </Label>
           <FeedbackButton />
         </Stack>
+
         <Stack >
           <span style={itemStyles}>
             <Settings />
             <Authentication />
           </span>
           <span style={itemStyles}></span>
         </Stack>
+
       </Stack>
-      <Stack style={{marginBottom:'10px'}}>
+      <Stack style={{marginBottom:'7px'}}>
         {!tokenPresent &&
             graphExplorerMode === Mode.Complete &&
             showUnAuthenticatedText()}