Merge pull request #27441 from aman-atg/aman/use-gap-for-all-platform…

…s-for-consistency use gap in login button row container for consistency
Expensify · Sep 20, 2023 · 1340b27 · 1340b27
2 parents f22e4ec + ccfa6a9
commit 1340b27
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 10 deletions.
diff --git a/src/components/SignInButtons/AppleSignIn/index.desktop.js b/src/components/SignInButtons/AppleSignIn/index.desktop.js
@@ -14,7 +14,7 @@ const appleSignInWebRouteForDesktopFlow = `${CONFIG.EXPENSIFY.NEW_EXPENSIFY_URL}
  */
 function AppleSignIn() {
     return (
-        <View style={styles.appleButtonContainer}>
+        <View style={styles.desktopSignInButtonContainer}>
             <IconButton
                 onPress={() => {
                     window.open(appleSignInWebRouteForDesktopFlow);

diff --git a/src/components/SignInButtons/GoogleSignIn/index.desktop.js b/src/components/SignInButtons/GoogleSignIn/index.desktop.js
@@ -17,7 +17,7 @@ const googleSignInWebRouteForDesktopFlow = `${CONFIG.EXPENSIFY.NEW_EXPENSIFY_URL
  */
 function GoogleSignIn() {
     return (
-        <View style={styles.appleButtonContainer}>
+        <View style={styles.desktopSignInButtonContainer}>
             <IconButton
                 onPress={() => {
                     window.open(googleSignInWebRouteForDesktopFlow);

diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -3684,35 +3684,33 @@ const styles = (theme) => ({
     },
 
     loginButtonRow: {
-        justifyContent: 'center',
         width: '100%',
+        gap: 12,
         ...flex.flexRow,
+        ...flex.justifyContentCenter,
     },
 
     loginButtonRowSmallScreen: {
-        justifyContent: 'center',
         width: '100%',
-        marginBottom: 10,
+        gap: 12,
         ...flex.flexRow,
+        ...flex.justifyContentCenter,
+        marginBottom: 10,
     },
 
-    appleButtonContainer: {
+    desktopSignInButtonContainer: {
         width: 40,
         height: 40,
-        marginRight: 20,
     },
 
     signInIconButton: {
-        margin: 10,
-        marginTop: 0,
         padding: 2,
     },
 
     googleButtonContainer: {
         colorScheme: 'light',
         width: 40,
         height: 40,
-        marginLeft: 12,
         alignItems: 'center',
         overflow: 'hidden',
     },