Brand with Bayside Academy navy + logo
- Theme primary -> Bayside navy (#06315a) in light & dark, sidebar + focus ring - Bayside logo in the sidebar, login page, and public intake header - Login title -> Bayside Academy Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
@@ -49,8 +49,8 @@ function ProtectedLayout() {
|
|||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-muted/20 flex">
|
<div className="min-h-screen bg-muted/20 flex">
|
||||||
<aside className="w-60 bg-card border-r flex flex-col">
|
<aside className="w-60 bg-card border-r flex flex-col">
|
||||||
<div className="h-16 border-b flex items-center gap-2 px-4 font-semibold">
|
<div className="h-16 border-b flex items-center px-4">
|
||||||
<GraduationCap className="h-5 w-5 text-primary" /> School Portal
|
<img src="/bayside-logo.png" alt="Bayside Academy" className="h-9 w-auto" />
|
||||||
</div>
|
</div>
|
||||||
<nav className="p-3 flex-1 space-y-1">
|
<nav className="p-3 flex-1 space-y-1">
|
||||||
{nav.filter((n) => n.show).map((n) => {
|
{nav.filter((n) => n.show).map((n) => {
|
||||||
|
|||||||
+3
-4
@@ -13,7 +13,7 @@ const searchSchema = z.object({ mode: z.enum(["signin", "signup"]).optional() })
|
|||||||
|
|
||||||
export const Route = createFileRoute("/auth")({
|
export const Route = createFileRoute("/auth")({
|
||||||
validateSearch: searchSchema,
|
validateSearch: searchSchema,
|
||||||
head: () => ({ meta: [{ title: "Sign in — School Portal" }] }),
|
head: () => ({ meta: [{ title: "Sign in — Bayside Academy" }] }),
|
||||||
component: AuthPage,
|
component: AuthPage,
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -63,9 +63,8 @@ function AuthPage() {
|
|||||||
return (
|
return (
|
||||||
<div className="min-h-screen flex items-center justify-center bg-muted/30 p-4">
|
<div className="min-h-screen flex items-center justify-center bg-muted/30 p-4">
|
||||||
<div className="w-full max-w-md bg-card border rounded-lg p-8 shadow-sm">
|
<div className="w-full max-w-md bg-card border rounded-lg p-8 shadow-sm">
|
||||||
<div className="flex items-center gap-2 mb-6">
|
<div className="flex justify-center mb-6">
|
||||||
<GraduationCap className="h-6 w-6 text-primary" />
|
<img src="/bayside-logo.png" alt="Bayside Academy" className="h-12 w-auto" />
|
||||||
<h1 className="font-semibold text-lg">School Portal</h1>
|
|
||||||
</div>
|
</div>
|
||||||
<Tabs value={tab} onValueChange={(v) => setTab(v as "signin" | "signup")}>
|
<Tabs value={tab} onValueChange={(v) => setTab(v as "signin" | "signup")}>
|
||||||
<TabsList className="grid grid-cols-2 w-full">
|
<TabsList className="grid grid-cols-2 w-full">
|
||||||
|
|||||||
@@ -95,7 +95,8 @@ function IntakePage() {
|
|||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-muted/20">
|
<div className="min-h-screen bg-muted/20">
|
||||||
<div className="max-w-3xl mx-auto p-6 md:p-8 pb-24">
|
<div className="max-w-3xl mx-auto p-6 md:p-8 pb-24">
|
||||||
<div className="flex items-center gap-2 mb-1"><GraduationCap className="h-6 w-6 text-primary" /><h1 className="text-2xl font-semibold">Student intake</h1></div>
|
<img src="/bayside-logo.png" alt="Bayside Academy" className="h-10 w-auto mb-3" />
|
||||||
|
<h1 className="text-2xl font-semibold">Student intake</h1>
|
||||||
<p className="text-muted-foreground text-sm mb-6">For <span className="font-medium">{info.firstName} {info.lastName}</span> — Bayside Academy. Please complete and submit.</p>
|
<p className="text-muted-foreground text-sm mb-6">For <span className="font-medium">{info.firstName} {info.lastName}</span> — Bayside Academy. Please complete and submit.</p>
|
||||||
|
|
||||||
<form onSubmit={(e) => { e.preventDefault(); submit.mutate(); }} className="space-y-5">
|
<form onSubmit={(e) => { e.preventDefault(); submit.mutate(); }} className="space-y-5">
|
||||||
|
|||||||
+6
-6
@@ -69,7 +69,7 @@
|
|||||||
--card-foreground: oklch(0.129 0.042 264.695);
|
--card-foreground: oklch(0.129 0.042 264.695);
|
||||||
--popover: oklch(1 0 0);
|
--popover: oklch(1 0 0);
|
||||||
--popover-foreground: oklch(0.129 0.042 264.695);
|
--popover-foreground: oklch(0.129 0.042 264.695);
|
||||||
--primary: oklch(0.208 0.042 265.755);
|
--primary: oklch(0.31 0.086 252.1); /* Bayside navy #06315a */
|
||||||
--primary-foreground: oklch(0.984 0.003 247.858);
|
--primary-foreground: oklch(0.984 0.003 247.858);
|
||||||
--secondary: oklch(0.968 0.007 247.896);
|
--secondary: oklch(0.968 0.007 247.896);
|
||||||
--secondary-foreground: oklch(0.208 0.042 265.755);
|
--secondary-foreground: oklch(0.208 0.042 265.755);
|
||||||
@@ -81,7 +81,7 @@
|
|||||||
--destructive-foreground: oklch(0.984 0.003 247.858);
|
--destructive-foreground: oklch(0.984 0.003 247.858);
|
||||||
--border: oklch(0.929 0.013 255.508);
|
--border: oklch(0.929 0.013 255.508);
|
||||||
--input: oklch(0.929 0.013 255.508);
|
--input: oklch(0.929 0.013 255.508);
|
||||||
--ring: oklch(0.704 0.04 256.788);
|
--ring: oklch(0.515 0.109 249.1);
|
||||||
--chart-1: oklch(0.646 0.222 41.116);
|
--chart-1: oklch(0.646 0.222 41.116);
|
||||||
--chart-2: oklch(0.6 0.118 184.704);
|
--chart-2: oklch(0.6 0.118 184.704);
|
||||||
--chart-3: oklch(0.398 0.07 227.392);
|
--chart-3: oklch(0.398 0.07 227.392);
|
||||||
@@ -89,7 +89,7 @@
|
|||||||
--chart-5: oklch(0.769 0.188 70.08);
|
--chart-5: oklch(0.769 0.188 70.08);
|
||||||
--sidebar: oklch(0.984 0.003 247.858);
|
--sidebar: oklch(0.984 0.003 247.858);
|
||||||
--sidebar-foreground: oklch(0.129 0.042 264.695);
|
--sidebar-foreground: oklch(0.129 0.042 264.695);
|
||||||
--sidebar-primary: oklch(0.208 0.042 265.755);
|
--sidebar-primary: oklch(0.31 0.086 252.1); /* Bayside navy */
|
||||||
--sidebar-primary-foreground: oklch(0.984 0.003 247.858);
|
--sidebar-primary-foreground: oklch(0.984 0.003 247.858);
|
||||||
--sidebar-accent: oklch(0.968 0.007 247.896);
|
--sidebar-accent: oklch(0.968 0.007 247.896);
|
||||||
--sidebar-accent-foreground: oklch(0.208 0.042 265.755);
|
--sidebar-accent-foreground: oklch(0.208 0.042 265.755);
|
||||||
@@ -104,8 +104,8 @@
|
|||||||
--card-foreground: oklch(0.984 0.003 247.858);
|
--card-foreground: oklch(0.984 0.003 247.858);
|
||||||
--popover: oklch(0.208 0.042 265.755);
|
--popover: oklch(0.208 0.042 265.755);
|
||||||
--popover-foreground: oklch(0.984 0.003 247.858);
|
--popover-foreground: oklch(0.984 0.003 247.858);
|
||||||
--primary: oklch(0.929 0.013 255.508);
|
--primary: oklch(0.515 0.109 249.1); /* Bayside navy (lighter for dark bg) */
|
||||||
--primary-foreground: oklch(0.208 0.042 265.755);
|
--primary-foreground: oklch(0.984 0.003 247.858);
|
||||||
--secondary: oklch(0.279 0.041 260.031);
|
--secondary: oklch(0.279 0.041 260.031);
|
||||||
--secondary-foreground: oklch(0.984 0.003 247.858);
|
--secondary-foreground: oklch(0.984 0.003 247.858);
|
||||||
--muted: oklch(0.279 0.041 260.031);
|
--muted: oklch(0.279 0.041 260.031);
|
||||||
@@ -124,7 +124,7 @@
|
|||||||
--chart-5: oklch(0.645 0.246 16.439);
|
--chart-5: oklch(0.645 0.246 16.439);
|
||||||
--sidebar: oklch(0.208 0.042 265.755);
|
--sidebar: oklch(0.208 0.042 265.755);
|
||||||
--sidebar-foreground: oklch(0.984 0.003 247.858);
|
--sidebar-foreground: oklch(0.984 0.003 247.858);
|
||||||
--sidebar-primary: oklch(0.488 0.243 264.376);
|
--sidebar-primary: oklch(0.515 0.109 249.1); /* Bayside navy */
|
||||||
--sidebar-primary-foreground: oklch(0.984 0.003 247.858);
|
--sidebar-primary-foreground: oklch(0.984 0.003 247.858);
|
||||||
--sidebar-accent: oklch(0.279 0.041 260.031);
|
--sidebar-accent: oklch(0.279 0.041 260.031);
|
||||||
--sidebar-accent-foreground: oklch(0.984 0.003 247.858);
|
--sidebar-accent-foreground: oklch(0.984 0.003 247.858);
|
||||||
|
|||||||
Reference in New Issue
Block a user