From 168db1f1962d13c7305459922232685fd20d53ea Mon Sep 17 00:00:00 2001
From: Djordje Vlaisavljevic <dzvlais@gmail.com>
Date: Wed, 12 Jul 2023 21:56:59 +0100
Subject: [PATCH] Updated `DesktopChrome` component and its usage (#17330)

- Updated `DesktopChrome` component
- Refactored the existing `PreviewModal` and `ThemePreview`
components to use the new component and removed some redundant code
- Added storybook for the component
---
 .../src/admin-x-ds/global/modal/PreviewModal.tsx | 16 ++++++++--------
 .../settings/site/theme/ThemePreview.tsx         |  7 +++++--
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/apps/admin-x-settings/src/admin-x-ds/global/modal/PreviewModal.tsx b/apps/admin-x-settings/src/admin-x-ds/global/modal/PreviewModal.tsx
index 224da31852..ed7a2cf272 100644
--- a/apps/admin-x-settings/src/admin-x-ds/global/modal/PreviewModal.tsx
+++ b/apps/admin-x-settings/src/admin-x-ds/global/modal/PreviewModal.tsx
@@ -1,6 +1,5 @@
 import ButtonGroup from '../ButtonGroup';
 import DesktopChrome from '../chrome/DesktopChrome';
-import DesktopChromeHeader from '../chrome/DesktopChromeHeader';
 import Heading from '../Heading';
 import MobileChrome from '../chrome/MobileChrome';
 import Modal, {ModalSize} from './Modal';
@@ -147,13 +146,14 @@ export const PreviewModalContent: React.FC<PreviewModalProps> = ({
 
         preview = (
             <div className={`min-w-100 absolute inset-y-0 left-0 right-[400px] flex grow flex-col overflow-y-scroll ${previewBgColor === 'grey' ? 'bg-grey-50' : 'bg-white'}`}>
-                {previewToolbar && <DesktopChromeHeader
-                    data-testid="design-toolbar"
-                    size='lg'
-                    toolbarCenter={<></>}
-                    toolbarLeft={leftToolbar && toolbarLeft}
-                    toolbarRight={rightToolbar && toolbarRight}
-                />}
+                {previewToolbar && <header className="relative flex h-[74px] shrink-0 items-center justify-center px-3 py-5" data-testid="design-toolbar">
+                    {leftToolbar && <div className='absolute left-5 flex h-full items-center'>
+                        {toolbarLeft}
+                    </div>}
+                    {rightToolbar && <div className='absolute right-5 flex h-full items-center'>
+                        {toolbarRight}
+                    </div>}
+                </header>}
                 <div className='flex h-full grow items-center justify-center text-sm text-grey-400'>
                     {preview}
                 </div>
diff --git a/apps/admin-x-settings/src/components/settings/site/theme/ThemePreview.tsx b/apps/admin-x-settings/src/components/settings/site/theme/ThemePreview.tsx
index 019e23ba86..9aea53b67e 100644
--- a/apps/admin-x-settings/src/components/settings/site/theme/ThemePreview.tsx
+++ b/apps/admin-x-settings/src/components/settings/site/theme/ThemePreview.tsx
@@ -2,6 +2,7 @@ import Breadcrumbs from '../../../../admin-x-ds/global/Breadcrumbs';
 import Button from '../../../../admin-x-ds/global/Button';
 import ButtonGroup from '../../../../admin-x-ds/global/ButtonGroup';
 import ConfirmationModal from '../../../../admin-x-ds/global/modal/ConfirmationModal';
+import DesktopChrome from '../../../../admin-x-ds/global/chrome/DesktopChrome';
 import MobileChrome from '../../../../admin-x-ds/global/chrome/MobileChrome';
 import NiceModal from '@ebay/nice-modal-react';
 import PageHeader from '../../../../admin-x-ds/global/layout/PageHeader';
@@ -105,8 +106,10 @@ const ThemePreview: React.FC<{
             <PageHeader containerClassName='bg-grey-50 z-[100]' left={left} right={right} sticky={false} />
             <div className='flex h-[calc(100%-74px)] grow flex-col items-center justify-center bg-grey-50'>
                 {previewMode === 'desktop' ?
-                    <iframe className='h-full w-full'
-                        src={selectedTheme?.previewUrl} title='Theme preview' />
+                    <DesktopChrome>
+                        <iframe className='h-full w-full'
+                            src={selectedTheme?.previewUrl} title='Theme preview' />
+                    </DesktopChrome>
                     :
                     <MobileChrome>
                         <iframe className='h-full w-full'