AdminX Newsletters refinements (#17594)

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

- added tableCell hover pointer cursor
- updated Stripe connect button copy
- added bottom margin to main container for better scrolling / navigation highlighting

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

@@ -4,6 +4,7 @@ import clsx from 'clsx';
 const TableCell: React.FC<HTMLProps<HTMLTableCellElement>> = ({className, children, ...props}) => {
     const tableCellClasses = clsx(
         '!py-3 !pl-0 !pr-6 align-top',
+        props.onClick && 'hover:cursor-pointer',
         className
     );
 

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

@@ -7,7 +7,7 @@ import SiteSettings from './settings/site/SiteSettings';
 
 const Settings: React.FC = () => {
     return (
-        <>
+        <div className='mb-[40vh]'>
             <GeneralSettings />
             <SiteSettings />
             <MembershipSettings />
@@ -15,7 +15,7 @@ const Settings: React.FC = () => {
             <div className='mt-40 text-sm'>
                 <a className='text-green' href="/ghost/#/settings">Click here</a> to open the original Admin settings.
             </div>
-        </>
+        </div>
     );
 };
 

apps/admin-x-settings/src/components/settings/membership/Tiers.tsx

@@ -57,7 +57,7 @@ const Tiers: React.FC<{ keywords: string[] }> = ({keywords}) => {
             customButtons={checkStripeEnabled(settings, config) ?
                 <button className='group flex items-center gap-2 rounded border border-grey-300 px-3 py-1.5 text-sm font-semibold text-grey-900 transition-all hover:border-grey-500' type='button' onClick={openConnectModal}>
                     <span className="inline-flex h-2 w-2 rounded-full bg-green transition-all group-hover:bg-[#625BF6]"></span>
-                    Stripe connected
+                    Connected to Stripe
                 </button>
                 :
                 <StripeButton onClick={openConnectModal}/>}