From ee03a0f31dd5c2f5f390e23cbe6a54a646dc139d Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Wed, 26 Jun 2019 11:56:58 +0200
Subject: [PATCH] recycle EventTile css to make history items look mostly
 similar

---
 .../dialogs/_MessageEditHistoryDialog.scss    | 20 ++++---------------
 .../views/elements/EditHistoryMessage.js      | 14 +++++++------
 2 files changed, 12 insertions(+), 22 deletions(-)

diff --git a/res/css/views/dialogs/_MessageEditHistoryDialog.scss b/res/css/views/dialogs/_MessageEditHistoryDialog.scss
index bc4c2680ed..2da72a042e 100644
--- a/res/css/views/dialogs/_MessageEditHistoryDialog.scss
+++ b/res/css/views/dialogs/_MessageEditHistoryDialog.scss
@@ -28,23 +28,11 @@ limitations under the License.
 .mx_MessageEditHistoryDialog_edits {
     list-style-type: none;
     font-size: 14px;
+    padding: 0;
+    color: $primary-fg-color;
 
-    &>li.edit {
-        margin: 10px 0;
-        display: flex;
-
-        &>.mx_MessageTimestamp {
-            flex: 0 0 50px;
-        }
-
-        &>p {
-            margin: 0;
-        }
-
-    }
-
-    ul, ol {
-        list-style-type: circle;
+    .mx_EventTile_line, .mx_EventTile_content {
+        margin-right: 0px;
     }
 }
 
diff --git a/src/components/views/elements/EditHistoryMessage.js b/src/components/views/elements/EditHistoryMessage.js
index 749f478ba4..a6cbfbdfd4 100644
--- a/src/components/views/elements/EditHistoryMessage.js
+++ b/src/components/views/elements/EditHistoryMessage.js
@@ -46,17 +46,19 @@ export default class EditHistoryMessage extends React.Component {
         let contentContainer;
         if (mxEvent.getContent().msgtype === "m.emote") {
             const name = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
-            contentContainer = (<p ref="content">*&nbsp;
+            contentContainer = (<div className="mx_EventTile_content" ref="content">*&nbsp;
                 <span className="mx_MEmoteBody_sender">{ name }</span>
                 &nbsp;{contentElements}
-            </p>);
+            </div>);
         } else {
-            contentContainer = (<p ref="content">{contentElements}</p>);
+            contentContainer = (<div className="mx_EventTile_content" ref="content">{contentElements}</div>);
         }
         const timestamp = formatTime(new Date(mxEvent.getTs()), this.props.isTwelveHour);
-        return <li className="edit mx_EventTile_content">
-            <span className="mx_MessageTimestamp">{timestamp}</span>
-            { contentContainer }
+        return <li className="mx_EventTile">
+            <div className="mx_EventTile_line">
+                <span className="mx_MessageTimestamp">{timestamp}</span>
+                { contentContainer }
+            </div>
         </li>;
     }
 }