Skip to content

Commit

Permalink
My Jetpack: improve My Jetpack link styles (#23007)
Browse files Browse the repository at this point in the history 
* [not verified] my-jetpack: tabs

* [not verified] my-jetack: tweak :hover style to the Add link

* [not verified] my-jetpack: tweak Manage your plan link

* [not verified] changelog

* [not verified] my-jetpack: do not redefine base styles

* [not verified] my-jetpack: move out hover action link style

* [not verified] my-jetpack: move out styles
  • Loading branch information
@retrofox
retrofox authored Feb 22, 2022
1 parent cb266e5 commit ccfc47b
Show file tree
Hide file tree
Showing 5 changed files with 103 additions and 88 deletions.
2 changes: 1 addition & 1 deletion projects/packages/my-jetpack/_inc/components/plans-section/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ function PlanSectionHeader( { purchases } ) {
</h3>
<p>{ __( 'The extra power you added to your Jetpack.', 'jetpack-my-jetpack' ) }</p>
<p>
<ExternalLink href={ getManageYourPlanUrl() }>
<ExternalLink className={ styles[ 'external-link' ] } href={ getManageYourPlanUrl() }>
{ purchases.length <= 1
? __( 'Manage your plan', 'jetpack-my-jetpack' )
: __( 'Manage your plans', 'jetpack-my-jetpack' ) }
Expand Down
6 changes: 5 additions & 1 deletion projects/packages/my-jetpack/_inc/components/plans-section/style.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,5 +28,9 @@
font-size: var( --font-body );
line-height: 24px;
}

}

.external-link:hover {
color: var(--jp-black);
text-decoration-thickness: var(--jp-underline-thickness);
}
4 changes: 2 additions & 2 deletions projects/packages/my-jetpack/_inc/components/product-card/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ const ActionButton = ( {
} ) => {
if ( ! admin ) {
return (
<Button variant="link" onClick={ onLearn }>
<Button isLink onClick={ onLearn } className={ styles[ 'action-link-button' ] }>
{
/* translators: placeholder is product name. */
sprintf( __( 'Learn about %s', 'jetpack-my-jetpack' ), name )
Expand All @@ -70,7 +70,7 @@ const ActionButton = ( {
case PRODUCT_STATUSES.NEEDS_PURCHASE:
case PRODUCT_STATUSES.ABSENT:
return (
<Button variant="link" onClick={ onAdd }>
<Button isLink onClick={ onAdd } className={ styles[ 'action-link-button' ] }>
{
/* translators: placeholder is product name. */
sprintf( __( 'Add %s', 'jetpack-my-jetpack' ), name )
Expand Down
175 changes: 91 additions & 84 deletions projects/packages/my-jetpack/_inc/components/product-card/style.module.scss
View file
Original file line number Diff line number Diff line change
@@ -1,112 +1,119 @@
.container {
// all css variables used down in product-card
--product-card-shadow: rgba(0, 0, 0, 0.08);
--product-card-shadow-size: 40px;
--product-card-name-font-size: 24px;
--product-card-description-font-size: 14px;
--product-card-actions-font-size: 12px;
--product-card-margin-base: 4px;
--product-card-actions-size: 36px;
--status-size: 8px;
--status-active: #008710;
--status-inactive: #646970;
--status-error: #B32D2E;
--status-plugin_absent: #C3C4C7;
// all css variables used down in product-card
--product-card-shadow: rgba(0, 0, 0, 0.08);
--product-card-shadow-size: 40px;
--product-card-name-font-size: 24px;
--product-card-description-font-size: 14px;
--product-card-actions-font-size: 12px;
--product-card-margin-base: 4px;
--product-card-actions-size: 36px;
--jp-black: #000;
--status-size: 8px;
--status-active: #008710;
--status-inactive: #646970;
--status-error: #B32D2E;
--status-plugin_absent: #C3C4C7;
--jp-underline-thickness: 2px;

padding: 24px;
background: var( --jp-white );
border-radius: var( --jp-border-radius );
box-shadow: 0 0 var(--product-card-shadow-size) var(--product-card-shadow);
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 24px;
background: var( --jp-white );
border-radius: var( --jp-border-radius );
box-shadow: 0 0 var(--product-card-shadow-size) var(--product-card-shadow);
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;

&.is-purchase-required,
&.plugin_absent {
background: none;
box-shadow: none;
box-shadow: 0 0 0 1px var( --status-plugin_absent ) inset;
}
&.is-purchase-required,
&.plugin_absent {
background: none;
box-shadow: none;
box-shadow: 0 0 0 1px var( --status-plugin_absent ) inset;
}
}

.name {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
font-size: var(--product-card-name-font-size);
font-weight: 700;
margin-bottom: var(--product-card-margin-base);
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
font-size: var(--product-card-name-font-size);
font-weight: 700;
margin-bottom: var(--product-card-margin-base);
}

.description {
font-size: var(--product-card-description-font-size);
margin:0;
font-size: var(--product-card-description-font-size);
margin:0;
}

.actions {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
min-height: var(--product-card-actions-size);
margin-top: calc(var(--product-card-margin-base) * 4); // 16px
font-size: var(--product-card-actions-font-size);
font-weight: 600;
flex-wrap: wrap;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
min-height: var(--product-card-actions-size);
margin-top: calc(var(--product-card-margin-base) * 4); // 16px
font-size: var(--product-card-actions-font-size);
font-weight: 600;
flex-wrap: wrap;
}

.action-link-button:hover {
color: var(--jp-black);
text-decoration-thickness: var(--jp-underline-thickness);
}

.group {
display: flex;
height: var(--product-card-actions-size);
display: flex;
height: var(--product-card-actions-size);
}

.status {
margin-left: var(--product-card-margin-base);
white-space: nowrap;
height: var(--product-card-actions-size);
line-height: var(--product-card-actions-size);
margin-left: var(--product-card-margin-base);
white-space: nowrap;
height: var(--product-card-actions-size);
line-height: var(--product-card-actions-size);

&:before {
content: "";
display: inline-block;
width: var(--status-size);
height: var(--status-size);
margin-right: var(--product-card-margin-base);
border-radius: 50%;
}
&:before {
content: "";
display: inline-block;
width: var(--status-size);
height: var(--status-size);
margin-right: var(--product-card-margin-base);
border-radius: 50%;
}

// in plugin absent case, there's not status flag
$statuses: active, inactive, error;
// in plugin absent case, there's not status flag
$statuses: active, inactive, error;

@each $status in $statuses {
$color: var(--status-#{$status});
@each $status in $statuses {
$color: var(--status-#{$status});

&.#{$status} {
color: $color;
&:before {
background: $color;
}
}
}
&.#{$status} {
color: $color;
&:before {
background: $color;
}
}
}

&.is-fetching {
&:before {
animation: blink-animation 0.5s linear infinite;
}
}
&.is-fetching {
&:before {
animation: blink-animation 0.5s linear infinite;
}
}
}

@keyframes blink-animation{
0%{
opacity: 0;
}
50%{
opacity: 0.5;
}
100%{
opacity: 0;
}
0%{
opacity: 0;
}
50%{
opacity: 0.5;
}
100%{
opacity: 0;
}
}

4 changes: 4 additions & 0 deletions projects/packages/my-jetpack/changelog/update-my-jetpack-tweak-links
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: patch
Type: changed

Improve My Jetpack link styles

0 comments on commit ccfc47b

Please sign in to comment.