/manage/people Radio Button Group UI Refactoring

Problem

The radio button group at /manage/people does not match the Figma design.

Expected Design

When not selected:
When selected (multiple options available):

Current Design

{234C575F-DA3B-441A-88AB-16D28F917ED3}

Current Code

<div className="flex items-center gap-4">
  <label className="font-mono uppercase" htmlFor="select-all">
    <input
      type="radio"
      name="options"
      value="option1"
      className="mr-2"
    />
    Select All
  </label>
  <label className="font-mono uppercase" htmlFor="inactive">
    <input
      type="radio"
      name="options"
      value="option2"
      className="mr-2"
    />
    Inactive
  </label>
</div>

Instructions

Pull the latest changes from the develop branch.
Start the server with npm run dev (navigate to src/ and run npm ci if needed), then visit localhost:3000/manage/people.
Edit the code in manage/people/page.tsx. Try styling the <input type="radio" /> components. If that doesn't work, create a custom radio button group using a <button /> alongside a <label />.
Submit a pull request and tag @dangminhduc1101 for review.

Notes

Since this involves CSS styling, please add a comment explaining any specific CSS/Tailwind changes you made. This task may be a bit challenging, so if you run into issues, leave a comment detailing what you've tried and tag @dangminhduc1101 for help.

SFU-Blueprint / Pedals

/manage/people Radio Button Group UI Refactoring #50