-
Notifications
You must be signed in to change notification settings - Fork 2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Customer Home: update card headings size and tags #40997
Conversation
@@ -51,7 +51,9 @@ const FreePhotoLibrary = ( { openSupportArticleDialogAndTrack, isSiteWPForTeamsP | |||
/> | |||
</button> | |||
) } | |||
<CardHeading>{ translate( 'Over 40,000 Free Photos' ) }</CardHeading> | |||
<CardHeading tagName="h2" size={ 16 }> | |||
{ translate( 'Over 40,000 free photos' ) } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🆗 This change will be queued for retranslation. We'll use the existing translations in the meantime.
<CardHeading>{ translate( 'Go Mobile' ) }</CardHeading> | ||
<h6 className="go-mobile__subheader">{ translate( 'Make updates on the go' ) }</h6> | ||
<CardHeading tagName="h2" size={ 16 }> | ||
{ translate( 'Go mobile' ) } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<CardHeading tagName="h2" size={ 16 }> | ||
{ translate( 'Go mobile' ) } | ||
</CardHeading> | ||
<h6 className="go-mobile__subheader">{ translate( 'Make updates on the go.' ) }</h6> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🆗 This change will be queued for retranslation. We'll use the existing translations in the meantime.
@@ -35,9 +35,11 @@ export const GrowEarn = ( { siteSlug, expandToolsAndTrack, isSiteWPForTeamsProp | |||
|
|||
return ( | |||
<Card className="grow-earn"> | |||
<CardHeading>{ translate( 'Grow & Earn' ) }</CardHeading> | |||
<CardHeading tagName="h2" size={ 16 }> | |||
{ translate( 'Grow & earn' ) } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🆗 This change will be queued for retranslation. We'll use the existing translations in the meantime.
<h6 className="grow-earn__card-subheader customer-home__card-subheader"> | ||
{ translate( 'Grow your audience and earn money' ) } | ||
{ translate( 'Grow your audience and earn money.' ) } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🆗 This change will be queued for retranslation. We'll use the existing translations in the meantime.
@@ -26,9 +26,11 @@ export const LaunchSite = ( { isPrimary, launchSiteAndTrack, siteId } ) => { | |||
|
|||
return ( | |||
<Card className="launch-site"> | |||
<CardHeading>{ translate( 'Site Privacy' ) }</CardHeading> | |||
<CardHeading tagName="h2" size={ 16 }> | |||
{ translate( 'Site privacy' ) } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<h6 className="customer-home__card-subheader launch-site__card-subheader"> | ||
{ translate( 'Your site is private' ) } | ||
{ translate( 'Your site is private.' ) } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🆗 This change will be queued for retranslation. We'll use the existing translations in the meantime.
<h6 className="support__header customer-home__card-subheader"> | ||
{ translate( 'Get all the help you need' ) } | ||
{ translate( 'Get all the help you need.' ) } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🆗 This change will be queued for retranslation. We'll use the existing translations in the meantime.
@@ -22,7 +22,9 @@ const ChecklistSiteSetup = ( { checklistMode } ) => { | |||
return ( | |||
<div className="checklist-site-setup"> | |||
<Card className="checklist-site-setup__heading"> | |||
<CardHeading>{ translate( 'Site Setup List' ) }</CardHeading> | |||
<CardHeading tagName="h2" size={ 16 }> | |||
{ translate( 'Site setup list' ) } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🆗 This change will be queued for retranslation. We'll use the existing translations in the meantime.
@@ -160,15 +160,17 @@ export const QuickLinks = ( { | |||
if ( ! isMobile() ) { | |||
return ( | |||
<Card className="quick-links"> | |||
<CardHeading>{ translate( 'Quick Links' ) }</CardHeading> | |||
<CardHeading tagName="h2" size={ 16 }> | |||
{ translate( 'Quick links' ) } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ℹ️ String reuse speeds up translation and improves consistency. The following string might make a good alternative and has already been translated 47 times:
translate( 'Quick Links' )
ES Score: 10
Should the card headers look more like/use the SectionHeader component? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks @danhauk giving ✅ for code changes. Let's get a 👍 from @Automattic/dotcom-manage-design for design modifications before landing |
17d7c62
to
f2aff33
Compare
Here is how your PR affects size of JS and CSS bundles shipped to the user's browser: Sections (~24 bytes removed 📉 [gzipped])
Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to. Legend What is parsed and gzip size?Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory. Generated by performance advisor bot at iscalypsofastyet.com. |
@gwwar We have the |
It's 94% translated so it's not a blocker. I usually like adding the label for visible items, so we can try and ship updates with copy translated. (Strings get picked up on Monday so fastest turn around is usually tidying copy on Friday). |
Closing out this one since we're pretty close to new layout updates. Please reopen if this doesn't happen in a timely way. |
Changes proposed in this Pull Request
My Home
page heading, especially on mobile. This also helps us move towards the explorations in My Home: Create a section for recommended tasks #40734.<h2>
instead of<h1>
all over the place.@Automattic/dotcom-manage-design can you gut check me on the sizes here?
Testing instructions