[Jetpack App Migration] Design Updates to App Banners #67607
Conversation
Previous feedback indicated that the banners didn't match the designs exactly, so this commit makes some necessary tweaks to various styles, such as padding, font sizes, etc.
|
This PR does not affect the size of JS and CSS bundles shipped to the user's browser. Generated by performance advisor bot at iscalypsofastyet.com. |
SiobhyB
changed the title
By using "@extend .wp-brand-font", Recoleta will only be used when a site's using a language it supports. Otherwise, a fallback option will be used.
| -webkit-font-smoothing: auto; | ||
| -moz-osx-font-smoothing: initial; | ||
| text-rendering: auto; | ||
| @extend .wp-brand-font; |
There was a problem hiding this comment.
@extend .wp-brand-font; is the recommended way to apply the $brand-serif fonts to ensure a device's locale is taken into account (reference).
| -webkit-font-smoothing: auto; | ||
| -moz-osx-font-smoothing: initial; | ||
| text-rendering: auto; |
There was a problem hiding this comment.
'Reverting' the following font-smoothing CSS, without this the font-weight doesn't appear to be 500:
smoothing-antialiased {
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
matticbot
added
the
[Status] Needs Review
|
@shaunandrews, let me know if any further screenshots would be helpful here. Looking forward to hearing any design feedback! |
| font-weight: bold; | ||
| font-weight: 500; |
There was a problem hiding this comment.
While I see the weight in Figma is "Medium," for my eyes, it seems like bold renders more closely to the design comp than 500. It is quite nuanced and likely not that important either way. Just wanted to drop a note, though.
|
Font-weight and spacing looking much better! Thanks for the updates. 🚢 |
github-actions
bot
removed
the
[Status] Needs Review
Previous feedback indicated that the banners didn't match the designs exactly, so these changes make some necessary tweaks to various styles, such as padding, font sizes, etc.
Following the updates to the app banners in #67013, this PR addresses design feedback.
Proposed Changes
Some necessary tweaks to various styles have been made, such as padding, font sizes, etc. The following screenshots display a comparison between the design and the actual implementation followed by a before/after comparison.
Design/actual Comparison⤵️
Note, the "actual" screenshot is from an emulation of the Pixel 5 (393 x 851).
Before/after⤵️
As with the design comparison, the both screenshots are from an emulation of the Pixel 5 (393 x 851).
Testing Instructions
Prerequisite: The app banner can be viewed via the mobile web (which can also be emulated using browser tools) when navigating directly to the Reader, Stats, Notifications, or the editor. Note, if the banner has previously been dismissed in your browser, it'll be necessary to clear your cache.
The following should be confirmed for both iOS and Android:
Pre-merge Checklist