Remove chevrons (#1045)

swan-io · Dec 3, 2024 · 7b32983 · 7b32983
1 parent e4b274a
commit 7b32983
Show file tree

Hide file tree

Showing 13 changed files with 80 additions and 225 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 = {