[XS] DUP -> UI Icon/Text alignment fix on specific messaging pages

[Dianadec]

Description:

As a next step from #345 , this ticket is to tidy up some of the alignment seen on the facility-specific messaging pages. See thread for info: https://github.com/bcgov/parks-reso-public/issues/345#issuecomment-2274086180

UI issues surfaced by Manuji:

• Missing the horizontal white line separating the BCParks logo and the footer links.
• The space between the vertical line dividing the two left and right sections and the right side content is not as per the figma.
• All the fontAwesome icons are not exactly 36px, I think that's fine as the ticket AC states that should not be more than 36px. @ndelraye please correct me if I am wrong.
• All the heading on right hand side section should have a font size of 20px. (currently on TEST, some have 18px and some have 24px)
• Rest of the copy on right hand side should be updated with the correct font size 20px. (currently 16px on TEST)
• Font colors on the page looks different to what is given on Figma but I am not sure about that.
• Issue when aligning the forntAwesome icon and with the copy if the copy renders on more than one line -> In this case the icon should be aligned with the first line of copy (currently it is center aligned).

Cam's point: Secondly, the way our bootstrap framework is set up (again, nothing to do with icons), we never set any sizes or spacing distances with pixels. It's poor responsive design practice when we want the relative sizes of elements on the screen to adapt to the size of the screen itself. Look at the bootstrap spacing examples to get an idea of how we implement our spacing. Ultimately, the spacing and sizing of elements is rarely fixed in a bootstrap framework, rather, they are adaptive and a function of the dimensions of the screen itself, so to request/enforce any kind of pixel-based sizing restrictions is pointless. The devs have always just taken the closest bootstrap equivalent to the requested pixel size in the past, but they will never be identical.

Acceptance Criteria:

[Note: Use 'Given/When/Then' format if it makes sense to. Otherwise, a simple checklist that can be tested.]

Development Checklist:

• [ ] ...
• [ ] ...
• [ ] ...

Dependencies

• Blocked by
• Blocking

Relevant documentation as reference

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:

[Christopher-walsh22]

I think this ticket will need to be refined before we can proceed with it. I'm happy to take it on but I think there is a few conversations about some of these asks that I at least need some clarity on. Pulling from the list of tasks above:

1) "Missing the horizontal white line separating the BCParks logo and the footer links." - I can see that this line is on the footer for the facility specific messages pages in the figma. But this white line is not in the footer on DEV-TEST-PROD. This isn't a big task to add one into the footer but other recent designs (special closures) have not had this white line on them. Are we adding this line to the footer to appear site wide or is this just on the confirmation page?

2) "The space between the vertical line dividing the two left and right sections and the right side content is not as per the figma." - This is possible but in regards to Cams comment above it is not best practice to be setting exact pixel ammounts so just let me know how much we want to bring in and I can get it done.

3) "All the fontAwesome icons are not exactly 36px, I think that's fine as the ticket AC states that should not be more than 36px. @ndelraye please correct me if I am wrong." - The font awesome logos are relative to the size of the font. With our font currently at 16 these icons in XL format are 24px. The figma specifies for L icons at 36px. If we were to have 36px icons with the current font size they would be more than double the size of the letters which is not the case in the designs.

4) "All the heading on right hand side section should have a font size of 20px." - This must have already been addressed as I am looking on test now and they are all 20px.

5) "Rest of the copy on right hand side should be updated with the correct font size 20px. (currently 16px on TEST)" - Are we updating just these pages to have regular text to be 20px or all pages? With the exception of the "RESERVE A PASS" paragraph on the home page I don't see other text as 20 unless its a heading.

6)"Font colors on the page looks different to what is given on Figma but I am not sure about that." - The colors of the text on these pages is matching the rest of the site. Just need to need to know if I am changing the colors site wide to match the figma, or if this page is going to be different.

7)"Issue when aligning the forntAwesome icon and with the copy if the copy renders on more than one line -> In this case the icon should be aligned with the first line of copy (currently it is center aligned)." - This was also addressed.

Hopefully I can get some clear answers on these and Ill be more than happy to jump into all the fixes. Just unsure of where to start or what we actually need to do :)

@Dianadec @meyerdarcie @manuji @ndelraye

[Christopher-walsh22]

I just had a conversation with @meyerdarcie about this ticket and differences for facility specific confirmation pages. She will plan a conversation with design team to determine what we need to adjust to have the Figma and DUP in sync. Pending that conversation will make a new ticket to address work required. Moving to PO review.

[meyerdarcie]

As per discussion moving this ticket to done - follow up conversation with design team and tickets to be made regarding potential UI changes on DUP and updates to figma.

@Christopher-walsh22 @pavelcreates @Dianadec