From 784e52f249157a085fedabc5b165ecffe12698d8 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Wed, 7 Jun 2017 10:19:58 +0100
Subject: [PATCH] Align message timestamp centrally about the avatar mid-point

Tested visually against any unintended changes to the alignment of e2e icons, with timestamps on 12h and 24h mode.
---
 src/components/views/messages/MessageTimestamp.js      |  4 ++--
 .../css/matrix-react-sdk/views/rooms/_EventTile.scss   | 10 +++++-----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/views/messages/MessageTimestamp.js b/src/components/views/messages/MessageTimestamp.js
index 586ca94cc8..3102b55915 100644
--- a/src/components/views/messages/MessageTimestamp.js
+++ b/src/components/views/messages/MessageTimestamp.js
@@ -16,8 +16,8 @@ limitations under the License.
 
 'use strict';
 
-const React = require('react');
-const DateUtils = require('matrix-react-sdk/lib/DateUtils');
+import React from 'react';
+import DateUtils from 'matrix-react-sdk/lib/DateUtils';
 
 module.exports = React.createClass({
     displayName: 'MessageTimestamp',
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss
index 5542d18d0c..cc59f37eb1 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss
@@ -63,7 +63,9 @@ limitations under the License.
     white-space: nowrap;
     color: $event-timestamp-color;
     font-size: 10px;
-    left: 8px;
+    left: 0px;
+    width: 46px; /* 8 + 30 (avatar) + 8 */
+    text-align: center;
     position: absolute;
 }
 
@@ -189,6 +191,7 @@ limitations under the License.
 
 .mx_EventTile_selected .mx_MessageTimestamp {
     left: 3px;
+    width: auto;
 }
 
 .mx_EventTile_editButton {
@@ -271,10 +274,6 @@ limitations under the License.
     padding-left: 5px;
 }
 
-.mx_EventTile_12hr .mx_MessageTimestamp {
-    text-align: center;
-}
-
 .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line,
 .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
     padding-left: 60px;
@@ -296,6 +295,7 @@ limitations under the License.
 .mx_EventTile:hover.mx_EventTile_verified .mx_MessageTimestamp,
 .mx_EventTile:hover.mx_EventTile_unverified .mx_MessageTimestamp {
     left: 3px;
+    width: auto;
 }
 
 /*