Replace breadcrumbs with recently viewed menu

res/css/_common.scss

@@ -482,6 +482,15 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
     overflow-y: hidden;
 }
 
+.mx_DialogDesignChanges_wrapper .mx_Dialog_fixedWidth {
+    max-width: 636px; // match splash image width
+
+    .mx_AccessibleButton_kind_link {
+        font-size: inherit;
+        padding: 0;
+    }
+}
+
 // TODO: Review mx_GeneralButton usage to see if it can use a different class
 // These classes were brought in from the old UserSettings and are included here to avoid
 // breaking the app.

res/css/_components.scss

@@ -60,13 +60,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";
@@ -145,6 +143,7 @@
 @import "./views/elements/_ImageView.scss";
 @import "./views/elements/_InfoTooltip.scss";
 @import "./views/elements/_InlineSpinner.scss";
+@import "./views/elements/_InteractiveTooltip.scss";
 @import "./views/elements/_InviteReason.scss";
 @import "./views/elements/_ManageIntegsButton.scss";
 @import "./views/elements/_MiniAvatarUploader.scss";
@@ -232,11 +231,13 @@
 @import "./views/rooms/_NotificationBadge.scss";
 @import "./views/rooms/_PinnedEventTile.scss";
 @import "./views/rooms/_PresenceLabel.scss";
+@import "./views/rooms/_RecentlyViewedButton.scss";
 @import "./views/rooms/_ReplyPreview.scss";
 @import "./views/rooms/_ReplyTile.scss";
 @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/_ContextualMenu.scss

@@ -37,6 +37,7 @@ limitations under the License.
     position: absolute;
     font-size: $font-14px;
     z-index: 5001;
