Small AdminX UI improments (#17758)

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

- added static Preview button to Tips and Donations
- updated modal buttons in Design settigns, so it doesn't close on save
and easier to play around with various settings

apps/admin-x-settings/src/admin-x-ds/global/chrome/DesktopChrome.tsx

@@ -7,7 +7,7 @@ interface DesktopChromeProps {
 const DesktopChrome: React.FC<DesktopChromeProps & React.HTMLAttributes<HTMLDivElement>> = ({children, ...props}) => {
     return (
         <div className='flex h-full w-full flex-col px-5 pb-5' {...props}>
-            <div className="h-full w-full overflow-hidden rounded-[4px] shadow-xl">
+            <div className="h-full w-full overflow-hidden rounded-[4px] shadow-sm">
                 {children}
             </div>
         </div>

apps/admin-x-settings/src/admin-x-ds/global/modal/ConfirmationModal.tsx

@@ -41,6 +41,7 @@ export const ConfirmationModalContent: React.FC<ConfirmationModalProps> = ({
             size={540}
             testId='confirmation-modal'
             title={title}
+            formSheet
             onCancel={onCancel}
             onOk={async () => {
                 setTaskState('running');

apps/admin-x-settings/src/admin-x-ds/global/modal/PreviewModal.tsx

@@ -193,7 +193,6 @@ export const PreviewModalContent: React.FC<PreviewModalProps> = ({
             key: 'ok-modal',
             label: okLabel,
             color: okColor,
-            className: 'min-w-[80px]',
             onClick: onOk,
             disabled: buttonsDisabled
         });

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

@@ -1,4 +1,5 @@
 import Button from '../../../admin-x-ds/global/Button';
+import Heading from '../../../admin-x-ds/global/Heading';
 import React from 'react';
 import Select from '../../../admin-x-ds/global/form/Select';
 import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
@@ -26,13 +27,19 @@ const TipsOrDonations: React.FC<{ keywords: string[] }> = ({keywords}) => {
                     value: '$12'
                 },
                 {
-                    heading: 'Sharable link',
+                    heading: '',
                     key: 'sharable-link',
                     value: (
-                        <div className='w-100 group relative -m-1 overflow-hidden rounded p-1 hover:bg-grey-50'>
+                        <div className='w-100'>
+                            <div className='flex items-center gap-2'>
+                                <Heading level={6}>Sharable link &mdash;</Heading>
+                                <a className='text-2xs font-semibold uppercase tracking-wider text-green' href="https://ghost.org" rel="noopener noreferrer" target="_blank">Preview</a>
+                            </div>
+                            <div className='w-100 group relative -m-1 mt-0 overflow-hidden rounded p-1 hover:bg-grey-50'>
                             https://example.com/tip
-                            <div className='invisible absolute right-0 top-[50%] flex translate-y-[-50%] gap-1 bg-white pl-1 group-hover:visible'>
+                                <div className='invisible absolute right-0 top-[50%] flex translate-y-[-50%] gap-1 bg-white pl-1 group-hover:visible'>
-                                <Button color='outline' label='Copy' size='sm' />
+                                    <Button color='outline' label='Copy' size='sm' />
+                                </div>
                             </div>
                         </div>
                     )

apps/admin-x-settings/src/components/settings/site/DesignModal.tsx

@@ -213,9 +213,10 @@ const DesignModal: React.FC = () => {
             updateRoute('design');
         }}
         buttonsDisabled={saveState === 'saving'}
+        cancelLabel='Close'
         defaultTab='homepage'
         dirty={saveState === 'unsaved'}
-        okLabel={saveState === 'saved' ? 'Saved' : (saveState === 'saving' ? 'Saving...' : 'Save & close')}
+        okLabel={saveState === 'saved' ? 'Saved' : (saveState === 'saving' ? 'Saving...' : 'Save')}
         preview={previewContent}
         previewToolbarTabs={previewTabs}
         selectedURL={selectedPreviewTab}
@@ -226,8 +227,6 @@ const DesignModal: React.FC = () => {
         title='Design'
         onOk={async () => {
             await handleSave();
-            modal.remove();
-            updateRoute('design');
         }}
         onSelectURL={onSelectURL}
     />;

apps/admin-x-settings/test/e2e/site/design.test.ts

@@ -82,8 +82,6 @@ test.describe('Design settings', async () => {
         await modal.getByLabel('Site description').fill('new description');
         await modal.getByRole('button', {name: 'Save'}).click();
 
-        await expect(modal).not.toBeVisible();
-
         expect(lastPreviewRequest.previewHeader).toMatch(/&d=new\+description&/);
 
         expect(lastApiRequests.editSettings?.body).toEqual({
@@ -132,8 +130,6 @@ test.describe('Design settings', async () => {
         await modal.getByLabel('Navigation layout').selectOption('Logo in the middle');
         await modal.getByRole('button', {name: 'Save'}).click();
 
-        await expect(modal).not.toBeVisible();
-
         const expectedSettings = {navigation_layout: 'Logo in the middle'};
         const expectedEncoded = new URLSearchParams([['custom', JSON.stringify(expectedSettings)]]).toString();
         expect(lastPreviewRequest.previewHeader).toMatch(new RegExp(`&${expectedEncoded.replace(/\+/g, '\\+')}`));