From cce0833c21792ff3feee223a1597c5835bc51093 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Fri, 6 May 2022 18:06:32 +0000
Subject: [PATCH] Simplify ReplyPreview implementation (#8516)

- Use AccessibleButton for cancel button, following other cases on UI
- Use flexbox for RTL layout to remove clear: both

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---
 res/css/views/rooms/_ReplyPreview.scss      | 37 +++++++++++----------
 src/components/views/rooms/ReplyPreview.tsx | 25 +++++---------
 2 files changed, 28 insertions(+), 34 deletions(-)

diff --git a/res/css/views/rooms/_ReplyPreview.scss b/res/css/views/rooms/_ReplyPreview.scss
index eb0233108b8..598371bd368 100644
--- a/res/css/views/rooms/_ReplyPreview.scss
+++ b/res/css/views/rooms/_ReplyPreview.scss
@@ -25,30 +25,31 @@ limitations under the License.
 
     .mx_ReplyPreview_section {
         border-bottom: 1px solid $primary-hairline-color;
+        display: flex;
+        flex-flow: column;
+        row-gap: $spacing-8;
+        padding: $spacing-8 $spacing-8 0 $spacing-8;
 
         .mx_ReplyPreview_header {
-            margin: 8px;
+            display: flex;
+            justify-content: space-between;
+            column-gap: 8px;
+
             color: $primary-content;
             font-weight: 400;
             opacity: 0.4;
-        }
-
-        .mx_ReplyPreview_tile {
-            margin: 0 8px;
-        }
-
-        .mx_ReplyPreview_title {
-            float: left;
-        }
-
-        .mx_ReplyPreview_cancel {
-            float: right;
-            cursor: pointer;
-            display: flex;
-        }
 
-        .mx_ReplyPreview_clear {
-            clear: both;
+            .mx_ReplyPreview_header_cancel {
+                background-color: $primary-content;
+                mask: url('$(res)/img/cancel.svg');
+                mask-repeat: no-repeat;
+                mask-position: center;
+                mask-size: 18px;
+                width: 18px;
+                height: 18px;
+                min-width: 18px;
+                min-height: 18px;
+            }
         }
     }
 }
diff --git a/src/components/views/rooms/ReplyPreview.tsx b/src/components/views/rooms/ReplyPreview.tsx
index 72340e99819..611c58f8529 100644
--- a/src/components/views/rooms/ReplyPreview.tsx
+++ b/src/components/views/rooms/ReplyPreview.tsx
@@ -22,6 +22,7 @@ import { _t } from '../../../languageHandler';
 import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
 import ReplyTile from './ReplyTile';
 import RoomContext, { TimelineRenderingType } from '../../../contexts/RoomContext';
+import AccessibleButton from "../elements/AccessibleButton";
 
 function cancelQuoting(context: TimelineRenderingType) {
     dis.dispatch({
@@ -44,25 +45,17 @@ export default class ReplyPreview extends React.Component<IProps> {
 
         return <div className="mx_ReplyPreview">
             <div className="mx_ReplyPreview_section">
-                <div className="mx_ReplyPreview_header mx_ReplyPreview_title">
-                    { _t('Replying') }
-                </div>
-                <div className="mx_ReplyPreview_header mx_ReplyPreview_cancel">
-                    <img
-                        className="mx_filterFlipColor"
-                        src={require("../../../../res/img/cancel.svg").default}
-                        width="18"
-                        height="18"
+                <div className="mx_ReplyPreview_header">
+                    <span>{ _t('Replying') }</span>
+                    <AccessibleButton
+                        className="mx_ReplyPreview_header_cancel"
                         onClick={() => cancelQuoting(this.context.timelineRenderingType)}
                     />
                 </div>
-                <div className="mx_ReplyPreview_clear" />
-                <div className="mx_ReplyPreview_tile">
-                    <ReplyTile
-                        mxEvent={this.props.replyToEvent}
-                        permalinkCreator={this.props.permalinkCreator}
-                    />
-                </div>
+                <ReplyTile
+                    mxEvent={this.props.replyToEvent}
+                    permalinkCreator={this.props.permalinkCreator}
+                />
             </div>
         </div>;
     }