Task: Profile callout styles

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

@@ -0,0 +1,24 @@
+import { ITheme } from '@fluentui/react'
+
+export const profileStyles = (theme: ITheme) => {
+  return {
+    linkStyles: {
+      root: {
+        marginLeft: '9px',
+        height: '24px',
+        color: `${theme.palette.whiteTranslucent40} !important`,
+        '&:hover': { textDecoration: 'none', color: `${theme.palette.themeDarkAlt} !important` }
+      }
+    },
+    personaStyleToken: {
+      primaryText: {
+        paddingBottom: 5
+      },
+      secondaryText:
+      {
+        paddingBottom: 10,
+        textTransform: 'lowercase'
+      }
+    }
+  }
+}

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

@@ -2,6 +2,8 @@ import {
   ActionButton,
   Callout,
   DefaultButton,
+  getTheme,
+  IContextualMenuItem,
   IPersonaSharedProps,
   Label,
   Link,
@@ -31,6 +33,7 @@ import { translateMessage } from '../../../utils/translate-messages';
 import { classNames } from '../../classnames';
 import { Permission } from '../../query-runner/request/permissions';
 import { authenticationStyles } from '../Authentication.styles';
+import { profileStyles } from './Profile.styles';
 
 const trackOfficeDevProgramLinkClickEvent = () => {
   telemetry.trackEvent(eventTypes.LINK_CLICK_EVENT, {
@@ -51,6 +54,10 @@ const Profile = (props: any) => {
   const buttonId = useId('callout-button');
   const labelId = useId('callout-label');
   const descriptionId = useId('callout-description');
+  const theme = getTheme();
+  const linkStyles = profileStyles(theme).linkStyles
+  const personaStyleToken = profileStyles(theme).personaStyleToken;
+
 
   useEffect(() => {
     if (authenticated && !profile) {
@@ -146,17 +153,47 @@ const Profile = (props: any) => {
 
   const classes = classNames(props);
 
-  const personaStyleToken: any = {
-    primaryText: {
-      paddingBottom: 5
-    },
-    secondaryText:
+  const items: IContextualMenuItem[] = [
     {
-      paddingBottom: 10,
-      textTransform: 'lowercase'
+      key: 'office-dev-program',
+      text: translateMessage('Office Dev Program'),
+      href: `https://developer.microsoft.com/${geLocale}/office/dev-program`,
+      target: '_blank',
+      iconProps: {
+        iconName: 'CommandPrompt'
+      },
+      onClick: () => trackOfficeDevProgramLinkClickEvent()
     }
+  ];
+
+  if (authenticated) {
+    items.push(
+      {
+        key: 'view-all-permissions',
+        text: translateMessage('view all permissions'),
+        iconProps: {
+          iconName: 'AzureKeyVault'
+        },
+        onClick: () => changePanelState()
+      },
+      {
+        key: 'sign-out',
+        text: translateMessage('sign out'),
+        onClick: () => handleSignOut(),
+        iconProps: {
+          iconName: 'SignOut'
+        }
+      }
+    );
+  }
+
+  const menuProperties = {
+    shouldFocusOnMount: true,
+    alignTargetEdge: true,
+    items
   };
 
+
   const showProfileComponent = (userPersona: any ): React.ReactNode => {
 
     const smallPersona = <Persona
@@ -201,8 +238,8 @@ const Profile = (props: any) => {
               key= 'office-dev-program'
               href={`https://developer.microsoft.com/${geLocale}/office/dev-program`}
               target="_blank"
-              className={styles.link}
               onClick={() => trackOfficeDevProgramLinkClickEvent()}
+              styles={linkStyles}
             >
               {translateMessage('Office Dev Program')}
             </Link>

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

@@ -4,7 +4,7 @@ export const mainHeaderStyles = (theme: ITheme) => {
   return {
     rootStyles: {
       root: {
-        background: theme.semanticColors.bodyBackground,
+        background: theme.palette.neutralLighter,
         height: 50,
         marginBottom: '-9px'
       }

src/themes/dark.ts

@@ -24,6 +24,7 @@ export const dark = {
     neutralDark: '#fefefe',
     black: '#ffffff',
     white: '#070707',
+    whiteTranslucent40: '#f1f1f1',
     blueMid: '#6cb8f6',
     green: '#00a100'
   },

src/themes/high-contrast.ts

@@ -22,6 +22,7 @@ export const highContrast = {
     neutralDark: '#f4f4f4',
     black: '#f8f8f8',
     white: '#000000',
+    whiteTranslucent40: '#f1f1f1',
     blueMid: '#6cb8f6',
     green: '#92c353'
   },

src/themes/light.ts

@@ -25,6 +25,7 @@ export const light = {
     black: '#1d1d1d',
     white: '#ffffff',
     blueMid: '#00188F',
+    whiteTranslucent40: '#1d1d1d',
     green: '#008000'
   }
 };