Added view site link to themes modal (#18080)

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

- "View site" link was missing in the new theme preview modal
- The size of the preview was not responding to smaller screens

apps/admin-x-settings/src/admin-x-ds/assets/icons/arrow-bottom-left.svg

@@ -0,0 +1 @@
+<svg id="Regular" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5"><defs></defs><title>arrow-corner-left</title><path d="M20.16 3.75 4.25 19.66" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="m4.25 4.66 0 15 15 0" fill-rule="evenodd" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg>

apps/admin-x-settings/src/admin-x-ds/assets/icons/arrow-bottom-right.svg

@@ -0,0 +1 @@
+<svg id="Regular" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5"><defs></defs><title>arrow-corner-right</title><path d="m4 3.75 15.91 15.91" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="m4.91 19.66 15 0 0-15" fill-rule="evenodd" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg>

apps/admin-x-settings/src/admin-x-ds/assets/icons/arrow-top-left.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.16 20.25L4.25 4.34" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.25 19.3398V4.33984H19.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

apps/admin-x-settings/src/admin-x-ds/assets/icons/arrow-top-right.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.84 20.25L19.75 4.34" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19.75 19.3398V4.33984H4.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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

@@ -1,6 +1,7 @@
 import ButtonGroup from '../ButtonGroup';
 import DesktopChrome from '../chrome/DesktopChrome';
 import Heading, {HeadingLevel} from '../Heading';
+import Icon from '../Icon';
 import MobileChrome from '../chrome/MobileChrome';
 import Modal, {ModalSize} from './Modal';
 import NiceModal, {useModal} from '@ebay/nice-modal-react';
@@ -28,6 +29,7 @@ export interface PreviewModalProps {
     leftToolbar?: boolean;
     rightToolbar?: boolean;
     deviceSelector?: boolean;
+    siteLink?: string;
     previewToolbarURLs?: SelectOption[];
     previewBgColor?: 'grey' | 'white' | 'greygradient';
     selectedURL?: string;
@@ -61,6 +63,7 @@ export const PreviewModalContent: React.FC<PreviewModalProps> = ({
     leftToolbar = true,
     rightToolbar = true,
     deviceSelector = true,
+    siteLink,
     previewToolbarURLs,
     previewBgColor = 'grey',
     selectedURL,
@@ -119,32 +122,34 @@ export const PreviewModalContent: React.FC<PreviewModalProps> = ({
 
         const selectedIconColorClass = 'text-black dark:text-green';
         const unSelectedIconColorClass = 'text-grey-500 dark:text-grey-600';
+        const rightButtons:ButtonProps[] = [
+            {
+                icon: 'laptop',
+                label: 'Desktop',
+                hideLabel: true,
+                link: true,
+                size: 'sm',
+                iconColorClass: (view === 'desktop' ? selectedIconColorClass : unSelectedIconColorClass),
+                onClick: onSelectDesktopView || (() => {
+                    setView('desktop');
+                })
+            },
+            {
+                icon: 'mobile',
+                label: 'Mobile',
+                hideLabel: true,
+                link: true,
+                size: 'sm',
+                iconColorClass: (view === 'mobile' ? selectedIconColorClass : unSelectedIconColorClass),
+                onClick: onSelectMobileView || (() => {
+                    setView('mobile');
+                })
+            }
+        ];
+
         const toolbarRight = deviceSelector && (
             <ButtonGroup
-                buttons={[
-                    {
-                        icon: 'laptop',
-                        label: 'Desktop',
-                        hideLabel: true,
-                        link: true,
-                        size: 'sm',
-                        iconColorClass: (view === 'desktop' ? selectedIconColorClass : unSelectedIconColorClass),
-                        onClick: onSelectDesktopView || (() => {
-                            setView('desktop');
-                        })
-                    },
-                    {
-                        icon: 'mobile',
-                        label: 'Mobile',
-                        hideLabel: true,
-                        link: true,
-                        size: 'sm',
-                        iconColorClass: (view === 'mobile' ? selectedIconColorClass : unSelectedIconColorClass),
-                        onClick: onSelectMobileView || (() => {
-                            setView('mobile');
-                        })
-                    }
-                ]}
+                buttons={rightButtons}
             />
         );
 
@@ -160,6 +165,15 @@ export const PreviewModalContent: React.FC<PreviewModalProps> = ({
             previewBgClass
         );
 
+        let viewSiteButton;
+        if (siteLink) {
+            viewSiteButton = (
+                <div className='ml-3 border-l border-grey-400 dark:border-grey-800'>
+                    <a className='ml-3 flex items-center gap-1 text-sm' href={siteLink} rel="noopener noreferrer" target="_blank">View site <Icon name='arrow-top-right' size='xs' /></a>
+                </div>
+            );
+        }
+
         preview = (
             <div className={containerClasses}>
                 {previewToolbar && <header className="relative flex h-[74px] shrink-0 items-center justify-center px-3 py-5" data-testid="design-toolbar">
@@ -168,6 +182,7 @@ export const PreviewModalContent: React.FC<PreviewModalProps> = ({
                     </div>}
                     {rightToolbar && <div className='absolute right-5 flex h-full items-center'>
                         {toolbarRight}
+                        {viewSiteButton}
                     </div>}
                 </header>}
                 <div className='flex grow items-center justify-center text-sm text-grey-400'>

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

@@ -229,6 +229,7 @@ const DesignModal: React.FC = () => {
         selectedURL={selectedPreviewTab}
         sidebar={sidebarContent}
         sidebarPadding={false}
+        siteLink={getHomepageUrl(siteData!)}
         size='full'
         testId='design-modal'
         title='Design'

apps/admin-x-settings/src/components/settings/site/designAndBranding/ThemePreview.tsx

@@ -101,10 +101,10 @@ const ThemePreview: React.FC<ThemePreviewProps> = ({settings,url}) => {
         <>
             <iframe
                 ref={iframeRef}
+                className='h-[110%] w-[110%] origin-top-left scale-[.90909] max-[1600px]:h-[130%] max-[1600px]:w-[130%] max-[1600px]:scale-[.76923]'
                 data-testid="theme-preview"
                 height="100%"
                 title="Site Preview"
-                width="100%"
             ></iframe>
         </>
     );