From a5a5c2ea71ac12677952f3a7374a4817a0e085e2 Mon Sep 17 00:00:00 2001
From: Djordje Vlaisavljevic <dzvlais@gmail.com>
Date: Tue, 3 Oct 2023 11:58:56 +0100
Subject: [PATCH] Updated recommendation preview design

refs https://github.com/TryGhost/Product/issues/3991
---
 .../RecommendationReasonForm.tsx              | 24 ++++++++++++-------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/apps/admin-x-settings/src/components/settings/site/recommendations/RecommendationReasonForm.tsx b/apps/admin-x-settings/src/components/settings/site/recommendations/RecommendationReasonForm.tsx
index a9132a1df3..4f4e9c4711 100644
--- a/apps/admin-x-settings/src/components/settings/site/recommendations/RecommendationReasonForm.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/recommendations/RecommendationReasonForm.tsx
@@ -26,16 +26,22 @@ const RecommendationReasonForm: React.FC<Props<EditOrAddRecommendation | Recomme
     >
         <div>
             <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 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 className="flex items-center justify-center overflow-hidden rounded-sm border border-grey-200 bg-grey-50 px-4">
+                <div className="w-full bg-white py-3 shadow">
+                    <div className="border-y border-grey-200 py-1">
+                        <a className='flex items-center justify-between  bg-white p-3' href={formState.url} rel="noopener noreferrer" target="_blank">
+                            <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>
-                    {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>
             {formState.one_click_subscribe && <Hint>This is a Ghost site, so your readers can subscribe with just one click</Hint>}
         </div>
 
@@ -66,7 +72,7 @@ const RecommendationReasonForm: React.FC<Props<EditOrAddRecommendation | Recomme
             clearBg={true}
             error={Boolean(errors.reason)}
             hint={errors.reason || <>Max: <strong>200</strong> characters. You&#8217;ve used <strong className={reasonLengthColor}>{reasonLength}</strong></>}
-            rows={3}
+            rows={4}
             title="Short description"
             value={formState.reason ?? ''}
             onChange={(e) => {