From 6822c6db242601ad555959befad10cde72965943 Mon Sep 17 00:00:00 2001
From: Djordje Vlaisavljevic <dzvlais@gmail.com>
Date: Mon, 18 Sep 2023 13:35:51 +0100
Subject: [PATCH] Added "Subscribe" button to Ghost-site previews

refs https://github.com/TryGhost/Product/issues/3857
---
 .../recommendations/RecommendationReasonForm.tsx    | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 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 96f12840d0..490a73132a 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
@@ -35,12 +35,15 @@ 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 flex-col rounded-sm border border-grey-300 p-3' href={formState.url} rel="noopener noreferrer" target="_blank">
-                <div className="flex items-center gap-2">
-                    <RecommendationIcon {...formState} />
-                    <span className='text-[1.6rem] font-semibold text-grey-900'>{formState.title}</span>
+            <a className='flex items-center justify-between rounded-sm border border-grey-300 p-3' href={formState.url} rel="noopener noreferrer" target="_blank">
+                <div className='flex flex-col gap-1'>
+                    <div className="flex items-center gap-2">
+                        <RecommendationIcon {...formState} />
+                        <span className='text-[1.6rem] font-semibold text-grey-900'>{formState.title}</span>
+                    </div>
+                    {formState.reason && <span className='text-md font-medium leading-snug text-grey-700'>{formState.reason}</span>}
                 </div>
-                <span className='mb-1 text-md font-medium leading-snug text-grey-700'>{formState.reason}</span>
+                {formState.one_click_subscribe && <span className='flex whitespace-nowrap text-md font-semibold text-green'>Subscribe</span>}
             </a>
             {formState.one_click_subscribe && <Hint>This is a Ghost site, so your readers can subscribe with just one click</Hint>}
         </div>