Tweaks to informational architecture 1.1

res/css/_components.scss

@@ -59,13 +59,11 @@
 @import "./views/auth/_Welcome.scss";
 @import "./views/avatars/_BaseAvatar.scss";
 @import "./views/avatars/_DecoratedRoomAvatar.scss";
-@import "./views/avatars/_MemberStatusMessageAvatar.scss";
 @import "./views/avatars/_WidgetAvatar.scss";
 @import "./views/beta/_BetaCard.scss";
 @import "./views/context_menus/_CallContextMenu.scss";
 @import "./views/context_menus/_IconizedContextMenu.scss";
 @import "./views/context_menus/_MessageContextMenu.scss";
-@import "./views/context_menus/_StatusMessageContextMenu.scss";
 @import "./views/context_menus/_TagTileContextMenu.scss";
 @import "./views/dialogs/_AddExistingToSpaceDialog.scss";
 @import "./views/dialogs/_AddressPickerDialog.scss";
@@ -232,6 +230,7 @@
 @import "./views/rooms/_RoomBreadcrumbs.scss";
 @import "./views/rooms/_RoomHeader.scss";
 @import "./views/rooms/_RoomList.scss";
+@import "./views/rooms/_RoomListHeader.scss";
 @import "./views/rooms/_RoomPreviewBar.scss";
 @import "./views/rooms/_RoomSublist.scss";
 @import "./views/rooms/_RoomTile.scss";

res/css/structures/_LeftPanel.scss

@@ -101,16 +101,33 @@ $roomListCollapsedWidth: 68px;
         }
 
         .mx_LeftPanel_filterContainer {
-            margin-left: 12px;
-            margin-right: 12px;
+            margin: 0 12px;
+            padding: 12px 0 8px;
+            border-bottom: 1px solid $quinary-content;
 
             flex-shrink: 0; // to convince safari's layout engine the flexbox is fine
 
             // Create a flexbox to organize the inputs
             display: flex;
             align-items: center;
 
+            .mx_RoomSearch_shortcutPrompt {
+                border-radius: 6px;
+                background-color: $quinary-content;
+                padding: 2px 4px;
+                user-select: none;
+                pointer-events: none;
+                font-size: $font-12px;
+                line-height: $font-15px;
+                color: $tertiary-content;
+                margin-right: 6px;
+            }
+
             .mx_RoomSearch_focused, .mx_RoomSearch_hasQuery {
+                .mx_RoomSearch_shortcutPrompt {
+                    display: none;
+                }
+
                 & + .mx_LeftPanel_exploreButton {
                     // Cheaty way to return the occupied space to the filter input
                     flex-basis: 0;
@@ -129,7 +146,7 @@ $roomListCollapsedWidth: 68px;
                 width: 32px;
                 height: 32px;
                 border-radius: 8px;
-                background-color: $roomlist-button-bg-color;
+                background-color: $background;
                 position: relative;
                 margin-left: 8px;
 
@@ -152,7 +169,7 @@ $roomListCollapsedWidth: 68px;
                 width: 32px;
                 height: 32px;
                 border-radius: 8px;
-                background-color: $roomlist-button-bg-color;
+                background-color: $background;
                 position: relative;
                 margin-left: 8px;
 
@@ -170,6 +187,14 @@ $roomListCollapsedWidth: 68px;
                     background: $secondary-content;
                 }
 
+                &:hover {
+                    background-color: $tertiary-content;
+
+                    &::before {
+                        background-color: $background;
+                    }
+                }
+
                 &.mx_LeftPanel_exploreButton_space::before {
                     mask-image: url('$(res)/img/element-icons/roomlist/browse.svg');
                 }
@@ -234,7 +259,6 @@ $roomListCollapsedWidth: 68px;
                 .mx_LeftPanel_exploreButton {
                     margin-left: 0;
                     margin-top: 8px;
-                    background-color: transparent;
                 }
             }
         }

res/css/structures/_RoomSearch.scss

