fix(web): align login page with dashboard design system

[ajulaybeeb]

Summary

• Restyled apps/web/src/app/login/page.tsx to align with the design language used across /dashboard and /verify.
• Replaced undeclared semantic tokens and rounded-* classes with PageContainer, bg-grid, translucent backdrop blur panels, sharp corners, slate/emerald palettes, uppercase tracking-widest typography, and consistent error alert styling.
• Added unit tests in apps/web/src/app/login/login-page.test.tsx ensuring design system compliance and preventing token regressions.

Why

• The login page was previously built using an isolated set of semantic tokens (bg-card, text-muted-foreground, bg-primary, text-destructive, bg-secondary, text-primary-foreground, rounded-lg, etc.).
• Token Investigation: These tokens were not defined in the project's Tailwind config or @theme in globals.css. They resolved to nothing, meaning the page suffered from unstyled fallback rendering bugs.
• Furthermore, the lack of PageContainer and bg-grid created an abrupt visual disconnect when transitioning from login into the dashboard.

Implementation

• apps/web/src/app/login/page.tsx:
  • Wrapped page in PageContainer width="narrow" with bg-grid background.
  • Implemented the standard translucent blurred panel (bg-white/50 dark:bg-white/5 backdrop-blur-2xl) with sharp edges and subtle emerald glow.
  • Aligned typography with display headings and tracking-[0.25em] text-emerald-600 dark:text-emerald-400 font-bold text-xs uppercase category kicker.
  • Updated error state to match the app's established error alert banner (border-red-200 dark:border-red-500/20 bg-red-50 dark:bg-[#0a111a] text-red-600 dark:text-red-400).
  • Updated wallet connection CTA button to the standard emerald uppercase action button with aria-busy and loading spinner state.
  • Kept all Freighter authentication, challenge-signing, and verification logic intact.
• apps/web/src/app/login/login-page.test.tsx:
  • Added unit tests verifying presence of design system classes and absence of undeclared tokens or rounded-* styles.

Testing

• pnpm format:check (All matched files use Prettier code style)
• pnpm --filter web lint (0 errors)
• pnpm --filter web typecheck (0 errors)
• pnpm --filter web test (20 test files, 250 passed)
• pnpm --filter web build (Next.js production build completed successfully)

Scope / Risk

• Scope: Presentation only for apps/web/src/app/login/page.tsx and accompanying test suite.
• Risk: None; authentication flow and API communication remain identical.

Issue

Closes #197

[vercel]

@ajulaybeeb is attempting to deploy a commit to the ACCENSA Team on Vercel.

A member of the Team first needs to authorize it.

[drips-wave]

@ajulaybeeb Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

[mergekeeper]

MergeKeeper review

Scope: in scope for linked issue #197.
Verdict: clean

The pull request successfully aligns the login page with the dashboard design system, removes undeclared tokens, updates the UI correctly, and includes appropriate tests.

Reviewed commit: 6c524604f4e774e1a8d473b33f028321ed26cba7.
CI and merge eligibility are checked separately.

[mergekeeper]

Approved

The pull request successfully aligns the login page with the dashboard design system, removes undeclared tokens, updates the UI correctly, and includes appropriate tests.

[mergekeeper]

Merged

Merged with squash.