From 1bfedcfd008fe94c144b82fa79dda9f030a41dc7 Mon Sep 17 00:00:00 2001
From: Djordje Vlaisavljevic <dzvlais@gmail.com>
Date: Wed, 20 Sep 2023 14:32:24 +0100
Subject: [PATCH] Moved Preview above the form

refs https://github.com/TryGhost/Product/issues/3857
---
 .../RecommendationReasonForm.tsx              | 32 +++++++++----------
 1 file changed, 16 insertions(+), 16 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 64cb49502b..0b6dd505da 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
@@ -21,6 +21,21 @@ const RecommendationReasonForm: React.FC<Props<EditOrAddRecommendation | Recomme
         marginBottom={false}
         marginTop
     >
+        <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 p-3' href={formState.url} rel="noopener noreferrer" target="_blank">
+                <div className='flex flex-col gap-[2px]'>
+                    <div className="flex items-center gap-2">
+                        <RecommendationIcon {...formState} />
+                        <span className='line-clamp-1 text-[1.6rem] font-semibold text-grey-900'>{formState.title}</span>
+                    </div>
+                    {formState.reason && <span className='pl-[29px] 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>
+            {formState.one_click_subscribe && <Hint>This is a Ghost site, so your readers can subscribe with just one click</Hint>}
+        </div>
+
         {showURL && <URLTextField
             disabled={true}
             title='URL'
@@ -33,21 +48,6 @@ 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 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='line-clamp-1 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>
-                {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>
-
         <TextField
             error={Boolean(errors.title)}
             hint={errors.title}
@@ -59,7 +59,7 @@ const RecommendationReasonForm: React.FC<Props<EditOrAddRecommendation | Recomme
             clearBg={true}
             hint='Optional, try to keep it under 156 characters'
             rows={3}
-            title="Description"
+            title="Short description"
             value={formState.reason ?? ''}
             onChange={e => updateForm(state => ({...state, reason: e.target.value}))}
         />