From 7b32983276d34317b77c1c893985d9a4c269a968 Mon Sep 17 00:00:00 2001
From: Mathieu Acthernoene <zoontek@gmail.com>
Date: Tue, 3 Dec 2024 17:43:30 +0100
Subject: [PATCH] Remove chevrons (#1045)

---
 .../src/components/AccountStatementCustom.tsx | 12 ++--
 .../components/AccountStatementMonthly.tsx    | 12 ++--
 .../src/components/BeneficiaryList.tsx        | 17 +-----
 clients/banking/src/components/CardList.tsx   |  2 +-
 .../banking/src/components/CardListCells.tsx  | 56 ++++++++-----------
 .../banking/src/components/MembershipList.tsx |  2 +-
 .../src/components/MembershipListCells.tsx    | 55 +++++++-----------
 .../banking/src/components/MerchantList.tsx   | 31 ----------
 .../MerchantProfilePaymentLinksList.tsx       | 31 ----------
 .../src/components/RecurringTransferList.tsx  | 20 +------
 .../src/components/SandboxUserPicker.tsx      | 22 ++++----
 .../src/components/TransactionList.tsx        | 35 +-----------
 .../src/pages/AccountDetailsBillingPage.tsx   | 10 ++--
 13 files changed, 80 insertions(+), 225 deletions(-)

diff --git a/clients/banking/src/components/AccountStatementCustom.tsx b/clients/banking/src/components/AccountStatementCustom.tsx
index 262513908..3bf4cf5f5 100644
--- a/clients/banking/src/components/AccountStatementCustom.tsx
+++ b/clients/banking/src/components/AccountStatementCustom.tsx
@@ -148,10 +148,10 @@ const columns: ColumnConfig<Statement, ExtraInfo>[] = [
     },
   },
   {
-    title: t("accountStatements.action"),
-    width: 90,
-    id: "action",
-    renderTitle: ({ title }) => <HeaderCell text={title} align="center" />,
+    width: 40,
+    id: "actions",
+    title: "",
+    renderTitle: () => null,
     renderCell: ({ item: { status } }) => {
       return status === "Available" ? (
         <Cell align="center">
@@ -177,9 +177,9 @@ const smallColumns: ColumnConfig<Statement, ExtraInfo>[] = [
     },
   },
   {
-    title: t("accountStatements.action"),
-    width: 50,
+    width: 40,
     id: "actions",
+    title: "",
     renderTitle: () => null,
     renderCell: ({ item: { status } }) => {
       return (
diff --git a/clients/banking/src/components/AccountStatementMonthly.tsx b/clients/banking/src/components/AccountStatementMonthly.tsx
index 1d6b02641..d41f0e0f3 100644
--- a/clients/banking/src/components/AccountStatementMonthly.tsx
+++ b/clients/banking/src/components/AccountStatementMonthly.tsx
@@ -85,10 +85,10 @@ const columns: ColumnConfig<Statement, ExtraInfo>[] = [
     },
   },
   {
-    title: t("accountStatements.action"),
-    width: 90,
-    id: "action",
-    renderTitle: ({ title }) => <HeaderCell align="center" text={title} />,
+    width: 40,
+    id: "actions",
+    title: "",
+    renderTitle: () => null,
     renderCell: ({ item: { status } }) => {
       return status === "Available" ? (
         <Cell align="center">
@@ -110,9 +110,9 @@ const smallColumns: ColumnConfig<Statement, ExtraInfo>[] = [
     ),
   },
   {
-    title: t("accountStatements.action"),
-    width: 50,
+    width: 40,
     id: "actions",
+    title: "",
     renderTitle: () => null,
     renderCell: ({ item: { status } }) => {
       return (
diff --git a/clients/banking/src/components/BeneficiaryList.tsx b/clients/banking/src/components/BeneficiaryList.tsx
index 9ec1a7eb1..d359f917a 100644
--- a/clients/banking/src/components/BeneficiaryList.tsx
+++ b/clients/banking/src/components/BeneficiaryList.tsx
@@ -7,7 +7,7 @@ import { EmptyView } from "@swan-io/lake/src/components/EmptyView";
 import { Fill } from "@swan-io/lake/src/components/Fill";
 import { FilterChooser } from "@swan-io/lake/src/components/FilterChooser";
 import { FocusTrapRef } from "@swan-io/lake/src/components/FocusTrap";
-import { Icon, IconName } from "@swan-io/lake/src/components/Icon";
+import { IconName } from "@swan-io/lake/src/components/Icon";
 import { LakeButton } from "@swan-io/lake/src/components/LakeButton";
 import { LakeSearchField } from "@swan-io/lake/src/components/LakeSearchField";
 import { LakeText } from "@swan-io/lake/src/components/LakeText";
@@ -272,21 +272,6 @@ const columns: ColumnConfig<Beneficiary, undefined>[] = [
       </Cell>
     ),
   },
-  {
-    id: "actions",
-    width: 48,
-    title: "",
-    renderTitle: () => null,
-    renderCell: ({ isHovered }) => (
-      <Cell align="right">
-        <Icon
-          name="chevron-right-filled"
-          color={isHovered ? colors.gray[900] : colors.gray[500]}
-          size={16}
-        />
-      </Cell>
-    ),
-  },
 ];
 
 const beneficiaryTypes = deriveUnion<Exclude<BeneficiaryType, "Internal">>({
diff --git a/clients/banking/src/components/CardList.tsx b/clients/banking/src/components/CardList.tsx
index 73f786b2d..e146bc221 100644
--- a/clients/banking/src/components/CardList.tsx
+++ b/clients/banking/src/components/CardList.tsx
@@ -63,8 +63,8 @@ const columns: ColumnConfig<CardListItemFragment, ExtraInfo>[] = [
     renderCell: ({ item }) => <CardStatusCell card={item} />,
   },
   {
+    width: 40,
     id: "actions",
-    width: 64,
     title: "",
     renderTitle: () => null,
     renderCell: ({ item, extraInfo: { onPressCancel }, isHovered }) => (
diff --git a/clients/banking/src/components/CardListCells.tsx b/clients/banking/src/components/CardListCells.tsx
index a15f93c65..9a3697f9c 100644
--- a/clients/banking/src/components/CardListCells.tsx
+++ b/clients/banking/src/components/CardListCells.tsx
@@ -219,6 +219,7 @@ export const CardStatusCell = ({ card }: { card: Card }) => {
 
 export const CardSummaryCell = ({ card }: { card: Card }) => {
   const spendingLimits = card.spendingLimits ?? [];
+
   return (
     <Cell>
       <View>
@@ -341,9 +342,6 @@ export const CardSummaryCell = ({ card }: { card: Card }) => {
           ))
           .exhaustive()}
       </Box>
-
-      <Space width={12} />
-      <Icon name="chevron-right-filled" size={16} color={colors.gray[500]} />
     </Cell>
   );
 };
@@ -363,40 +361,30 @@ export const CardActionsCell = ({
         .with(
           { __typename: P.not(P.union("CardCanceledStatusInfo", "CardCancelingStatusInfo")) },
           () => (
-            <>
-              <Pressable
-                onPress={event => {
-                  event.stopPropagation();
-                  event.preventDefault();
-                  onPressCancel({ cardId: card.id });
-                }}
-              >
-                {({ hovered }) => (
-                  <Icon
-                    name="subtract-circle-regular"
-                    color={
-                      hovered
-                        ? colors.negative[500]
-                        : isRowHovered
-                          ? colors.gray[700]
-                          : colors.gray[500]
-                    }
-                    size={16}
-                  />
-                )}
-              </Pressable>
-
-              <Space width={8} />
-            </>
+            <Pressable
+              onPress={event => {
+                event.stopPropagation();
+                event.preventDefault();
+                onPressCancel({ cardId: card.id });
+              }}
+            >
+              {({ hovered }) => (
+                <Icon
+                  name="subtract-circle-regular"
+                  color={
+                    hovered
+                      ? colors.negative[500]
+                      : isRowHovered
+                        ? colors.gray[700]
+                        : colors.gray[500]
+                  }
+                  size={16}
+                />
+              )}
+            </Pressable>
           ),
         )
         .otherwise(() => null)}
-
-      <Icon
-        name="chevron-right-filled"
-        color={isRowHovered ? colors.gray[900] : colors.gray[500]}
-        size={16}
-      />
     </Cell>
   );
 };
diff --git a/clients/banking/src/components/MembershipList.tsx b/clients/banking/src/components/MembershipList.tsx
index b3c349709..17aeece28 100644
--- a/clients/banking/src/components/MembershipList.tsx
+++ b/clients/banking/src/components/MembershipList.tsx
@@ -51,8 +51,8 @@ const columns: ColumnConfig<AccountMembershipFragment, ExtraInfo>[] = [
     renderCell: ({ item }) => <PhoneNumberCell accountMembership={item} />,
   },
   {
+    width: 40,
     id: "actions",
-    width: 64,
     title: "",
     renderTitle: () => null,
     renderCell: ({
diff --git a/clients/banking/src/components/MembershipListCells.tsx b/clients/banking/src/components/MembershipListCells.tsx
index 34dcc878a..ecc0e5ea0 100644
--- a/clients/banking/src/components/MembershipListCells.tsx
+++ b/clients/banking/src/components/MembershipListCells.tsx
@@ -329,9 +329,6 @@ export const MembershipSummaryCell = ({
       <Fill minWidth={16} />
 
       {getStatusIcon({ accountMembership })}
-
-      <Space width={8} />
-      <Icon name="chevron-right-filled" color={colors.gray[200]} size={16} />
     </Cell>
   );
 };
@@ -414,42 +411,32 @@ export const MembershipActionsCell = ({
             isCurrentUserMembership: false,
           },
           ({ accountMembership: { id: accountMembershipId } }) => (
-            <>
-              <Pressable
-                onPress={event => {
-                  event.stopPropagation();
-                  event.preventDefault();
-                  onPressCancel({ accountMembershipId });
-                }}
-              >
-                {({ hovered }) => (
-                  <Icon
-                    name="subtract-circle-regular"
-                    color={
-                      hovered
-                        ? colors.negative[500]
-                        : isRowHovered
-                          ? colors.gray[700]
-                          : colors.gray[500]
-                    }
-                    size={16}
-                  />
-                )}
-              </Pressable>
-
-              <Space width={8} />
-            </>
+            <Pressable
+              onPress={event => {
+                event.stopPropagation();
+                event.preventDefault();
+                onPressCancel({ accountMembershipId });
+              }}
+            >
+              {({ hovered }) => (
+                <Icon
+                  name="subtract-circle-regular"
+                  color={
+                    hovered
+                      ? colors.negative[500]
+                      : isRowHovered
+                        ? colors.gray[700]
+                        : colors.gray[500]
+                  }
+                  size={16}
+                />
+              )}
+            </Pressable>
           ),
         )
         .otherwise(() => (
           <Space width={24} />
         ))}
-
-      <Icon
-        name="chevron-right-filled"
-        color={isRowHovered ? colors.gray[900] : colors.gray[500]}
-        size={16}
-      />
     </Cell>
   );
 };
diff --git a/clients/banking/src/components/MerchantList.tsx b/clients/banking/src/components/MerchantList.tsx
index 0406571c9..dcd7e6bec 100644
--- a/clients/banking/src/components/MerchantList.tsx
+++ b/clients/banking/src/components/MerchantList.tsx
@@ -5,7 +5,6 @@ import { Box } from "@swan-io/lake/src/components/Box";
 import { Cell, HeaderCell, TextCell } from "@swan-io/lake/src/components/Cells";
 import { EmptyView } from "@swan-io/lake/src/components/EmptyView";
 import { Fill } from "@swan-io/lake/src/components/Fill";
-import { Icon } from "@swan-io/lake/src/components/Icon";
 import { LakeButton } from "@swan-io/lake/src/components/LakeButton";
 import { LoadingView } from "@swan-io/lake/src/components/LoadingView";
 import { ColumnConfig, PlainListView } from "@swan-io/lake/src/components/PlainListView";
@@ -99,21 +98,6 @@ const columns: ColumnConfig<MerchantProfileFragment, ExtraInfo>[] = [
       </Cell>
     ),
   },
-  {
-    id: "actions",
-    width: 42,
-    title: "",
-    renderTitle: () => null,
-    renderCell: ({ isHovered }) => (
-      <Cell align="right">
-        <Icon
-          name="chevron-right-filled"
-          color={isHovered ? colors.gray[900] : colors.gray[500]}
-          size={16}
-        />
-      </Cell>
-    ),
-  },
 ];
 
 const smallColumns: ColumnConfig<MerchantProfileFragment, ExtraInfo>[] = [
@@ -147,21 +131,6 @@ const smallColumns: ColumnConfig<MerchantProfileFragment, ExtraInfo>[] = [
       </Cell>
     ),
   },
-  {
-    id: "actions",
-    width: 42,
-    title: "",
-    renderTitle: () => null,
-    renderCell: ({ isHovered }) => (
-      <Cell align="right">
-        <Icon
-          name="chevron-right-filled"
-          color={isHovered ? colors.gray[900] : colors.gray[500]}
-          size={16}
-        />
-      </Cell>
-    ),
-  },
 ];
 
 export const MerchantList = ({ accountId, accountMembershipId, params, large }: Props) => {
diff --git a/clients/banking/src/components/MerchantProfilePaymentLinksList.tsx b/clients/banking/src/components/MerchantProfilePaymentLinksList.tsx
index d4e67b33a..cebabc746 100644
--- a/clients/banking/src/components/MerchantProfilePaymentLinksList.tsx
+++ b/clients/banking/src/components/MerchantProfilePaymentLinksList.tsx
@@ -1,6 +1,5 @@
 import { Cell, CopyableTextCell, HeaderCell, TextCell } from "@swan-io/lake/src/components/Cells";
 import { EmptyView } from "@swan-io/lake/src/components/EmptyView";
-import { Icon } from "@swan-io/lake/src/components/Icon";
 import { LakeText } from "@swan-io/lake/src/components/LakeText";
 import { ColumnConfig, PlainListView } from "@swan-io/lake/src/components/PlainListView";
 import { Tag } from "@swan-io/lake/src/components/Tag";
@@ -102,21 +101,6 @@ const columns: ColumnConfig<PaymentLinkFragment, ExtraInfo>[] = [
       />
     ),
   },
-  {
-    width: 48,
-    id: "actions",
-    title: "",
-    renderTitle: () => null,
-    renderCell: ({ isHovered }) => (
-      <Cell align="right">
-        <Icon
-          name="chevron-right-filled"
-          color={isHovered ? colors.gray[900] : colors.gray[500]}
-          size={16}
-        />
-      </Cell>
-    ),
-  },
 ];
 
 const smallColumns: ColumnConfig<PaymentLinkFragment, ExtraInfo>[] = [
@@ -148,21 +132,6 @@ const smallColumns: ColumnConfig<PaymentLinkFragment, ExtraInfo>[] = [
       </Cell>
     ),
   },
-  {
-    width: 48,
-    id: "actions",
-    title: "",
-    renderTitle: () => null,
-    renderCell: ({ isHovered }) => (
-      <Cell align="right">
-        <Icon
-          name="chevron-right-filled"
-          color={isHovered ? colors.gray[700] : colors.gray[200]}
-          size={16}
-        />
-      </Cell>
-    ),
-  },
 ];
 
 type Props = {
diff --git a/clients/banking/src/components/RecurringTransferList.tsx b/clients/banking/src/components/RecurringTransferList.tsx
index 23f2ac7dd..01f43353b 100644
--- a/clients/banking/src/components/RecurringTransferList.tsx
+++ b/clients/banking/src/components/RecurringTransferList.tsx
@@ -483,10 +483,10 @@ const columns: ColumnConfig<Node, ExtraInfo>[] = [
     ),
   },
   {
+    width: 40,
     id: "actions",
-    title: t("recurringTransfer.table.actions"),
-    width: 100,
-    renderTitle: ({ title }) => <HeaderCell align="right" text={title} />,
+    title: "",
+    renderTitle: () => null,
     renderCell: ({ item, extraInfo: { onCancel, canCancelStandingOrder } }) => (
       <Cell align="right">
         {item.statusInfo.status === "Enabled" && canCancelStandingOrder && (
@@ -500,9 +500,6 @@ const columns: ColumnConfig<Node, ExtraInfo>[] = [
             )}
           </Pressable>
         )}
-
-        <Space width={8} />
-        <Icon name="chevron-right-filled" size={16} color={colors.gray[500]} />
       </Cell>
     ),
   },
@@ -553,17 +550,6 @@ const smallColumns: ColumnConfig<Node, ExtraInfo>[] = [
         ))
         .otherwise(() => null),
   },
-  {
-    id: "actions",
-    title: t("recurringTransfer.table.actions"),
-    width: 36,
-    renderTitle: ({ title }) => <HeaderCell align="right" text={title} />,
-    renderCell: () => (
-      <Cell align="right">
-        <Icon name="chevron-right-filled" size={16} color={colors.gray[500]} />
-      </Cell>
-    ),
-  },
 ];
 
 const keyExtractor = (item: Node) => item.id;
