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

[hussain-t]

Hi @kelvinballoo, I'm unable to reproduce any of the issues reported:

The grey background has 2 types of grey but based on Figma, it's supposed to be only one.

The grey background appears consistent and uses only one shade of grey as specified in the Figma design. Please refer to the screenshot below for verification.

---

There is no rounded border. It should be 8px radius.

The border-radius in the Figma design is not explicitly specified as 8px. Upon inspection with a Figma plugin, it is 4px, which matches our current implementation. Please refer to the screenshot below for clarification.

---

The font family and size is not right. Based on figma it should be 'Google Sans Text' and 12.

The font-family is set to Google Sans Text, and the font-size is 12px, as indicated in the Figma design. Please refer to the screenshot below for confirmation.

It’s possible that these discrepancies are due to an older version of WordPress. A similar issue was encountered in #8663. Please ensure you are testing with the latest stable version of WordPress.

Thanks!

cc: @ivonac4

[kelvinballoo]

Thanks @hussain-t .

Yes you are right, this issue is similar to #8663 where it happens on old versions of WordPress 5.6.13.
Since it's an old version, it does not make sense to fix it.
According to WordPress stats only 0.9% of WordPress users are on 5.6.

[hussain-t]

Thanks for confirming, @kelvinballoo. Closing this issue based on the above discussion.