Merge pull request #118 from Sea-Haven-Industries/feat/sh-245-login-parity

fix(login): design parity — official logo, h1 welcome heading, label colour (SH-245)

src/app/(auth)/_components/auth-brand-logo.tsx

@@ -0,0 +1,25 @@
+import { useState } from "react";
+
+import { BrandLockup } from "@/components/common/brand-lockup";
+import { cn } from "@/lib/utils";
+
+export type AuthBrandLogoProps = {
+  className?: string;
+};
+
+export function AuthBrandLogo({ className }: AuthBrandLogoProps) {
+  const [useFallback, setUseFallback] = useState(false);
+
+  if (useFallback) {
+    return <BrandLockup className={className} />;
+  }
+
+  return (
+    <img
+      src="/seahaven-logo.svg"
+      alt="Seahaven"
+      onError={() => setUseFallback(true)}
+      className={cn("mx-auto block h-10 w-auto", className)}
+    />
+  );
+}

src/app/(auth)/_components/auth-card-header.tsx

@@ -11,14 +11,17 @@ export type AuthCardHeaderProps = ComponentPropsWithoutRef<"div"> & {
 export function AuthCardHeader({ title, subtitle, className, ...props }: AuthCardHeaderProps) {
   return (
     <div className={cn(className)} {...props}>
-      <Text variant="title" className="m-0 text-center font-bold text-foreground">
+      <Text
+        variant="display"
+        className="m-0 text-center !font-bold ![font-size:var(--text-xl)] !leading-[1.5] text-foreground"
+      >
         {title}
       </Text>
       <Text
         variant="description"
         tone="muted"
         when={Boolean(subtitle)}
-        className="mb-6! mt-1.5! text-center font-normal"
+        className="mb-6! mt-1.5! text-center font-normal ![font-size:var(--text-base)]"
       >
         {subtitle}
       </Text>

src/app/(auth)/login.tsx

@@ -1,10 +1,10 @@
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 
+import { AuthBrandLogo } from "@/app/(auth)/_components/auth-brand-logo";
 import { AuthCardHeader } from "@/app/(auth)/_components/auth-card-header";
 import { AuthPageShell } from "@/app/(auth)/_components/auth-page-shell";
 import { LoginForm } from "@/app/(auth)/_components/login-form";
-import { BrandLockup } from "@/components/common/brand-lockup";
 import { Text } from "@/components/ui/text";
 import { loginSchema, type LoginFormValues } from "@/domain/auth/schemas/login-schema";
 import { useAuthContext } from "@/providers/auth-context";
@@ -27,7 +27,7 @@ export default function LoginPage() {
 
   return (
     <AuthPageShell>
-      <BrandLockup className="mb-8" />
+      <AuthBrandLogo className="mb-8" />
       <AuthCardHeader title="Welcome back" subtitle="Sign in to your account" />
       <LoginForm
         register={register}

src/components/ui/form-field.tsx

@@ -18,7 +18,7 @@ type FormFieldProps = FormControlProps & {
 
 const appearanceClassName: Record<FormFieldAppearance, string> = {
   default: "gap-1",
-  auth: "gap-1.5 [&_.MuiFormLabel-root]:mb-0 [&_.MuiFormLabel-root]:!font-sans [&_.MuiFormLabel-root]:![font-size:var(--text-base-sm)] [&_.MuiFormLabel-root]:!font-medium [&_.MuiFormLabel-root]:!leading-[1.5] [&_.MuiFormLabel-root]:!normal-case [&_.MuiFormLabel-root]:!tracking-normal",
+  auth: "gap-1.5 [&_.MuiFormLabel-root]:mb-0 [&_.MuiFormLabel-root]:!font-sans [&_.MuiFormLabel-root]:![font-size:var(--text-base-sm)] [&_.MuiFormLabel-root]:!font-medium [&_.MuiFormLabel-root]:!leading-[1.5] [&_.MuiFormLabel-root]:!normal-case [&_.MuiFormLabel-root]:!text-foreground [&_.MuiFormLabel-root]:!tracking-normal",
 };
 
 const appearanceLabelClassName: Record<FormFieldAppearance, string> = {