Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-20 22:42:53 -05:00
Code Issues Activity

Updated recommendation preview design

Browse source 
refs https://github.com/TryGhost/Product/issues/3991
This commit is contained in:
Djordje Vlaisavljevic 2023-10-03 11:58:56 +01:00
parent 1f97c9eb97
commit a5a5c2ea71
1 changed files with 15 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
apps/admin-x-settings/src/components/settings/site/recommendations/RecommendationReasonForm.tsx
View file

@ -26,16 +26,22 @@ const RecommendationReasonForm: React.FC<Props<EditOrAddRecommendation | Recomme
> >
<div> <div>
<Heading className='mb-2 block text-2xs font-semibold uppercase tracking-wider' grey={true} level={6}>Preview</Heading> <Heading className='mb-2 block text-2xs font-semibold uppercase tracking-wider' grey={true} level={6}>Preview</Heading>
<a className='flex items-center justify-between rounded-sm border border-grey-300 bg-white p-3' href={formState.url} rel="noopener noreferrer" target="_blank"> <div className="flex items-center justify-center overflow-hidden rounded-sm border border-grey-200 bg-grey-50 px-4">
<div className='flex flex-col gap-[2px]'> <div className="w-full bg-white py-3 shadow">
<div className="flex items-start gap-2"> <div className="border-y border-grey-200 py-1">
<RecommendationIcon {...formState} /> <a className='flex items-center justify-between bg-white p-3' href={formState.url} rel="noopener noreferrer" target="_blank">
<span className='text-[1.6rem] font-semibold text-grey-900'>{formState.title}</span> <div className='flex flex-col gap-[2px]'>
<div className="flex items-start gap-2">
<RecommendationIcon {...formState} />
<span className='text-[1.6rem] font-semibold text-grey-900'>{formState.title}</span>
</div>
{formState.reason && <span className='pl-[31px] text-[1.35rem] leading-snug text-grey-700'>{formState.reason}</span>}
</div>
{formState.one_click_subscribe && <span className='flex whitespace-nowrap pl-6 text-md font-semibold text-green'>Subscribe</span>}
</a>
</div> </div>
{formState.reason && <span className='pl-[31px] text-[1.35rem] leading-snug text-grey-700'>{formState.reason}</span>}
</div> </div>
{formState.one_click_subscribe && <span className='flex whitespace-nowrap pl-6 text-md font-semibold text-green'>Subscribe</span>} </div>
</a>
{formState.one_click_subscribe && <Hint>This is a Ghost site, so your readers can subscribe with just one click</Hint>} {formState.one_click_subscribe && <Hint>This is a Ghost site, so your readers can subscribe with just one click</Hint>}
</div> </div>
@ -66,7 +72,7 @@ const RecommendationReasonForm: React.FC<Props<EditOrAddRecommendation | Recomme
clearBg={true} clearBg={true}
error={Boolean(errors.reason)} error={Boolean(errors.reason)}
hint={errors.reason || <>Max: <strong>200</strong> characters. You&#8217;ve used <strong className={reasonLengthColor}>{reasonLength}</strong></>} hint={errors.reason || <>Max: <strong>200</strong> characters. You&#8217;ve used <strong className={reasonLengthColor}>{reasonLength}</strong></>}
rows={3} rows={4}
title="Short description" title="Short description"
value={formState.reason ?? ''} value={formState.reason ?? ''}
onChange={(e) => { onChange={(e) => {