Skip to content

Commit 233a14f

Browse files
claudiucelfilipclaudiucelfilip
committed
More tweaks and adjustsments to match the redesign
1 parent b7207d0 commit 233a14f

File tree

6 files changed

+142
-42
lines changed

6 files changed

+142
-42
lines changed

‎client/my-sites/plugins/plugin-details-CTA/style.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,10 @@
7676
margin: 24px 0 0;
7777
font-size: $font-body-extra-small;
7878
color: var(--studio-gray-50);
79+
80+
.full-width-section & {
81+
font-size: $font-body-small;
82+
}
7983
}
8084

8185
.plugin-details-cta__not-available {

‎client/my-sites/plugins/plugin-details-header/index.jsx‎

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { formatNumberCompact } from '@automattic/number-formatters';
44
import { useTranslate } from 'i18n-calypso';
55
import { useSelector } from 'react-redux';
66
import { useLocalizedMoment } from 'calypso/components/localized-moment';
7+
import Rating from 'calypso/components/rating';
78
import {
89
useMarketplaceReviewsQuery,
910
useMarketplaceReviewsStatsQuery,
@@ -137,14 +138,30 @@ const PluginDetailsHeader = ( {
137138
{ /* We want to accept rating 0, which means no rating for Marketplace products */ }
138139
{ rating !== null && (
139140
<div className="plugin-details-header__info">
140-
<div className="plugin-details-header__info-title">{ translate( 'Rating' ) }</div>
141+
<div className="plugin-details-header__info-title">
142+
{ isEnabled( 'marketplace-redesign' )
143+
? translate( 'Ratings' )
144+
: translate( 'Rating' ) }
145+
</div>
141146
<div className="plugin-details-header__info-value">
142-
{ rating !== 0 && <div>{ `${ formatPluginRating( rating, true ) }/5` }</div> }
143-
{ isMarketplaceProduct ? getMarketPlacePluginReviewsLink() : getPluginReviewsLink() }
147+
{ rating !== 0 &&
148+
( isEnabled( 'marketplace-redesign' ) ? (
149+
<div className="plugin-details-header__rating">
150+
<Rating rating={ rating } size={ 20 } />
151+
<span>{ formatPluginRating( rating, true ) }</span>
152+
</div>
153+
) : (
154+
<>
155+
<div>{ `${ formatPluginRating( rating, true ) }/5` }</div>
156+
{ isMarketplaceProduct
157+
? getMarketPlacePluginReviewsLink()
158+
: getPluginReviewsLink() }
159+
</>
160+
) ) }
144161
</div>
145162
</div>
146163
) }
147-
<div className="plugin-details-header__info">
164+
<div className="plugin-details-header__info is-version">
148165
<div className="plugin-details-header__info-title">{ translate( 'Version' ) }</div>
149166
<div className="plugin-details-header__info-value">
150167
{ /* Show the default version if plugin is not installed */ }
@@ -153,7 +170,7 @@ const PluginDetailsHeader = ( {
153170
</div>
154171
</div>
155172
{ Boolean( plugin.active_installs ) && (
156-
<div className="plugin-details-header__info">
173+
<div className="plugin-details-header__info is-installs">
157174
<div className="plugin-details-header__info-title">
158175
{ translate( 'Active installations' ) }
159176
</div>
@@ -162,7 +179,7 @@ const PluginDetailsHeader = ( {
162179
</div>
163180
</div>
164181
) }
165-
<div className="plugin-details-header__info">
182+
<div className="plugin-details-header__info is-updated">
166183
<div className="plugin-details-header__info-title">{ translate( 'Last updated' ) }</div>
167184
<div className="plugin-details-header__info-value">
168185
{ moment.utc( plugin.last_updated, 'YYYY-MM-DD hh:mma' ).format( 'MMM D, YYYY' ) }

‎client/my-sites/plugins/plugin-details-header/style.scss‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,10 @@ $block-spacing: 24px;
4545
@include break-mobile {
4646
margin-top: 0;
4747
}
48+
49+
.full-width-section & {
50+
padding-top: 5px;
51+
}
4852
}
4953

5054
.plugin-details-header__banner {
@@ -88,6 +92,10 @@ $block-spacing: 24px;
8892
font-size: $font-title-small;
8993
color: var(--studio-gray-80);
9094
padding: 24px 0;
95+
96+
.full-width-section & {
97+
font-size: $font-title-medium;
98+
}
9199
}
92100

93101
.plugin-details-header__additional-info {
@@ -99,6 +107,7 @@ $block-spacing: 24px;
99107
box-sizing: border-box;
100108
padding: 0;
101109

110+
102111
.plugin-details-header__number-reviews-link {
103112
font-size: $font-body-small;
104113
}
@@ -116,15 +125,52 @@ $block-spacing: 24px;
116125

117126
.full-width-section & {
118127
text-transform: uppercase;
128+
margin-bottom: 5px;
119129
}
120130
}
121131

122132
.plugin-details-header__info-value {
123133
font-size: $font-body-small;
124134
color: var(--studio-gray-90);
125135
}
136+
137+
.full-width-section & {
138+
column-gap: 48px;
139+
row-gap: 12px;
140+
141+
.plugin-details-header__info {
142+
width: auto;
143+
144+
&.is-updated {
145+
order: 1;
146+
}
147+
148+
&.is-version {
149+
order: 2;
150+
}
151+
152+
&.is-installs {
153+
order: 3;
154+
}
155+
}
156+
}
157+
}
158+
159+
.plugin-details-header__rating {
160+
display: flex;
161+
align-items: center;
162+
gap: 8px;
163+
164+
.rating .gridicon {
165+
fill: #ffb514;
166+
}
167+
168+
.full-width-section & {
169+
font-size: $font-body;
170+
}
126171
}
127172

173+
128174
.plugin-details-header__tag-badge-container {
129175
margin-bottom: $block-spacing;
130176
}

‎client/my-sites/plugins/related-plugins/index.tsx‎

Lines changed: 35 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -156,39 +156,41 @@ function RelatedPluginCard( { plugin }: { plugin: RelatedPlugin } ): JSX.Element
156156
<div className="related-plugins-item__info">
157157
<h3 className="related-plugins-item__title">{ plugin.name }</h3>
158158
<div className="related-plugins-item__excerpt">{ plugin.short_description }</div>
159-
<div className="related-plugins-item__details">
160-
<PluginPrice plugin={ plugin } billingPeriod={ IntervalLength.MONTHLY }>
161-
{ ( {
162-
isFetching,
163-
price,
164-
period,
165-
}: {
166-
isFetching: boolean;
167-
price: string;
168-
period: string;
169-
} ) => {
170-
if ( isFetching ) {
171-
return '...';
172-
}
173-
174-
if ( price ) {
175-
return (
176-
<PreinstalledPremiumPluginPriceDisplay
177-
className="related-plugins-item__price-interval"
178-
period={ period }
179-
pluginSlug={ plugin.slug }
180-
price={ price }
181-
/>
182-
);
183-
}
184-
185-
return <>{ translate( 'Free' ) }</>;
186-
} }
187-
</PluginPrice>
188-
{ mainCategory && (
189-
<span className="related-plugins-item__category">{ mainCategory }</span>
190-
) }
191-
</div>
159+
{ ! isEnabled( 'marketplace-redesign' ) && (
160+
<div className="related-plugins-item__details">
161+
<PluginPrice plugin={ plugin } billingPeriod={ IntervalLength.MONTHLY }>
162+
{ ( {
163+
isFetching,
164+
price,
165+
period,
166+
}: {
167+
isFetching: boolean;
168+
price: string;
169+
period: string;
170+
} ) => {
171+
if ( isFetching ) {
172+
return '...';
173+
}
174+
175+
if ( price ) {
176+
return (
177+
<PreinstalledPremiumPluginPriceDisplay
178+
className="related-plugins-item__price-interval"
179+
period={ period }
180+
pluginSlug={ plugin.slug }
181+
price={ price }
182+
/>
183+
);
184+
}
185+
186+
return <>{ translate( 'Free' ) }</>;
187+
} }
188+
</PluginPrice>
189+
{ mainCategory && (
190+
<span className="related-plugins-item__category">{ mainCategory }</span>
191+
) }
192+
</div>
193+
) }
192194
</div>
193195
</a>
194196
);

‎client/my-sites/plugins/related-plugins/style.scss‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,11 @@
2121
overflow-wrap: anywhere;
2222
color: $gray-100;
2323
}
24-
24+
.full-width-section & {
25+
h2 {
26+
font-size: rem(40px);
27+
}
28+
}
2529
}
2630

2731
.related-plugins__list {
@@ -84,6 +88,22 @@
8488
margin: 0 8px;
8589
}
8690
}
91+
92+
.full-width-section .full-width-section__content & {
93+
row-gap: 0;
94+
95+
.related-plugins-item {
96+
background: var(--studio-white);
97+
border-radius: 8px;
98+
padding: 16px;
99+
margin-top: 24px;
100+
border: 1px solid transparent;
101+
102+
&:active, &:hover {
103+
border-color: var(--studio-blue-50);
104+
}
105+
}
106+
}
87107
}
88108

89109
// Carousel-specific styles (marketplace-redesign flag)

‎client/my-sites/plugins/style.scss‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -373,6 +373,7 @@ $calypso-header-height: 31px;
373373
.full-width-section & {
374374
.badge--info {
375375
background-color: var(--studio-gray-0);
376+
text-transform: none;
376377
}
377378
}
378379
}
@@ -387,6 +388,7 @@ $calypso-header-height: 31px;
387388
.plugin-sections {
388389
.section-nav {
389390
box-shadow: none;
391+
background: none;
390392
}
391393

392394
.card {
@@ -398,6 +400,11 @@ $calypso-header-height: 31px;
398400

399401
.section-nav-tabs__list {
400402
box-shadow: inset 0 -1px 0 var( --studio-gray-5 );
403+
404+
.full-width-section & {
405+
display: inline-flex;
406+
width: auto;
407+
}
401408
}
402409

403410
.section-nav-tab {
@@ -422,8 +429,12 @@ $calypso-header-height: 31px;
422429
color: var( --studio-gray-100 );
423430
}
424431

425-
.full-width-section & .section-nav-tab__text{
426-
padding: 14px 16px;
432+
.full-width-section & {
433+
padding-inline: 0;
434+
435+
.section-nav-tab__text {
436+
padding: 14px 16px;
437+
}
427438
}
428439
}
429440

0 commit comments

Comments
 (0)