style room header

src/ui/web/css/room.css

@@ -24,13 +24,8 @@ limitations under the License.
     align-items: center;
 }
 
-.RoomHeader > *:last-child {
+.RoomHeader h2 {
-    margin-right: 0;
+    flex: 1;
-}
-
-.RoomHeader > * {
-    margin-right: 10px;
-    flex: 0 0 auto;
 }
 
 .RoomHeader button {

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>

src/ui/web/css/themes/element/theme.css

@@ -352,8 +352,11 @@ a {
 }
 
 .RoomHeader {
-    background: rgba(245, 245, 245, 0.90);
+    box-sizing: border-box;
-    padding: 10px;
+    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 {
+.RoomHeader > :not(:first-child) {
-    width: 40px;
+    margin-left: 8px;
-    height: 40px;
-    font-size: 1.5em;
-    padding: 0;
-    background: white;
-    border: none;
-    font-weight: bolder;
-    line-height: 40px;
 }
 
-.back::before {
+button.back {
-    content: "☰";
+    background-image: url('icons/chevron-left.svg');
-}
+    background-position-x: 10px;
-
-.more::before {
-    content: "⋮";
 }
 
 .RoomHeader .topic {

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),