Improved Add/Edit Recommendations flow design (#17923)

refs https://github.com/TryGhost/Product/issues/3773

- Improved recommendation preview in the modal
- Added separate Back button
- Fixed Table spacing issue

apps/admin-x-settings/src/admin-x-ds/global/Table.tsx

@@ -34,7 +34,7 @@ const Table: React.FC<TableProps> = ({children, borderTop, hint, hintSeparator,
                     </tbody>
                 </table>
                 {hint &&
-                <div>
+                <div className="-mt-px">
                     {hintSeparator && <Separator />}
                     <div className="flex justify-between">
                         <Hint>{hint}</Hint>

apps/admin-x-settings/src/components/settings/site/recommendations/AddRecommendationModalConfirm.tsx

@@ -42,14 +42,24 @@ const AddRecommendationModalConfirm: React.FC<AddRecommendationModalProps> = ({r
         okLabel = 'Added';
     }
 
+    let leftButtonProps = {
+        label: 'Back',
+        icon: 'arrow-left',
+        size: 'sm' as const,
+        onClick: () => {
+            alert('Left button click');
+        }
+    };
+
     return <Modal
         afterClose={() => {
             // Closed without saving: reset route
             updateRoute('recommendations');
         }}
         animate={animate ?? true}
-        cancelLabel={'Back'}
+        cancelLabel={'Cancel'}
         dirty={true}
+        leftButtonProps={leftButtonProps}
         okColor='black'
         okLabel={okLabel}
         size='sm'

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

@@ -1,7 +1,9 @@
 import Avatar from '../../../../admin-x-ds/global/Avatar';
 import Form from '../../../../admin-x-ds/global/form/Form';
+import Heading from '../../../../admin-x-ds/global/Heading';
 import React from 'react';
 import TextArea from '../../../../admin-x-ds/global/form/TextArea';
+import TextField from '../../../../admin-x-ds/global/form/TextField';
 import {EditOrAddRecommendation, Recommendation} from '../../../../api/recommendations';
 
 interface Props<T extends EditOrAddRecommendation> {
@@ -14,17 +16,24 @@ const RecommendationReasonForm: React.FC<Props<EditOrAddRecommendation | Recomme
         marginBottom={false}
         marginTop
     >
-        <div className='mb-4 flex items-center gap-3 rounded-sm border border-grey-300 p-3'>
+        <div>
-            {(formState.favicon || formState.featured_image) && <Avatar image={formState.favicon ?? formState.featured_image!} labelColor='white' />}
+            <Heading className='mb-2 block text-2xs font-semibold uppercase tracking-wider text-grey-700'>Preview</Heading>
-            <div className={`flex grow flex-col`}>
+            <a className='flex items-center gap-3 rounded-sm border border-grey-300 p-3' href={formState.url} rel="noopener noreferrer" target="_blank">
-                <span className='mb-0.5 font-medium'>{formState.title}</span>
+                {(formState.favicon || formState.featured_image) && <Avatar image={formState.favicon ?? formState.featured_image!} labelColor='white' />}
-                <span className='text-xs leading-snug text-grey-700'>{formState.url}</span>
+                <div className={`flex grow flex-col`}>
-            </div>
+                    <span className='word-wrap mb-0.5 font-medium'>{formState.title}</span>
+                    <span className='word-wrap text-xs leading-snug text-grey-700'>{formState.url}</span>
+                </div>
+            </a>
         </div>
+        <TextField
+            title="Title"
+            value={formState.title ?? ''}
+        />
         <TextArea
             clearBg={true}
             rows={3}
-            title="Reason for recommending"
+            title="Reason for recommending (optional)"
             value={formState.reason ?? ''}
             onChange={e => updateForm(state => ({...state, reason: e.target.value}))}
         />