[L] Update AR admin UI, tokens and admin library

[Dianadec]

Description:

Updating A&R admin to match the figma that has the admin library and tokens applied.

Acceptance Criteria:

Attendance and Revenue UI matches figma and uses the colours, fonts, sizes and styling from the Admin Library

Development Checklist:

• [ ] Updated Bootstrap library is imported
• [ ] Components are updated to use bootstrap standard where possible
• [ ] UI matches A&R Figma

Dependencies

• Blocked by #468, #315
• Blocking

Relevant documentation as reference

Tokens overview Token glossary A&R Figma

Definition of Ready

• [ ] Acceptance criteria are included
• [ ] Wireframes are included (if applicable)
• [ ] Design / Solution is accepted by Product Owner (if applicable)
• [ ] Dependencies are identified (technical, business, regulatory/policy)
• [ ] Story has been estimated (under 13 pts)

Definition of Done

• In progress:
  • [ ] Acceptance criteria are tested (Functionality meets the acceptance criteria defined in the ticket)
  • [ ] UI meets accessibility requirements
  • [ ] Unit tests are written
  • [ ] Work is traceable in GitHub
  • [ ] PR linked to ticket number
  • [ ] If needed/required - Dev adds flag/label to highlight any migration steps necessary prior to PROD deployment
• Code review:
  • [ ] Code is peer reviewed and has passed CI/CD tests
• QA:
  • [ ] Acceptance criteria are tested (Functionality meets the acceptance criteria defined in the ticket)
  • [ ] Code is potentially shippable to the production environment
  • [ ] Functional features have been tested and passed by QA
  • [ ] UI components tested by designer
  • [ ] Code is deployed to PROD when moved to 'done' column (unless requested otherwise by PO)
• PO Review:
  • [ ] Acceptance criteria are tested (Functionality meets the acceptance criteria defined in the ticket)
  • [ ] Reviewed and approved by Product Owner

Notes:

[meredithom]

Only colours, fonts, sizes and styling updated, components will need to be updated as necessary after the figma library is updated #315

[meredithom]

Looks good, a few things to check/fix before it goes to prod:

• Breadcrumb background is missing. Should match Admin Library Figma:

• Accordions have a header colour when expanded now, should be removed if possible

• Info icons are too large on the input forms pages, the text and icon should be the same colour (secondary text: #474543)

• Form padding and spacing is off, for now only the colours should be updated

• The tabs on the export page are missing borders, should look like:

[manuji]

Tested on TEST: Failed

• The Export report page still missing the borders.
• Verified that the rest of the issues are now fixed.

[manuji]

Tested on TEST: Passed

• Verified that this issue has been fixed. Thanks @danieltruong .
• Passing to PO review.

[meyerdarcie]

Moving to done.