diff --git a/projects/packages/my-jetpack/_inc/components/product-cards-section/videopress-card/style.scss b/projects/packages/my-jetpack/_inc/components/product-cards-section/videopress-card/style.scss index 5e704d3f7ae06..c9f3ee18557a2 100644 --- a/projects/packages/my-jetpack/_inc/components/product-cards-section/videopress-card/style.scss +++ b/projects/packages/my-jetpack/_inc/components/product-cards-section/videopress-card/style.scss @@ -20,13 +20,19 @@ p.description { .videopress-card__value-section { display: flex; + gap: 0.75rem; + justify-content: space-between; &__container { display: flex; flex-direction: column; align-items: flex-start; + } - width: 50%; + &__value-container { + display: flex; + align-items: flex-end; + flex-wrap: wrap; } &__value { @@ -35,9 +41,32 @@ p.description { line-height: 1.125; } + &__previous-value { + display: flex; + align-items: center; + + font-size: var( --font-body-extra-small ); + font-weight: 600; + } + + &__previous-value.increase { + * { + color: var( --jp-green-50 ); + fill: var( --jp-green-50 ); + } + } + + &__previous-value.decrease { + * { + color: var( --jp-red-50 ); + fill: var( --jp-red-50 ); + } + } + &__heading { display: flex; align-items: center; + text-wrap: nowrap; } } diff --git a/projects/packages/my-jetpack/_inc/components/product-cards-section/videopress-card/use-tooltip-copy.ts b/projects/packages/my-jetpack/_inc/components/product-cards-section/videopress-card/use-tooltip-copy.ts index 5709f45c237bc..b64db028266e1 100644 --- a/projects/packages/my-jetpack/_inc/components/product-cards-section/videopress-card/use-tooltip-copy.ts +++ b/projects/packages/my-jetpack/_inc/components/product-cards-section/videopress-card/use-tooltip-copy.ts @@ -66,11 +66,10 @@ const useTooltipCopy = () => { ), }; - // todo: Add "comparing it with the performance of the previous 30 days." once we have the comparison in place. const watchTime = { title: __( '30-Day viewing time', 'jetpack-my-jetpack' ), text: __( - 'This metric shows total video viewing time for the last 30 days.', + 'This metric shows total video viewing time for the last 30 days, comparing it with the performance of the previous 30 days.', 'jetpack-my-jetpack' ), }; diff --git a/projects/packages/my-jetpack/_inc/components/product-cards-section/videopress-card/videopress-value-section.tsx b/projects/packages/my-jetpack/_inc/components/product-cards-section/videopress-card/videopress-value-section.tsx index f28fd5fffb532..d6e5b06490fce 100644 --- a/projects/packages/my-jetpack/_inc/components/product-cards-section/videopress-card/videopress-value-section.tsx +++ b/projects/packages/my-jetpack/_inc/components/product-cards-section/videopress-card/videopress-value-section.tsx @@ -1,4 +1,5 @@ import { __ } from '@wordpress/i18n'; +import { arrowUp, arrowDown, Icon } from '@wordpress/icons'; import clsx from 'clsx'; import { PRODUCT_SLUGS } from '../../../data/constants'; import useProduct from '../../../data/products/use-product'; @@ -16,6 +17,39 @@ interface VideoPressValueSectionProps { data: Window[ 'myJetpackInitialState' ][ 'videopress' ]; } +interface ValueSectionProps { + value: number; + previousValue: number; + formattedValue: string; + formattedDifference: string; +} + +const ValueSection: FC< ValueSectionProps > = ( { + value, + previousValue, + formattedValue, + formattedDifference, +} ) => { + const hasValueIncreased = value > previousValue; + return ( +