From 59802d18125295c02d0771462a22c421b6ef629c Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Thu, 8 Oct 2020 15:00:20 +0200
Subject: [PATCH] style room header

---
 src/ui/web/css/room.css                       |  9 ++-----
 .../css/themes/element/icons/chevron-left.svg | 10 +++++++
 src/ui/web/css/themes/element/theme.css       | 27 +++++++------------
 src/ui/web/session/room/RoomView.js           |  2 +-
 4 files changed, 23 insertions(+), 25 deletions(-)
 create mode 100644 src/ui/web/css/themes/element/icons/chevron-left.svg

diff --git a/src/ui/web/css/room.css b/src/ui/web/css/room.css
index 4ed19c35..827b3b1b 100644
--- a/src/ui/web/css/room.css
+++ b/src/ui/web/css/room.css
@@ -24,13 +24,8 @@ limitations under the License.
     align-items: center;
 }
 
-.RoomHeader > *:last-child {
-    margin-right: 0;
-}
-
-.RoomHeader > * {
-    margin-right: 10px;
-    flex: 0 0 auto;
+.RoomHeader h2 {
+    flex: 1;
 }
 
 .RoomHeader button {
diff --git a/src/ui/web/css/themes/element/icons/chevron-left.svg b/src/ui/web/css/themes/element/icons/chevron-left.svg
new file mode 100644
index 00000000..c686cf88
--- /dev/null
+++ b/src/ui/web/css/themes/element/icons/chevron-left.svg
@@ -0,0 +1,10 @@
+<svg width="9" height="17" viewBox="0 0 9 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.20723 2.70711C8.59775 3.09763 8.59878 3.73182 8.20952 4.1236L3.27581 9.08934L8.22556 14.0391C8.61608 14.4296 8.61711 15.0638 8.22785 15.4556C7.83859 15.8474 7.20645 15.8484 6.81593 15.4579L1.15907 9.80101C0.768549 9.41049 0.767523 8.7763 1.15678 8.38452L6.79531 2.70939C7.18457 2.31761 7.8167 2.31658 8.20723 2.70711Z" fill="#8D99A5"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="8" height="17" fill="white" transform="translate(8.5 17) rotate(-180)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/ui/web/css/themes/element/theme.css b/src/ui/web/css/themes/element/theme.css
index b099d83b..f347fc46 100644
--- a/src/ui/web/css/themes/element/theme.css
+++ b/src/ui/web/css/themes/element/theme.css
@@ -352,8 +352,11 @@ a {
 }
 
 .RoomHeader {
-    background: rgba(245, 245, 245, 0.90);
-    padding: 10px;
+    box-sizing: border-box;
+    height: 58px; /* 12 + 36 + 12 to align with filter field + margin */
+    background: white;
+    padding: 0 16px;
+    border-bottom: 1px solid rgba(245, 245, 245, 0.90);
 }
 
 .RoomHeader h2 {
@@ -361,23 +364,13 @@ a {
     font-weight: 600;
 }
 
-.RoomHeader button {
-    width: 40px;
-    height: 40px;
-    font-size: 1.5em;
-    padding: 0;
-    background: white;
-    border: none;
-    font-weight: bolder;
-    line-height: 40px;
+.RoomHeader > :not(:first-child) {
+    margin-left: 8px;
 }
 
-.back::before {
-    content: "☰";
-}
-
-.more::before {
-    content: "⋮";
+button.back {
+    background-image: url('icons/chevron-left.svg');
+    background-position-x: 10px;
 }
 
 .RoomHeader .topic {
diff --git a/src/ui/web/session/room/RoomView.js b/src/ui/web/session/room/RoomView.js
index 3f9b9bce..9eeeb554 100644
--- a/src/ui/web/session/room/RoomView.js
+++ b/src/ui/web/session/room/RoomView.js
@@ -26,7 +26,7 @@ export class RoomView extends TemplateView {
         return t.div({className: "RoomView"}, [
             t.div({className: "TimelinePanel"}, [
                 t.div({className: "RoomHeader"}, [
-                    t.button({className: "back", onClick: () => vm.close()}),
+                    t.button({className: "utility back", onClick: () => vm.close()}),
                     renderAvatar(t, vm, 32),
                     t.div({className: "room-description"}, [
                         t.h2(vm => vm.name),