Fix: align right header items

src/app/views/authentication/Authentication.styles.ts

@@ -14,11 +14,19 @@ export const authenticationStyles = (theme: ITheme) => {
  alignItems: 'flex-start',
  justifyContent: 'start',
  marginRight: theme.spacing.s1,
- padding: theme.spacing.s1
+ padding: theme.spacing.s1,
+ position: 'relative',
+ top: '1px'
  },
  spinnerContainer: {
  display: 'flex',
  flexDirection: 'row'
+ },
+ loginProgressLabelStyles: {
+ root: {
+ position: 'relative',
+ top: '6px'
+ }
  }
  };
 };

src/app/views/authentication/Authentication.tsx

@@ -75,7 +75,7 @@ const Authentication = (props: any) => {
  <div className={classes.spinnerContainer}>
  <Spinner className={classes.spinner} size={SpinnerSize.medium} />
  {!minimised && (
- <Label>
+ <Label styles={{ root: { position: 'relative', top: '8px'}}} >
  <FormattedMessage
  id={`Signing you ${loginInProgress ? 'in' : 'out'}...`}
  />

src/app/views/authentication/profile/Profile.styles.ts

@@ -19,6 +19,12 @@ export const profileStyles = (theme: ITheme) => {
  paddingBottom: 10,
  textTransform: 'lowercase'
  }
+ },
+ profileSpinnerStyles: {
+ root: {
+ position: 'relative' as 'relative',
+ top: '2px'
+ }
  }
  }
 }

src/app/views/authentication/profile/Profile.tsx

@@ -75,6 +75,7 @@ const Profile = (props: any) => {
  const theme = getTheme();
  const linkStyles = profileStyles(theme).linkStyles
  const personaStyleToken = profileStyles(theme).personaStyleToken;
+ const profileSpinnerStyles = profileStyles(theme).profileSpinnerStyles;
 
 
  useEffect(() => {
@@ -85,7 +86,7 @@ const Profile = (props: any) => {
 
 
  if (!profile) {
- return (<Spinner size={SpinnerSize.medium} />);
+ return (<Spinner size={SpinnerSize.medium} styles={profileSpinnerStyles} />);
  }
 
  const handleSignOut = () => {

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

@@ -1,17 +1,23 @@
 import { ITheme } from '@fluentui/react';
 
-export const mainHeaderStyles = (theme: ITheme, props?: any) => {
+export const mainHeaderStyles = (theme: ITheme) => {
  return {
  rootStyles: {
  root: {
  background: theme.palette.neutralLighter,
  height: 50,
- marginBottom: props && props.token ? '0px' : '-9px'
+ marginBottom: '9px'
  }
  },
- authenticationItemStyles: {
- alignItems: 'center',
- display: 'flex'
+ rightItemsStyles: {
+ root: {
+ alignItems: 'center'
+ }
+ },
+ feedbackIconAdjustmentStyles: {
+ position: 'relative' as 'relative',
+ right: '-6px',
+ top: '4px'
  }
  }
 }

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

@@ -33,13 +33,14 @@ const itemAlignmentsStackTokens: IStackTokens = {
 };
 
 export const MainHeader: React.FunctionComponent <MainHeaderProps> = (props: MainHeaderProps) => {
- const { authToken, profile } = useSelector(
+ const { profile } = useSelector(
  (state: IRootState) => state
  );
  const minimised = props.minimised;
  const currentTheme = getTheme();
- const itemAlignmentStackStyles = mainHeaderStyles(currentTheme, authToken).rootStyles;
- const itemStyles = mainHeaderStyles(currentTheme).authenticationItemStyles;
+ const itemAlignmentStackStyles = mainHeaderStyles(currentTheme).rootStyles;
+ const rightItemsStyles = mainHeaderStyles(currentTheme).rightItemsStyles;
+ const feedbackIconAdjustmentStyles = mainHeaderStyles(currentTheme).feedbackIconAdjustmentStyles;
 
  return (
  <Stack tokens={sectionStackTokens}>
@@ -71,9 +72,8 @@ export const MainHeader: React.FunctionComponent <MainHeaderProps> = (props: Mai
  </Label>
  </Stack>
 
- <Stack >
- <span style={itemStyles}>
- {!profile &&
+ <Stack horizontal styles={rightItemsStyles}>
+ {!profile &&
  <TooltipHost
  content={
  <>
@@ -85,19 +85,16 @@ export const MainHeader: React.FunctionComponent <MainHeaderProps> = (props: Mai
  >
  <DefaultButton text={translateMessage('Sample Tenant')} checked={true} style={{border: 'none'}}/>
  </TooltipHost>
-  }
-  {profile &&
+ }
+ {profile &&
  <DefaultButton text={`${profile.tenant} Tenant`} checked={true} style={{border: 'none', cursor: 'default'}}
  />
- }
- <FeedbackButton />
- <Settings />
- <Authentication />
- </span>
- <span style={itemStyles}></span>
+ }
+ <span style={feedbackIconAdjustmentStyles}> <FeedbackButton /> </span>
+ <Settings />
+ <Authentication />
  </Stack>
  </Stack>
  </Stack>
  );
 };
-