Update DUP admin UI with token library updates

[Dianadec]

Description:

Updating DUP admin to match the figma that has the admin library tokens applied. NOTE: this one will likely be iceboxed until we decide how to move forward with DUP in general.

Acceptance Criteria:

DUP UI matches figma and uses the colours, fonts, sizes and styling from the Design Token Library

Development Checklist:

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

Dependencies

• Blocked by #468
• Blocking

Relevant documentation as reference

Tokens overview Token glossary DUP 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: