Refactoring & Styling

[uxbyweng]

Description

Implement the important UI refinements across the Form, Login/Profile, and Quiz sections.

• Form: Add a sample question as the placeholder text
• Login / Profile: Show a default avatar when the user is logged out
• Logged out: Gray out and disable add-cards in navbar
• Quiz: Update the styling of the statistics section on the end screen so everything fits within the viewport

Acceptance criteria

• The form displays a meaningful sample question in the placeholder
• A default avatar is visible in the logged-out state
• The statistics section on the quiz end screen is fully visible within the viewport without content being cut off
• If user is logged out, the add-cards link in the navbar is disabled and grayed out

Tasks

[ ] Form:

• Add a sample question as the placeholder text
  [ ] Login / Logged out / Profile:
• Show a default avatar when the user is logged out
• Disabled and gray out add-card link in navbar when logged out (useSession)
  [ ] For the Quiz endpage statistic:
• set font-size of the ul to -> 14px
• set padding of the ul to -> 0 10px
• set margin of the ul to -> 10px 0 0 0