From b0c30fc37747ab6ec06c87e14b89c00e4bffb92c Mon Sep 17 00:00:00 2001
From: Tarik Bellamine <tarikbellamine@protonmail.com>
Date: Fri, 26 Mar 2021 11:44:24 -0700
Subject: [PATCH] added changes

---
 .../locales/en-US/fiatExchangeFlow.json       |   6 +-
 .../src/fiatExchanges/CashInSuccess.tsx       |  43 ++-
 .../__snapshots__/CashInSuccess.test.tsx.snap | 276 ++++++++----------
 3 files changed, 144 insertions(+), 181 deletions(-)

diff --git a/packages/mobile/locales/en-US/fiatExchangeFlow.json b/packages/mobile/locales/en-US/fiatExchangeFlow.json
index 5ca9fde37b8..758841016ec 100644
--- a/packages/mobile/locales/en-US/fiatExchangeFlow.json
+++ b/packages/mobile/locales/en-US/fiatExchangeFlow.json
@@ -60,9 +60,9 @@
   "celoDeposit": "CELO Purchase",
   "cUsdDeposit": "cUSD Purchase",
   "cicoSuccess": {
-    "title": "Transaction started!",
-    "bodyWithProvider": "{{provider}} is processing your order. You should receive your funds within 1-2 days.",
-    "bodyWithoutProvider": "The service provider is processing your order. You should receive your funds within 1-2 days."
+    "title": "Order submitted!",
+    "bodyWithProvider": "{{provider}} is processing your order. You should receive your funds within a couple of days.",
+    "bodyWithoutProvider": "The service provider is processing your order. You should receive your funds within a couple of days."
   },
   "restrictedRegion": "Limited support in region"
 }