@@ -18,11 +18,10 @@ limitations under the License.
 .mx_RoomSearch {
     flex: 1;
     border-radius: 8px;
-    background-color: $roomlist-button-bg-color;
+    background-color: $background;
     // keep border thickness consistent to prevent movement
-    border: 1px solid transparent;
+    border: 3px solid transparent;
     height: 28px;
-    padding: 1px;
 
     // Create a flexbox for the icons (easier to manage)
     display: flex;
@@ -57,8 +56,7 @@ limitations under the License.
     }
 
     &.mx_RoomSearch_focused {
-        box-shadow: 0 0 4px 4px rgba(0, 132, 255, 0.5);
-        border-color: transparent;
+        border-color: $links;
     }
 
     &.mx_RoomSearch_focused, &.mx_RoomSearch_hasQuery {
@@ -67,12 +65,22 @@ limitations under the License.
         .mx_RoomSearch_clearButton {
             width: 16px;
             height: 16px;
-            mask-image: url('$(res)/img/element-icons/roomlist/search-clear.svg');
-            mask-position: center;
-            mask-size: contain;
-            mask-repeat: no-repeat;
-            background-color: $secondary-content;
             margin-right: 8px;
+            background-color: $quinary-content;
+            border-radius: 8px;
+            position: relative;
+
+            &::before {
+                content: "";
+                position: absolute;
+                width: 16px;
+                height: 16px;
+                mask-image: url('$(res)/img/feather-customised/x.svg');
+                mask-position: center;
+                mask-size: 12px;
+                mask-repeat: no-repeat;
+                background-color: $secondary-content;
+            }
         }
     }
 
@@ -82,13 +90,20 @@ limitations under the License.
     }
 
     &.mx_RoomSearch_minimized {
-        border-radius: 32px;
         height: auto;
         width: auto;
-        padding: 8px;
+        padding: 5px;
 
         .mx_RoomSearch_icon {
             margin-left: 0;
         }
+
+        &:hover {
+            background-color: $tertiary-content;
+
+            .mx_RoomSearch_icon {
+                background-color: $background;
+            }
+        }
     }
 }

res/css/structures/_SpacePanel.scss

@@ -37,7 +37,7 @@ $activeBorderColor: $secondary-content;
 
     .mx_SpacePanel_spaceTreeWrapper {
         flex: 1;
-        padding: 8px 8px 16px 0;
+        padding: 12px 8px 16px 0;
     }
 
     .mx_SpacePanel_toggleCollapse {
@@ -198,8 +198,6 @@ $activeBorderColor: $secondary-content;
         }
 
         &.mx_SpaceButton_new .mx_SpaceButton_icon {
-            background-color: $roomlist-button-bg-color;
-
             &::before {
                 background-color: $primary-content;
                 mask-image: url('$(res)/img/element-icons/plus.svg');
@@ -306,13 +304,12 @@ $activeBorderColor: $secondary-content;
         line-height: $font-18px;
     }
 
-    .mx_IconizedContextMenu_optionList .mx_AccessibleButton.mx_SpacePanel_contextMenu_inviteButton {
-        color: $accent-color;
+    .mx_SpacePanel_iconHome::before {
+        mask-image: url('$(res)/img/element-icons/home.svg');
+    }
 
-        .mx_SpacePanel_iconInvite::before {
-            background-color: $accent-color;
-            mask-image: url('$(res)/img/element-icons/room/invite.svg');
-        }
+    .mx_SpacePanel_iconInvite::before {
+        mask-image: url('$(res)/img/element-icons/room/share.svg');
     }
 
     .mx_SpacePanel_iconSettings::before {
@@ -327,16 +324,16 @@ $activeBorderColor: $secondary-content;
         mask-image: url('$(res)/img/element-icons/room/members.svg');
     }
 
-    .mx_SpacePanel_iconPlus::before {
-        mask-image: url('$(res)/img/element-icons/roomlist/plus-circle.svg');
+    .mx_SpacePanel_iconCreateRoom::before {
+        mask-image: url('$(res)/img/element-icons/roomlist/hash-plus.svg');
     }
 
-    .mx_SpacePanel_iconHash::before {
-        mask-image: url('$(res)/img/element-icons/roomlist/hash-circle.svg');
+    .mx_SpacePanel_iconAddSpace::before {
+        mask-image: url('$(res)/img/element-icons/leave.svg');
     }
 
     .mx_SpacePanel_iconExplore::before {
-        mask-image: url('$(res)/img/element-icons/roomlist/browse.svg');
+        mask-image: url('$(res)/img/element-icons/roomlist/hash-search.svg');
     }
 
     .mx_SpacePanel_noIcon {