From f48dc5a847c6204ea52746994d92e99c3c308f56 Mon Sep 17 00:00:00 2001
From: Peter Zimon <peter.zimon@gmail.com>
Date: Wed, 7 Jun 2023 15:19:59 +0200
Subject: [PATCH] Added inner scrolling for Design sidebar in AdminX

refs. https://github.com/TryGhost/Team/issues/3354
---
 .../src/admin-x-ds/global/Modal.tsx           |  2 +-
 .../src/admin-x-ds/global/PreviewModal.tsx    |  2 +-
 .../global/StickyFooter.stories.tsx           |  3 +-
 .../src/admin-x-ds/global/StickyFooter.tsx    | 67 +++++++++++++------
 .../components/settings/site/DesignModal.tsx  | 16 ++++-
 5 files changed, 65 insertions(+), 25 deletions(-)

diff --git a/ghost/admin-x-settings/src/admin-x-ds/global/Modal.tsx b/ghost/admin-x-settings/src/admin-x-ds/global/Modal.tsx
index a47dec028f..4848506482 100644
--- a/ghost/admin-x-settings/src/admin-x-ds/global/Modal.tsx
+++ b/ghost/admin-x-settings/src/admin-x-ds/global/Modal.tsx
@@ -169,7 +169,7 @@ const Modal: React.FC<ModalProps> = ({
     );
 
     const footer = (stickyFooter ?
-        <StickyFooter bgTWColor='white' shiftY={footerContainerBottom}>
+        <StickyFooter shiftY={footerContainerBottom}>
             {footerContent}
         </StickyFooter>
         :
diff --git a/ghost/admin-x-settings/src/admin-x-ds/global/PreviewModal.tsx b/ghost/admin-x-settings/src/admin-x-ds/global/PreviewModal.tsx
index 5cce8c17c4..6c0e969974 100644
--- a/ghost/admin-x-settings/src/admin-x-ds/global/PreviewModal.tsx
+++ b/ghost/admin-x-settings/src/admin-x-ds/global/PreviewModal.tsx
@@ -73,7 +73,7 @@ const PreviewModal: React.FC<PreviewModalProps> = ({
                             </>
                         </div>
                     )}
-                    <div className={`grow ${sidebarPadding && 'p-7'}`}>
+                    <div className={`grow ${sidebarPadding && 'p-7'} flex flex-col justify-between overflow-y-auto`}>
                         {sidebar}
                     </div>
                 </div>
diff --git a/ghost/admin-x-settings/src/admin-x-ds/global/StickyFooter.stories.tsx b/ghost/admin-x-settings/src/admin-x-ds/global/StickyFooter.stories.tsx
index 989855f264..16b6746f08 100644
--- a/ghost/admin-x-settings/src/admin-x-ds/global/StickyFooter.stories.tsx
+++ b/ghost/admin-x-settings/src/admin-x-ds/global/StickyFooter.stories.tsx
@@ -31,6 +31,7 @@ const footerContents = (
 
 export const Default: Story = {
     args: {
-        children: footerContents
+        children: footerContents,
+        contentBgColorClass: 'bg-[#efefef]'
     }
 };
diff --git a/ghost/admin-x-settings/src/admin-x-ds/global/StickyFooter.tsx b/ghost/admin-x-settings/src/admin-x-ds/global/StickyFooter.tsx
index 45921f6b96..098d8d0de6 100644
--- a/ghost/admin-x-settings/src/admin-x-ds/global/StickyFooter.tsx
+++ b/ghost/admin-x-settings/src/admin-x-ds/global/StickyFooter.tsx
@@ -3,34 +3,61 @@ import clsx from 'clsx';
 
 interface StickyFooterProps {
     shiftY?: string;
-    bgTWColor: string;
+    footerBgColorClass?: string;
+    contentBgColorClass?: string;
+    height?: number;
     children?: React.ReactNode;
-
-    containerClasses?: string;
-    contentClasses?: string;
 }
 
-const StickyFooter: React.FC<StickyFooterProps> = ({shiftY, bgTWColor = 'white', children, containerClasses, contentClasses}) => {
-    const footerContainerBottom = shiftY ? `calc(${shiftY})` : '0';
-    const shadowBottom = shiftY ? `calc(${shiftY} + 72px)` : '72px';
-
-    const footerContainerClasses = clsx(
-        'w-100 sticky z-[100]',
-        containerClasses
+const StickyFooter: React.FC<StickyFooterProps> = ({
+    shiftY,
+    footerBgColorClass = 'bg-white',
+    contentBgColorClass = 'bg-white',
+    height = 96,
+    children
+}) => {
+    const containerClasses = clsx(
+        'w-100 sticky bottom-[-24px] z-[9997] m-0 box-border p-0'
     );
+    const containerBottom = shiftY ? `calc(${shiftY} - 24px)` : '-24px';
+    const containerHeight = `${height + 24}px`;
 
-    const shadowClasses = `sticky bottom-[72px] mx-2 block h-[22px] rounded-full shadow-[0_0_0_1px_rgba(0,0,0,.025),0_-8px_16px_-3px_rgba(0,0,0,.08)]`;
-
-    const footerClasses = clsx(
-        `bg-${bgTWColor} sticky z-[101] mb-[-24px] flex min-h-[48px] items-center justify-between`,
-        contentClasses
+    const coverClasses = clsx(
+        'sticky z-[9998] block h-[24px]',
+        contentBgColorClass
     );
+    const coverBottom = '0';
+
+    const contentClasses = clsx(
+        `sticky z-[9999] mb-[-24px] flex items-center justify-between`,
+        // 'min-h-[48px]',
+        'h-[96px]',
+        footerBgColorClass
+    );
+    const contentBottom = '0';
+    const contentHeight = `${height}px`;
+
+    const shadowClasses = `sticky mx-2 block h-[24px] rounded-full shadow-[0_0_0_1px_rgba(0,0,0,.025),0_-8px_16px_-3px_rgba(0,0,0,.08)]`;
+    const shadowBottom = shiftY ? `calc(${shiftY} + ${height - 24}px)` : `${height - 24}px`;
 
     return (
-        <div className={footerContainerClasses} style={{
-            bottom: footerContainerBottom
-        }}>
-            <div className={footerClasses}>
+        <div className={containerClasses}
+            style={{
+                bottom: containerBottom,
+                height: containerHeight
+            }}
+        >
+            <div className={coverClasses}
+                style={{
+                    bottom: coverBottom
+                }}
+            ></div>
+            <div className={contentClasses}
+                style={{
+                    bottom: contentBottom,
+                    height: contentHeight
+                }}
+            >
                 {children}
             </div>
             <div className={shadowClasses}
diff --git a/ghost/admin-x-settings/src/components/settings/site/DesignModal.tsx b/ghost/admin-x-settings/src/components/settings/site/DesignModal.tsx
index 9721073eec..b0818dcdd5 100644
--- a/ghost/admin-x-settings/src/components/settings/site/DesignModal.tsx
+++ b/ghost/admin-x-settings/src/components/settings/site/DesignModal.tsx
@@ -4,6 +4,7 @@ import NiceModal from '@ebay/nice-modal-react';
 import PreviewModal from '../../../admin-x-ds/global/PreviewModal';
 import React from 'react';
 import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
+import StickyFooter from '../../../admin-x-ds/global/StickyFooter';
 import TabView from '../../../admin-x-ds/global/TabView';
 import ThemePreview from './designAndBranding/ThemePreivew';
 import ThemeSettings from './designAndBranding/ThemeSettings';
@@ -34,7 +35,17 @@ const Sidebar: React.FC = () => {
     ];
 
     return (
-        <TabView tabs={tabs} />
+        <>
+            <div className='p-7'>
+                <TabView tabs={tabs} />
+            </div>
+            <StickyFooter>
+                <button className='flex w-full cursor-pointer flex-col px-7' type='button' onClick={() => {}}>
+                    <strong>Change theme</strong>
+                    <span className='text-sm text-grey-600'>Casper</span>
+                </button>
+            </StickyFooter>
+        </>
     );
 };
 
@@ -44,7 +55,8 @@ const DesignModal: React.FC = () => {
             title: 'Design',
             okLabel: 'Save',
             preview: <ThemePreview />,
-            sidebar: <Sidebar />
+            sidebar: <Sidebar />,
+            sidebarPadding: false
         });
     };