Updated recommendations settings design (#17957)

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

- Moved Recommendations under Memberships section in settings sidebar
- Updated design for recommendations to work better with small favicons

apps/admin-x-settings/src/components/Sidebar.tsx

@@ -46,7 +46,6 @@ const Sidebar: React.FC = () => {
                 {/* <SettingNavItem navid='theme' title="Theme" onClick={handleSectionClick} /> */}
                 <SettingNavItem navid='design' title="Branding and design" onClick={handleSectionClick} />
                 <SettingNavItem navid='navigation' title="Navigation" onClick={handleSectionClick} />
-                {hasRecommendations && <SettingNavItem navid='recommendations' title="Recommendations" onClick={handleSectionClick} />}
             </SettingNavSection>
 
             <SettingNavSection title="Membership">
@@ -55,6 +54,7 @@ const Sidebar: React.FC = () => {
                 <SettingNavItem navid='tiers' title="Tiers" onClick={handleSectionClick} />
                 {hasTipsAndDonations && <SettingNavItem navid='tips-or-donations' title="Tips or donations" onClick={handleSectionClick} />}
                 <SettingNavItem navid='analytics' title="Analytics" onClick={handleSectionClick} />
+                {hasRecommendations && <SettingNavItem navid='recommendations' title="Recommendations" onClick={handleSectionClick} />}
             </SettingNavSection>
 
             <SettingNavSection title="Email newsletters">

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

@@ -1,4 +1,3 @@
-import Avatar from '../../../../admin-x-ds/global/Avatar';
 import Button from '../../../../admin-x-ds/global/Button';
 import ConfirmationModal from '../../../../admin-x-ds/global/modal/ConfirmationModal';
 import NiceModal from '@ebay/nice-modal-react';
@@ -42,10 +41,12 @@ const RecommendationItem: React.FC<{recommendation: Recommendation}> = ({recomme
         <TableRow action={action} hideActions>
             <TableCell onClick={showDetails}>
                 <div className='group flex items-center gap-3 hover:cursor-pointer'>
-                    {recommendation.favicon && <Avatar image={recommendation.favicon} labelColor='white' />}
                     <div className={`flex grow flex-col`}>
-                        <span className='mb-0.5 font-medium'>{recommendation.title}</span>
+                        <div className="mb-1 flex items-center gap-2">
-                        <span className='text-xs leading-snug text-grey-700'>{recommendation.reason || 'No reason'}</span>
+                            {recommendation.favicon && <img alt={recommendation.title} className="h-5 w-5 rounded-sm" src={recommendation.favicon} />}
+                            <span className='line-clamp-1'>{recommendation.title}</span>
+                        </div>
+                        <span className='line-clamp-1 text-xs leading-snug text-grey-700'>{recommendation.reason || 'No reason added'}</span>
                     </div>
                 </div>
             </TableCell>

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

@@ -1,4 +1,3 @@
-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';
@@ -20,14 +19,15 @@ const RecommendationReasonForm: React.FC<Props<EditOrAddRecommendation | Recomme
     >
         <div>
             <Heading className='mb-2 block text-2xs font-semibold uppercase tracking-wider text-grey-700'>Preview</Heading>
-            <a className='flex items-center gap-3 rounded-sm border border-grey-300 p-3' href={formState.url} rel="noopener noreferrer" target="_blank">
+            <a className='flex flex-col rounded-sm border border-grey-300 p-3' href={formState.url} rel="noopener noreferrer" target="_blank">
-                {(formState.favicon || formState.featured_image) && <Avatar image={formState.favicon ?? formState.featured_image!} labelColor='white' />}
+                <div className="mb-1 flex items-center gap-2">
-                <div className={`flex grow flex-col`}>
+                    {(formState.favicon || formState.featured_image) && <img alt={formState.title} className="h-5 w-5 rounded-sm" src={formState.favicon ?? formState.featured_image!} />}
-                    <span className='word-wrap mb-0.5 font-medium'>{formState.title}</span>
+                    <span className='line-clamp-1 font-medium'>{formState.title}</span>
-                    <span className='word-wrap text-xs leading-snug text-grey-700'>{formState.url}</span>
                 </div>
+                <span className='line-clamp-1 text-xs leading-snug text-grey-700'>{formState.url}</span>
             </a>
         </div>
+
         <TextField
             error={Boolean(errors.title)}
             hint={errors.title}