diff --git a/packages/mobile/src/fiatExchanges/CashInSuccess.tsx b/packages/mobile/src/fiatExchanges/CashInSuccess.tsx
index fb114ad5025..6a4b192b248 100644
--- a/packages/mobile/src/fiatExchanges/CashInSuccess.tsx
+++ b/packages/mobile/src/fiatExchanges/CashInSuccess.tsx
@@ -21,25 +21,23 @@ function CashInSuccessScreen({ route }: Props) {
 
   return (
     <View style={styles.container}>
-      <View style={styles.imageContainer}>
-        <Image source={fiatExchange} style={styles.image} resizeMode={'contain'} />
-        <Text style={styles.title}>{t('cicoSuccess.title')}</Text>
-      </View>
       <View style={styles.content}>
+        <Image source={fiatExchange} resizeMode={'contain'} />
+        <Text style={styles.title}>{t('cicoSuccess.title')}</Text>
         <Text style={styles.contentText}>
           {provider
             ? t('cicoSuccess.bodyWithProvider', { provider })
             : t('cicoSuccess.bodyWithoutProvider')}
         </Text>
-        <View style={styles.buttonContainer}>
-          <Button
-            style={styles.button}
-            text={t('global:continue')}
-            accessibilityLabel={t('global:continue')}
-            onPress={navigateHome}
-            testID={'SuccessContinue'}
-          />
-        </View>
+      </View>
+      <View style={styles.buttonContainer}>
+        <Button
+          style={styles.button}
+          text={t('global:continue')}
+          accessibilityLabel={t('global:continue')}
+          onPress={navigateHome}
+          testID={'SuccessContinue'}
+        />
       </View>
     </View>
   )
@@ -57,33 +55,26 @@ const styles = StyleSheet.create({
     flexDirection: 'column',
     justifyContent: 'space-between',
     alignItems: 'center',
-  },
-  imageContainer: {
-    flex: 1,
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  image: {
-    marginBottom: 30,
+    padding: 32,
   },
   title: {
     ...fontStyles.large500,
+    paddingTop: 8,
+    paddingBottom: 16,
   },
   content: {
-    flex: 0,
+    flex: 1,
     padding: 16,
     display: 'flex',
     flexDirection: 'column',
-    justifyContent: 'space-between',
-    alignItems: 'stretch',
+    justifyContent: 'center',
+    alignItems: 'center',
   },
   contentText: {
     ...fontStyles.regular,
     textAlign: 'center',
   },
   buttonContainer: {
-    paddingTop: 16,
     flexDirection: 'row',
   },
   button: {
diff --git a/packages/mobile/src/fiatExchanges/__snapshots__/CashInSuccess.test.tsx.snap b/packages/mobile/src/fiatExchanges/__snapshots__/CashInSuccess.test.tsx.snap
index cb9e9ed4e41..2b0853387b5 100644
--- a/packages/mobile/src/fiatExchanges/__snapshots__/CashInSuccess.test.tsx.snap
+++ b/packages/mobile/src/fiatExchanges/__snapshots__/CashInSuccess.test.tsx.snap
@@ -10,6 +10,7 @@ exports[`CashinInSuccess renders correctly with a provider 1`] = `
       "flexDirection": "column",
       "justifyContent": "space-between",
       "overflow": "hidden",
+      "padding": 32,
     }
   }
 >
@@ -17,9 +18,11 @@ exports[`CashinInSuccess renders correctly with a provider 1`] = `
     style={
       Object {
         "alignItems": "center",
+        "display": "flex",
         "flex": 1,
         "flexDirection": "column",
         "justifyContent": "center",
+        "padding": 16,
       }
     }
   >
@@ -30,11 +33,6 @@ exports[`CashinInSuccess renders correctly with a provider 1`] = `
           "testUri": "../../../packages/mobile/src/images/fiat-exchange.png",
         }
       }
-      style={
-        Object {
-          "marginBottom": 30,
-        }
-      }
     />
     <Text
       style={
@@ -43,24 +41,13 @@ exports[`CashinInSuccess renders correctly with a provider 1`] = `
           "fontFamily": "Inter-Medium",
           "fontSize": 18,
           "lineHeight": 24,
+          "paddingBottom": 16,
+          "paddingTop": 8,
         }
       }
     >
       cicoSuccess.title
     </Text>
-  </View>
-  <View
-    style={
-      Object {
-        "alignItems": "stretch",
-        "display": "flex",
-        "flex": 0,
-        "flexDirection": "column",
-        "justifyContent": "space-between",
-        "padding": 16,
-      }
-    }
-  >
     <Text
       style={
         Object {
@@ -74,87 +61,86 @@ exports[`CashinInSuccess renders correctly with a provider 1`] = `
     >
       cicoSuccess.bodyWithProvider
     </Text>
+  </View>
+  <View
+    style={
+      Object {
+        "flexDirection": "row",
+      }
+    }
+  >
     <View
       style={
-        Object {
-          "flexDirection": "row",
-          "paddingTop": 16,
-        }
+        Array [
+          Object {
+            "flexDirection": "row",
+          },
+          Object {
+            "alignSelf": "stretch",
+            "flex": 1,
+            "flexDirection": "column",
+            "minWidth": 200,
+            "width": "100%",
+          },
+        ]
       }
     >
       <View
         style={
           Array [
             Object {
-              "flexDirection": "row",
+              "overflow": "hidden",
             },
             Object {
-              "alignSelf": "stretch",
-              "flex": 1,
-              "flexDirection": "column",
-              "minWidth": 200,
-              "width": "100%",
+              "borderRadius": 100,
             },
           ]
         }
       >
         <View
+          accessible={true}
+          focusable={true}
+          nativeBackgroundAndroid={
+            Object {
+              "attribute": "selectableItemBackground",
+              "rippleRadius": undefined,
+              "type": "ThemeAttrAndroid",
+            }
+          }
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
           style={
-            Array [
-              Object {
-                "overflow": "hidden",
-              },
-              Object {
-                "borderRadius": 100,
-              },
-            ]
+            Object {
+              "alignItems": "center",
+              "backgroundColor": "#1AB775",
+              "height": 48,
+              "justifyContent": "center",
+              "minWidth": 120,
+              "opacity": undefined,
+              "paddingHorizontal": 24,
+              "paddingVertical": 5,
+            }
           }
+          testID="SuccessContinue"
         >
-          <View
-            accessible={true}
-            focusable={true}
-            nativeBackgroundAndroid={
-              Object {
-                "attribute": "selectableItemBackground",
-                "rippleRadius": undefined,
-                "type": "ThemeAttrAndroid",
-              }
-            }
-            onClick={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+          <Text
+            accessibilityLabel="global:continue"
             style={
               Object {
-                "alignItems": "center",
-                "backgroundColor": "#1AB775",
-                "height": 48,
-                "justifyContent": "center",
-                "minWidth": 120,
-                "opacity": undefined,
-                "paddingHorizontal": 24,
-                "paddingVertical": 5,
+                "color": "#FFFFFF",
+                "fontFamily": "Inter-SemiBold",
+                "fontSize": 16,
+                "lineHeight": 22,
               }
             }
-            testID="SuccessContinue"
           >
-            <Text
-              accessibilityLabel="global:continue"
-              style={
-                Object {
-                  "color": "#FFFFFF",
-                  "fontFamily": "Inter-SemiBold",
-                  "fontSize": 16,
-                  "lineHeight": 22,
-                }
-              }
-            >
-              global:continue
-            </Text>
-          </View>
+            global:continue
+          </Text>
         </View>
       </View>
     </View>
@@ -172,6 +158,7 @@ exports[`CashinInSuccess renders correctly without a provider 1`] = `
       "flexDirection": "column",
       "justifyContent": "space-between",
       "overflow": "hidden",
+      "padding": 32,
     }
   }
 >
@@ -179,9 +166,11 @@ exports[`CashinInSuccess renders correctly without a provider 1`] = `
     style={
       Object {
         "alignItems": "center",
+        "display": "flex",
         "flex": 1,
         "flexDirection": "column",
         "justifyContent": "center",
+        "padding": 16,
       }
     }
   >
@@ -192,11 +181,6 @@ exports[`CashinInSuccess renders correctly without a provider 1`] = `
           "testUri": "../../../packages/mobile/src/images/fiat-exchange.png",
         }
       }
