diff --git a/assets/images/workspace-profile-light.png b/assets/images/workspace-profile-light.png new file mode 100644 index 000000000000..7e82c98656d2 Binary files /dev/null and b/assets/images/workspace-profile-light.png differ diff --git a/assets/images/workspace-profile.png b/assets/images/workspace-profile.png index 72112566e35f..df1f6f9fd645 100644 Binary files a/assets/images/workspace-profile.png and b/assets/images/workspace-profile.png differ diff --git a/src/pages/workspace/WorkspaceProfilePage.tsx b/src/pages/workspace/WorkspaceProfilePage.tsx index c01df71255e0..f475664b3025 100644 --- a/src/pages/workspace/WorkspaceProfilePage.tsx +++ b/src/pages/workspace/WorkspaceProfilePage.tsx @@ -3,6 +3,7 @@ import type {ImageStyle, StyleProp} from 'react-native'; import {Image, ScrollView, StyleSheet, View} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; import {withOnyx} from 'react-native-onyx'; +import WorkspaceProfileLight from '@assets/images/workspace-profile-light.png'; import WorkspaceProfile from '@assets/images/workspace-profile.png'; import Avatar from '@components/Avatar'; import AvatarWithImagePicker from '@components/AvatarWithImagePicker'; @@ -14,6 +15,7 @@ import OfflineWithFeedback from '@components/OfflineWithFeedback'; import Section from '@components/Section'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; +import useThemePreference from '@hooks/useThemePreference'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import Navigation from '@libs/Navigation/Navigation'; @@ -42,6 +44,8 @@ function WorkspaceProfilePage({policy, currencyList = {}, route}: WorkSpaceProfi const styles = useThemeStyles(); const {translate} = useLocalize(); const {isSmallScreenWidth} = useWindowDimensions(); + const themePreference = useThemePreference(); + const isDarkTheme = themePreference === CONST.THEME.DARK; const outputCurrency = policy?.outputCurrency ?? ''; const currencySymbol = currencyList?.[outputCurrency]?.symbol ?? ''; @@ -55,7 +59,7 @@ function WorkspaceProfilePage({policy, currencyList = {}, route}: WorkSpaceProfi const policyName = policy?.name ?? ''; const policyDescription = policy?.description ?? ''; const readOnly = !PolicyUtils.isPolicyAdmin(policy); - const imageStyle: StyleProp = isSmallScreenWidth ? [styles.mhv12, styles.mhn5] : [styles.mhv8, styles.mhn8]; + const imageStyle: StyleProp = isSmallScreenWidth ? [styles.mhv12, styles.mhn5, styles.mbn5] : [styles.mhv8, styles.mhn8, styles.mbn5]; const DefaultAvatar = useCallback( () => ( @@ -91,8 +95,8 @@ function WorkspaceProfilePage({policy, currencyList = {}, route}: WorkSpaceProfi title="" > Policy.updateWorkspaceAvatar(policy?.id ?? '', file as File)} onImageRemoved={() => Policy.deleteWorkspaceAvatar(policy?.id ?? '')} diff --git a/src/styles/index.ts b/src/styles/index.ts index 32392d62e5c4..304cc9e7f6bd 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -3068,7 +3068,7 @@ const styles = (theme: ThemeColors) => smallEditIcon: { alignItems: 'center', backgroundColor: theme.buttonDefaultBG, - borderColor: theme.appBG, + borderColor: theme.cardBG, borderRadius: 20, borderWidth: 3, color: theme.textReversed, @@ -4630,9 +4630,8 @@ const styles = (theme: ThemeColors) => }, workspaceTitleStyle: { - fontFamily: FontUtils.fontFamily.platform.EXP_NEUE_BOLD, - fontWeight: '500', - fontSize: variables.workspaceProfileName, + ...headlineFont, + fontSize: variables.fontSizeXLarge, }, } satisfies Styles); diff --git a/src/styles/utils/spacing.ts b/src/styles/utils/spacing.ts index 0249b3c6dfc0..b807ee2bdf24 100644 --- a/src/styles/utils/spacing.ts +++ b/src/styles/utils/spacing.ts @@ -315,6 +315,10 @@ export default { marginBottom: -4, }, + mbn5: { + marginBottom: -20, + }, + p0: { padding: 0, paddingHorizontal: 0, diff --git a/src/styles/variables.ts b/src/styles/variables.ts index f7c9bd055041..3d5115a31f54 100644 --- a/src/styles/variables.ts +++ b/src/styles/variables.ts @@ -216,7 +216,6 @@ export default { updateAnimationH: 240, updateTextViewContainerWidth: 310, updateViewHeaderHeight: 70, - workspaceProfileName: 20, mushroomTopHatWidth: 138, mushroomTopHatHeight: 128,