Merge pull request Expensify#37285 from narefyev91/ui-changes-for-pro…

…file-page Profile page UI updates
lukemorawski · Feb 28, 2024 · 59f8f3d · 59f8f3d
2 parents fc828da + ffe9213
commit 59f8f3d
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 9 deletions.
diff --git a/assets/images/workspace-profile-light.png b/assets/images/workspace-profile-light.png
diff --git a/assets/images/workspace-profile.png b/assets/images/workspace-profile.png
diff --git 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<ImageStyle> = isSmallScreenWidth ? [styles.mhv12, styles.mhn5] : [styles.mhv8, styles.mhn8];
+    const imageStyle: StyleProp<ImageStyle> = 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=""
                         >
                             <Image
-                                style={StyleSheet.flatten([styles.br4, styles.wAuto, styles.h68, imageStyle])}
-                                source={WorkspaceProfile}
+                                style={StyleSheet.flatten([styles.wAuto, styles.h68, imageStyle])}
+                                source={isDarkTheme ? WorkspaceProfile : WorkspaceProfileLight}
                                 resizeMode="cover"
                             />
                             <AvatarWithImagePicker
@@ -104,7 +108,12 @@ function WorkspaceProfilePage({policy, currencyList = {}, route}: WorkSpaceProfi
                                 DefaultAvatar={DefaultAvatar}
                                 type={CONST.ICON_TYPE_WORKSPACE}
                                 fallbackIcon={Expensicons.FallbackWorkspaceAvatar}
-                                style={[styles.mb3, isSmallScreenWidth ? styles.mtn17 : styles.mtn20, styles.alignItemsStart, styles.sectionMenuItemTopDescription]}
+                                style={[
+                                    isSmallScreenWidth ? styles.mb1 : styles.mb3,
+                                    isSmallScreenWidth ? styles.mtn17 : styles.mtn20,
+                                    styles.alignItemsStart,
+                                    styles.sectionMenuItemTopDescription,
+                                ]}
                                 isUsingDefaultAvatar={!policy?.avatar ?? null}
                                 onImageSelected={(file) => Policy.updateWorkspaceAvatar(policy?.id ?? '', file as File)}
                                 onImageRemoved={() => Policy.deleteWorkspaceAvatar(policy?.id ?? '')}

diff --git 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
@@ -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
@@ -216,7 +216,6 @@ export default {
     updateAnimationH: 240,
     updateTextViewContainerWidth: 310,
     updateViewHeaderHeight: 70,
-    workspaceProfileName: 20,
 
     mushroomTopHatWidth: 138,
     mushroomTopHatHeight: 128,