Merge pull request #41647 from Krishna2323/krishna2323/issue/41048

fix: Worksapce pages - buttons on the top not filing the space evenly.
Expensify · May 28, 2024 · 195f7e6 · 195f7e6
2 parents e9698b5 + d6230dc
commit 195f7e6
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 10 deletions.
diff --git a/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx
@@ -217,15 +217,15 @@ function WorkspaceCategoriesPage({route}: WorkspaceCategoriesPageProps) {
         }
 
         return (
-            <View style={[styles.w100, styles.flexRow, isSmallScreenWidth && styles.mb3]}>
+            <View style={[styles.w100, styles.flexRow, styles.gap2, isSmallScreenWidth && styles.mb3]}>
                 {!PolicyUtils.hasAccountingConnections(policy) && (
                     <Button
                         medium
                         success
                         onPress={navigateToCreateCategoryPage}
                         icon={Expensicons.Plus}
                         text={translate('workspace.categories.addCategory')}
-                        style={[styles.mr3, isSmallScreenWidth && styles.flex1]}
+                        style={[isSmallScreenWidth && styles.flex1]}
                     />
                 )}
                 <Button

diff --git a/src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx b/src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx
@@ -226,14 +226,14 @@ function PolicyDistanceRatesPage({policy, route}: PolicyDistanceRatesPageProps)
     const isLoading = !isOffline && customUnit === undefined;
 
     const headerButtons = (
-        <View style={[styles.w100, styles.flexRow, isSmallScreenWidth && styles.mb3]}>
+        <View style={[styles.w100, styles.flexRow, styles.gap2, isSmallScreenWidth && styles.mb3]}>
             {selectedDistanceRates.length === 0 ? (
                 <>
                     <Button
                         medium
                         text={translate('workspace.distanceRates.addRate')}
                         onPress={addRate}
-                        style={[styles.mr3, isSmallScreenWidth && styles.flexGrow1]}
+                        style={[isSmallScreenWidth && styles.flex1]}
                         icon={Expensicons.Plus}
                         success
                     />
@@ -242,7 +242,7 @@ function PolicyDistanceRatesPage({policy, route}: PolicyDistanceRatesPageProps)
                         medium
                         text={translate('workspace.common.settings')}
                         onPress={openSettings}
-                        style={[isSmallScreenWidth && styles.flexGrow1]}
+                        style={[isSmallScreenWidth && styles.flex1]}
                         icon={Expensicons.Gear}
                     />
                 </>

diff --git a/src/pages/workspace/tags/WorkspaceTagsPage.tsx b/src/pages/workspace/tags/WorkspaceTagsPage.tsx
@@ -176,15 +176,15 @@ function WorkspaceTagsPage({route}: WorkspaceTagsPageProps) {
 
         if (selectedTagsArray.length === 0) {
             return (
-                <View style={[styles.w100, styles.flexRow, isSmallScreenWidth && styles.mb3]}>
+                <View style={[styles.w100, styles.flexRow, styles.gap2, isSmallScreenWidth && styles.mb3]}>
                     {!isThereAnyAccountingConnection && !isMultiLevelTags && (
                         <Button
                             medium
                             success
                             onPress={navigateToCreateTagPage}
                             icon={Expensicons.Plus}
                             text={translate('workspace.tags.addTag')}
-                            style={[styles.mr3, isSmallScreenWidth && styles.flex1]}
+                            style={[isSmallScreenWidth && styles.flex1]}
                         />
                     )}
                     {policyTags && (

diff --git a/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx b/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx
@@ -204,14 +204,14 @@ function WorkspaceTaxesPage({
     }, [policy?.taxRates?.taxes, selectedTaxesIDs, toggleTaxes, translate]);
 
     const headerButtons = !selectedTaxesIDs.length ? (
-        <View style={[styles.w100, styles.flexRow, isSmallScreenWidth && styles.mb3]}>
+        <View style={[styles.w100, styles.flexRow, styles.gap2, isSmallScreenWidth && styles.mb3]}>
             <Button
                 medium
                 success
                 onPress={() => Navigation.navigate(ROUTES.WORKSPACE_TAX_CREATE.getRoute(policyID))}
                 icon={Expensicons.Plus}
                 text={translate('workspace.taxes.addRate')}
-                style={[styles.mr3, isSmallScreenWidth && styles.flex1]}
+                style={[isSmallScreenWidth && styles.flex1]}
             />
             <Button
                 medium

diff --git a/src/styles/index.ts b/src/styles/index.ts
@@ -567,7 +567,6 @@ const styles = (theme: ThemeColors) =>
         },
 
         buttonContainer: {
-            padding: 1,
             borderRadius: variables.buttonBorderRadius,
         },
-Original file line number
+Diff line change
@@ Expand Up / @@ -567,7 +567,6 @@ const styles = (theme: ThemeColors) => @@
             },
             buttonContainer: {
-                padding: 1,
                 borderRadius: variables.buttonBorderRadius,
             },
@@ Expand Down @@