From c9e86adef1edff0d3f21a9fe8b1f9c3a509c5491 Mon Sep 17 00:00:00 2001
From: EvansA <evansonoka05.j@gmail.com>
Date: Wed, 11 May 2022 14:28:59 +0300
Subject: [PATCH] Fix: align right header items (#1720)

---
 .../authentication/Authentication.styles.ts   | 10 ++++++-
 .../views/authentication/Authentication.tsx   |  2 +-
 .../authentication/profile/Profile.styles.ts  |  6 +++++
 .../views/authentication/profile/Profile.tsx  |  3 ++-
 .../views/main-header/MainHeader.styles.ts    | 16 ++++++++----
 src/app/views/main-header/MainHeader.tsx      | 26 ++++++++-----------
 6 files changed, 40 insertions(+), 23 deletions(-)

diff --git a/src/app/views/authentication/Authentication.styles.ts b/src/app/views/authentication/Authentication.styles.ts
index 0d87e45036..c73c98c3a4 100644
--- a/src/app/views/authentication/Authentication.styles.ts
+++ b/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'
+      }
     }
   };
 };
diff --git a/src/app/views/authentication/Authentication.tsx b/src/app/views/authentication/Authentication.tsx
index 19ed82e57e..1559a031fb 100644
--- a/src/app/views/authentication/Authentication.tsx
+++ b/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'}...`}
             />
diff --git a/src/app/views/authentication/profile/Profile.styles.ts b/src/app/views/authentication/profile/Profile.styles.ts
index 96886e82b7..0688c7c4ef 100644
--- a/src/app/views/authentication/profile/Profile.styles.ts
+++ b/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'
+      }
     }
   }
 }
\ No newline at end of file
diff --git a/src/app/views/authentication/profile/Profile.tsx b/src/app/views/authentication/profile/Profile.tsx
index ab3f30b4e0..74a6b700e4 100644
--- a/src/app/views/authentication/profile/Profile.tsx
+++ b/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 = () => {
diff --git a/src/app/views/main-header/MainHeader.styles.ts b/src/app/views/main-header/MainHeader.styles.ts
index 09f78b8494..4a840ec3cc 100644
--- a/src/app/views/main-header/MainHeader.styles.ts
+++ b/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'
     }
   }
 }
\ No newline at end of file
diff --git a/src/app/views/main-header/MainHeader.tsx b/src/app/views/main-header/MainHeader.tsx
index 85e5a8c08c..1f8f813abd 100644
--- a/src/app/views/main-header/MainHeader.tsx
+++ b/src/app/views/main-header/MainHeader.tsx
@@ -33,13 +33,13 @@ 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 { rootStyles : itemAlignmentStackStyles, rightItemsStyles,
+    feedbackIconAdjustmentStyles } = mainHeaderStyles(currentTheme);
 
   return (
     <Stack tokens={sectionStackTokens}>
@@ -71,9 +71,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 +84,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>
   );
 };
-