Reduce code and markup discrepancies on reply indicator

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>
     );
   }