Updated 'upload theme' component in AdminX

refs. https://github.com/TryGhost/Team/issues/3432

ghost/admin-x-settings/src/admin-x-ds/global/FileUpload.stories.tsx

@@ -12,6 +12,16 @@ export default meta;
 type Story = StoryObj<typeof FileUpload>;
 
 export const Default: Story = {
+    args: {
+        id: 'test-file',
+        onUpload: (file: File) => {
+            alert(`You're uploading: ${file.name}`);
+        },
+        children: 'Click here to upload'
+    }
+};
+
+export const Custom: Story = {
     args: {
         id: 'test-file',
         onUpload: (file: File) => {

ghost/admin-x-settings/src/admin-x-ds/global/FileUpload.tsx

@@ -4,9 +4,11 @@ export interface FileUploadProps {
     id: string;
 
     /**
-     * Can be any component that has no default onClick eventh handline. E.g. buttons and links won't work
+     * Can be string or any component that has no default onClick eventh handline.
+     * E.g. buttons and links won't work. If it's text then it's styled as the
+     * default button.
      */
-    children?: React.ReactNode;
+    children?: string | React.ReactNode;
     className?: string;
     onUpload: (file: File) => void;
     style?: {}
@@ -23,7 +25,12 @@ const FileUpload: React.FC<FileUploadProps> = ({id, onUpload, children, style, .
     return (
         <label htmlFor={id} style={style} {...props}>
             <input id={id} type="file" hidden onChange={handleFileChange} />
-            {children}
+            {(typeof children === 'string') ?
+                <div className='inline-flex h-[34px] cursor-pointer items-center justify-center rounded px-4 text-sm font-semibold hover:bg-grey-100'>
+                    {children}
+                </div>
+                :
+                children}
         </label>
     );
 };

ghost/admin-x-settings/src/components/settings/site/ThemeModal.tsx

@@ -1,6 +1,7 @@
 import AdvancedThemeSettings from './theme/AdvancedThemeSettings';
 import Button from '../../../admin-x-ds/global/Button';
 import ButtonGroup from '../../../admin-x-ds/global/ButtonGroup';
+import FileUpload from '../../../admin-x-ds/global/FileUpload';
 import Modal from '../../../admin-x-ds/global/Modal';
 import NewThemePreview from './theme/ThemePreview';
 import NiceModal, {useModal} from '@ebay/nice-modal-react';
@@ -80,16 +81,18 @@ const ChangeThemeModal = NiceModal.create(() => {
                         Installed
                     </button>
                 </div>
-                <ButtonGroup
-                    buttons={[
-                        {label: 'Upload theme', onClick: () => {
-                            alert('Upload');
-                        }},
-                        {label: 'OK', color: 'black', className: 'min-w-[75px]', onClick: () => {
+                <div className='flex items-center gap-3'>
+                    <FileUpload id='theme-uplaod' onUpload={(file: File) => {
+                        alert(file.name);
+                    }}>Upload theme</FileUpload>
+                    <Button
+                        className='min-w-[75px]'
+                        color='black'
+                        label='OK'
+                        onClick = {() => {
                             modal.remove();
-                        }}
-                    ]}
-                />
+                        }} />
+                </div>
             </div>;
     }