fix(#8686): update target UI to match figma

[Benmuiruri]

Description

Update Target Page CSS to meet match Figma design

#8686

Code review checklist

• Readable: Concise, well named, follows the style guide, documented if necessary.
• Documented: Configuration and user documentation on cht-docs
• Tested: Unit and/or e2e where appropriate
• Internationalised: All user facing text
• Backwards compatible: Works with existing data and configuration or includes a migration. Any breaking changes documented in the release notes.

Compose URLs

If Build CI hasn't passed, these may 404:

• Core
• CouchDB Single
• CouchDB Cluster

License

The software is provided under AGPL-3.0. Contributions to this project are accepted under the same license.

[Benmuiruri]

Hi @latin-panda as you check out this draft PR, one change that is proving challenging to reproduce exactly is aligning the icon to the text.

1. The icons in the figma design have different measurements yet in the code we have fixed measurements
2. The icons in the cards with a h2 that spans 2 lines are not perfectly aligned. I am not yet sure how to target such h2's because they are coming in from <h2 *ngIf="target.translation_key">{{ target.translation_key | translate }}</h2>. It's hard to style not knowing what the value of the translation key will be. Will be 1 line, 2 line, 3 lines ?

Let me know your thoughts on it.

What I have done so far

Tasks to complete this work:

• Should keep margins in responsive design (small phones (360 x 670), regular phones, small desktops (10"), and regular desktops (15"))
• Should have a distinctive background color from the page's background
• Should have radius in corners.
• Should align icons when text next to it is long or short - (Partially)

What's left

• Should align the small texts (goals)
• Verify the target page matches the Figma design when having different device sizes. Attach test evidence in the PR.
• Update documentation's screens, link CHT Docs PR here.

[Benmuiruri]

Fixes done so far

• The margin around the card and other elements is 10px (top and bottom), 12px (left and right). The cards should keep that margin as they extend horizontally (width)

• The icon is aligned top in relation to the text. For both titles that span 1 line and titles that span 2 lines

• Added a new grey variable and updated the target card background color from #F2F2F2 to #F8F8F8
• Updated border-radius to 8px from 10px

• The small text is aligned to the progress-bar. It is center aligned unless the goal is completed and in that case it is right aligned.
• Added margin below the calculation (100% 1 of 1)
• Updated the font weight from bold to normal

The one card I was not able to reproduce is this one below. I am not sure which kind of object I should add to target.js to achieve that. Perhaps @latin-panda you could help with this one.

@n-orlowski This is ready for your review incase something is not pixel-perfect based on the Figma design. Any tips on how to see the actual pixel count between elements ? For instance, how can I tell the padding value around the inner rectangle from the outer one ?

[n-orlowski]

Thanks Ben, these look great! A few comments:

Goal 0 should be 20px from top and right corner
The padding under This month should be 20px (same as the space above Deaths)

The small text is aligned to the progress-bar. It is center aligned unless the goal is completed and in that case it is right aligned.

If the goal is on the lower end, have the text be left aligned. Also, the progress bar corners should all be rounded (on the right side of the bar it's squared). Lastly, the space above and below in facility and all time should be 20px

I'm not sure if this is a visual illusion but it seems like the space above and below the large numbers are different; there should be 20px on top and bottom

I think that's it! Thanks again for these updates 🙏

[Benmuiruri]

Hi @latin-panda, I have addressed Nicole's requested changes, this PR is ready for a thorough review. If there are any changes required, do you have any tips / tools I can use to see the actual pixel count between elements ? For instance, how can I tell the padding value around the inner rectangle from the outer one ?

Or how can I tell the padding value between the goal and the top of the card should be 20px.

[latin-panda]

Thanks Ben! A couple of feedback. I'm going to run the branch in my local in the meantime.

[latin-panda]

@Benmuiruri please fix the PR title to match the format fix(<ticket>): <title>

[latin-panda]

@ben I left a comment. Also, please mark the completed items from this checklist.
The documentation is a good way to detect bugs

[latin-panda]

Looks good, please update the checklist in this ticket with the completed items.
And once the CI is green, you can do squash and merge. Approving now to unblock

[Benmuiruri]

Hi @garethbowen and @1yuv this PR has been completed, tested, and approved. It's ready to be merged once the CI build passes.

[latin-panda]

@Benmuiruri The fix for e2e has been merged, please update this PR with the latest from the main branch. Thanks!