Skip to content

refactor: update styles and improve accessibility across components #698

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
emdevelopa merged 1 commit into from
Apr 23, 2026
Merged

refactor: update styles and improve accessibility across components #698

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions frontend/src/app/(public)/forgot-password/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export default function ForgotPasswordPage() {
<GuestGuard>
<main className="mx-auto flex min-h-screen w-full max-w-lg flex-col justify-center gap-10 px-6 py-24 bg-white text-[#0A0A0A]">
<header className="text-center">
<p className="text-[10px] font-bold uppercase tracking-[0.4em] text-[#6B6B6B]">
<p className="text-xs font-bold uppercase tracking-[0.4em] text-[#6B6B6B]">
Account Recovery
</p>
<h1 className="mt-4 text-5xl font-serif font-black uppercase tracking-tight">
Expand All @@ -31,7 +31,7 @@ export default function ForgotPasswordPage() {
<section className="rounded-[2rem] border border-[#E8E8E8] bg-white p-8 shadow-[0_20px_60px_rgb(0,0,0,0.05)]">
{!submitted ? (
<form onSubmit={handleSubmit} className="flex flex-col gap-5">
<label htmlFor="email" className="text-[10px] font-bold uppercase tracking-[0.2em] text-[#6B6B6B]">
<label htmlFor="email" className="text-xs font-bold uppercase tracking-[0.2em] text-[#6B6B6B]">
Email Address
</label>
<input
Expand All @@ -46,13 +46,13 @@ export default function ForgotPasswordPage() {
/>
<button
type="submit"
className="mt-2 flex h-14 w-full items-center justify-center rounded-2xl bg-[var(--pluto-500)] text-[10px] font-bold uppercase tracking-[0.3em] text-white transition-all hover:bg-[var(--pluto-600)]"
className="mt-2 flex h-14 w-full items-center justify-center rounded-2xl bg-[var(--pluto-500)] text-xs font-bold uppercase tracking-[0.3em] text-white transition-all hover:bg-[var(--pluto-600)]"
>
Continue
</button>
</form>
) : (
<div className="space-y-4">
<div className="space-y-4" role="status">
<p className="rounded-2xl border border-[#DDE7DD] bg-[#F6FBF6] px-4 py-3 text-sm font-medium text-[#235B23]">
Request received. If an account exists for {email}, recovery instructions will be sent.
</p>
Expand All @@ -63,7 +63,7 @@ export default function ForgotPasswordPage() {
)}
</section>

<footer className="text-center text-[10px] font-bold uppercase tracking-widest text-[#6B6B6B]">
<footer className="text-center text-xs font-bold uppercase tracking-widest text-[#6B6B6B]">
Remembered your password?{" "}
<Link href="/login" className="text-[#0A0A0A] underline underline-offset-4 hover:text-black">
Back to login
Expand Down
14 changes: 7 additions & 7 deletions frontend/src/app/(public)/login/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,26 +17,26 @@ export default function LoginPage() {
{/* Main Content */}
<div className="flex-1 w-full max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 relative z-10">
{/* Left Column (Hero) */}
<div className="flex flex-col justify-center items-start px-6 md:px-12 lg:px-20 py-10 md:py-0">
<section className="flex flex-col justify-center items-start px-6 md:px-12 lg:px-20 py-10 md:py-0" aria-labelledby="hero-heading">
<HeroSection />
</div>
</section>

{/* Right Column (Form) */}
<div className="flex flex-col justify-center items-center px-6 md:px-12 lg:px-20 py-10 md:py-0">
<section className="flex flex-col justify-center items-center px-6 md:px-12 lg:px-20 py-10 md:py-0" aria-labelledby="login-heading">
<LoginForm />
</div>
</section>
</div>

{/* Footer */}
<footer className="w-full max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between gap-4 px-6 md:px-10 py-8 mt-auto z-50 text-[10px] font-bold tracking-widest text-[#6B6B6B] uppercase border-t border-[#E8E8E8]">
<footer className="w-full max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between gap-4 px-6 md:px-10 py-8 mt-auto z-50 text-xs font-bold tracking-widest text-[#6B6B6B] uppercase border-t border-[#E8E8E8]">
<div className="text-[#0A0A0A] mb-4 md:mb-0 uppercase tracking-[0.4em] font-serif font-black">
PLUTO
</div>
<div className="flex gap-8 mb-4 md:mb-0">
<nav className="flex gap-8 mb-4 md:mb-0" aria-label="Footer navigation">
<Link href="#" className="hover:text-[#0A0A0A] transition-colors">Privacy Policy</Link>
<Link href="#" className="hover:text-[#0A0A0A] transition-colors">Terms of Service</Link>
<Link href="#" className="hover:text-[#0A0A0A] transition-colors">Help Center</Link>
</div>
</nav>
<div className="text-[#6B6B6B] uppercase tracking-widest">
© {new Date().getFullYear()} PLUTO. THE HUB FOR MODERN COMMERCE.
</div>
Expand Down
46 changes: 23 additions & 23 deletions frontend/src/app/(public)/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ function HeroSection() {
<div className="pointer-events-none absolute inset-0 z-0 bg-gradient-to-b from-transparent via-transparent to-white" />

<div className="relative z-10 flex flex-col items-center gap-6">
<span className="inline-flex items-center gap-2 rounded-full border border-[#E8E8E8] bg-white/80 px-5 py-2 font-bold text-[10px] uppercase tracking-[0.2em] text-[#6B6B6B] shadow-sm">
<span className="inline-flex items-center gap-2 rounded-full border border-[#E8E8E8] bg-white/80 px-5 py-2 font-bold text-xs uppercase tracking-[0.2em] text-[#6B6B6B] shadow-sm">
<span className="h-1.5 w-1.5 rounded-full bg-[#0A0A0A]" />
Surgical Precision Payments
</span>
Expand Down Expand Up @@ -114,7 +114,7 @@ function HeroSection() {
</Link>
</div>

<div className="mt-20 flex flex-wrap items-center justify-center gap-x-10 gap-y-3 text-[10px] font-bold uppercase tracking-[0.2em] text-[#6B6B6B]">
<div className="mt-20 flex flex-wrap items-center justify-center gap-x-10 gap-y-3 text-xs font-bold uppercase tracking-[0.2em] text-[#6B6B6B]">
{["Non-custodial", "5-minute integration", "Sandbox included"].map((t) => (
<span key={t} className="flex items-center gap-2">
<span className="h-1 w-1 rounded-full bg-[#0A0A0A]" />
Expand All @@ -131,7 +131,7 @@ function FeaturesSection() {
return (
<div className="mx-auto max-w-7xl px-6 py-32 lg:py-48">
<div className="mb-20 text-center">
<p className="mb-4 font-bold text-[10px] uppercase tracking-[0.4em] text-[#6B6B6B]">Engineered for Performance</p>
<p className="mb-4 font-bold text-xs uppercase tracking-[0.4em] text-[#6B6B6B]">Engineered for Performance</p>
<h2 className="mx-auto max-w-3xl text-5xl font-bold leading-[1.1] text-[#0A0A0A] sm:text-7xl">
Everything you need to scale
</h2>
Expand All @@ -145,7 +145,7 @@ function FeaturesSection() {
>
<div className="flex items-center justify-between">
<span className="text-3xl text-[#0A0A0A] transition-transform duration-300 group-hover:scale-110">{f.icon}</span>
<span className="rounded-full border border-[#E8E8E8] px-4 py-1.5 font-bold text-[10px] uppercase tracking-widest text-[#6B6B6B]">
<span className="rounded-full border border-[#E8E8E8] px-4 py-1.5 font-bold text-xs uppercase tracking-widest text-[#6B6B6B]">
{f.tag}
</span>
</div>
Expand All @@ -172,7 +172,7 @@ function HowItWorksSection() {
<div className="border-y border-[#E8E8E8] bg-[#F9F9F9]">
<div className="mx-auto max-w-7xl px-6 py-32 lg:py-48">
<div className="mb-20 text-center">
<p className="mb-4 font-bold text-[10px] uppercase tracking-[0.4em] text-[#6B6B6B]">Simple Workflow</p>
<p className="mb-4 font-bold text-xs uppercase tracking-[0.4em] text-[#6B6B6B]">Simple Workflow</p>
<h2 className="mx-auto max-w-3xl text-5xl font-bold leading-[1.1] text-[#0A0A0A] sm:text-7xl">Four steps to scale</h2>
</div>

Expand All @@ -185,7 +185,7 @@ function HowItWorksSection() {
<div className="absolute left-full top-1/2 hidden h-px w-[calc(100%+3rem)] -translate-y-1/2 bg-[#E8E8E8] lg:block" />
)}
</div>
<h3 className="mb-3 text-[10px] font-bold text-[#0A0A0A] uppercase tracking-[0.4em]">{step.title}</h3>
<h3 className="mb-3 text-xs font-bold text-[#0A0A0A] uppercase tracking-[0.4em]">{step.title}</h3>
<p className="text-sm font-medium leading-relaxed text-[#6B6B6B]">{step.description}</p>
</div>
))}
Expand All @@ -199,26 +199,26 @@ function IntegrationModesSection() {
return (
<div className="mx-auto max-w-7xl px-6 py-24 lg:py-32">
<div className="mb-12 text-center">
<p className="mb-4 font-bold text-[10px] uppercase tracking-[0.4em] text-[#6B6B6B]">Agentic Payments</p>
<p className="mb-4 font-bold text-xs uppercase tracking-[0.4em] text-[#6B6B6B]">Agentic Payments</p>
<h2 className="mx-auto max-w-4xl text-4xl font-bold leading-[1.1] text-[#0A0A0A] sm:text-6xl">
Build with x402 mode
</h2>
</div>

<div className="mx-auto max-w-3xl rounded-[2rem] border border-[var(--pluto-200)] bg-[var(--pluto-50)] p-8 shadow-sm">
<p className="text-[10px] font-bold uppercase tracking-[0.3em] text-[var(--pluto-600)]">x402</p>
<p className="text-xs font-bold uppercase tracking-[0.3em] text-[var(--pluto-600)]">x402</p>
<h3 className="mt-3 text-3xl font-bold tracking-tight text-[var(--pluto-800)]">Pay-per-request API access</h3>
<p className="mt-4 text-sm text-[var(--pluto-700)]">
Start integrating with x402-protected create-payment calls and let your backend handle 402 challenge, on-chain payment, verification, and retry.
</p>
<ul className="mt-6 flex flex-col gap-2 text-[10px] font-bold uppercase tracking-widest text-[var(--pluto-700)]">
<ul className="mt-6 flex flex-col gap-2 text-xs font-bold uppercase tracking-widest text-[var(--pluto-700)]">
<li>Request with x402 pricing mode</li>
<li>Pay challenge on Stellar</li>
<li>Retry with payment token</li>
</ul>
<Link
href="/docs/x402-agentic-payments"
className="mt-8 inline-flex items-center gap-2 rounded-xl bg-[var(--pluto-500)] px-5 py-3 text-[10px] font-bold uppercase tracking-widest text-white transition-colors hover:bg-[var(--pluto-600)]"
className="mt-8 inline-flex items-center gap-2 rounded-xl bg-[var(--pluto-500)] px-5 py-3 text-xs font-bold uppercase tracking-widest text-white transition-colors hover:bg-[var(--pluto-600)]"
>
View x402 Guide →
</Link>
Expand Down Expand Up @@ -280,7 +280,7 @@ function PricingSection() {
/>
<div className="relative z-10 mx-auto max-w-7xl px-6 py-24 lg:py-32">
<div className="mb-20 text-center">
<p className="mb-4 font-bold text-[10px] uppercase tracking-[0.4em] text-[var(--pluto-600)]">Pricing</p>
<p className="mb-4 font-bold text-xs uppercase tracking-[0.4em] text-[var(--pluto-600)]">Pricing</p>
<h2 className="mx-auto max-w-3xl text-5xl font-bold leading-[1.1] tracking-tight text-[#0A0A0A] sm:text-7xl">
Predictable pricing.<br />Infinite scale.
</h2>
Expand Down Expand Up @@ -326,7 +326,7 @@ function PricingSection() {

<Link
href={plan.cta.href}
className={`mt-auto inline-flex items-center justify-center rounded-2xl px-6 py-4 text-[10px] font-bold uppercase tracking-[0.2em] transition-all hover:scale-[1.02] active:scale-[0.98] ${
className={`mt-auto inline-flex items-center justify-center rounded-2xl px-6 py-4 text-xs font-bold uppercase tracking-[0.2em] transition-all hover:scale-[1.02] active:scale-[0.98] ${
plan.cta.primary
? "bg-[var(--pluto-500)] text-white shadow-xl shadow-[var(--pluto-500)]/20 hover:bg-[var(--pluto-600)]"
: "border border-[#E8E8E8] bg-white text-[#0A0A0A] hover:bg-[#F9F9F9]"
Expand All @@ -350,7 +350,7 @@ function CodeSnippetSection() {
<div className="mx-auto max-w-7xl px-6 py-32 lg:py-48">
<div className="grid items-center gap-12 lg:grid-cols-2 lg:gap-20">
<div>
<p className="mb-4 font-bold text-[10px] uppercase tracking-[0.4em] text-[#6B6B6B]">Developer First</p>
<p className="mb-4 font-bold text-xs uppercase tracking-[0.4em] text-[#6B6B6B]">Developer First</p>
<h2 className="mb-8 text-5xl font-bold leading-[1.1] text-[#0A0A0A] sm:text-7xl">
One endpoint.<br />Total control.
</h2>
Expand All @@ -359,7 +359,7 @@ function CodeSnippetSection() {
</p>
<ul className="flex flex-col gap-4">
{["Atomic transactions", "HMAC-SHA256 signed webhooks", "Customizable metadata", "Scalable architecture"].map((item) => (
<li key={item} className="flex items-center gap-3 text-[10px] font-bold uppercase tracking-widest text-[#6B6B6B]">
<li key={item} className="flex items-center gap-3 text-xs font-bold uppercase tracking-widest text-[#6B6B6B]">
<span className="h-1.5 w-1.5 rounded-full bg-[#0A0A0A] shrink-0" />
{item}
</li>
Expand All @@ -373,7 +373,7 @@ function CodeSnippetSection() {
<button
key={t}
onClick={() => setTab(t)}
className={`relative px-8 py-4 font-bold text-[10px] uppercase tracking-widest transition-colors ${tab === t ? "bg-white text-[#0A0A0A]" : "text-[#6B6B6B] hover:text-[#0A0A0A]"}`}
className={`relative px-8 py-4 font-bold text-xs uppercase tracking-widest transition-colors ${tab === t ? "bg-white text-[#0A0A0A]" : "text-[#6B6B6B] hover:text-[#0A0A0A]"}`}
>
{t}
{tab === t && <span className="absolute bottom-0 left-0 right-0 h-0.5 bg-[#0A0A0A]" />}
Expand Down Expand Up @@ -401,7 +401,7 @@ function PayWithLinkDemo() {
return (
<div className="mx-auto max-w-6xl px-6 py-32 lg:py-48">
<div className="mb-20 text-center">
<p className="mb-4 font-bold text-[10px] uppercase tracking-[0.4em] text-[#6B6B6B]">User Experience</p>
<p className="mb-4 font-bold text-xs uppercase tracking-[0.4em] text-[#6B6B6B]">User Experience</p>
<h2 className="mx-auto max-w-3xl text-5xl font-bold leading-[1.1] text-[#0A0A0A] sm:text-7xl">Precision Checkout</h2>
<p className="mx-auto mt-6 max-w-lg text-base font-medium text-[#6B6B6B]">
A sleek, branded checkout experience generated instantly through the PLUTO API.
Expand All @@ -416,20 +416,20 @@ function PayWithLinkDemo() {
<div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-[#F9F9F9] border border-[#E8E8E8] text-lg">⬡</div>
<div>
<p className="text-sm font-bold text-[#0A0A0A]">Acme Store</p>
<p className="text-[10px] font-bold text-[#6B6B6B] uppercase tracking-widest">Order #8842</p>
<p className="text-xs font-bold text-[#6B6B6B] uppercase tracking-widest">Order #8842</p>
</div>
</div>

<div className="mb-8 text-center">
<p className="text-[10px] font-bold uppercase tracking-[0.2em] text-[#6B6B6B]">Amount Due</p>
<p className="text-xs font-bold uppercase tracking-[0.2em] text-[#6B6B6B]">Amount Due</p>
<p className="mt-1 text-5xl font-bold tracking-tight text-[#0A0A0A]">
25.00 <span className="text-lg font-medium text-[#6B6B6B]">USDC</span>
</p>
</div>

<div className="mb-8 space-y-3 rounded-2xl border border-[#E8E8E8] bg-[#F9F9F9] p-5">
{[["Network", "Stellar Mainnet"], ["Expires In", "29:42"]].map(([k, v]) => (
<div key={k} className="flex items-center justify-between text-[10px] font-bold uppercase tracking-widest">
<div key={k} className="flex items-center justify-between text-xs font-bold uppercase tracking-widest">
<span className="text-[#6B6B6B]">{k}</span>
<span className="text-[#0A0A0A]">{v}</span>
</div>
Expand All @@ -439,7 +439,7 @@ function PayWithLinkDemo() {
{!paid ? (
<button
onClick={() => setPaid(true)}
className="w-full rounded-2xl bg-[var(--pluto-500)] py-5 text-[10px] font-bold uppercase tracking-[0.3em] text-white shadow-xl shadow-[var(--pluto-500)]/10 transition-all hover:bg-[var(--pluto-600)] active:scale-[0.97]"
className="w-full rounded-2xl bg-[var(--pluto-500)] py-5 text-xs font-bold uppercase tracking-[0.3em] text-white shadow-xl shadow-[var(--pluto-500)]/10 transition-all hover:bg-[var(--pluto-600)] active:scale-[0.97]"
>
Complete Payment
</button>
Expand Down Expand Up @@ -476,11 +476,11 @@ function CTASection() {
<div className="mt-14 flex flex-col items-center gap-6 sm:flex-row">
<Link
href="/register"
className="inline-flex items-center gap-2 rounded-xl bg-[var(--pluto-500)] px-12 py-6 text-[10px] font-bold uppercase tracking-widest text-white shadow-2xl shadow-[var(--pluto-500)]/10 transition-all hover:bg-[var(--pluto-600)] active:scale-[0.97]"
className="inline-flex items-center gap-2 rounded-xl bg-[var(--pluto-500)] px-12 py-6 text-xs font-bold uppercase tracking-widest text-white shadow-2xl shadow-[var(--pluto-500)]/10 transition-all hover:bg-[var(--pluto-600)] active:scale-[0.97]"
>
Create Free Account →
</Link>
<Link href="/login" className="font-bold text-[10px] uppercase tracking-widest text-[#6B6B6B] transition-colors hover:text-[#0A0A0A]">
<Link href="/login" className="font-bold text-xs uppercase tracking-widest text-[#6B6B6B] transition-colors hover:text-[#0A0A0A]">
Sign in →
</Link>
</div>
Expand All @@ -497,7 +497,7 @@ function Footer() {
<span className="font-serif text-xl font-bold tracking-tight text-[#0A0A0A]">PLUTO</span>
<SystemStatus />
</div>
<div className="flex gap-10 font-bold text-[10px] uppercase tracking-widest text-[#6B6B6B]">
<div className="flex gap-10 font-bold text-xs uppercase tracking-widest text-[#6B6B6B]">
{[["Login", "/login"], ["Register", "/register"], ["Dashboard", "/dashboard"], ["Docs", "/docs"]].map(([label, href]) => (
<Link key={label} href={href} className="transition-colors hover:text-[#0A0A0A]">{label}</Link>
))}
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/app/(public)/register/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ export default function RegisterPage() {
<GuestGuard>
<main className="mx-auto flex min-h-screen max-w-lg flex-col justify-center gap-10 px-6 py-14 md:py-20 bg-white">
<header className="flex flex-col gap-6 text-center">
<p className="font-bold text-[10px] uppercase tracking-[0.4em] text-[#6B6B6B] animate-pulse">Onboarding</p>
<p className="font-bold text-xs uppercase tracking-[0.4em] text-[#6B6B6B] motion-safe:animate-pulse">Onboarding</p>
<h1 className="text-4xl md:text-5xl font-bold text-[#0A0A0A] tracking-tight font-serif uppercase">Join PLUTO</h1>
<p className="text-sm font-medium text-[#6B6B6B] leading-relaxed">
Create your merchant profile to start accepting modern payments and managing assets on the PLUTO infrastructure.
Expand All @@ -19,7 +19,7 @@ export default function RegisterPage() {
</div>

<footer className="text-center">
<p className="text-[10px] font-bold uppercase tracking-widest text-[#6B6B6B]">
<p className="text-xs font-bold uppercase tracking-widest text-[#6B6B6B]">
Already have an account?{" "}
<Link href="/login" className="text-[#0A0A0A] underline underline-offset-8 font-bold hover:text-black">
Log in here
Expand Down
Loading
Loading