+    width: max-content;
 }
 
 .mx_ContextualMenu_right {

res/css/structures/_LeftPanel.scss

@@ -101,17 +101,40 @@ $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_RoomListHeader {
+                margin-top: 12px;
+            }
+
+            .mx_RoomSearch_shortcutPrompt {
+                border-radius: 6px;
+                background-color: $panel-actions;
+                padding: 2px 4px;
+                user-select: none;
+                pointer-events: none;
+                font-size: $font-12px;
+                line-height: $font-15px;
+                font-weight: $font-semi-bold;
+                color: $light-fg-color;
+                margin-right: 6px;
+            }
+
             .mx_RoomSearch_focused, .mx_RoomSearch_hasQuery {
-                & + .mx_LeftPanel_exploreButton {
+                .mx_RoomSearch_shortcutPrompt {
+                    display: none;
+                }
+
+                & + .mx_LeftPanel_exploreButton,
+                & + .mx_LeftPanel_recentsButton {
                     // Cheaty way to return the occupied space to the filter input
                     flex-basis: 0;
                     margin: 0;
@@ -144,11 +167,12 @@ $roomListCollapsedWidth: 68px;
                     mask-position: center;
                     mask-size: contain;
                     mask-repeat: no-repeat;
-                    background: $secondary-content;
+                    background-color: $secondary-content;
                 }
             }
 
-            .mx_LeftPanel_exploreButton {
+            .mx_LeftPanel_exploreButton,
+            .mx_LeftPanel_recentsButton {
                 width: 32px;
                 height: 32px;
                 border-radius: 8px;
@@ -163,17 +187,28 @@ $roomListCollapsedWidth: 68px;
                     left: 8px;
                     width: 16px;
                     height: 16px;
-                    mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
                     mask-position: center;
                     mask-size: contain;
                     mask-repeat: no-repeat;
-                    background: $secondary-content;
+                    background-color: $secondary-content;
                 }
 
-                &.mx_LeftPanel_exploreButton_space::before {
-                    mask-image: url('$(res)/img/element-icons/roomlist/browse.svg');
+                &:hover {
+                    background-color: $tertiary-content;
+
+                    &::before {
+                        background-color: $background;
+                    }
                 }
             }
+
+            .mx_LeftPanel_exploreButton::before {
+                mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
+            }
+
+            .mx_LeftPanel_recentsButton::before {
+                mask-image: url('$(res)/img/element-icons/clock.svg');
+            }
         }
 
         .mx_LeftPanel_roomListFilterCount {
@@ -231,10 +266,10 @@ $roomListCollapsedWidth: 68px;
                     background-color: transparent;
                 }
 
-                .mx_LeftPanel_exploreButton {
+                .mx_LeftPanel_exploreButton,
+                .mx_LeftPanel_recentsButton {
                     margin-left: 0;
                     margin-top: 8px;
-                    background-color: transparent;
                 }
             }
         }

res/css/structures/_RoomSearch.scss

@@ -67,12 +67,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: 50%;
+            position: relative;
+
+            &::before {
+                content: "";
+                position: absolute;
+                width: inherit;
+                height: inherit;
+                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 +92,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

@@ -20,7 +20,7 @@ $gutterSize: 16px;
 $activeBorderTransparentGap: 1px;
 
 $activeBackgroundColor: $panel-actions;
-$activeBorderColor: $secondary-content;
+$activeBorderColor: $primary-content;
 
 .mx_SpacePanel {
     background-color: $groupFilterPanel-bg-color;
@@ -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 {
@@ -92,13 +92,6 @@ $activeBorderColor: $secondary-content;
         }
     }
 
-    .mx_SpaceTreeLevel {
-        display: flex;
-        flex-direction: column;
-        max-width: 250px;
-        flex-grow: 1;
-    }
-
     .mx_SpaceItem {
         display: inline-flex;
         flex-flow: wrap;
@@ -209,10 +202,10 @@ $activeBorderColor: $secondary-content;
         &.mx_SpaceButton_people,
         &.mx_SpaceButton_orphans {
             .mx_SpaceButton_icon {
-                background-color: #ffffff;
+                background-color: $panel-actions;
 
                 &::before {
-                    background-color: #3f3d3d;
+                    background-color: $secondary-content;
                 }
             }
         }
@@ -234,8 +227,6 @@ $activeBorderColor: $secondary-content;
         }
 
         &.mx_SpaceButton_new .mx_SpaceButton_icon {
-            background-color: $panel-actions;
-
             &::before {
                 background-color: $primary-content;
                 mask-image: url('$(res)/img/element-icons/plus.svg');
@@ -261,7 +252,7 @@ $activeBorderColor: $secondary-content;
             position: relative;
 
             &::before {
-                top: 2px;
+                top: 3px;
                 left: 2px;
                 content: '';
                 width: 16px;
@@ -276,6 +267,35 @@ $activeBorderColor: $secondary-content;
         }
     }
 
+    .mx_SpaceTreeLevel {
+        display: flex;
+        flex-direction: column;
+        max-width: 250px;
+        flex-grow: 1;
+
+        .mx_BaseAvatar:not(.mx_UserMenu_userAvatar_BaseAvatar) .mx_BaseAvatar_initial {
+            color: $secondary-content;
+            width: 32px;
+            height: 32px;
+            border-radius: 8px;
+            background-color: $panel-actions;
+            font-size: $font-15px !important; // override inline style
+            font-weight: $font-semi-bold;
+            line-height: $font-18px;
+
+            & + .mx_BaseAvatar_image {
+                visibility: hidden;
+            }
+        }
+
+        .mx_SpaceTreeLevel {
+            .mx_BaseAvatar_initial {
+                width: 24px;
+                height: 24px;
+            }
+        }
+    }
+
     .mx_SpaceButton_avatarWrapper {
         position: relative;
     }
@@ -338,13 +358,8 @@ $activeBorderColor: $secondary-content;
         line-height: $font-18px;
     }
 
-    .mx_IconizedContextMenu_optionList .mx_AccessibleButton.mx_SpacePanel_contextMenu_inviteButton {
-        color: $accent;
-
-        .mx_SpacePanel_iconInvite::before {
-            background-color: $accent;
-            mask-image: url('$(res)/img/element-icons/room/invite.svg');
-        }
+    .mx_SpacePanel_iconInvite::before {
+        mask-image: url('$(res)/img/element-icons/room/invite.svg');
     }
 
     .mx_SpacePanel_iconSettings::before {
@@ -360,15 +375,11 @@ $activeBorderColor: $secondary-content;
     }
 
     .mx_SpacePanel_iconPlus::before {
-        mask-image: url('$(res)/img/element-icons/roomlist/plus-circle.svg');
-    }
-
-    .mx_SpacePanel_iconHash::before {
-        mask-image: url('$(res)/img/element-icons/roomlist/hash-circle.svg');
+        mask-image: url('$(res)/img/element-icons/plus.svg');
     }
 
     .mx_SpacePanel_iconExplore::before {
-        mask-image: url('$(res)/img/element-icons/roomlist/browse.svg');
+        mask-image: url('$(res)/img/element-icons/roomlist/search.svg');
     }
 
     .mx_SpacePanel_noIcon {
@@ -378,6 +389,14 @@ $activeBorderColor: $secondary-content;
             padding-left: 5px !important; // override default iconized label style to align with header
         }
     }
+
+    .mx_SpacePanel_contextMenu_separatorLabel {
+        color: $tertiary-content;
+        font-size: $font-10px;
+        line-height: $font-12px;
+        font-weight: $font-semi-bold;
+        //margin-left: 8px;
+    }
 }
 
 .mx_SpacePanel_sharePublicSpace {

res/css/structures/_ToastContainer.scss

@@ -85,6 +85,11 @@ limitations under the License.
                 background-color: $primary-content;
             }
 
+            &.mx_Toast_icon_labs::after {
+                mask-image: url('$(res)/img/element-icons/flask.svg');
+                background-color: $secondary-content;
+            }
+
             .mx_Toast_title, .mx_Toast_body {
                 grid-column: 2;
             }