Refine Paragraph Styles Scope in the Authorize Application Screen

[hussain-t]

Feature Description

The current implementation of paragraph styles on the Authorize Application screen applies too broadly, affecting all paragraphs, including those outside the intended .auth-app-card area. This issue aims to refine the scope of these styles to ensure they only affect the relevant sections of the screen, improving overall style specificity and reducing potential style conflicts.

---

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

Acceptance criteria

• Paragraph Style Scope: The paragraph styles currently applied globally under .authorize-application-php should be restricted to only affect elements within the .auth-app-card section.
• Custom Footer Paragraph Styling: The paragraph styling specifics should also be applied appropriately to the paragraph within the custom footer section.

Implementation Brief

In assets/sass/authorize-application/_googlesitekit-authorize-application.scss:

• Move the existing paragraph style rules under .authorize-application-php to ensure they only affect elements within the .auth-app-card section. See:
  

  site-kit-wp/assets/sass/authorize-application/_googlesitekit-authorize-application.scss

  Lines 45 to 50 in b0c0c60

  	p {
  	font-size: $fs-authorize-application-label-lg;
  	font-weight: $fw-medium;
  	line-height: $lh-authorize-application-label-lg;
  	margin: 19px 0 20px;
  	}

• Apply the following specific paragraph styles to the .googlesitekit-authorize-application__footer p element:
  • line-height: $lh-authorize-application-label-lg
  • margin: 19px 0 20px

Test Coverage

• No new tests are required for this change.

QA Brief

• Navigate to the following URL on your WordPress site, replacing example.com with your actual site domain:

https://example.com/wp-admin/authorize-application.php?app_name=GoogleServiceIntegration&app_id=123e4567-e89b-12d3-a456-426614174000&success_url=https%3A%2F%2Fexample.google.com%2Fsettings%2Fauthorization%2Fwordpress&sitekit=true

• Verify that the paragraph styles are only applied to elements within the .auth-app-card section.
• Verify that the custom footer paragraph styling is correctly applied to the paragraph within the custom footer section.
• Verify that the paragraph styles are not applied to any other screen sections.

Changelog entry

• Improve style specificity in the Authorize Application screen.

[techanvil]

IB ✅, thanks @hussain-t!

[kelvinballoo]

QA Update ⚠️

Hi @hussain-t , did a test on this and it's looking good overall. I do have some clarifications to be confirmed.

Observations are as follows:

• Most of the Paragraph elements are within the .auth-app-cardsection. ✅

  

• The other footer paragraph are under wpfooter and googlesitekit-authorize-application__footer respectively. I believe that's as expected but can you confirm. ⚠️

  

• I noticed other paragraph elements on the page under different sections wp-auth-fallback , even though those are not visible. Any concern for those? ⚠️

  

[hussain-t]

Hi @kelvinballoo, regarding your observations:

The other footer paragraph are under wpfooter and googlesitekit-authorize-application__footer respectively. I believe that's as expected but can you confirm.

That's expected.

I noticed other paragraph elements on the page under different sections wp-auth-fallback , even though those are not visible. Any concern for those?

We only want to apply the nested paragraph styles to the auth-app-card and footer sections.

[kelvinballoo]

QA update ✅

Thanks @hussain-t
Moving this to 'Approval' queue.

Most of the Paragraph elements are within the .auth-app-cardsection. ✅

The other footer paragraph are under wpfooter and googlesitekit-authorize-application__footer respectively, which is as expected. ✅