style: unify remaining site card headers with SectionCard
Convert the settings page neon gradient section headers (blue/purple/green) to the shared SectionCard, and replace the verify page's harsh multi-stop status gradients with subtle status-tinted headers while keeping the green/amber/red/blue semantics. The me page already used a consistent rounded-2xl card style, so it needed no change.
This commit is contained in:
openhands committed
1 parent
087dd7d873
commit
b3340dbfdf
2 files changed
+146
-210
No files matched your search
+114
-196
@@ -4,6 +4,7 @@ import Link from "next/link";
|
|||||||
import { redirect } from "next/navigation";
|
import { redirect } from "next/navigation";
|
||||||
import { getTranslations } from "next-intl/server";
|
import { getTranslations } from "next-intl/server";
|
||||||
import { updateMotto } from "@/actions/user-settings";
|
import { updateMotto } from "@/actions/user-settings";
|
||||||
|
import { SectionCard } from "@/components/home-section";
|
||||||
import { Reveal } from "@/components/motion-reveal";
|
import { Reveal } from "@/components/motion-reveal";
|
||||||
import { auth } from "@/lib/auth";
|
import { auth } from "@/lib/auth";
|
||||||
import { db, User } from "@/lib/db";
|
import { db, User } from "@/lib/db";
|
||||||
@@ -47,18 +48,19 @@ export default async function SettingsPage() {
|
|||||||
{/* Header */}
|
{/* Header */}
|
||||||
<Reveal>
|
<Reveal>
|
||||||
<div
|
<div
|
||||||
className="relative overflow-hidden rounded-xl border px-5 py-4"
|
className="relative overflow-hidden rounded-2xl border px-5 py-4"
|
||||||
style={{
|
style={{
|
||||||
background:
|
background:
|
||||||
"color-mix(in srgb, var(--color-surface) 60%, transparent)",
|
"color-mix(in srgb, var(--color-surface) 60%, transparent)",
|
||||||
backdropFilter: "blur(14px)",
|
backdropFilter: "blur(14px)",
|
||||||
|
WebkitBackdropFilter: "blur(14px)",
|
||||||
borderColor:
|
borderColor:
|
||||||
"color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
|
"color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center gap-3">
|
||||||
<div
|
<div
|
||||||
className="w-10 h-10 rounded-xl flex items-center justify-center"
|
className="flex h-10 w-10 items-center justify-center rounded-xl"
|
||||||
style={{
|
style={{
|
||||||
background:
|
background:
|
||||||
"color-mix(in srgb, var(--color-primary) 14%, transparent)",
|
"color-mix(in srgb, var(--color-primary) 14%, transparent)",
|
||||||
@@ -95,227 +97,143 @@ export default async function SettingsPage() {
|
|||||||
|
|
||||||
{/* Profile card */}
|
{/* Profile card */}
|
||||||
<Reveal delay={0.05}>
|
<Reveal delay={0.05}>
|
||||||
<div
|
<SectionCard
|
||||||
className="overflow-hidden rounded-xl border card-premium"
|
title={t("publicProfile")}
|
||||||
style={{
|
icon="/assets/images/icons/navigation/me.png"
|
||||||
borderColor:
|
bodyClassName="p-5 flex items-center gap-5"
|
||||||
"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<div
|
<div className="shrink-0">
|
||||||
className="flex items-center gap-2.5 px-4 py-3"
|
<div
|
||||||
style={{
|
className="overflow-hidden rounded-xl border"
|
||||||
background:
|
style={{
|
||||||
"linear-gradient(140deg, #1a3a5c 0%, #1e4a6e 20%, #2a5a80 40%, #3a6a90 60%, #4a7aa0 75%, #3a6a90 90%, #2a5a80 100%)",
|
borderColor:
|
||||||
}}
|
"color-mix(in srgb, var(--color-primary) 15%, transparent)",
|
||||||
>
|
}}
|
||||||
<Image
|
|
||||||
src="/assets/images/icons/navigation/me.png"
|
|
||||||
alt=""
|
|
||||||
width={18}
|
|
||||||
height={18}
|
|
||||||
unoptimized
|
|
||||||
/>
|
|
||||||
<h2
|
|
||||||
className="text-sm font-bold text-white"
|
|
||||||
style={{ fontFamily: "var(--font-nunito)" }}
|
|
||||||
>
|
>
|
||||||
{t("publicProfile")}
|
<Image
|
||||||
</h2>
|
src={avatar}
|
||||||
</div>
|
alt={`${user.username} avatar`}
|
||||||
<div
|
width={80}
|
||||||
className="p-5 flex items-center gap-5"
|
height={120}
|
||||||
style={{ backgroundColor: "var(--color-surface)" }}
|
className="block"
|
||||||
>
|
unoptimized
|
||||||
<div className="shrink-0">
|
/>
|
||||||
<div
|
|
||||||
className="rounded-xl overflow-hidden border"
|
|
||||||
style={{
|
|
||||||
borderColor:
|
|
||||||
"color-mix(in srgb, var(--color-primary) 15%, transparent)",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Image
|
|
||||||
src={avatar}
|
|
||||||
alt={`${user.username} avatar`}
|
|
||||||
width={80}
|
|
||||||
height={120}
|
|
||||||
className="block"
|
|
||||||
unoptimized
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="min-w-0 flex-1">
|
|
||||||
<h3
|
|
||||||
className="text-base font-extrabold"
|
|
||||||
style={{ color: "var(--color-text-readable)" }}
|
|
||||||
>
|
|
||||||
{user.username}
|
|
||||||
</h3>
|
|
||||||
<p
|
|
||||||
className="text-sm mt-0.5"
|
|
||||||
style={{ color: "var(--color-text-muted)" }}
|
|
||||||
>
|
|
||||||
{user.motto || (
|
|
||||||
<span style={{ fontStyle: "italic", opacity: 0.5 }}>
|
|
||||||
{t("noMotto")}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</p>
|
|
||||||
<p
|
|
||||||
className="text-xs mt-1.5 font-medium"
|
|
||||||
style={{
|
|
||||||
color:
|
|
||||||
"color-mix(in srgb, var(--color-text-muted) 70%, transparent)",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{user.mail || t("noEmail")}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div className="min-w-0 flex-1">
|
||||||
|
<h3
|
||||||
|
className="text-base font-extrabold"
|
||||||
|
style={{ color: "var(--color-text-readable)" }}
|
||||||
|
>
|
||||||
|
{user.username}
|
||||||
|
</h3>
|
||||||
|
<p
|
||||||
|
className="text-sm mt-0.5"
|
||||||
|
style={{ color: "var(--color-text-muted)" }}
|
||||||
|
>
|
||||||
|
{user.motto || (
|
||||||
|
<span style={{ fontStyle: "italic", opacity: 0.5 }}>
|
||||||
|
{t("noMotto")}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</p>
|
||||||
|
<p
|
||||||
|
className="text-xs mt-1.5 font-medium"
|
||||||
|
style={{
|
||||||
|
color:
|
||||||
|
"color-mix(in srgb, var(--color-text-muted) 70%, transparent)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{user.mail || t("noEmail")}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</SectionCard>
|
||||||
</Reveal>
|
</Reveal>
|
||||||
|
|
||||||
{/* Motto form */}
|
{/* Motto form */}
|
||||||
<Reveal delay={0.1}>
|
<Reveal delay={0.1}>
|
||||||
<div
|
<SectionCard
|
||||||
className="overflow-hidden rounded-xl border"
|
title={t("changeMotto")}
|
||||||
style={{
|
icon="/assets/images/icons/star.gif"
|
||||||
borderColor:
|
bodyClassName="p-5"
|
||||||
"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<div
|
<p
|
||||||
className="flex items-center gap-2.5 px-4 py-3"
|
className="text-xs mb-4"
|
||||||
style={{
|
style={{ color: "var(--color-text-muted)" }}
|
||||||
background:
|
|
||||||
"linear-gradient(140deg, #5a2d82 0%, #6b3a9e 20%, #7d47b8 40%, #8f54d0 60%, #7d47b8 75%, #6b3a9e 90%, #5a2d82 100%)",
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<Image
|
{t("changeMottoSubtitle")}
|
||||||
src="/assets/images/icons/star.gif"
|
</p>
|
||||||
alt=""
|
<form
|
||||||
width={18}
|
action={updateMotto}
|
||||||
height={18}
|
className="flex flex-col gap-3"
|
||||||
unoptimized
|
style={{ maxWidth: 520 }}
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
name="motto"
|
||||||
|
defaultValue={user.motto}
|
||||||
|
maxLength={127}
|
||||||
|
placeholder={t("mottoPlaceholder")}
|
||||||
|
aria-label="Motto"
|
||||||
|
className="input-glow w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none"
|
||||||
|
style={{
|
||||||
|
backgroundColor: "var(--color-background)",
|
||||||
|
color: "var(--color-text-readable)",
|
||||||
|
borderColor:
|
||||||
|
"color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
<h2
|
<div>
|
||||||
className="text-sm font-bold text-white"
|
<button
|
||||||
style={{ fontFamily: "var(--font-nunito)" }}
|
type="submit"
|
||||||
>
|
className="btn-shine inline-flex items-center gap-2 font-extrabold text-sm px-5 py-2.5 rounded-xl transition-all duration-200 hover:scale-[1.03] active:scale-95 shadow-lg"
|
||||||
{t("changeMotto")}
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className="p-5"
|
|
||||||
style={{ backgroundColor: "var(--color-surface)" }}
|
|
||||||
>
|
|
||||||
<p
|
|
||||||
className="text-xs mb-4"
|
|
||||||
style={{ color: "var(--color-text-muted)" }}
|
|
||||||
>
|
|
||||||
{t("changeMottoSubtitle")}
|
|
||||||
</p>
|
|
||||||
<form
|
|
||||||
action={updateMotto}
|
|
||||||
className="flex flex-col gap-3"
|
|
||||||
style={{ maxWidth: 520 }}
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
name="motto"
|
|
||||||
defaultValue={user.motto}
|
|
||||||
maxLength={127}
|
|
||||||
placeholder={t("mottoPlaceholder")}
|
|
||||||
aria-label="Motto"
|
|
||||||
className="input-glow w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none"
|
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "var(--color-background)",
|
background: "var(--color-primary)",
|
||||||
color: "var(--color-text-readable)",
|
color: "var(--color-primary-foreground)",
|
||||||
borderColor:
|
boxShadow:
|
||||||
"color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
|
"0 4px 20px color-mix(in srgb, var(--color-primary) 30%, transparent)",
|
||||||
}}
|
}}
|
||||||
/>
|
>
|
||||||
<div>
|
{t("saveMotto")}
|
||||||
<button
|
</button>
|
||||||
type="submit"
|
</div>
|
||||||
className="btn-shine inline-flex items-center gap-2 font-extrabold text-sm px-5 py-2.5 rounded-xl transition-all duration-200 hover:scale-[1.03] active:scale-95 shadow-lg"
|
</form>
|
||||||
style={{
|
</SectionCard>
|
||||||
background: "var(--color-primary)",
|
|
||||||
color: "var(--color-primary-foreground)",
|
|
||||||
boxShadow:
|
|
||||||
"0 4px 20px color-mix(in srgb, var(--color-primary) 30%, transparent)",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{t("saveMotto")}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Reveal>
|
</Reveal>
|
||||||
|
|
||||||
{/* Security card */}
|
{/* Security card */}
|
||||||
<Reveal delay={0.15}>
|
<Reveal delay={0.15}>
|
||||||
<div
|
<SectionCard
|
||||||
className="overflow-hidden rounded-xl border"
|
title={t("securityTitle")}
|
||||||
style={{
|
icon="/assets/images/icons/navigation/goody.png"
|
||||||
borderColor:
|
bodyClassName="p-5"
|
||||||
"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<div
|
<p
|
||||||
className="flex items-center gap-2.5 px-4 py-3"
|
className="text-xs mb-4"
|
||||||
|
style={{ color: "var(--color-text-muted)" }}
|
||||||
|
>
|
||||||
|
{t("securityDescription")}
|
||||||
|
</p>
|
||||||
|
<Link
|
||||||
|
href="/settings/2fa"
|
||||||
|
className="inline-flex items-center gap-2 font-bold text-sm px-5 py-2.5 rounded-xl border-2 transition-all duration-200 hover:scale-[1.03] active:scale-95 backdrop-blur-sm"
|
||||||
style={{
|
style={{
|
||||||
|
borderColor:
|
||||||
|
"color-mix(in srgb, var(--color-text-muted) 20%, transparent)",
|
||||||
|
color: "var(--color-text-readable)",
|
||||||
background:
|
background:
|
||||||
"linear-gradient(140deg, #0A1F0A 0%, #0F2D0F 20%, #153C15 40%, #1B4A1B 60%, #205820 75%, #1A4A1A 90%, #143814 100%)",
|
"color-mix(in srgb, var(--color-surface) 50%, transparent)",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Image
|
{t("twoFactorLink")}
|
||||||
src="/assets/images/icons/navigation/goody.png"
|
</Link>
|
||||||
alt=""
|
</SectionCard>
|
||||||
width={18}
|
|
||||||
height={18}
|
|
||||||
unoptimized
|
|
||||||
/>
|
|
||||||
<h2
|
|
||||||
className="text-sm font-bold text-white"
|
|
||||||
style={{ fontFamily: "var(--font-nunito)" }}
|
|
||||||
>
|
|
||||||
{t("securityTitle")}
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className="p-5"
|
|
||||||
style={{ backgroundColor: "var(--color-surface)" }}
|
|
||||||
>
|
|
||||||
<p
|
|
||||||
className="text-xs mb-4"
|
|
||||||
style={{ color: "var(--color-text-muted)" }}
|
|
||||||
>
|
|
||||||
{t("securityDescription")}
|
|
||||||
</p>
|
|
||||||
<Link
|
|
||||||
href="/settings/2fa"
|
|
||||||
className="inline-flex items-center gap-2 font-bold text-sm px-5 py-2.5 rounded-xl border-2 transition-all duration-200 hover:scale-[1.03] active:scale-95 backdrop-blur-sm"
|
|
||||||
style={{
|
|
||||||
borderColor:
|
|
||||||
"color-mix(in srgb, var(--color-text-muted) 20%, transparent)",
|
|
||||||
color: "var(--color-text-readable)",
|
|
||||||
background:
|
|
||||||
"color-mix(in srgb, var(--color-surface) 50%, transparent)",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{t("twoFactorLink")}
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Reveal>
|
</Reveal>
|
||||||
|
|
||||||
{/* Sessions link */}
|
{/* Sessions link */}
|
||||||
<Reveal delay={0.2}>
|
<Reveal delay={0.2}>
|
||||||
<Link
|
<Link
|
||||||
href="/settings/sessions"
|
href="/settings/sessions"
|
||||||
className="block overflow-hidden rounded-xl border transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5"
|
className="block overflow-hidden rounded-2xl border transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5"
|
||||||
style={{
|
style={{
|
||||||
borderColor:
|
borderColor:
|
||||||
"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
|
"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
|
||||||
@@ -327,7 +245,7 @@ export default async function SettingsPage() {
|
|||||||
>
|
>
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center gap-3">
|
||||||
<div
|
<div
|
||||||
className="w-10 h-10 rounded-xl flex items-center justify-center"
|
className="flex h-10 w-10 items-center justify-center rounded-xl"
|
||||||
style={{
|
style={{
|
||||||
background:
|
background:
|
||||||
"color-mix(in srgb, var(--color-primary) 14%, transparent)",
|
"color-mix(in srgb, var(--color-primary) 14%, transparent)",
|
||||||
|
|||||||
@@ -20,38 +20,56 @@ function StatusCard({
|
|||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
color: string;
|
color: string;
|
||||||
}) {
|
}) {
|
||||||
const gradientMap: Record<string, string> = {
|
const tintMap: Record<string, string> = {
|
||||||
green:
|
green: "#16a34a",
|
||||||
"linear-gradient(140deg, #0A2F1A 0%, #0F3D22 20%, #154C2A 40%, #1B5A32 60%, #20683A 75%, #1A5A30 90%, #144826 100%)",
|
yellow: "#d97706",
|
||||||
yellow:
|
red: "#dc2626",
|
||||||
"linear-gradient(140deg, #3A2F0A 0%, #4A3D0F 20%, #5A4C15 40%, #6A5A1B 60%, #7A6820 75%, #6A5A1A 90%, #5A4814 100%)",
|
blue: "#2563eb",
|
||||||
red: "linear-gradient(140deg, #3A0F0A 0%, #4A1A0F 20%, #5A2515 40%, #6A301B 60%, #7A3B20 75%, #6A301A 90%, #5A2514 100%)",
|
|
||||||
blue: "linear-gradient(140deg, #0A1A3A 0%, #0F254A 20%, #15305A 40%, #1B3B6A 60%, #20467A 75%, #1A3B6A 90%, #14305A 100%)",
|
|
||||||
};
|
};
|
||||||
|
const tint = tintMap[color] ?? tintMap.blue;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<main className="flex min-h-[60vh] items-center justify-center px-4">
|
<main className="flex min-h-[60vh] items-center justify-center px-4">
|
||||||
<div
|
<div
|
||||||
className="w-full max-w-md overflow-hidden rounded-xl border"
|
className="w-full max-w-md overflow-hidden rounded-2xl border"
|
||||||
style={{
|
style={{
|
||||||
borderColor:
|
borderColor:
|
||||||
"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
|
"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
|
||||||
backgroundColor: "var(--color-surface)",
|
backgroundColor: "var(--color-surface)",
|
||||||
|
boxShadow:
|
||||||
|
"0 1px 2px color-mix(in srgb, var(--color-text-muted) 12%, transparent), 0 8px 24px -12px color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="flex items-center gap-2.5 px-5 py-4"
|
className="flex items-center gap-2.5 border-b px-5 py-4"
|
||||||
style={{ background: gradientMap[color] ?? gradientMap.blue }}
|
style={{
|
||||||
|
background: `color-mix(in srgb, ${tint} 12%, var(--color-surface))`,
|
||||||
|
borderColor:
|
||||||
|
"color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<span className="text-white">{icon}</span>
|
<span
|
||||||
<h1 className="text-sm font-bold text-white">{title}</h1>
|
className="flex h-7 w-7 items-center justify-center rounded-lg"
|
||||||
|
style={{
|
||||||
|
background: `color-mix(in srgb, ${tint} 18%, transparent)`,
|
||||||
|
color: tint,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{icon}
|
||||||
|
</span>
|
||||||
|
<h1
|
||||||
|
className="text-sm font-bold tracking-tight"
|
||||||
|
style={{ color: "var(--color-text-readable)" }}
|
||||||
|
>
|
||||||
|
{title}
|
||||||
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col items-center gap-4 px-6 py-8 text-center">
|
<div className="flex flex-col items-center gap-4 px-6 py-8 text-center">
|
||||||
<div
|
<div
|
||||||
className="flex h-16 w-16 items-center justify-center rounded-full"
|
className="flex h-16 w-16 items-center justify-center rounded-full"
|
||||||
style={{
|
style={{
|
||||||
background:
|
background: `color-mix(in srgb, ${tint} 12%, transparent)`,
|
||||||
"color-mix(in srgb, var(--color-primary) 12%, transparent)",
|
color: tint,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{icon}
|
{icon}
|
||||||
|
|||||||
Reference in new issue
Block a user