Skip to content

Commit da619dd

Browse files
ponderingdemocritusponderingdemocritus
committed
Enforce UI consistency across portal components
Standardize card titles to use realm-card-title via CardTitle, add realm-stat class to all stat numbers, replace raw card divs with Card component in veLords page, unify page container padding, fix typo in claims, and normalize button sizes and !important syntax.
1 parent 535ca16 commit da619dd

11 files changed

Lines changed: 76 additions & 69 deletions

File tree

‎apps/account-portal/src/components/layout/login-card.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ function FeatureItem({
6767
<div className="realm-subtle-panel flex items-start gap-3 rounded-2xl p-4">
6868
<div className="text-2xl">{icon}</div>
6969
<div>
70-
<h3 className="font-display text-sm font-semibold tracking-[0.12em] uppercase">
70+
<h3 className="font-display text-sm font-semibold tracking-[var(--tracking-card)] uppercase">
7171
{title}
7272
</h3>
7373
<p className="text-muted-foreground text-sm">{description}</p>

‎apps/account-portal/src/components/modules/governance/delegate-card.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -90,13 +90,13 @@ export function DelegateCard({
9090
src={`https://cdn.stamp.fyi/avatar/${delegate.user}?s=64`}
9191
/>
9292
</Avatar>
93-
<h2 className="text-xl font-bold">{name}</h2>
93+
<h2 className="text-xl">{name}</h2>
9494
</div>
9595
{isCurrentDelegate ? <Badge>Current Delegate</Badge> : null}
9696
</CardTitle>
9797
</CardHeader>
9898
<CardContent className="flex flex-col gap-2">
99-
<p className="text-xl">
99+
<p className="realm-stat text-xl">
100100
{formatNumber(Number(delegate.delegatedVotes), 0)}{" "}
101101
<span className="text-muted-foreground text-sm uppercase">
102102
Votes Delegated

‎apps/account-portal/src/components/modules/governance/proposal-list-item.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ export const ProposalListItem = ({
4646
>
4747
<div className="flex flex-col gap-2">
4848
<div className="flex flex-col gap-1">
49-
<h4 className="line-clamp-2 text-lg font-semibold">
49+
<h4 className="realm-card-title line-clamp-2">
5050
{proposal.metadata?.title ?? `Proposal #${proposal.id}`}
5151
</h4>
5252
<div className="text-muted-foreground text-sm">

‎apps/account-portal/src/components/modules/homepage/homepage.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,7 @@ export function Homepage({ address }: { address: `0x${string}` }) {
135135
{/* Realms Card */}
136136
<Card>
137137
<CardHeader className="pb-4">
138-
<CardTitle className="text-lg">Realms</CardTitle>
138+
<CardTitle>Realms</CardTitle>
139139
</CardHeader>
140140
<CardContent className="space-y-4">
141141
<div className="flex items-center justify-between">
@@ -185,7 +185,7 @@ export function Homepage({ address }: { address: `0x${string}` }) {
185185
{/* Lords Card */}
186186
<Card>
187187
<CardHeader className="pb-4">
188-
<CardTitle className="flex items-center gap-2 text-lg">
188+
<CardTitle className="flex items-center gap-2">
189189
<LordsIcon className="h-6 w-6" />
190190
Lords
191191
</CardTitle>
@@ -234,7 +234,7 @@ export function Homepage({ address }: { address: `0x${string}` }) {
234234
{/* Claims Section */}
235235
<Card>
236236
<CardHeader className="pb-4">
237-
<CardTitle className="text-lg">Available Claims</CardTitle>
237+
<CardTitle>Available Claims</CardTitle>
238238
</CardHeader>
239239
<CardContent className="space-y-4">
240240
<div className="space-y-4">
@@ -317,11 +317,11 @@ export function Homepage({ address }: { address: `0x${string}` }) {
317317
(currentDelegate.user && BigInt(currentDelegate.user) === 0n) ? (
318318
<Card>
319319
<CardHeader className="pb-4">
320-
<CardTitle className="text-lg">Governance</CardTitle>
320+
<CardTitle>Governance</CardTitle>
321321
</CardHeader>
322322
<CardContent>
323323
<div className="text-center">
324-
<h3 className="mb-2 text-lg font-semibold">
324+
<h3 className="realm-card-title mb-2">
325325
No Delegate Selected
326326
</h3>
327327
<p className="text-muted-foreground mb-4 text-sm">
@@ -364,7 +364,7 @@ export function Homepage({ address }: { address: `0x${string}` }) {
364364
{/* Proposals Section */}
365365
<Card>
366366
<CardHeader className="flex flex-row items-center justify-between pb-4">
367-
<CardTitle className="text-lg">Recent Proposals</CardTitle>
367+
<CardTitle>Recent Proposals</CardTitle>
368368
<Link to={`/proposal/list`}>
369369
<Button variant="outline" size="sm">
370370
View All
@@ -383,7 +383,7 @@ export function Homepage({ address }: { address: `0x${string}` }) {
383383
{accountTokens?.length > 0 ? (
384384
<Card>
385385
<CardHeader className="flex flex-row items-center justify-between pb-4">
386-
<CardTitle className="text-lg">Your Realms</CardTitle>
386+
<CardTitle>Your Realms</CardTitle>
387387
{accountTokens.length > 5 && (
388388
<Link to={`/realms`}>
389389
<Button variant="outline" size="sm">
@@ -424,7 +424,7 @@ export function Homepage({ address }: { address: `0x${string}` }) {
424424
) : (
425425
<Card>
426426
<CardHeader className="pb-4">
427-
<CardTitle className="text-lg">Your Realms</CardTitle>
427+
<CardTitle>Your Realms</CardTitle>
428428
</CardHeader>
429429
<CardContent className="pb-6 text-center">
430430
<div className="text-muted-foreground text-lg">

‎apps/account-portal/src/components/modules/realms/claims.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ export const ClaimRewards = () => {
5656
<div className="flex flex-col gap-4">
5757
<div className="flex items-center gap-2">
5858
<LordsIcon className="w-9" />
59-
<span className="text-3xl font-bold">
59+
<span className="realm-stat text-3xl font-bold">
6060
{balance && formatNumber(Number(formatEther(balance)))}
6161
</span>{" "}
6262
claimable
@@ -73,7 +73,7 @@ export const ClaimRewards = () => {
7373
</CardContent>
7474
</Card>
7575
{/* Rewards Info Section */}
76-
<Card className="relativeoverflow-hidden">
76+
<Card className="relative overflow-hidden">
7777
<CardHeader>
7878
<CardTitle>Lords Rewards have ended!</CardTitle>
7979
</CardHeader>

‎apps/account-portal/src/components/modules/velords/stake-lords.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ export const StakeLords = () => {
112112
</CardHeader>
113113
{address ? <><div className="flex flex-col items-center sm:flex-row">
114114
<Card className="mt-4 sm:ml-8 sm:mt-0">
115-
<CardContent className="flex items-center px-4 pb-0 pt-2 text-lg font-semibold md:text-2xl">
115+
<CardContent className="realm-stat flex items-center px-4 pb-0 pt-2 text-lg font-semibold md:text-2xl">
116116
<LordsIcon className="mr-2 h-6 w-6" />
117117
{formatNumber(availableLords)}
118118
</CardContent>

‎apps/account-portal/src/routes/delegate.profile.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ function RouteComponent() {
6868
}
6969
>
7070
<SidebarInset>
71-
<div className="container mx-auto space-y-4 p-8">
71+
<div className="container mx-auto space-y-4 px-4 py-6 sm:px-6 sm:py-8">
7272
<p className="realm-eyebrow">Governance</p>
7373
<h1 className="realm-page-title text-3xl sm:text-4xl">
7474
Your Profile {shortenAddress(session?.user.id)}

‎apps/account-portal/src/routes/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ function IndexComponent() {
3131
return <LoginCard />;
3232
}
3333
return (
34-
<div className="realm-shell flex flex-col gap-4 px-4 py-3 sm:px-6">
34+
<div className="realm-shell flex flex-col gap-4 px-4 py-6 sm:px-6 sm:py-8">
3535
{/* Dashboard Statistics */}
3636
<div>
3737
<div className="mb-3 flex flex-wrap items-center justify-between gap-3">

‎apps/account-portal/src/routes/proposal.list.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ function RouteComponent() {
5858
}}
5959
>
6060
<SidebarInset>
61-
<div className="container space-y-3 p-4 sm:p-8">
61+
<div className="container space-y-3 px-4 py-6 sm:px-6 sm:py-8">
6262
<p className="realm-eyebrow">Governance</p>
6363
<h1 className="realm-page-title text-3xl sm:text-4xl">Proposals</h1>
6464
<Suspense fallback={<ProposalListSkeleton />}>

‎apps/account-portal/src/routes/realms.index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -71,12 +71,12 @@ function RealmsComponent() {
7171
<div className="flex flex-col gap-2 p-4">
7272
<div className="flex gap-2">
7373
<Link to={`/realms/bridge`}>
74-
<Button variant={"outline"} size="lg" className="rounded px-3">
75-
<BridgeIcon className="!h-5 !w-5" /> Starknet Bridge
74+
<Button variant="outline" size="sm">
75+
<BridgeIcon className="h-5! w-5!" /> Starknet Bridge
7676
</Button>
7777
</Link>
7878
<Link to={`/realms/claims`}>
79-
<Button variant={"outline"} size="lg" className="rounded px-3">
79+
<Button variant="outline" size="sm">
8080
<HandCoins /> Claim Lords
8181
</Button>
8282
</Link>

0 commit comments

Comments
 (0)