From f05b6a6037468f09694cd5d2eb0b039de9246d77 Mon Sep 17 00:00:00 2001
From: Peter Zimon <peter.zimon@gmail.com>
Date: Wed, 7 Jun 2023 10:29:03 +0200
Subject: [PATCH] Added unstyled property to image uploads AdminX

refs. https://github.com/TryGhost/Team/issues/3354
---
 .../src/admin-x-ds/global/ImageUpload.tsx     | 25 +++++++++-----
 .../settings/general/UserDetailModal.tsx      |  9 ++---
 .../site/designAndBranding/BrandSettings.tsx  | 34 +++++++++++++++----
 3 files changed, 50 insertions(+), 18 deletions(-)

diff --git a/ghost/admin-x-settings/src/admin-x-ds/global/ImageUpload.tsx b/ghost/admin-x-settings/src/admin-x-ds/global/ImageUpload.tsx
index 6c543ff51d..c7e4879da8 100644
--- a/ghost/admin-x-settings/src/admin-x-ds/global/ImageUpload.tsx
+++ b/ghost/admin-x-settings/src/admin-x-ds/global/ImageUpload.tsx
@@ -8,6 +8,7 @@ interface ImageUploadProps {
     width?: string;
     height?: string;
     imageURL?: string;
+    unstyled?: boolean;
     imageClassName?: string;
     fileUploadClassName?: string;
     deleteButtonClassName?: string;
@@ -22,18 +23,26 @@ const ImageUpload: React.FC<ImageUploadProps> = ({
     width,
     height = '120px',
     imageURL,
-    imageClassName = 'group relative bg-cover',
-    fileUploadClassName = 'flex cursor-pointer items-center justify-center rounded border border-grey-100 bg-grey-75 p-3 text-sm font-semibold text-grey-800 hover:text-black',
-    deleteButtonClassName = 'invisible absolute right-4 top-4 flex h-8 w-8 cursor-pointer items-center justify-center rounded bg-[rgba(0,0,0,0.75)] text-white hover:bg-black group-hover:!visible',
-    deleteButtonContent = <Icon color='white' name='trash' size='sm' />,
+    imageClassName,
+    fileUploadClassName,
+    deleteButtonClassName,
+    deleteButtonContent,
+    unstyled = false,
     onUpload,
     onDelete
 }) => {
+    if (!unstyled) {
+        imageClassName = imageClassName || 'group relative bg-cover';
+        fileUploadClassName = fileUploadClassName || 'flex cursor-pointer items-center justify-center rounded border border-grey-100 bg-grey-75 p-3 text-sm font-semibold text-grey-800 hover:text-black';
+        deleteButtonClassName = deleteButtonClassName || 'invisible absolute right-4 top-4 flex h-8 w-8 cursor-pointer items-center justify-center rounded bg-[rgba(0,0,0,0.75)] text-white hover:bg-black group-hover:!visible';
+        deleteButtonContent = deleteButtonContent || <Icon color='white' name='trash' size='sm' />;
+    }
+
     if (imageURL) {
         return (
             <div className={imageClassName} style={{
-                width: width,
-                height: height,
+                width: (unstyled ? '' : width),
+                height: (unstyled ? '' : height),
                 backgroundImage: `url(${imageURL})`
             }}>
                 <button className={deleteButtonClassName} type='button' onClick={onDelete}>
@@ -45,8 +54,8 @@ const ImageUpload: React.FC<ImageUploadProps> = ({
         return (
             <FileUpload className={fileUploadClassName} id={id} style={
                 {
-                    width: width,
-                    height: height
+                    width: (unstyled ? '' : width),
+                    height: (unstyled ? '' : height)
                 }
             } onUpload={onUpload}>
                 {children}
diff --git a/ghost/admin-x-settings/src/components/settings/general/UserDetailModal.tsx b/ghost/admin-x-settings/src/components/settings/general/UserDetailModal.tsx
index 87d8c096e6..bc98fc31a8 100644
--- a/ghost/admin-x-settings/src/components/settings/general/UserDetailModal.tsx
+++ b/ghost/admin-x-settings/src/components/settings/general/UserDetailModal.tsx
@@ -629,6 +629,7 @@ const UserDetailModal:React.FC<UserDetailModalProps> = ({user, updateUser}) => {
                         id='cover-image'
                         imageClassName='absolute inset-0 bg-cover group bg-center rounded-t overflow-hidden'
                         imageURL={userData.cover_image || ''}
+                        unstyled={true}
                         onDelete={() => {
                             handleImageDelete('cover_image');
                         }}
@@ -640,14 +641,14 @@ const UserDetailModal:React.FC<UserDetailModalProps> = ({user, updateUser}) => {
                         <Menu items={menuItems} position='left' trigger={<UserMenuTrigger />}></Menu>
                     </div>
                     <div className='relative flex items-center gap-4 px-12 pb-12 pt-60'>
-
                         <ImageUpload
                             deleteButtonClassName='invisible absolute -right-2 -top-2 flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-[rgba(0,0,0,0.75)] text-white hover:bg-black group-hover:!visible'
-                            fileUploadClassName='rounded-full bg-black flex items-center justify-center opacity-80 transition hover:opacity-100 -ml-2 cursor-pointer'
-                            height='80px'
+                            deleteButtonContent={<Icon color='white' name='trash' size='sm' />}
+                            fileUploadClassName='rounded-full bg-black flex items-center justify-center opacity-80 transition hover:opacity-100 -ml-2 cursor-pointer h-[80px] w-[80px]'
                             id='avatar'
-                            imageClassName='relative rounded-full group bg-cover bg-center -ml-2'
+                            imageClassName='relative rounded-full group bg-cover bg-center -ml-2 h-[80px] w-[80px]'
                             imageURL={userData.profile_image}
+                            unstyled={true}
                             width='80px'
                             onDelete={() => {
                                 handleImageDelete('profile_image');
diff --git a/ghost/admin-x-settings/src/components/settings/site/designAndBranding/BrandSettings.tsx b/ghost/admin-x-settings/src/components/settings/site/designAndBranding/BrandSettings.tsx
index 567fbbce26..a098bb74aa 100644
--- a/ghost/admin-x-settings/src/components/settings/site/designAndBranding/BrandSettings.tsx
+++ b/ghost/admin-x-settings/src/components/settings/site/designAndBranding/BrandSettings.tsx
@@ -1,6 +1,6 @@
-import Button from '../../../../admin-x-ds/global/Button';
 import Heading from '../../../../admin-x-ds/global/Heading';
 import Hint from '../../../../admin-x-ds/global/Hint';
+import ImageUpload from '../../../../admin-x-ds/global/ImageUpload';
 import React from 'react';
 import SettingGroupContent from '../../../../admin-x-ds/settings/SettingGroupContent';
 import TextField from '../../../../admin-x-ds/global/TextField';
@@ -40,16 +40,38 @@ const BrandSettings: React.FC = () => {
                     <Heading level={6}>Publication icon</Heading>
                     <div className='mt-2 flex gap-3'>
                         <Hint className='mr-5'>A square, social icon, at least 60x60px</Hint>
-                        <Button color='grey' label='Upload icon' />
+                        <ImageUpload
+                            height='36px'
+                            id='logo'
+                            width='150px'
+                            onDelete={() => {}}
+                            onUpload={() => {}}
+                        >
+                        Upload icon
+                        </ImageUpload>
                     </div>
                 </div>
                 <div>
-                    <Heading level={6}>Publication logo</Heading>
-                    <Button className='mt-2' color='grey' fullWidth={true} label='Upload logo' />
+                    <Heading className='mb-2' level={6}>Publication logo</Heading>
+                    <ImageUpload
+                        height='80px'
+                        id='logo'
+                        onDelete={() => {}}
+                        onUpload={() => {}}
+                    >
+                    Upload logo
+                    </ImageUpload>
                 </div>
                 <div>
-                    <Heading level={6}>Publication cover</Heading>
-                    <Button className='mt-2' color='grey' fullWidth={true} label='Upload cover' />
+                    <Heading className='mb-2' level={6}>Publication cover</Heading>
+                    <ImageUpload
+                        height='140px'
+                        id='cover'
+                        onDelete={() => {}}
+                        onUpload={() => {}}
+                    >
+                    Upload cover
+                    </ImageUpload>
                 </div>
             </SettingGroupContent>
         </div>