Skip to content

Commit

Permalink
Merge pull request #21484 from Yoast/1700-232-free-ai-upsellintro-mod…
Browse files Browse the repository at this point in the history 
…al-design-issue

Fix introduction gradient.
  • Loading branch information
@pls78
pls78 authored Jul 18, 2024
2 parents e6922ef + 98880d3 commit 209f9e1
Show file tree
Hide file tree
Showing 2 changed files with 74 additions and 73 deletions.
3 changes: 0 additions & 3 deletions css/src/introductions.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,6 @@
focus:yst-outline-none
focus:yst-ring-offset-0;
}
.yst-introduction-modal-panel {
background-image: linear-gradient(180deg, rgba(166, 30, 105, 0.25) 10%, rgba(255, 255, 255, 0.25) 50%);
}

.yst-introduction-gradient {
background: linear-gradient(180deg, rgba(166, 30, 105, 0.25) 10%, rgba(255, 255, 255, 0) 80%);
Expand Down
144 changes: 74 additions & 70 deletions packages/js/src/shared-admin/components/ai-generate-titles-and-descriptions-upsell.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,85 +42,89 @@ export const AiGenerateTitlesAndDescriptionsUpsell = ( {
};

return (
<div className="yst-flex yst-flex-col yst-items-center yst-p-10">
<div className="yst-relative yst-w-full">
<VideoFlow
videoId="vmrahpfjxp"
thumbnail={ thumbnail }
wistiaEmbedPermission={ wistiaEmbedPermission }
/>
<Badge className="yst-absolute yst-top-0 yst-right-2 yst-mt-2 yst-ml-2" variant="info">Beta</Badge>
</div>
<div className="yst-mt-6 yst-text-xs yst-font-medium">
<span className="yst-introduction-modal-uppercase">
{ newToText }
</span>
<>
<div className="yst-px-10 yst-pt-10 yst-introduction-gradient yst-text-center">
<div className="yst-relative yst-w-full">
<VideoFlow
videoId="vmrahpfjxp"
thumbnail={ thumbnail }
wistiaEmbedPermission={ wistiaEmbedPermission }
/>
<Badge className="yst-absolute yst-top-0 yst-right-2 yst-mt-2 yst-ml-2" variant="info">Beta</Badge>
</div>
<div className="yst-mt-6 yst-text-xs yst-font-medium yst-flex yst-flex-col yst-items-center">
<span className="yst-introduction-modal-uppercase yst-flex yst-gap-2 yst-items-center">
{ newToText }
</span>
</div>
</div>
<div className="yst-mt-4 yst-mx-1.5 yst-text-center">
<h3 className="yst-text-slate-900 yst-text-lg yst-font-medium">
{ title }
</h3>
<div className="yst-mt-2 yst-text-slate-600 yst-text-sm">
{ isProductCopy
? createInterpolateElement(
sprintf(
/* translators: %1$s and %2$s are anchor tags; %3$s is the arrow icon. */
__(
"Let AI do some of the thinking for you and help you save time. Get high-quality suggestions for product titles and meta descriptions to make your content rank high and look good on social media. %1$sLearn more%2$s%3$s",
"wordpress-seo"
<div className="yst-px-10 yst-pb-10 yst-flex yst-flex-col yst-items-center">
<div className="yst-mt-4 yst-mx-1.5 yst-text-center">
<h3 className="yst-text-slate-900 yst-text-lg yst-font-medium">
{ title }
</h3>
<div className="yst-mt-2 yst-text-slate-600 yst-text-sm">
{ isProductCopy
? createInterpolateElement(
sprintf(
/* translators: %1$s and %2$s are anchor tags; %3$s is the arrow icon. */
__(
"Let AI do some of the thinking for you and help you save time. Get high-quality suggestions for product titles and meta descriptions to make your content rank high and look good on social media. %1$sLearn more%2$s%3$s",
"wordpress-seo"
),
"<a>",
"<ArrowNarrowRightIcon />",
"</a>"
),
"<a>",
"<ArrowNarrowRightIcon />",
"</a>"
),
learnMoreLinkStructure
)
: createInterpolateElement(
sprintf(
/* translators: %1$s and %2$s are anchor tags; %3$s is the arrow icon. */
__(
"Let AI do some of the thinking for you and help you save time. Get high-quality suggestions for titles and meta descriptions to make your content rank high and look good on social media. %1$sLearn more%2$s%3$s",
"wordpress-seo"
learnMoreLinkStructure
)
: createInterpolateElement(
sprintf(
/* translators: %1$s and %2$s are anchor tags; %3$s is the arrow icon. */
__(
"Let AI do some of the thinking for you and help you save time. Get high-quality suggestions for titles and meta descriptions to make your content rank high and look good on social media. %1$sLearn more%2$s%3$s",
"wordpress-seo"
),
"<a>",
"<ArrowNarrowRightIcon />",
"</a>"
),
"<a>",
"<ArrowNarrowRightIcon />",
"</a>"
),
learnMoreLinkStructure
)
}
learnMoreLinkStructure
)
}
</div>
</div>
</div>
<div className="yst-w-full yst-flex yst-mt-10">
<div className="yst-w-full yst-flex yst-mt-10">
<Button
as="a"
className="yst-grow"
size="extra-large"
variant="upsell"
href={ upsellLink }
target="_blank"
ref={ initialFocus }
>
<LockOpenIcon className="yst--ml-1 yst-mr-2 yst-h-5 yst-w-5" />
{ upsellLabel }
<span className="yst-sr-only">
{
/* translators: Hidden accessibility text. */
__( "(Opens in a new browser tab)", "wordpress-seo" )
}
</span>
</Button>
</div>
{ bundleNote }
<Button
as="a"
className="yst-grow"
size="extra-large"
variant="upsell"
href={ upsellLink }
target="_blank"
ref={ initialFocus }
className="yst-mt-4"
variant="tertiary"
onClick={ onClose }
>
<LockOpenIcon className="yst--ml-1 yst-mr-2 yst-h-5 yst-w-5" />
{ upsellLabel }
<span className="yst-sr-only">
{
/* translators: Hidden accessibility text. */
__( "(Opens in a new browser tab)", "wordpress-seo" )
}
</span>
{ __( "Close", "wordpress-seo" ) }
</Button>
</div>
{ bundleNote }
<Button
as="a"
className="yst-mt-4"
variant="tertiary"
onClick={ onClose }
>
{ __( "Close", "wordpress-seo" ) }
</Button>
</div>
</>
);
};
AiGenerateTitlesAndDescriptionsUpsell.propTypes = {
Expand Down

0 comments on commit 209f9e1

Please sign in to comment.