[STU-163] Tailwind v4 + shadcn/ui redesign with singular login

[BAWES]

Summary

• Migrated landing page (page.tsx) to Tailwind v4 utility classes, shadcn/ui components (Button, Card/CardContent), and lucide-react icons
• Migrated login page (login/page.tsx) to Tailwind v4 layout with two-column design and responsive role notes grid
• Migrated LoginForm component to use shadcn/ui Input and Button with lucide-react LogIn icon
• Removed per-role login routes (/login/[role]) and all intent/hint/loginHints code — singular login per board directive
• Updated portalContent.ts hrefs to point to /login
• Removed 236 dead CSS rule blocks (~900 lines) and fixed exposed syntax error
• Zero TypeScript errors, clean production build

Test plan

• Verify landing page renders correctly (hero, portal grid, benefits section)
• Verify login page renders with unified form and role notes
• Verify form validation works (email/password required)
• Verify /login/candidate etc. returns 404 (per-role routes removed)
• Run npm run test:all

Closes STU-163

Co-Authored-By: Claude Sonnet 4.6 noreply@anthropic.com

Summary by CodeRabbit

• New Features

  • Icon-based account type notes on the login page and a new Label UI control for forms.

• Improvements

  • Unified login flow with simplified intent handling and a streamlined account selection UI.
  • Redesigned landing page with updated icons, card-based portals, and refreshed Tailwind styling.
  • Increased button sizes and improved input/button accessibility and visuals.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
studenthub-next	Error		May 21, 2026 10:39pm

[coderabbitai]

Caution

Review failed

Pull request was closed or merged during review

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 17f8a2b0-0a34-4c9f-8bd4-b79565a1b911

📥 Commits

Reviewing files that changed from the base of the PR and between e8b2a07 and e0d9aa4.

📒 Files selected for processing (3)

• src/app/page.tsx
• src/components/ui/label.tsx
• src/modules/auth/LoginForm.tsx

---

Walkthrough

Removes intent-driven, role-specific routing and hinting from login, replaces it with static role notes and lucide icons, refactors LoginForm to shared UI primitives, modernizes the landing page to Tailwind + icon components, and deletes large legacy landing/login CSS blocks.

Changes

Login and Landing Page Modernization

Layer / File(s)	Summary
Login searchParams contract and intent removal src/app/login/page.tsx	LoginPage signature is narrowed to accept only error in searchParams; prior intent parameter and hint computation logic are removed.
Login page role notes redesign with lucide icons src/app/login/page.tsx	Lucide-react role icons are imported and a static roleNotes array replaces intent-based hint derivation. JSX layout converts to explicit Tailwind classes, and the account detection section maps over roleNotes to render styled role cards with icons.
LoginForm component refactoring and account chooser redesign src/modules/auth/LoginForm.tsx, src/components/ui/label.tsx	LoginForm removes the hint prop and adopts shared Button/Input/Label components with LogIn icon and pending-state styling. VerifiedAccountChooser renders verified accounts as outline Button-based submit forms displaying name and email. Adds Label component used by forms.
Landing page portal icons and component modernization src/app/page.tsx	Portal icons transition from emoji strings to lucide-react components via a typed portalIcons map. Navigation section converts to sticky Tailwind layout. Portal grid wraps each role in Card/CardContent with icon and updated hover effects.
Landing page hero and benefits section layout redesign src/app/page.tsx	Hero section layout and copy are reworked from class-based to Tailwind grid-based structure with updated decorative content. Benefits section replaces plain text with a Tailwind grid of UI Card components.
CSS cleanup and button height standardization src/app/styles.css	Legacy landing/login CSS classes (.landingShell, .loginPanel, .unifiedLoginShell, etc.) and responsive overrides supporting prior intent/role-chooser layouts are removed. Button minimum heights are standardized to 44px; targeted styles for .lockedRole span and .portalChooserHero are retained.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

• BAWES/studenthub-codex#39: Adjusts src/app/page.tsx portal icons typing and related ops rendering logic overlapping the landing page icon/component changes.
• BAWES/studenthub-codex#36: Modifies the landing page portalIcons mapping and benefits rendering, overlapping layout and icon work.
• BAWES/studenthub-codex#4: Related Tailwind/PostCSS setup changes that connect to the PR’s large CSS-to-Tailwind migration.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main changes: Tailwind v4 migration with shadcn/ui components and a unified login approach.
Description check	✅ Passed	The description includes a comprehensive summary of changes, test plan, and references the issue. However, several required checklist items are unchecked and some optional sections are incomplete.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feature/STU-163-tailwind-redesign

⚔️ Resolve merge conflicts

• Resolve merge conflict in branch feature/STU-163-tailwind-redesign

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[vercel]

Deployment failed with the following error:

Resource is limited - try again in 24 hours (more than 100, code: "api-deployments-free-per-day").

Learn More: https://vercel.com/khalid-proj?upgradeToPro=build-rate-limit

[BAWES]

Staff Engineer Review — APPROVE WITH REBASE NOTE

Well-executed redesign. ~900 lines of dead CSS removed, replaced with Tailwind v4 utility classes and shadcn/ui components. The singular login simplification is clean and correct.

What's good

• CSS reduction: 236 dead rule blocks (~900 lines) removed from styles.css. The remaining CSS is now concentrated on workspace/OS components that haven't been migrated yet.
• Component adoption: shadcn/ui Button, Input, Card, CardContent, and Label used consistently across landing, login, and LoginForm.
• Singular login: Removing login/[role]/page.tsx, loginHints, isRole import, and hint prop from LoginForm — all correct. portalContent.ts already points all hrefs to /login.
• Accessibility: min-height: 40px → 44px on buttons, htmlFor/id pairing on form labels, aria-labels preserved.
• Dark mode: The [data-theme="dark"] gradient overrides at the bottom of styles.css remain intact — dark mode should still work.
• Responsive: max-sm:, max-lg: breakpoint variants cover the existing @media (max-width: 680px) and @media (max-width: 1040px) breakpoints from the old CSS.

Minor notes (non-blocking)

1. Label component (src/components/ui/label.tsx): This is a simplified version without forwardRef or @radix-ui/react-label. It follows the same pattern as the existing Button and Input components (custom, lighter than full shadcn/ui radix wrappers). Consistent with project conventions — no issue.

2. Decorative hero stage (page.tsx line ~320): Still uses index === 1 ? "PDF" : "Live". This is a decorative mockup, not data-driven, so it's low risk. However, PR #39 fixes this pattern in the same file. Rebase note below.

Rebase required before merge

PR #39 changes the same file (src/app/page.tsx) — specifically the portalIcons typing and the index-based rendering logic. Merge order: #39 → rebase #41. After rebase, verify:

• The lucide-react portalIcons typing (Record<(typeof portalRoles)[number], React.ComponentType<{ className?: string }>>) is preserved
• The {label, status} pattern from #39 is carried into the decorative stage section

Verification

• CI: all green ✓
• Branch naming: feature/STU-163-* ✓
• Commits: 2, both conventional ✓

[BAWES]

Rebased onto main (which now includes the squashed STU-176 fix from PR #39).

Changes during rebase:

• Resolved conflict in src/app/page.tsx: kept lucide-react portalIcons, merged {label, status} pattern into the decorative hero stage (commit e0d9aa4)
• STU-186 commit from main already included the Label component migration (equivalent to the now-dropped e8b2a07 commit)

CI gate run locally: tsc + build pass.