Revert "Tweaks to informational architecture 1.1 (#7052)"

This reverts commit 8fe582b.
matrix-org · Dec 1, 2021 · 1fdef79 · 1fdef79
1 parent cbb34d8
commit 1fdef79
Show file tree

Hide file tree

Showing 49 changed files with 1,485 additions and 1,435 deletions.
diff --git a/res/css/_common.scss b/res/css/_common.scss
@@ -482,15 +482,6 @@ 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.

diff --git a/res/css/_components.scss b/res/css/_components.scss
@@ -60,11 +60,13 @@
 @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";
@@ -235,7 +237,6 @@
 @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";

diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss
@@ -101,38 +101,16 @@ $roomListCollapsedWidth: 68px;
         }
 
         .mx_LeftPanel_filterContainer {
-            margin: 0 12px;
-            padding: 12px 0 8px;
-            border-bottom: 1px solid $quinary-content;
+            margin-left: 12px;
+            margin-right: 12px;
 
             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_RoomSearch_shortcutPrompt {
-                    display: none;
-                }
-
                 & + .mx_LeftPanel_exploreButton {
                     // Cheaty way to return the occupied space to the filter input
                     flex-basis: 0;
@@ -192,12 +170,8 @@ $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');
                 }
             }
         }
@@ -260,6 +234,7 @@ $roomListCollapsedWidth: 68px;
                 .mx_LeftPanel_exploreButton {
                     margin-left: 0;
                     margin-top: 8px;
+                    background-color: transparent;
                 }
             }
         }

diff --git a/res/css/structures/_RoomSearch.scss b/res/css/structures/_RoomSearch.scss
@@ -67,22 +67,12 @@ 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;
-            }
         }
     }
 
@@ -92,20 +82,13 @@ limitations under the License.
     }
 
     &.mx_RoomSearch_minimized {
+        border-radius: 32px;
         height: auto;
         width: auto;
-        padding: 5px;
+        padding: 8px;
 
         .mx_RoomSearch_icon {
             margin-left: 0;
         }
-
-        &:hover {
-            background-color: $tertiary-content;
-
-            .mx_RoomSearch_icon {
-                background-color: $background;
-            }
-        }
     }
 }
diff --git a/res/css/structures/_SpacePanel.scss b/res/css/structures/_SpacePanel.scss
@@ -20,7 +20,7 @@ $gutterSize: 16px;
 $activeBorderTransparentGap: 1px;
 
 $activeBackgroundColor: $panel-actions;
-$activeBorderColor: $primary-content;
+$activeBorderColor: $secondary-content;
 
 .mx_SpacePanel {
     background-color: $groupFilterPanel-bg-color;
@@ -37,7 +37,7 @@ $activeBorderColor: $primary-content;
 
     .mx_SpacePanel_spaceTreeWrapper {
         flex: 1;
-        padding: 12px 8px 16px 0;
+        padding: 8px 8px 16px 0;
     }
 
     .mx_SpacePanel_toggleCollapse {
@@ -92,6 +92,13 @@ $activeBorderColor: $primary-content;
         }
     }
 
+    .mx_SpaceTreeLevel {
+        display: flex;
+        flex-direction: column;
+        max-width: 250px;
+        flex-grow: 1;
+    }
+
     .mx_SpaceItem {
         display: inline-flex;
         flex-flow: wrap;
@@ -202,10 +209,10 @@ $activeBorderColor: $primary-content;
         &.mx_SpaceButton_people,
         &.mx_SpaceButton_orphans {
             .mx_SpaceButton_icon {
-                background-color: $panel-actions;
+                background-color: #ffffff;
 
                 &::before {
-                    background-color: $secondary-content;
+                    background-color: #3f3d3d;
                 }
             }
         }
@@ -227,6 +234,8 @@ $activeBorderColor: $primary-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');
@@ -252,7 +261,7 @@ $activeBorderColor: $primary-content;
             position: relative;
 
             &::before {
-                top: 3px;
+                top: 2px;
                 left: 2px;
                 content: '';
                 width: 16px;
@@ -267,35 +276,6 @@ $activeBorderColor: $primary-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;
     }
@@ -358,8 +338,13 @@ $activeBorderColor: $primary-content;
         line-height: $font-18px;
     }
 
-    .mx_SpacePanel_iconInvite::before {
-        mask-image: url('$(res)/img/element-icons/room/invite.svg');
+    .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_iconSettings::before {
@@ -375,11 +360,15 @@ $activeBorderColor: $primary-content;
     }
 
     .mx_SpacePanel_iconPlus::before {
-        mask-image: url('$(res)/img/element-icons/plus.svg');
+        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');
     }
 
     .mx_SpacePanel_iconExplore::before {
-        mask-image: url('$(res)/img/element-icons/roomlist/search.svg');
+        mask-image: url('$(res)/img/element-icons/roomlist/browse.svg');
     }
 
     .mx_SpacePanel_noIcon {
@@ -389,14 +378,6 @@ $activeBorderColor: $primary-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 {

diff --git a/res/css/structures/_ToastContainer.scss b/res/css/structures/_ToastContainer.scss
@@ -85,11 +85,6 @@ 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;
             }