chore: save pending changes

src/pages/cards/ui/CardsPage.module.css

@@ -2,6 +2,9 @@
 	text-decoration: none;
 	color: inherit;
 	min-width: 0;
+	max-width: 28rem;
+	border-radius: 1.25rem;
+	background: transparent;
 	overflow-wrap: anywhere;
 }
 .card:focus-visible {

src/pages/cards/ui/CardsPage.view.tsx

@@ -1,5 +1,4 @@
 import {
-	Badge,
 	Button,
 	Group,
 	Paper,
@@ -14,8 +13,11 @@ import { MonthPickerInput } from "@mantine/dates";
 import type { FC } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router";
-import { BankFeedback, BankSummaryView } from "@/entities/bank-card";
-import { formatMoney } from "@/shared/lib";
+import {
+	BankCardFace,
+	BankFeedback,
+	BankSummaryView,
+} from "@/entities/bank-card";
 import { LoadingSkeleton, StateView } from "@/shared/ui";
 import classes from "./CardsPage.module.css";
 import type { CardsPageVm } from "./CardsPage.vm";
@@ -44,27 +46,10 @@ const CardsPageView: FC<CardsPageViewProps> = (props) => {
 								key={card.id}
 								component={Link}
 								to={card.to}
-								withBorder
-								p="md"
+								p={0}
 								className={classes.card}
 							>
-								<Stack gap="xs">
-									<Group>
-										<Text fw={600} size="lg">
-											{card.name}
-										</Text>
-										{card.archivedAt && (
-											<Badge color="gray">{t("bank.archived")}</Badge>
-										)}
-									</Group>
-									<Text c="dimmed">
-										{card.bankName}
-										{card.lastFour ? ` · •• ${card.lastFour}` : ""}
-									</Text>
-									<Text size="xl" fw={650}>
-										{formatMoney(card.balance)}
-									</Text>
-								</Stack>
+								<BankCardFace card={card} />
 							</Paper>
 						))}
 					</SimpleGrid>
@@ -82,8 +67,8 @@ const CardsPageView: FC<CardsPageViewProps> = (props) => {
 			) : vm.cards.isLoading ? (
 				<LoadingSkeleton label={t("bank.loading")}>
 					<SimpleGrid cols={{ base: 1, sm: 2 }}>
-						<Skeleton h={120} />
-						<Skeleton h={120} />
+						<Skeleton h={250} />
+						<Skeleton h={250} />
 					</SimpleGrid>
 				</LoadingSkeleton>
 			) : null}