Munkherdene
059b7e13d5
Elevate the Profile (Миний) tab and login/register/forgot screens to match TransactionList's IconChip + Card row pattern: - Profile: avatar medallion (initial + brand tint) + name/email header, IconChip menu rows (Тохиргоо/Ангилал/Захиалга) with chevrons, IconChip + EmptyState connected-banks list. - Categories/Subscriptions: IconChip rows via categoryStyle, EmptyState for empty lists, chevron-left back buttons. - Auth: shared AuthHeader with a tinted monogram + wordmark lockup, more comfortable field/CTA spacing in AuthForm. Visual only — no changes to hooks, mutations, or auth actions.
90 lines
3.3 KiB
TypeScript
90 lines
3.3 KiB
TypeScript
"use client";
|
|
|
|
import { useConnections } from "@/api/hooks/reads";
|
|
import { Skeleton } from "@seed-design/react";
|
|
import { EmptyState, IconChip, SectionHeader } from "@/ds";
|
|
import { profileStrings } from "./strings";
|
|
|
|
/**
|
|
* Read-only connected-banks list (Task 13 scope: NO connect/disconnect here —
|
|
* that stays a mobile-only action per the brief). Mirrors the bank rows in
|
|
* `ProfileView.swift`'s `banksCard`, minus the connect/disconnect chips.
|
|
*/
|
|
export function ConnectedBanks() {
|
|
const { data: connections, isLoading } = useConnections();
|
|
const empty = !isLoading && (!connections || connections.length === 0);
|
|
|
|
return (
|
|
<section aria-labelledby="connected-banks-heading">
|
|
<div id="connected-banks-heading">
|
|
<SectionHeader title={profileStrings.banks.title} />
|
|
</div>
|
|
|
|
{isLoading && (
|
|
<div style={{ display: "flex", flexDirection: "column", gap: 8, marginTop: 12 }}>
|
|
<Skeleton height="44px" />
|
|
<Skeleton height="44px" />
|
|
</div>
|
|
)}
|
|
|
|
{empty && (
|
|
<EmptyState icon="bank" title={profileStrings.banks.empty} hint={profileStrings.banks.manageNote} compact />
|
|
)}
|
|
|
|
{!isLoading && connections && connections.length > 0 && (
|
|
<>
|
|
<ul style={{ listStyle: "none", margin: "8px 0 0", padding: 0, display: "flex", flexDirection: "column" }}>
|
|
{connections.map((c) => (
|
|
<li
|
|
key={c.bank}
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
gap: 12,
|
|
padding: "10px 0",
|
|
}}
|
|
>
|
|
<div style={{ display: "flex", alignItems: "center", gap: 12, minWidth: 0 }}>
|
|
<IconChip icon="bank" tint="var(--seed-color-bg-neutral-subtle, #eef0f2)" fg="var(--seed-color-fg-neutral)" />
|
|
<div style={{ display: "flex", flexDirection: "column", gap: 2, minWidth: 0 }}>
|
|
<span
|
|
style={{
|
|
fontSize: 15,
|
|
fontWeight: 700,
|
|
overflow: "hidden",
|
|
textOverflow: "ellipsis",
|
|
whiteSpace: "nowrap",
|
|
}}
|
|
>
|
|
{c.bank}
|
|
</span>
|
|
<span style={{ fontSize: 12, color: "var(--seed-color-fg-muted, #6b7280)" }}>{c.username}</span>
|
|
</div>
|
|
</div>
|
|
{c.courierManaged && (
|
|
<span
|
|
style={{
|
|
fontSize: 11,
|
|
padding: "4px 8px",
|
|
borderRadius: 999,
|
|
flexShrink: 0,
|
|
background: "var(--seed-color-bg-layer-default)",
|
|
color: "var(--seed-color-fg-muted, #6b7280)",
|
|
}}
|
|
>
|
|
{profileStrings.banks.courierManaged}
|
|
</span>
|
|
)}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
<p style={{ fontSize: 12, color: "var(--seed-color-fg-muted, #6b7280)", marginTop: 8 }}>
|
|
{profileStrings.banks.manageNote}
|
|
</p>
|
|
</>
|
|
)}
|
|
</section>
|
|
);
|
|
}
|