Freshers Match Participant Ui

Style Rules

Use layout.pen as the starting direction:

• warm neutral background
• editorial heading feel
• clean touch-friendly cards
• no generic SaaS blue/purple defaults

But improve during implementation:

• tighten spacing where text feels loose
• increase contrast if readability slips
• standardize button heights and card rhythm
• simplify copy where scanning is slow

Component Rules

Put participant-specific components in:

• src/components/participant/*

Likely pieces:

• shell
• status badge
• join form
• home panel
• queue panel
• match reserved panel
• in progress panel
• result approval panel
• result confirmed panel

State-to-UI Rule

UI must be driven by participant.status.

Do not infer UI mode from URL alone. The restored runtime state decides what to render.

Interaction Rules

• disable buttons while requests are in flight
• show clear pending text for asynchronous actions
• do not allow client-side state to outrun server-confirmed state
• result approval and rejection must be visually distinct

Definition of Done

A participant UI task is not done until:

1. it works on narrow mobile widths
2. the primary action is obvious
3. the server state can refresh into the same screen
4. copy matches the current state exactly