diff --git a/clients/banking/src/components/SandboxUserPicker.tsx b/clients/banking/src/components/SandboxUserPicker.tsx
index dda081e6a..07662708f 100644
--- a/clients/banking/src/components/SandboxUserPicker.tsx
+++ b/clients/banking/src/components/SandboxUserPicker.tsx
@@ -251,13 +251,12 @@ export const SandboxUserPicker = () => {
                     <View style={styles.separator} />
                     <Space width={4} />
 
-                    <View style={styles.icon}>
-                      <Icon
-                        color={colors.sandbox.primary}
-                        name={isOpen ? "chevron-up-filled" : "chevron-down-filled"}
-                        size={16}
-                      />
-                    </View>
+                    <Icon
+                      color={colors.sandbox.primary}
+                      style={styles.icon}
+                      name={isOpen ? "chevron-up-filled" : "chevron-down-filled"}
+                      size={16}
+                    />
                   </Box>
                 </Tag>
               </Pressable>
@@ -318,9 +317,12 @@ export const SandboxUserTag = ({ onPress }: { onPress: () => void }) => {
                     <View style={styles.separator} />
                     <Space width={4} />
 
-                    <View style={styles.icon}>
-                      <Icon color={colors.sandbox.primary} name="chevron-right-filled" size={16} />
-                    </View>
+                    <Icon
+                      color={colors.sandbox.primary}
+                      style={styles.icon}
+                      name="chevron-right-filled"
+                      size={16}
+                    />
                   </Box>
                 </Tag>
               </Pressable>
diff --git a/clients/banking/src/components/TransactionList.tsx b/clients/banking/src/components/TransactionList.tsx
index c19f1b55d..a77a92cd4 100644
--- a/clients/banking/src/components/TransactionList.tsx
+++ b/clients/banking/src/components/TransactionList.tsx
@@ -1,11 +1,10 @@
-import { Cell, HeaderCell } from "@swan-io/lake/src/components/Cells";
-import { Icon } from "@swan-io/lake/src/components/Icon";
+import { HeaderCell } from "@swan-io/lake/src/components/Cells";
 import { ColumnConfig, PlainListView } from "@swan-io/lake/src/components/PlainListView";
 import { ResponsiveContainer } from "@swan-io/lake/src/components/ResponsiveContainer";
 import { tabsViewHeight } from "@swan-io/lake/src/components/TabView";
 import { LinkConfig } from "@swan-io/lake/src/components/VirtualizedList";
 import { commonStyles } from "@swan-io/lake/src/constants/commonStyles";
-import { breakpoints, colors } from "@swan-io/lake/src/constants/design";
+import { breakpoints } from "@swan-io/lake/src/constants/design";
 import { capitalize } from "@swan-io/lake/src/utils/string";
 import dayjs from "dayjs";
 import { ReactElement, ReactNode } from "react";
@@ -66,21 +65,6 @@ const columns: ColumnConfig<TransactionDetailsFragment, ExtraInfo>[] = [
     renderTitle: ({ title }) => <HeaderCell text={title} align="right" />,
     renderCell: ({ item }) => <TransactionAmountCell transaction={item} />,
   },
-  {
-    width: 48,
-    id: "actions",
-    title: "",
-    renderTitle: () => null,
-    renderCell: ({ isHovered }) => (
-      <Cell align="right">
-        <Icon
-          name="chevron-right-filled"
-          color={isHovered ? colors.gray[900] : colors.gray[500]}
-          size={16}
-        />
-      </Cell>
-    ),
-  },
 ];
 
 const smallColumns: ColumnConfig<TransactionDetailsFragment, ExtraInfo>[] = [
@@ -91,21 +75,6 @@ const smallColumns: ColumnConfig<TransactionDetailsFragment, ExtraInfo>[] = [
     renderTitle: ({ title }) => <HeaderCell text={title} />,
     renderCell: ({ item }) => <TransactionSummaryCell transaction={item} />,
   },
-  {
-    width: 48,
-    id: "actions",
-    title: "",
-    renderTitle: () => null,
-    renderCell: ({ isHovered }) => (
-      <Cell align="right">
-        <Icon
-          name="chevron-right-filled"
-          color={isHovered ? colors.gray[700] : colors.gray[200]}
-          size={16}
-        />
-      </Cell>
-    ),
-  },
 ];
 
 export const TransactionList = ({
diff --git a/clients/banking/src/pages/AccountDetailsBillingPage.tsx b/clients/banking/src/pages/AccountDetailsBillingPage.tsx
index 360fb69e6..26ad5aeb6 100644
--- a/clients/banking/src/pages/AccountDetailsBillingPage.tsx
+++ b/clients/banking/src/pages/AccountDetailsBillingPage.tsx
@@ -108,8 +108,8 @@ const columns: ColumnConfig<Invoices, ExtraInfo>[] = [
   {
     width: 120,
     id: "download",
-    title: t("accountDetails.billing.actions"),
-    renderTitle: ({ title }) => <HeaderCell text={title} align="right" />,
+    title: "",
+    renderTitle: () => null,
     renderCell: ({ item: { url, status } }) => {
       return (
         <Cell align="right">
@@ -187,9 +187,9 @@ const smallColumns: ColumnConfig<Invoices, ExtraInfo>[] = [
     ),
   },
   {
-    width: 48,
-    id: "download",
-    title: t("accountDetails.billing.actions"),
+    width: 40,
+    id: "actions",
+    title: "",
     renderTitle: () => null,
     renderCell: ({ item: { url, status } }) => {
       return (