Fix target UI to match Figma

[latin-panda]

Describe:
The design should match Figma (original work), and the documentation should be updated.

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 align icons when text next to it is long or short
• Should have a distinctive background color from the page's background
• Should have radius in corners.
• 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.
• Once merged, backport commit from master to 4.5.x

[latin-panda]

@n-orlowski @Benmuiruri

• 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 should be aligned top in relation to the text.
• The gray color for the card seems to be #f8f8f8, we need to add a new variable.
• The border-radius is 8px
• The small text is aligned to the progress-bar, and has a margin: 7px for the top and 18px for the bottom.

[Benmuiruri]

The following tasks have been completed by #8687

• Consistent margins in responsive design (small phones (360 x 670), regular phones, small desktops (10"), and regular desktops (15"))
• Icons aligned when text next to it is long or short
• Updated Target card background color
• Updated Target card border radius to 8px
• Aligned the small texts (goals)
• Verified the target page matches the Figma design when having different device sizes.
• Updated documentation's screens, link CHT Docs PR.

[Benmuiruri]

Closed with #8687