From 24d0950b7edd73dc16ba8a9860df20775645f0f5 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Thu, 17 Sep 2020 09:23:06 -0600
Subject: [PATCH] Adjust layout and formatting of notifications / file cards

This follows some polish time with a designer.

The placeholder text on the two panels was tracking up/down when the width was changed. This is fixed by adjusting some of the flexbox properties to center it more safely.

We also spent some time making the notifications panel more legible while we wait for the overhaul to land.
---
 res/css/structures/_FilePanel.scss         |  7 ++++
 res/css/structures/_NotificationPanel.scss | 37 ++++++++++++++++++----
 res/css/structures/_RoomView.scss          |  8 ++---
 src/components/views/rooms/EventTile.js    |  2 ++
 4 files changed, 43 insertions(+), 11 deletions(-)

diff --git a/res/css/structures/_FilePanel.scss b/res/css/structures/_FilePanel.scss
index 21b30d804a..2aa068b674 100644
--- a/res/css/structures/_FilePanel.scss
+++ b/res/css/structures/_FilePanel.scss
@@ -23,6 +23,13 @@ limitations under the License.
 
 .mx_FilePanel .mx_RoomView_messageListWrapper {
     margin-right: 20px;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+}
+
+.mx_FilePanel .mx_RoomView_MessageList {
+    width: 100%;
 }
 
 .mx_FilePanel .mx_RoomView_MessageList h2 {
diff --git a/res/css/structures/_NotificationPanel.scss b/res/css/structures/_NotificationPanel.scss
index 715a94fe2c..2da334b385 100644
--- a/res/css/structures/_NotificationPanel.scss
+++ b/res/css/structures/_NotificationPanel.scss
@@ -22,7 +22,13 @@ limitations under the License.
 }
 
 .mx_NotificationPanel .mx_RoomView_messageListWrapper {
-    margin-right: 20px;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+}
+
+.mx_NotificationPanel .mx_RoomView_MessageList {
+    width: 100%;
 }
 
 .mx_NotificationPanel .mx_RoomView_MessageList h2 {
@@ -35,11 +41,32 @@ limitations under the License.
 
 .mx_NotificationPanel .mx_EventTile {
     word-break: break-word;
+    position: relative;
+    padding-bottom: 18px;
+
+    &:not(.mx_EventTile_last)::after {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background-color: $tertiary-fg-color;
+        height: 1px;
+        opacity: 0.4;
+        content: '';
+    }
 }
 
 .mx_NotificationPanel .mx_EventTile_roomName {
     font-weight: bold;
     font-size: $font-14px;
+
+    > * {
+        vertical-align: middle;
+    }
+
+    > .mx_BaseAvatar {
+       margin-right: 8px;
+    }
 }
 
 .mx_NotificationPanel .mx_EventTile_roomName a {
@@ -47,8 +74,7 @@ limitations under the License.
 }
 
 .mx_NotificationPanel .mx_EventTile_avatar {
-    top: 8px;
-    left: 0px;
+    display: none;
 }
 
 .mx_NotificationPanel .mx_EventTile .mx_SenderProfile,
@@ -60,8 +86,7 @@ limitations under the License.
 }
 
 .mx_NotificationPanel .mx_EventTile_senderDetails {
-    padding-left: 32px;
-    padding-top: 8px;
+    padding-left: 36px;
     position: relative;
 
     a {
@@ -82,7 +107,7 @@ limitations under the License.
 
 .mx_NotificationPanel .mx_EventTile_line {
     margin-right: 0px;
-    padding-left: 32px;
+    padding-left: 36px;
     padding-top: 0px;
     padding-bottom: 0px;
     padding-right: 0px;
diff --git a/res/css/structures/_RoomView.scss b/res/css/structures/_RoomView.scss
index 3b60c4e62b..f63f80f470 100644
--- a/res/css/structures/_RoomView.scss
+++ b/res/css/structures/_RoomView.scss
@@ -185,13 +185,11 @@ limitations under the License.
 }
 
 .mx_RoomView_empty {
-    flex: 1 1 auto;
     font-size: $font-13px;
-    padding-left: 3em;
-    padding-right: 3em;
-    margin-right: 20px;
-    margin-top: 33%;
+    padding: 0 24px;
+    margin-right: 30px;
     text-align: center;
+    margin-bottom: 80px;
 }
 
 .mx_RoomView_MessageList {
diff --git a/src/components/views/rooms/EventTile.js b/src/components/views/rooms/EventTile.js
index f444fb1f1a..121930b294 100644
--- a/src/components/views/rooms/EventTile.js
+++ b/src/components/views/rooms/EventTile.js
@@ -34,6 +34,7 @@ import * as ObjectUtils from "../../../ObjectUtils";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import {E2E_STATE} from "./E2EIcon";
 import {toRem} from "../../../utils/units";
+import RoomAvatar from "../avatars/RoomAvatar";
 
 const eventTileTypes = {
     'm.room.message': 'messages.MessageEvent',
@@ -821,6 +822,7 @@ export default class EventTile extends React.Component {
                 return (
                     <div className={classes} aria-live={ariaLive} aria-atomic="true">
                         <div className="mx_EventTile_roomName">
+                            <RoomAvatar room={room} width={28} height={28} />
                             <a href={permalink} onClick={this.onPermalinkClicked}>
                                 { room ? room.name : '' }
                             </a>