From b5e151fe7c9b2ff09ae742a19fb8d804bcbd00db Mon Sep 17 00:00:00 2001 From: Evans Aboge Date: Wed, 27 Apr 2022 17:20:37 +0300 Subject: [PATCH 1/3] fix header color --- src/app/views/main-header/MainHeader.styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/views/main-header/MainHeader.styles.ts b/src/app/views/main-header/MainHeader.styles.ts index 7f0933f019..83b2be0c51 100644 --- a/src/app/views/main-header/MainHeader.styles.ts +++ b/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' } From 56d5b4dfa9ce7786c9ea0995dd3f1225377de872 Mon Sep 17 00:00:00 2001 From: Evans Aboge Date: Wed, 27 Apr 2022 17:27:24 +0300 Subject: [PATCH 2/3] fix styling on profile callout --- .../authentication/profile/Profile.styles.ts | 24 +++++++++++++++++++ .../views/authentication/profile/Profile.tsx | 19 +++++++-------- src/themes/dark.ts | 1 + src/themes/high-contrast.ts | 1 + src/themes/light.ts | 1 + 5 files changed, 35 insertions(+), 11 deletions(-) create mode 100644 src/app/views/authentication/profile/Profile.styles.ts diff --git a/src/app/views/authentication/profile/Profile.styles.ts b/src/app/views/authentication/profile/Profile.styles.ts new file mode 100644 index 0000000000..96886e82b7 --- /dev/null +++ b/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' + } + } + } +} \ 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 cffbc45889..79dc19ed25 100644 --- a/src/app/views/authentication/profile/Profile.tsx +++ b/src/app/views/authentication/profile/Profile.tsx @@ -3,6 +3,7 @@ import { Callout, DefaultButton, FontWeights, + getTheme, IContextualMenuItem, IPersonaSharedProps, Label, @@ -35,6 +36,8 @@ import { translateMessage } from '../../../utils/translate-messages'; import { classNames } from '../../classnames'; import { Permission } from '../../query-runner/request/permissions'; import { authenticationStyles } from '../Authentication.styles'; +import { hover } from '@testing-library/user-event/dist/types/convenience'; +import { profileStyles } from './Profile.styles'; const trackOfficeDevProgramLinkClickEvent = () => { telemetry.trackEvent(eventTypes.LINK_CLICK_EVENT, { @@ -60,6 +63,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) { @@ -195,16 +202,6 @@ const Profile = (props: any) => { items }; - const personaStyleToken: any = { - primaryText: { - paddingBottom: 5 - }, - secondaryText: - { - paddingBottom: 10, - textTransform: 'lowercase' - } - }; const defaultSize = PersonaSize.size32; @@ -253,8 +250,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')} diff --git a/src/themes/dark.ts b/src/themes/dark.ts index 52294577c1..d86e0a8319 100644 --- a/src/themes/dark.ts +++ b/src/themes/dark.ts @@ -24,6 +24,7 @@ export const dark = { neutralDark: '#fefefe', black: '#ffffff', white: '#070707', + whiteTranslucent40: '#f1f1f1', blueMid: '#6cb8f6', green: '#00a100' }, diff --git a/src/themes/high-contrast.ts b/src/themes/high-contrast.ts index 65dfb32dbf..9a26441883 100644 --- a/src/themes/high-contrast.ts +++ b/src/themes/high-contrast.ts @@ -22,6 +22,7 @@ export const highContrast = { neutralDark: '#f4f4f4', black: '#f8f8f8', white: '#000000', + whiteTranslucent40: '#f1f1f1', blueMid: '#6cb8f6', green: '#92c353' }, diff --git a/src/themes/light.ts b/src/themes/light.ts index bd95c82b22..729e0bc3e0 100644 --- a/src/themes/light.ts +++ b/src/themes/light.ts @@ -25,6 +25,7 @@ export const light = { black: '#1d1d1d', white: '#ffffff', blueMid: '#00188F', + whiteTranslucent40: '#1d1d1d', green: '#008000' } }; From da68b2aefd819b2642176de45e82d8eee65c30c4 Mon Sep 17 00:00:00 2001 From: Evans Aboge Date: Wed, 27 Apr 2022 17:35:48 +0300 Subject: [PATCH 3/3] merge sign-in-header --- .../views/authentication/profile/Profile.tsx | 51 ++++++------------- src/app/views/main-header/MainHeader.tsx | 6 +-- src/app/views/settings/Settings.tsx | 18 ++++--- 3 files changed, 29 insertions(+), 46 deletions(-) diff --git a/src/app/views/authentication/profile/Profile.tsx b/src/app/views/authentication/profile/Profile.tsx index 79dc19ed25..38a9293b09 100644 --- a/src/app/views/authentication/profile/Profile.tsx +++ b/src/app/views/authentication/profile/Profile.tsx @@ -2,7 +2,6 @@ import { ActionButton, Callout, DefaultButton, - FontWeights, getTheme, IContextualMenuItem, IPersonaSharedProps, @@ -17,8 +16,7 @@ import { Spinner, SpinnerSize, Stack, - styled, - Text + styled } from '@fluentui/react'; import React, { useEffect, useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; @@ -26,7 +24,6 @@ import { useId } from '@fluentui/react-hooks'; import { geLocale } from '../../../../appLocale'; import { componentNames, eventTypes, telemetry } from '../../../../telemetry'; -import { Mode } from '../../../../types/enums'; import { IRootState } from '../../../../types/root'; import { signOut } from '../../../services/actions/auth-action-creators'; import { consentToScopes } from '../../../services/actions/permissions-action-creator'; @@ -36,7 +33,6 @@ import { translateMessage } from '../../../utils/translate-messages'; import { classNames } from '../../classnames'; import { Permission } from '../../query-runner/request/permissions'; import { authenticationStyles } from '../Authentication.styles'; -import { hover } from '@testing-library/user-event/dist/types/convenience'; import { profileStyles } from './Profile.styles'; const trackOfficeDevProgramLinkClickEvent = () => { @@ -47,15 +43,10 @@ const trackOfficeDevProgramLinkClickEvent = () => { const Profile = (props: any) => { const dispatch = useDispatch(); const { - sidebarProperties, profile, authToken, - permissionsPanelOpen, - graphExplorerMode + permissionsPanelOpen } = useSelector((state: IRootState) => state); - const mobileScreen = !!sidebarProperties.mobileScreen; - const showSidebar = !!sidebarProperties.showSidebar; - const minimised = !mobileScreen && !showSidebar; const authenticated = authToken.token; const [selectedPermissions, setSelectedPermissions] = useState([]); const [isCalloutVisible, setIsCalloutVisible] = useState(false); @@ -203,22 +194,19 @@ const Profile = (props: any) => { }; - const defaultSize = PersonaSize.size32; + const showProfileComponent = (userPersona: any ): React.ReactNode => { - const profileProperties = { - persona, - styles: personaStyleToken, - hidePersonaDetails: !isCalloutVisible, - size: isCalloutVisible ? PersonaSize.size40 : defaultSize - }; - - const showProfileComponent = (profileProperties: any ): React.ReactNode => { + const smallPersona = ; - const persona = ; + const fullPersona = return( <> { role='button' //menuProps={menuProperties} > - {persona} + {smallPersona} {isCalloutVisible && ( @@ -243,7 +231,7 @@ const Profile = (props: any) => { onDismiss={toggleIsCalloutVisible} setInitialFocus > - {persona} + {fullPersona}
{ return (
- {showProfileComponent(profileProperties)} + {showProfileComponent(persona)} changePanelState()} @@ -287,9 +275,6 @@ const Profile = (props: any) => { ); } -// eslint-disable-next-line max-len - - const styles = mergeStyleSets({ button: { width: 300 @@ -299,10 +284,6 @@ const styles = mergeStyleSets({ maxWidth: '90%', padding: '20px 24px' }, - title: { - marginBottom: 12, - fontWeight: FontWeights.semilight - }, link: { display: 'block', marginTop: 20 diff --git a/src/app/views/main-header/MainHeader.tsx b/src/app/views/main-header/MainHeader.tsx index 923f2cd345..ff5cfb57b3 100644 --- a/src/app/views/main-header/MainHeader.tsx +++ b/src/app/views/main-header/MainHeader.tsx @@ -1,12 +1,11 @@ import * as React from 'react'; import { FontSizes, + FontWeights, getId, getTheme, IconButton, - IStackStyles, IStackTokens, - ITheme, Label, MessageBar, MessageBarType, @@ -71,7 +70,7 @@ export const MainHeader: React.FunctionComponent = (props: Mai onClick={() => props.toggleSidebar()} /> @@ -106,3 +105,4 @@ const showUnAuthenticatedText = (): React.ReactNode => { ); }; + diff --git a/src/app/views/settings/Settings.tsx b/src/app/views/settings/Settings.tsx index c455b61ce0..4b2f42e281 100644 --- a/src/app/views/settings/Settings.tsx +++ b/src/app/views/settings/Settings.tsx @@ -1,5 +1,6 @@ import { ChoiceGroup, + ContextualMenuItemType, DefaultButton, Dialog, DialogFooter, @@ -45,6 +46,14 @@ function Settings(props: ISettingsProps) { useEffect(() => { const menuItems: any = [ + { + key: 'change-theme', + text: translateMessage('Change theme'), + iconProps: { + iconName: 'Color' + }, + onClick: () => toggleThemeChooserDialogState() + }, { key: 'report-issue', text: translateMessage('Report an Issue'), @@ -55,14 +64,7 @@ function Settings(props: ISettingsProps) { }, onClick: () => trackReportAnIssueLinkClickEvent() }, - { - key: 'change-theme', - text: messages['Change theme'], - iconProps: { - iconName: 'Color' - }, - onClick: () => toggleThemeChooserDialogState() - }, + { key: 'divider_1', itemType: ContextualMenuItemType.Divider }, { key: 'ge-documentation', text: translateMessage('Documentation'),