Updated AdminX Portal button icons (#17223)

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

Portal button icons in AdminX styling was just placeholders.

apps/admin-x-settings/src/admin-x-ds/assets/icons/upload.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5"><defs></defs><title>upload-bottom</title><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M12.001 15.75v-12"></path><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m16.501 8.25-4.5-4.5-4.5 4.5"></path><path d="M23.251 15.75v1.5a3 3 0 0 1-3 3h-16.5a3 3 0 0 1-3-3v-1.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg>

apps/admin-x-settings/src/admin-x-ds/global/form/ImageUpload.tsx

@@ -18,6 +18,7 @@ interface ImageUploadProps {
     fileUploadClassName?: string;
     deleteButtonClassName?: string;
     deleteButtonContent?: React.ReactNode;
+    deleteButtonUnstyled?: boolean;
 
     /**
      * Removes all the classnames from all elements so you can set a completely custom styling
@@ -40,6 +41,7 @@ const ImageUpload: React.FC<ImageUploadProps> = ({
     fileUploadClassName,
     deleteButtonClassName,
     deleteButtonContent,
+    deleteButtonUnstyled = false,
     imageBWCheckedBg = false,
     unstyled = false,
     onUpload,
@@ -67,10 +69,12 @@ const ImageUpload: React.FC<ImageUploadProps> = ({
 
         );
 
-        deleteButtonClassName = clsx(
+        if (!deleteButtonUnstyled) {
-            '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',
+            deleteButtonClassName = clsx(
-            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',
-        );
+                deleteButtonClassName
+            );
+        }
     }
 
     deleteButtonContent = deleteButtonContent || <Icon colorClass='text-white' name='trash' size='sm' />;

apps/admin-x-settings/src/components/settings/membership/portal/LookAndFeel.tsx

@@ -6,6 +6,8 @@ import Toggle from '../../../../admin-x-ds/global/form/Toggle';
 import {Setting, SettingValue} from '../../../../types/api';
 import {getSettingValues} from '../../../../utils/helpers';
 
+import Heading from '../../../../admin-x-ds/global/Heading';
+import Icon from '../../../../admin-x-ds/global/Icon';
 import ImageUpload from '../../../../admin-x-ds/global/form/ImageUpload';
 import clsx from 'clsx';
 import {ReactComponent as PortalIcon1} from '../../../../assets/icons/portal-icon-1.svg';
@@ -80,21 +82,32 @@ const LookAndFeel: React.FC<{
             onSelect={option => updateSetting('portal_button_style', option)}
         />
         {portalButtonStyle?.toString()?.includes('icon') &&
-            <div className='flex gap-2 border border-green p-4'>
+            <div className='flex flex-col gap-2'>
-                {defaultButtonIcons.map(icon => (
+                <Heading level={6} grey>Icon</Heading>
-                    <button className={clsx('border p-4', currentIcon === icon.value ? 'border-green' : 'border-transparent')} type="button" onClick={() => updateSetting('portal_button_icon', icon.value)}>
+                <div className='flex justify-between'>
-                        <icon.Component className="h-6 w-6 text-green" />
+
-                    </button>
+                    {defaultButtonIcons.map(icon => (
-                ))}
+                        <button className={clsx('border p-3', currentIcon === icon.value ? 'border-green' : 'border-transparent')} type="button" onClick={() => updateSetting('portal_button_icon', icon.value)}>
-                <div className={clsx('w-10 border', currentIcon === uploadedIcon ? 'border-green' : 'border-transparent')}>
+                            <icon.Component className={`h-5 w-5 ${currentIcon === icon.value ? 'text-green' : 'text-black opacity-70 transition-all hover:opacity-100'}`} />
-                    <ImageUpload
+                        </button>
-                        id='test'
+                    ))}
-                        imageClassName='cursor-pointer'
+                    <div className={clsx('relative w-[46px] border', currentIcon === uploadedIcon ? 'border-green' : 'border-transparent')}>
-                        imageURL={uploadedIcon}
+                        <ImageUpload
-                        onDelete={handleImageDelete}
+                            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'
-                        onImageClick={() => uploadedIcon && updateSetting('portal_button_icon', uploadedIcon)}
+                            deleteButtonContent={<Icon colorClass='text-white' name='trash' size='sm' />}
-                        onUpload={handleImageUpload}
+                            height='46px'
-                    />
+                            id='test'
+                            imageClassName='cursor-pointer'
+                            imageURL={uploadedIcon}
+                            width='46px'
+                            deleteButtonUnstyled
+                            onDelete={handleImageDelete}
+                            onImageClick={() => uploadedIcon && updateSetting('portal_button_icon', uploadedIcon)}
+                            onUpload={handleImageUpload}
+                        >
+                            <Icon name='upload' size='md' />
+                        </ImageUpload>
+                    </div>
                 </div>
             </div>
         }