feat: add sparkbox logo to previous apprentices component

[auaruss]

References FSA21V2-158

Description

Add sparkbox logo to previous apprentices component.

Spec

Designs: Design
See Story: FSA21V2-158

To Test

1. Make sure all PR Checks have passed (Github Actions, Netlify etc).
2. Pull down all related branches.
3. Confirm all tests pass: npm run test:ci

[For an example of good validation instructions, check out Bryan's Bouncy Ball PR.]

Validation

The following has been completed by the developer:

[delete anything irrelevant to this PR]

• This PR has visual elements, so it was reviewed by a designer.
• This PR has code changes, and our linters still pass.
• This PR affects production code, so it was browser tested (see below).
• This PR has new code, so new tests were added or updated, and they pass.
• This PR has copy changes, so copy was proofread and approved.
• The content of this PR requires documentation, so we added a detailed description of component purpose, requirements, quirks, and instructions for use by designers and developers. Along with accessibility information if pertinent.

Browser Testing

[delete if irrelevant to this issue]

Gold Level Browsers

In these browsers, all content is accessible and design matches exactly. In most cases, bugs should be resolved before merge.

macOS

• Chrome, current release
• Firefox, current release
• Safari, current release

Windows

• Chrome, current release
• Firefox, current release

Mobile

• Chrome on Android 9
• Safari, current release, on iPhone

Silver Level Browsers

In these browsers, all content is readable, but design may be inaccurate.

Windows

• Edge, current release

Mobile

• Android 8 - Chrome on Phone
• Safari, version before current release, on iPad (including various split screen widths)
• Chrome on iPhone

Bronze Level Browsers

In these browsers, our only goal is content readability.

Windows

• IE 11

[netlify]

✔️ Deploy Preview for sb-apprentices ready!

🔨 Explore the source changes: ce748f7

🔍 Inspect the deploy log: https://app.netlify.com/sites/sb-apprentices/deploys/61a8dec760363f0007191bc6

😎 Browse the preview: https://deploy-preview-29--sb-apprentices.netlify.app

[jonoliver]

Nice work Alice, I think we just need to make some adjustments to the background position. The larger the screen gets, the farther to the left the logo moves. At a 4K screen width 3840px, the logo is almost all the way on the left.

We can use calc to position it horizontally from the center, so that it stays in a fixed position regardless of how large the screen gets. I eyeballed these values in the devtools, but we'll probably want to adjust it and get J's feedback.

background-position-x: calc(50% + 38rem);
background-position-y: 16rem;

Also, I think we only need to apply the bg image above a particular screen width. J's designs don't appear to show it on smaller screen sizes.

[jonoliver]

Thanks for the updates Alice, looks good! We'll get a final approval from J on the placement after this is merged in and included in #31. This is good to merge!