From 6333900006b130cb2c31f226a6a2a4418a9f3346 Mon Sep 17 00:00:00 2001
From: Claire <claire.github-309c@sitedethib.com>
Date: Sat, 13 Jan 2024 23:48:37 +0100
Subject: [PATCH] Fix glitch-soc CW media icons

---
 .../flavours/glitch/components/status_content.jsx | 15 +++++++++++++++
 .../flavours/glitch/styles/components/status.scss |  4 +---
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/app/javascript/flavours/glitch/components/status_content.jsx b/app/javascript/flavours/glitch/components/status_content.jsx
index 67e5d53d83..a8e069426e 100644
--- a/app/javascript/flavours/glitch/components/status_content.jsx
+++ b/app/javascript/flavours/glitch/components/status_content.jsx
@@ -9,6 +9,12 @@ import { withRouter } from 'react-router-dom';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
 
+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 { autoPlayGif, languages as preloadedLanguages } from 'flavours/glitch/initial_state';
 import { decode as decodeIDNA } from 'flavours/glitch/utils/idna';
@@ -381,12 +387,21 @@ class StatusContent extends PureComponent {
           />,
         ];
         if (mediaIcons) {
+          const mediaComponents = {
+            'link': LinkIcon,
+            'picture-o': ImageIcon,
+            'tasks': InsertChartIcon,
+            'video-camera': MovieIcon,
+            'music': MusicNoteIcon,
+          };
+
           mediaIcons.forEach((mediaIcon, idx) => {
             toggleText.push(
               <Icon
                 fixedWidth
                 className='status__content__spoiler-icon'
                 id={mediaIcon}
+                icon={mediaComponents[mediaIcon]}
                 aria-hidden='true'
                 key={`icon-${idx}`}
               />,
diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss
index 4dec72f8cf..d721861d7d 100644
--- a/app/javascript/flavours/glitch/styles/components/status.scss
+++ b/app/javascript/flavours/glitch/styles/components/status.scss
@@ -136,7 +136,7 @@
 }
 
 .status__content__spoiler-link {
-  display: inline-block;
+  display: inline-flex;
   border-radius: 2px;
   background: lighten($ui-base-color, 30%);
   border: 0;
@@ -160,8 +160,6 @@
     border-inline-start: 1px solid currentColor;
     padding: 0;
     padding-inline-start: 4px;
-    font-size: 16px;
-    vertical-align: -2px;
   }
 }