BCDA-2942: Standardize images in static site using style guide

[lianilychee]

Fixes BCDA-2942

This PR addresses the remaining 20 images in the sbx and prod non-technical guides that have the following inconsistent features:

• Widths,
• Resolution,
• Swagger text sizing,
• Annotation text sizing and colors, and
• Annotation design elements sizing and colors.

Proposed Changes

• Standardize the above features, and
• Change imagery from PNG to SVG format

Change Details

See above section.

Security Implications

No PII / PHI is changed.

• new software dependencies
• security controls or supporting software altered
• new data stored or transmitted
• security checklist is completed for this change
• requires more information or team discussion to evaluate security implications

Acceptance Validation

Tested locally.

Poor image:

Replacement image:

Feedback Requested

Review the non-technical guides for sbx and prod, and verifythat:

• There are 25 images in each page rendering,
• All imagery is crystal clear (no fuzziness), and
• All text -- incl. Swagger text but esp. annotation text -- is readable.

[msnook]

This looks great to me, aside from the minor typo. The images are much nicer and more consistent. May I request that @Dave-Sukharan pull down this branch and spin it up locally, to ensure the walk-through has not regressed at all (i.e., extra set of eyes)?

[Dave-Sukharan]

Looking good so far! A few minor changes:

• Change circles in the first few images to rounded rectangles
• Add text boxes to the end of the arrows
• Small typo on final image

[Dave-Sukharan]

Looks great! We caught all the typos and added those standardizations. Thanks Liani!

[msnook]

👍