mosaic/stack
1
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases 2 Wiki Activity

style(ui): refine login card shape and divider spacing #439

Merged
jason.woltje merged 1 commits from fix/login-form-tweaks into main 2026-02-22 06:19:24 +00:00
Conversation 0 Commits 1 Files Changed 2 +5 -5
2 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/web/src/app/(auth)/login/page.test.tsx
View File

@@ -491,8 +491,8 @@ describe("LoginPage", (): void => {
expect(screen.getByLabelText(/email/i)).toBeInTheDocument();
});
// AuthCard uses rounded-2xl and p-6 sm:p-10
const card = container.querySelector(".rounded-2xl");
// AuthCard uses rounded-b-2xl and p-6 sm:p-10
const card = container.querySelector(".rounded-b-2xl");
expect(card).toHaveClass("p-6", "sm:p-10");
});

6
packages/ui/src/components/AuthSurface.tsx
View File

@@ -58,14 +58,14 @@ export function AuthCard({ children, className, ...props }: AuthCardProps): Reac
return (
<div
className={joinClassNames(
"relative w-full rounded-2xl border border-[#b8c4de] bg-[#dde4f2]/90 p-6 shadow-[0_30px_70px_rgba(15,20,29,0.24)] backdrop-blur-sm sm:p-10 dark:border-[#2f3b52] dark:bg-[#1b2331]/[0.92] dark:shadow-[0_32px_80px_rgba(0,0,0,0.52)]",
"relative w-full overflow-hidden rounded-b-2xl border border-[#b8c4de] bg-[#dde4f2]/90 p-6 shadow-[0_30px_70px_rgba(15,20,29,0.24)] backdrop-blur-sm sm:p-10 dark:border-[#2f3b52] dark:bg-[#1b2331]/[0.92] dark:shadow-[0_32px_80px_rgba(0,0,0,0.52)]",
className
)}
{...props}
>
<div
aria-hidden="true"
className="pointer-events-none absolute inset-x-0 top-0 h-0.5 rounded-t-2xl bg-[linear-gradient(90deg,#2f80ff,#8b5cf6,#14b8a6,#f59e0b)]"
className="pointer-events-none absolute inset-x-0 top-0 h-0.5 bg-[linear-gradient(90deg,#2f80ff,#8b5cf6,#14b8a6,#f59e0b)]"
/>
{children}
</div>
@@ -153,7 +153,7 @@ export function AuthDivider({
return (
<div
className={joinClassNames(
"my-5 flex items-center gap-3 text-[0.67rem] font-semibold uppercase tracking-[0.08em] text-[#5a6a87] dark:text-[#8f9db7]",
"my-8 flex items-center gap-3 text-[0.67rem] font-semibold uppercase tracking-[0.08em] text-[#5a6a87] dark:text-[#8f9db7]",
className
)}
>