Make checkbox bigger and fix mobile view

Dianadec commented 6 months ago

Description:

The checkbox on the Contact Information page is quite small and should be made bigger to 44x44 to improve accessibility. The mobile view also needs to be checked/adjusted for overlapping with text.

https://www.figma.com/file/2lQW8InOa0lEiUiMeGmeNC/Day-Use-Pass?type=design&node-id=3980%3A18613&mode=design&t=rRuWQGWHaOC5p2HU-1

Acceptance Criteria:

[x] Increase checkbox size to 44x44 - see wireframe notes for design confirmation
[x] Fix mobile view so that the checkbox does not overlap with text.

Development Checklist:

[ ] ...
[ ] ...
[ ] ...

Dependencies

Blocked by
Blocking

Relevant documentation as reference

Definition of Ready

[x] Acceptance criteria are included
[x] Wireframes are included (if applicable)
[x] 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:
- [x] Acceptance criteria are tested (Functionality meets the acceptance criteria defined in the ticket)
- [x] UI meets accessibility requirements
- [ ] Unit tests are written
- [x] Work is traceable in GitHub
- [x] 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