refactor: consolidate card components into a single SurfaceCard
Replace the three near-identical public card primitives (ContentCard for content pages, SectionCard for auth/account, and the new SurfaceCard) by merging SectionCard into SurfaceCard, which now supports an optional header (title/icon/action). Every remaining ad-hoc inline `rounded-2xl border` card across (site) is converted to SurfaceCard, preserving each card's unique visuals (background images, blur, gradients) via the style passthrough. Net result: the public site uses exactly two card components — ContentCard (CMS/content pages) and SurfaceCard (everything else) — and the shadcn Card in components/ui/card.tsx is left untouched for admin. Also deletes the now-unused components/home-section.tsx.
This commit is contained in:
openhands committed
1 parent
ed6eaf33a0
commit
555c783d55
7 files changed
+178
-222
No files matched your search
@@ -4,8 +4,8 @@ import Link from "next/link";
|
||||
import { redirect } from "next/navigation";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
import { updateMotto } from "@/actions/user-settings";
|
||||
import { SectionCard } from "@/components/home-section";
|
||||
import { Reveal } from "@/components/motion-reveal";
|
||||
import { SurfaceCard } from "@/components/surface-card";
|
||||
import { auth } from "@/lib/auth";
|
||||
import { db, User } from "@/lib/db";
|
||||
import { avatarImageUrl } from "@/lib/format";
|
||||
@@ -47,8 +47,8 @@ export default async function SettingsPage() {
|
||||
<div className="flex flex-col gap-6 pb-14">
|
||||
{/* Header */}
|
||||
<Reveal>
|
||||
<div
|
||||
className="relative overflow-hidden rounded-2xl border px-5 py-4"
|
||||
<SurfaceCard
|
||||
className="relative px-5 py-4"
|
||||
style={{
|
||||
background:
|
||||
"color-mix(in srgb, var(--color-surface) 60%, transparent)",
|
||||
@@ -92,12 +92,12 @@ export default async function SettingsPage() {
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SurfaceCard>
|
||||
</Reveal>
|
||||
|
||||
{/* Profile card */}
|
||||
<Reveal delay={0.05}>
|
||||
<SectionCard
|
||||
<SurfaceCard
|
||||
title={t("publicProfile")}
|
||||
icon="/assets/images/icons/navigation/me.png"
|
||||
bodyClassName="p-5 flex items-center gap-5"
|
||||
@@ -147,12 +147,12 @@ export default async function SettingsPage() {
|
||||
{user.mail || t("noEmail")}
|
||||
</p>
|
||||
</div>
|
||||
</SectionCard>
|
||||
</SurfaceCard>
|
||||
</Reveal>
|
||||
|
||||
{/* Motto form */}
|
||||
<Reveal delay={0.1}>
|
||||
<SectionCard
|
||||
<SurfaceCard
|
||||
title={t("changeMotto")}
|
||||
icon="/assets/images/icons/star.gif"
|
||||
bodyClassName="p-5"
|
||||
@@ -197,12 +197,12 @@ export default async function SettingsPage() {
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</SectionCard>
|
||||
</SurfaceCard>
|
||||
</Reveal>
|
||||
|
||||
{/* Security card */}
|
||||
<Reveal delay={0.15}>
|
||||
<SectionCard
|
||||
<SurfaceCard
|
||||
title={t("securityTitle")}
|
||||
icon="/assets/images/icons/navigation/goody.png"
|
||||
bodyClassName="p-5"
|
||||
@@ -226,61 +226,56 @@ export default async function SettingsPage() {
|
||||
>
|
||||
{t("twoFactorLink")}
|
||||
</Link>
|
||||
</SectionCard>
|
||||
</SurfaceCard>
|
||||
</Reveal>
|
||||
|
||||
{/* Sessions link */}
|
||||
<Reveal delay={0.2}>
|
||||
<Link
|
||||
href="/settings/sessions"
|
||||
className="block overflow-hidden rounded-2xl border transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5"
|
||||
style={{
|
||||
borderColor:
|
||||
"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="flex items-center justify-between px-5 py-4"
|
||||
style={{ backgroundColor: "var(--color-surface)" }}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div
|
||||
className="flex h-10 w-10 items-center justify-center rounded-xl"
|
||||
style={{
|
||||
background:
|
||||
"color-mix(in srgb, var(--color-primary) 14%, transparent)",
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
src="/assets/images/icons/navigation/community.png"
|
||||
alt=""
|
||||
width={20}
|
||||
height={20}
|
||||
unoptimized
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<span
|
||||
className="text-sm font-extrabold"
|
||||
style={{ color: "var(--color-text-readable)" }}
|
||||
>
|
||||
Session Management
|
||||
</span>
|
||||
<p
|
||||
className="text-xs mt-0.5"
|
||||
style={{ color: "var(--color-text-muted)" }}
|
||||
>
|
||||
View active sessions and sign out everywhere
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
className="text-lg font-bold"
|
||||
style={{ color: "var(--color-text-muted)" }}
|
||||
<Link href="/settings/sessions" className="block">
|
||||
<SurfaceCard className="transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5">
|
||||
<div
|
||||
className="flex items-center justify-between px-5 py-4"
|
||||
style={{ backgroundColor: "var(--color-surface)" }}
|
||||
>
|
||||
→
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<div
|
||||
className="flex h-10 w-10 items-center justify-center rounded-xl"
|
||||
style={{
|
||||
background:
|
||||
"color-mix(in srgb, var(--color-primary) 14%, transparent)",
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
src="/assets/images/icons/navigation/community.png"
|
||||
alt=""
|
||||
width={20}
|
||||
height={20}
|
||||
unoptimized
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<span
|
||||
className="text-sm font-extrabold"
|
||||
style={{ color: "var(--color-text-readable)" }}
|
||||
>
|
||||
Session Management
|
||||
</span>
|
||||
<p
|
||||
className="text-xs mt-0.5"
|
||||
style={{ color: "var(--color-text-muted)" }}
|
||||
>
|
||||
View active sessions and sign out everywhere
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
className="text-lg font-bold"
|
||||
style={{ color: "var(--color-text-muted)" }}
|
||||
>
|
||||
→
|
||||
</span>
|
||||
</div>
|
||||
</SurfaceCard>
|
||||
</Link>
|
||||
</Reveal>
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user