From 5fdf846053d6df2a68a0a4fdcb1a85d583405e2f Mon Sep 17 00:00:00 2001
From: Mathieu Acthernoene <zoontek@gmail.com>
Date: Wed, 21 Aug 2024 12:07:20 +0200
Subject: [PATCH 1/3] Improve Merchant payment method tile style

---
 .../components/MerchantProfileSettings.tsx    | 94 ++++++++++---------
 1 file changed, 51 insertions(+), 43 deletions(-)

diff --git a/clients/banking/src/components/MerchantProfileSettings.tsx b/clients/banking/src/components/MerchantProfileSettings.tsx
index 234f01630..72c64bb5a 100644
--- a/clients/banking/src/components/MerchantProfileSettings.tsx
+++ b/clients/banking/src/components/MerchantProfileSettings.tsx
@@ -2,6 +2,7 @@ import { Array, Future, Option, Result } from "@swan-io/boxed";
 import { useMutation } from "@swan-io/graphql-client";
 import { AutoWidthImage } from "@swan-io/lake/src/components/AutoWidthImage";
 import { Box } from "@swan-io/lake/src/components/Box";
+import { Fill } from "@swan-io/lake/src/components/Fill";
 import { Grid } from "@swan-io/lake/src/components/Grid";
 import { Icon } from "@swan-io/lake/src/components/Icon";
 import { LakeAlert } from "@swan-io/lake/src/components/LakeAlert";
