Task: Increase help and settings box sizes (#1756)

microsoftgraph · May 24, 2022 · b046291 · b046291
1 parent 834c732
commit b046291
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 9 deletions.
diff --git a/src/app/views/main-header/Help.tsx b/src/app/views/main-header/Help.tsx
@@ -91,7 +91,7 @@ export const Help = () => {
   const calloutStyles: React.CSSProperties = {
     overflowY: 'hidden'
   }
-  const helpButtonStyles = mainHeaderStyles(currentTheme).iconButton;
+  const { iconButton: helpButtonStyles, tooltipStyles } = mainHeaderStyles(currentTheme);
 
   const menuProperties = {
     shouldFocusOnMount: true,
@@ -108,6 +108,7 @@ export const Help = () => {
         content={translateMessage('Help')}
         id={getId()}
         calloutProps={{ gapSpace: 0 }}
+        styles={ tooltipStyles }
       >
         <IconButton
           ariaLabel={translateMessage('Help')}

diff --git a/src/app/views/main-header/MainHeader.styles.ts b/src/app/views/main-header/MainHeader.styles.ts
@@ -16,7 +16,6 @@ export const mainHeaderStyles = (theme: ITheme) => {
     },
     feedbackIconAdjustmentStyles: {
       position: 'relative' as 'relative',
-      right: '-6px',
       top: '4px'
     },
     tenantStyles: {
@@ -32,7 +31,24 @@ export const mainHeaderStyles = (theme: ITheme) => {
         width: '50px',
         ':hover': {
           background: `${theme.palette.neutralLight} !important`
-        }
+        },
+        flexGrow: '1'
+      }
+    },
+    moreInformationStyles: {
+      flexGrow: 1,
+      flexShrink: 1,
+      flexBasis: '60px'
+    },
+    settingsContainerStyles: {
+      display: 'flex',
+      alignItems: 'stretch'
+    },
+    tooltipStyles: {
+      root: {
+        flexGrow: 1,
+        display: 'flex',
+        alignItems: 'stretch'
       }
     }
   }

diff --git a/src/app/views/main-header/MainHeader.tsx b/src/app/views/main-header/MainHeader.tsx
@@ -43,7 +43,7 @@ export const MainHeader: React.FunctionComponent <MainHeaderProps> = (props: Mai
   const mobileScreen = props.mobileScreen;
   const currentTheme = getTheme();
   const { rootStyles : itemAlignmentStackStyles, rightItemsStyles,
-    feedbackIconAdjustmentStyles, tenantStyles } = mainHeaderStyles(currentTheme);
+    feedbackIconAdjustmentStyles, tenantStyles, moreInformationStyles } = mainHeaderStyles(currentTheme);
 
   return (
     <Stack tokens={sectionStackTokens}>
@@ -98,9 +98,9 @@ export const MainHeader: React.FunctionComponent <MainHeaderProps> = (props: Mai
               style={tenantStyles}
             />
           }
-          <Settings />
-          <Help />
-          <span style={feedbackIconAdjustmentStyles}> <FeedbackButton /> </span>
+          <span style={ moreInformationStyles }> <Settings /> </span>
+          <span style={ moreInformationStyles }> <Help /> </span>
+          <span style={ feedbackIconAdjustmentStyles }> <FeedbackButton /> </span>
           <Authentication />
         </Stack>
       </Stack>

diff --git a/src/app/views/main-header/settings/Settings.tsx b/src/app/views/main-header/settings/Settings.tsx
@@ -92,7 +92,8 @@ export const Settings: React.FunctionComponent<ISettingsProps> = () => {
     overflowY: 'hidden'
   }
 
-  const settingsButtonStyles = mainHeaderStyles(currentTheme).iconButton;
+  const { iconButton : settingsButtonStyles, settingsContainerStyles,
+    tooltipStyles} = mainHeaderStyles(currentTheme);
 
   const menuProperties = {
     shouldFocusOnMount: true,
@@ -104,11 +105,12 @@ export const Settings: React.FunctionComponent<ISettingsProps> = () => {
   };
 
   return (
-    <div>
+    <div style={ settingsContainerStyles }>
       <TooltipHost
         content={translateMessage('Settings')}
         id={getId()}
         calloutProps={{ gapSpace: 0 }}
+        styles={ tooltipStyles }
       >
         <IconButton
           ariaLabel={translateMessage('Settings')}