Quick Assess info and examples fit and finish

[dbjorge]

Describe the bug

Quick Assess pages include a new "Helpful resources" section in their "Why it matters" info box that has a few inconsistencies with the rest of the extension:

• The "Info and examples" link uses a font size that is inconsistent with the rest of the "Why it matters" content (15px vs 14px)
• The spacing in the sections of the box feels off - there's more space between the end of the "Why it matters" content and the start of the "Helpful resources" heading than there is between the heading and the "Info and examples" link, but there should probably be more spacing separating the sections than within the section.
• It's confusing that Quick Assess is putting the "Info and examples" link in the info box rather than using the more typical "i in a circle" guidance button we use for similar content in Assessment and Fast Pass > Tab Stops. I think for consistency it would be good to have the same guidance icon button we use elsewhere available (regardless of whether we additionally want it as a link on the gray box)

To Reproduce
Steps to reproduce the behavior:

1. Start a quick assess on any page
2. Open any non-automated-checks requirement
3. Observe issues in list above

CodePen repro example

n/a

Expected behavior

Styling should be consistent with rest of extension UI as described above

Screenshots

Context (please complete the following information)

• OS Name & Version: Windows 11 and Ubuntu 22.04
• AI-Web Version & Environment: 2.38.1 insider
• Browser Version: Chrome 111 stable
• Target Page: n/a

Are you willing to submit a PR?

yes

Did you search for similar existing issues?

yes

Additional context

n/a

[microsoft-github-policy-service]

This issue has been marked as ready for team triage; we will triage it in our weekly review and update the issue. Thank you for contributing to Accessibility Insights!

[JGibson2019]

Closing since this is now referenced in the upcoming feature spec