From 46128f25b62ed20fa4cae6cecb3172c5e4eb3afd Mon Sep 17 00:00:00 2001
From: Claire <claire.github-309c@sitedethib.com>
Date: Sat, 13 Jan 2024 23:35:53 +0100
Subject: [PATCH] Fix glitch-soc status media icons

---
 .../glitch/components/status_icons.jsx        | 43 +++++++++++++------
 1 file changed, 31 insertions(+), 12 deletions(-)

diff --git a/app/javascript/flavours/glitch/components/status_icons.jsx b/app/javascript/flavours/glitch/components/status_icons.jsx
index 132d05c207..5e7aa6e638 100644
--- a/app/javascript/flavours/glitch/components/status_icons.jsx
+++ b/app/javascript/flavours/glitch/components/status_icons.jsx
@@ -9,6 +9,11 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { ReactComponent as ExpandLessIcon } from '@material-symbols/svg-600/outlined/expand_less.svg';
 import { ReactComponent as ForumIcon } from '@material-symbols/svg-600/outlined/forum.svg';
 import { ReactComponent as HomeIcon } from '@material-symbols/svg-600/outlined/home.svg';
+import { ReactComponent as ImageIcon } from '@material-symbols/svg-600/outlined/image.svg';
+import { ReactComponent as InsertChartIcon } from '@material-symbols/svg-600/outlined/insert_chart.svg';
+import { ReactComponent as LinkIcon } from '@material-symbols/svg-600/outlined/link.svg';
+import { ReactComponent as MovieIcon } from '@material-symbols/svg-600/outlined/movie.svg';
+import { ReactComponent as MusicNoteIcon } from '@material-symbols/svg-600/outlined/music_note.svg';
 
 import { Icon } from 'flavours/glitch/components/icon';
 import { languages } from 'flavours/glitch/initial_state';
@@ -66,29 +71,43 @@ class StatusIcons extends PureComponent {
     }
   };
 
-  mediaIconTitleText (mediaIcon) {
+  renderIcon (mediaIcon) {
     const { intl } = this.props;
 
-    const message = {
-      'link': messages.previewCard,
-      'picture-o': messages.pictures,
-      'tasks': messages.poll,
-      'video-camera': messages.video,
-      'music': messages.audio,
-    }[mediaIcon];
+    let title, iconComponent;
 
-    return message && intl.formatMessage(message);
-  }
+    switch (mediaIcon) {
+    case 'link':
+      title = messages.previewCard;
+      iconComponent = LinkIcon;
+      break;
+    case 'picture-o':
+      title = messages.pictures;
+      iconComponent = ImageIcon;
+      break;
+    case 'tasks':
+      title = messages.poll;
+      iconComponent = InsertChartIcon;
+      break;
+    case 'video-camera':
+      title = messages.video;
+      iconComponent = MovieIcon;
+      break;
+    case 'music':
+      title = messages.audio;
+      iconComponent = MusicNoteIcon;
+      break;
+    }
 
-  renderIcon (mediaIcon) {
     return (
       <Icon
         fixedWidth
         className='status__media-icon'
         key={`media-icon--${mediaIcon}`}
         id={mediaIcon}
+        icon={iconComponent}
         aria-hidden='true'
-        title={this.mediaIconTitleText(mediaIcon)}
+        title={title && intl.formatMessage(title)}
       />
     );
   }