chore: update targets page images

[Benmuiruri]

Description

Update images in Targets page to showcase new material design cards

Old

New

License

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

[andrablaj]

Thanks @Benmuiruri! Are the old screenshots used somewhere? If not, I recommend deleting them.

As I don't have the context of the target changes, I will also add @michaelkohn as a reviewer to confirm the screenshots are what we expect them to be on this page.

[Benmuiruri]

@andrablaj I don't think they are being referenced anywhere else. I will delete them. Thanks for adding Michael

[michaelkohn]

Here are some other places we'll probably need to update as well

• https://docs.communityhealthtoolkit.org/apps/features/targets/#count-widgets
• https://docs.communityhealthtoolkit.org/apps/features/targets/#percent-widgets
• https://docs.communityhealthtoolkit.org/apps/reference/targets/
• https://docs.communityhealthtoolkit.org/design/best-practices/#targets

And maybe this one... though I'm less concerned with it

• https://docs.communityhealthtoolkit.org/apps/tutorials/targets/

[michaelkohn]

Oops, one more (for @n-orlowski ) .... we should update https://www.figma.com/file/Zl8TNPi7iNF0t5k0ZxSeId/Medic-Library?type=design&node-id=0-5430&mode=design as well

[andrablaj]

@Benmuiruri I removed myself as a reviewer and added @n-orlowski instead, as she has more knowledge about the design of the targets. It looks good to me, but I can't approve as I don't know the details of the targets change.

[Benmuiruri]

Thanks @andrablaj I was not sure who to ask the review from 😄

[n-orlowski]

@Benmuiruri these looks great! Could we keep the same aspect ratio for the images so they're consistent with the other pages? (Mobile 640x1100 / Desktop 1440x1024)

[Benmuiruri]

Hi @n-orlowski I have updated the images with the requested resolutions. I opened the screenshots using Preview and adjusted the size. However, I must say the targets-desktop image looks "off". Kindly confirm whether thats how it should look. Thank you.

Also, the targets-mobile does not have the bottom navigation mock up like the existing image, any suggestions a tool that can allow me to do that ?

[Benmuiruri]

Hi @michaelkohn.

This is ready for a review.

[michaelkohn]

Thanks @Benmuiruri ! For some reason it looks like some of the images are squished (as you mentioned), not a lot, but noticeable enough. Can you change the size of the actual screen you are taking a screenshot of (rather than resizing the screenshot).

Mobile looks fine but desktop looks squished horizontally

Count widgets look fine but % widgets look squished vertically

[michaelkohn]

(though to be clear, i wouldn't want this to hold up the release of 4.5.0)

[Benmuiruri]

Hi @michaelkohn , I updated the three images.

[michaelkohn]

Looks good to me! SHIPPPPPIIITTT