From d3ae5b21d2b26be7a35f635361d83969156a2aee Mon Sep 17 00:00:00 2001
From: Claire <claire.github-309c@sitedethib.com>
Date: Thu, 16 Nov 2023 18:02:01 +0100
Subject: [PATCH] Reduce code and markup discrepancies on reply indicator

---
 .../compose/components/reply_indicator.jsx    | 39 ++++++++-----------
 1 file changed, 17 insertions(+), 22 deletions(-)

diff --git a/app/javascript/flavours/glitch/features/compose/components/reply_indicator.jsx b/app/javascript/flavours/glitch/features/compose/components/reply_indicator.jsx
index 941a789328..661dff3d54 100644
--- a/app/javascript/flavours/glitch/features/compose/components/reply_indicator.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/reply_indicator.jsx
@@ -6,8 +6,9 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
 import AttachmentList from 'flavours/glitch/components/attachment_list';
-import { IconButton } from 'flavours/glitch/components/icon_button';
-import AccountContainer from 'flavours/glitch/containers/account_container';
+
+import { IconButton } from '../../../components/icon_button';
+import AccountContainer from '../../../containers/account_container';
 
 const messages = defineMessages({
   cancel: { id: 'reply_indicator.cancel', defaultMessage: 'Cancel' },
@@ -17,8 +18,8 @@ class ReplyIndicator extends ImmutablePureComponent {
 
   static propTypes = {
     status: ImmutablePropTypes.map,
-    intl: PropTypes.object.isRequired,
     onCancel: PropTypes.func,
+    intl: PropTypes.object.isRequired,
   };
 
   handleClick = () => {
@@ -35,38 +36,32 @@ class ReplyIndicator extends ImmutablePureComponent {
       return null;
     }
 
+    const content = { __html: status.get('contentHtml') };
+
     const account     = status.get('account');
-    const content     = status.get('content');
-    const attachments = status.get('media_attachments');
 
     return (
-      <article className='reply-indicator'>
-        <header className='reply-indicator__header'>
-          <IconButton
-            className='reply-indicator__cancel'
-            icon='times'
-            onClick={this.handleClick}
-            title={intl.formatMessage(messages.cancel)}
-            inverted
-          />
+      <div className='reply-indicator'>
+        <div className='reply-indicator__header'>
+          <div className='reply-indicator__cancel'><IconButton title={intl.formatMessage(messages.cancel)} icon='times' onClick={this.handleClick} inverted /></div>
+
           {account && (
             <AccountContainer
               id={account}
               small
             />
           )}
-        </header>
-        <div
-          className='reply-indicator__content translate'
-          dangerouslySetInnerHTML={{ __html: content || '' }}
-        />
-        {attachments.size > 0 && (
+        </div>
+
+        <div className='reply-indicator__content translate' dangerouslySetInnerHTML={content} />
+
+        {status.get('media_attachments').size > 0 && (
           <AttachmentList
             compact
-            media={attachments}
+            media={status.get('media_attachments')}
           />
         )}
-      </article>
+      </div>
     );
   }