Visual issues on NPT page: 2 grey, border of grey field and fonts

[kelvinballoo]

Bug Description

Figma: https://www.figma.com/file/ntKPstnmguKI70A6xUJQVi/Application-Passwords?type=design&node-id=1-3267&mode=design&t=imRPtKsRHOwS6qSl-0

I spotted 3 issues:

• The grey background has 2 types of grey but based on Figma, it's supposed to be only one.
• There is no rounded border. It should be 8px radius.
• The font family and size is not right. Based on figma it should be 'Google Sans Text' and 12.

Steps to reproduce

Test instructions originally from: https://docs.google.com/document/d/1PThnH5ZgpYksgOAW2xHI6ONeIaHk74mj9qm65dlE_1w/edit#heading=h.ufyp724raw20

1. Spin up an environment, activate Site Kit
2. To view the Authorize Application screen with the customized styling applied, use the following URL with the hostname of your WP site.
   wp-admin/authorize-application.php?app_name=GoogleServiceIntegration&app_id=123e4567-e89b-12d3-a456-426614174000&success_url=https%3A%2F%2Fpublishers.google.com%2Fsettings%2Fauthorization%2Fwordpress&sitekit=true

Screenshots

Additional Context

• PHP Version: 8.1
• WP 5.6.13
• OS: MacOS Sonoma
• Browser: Chrome
• Plugin Version: 1.126.0
• Device: MacOS

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

Implementation Brief

Test Coverage

QA Brief

Changelog entry