Update design of collection accounts editor (#38712)

app/javascript/mastodon/components/empty_state/empty_state.module.scss

@@ -35,3 +35,12 @@
     text-wrap: pretty;
   }
 }
+
+[data-color-scheme='dark'] .defaultImage {
+  --color-skin-1: #3a3a50;
+  --color-skin-2: #67678e;
+  --color-skin-3: #44445f;
+  --color-outline: #21212c;
+  --color-shadow: #181820;
+  --color-highlight: #b2b1c8;
+}

app/javascript/mastodon/components/empty_state/empty_state.stories.tsx

@@ -29,12 +29,6 @@ export const Default: Story = {
   },
 };
 
-export const WithoutMessage: Story = {
-  args: {
-    message: undefined,
-  },
-};
-
 export const WithAction: Story = {
   args: {
     ...Default.args,
@@ -42,3 +36,17 @@ export const WithAction: Story = {
     children: <Button onClick={() => action('Refresh')}>Refresh</Button>,
   },
 };
+
+export const WithoutImage: Story = {
+  args: {
+    ...Default.args,
+    image: null,
+  },
+};
+
+export const WithoutMessage: Story = {
+  args: {
+    ...Default.args,
+    message: undefined,
+  },
+};

app/javascript/mastodon/components/empty_state/index.tsx

@@ -1,31 +1,39 @@
 import { FormattedMessage } from 'react-intl';
 
+import ElephantImage from '@/images/elephant_ui.svg?react';
+
 import classes from './empty_state.module.scss';
 
+const images = {
+  default: <ElephantImage className={classes.defaultImage} />,
+};
+
 /**
  * Simple empty state component with a neutral default title and customisable message.
  *
- * Action buttons can be passed as `children`
+ * Action buttons can be passed as `children`.
  */
 
 export const EmptyState: React.FC<{
-  image?: React.ReactNode;
+  image?: keyof typeof images | React.ReactElement | null;
   title?: React.ReactNode;
   message?: React.ReactNode;
   children?: React.ReactNode;
 }> = ({
-  image,
+  image = 'default',
   title = (
     <FormattedMessage id='empty_state.no_results' defaultMessage='No results' />
   ),
   message,
   children,
 }) => {
+  const imageToRender = typeof image === 'string' ? images[image] : image;
+
   return (
     <div className={classes.wrapper}>
-      {(title || message || image) && (
+      {(title || message || imageToRender) && (
         <div className={classes.content}>
-          {image}
+          {imageToRender}
           {!!title && <h3>{title}</h3>}
           {!!message && <p>{message}</p>}
         </div>