hanzoai/captable
2
0
Fork 0
mirror of https://github.com/hanzoai/captable.git synced 2026-10-16 14:21:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

Draw the sign-in, password and 404 pages from the theme tokens

Browse Source 
The page is bg-background, the card bg-card with text-card-foreground, and
the IAM button is the primary Button, so the heading and every label follow
whichever palette <html> carries instead of white text on a white card.
This commit is contained in:
zooqueen
2026-09-15 12:03:00 -07:00
parent fd403f2491
commit 3fbd38be40
18 changed files with 47 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/(authenticated)/(dashboard)/company/new/page.tsx
+2 -2
View File
@@ -7,8 +7,8 @@ export const metadata: Metadata = {
const OnboardingPage = async () => {
return (
<div className="flex min-h-screen justify-center bg-gradient-to-br from-indigo-50 via-white to-cyan-100 px-5 pb-5 pt-20">
<div className="border-rounded w-full max-w-2xl border bg-white p-10 shadow">
<div className="flex min-h-screen justify-center bg-background px-5 pb-5 pt-20">
<div className="w-full max-w-2xl rounded-xl border bg-card p-10 text-card-foreground shadow">
<div className="mb-5">
<h1 className="text-2xl font-semibold tracking-tight">
Welcome to {process.env.NEXT_PUBLIC_APP_NAME || "Hanzo Captable"}!
src/app/(authenticated)/onboarding/page.tsx
+2 -2
View File
@@ -16,8 +16,8 @@ const OnboardingPage = async () => {
}
return (
<div className="flex min-h-screen justify-center bg-gradient-to-br from-indigo-50 via-white to-cyan-100 px-5 pb-5 pt-20">
<div className="border-rounded w-full max-w-2xl border bg-white p-10 shadow">
<div className="flex min-h-screen justify-center bg-background px-5 pb-5 pt-20">
<div className="w-full max-w-2xl rounded-xl border bg-card p-10 text-card-foreground shadow">
<div className="mb-5">
<h1 className="text-2xl font-semibold tracking-tight">
Welcome to {process.env.NEXT_PUBLIC_APP_NAME || "Hanzo Captable"}
src/app/(unauthenticated)/new/page.tsx
+3 -3
View File
@@ -18,10 +18,10 @@ export default async function CapPage() {
}
return (
<div className="flex h-screen items-center justify-center bg-gradient-to-br from-indigo-50 via-white to-cyan-100">
<div className="grid w-full max-w-lg grid-cols-1 gap-5 rounded-xl border bg-white/10 p-10 shadow-sm hover:shadow-md">
<div className="flex h-screen items-center justify-center bg-background">
<div className="grid w-full max-w-lg grid-cols-1 gap-5 rounded-xl border bg-card p-10 text-card-foreground shadow-sm hover:shadow-md">
<h3 className="-mt-5">
cap.<span className="text-2xl text-gray-600">new</span>
cap.<span className="text-2xl text-muted-foreground">new</span>
</h3>
<ul>
<li className="mb-1">
src/app/(unauthenticated)/password-updated/page.tsx
+2 -2
View File
@@ -9,8 +9,8 @@ export const metadata: Metadata = {
export default function PasswordUpdated() {
return (
<div className="flex h-screen items-center justify-center bg-gradient-to-br from-indigo-50 via-white to-cyan-100">
<div className="grid w-full max-w-md grid-cols-1 gap-5 rounded-xl border bg-white p-10 shadow">
<div className="flex h-screen items-center justify-center bg-background">
<div className="grid w-full max-w-md grid-cols-1 gap-5 rounded-xl border bg-card p-10 text-card-foreground shadow">
<div className="flex flex-col gap-y-2 text-center">
<RiCheckboxCircleLine className="h-10 w-auto" />
<h1 className="text-2xl font-semibold tracking-tight">
src/app/(unauthenticated)/reset-password/page.tsx
+2 -2
View File
@@ -8,8 +8,8 @@ export const metadata: Metadata = {
export default function EmailVerificationWithoutTokenPage() {
return (
<div className="flex h-screen items-center justify-center bg-gradient-to-br from-indigo-50 via-white to-cyan-100">
<div className="grid w-full max-w-md grid-cols-1 gap-5 rounded-xl border bg-white p-10 shadow">
<div className="flex h-screen items-center justify-center bg-background">
<div className="grid w-full max-w-md grid-cols-1 gap-5 rounded-xl border bg-card p-10 text-card-foreground shadow">
<div className="flex flex-col gap-y-2 text-center">
<h1 className="text-2xl font-semibold tracking-tight">
Uh oh! Looks like you&apos;re missing a token
src/app/(unauthenticated)/set-password/page.tsx
+2 -2
View File
@@ -8,8 +8,8 @@ export const metadata: Metadata = {
export default function SetPasswordWithoutTokenPage() {
return (
<div className="flex h-screen items-center justify-center bg-gradient-to-br from-indigo-50 via-white to-cyan-100">
<div className="grid w-full max-w-md grid-cols-1 gap-5 rounded-xl border bg-white p-10 shadow">
<div className="flex h-screen items-center justify-center bg-background">
<div className="grid w-full max-w-md grid-cols-1 gap-5 rounded-xl border bg-card p-10 text-card-foreground shadow">
<div className="flex flex-col gap-y-2 text-center">
<h1 className="text-2xl font-semibold tracking-tight">
Uh oh! Looks like you&apos;re missing a token
src/app/(unauthenticated)/verify-email/page.tsx
+2 -2
View File
@@ -8,8 +8,8 @@ export const metadata: Metadata = {
export default function EmailVerificationWithoutTokenPage() {
return (
<div className="flex h-screen items-center justify-center bg-gradient-to-br from-indigo-50 via-white to-cyan-100">
<div className="grid w-full max-w-md grid-cols-1 gap-5 rounded-xl border bg-white p-10 shadow">
<div className="flex h-screen items-center justify-center bg-background">
<div className="grid w-full max-w-md grid-cols-1 gap-5 rounded-xl border bg-card p-10 text-card-foreground shadow">
<div className="flex flex-col gap-y-2 text-center">
<h1 className="text-2xl font-semibold tracking-tight">
Uh oh! Looks like you&apos;re missing a token
src/app/not-found.tsx
+3 -3
View File
@@ -7,11 +7,11 @@ export default function NotFoundPage() {
const router = useRouter();
return (
<div className="flex h-screen w-full flex-col items-center justify-center bg-white">
<h1 className=" text-9xl font-extrabold tracking-widest text-gray-900 md:text-[150px]">
<div className="flex h-screen w-full flex-col items-center justify-center bg-background">
<h1 className=" text-9xl font-extrabold tracking-widest text-foreground md:text-[150px]">
404
</h1>
<div className=" px-4 pb-2 text-sm text-black">
<div className=" px-4 pb-2 text-sm text-muted-foreground">
The page you are looking for does not exist
</div>
<Button variant="outline" onClick={() => router.back()}>
src/components/onboarding/check-email/index.tsx
+4 -4
View File
@@ -32,11 +32,11 @@ const CheckEmailComponent = () => {
}
return (
<div className="flex h-screen items-center justify-center bg-gradient-to-br from-indigo-50 via-white to-cyan-100">
<div className="grid w-full max-w-md grid-cols-1 gap-5 rounded-xl border bg-white p-10 shadow">
<div className="flex h-screen items-center justify-center bg-background">
<div className="grid w-full max-w-md grid-cols-1 gap-5 rounded-xl border bg-card p-10 text-card-foreground shadow">
<div className="flex flex-col gap-y-2 text-center">
<div className="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-teal-100">
<span className="text-teal-500">
<div className="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-muted">
<span className="text-foreground">
<RiMailLine className="h-6 w-auto" />
</span>
</div>
src/components/onboarding/company-form.tsx
+1 -1
View File
@@ -225,7 +225,7 @@ export const CompanyForm = ({ type, data }: CompanyFormProps) => {
onChange={handleLogoChangeAndUpload}
ref={fileInputRef}
/>
<p className="mt-2 text-xs text-gray-700">
<p className="mt-2 text-xs text-muted-foreground">
JPG, GIF or PNG. 1MB max.
</p>
</div>
src/components/onboarding/email-sent/index.tsx
+2 -2
View File
@@ -6,8 +6,8 @@ import Link from "next/link";
const EmailSent = () => {
return (
<div className="flex h-screen items-center justify-center bg-gradient-to-br from-indigo-50 via-white to-cyan-100">
<div className="grid w-full max-w-md grid-cols-1 gap-5 rounded-xl border bg-white p-10 shadow">
<div className="flex h-screen items-center justify-center bg-background">
<div className="grid w-full max-w-md grid-cols-1 gap-5 rounded-xl border bg-card p-10 text-card-foreground shadow">
<div className="flex flex-col gap-y-2 text-center">
<RiMailLine className="mb-1 h-10 w-auto" />
<h1 className="text-2xl font-semibold tracking-tight">Email sent!</h1>
src/components/onboarding/forgot-password/index.tsx
+3 -3
View File
@@ -44,8 +44,8 @@ const ForgotPassword = () => {
};
return (
<div className="flex h-screen items-center justify-center bg-gradient-to-br from-indigo-50 via-white to-cyan-100">
<div className="grid w-full max-w-md grid-cols-1 gap-5 rounded-xl border bg-white p-10 shadow">
<div className="flex h-screen items-center justify-center bg-background">
<div className="grid w-full max-w-md grid-cols-1 gap-5 rounded-xl border bg-card p-10 text-card-foreground shadow">
<div className="flex flex-col gap-y-2 text-center">
<CaptableLogo className="mb-1 h-10 w-auto" />
<h1 className="text-2xl font-semibold tracking-tight">
@@ -91,7 +91,7 @@ const ForgotPassword = () => {
</div>
</form>
</Form>
<span className="text-center text-sm text-gray-500">
<span className="text-center text-sm text-muted-foreground">
Remembered your password?{" "}
<Link
href="/login"
src/components/onboarding/reset-password/index.tsx
+2 -2
View File
@@ -67,8 +67,8 @@ export const ResetPasswordForm = ({ token }: ResetPasswordFormProps) => {
};
return (
<div className="flex h-screen items-center justify-center bg-gradient-to-br from-indigo-50 via-white to-cyan-100">
<div className="grid w-full max-w-md grid-cols-1 gap-5 rounded-xl border bg-white p-10 shadow">
<div className="flex h-screen items-center justify-center bg-background">
<div className="grid w-full max-w-md grid-cols-1 gap-5 rounded-xl border bg-card p-10 text-card-foreground shadow">
<div className="flex flex-col gap-y-2 text-center">
<CaptableLogo className="mb-1 h-10 w-auto" />
<h1 className="text-2xl font-semibold tracking-tight">
src/components/onboarding/set-password/index.tsx
+2 -2
View File
@@ -75,8 +75,8 @@ export const SetPasswordForm = ({
};
return (
<div className="flex h-screen items-center justify-center bg-gradient-to-br from-indigo-50 via-white to-cyan-100">
<div className="grid w-full max-w-md grid-cols-1 gap-5 rounded-xl border bg-white p-10 shadow">
<div className="flex h-screen items-center justify-center bg-background">
<div className="grid w-full max-w-md grid-cols-1 gap-5 rounded-xl border bg-card p-10 text-card-foreground shadow">
<div className="flex flex-col gap-y-2 text-center">
<CaptableLogo className="mb-1 h-10 w-auto" />
<h1 className="text-2xl font-semibold tracking-tight">
src/components/onboarding/signin/index.tsx
+3 -7
View File
@@ -13,14 +13,10 @@ const SignInForm = () => {
}
return (
<div className="flex h-screen items-center justify-center bg-gradient-to-br from-indigo-50 via-white to-cyan-100">
<div className="grid w-full max-w-md grid-cols-1 gap-5 rounded-xl border bg-white p-10 shadow">
<div className="flex h-screen items-center justify-center bg-background">
<div className="grid w-full max-w-md grid-cols-1 gap-5 rounded-xl border bg-card p-10 text-card-foreground shadow">
<AuthFormHeader page="signin" />
<Button
type="button"
onClick={signInWithIAM}
className="bg-red-500 hover:bg-red-600 text-white"
>
<Button type="button" onClick={signInWithIAM}>
Sign in with <span className="font-bold">{IAM_PROVIDER_NAME}</span>
</Button>
</div>
src/components/onboarding/signup/index.tsx
+4 -8
View File
@@ -13,18 +13,14 @@ const SignUpForm = () => {
}
return (
<div className="flex h-screen items-center justify-center bg-gradient-to-br from-indigo-50 via-white to-cyan-100">
<div className="grid w-full max-w-md grid-cols-1 gap-5 rounded-xl border bg-white p-10 shadow">
<div className="flex h-screen items-center justify-center bg-background">
<div className="grid w-full max-w-md grid-cols-1 gap-5 rounded-xl border bg-card p-10 text-card-foreground shadow">
<AuthFormHeader page="signup" />
<Button
type="button"
onClick={signInWithIAM}
className="bg-red-500 hover:bg-red-600 text-white"
>
<Button type="button" onClick={signInWithIAM}>
Sign up with{" "}
<span className="font-bold">{IAM_PROVIDER_NAME}</span>
</Button>
<span className="text-center text-sm text-gray-500">
<span className="text-center text-sm text-muted-foreground">
Already have an account?{" "}
<a
href="/login"
src/components/onboarding/verify-email/index.tsx
+6 -6
View File
@@ -50,8 +50,8 @@ const VerifyEmail = ({ token }: { token: string }) => {
if (loading) {
return (
<div className="flex h-screen items-center justify-center bg-gradient-to-br from-indigo-50 via-white to-cyan-100">
<div className="grid w-full max-w-md grid-cols-1 gap-5 rounded-xl border bg-white p-10 shadow">
<div className="flex h-screen items-center justify-center bg-background">
<div className="grid w-full max-w-md grid-cols-1 gap-5 rounded-xl border bg-card p-10 text-card-foreground shadow">
<div className="flex flex-col gap-y-2 text-center">
<h1 className="text-2xl font-semibold tracking-tight">
Verifying...
@@ -63,13 +63,13 @@ const VerifyEmail = ({ token }: { token: string }) => {
}
return (
<div className="flex h-screen items-center justify-center bg-gradient-to-br from-indigo-50 via-white to-cyan-100">
<div className="grid w-full max-w-md grid-cols-1 gap-5 rounded-xl border bg-white p-10 shadow">
<div className="flex h-screen items-center justify-center bg-background">
<div className="grid w-full max-w-md grid-cols-1 gap-5 rounded-xl border bg-card p-10 text-card-foreground shadow">
<div className="flex flex-col gap-y-2 text-center">
{success ? (
<>
<div className="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-teal-100">
<span className="text-teal-500">
<div className="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-muted">
<span className="text-foreground">
<RiMailCheckLine className="h-6 w-auto" />
</span>
</div>
src/components/share/page-layout.tsx
+2 -2
View File
@@ -19,7 +19,7 @@ export const SharePageLayout = ({
medium,
children,
}: SharePageLayoutProps) => (
<div className="flex min-h-screen justify-center bg-gradient-to-br from-indigo-50 via-white to-cyan-100 px-5 pb-5 pt-12">
<div className="flex min-h-screen justify-center bg-background px-5 pb-5 pt-12">
<div className="mx-auto flex w-[1080px] max-w-sm flex-col sm:max-w-4xl">
<div className="mb-16 flex items-center gap-3">
<Avatar className="h-12 w-12 rounded">
@@ -40,7 +40,7 @@ export const SharePageLayout = ({
href={`${process.env.NEXT_PUBLIC_APP_URL || "https://captable.hanzo.ai"}?utm_source=${company.name}&utm_medium=${medium}&utm_campaign=powered_by`}
target="_blank"
rel="noopener noreferrer"
className="font-bold text-teal-500 hover:underline"
className="font-bold text-foreground hover:underline"
>
{APP_NAME}
</Link>