Fix room header timeline and composer alignment

Room header use DecoratedRoomAvatar instead of manual e2eIcon overlay
move e2eIcon next to it instead of private padlock

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

res/css/views/rooms/_EventTile.scss

@@ -330,9 +330,9 @@ $left-gutter: 64px;
 .mx_EventTile_e2eIcon {
     position: absolute;
     top: 6px;
-    left: 46px;
-    width: 15px;
-    height: 15px;
+    left: 44px;
+    width: 14px;
+    height: 14px;
     display: block;
     bottom: 0;
     right: 0;
@@ -399,10 +399,6 @@ $left-gutter: 64px;
     margin-bottom: 0px;
 }
 
-.mx_EventTile_12hr .mx_EventTile_e2eIcon {
-    padding-left: 5px;
-}
-
 .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line,
 .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line,
 .mx_EventTile:hover.mx_EventTile_unknown .mx_EventTile_line {
@@ -507,7 +503,7 @@ $left-gutter: 64px;
     display: inline-block;
     visibility: hidden;
     cursor: pointer;
-    top: 6px;
+    top: 8px;
     right: 6px;
     width: 19px;
     height: 19px;

res/css/views/rooms/_MessageComposer.scss

@@ -76,8 +76,8 @@ limitations under the License.
     left: 60px;
     margin-right: 0; // Counteract the E2EIcon class
     margin-left: 3px; // Counteract the E2EIcon class
-    width: 14px;
-    height: 14px;
+    width: 12px;
+    height: 12px;
 }
 
 .mx_MessageComposer_noperm_error {

res/css/views/rooms/_RoomHeader.scss

@@ -19,13 +19,16 @@ limitations under the License.
     border-bottom: 1px solid $primary-hairline-color;
     background-color: $roomheader-bg-color;
 
-    .mx_E2EIcon {
-        margin: 0;
-        position: absolute;
-        bottom: -2px;
-        right: -6px;
-        height: 15px;
-        width: 15px;
+    .mx_RoomHeader_e2eIcon {
+        height: 12px;
+        width: 12px;
+
+        .mx_E2EIcon {
+            margin: 0;
+            position: absolute;
+            height: 12px;
+            width: 12px;
+        }
     }
 }
 
@@ -178,7 +181,7 @@ limitations under the License.
 
 .mx_RoomHeader_avatar {
     flex: 0;
-    margin: 0 7px 0 6px;
+    margin: 0 6px 0 7px;
     position: relative;
 }
 

src/components/views/avatars/DecoratedRoomAvatar.tsx

@@ -30,6 +30,8 @@ interface IProps {
     tag: TagID;
     displayBadge?: boolean;
     forceCount?: boolean;
+    oobData?: object;
+    viewAvatarOnClick?: boolean;
 }
 
 interface IState {
@@ -57,7 +59,13 @@ export default class DecoratedRoomAvatar extends React.PureComponent<IProps, ISt
         }
 
         return <div className="mx_DecoratedRoomAvatar">
-            <RoomAvatar room={this.props.room} width={this.props.avatarSize} height={this.props.avatarSize} />
+            <RoomAvatar
+                room={this.props.room}
+                width={this.props.avatarSize}
+                height={this.props.avatarSize}
+                oobData={this.props.oobData}
+                viewAvatarOnClick={this.props.viewAvatarOnClick}
+            />
             <RoomTileIcon room={this.props.room} tag={this.props.tag} />
             {badge}
         </div>;

src/components/views/rooms/RoomHeader.js

@@ -33,7 +33,8 @@ import SettingsStore from "../../../settings/SettingsStore";
 import RoomHeaderButtons from '../right_panel/RoomHeaderButtons';
 import DMRoomMap from '../../../utils/DMRoomMap';
 import E2EIcon from './E2EIcon';
-import InviteOnlyIcon from './InviteOnlyIcon';
+import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
+import {DefaultTagID} from "../../../stores/room-list/models";
 
 export default createReactClass({
     displayName: 'RoomHeader',
@@ -152,25 +153,14 @@ export default createReactClass({
     },
 
     render: function() {
-        const RoomAvatar = sdk.getComponent("avatars.RoomAvatar");
-
         let searchStatus = null;
         let cancelButton = null;
         let settingsButton = null;
         let pinnedEventsButton = null;
 
-        const e2eIcon = this.props.e2eStatus ?
-            <E2EIcon status={this.props.e2eStatus} /> :
-            undefined;
-
         const dmUserId = DMRoomMap.shared().getUserIdForRoomId(this.props.room.roomId);
         const joinRules = this.props.room && this.props.room.currentState.getStateEvents("m.room.join_rules", "");
         const joinRule = joinRules && joinRules.getContent().join_rule;
-        let privateIcon;
-        // Don't show an invite-only icon for DMs. Users know they're invite-only.
-        if (!dmUserId && joinRule === "invite") {
-            privateIcon = <InviteOnlyIcon />;
-        }
 
         if (this.props.onCancelClick) {
             cancelButton = <CancelButton onClick={this.props.onCancelClick} />;
@@ -221,15 +211,16 @@ export default createReactClass({
         }
         const topicElement =
             <div className="mx_RoomHeader_topic" ref={this._topic} title={topic} dir="auto">{ topic }</div>;
-        const avatarSize = 32;
+
         let roomAvatar;
         if (this.props.room) {
-            roomAvatar = (<RoomAvatar
+            roomAvatar = <DecoratedRoomAvatar
                 room={this.props.room}
-                width={avatarSize}
-                height={avatarSize}
+                avatarSize={32}
+                tag={DefaultTagID.Untagged} // to apply room publicity badging
                 oobData={this.props.oobData}
-                viewAvatarOnClick={true} />);
+                viewAvatarOnClick={true}
+            />;
         }
 
         if (this.props.onSettingsClick) {
@@ -311,11 +302,13 @@ export default createReactClass({
                 { searchButton }
             </div>;
 
+        const e2eIcon = this.props.e2eStatus ? <E2EIcon status={this.props.e2eStatus} /> : undefined;
+
         return (
             <div className="mx_RoomHeader light-panel">
                 <div className="mx_RoomHeader_wrapper" aria-owns="mx_RightPanel">
-                    <div className="mx_RoomHeader_avatar">{ roomAvatar }{ e2eIcon }</div>
-                    { privateIcon }
+                    <div className="mx_RoomHeader_avatar">{ roomAvatar }</div>
+                    <div className="mx_RoomHeader_e2eIcon">{ e2eIcon }</div>
                     { name }
                     { topicElement }
                     { cancelButton }