@@ -134,50 +135,51 @@ const MerchantProfileSettingsPaymentMethodTile = ({
   return (
     <>
       <Tile selected={status === "PendingReview" || status === "Enabled"} flexGrow={1}>
-        <Box direction="row" alignItems="start">
-          <Box grow={1} shrink={1}>
-            <Box direction="row" alignItems="center" wrap="wrap">
-              {icon}
-
-              <Space width={8} />
-
-              {match(status)
-                .with("Disabled", () => (
-                  <Tag color="gray">
-                    {t("merchantProfile.settings.paymentMethods.status.Disabled")}
-                  </Tag>
-                ))
-                .with("Enabled", () => (
-                  <Tag color="positive">
-                    {t("merchantProfile.settings.paymentMethods.status.Enabled")}
-                  </Tag>
-                ))
-                .with("PendingReview", () => (
-                  <Tag color="shakespear">
-                    {t("merchantProfile.settings.paymentMethods.status.PendingReview")}
-                  </Tag>
-                ))
-                .with("Rejected", () => (
-                  <Tag color="negative">
-                    {t("merchantProfile.settings.paymentMethods.status.Rejected")}
-                  </Tag>
-                ))
-                .with("Suspended", () => (
-                  <Tag color="warning">
-                    {t("merchantProfile.settings.paymentMethods.status.Suspended")}
-                  </Tag>
-                ))
-                .with(P.nullish, () => null)
-                .exhaustive()}
-            </Box>
-
-            <Space height={8} />
-
-            <LakeText variant="medium" color={colors.gray[900]}>
-              {title}
-            </LakeText>
+        <Box
+          direction="row"
+          alignItems="center"
+          style={{
+            marginRight: negativeSpacings[16],
+            marginTop: negativeSpacings[16],
+          }}
+        >
+          <Box direction="row" alignItems="center">
+            {icon}
+
+            <Space width={8} />
+
+            {match(status)
+              .with("Disabled", () => (
+                <Tag color="gray">
+                  {t("merchantProfile.settings.paymentMethods.status.Disabled")}
+                </Tag>
+              ))
+              .with("Enabled", () => (
+                <Tag color="positive">
+                  {t("merchantProfile.settings.paymentMethods.status.Enabled")}
+                </Tag>
+              ))
+              .with("PendingReview", () => (
+                <Tag color="shakespear">
+                  {t("merchantProfile.settings.paymentMethods.status.PendingReview")}
+                </Tag>
+              ))
+              .with("Rejected", () => (
+                <Tag color="negative">
+                  {t("merchantProfile.settings.paymentMethods.status.Rejected")}
+                </Tag>
+              ))
+              .with("Suspended", () => (
+                <Tag color="warning">
+                  {t("merchantProfile.settings.paymentMethods.status.Suspended")}
+                </Tag>
+              ))
+              .with(P.nullish, () => null)
+              .exhaustive()}
           </Box>
 
+          <Fill minWidth={8} />
+
           {match(status)
             .with(P.nonNullable, () => (
               <LakeButton
@@ -227,7 +229,13 @@ const MerchantProfileSettingsPaymentMethodTile = ({
             .otherwise(() => null)}
         </Box>
 
-        <Space height={12} />
+        <Space height={4} />
+
+        <LakeText variant="medium" color={colors.gray[900]}>
+          {title}
+        </LakeText>
+
+        <Space height={4} />
         <LakeText color={colors.gray[500]}>{description}</LakeText>
       </Tile>
 

From 5d3e10a755b806947e1afd9b437e44e49f6b4370 Mon Sep 17 00:00:00 2001
From: Mathieu Acthernoene <zoontek@gmail.com>
Date: Wed, 21 Aug 2024 12:09:51 +0200
Subject: [PATCH 2/3] Remove inline style

---
 .../components/MerchantProfileSettings.tsx    | 73 +++++++++----------
 1 file changed, 33 insertions(+), 40 deletions(-)

diff --git a/clients/banking/src/components/MerchantProfileSettings.tsx b/clients/banking/src/components/MerchantProfileSettings.tsx
index 72c64bb5a..5e333b601 100644
--- a/clients/banking/src/components/MerchantProfileSettings.tsx
+++ b/clients/banking/src/components/MerchantProfileSettings.tsx
@@ -90,6 +90,10 @@ const styles = StyleSheet.create({
     height: "auto",
     marginVertical: spacings[12],
   },
+  methodTileTopRow: {
+    marginTop: negativeSpacings[16],
+    marginRight: negativeSpacings[16],
+  },
 });
 
 const UNKNOWN_VALUE = <LakeText style={styles.unknownValue}>{t("common.unknown")}</LakeText>;
@@ -135,48 +139,37 @@ const MerchantProfileSettingsPaymentMethodTile = ({
   return (
     <>
       <Tile selected={status === "PendingReview" || status === "Enabled"} flexGrow={1}>
-        <Box
-          direction="row"
-          alignItems="center"
-          style={{
-            marginRight: negativeSpacings[16],
-            marginTop: negativeSpacings[16],
-          }}
-        >
-          <Box direction="row" alignItems="center">
-            {icon}
+        <Box direction="row" alignItems="center" style={styles.methodTileTopRow}>
+          {icon}
 
-            <Space width={8} />
+          <Space width={8} />
 
-            {match(status)
-              .with("Disabled", () => (
-                <Tag color="gray">
-                  {t("merchantProfile.settings.paymentMethods.status.Disabled")}
-                </Tag>
-              ))
-              .with("Enabled", () => (
-                <Tag color="positive">
-                  {t("merchantProfile.settings.paymentMethods.status.Enabled")}
-                </Tag>
-              ))
-              .with("PendingReview", () => (
-                <Tag color="shakespear">
-                  {t("merchantProfile.settings.paymentMethods.status.PendingReview")}
-                </Tag>
-              ))
-              .with("Rejected", () => (
-                <Tag color="negative">
-                  {t("merchantProfile.settings.paymentMethods.status.Rejected")}
-                </Tag>
-              ))
-              .with("Suspended", () => (
-                <Tag color="warning">
-                  {t("merchantProfile.settings.paymentMethods.status.Suspended")}
-                </Tag>
-              ))
-              .with(P.nullish, () => null)
-              .exhaustive()}
-          </Box>
+          {match(status)
+            .with("Disabled", () => (
+              <Tag color="gray">{t("merchantProfile.settings.paymentMethods.status.Disabled")}</Tag>
+            ))
+            .with("Enabled", () => (
+              <Tag color="positive">
+                {t("merchantProfile.settings.paymentMethods.status.Enabled")}
+              </Tag>
+            ))
+            .with("PendingReview", () => (
+              <Tag color="shakespear">
+                {t("merchantProfile.settings.paymentMethods.status.PendingReview")}
+              </Tag>
+            ))
+            .with("Rejected", () => (
+              <Tag color="negative">
+                {t("merchantProfile.settings.paymentMethods.status.Rejected")}
+              </Tag>
+            ))
+            .with("Suspended", () => (
+              <Tag color="warning">
+                {t("merchantProfile.settings.paymentMethods.status.Suspended")}
+              </Tag>
+            ))
+            .with(P.nullish, () => null)
+            .exhaustive()}
 
           <Fill minWidth={8} />
 

From 2b50e750d39764353222ae8bc32ccb31e7e20990 Mon Sep 17 00:00:00 2001
From: Mathieu Acthernoene <zoontek@gmail.com>
Date: Wed, 21 Aug 2024 12:14:35 +0200
Subject: [PATCH 3/3] Add height, in case there's no buttons

---
 clients/banking/src/components/MerchantProfileSettings.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/clients/banking/src/components/MerchantProfileSettings.tsx b/clients/banking/src/components/MerchantProfileSettings.tsx
index 5e333b601..31c641388 100644
--- a/clients/banking/src/components/MerchantProfileSettings.tsx
+++ b/clients/banking/src/components/MerchantProfileSettings.tsx
@@ -91,6 +91,7 @@ const styles = StyleSheet.create({
     marginVertical: spacings[12],
   },
   methodTileTopRow: {
+    height: spacings[48],
     marginTop: negativeSpacings[16],
     marginRight: negativeSpacings[16],
   },