Merge pull request #44215 from Krishna2323/krishna2323/issue/44210

fix: Workspaces - Workspaces title is shown in two lines.
Expensify · Jun 25, 2024 · 2f688ad · 2f688ad
2 parents 8243931 + 95ee7de
commit 2f688ad
Showing 1 changed file with 16 additions and 14 deletions.
diff --git a/src/pages/workspace/WorkspacesListPage.tsx b/src/pages/workspace/WorkspacesListPage.tsx
@@ -354,6 +354,18 @@ function WorkspacesListPage({policies, reimbursementAccount, reports, session}:
             .sort((a, b) => localeCompare(a.title, b.title));
     }, [reimbursementAccount?.errors, policies, isOffline, theme.textLight, policyRooms]);
 
+    const getHeaderButton = () => (
+        <Button
+            accessibilityLabel={translate('workspace.new.newWorkspace')}
+            success
+            medium
+            text={translate('workspace.new.newWorkspace')}
+            onPress={() => interceptAnonymousUser(() => App.createWorkspaceWithPolicyDraftAndNavigateToIt())}
+            icon={Expensicons.Plus}
+            style={[isSmallScreenWidth && styles.flexGrow1, isSmallScreenWidth && styles.mb3]}
+        />
+    );
+
     if (isEmptyObject(workspaces)) {
         return (
             <ScreenWrapper
@@ -369,14 +381,9 @@ function WorkspacesListPage({policies, reimbursementAccount, reports, session}:
                     onBackButtonPress={() => Navigation.goBack()}
                     icon={Illustrations.BigRocket}
                 >
-                    <Button
-                        accessibilityLabel={translate('workspace.new.newWorkspace')}
-                        success
-                        medium
-                        text={translate('workspace.new.newWorkspace')}
-                        onPress={() => interceptAnonymousUser(() => App.createWorkspaceWithPolicyDraftAndNavigateToIt())}
-                    />
+                    {!isSmallScreenWidth && getHeaderButton()}
                 </HeaderWithBackButton>
+                {isSmallScreenWidth && <View style={[styles.pl5, styles.pr5]}>{getHeaderButton()}</View>}
                 <ScrollView contentContainerStyle={styles.pt3}>
                     <View style={[styles.flex1, isLessThanMediumScreen ? styles.workspaceSectionMobile : styles.workspaceSection]}>
                         <FeatureList
@@ -410,14 +417,9 @@ function WorkspacesListPage({policies, reimbursementAccount, reports, session}:
                     onBackButtonPress={() => Navigation.goBack()}
                     icon={Illustrations.BigRocket}
                 >
-                    <Button
-                        accessibilityLabel={translate('workspace.new.newWorkspace')}
-                        success
-                        medium
-                        text={translate('workspace.new.newWorkspace')}
-                        onPress={() => interceptAnonymousUser(() => App.createWorkspaceWithPolicyDraftAndNavigateToIt())}
-                    />
+                    {!isSmallScreenWidth && getHeaderButton()}
                 </HeaderWithBackButton>
+                {isSmallScreenWidth && <View style={[styles.pl5, styles.pr5]}>{getHeaderButton()}</View>}
                 <FlatList
                     data={workspaces}
                     renderItem={getMenuItem}