-      style={
-        Object {
-          "marginBottom": 30,
-        }
-      }
     />
     <Text
       style={
@@ -205,24 +189,13 @@ exports[`CashinInSuccess renders correctly without a provider 1`] = `
           "fontFamily": "Inter-Medium",
           "fontSize": 18,
           "lineHeight": 24,
+          "paddingBottom": 16,
+          "paddingTop": 8,
         }
       }
     >
       cicoSuccess.title
     </Text>
-  </View>
-  <View
-    style={
-      Object {
-        "alignItems": "stretch",
-        "display": "flex",
-        "flex": 0,
-        "flexDirection": "column",
-        "justifyContent": "space-between",
-        "padding": 16,
-      }
-    }
-  >
     <Text
       style={
         Object {
@@ -236,87 +209,86 @@ exports[`CashinInSuccess renders correctly without a provider 1`] = `
     >
       cicoSuccess.bodyWithoutProvider
     </Text>
+  </View>
+  <View
+    style={
+      Object {
+        "flexDirection": "row",
+      }
+    }
+  >
     <View
       style={
-        Object {
-          "flexDirection": "row",
-          "paddingTop": 16,
-        }
+        Array [
+          Object {
+            "flexDirection": "row",
+          },
+          Object {
+            "alignSelf": "stretch",
+            "flex": 1,
+            "flexDirection": "column",
+            "minWidth": 200,
+            "width": "100%",
+          },
+        ]
       }
     >
       <View
         style={
           Array [
             Object {
-              "flexDirection": "row",
+              "overflow": "hidden",
             },
             Object {
-              "alignSelf": "stretch",
-              "flex": 1,
-              "flexDirection": "column",
-              "minWidth": 200,
-              "width": "100%",
+              "borderRadius": 100,
             },
           ]
         }
       >
         <View
+          accessible={true}
+          focusable={true}
+          nativeBackgroundAndroid={
+            Object {
+              "attribute": "selectableItemBackground",
+              "rippleRadius": undefined,
+              "type": "ThemeAttrAndroid",
+            }
+          }
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
           style={
-            Array [
-              Object {
-                "overflow": "hidden",
-              },
-              Object {
-                "borderRadius": 100,
-              },
-            ]
+            Object {
+              "alignItems": "center",
+              "backgroundColor": "#1AB775",
+              "height": 48,
+              "justifyContent": "center",
+              "minWidth": 120,
+              "opacity": undefined,
+              "paddingHorizontal": 24,
+              "paddingVertical": 5,
+            }
           }
+          testID="SuccessContinue"
         >
-          <View
-            accessible={true}
-            focusable={true}
-            nativeBackgroundAndroid={
-              Object {
-                "attribute": "selectableItemBackground",
-                "rippleRadius": undefined,
-                "type": "ThemeAttrAndroid",
-              }
-            }
-            onClick={[Function]}
-            onResponderGrant={[Function]}
-            onResponderMove={[Function]}
-            onResponderRelease={[Function]}
-            onResponderTerminate={[Function]}
-            onResponderTerminationRequest={[Function]}
-            onStartShouldSetResponder={[Function]}
+          <Text
+            accessibilityLabel="global:continue"
             style={
               Object {
-                "alignItems": "center",
-                "backgroundColor": "#1AB775",
-                "height": 48,
-                "justifyContent": "center",
-                "minWidth": 120,
-                "opacity": undefined,
-                "paddingHorizontal": 24,
-                "paddingVertical": 5,
+                "color": "#FFFFFF",
+                "fontFamily": "Inter-SemiBold",
+                "fontSize": 16,
+                "lineHeight": 22,
               }
             }
-            testID="SuccessContinue"
           >
-            <Text
-              accessibilityLabel="global:continue"
-              style={
-                Object {
-                  "color": "#FFFFFF",
-                  "fontFamily": "Inter-SemiBold",
-                  "fontSize": 16,
-                  "lineHeight": 22,
-                }
-              }
-            >
-              global:continue
-            </Text>
-          </View>
+            global:continue
+          </Text>
         </View>
       </View>
     </View>