Merge pull request #5789 from matrix-org/t3chguy/spaces4.11

Tweak and fix some space features

Author: t3chguy

res/css/structures/_LeftPanel.scss

@@ -130,6 +130,10 @@ $roomListCollapsedWidth: 68px;
                     mask-repeat: no-repeat;
                     background: $secondary-fg-color;
                 }
+
+                &.mx_LeftPanel_exploreButton_space::before {
+                    mask-image: url('$(res)/img/element-icons/roomlist/browse.svg');
+                }
             }
         }
 

res/css/structures/_SpacePanel.scss

@@ -146,9 +146,6 @@ $activeBorderColor: $secondary-fg-color;
 
         .mx_SpaceButton_toggleCollapse {
             width: $gutterSize;
-            // negative margin to place it correctly even with the complex
-            // 4px selection border each space button has when active
-            margin-right: -4px;
             height: 20px;
             mask-position: center;
             mask-size: 20px;
@@ -342,11 +339,15 @@ $activeBorderColor: $secondary-fg-color;
     }
 
     .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/explore.svg');
+        mask-image: url('$(res)/img/element-icons/roomlist/browse.svg');
     }
 }
 

res/css/structures/_SpaceRoomView.scss

@@ -22,7 +22,7 @@ $SpaceRoomViewInnerWidth: 428px;
     width: 432px;
     box-sizing: border-box;
     border-radius: 8px;
-    border: 1px solid $input-darker-bg-color;
+    border: 1px solid $space-button-outline-color;
     font-size: $font-15px;
     margin: 20px 0;
 
@@ -89,7 +89,7 @@ $SpaceRoomViewInnerWidth: 428px;
             width: $SpaceRoomViewInnerWidth;
             text-align: right; // button alignment right
 
-            .mx_FormButton {
+            .mx_AccessibleButton_hasKind {
                 padding: 8px 22px;
                 margin-left: 16px;
             }

res/css/views/dialogs/_AddExistingToSpaceDialog.scss

@@ -28,22 +28,23 @@ limitations under the License.
     flex-direction: column;
     flex-wrap: nowrap;
     min-height: 0;
+    height: 80vh;
 
     .mx_Dialog_title {
         display: flex;
 
-        .mx_BaseAvatar {
-            display: inline-flex;
-            margin: 5px 16px 5px 5px;
-            vertical-align: middle;
-        }
-
         .mx_BaseAvatar_image {
             border-radius: 8px;
             margin: 0;
             vertical-align: unset;
         }
 
+        .mx_BaseAvatar {
+            display: inline-flex;
+            margin: 5px 16px 5px 5px;
+            vertical-align: middle;
+        }
+
         > div {
             > h1 {
                 font-weight: $font-semi-bold;
@@ -101,6 +102,7 @@ limitations under the License.
 
     .mx_SearchBox {
         margin: 0;
+        flex-grow: 0;
     }
 
     .mx_AddExistingToSpaceDialog_errorText {
@@ -112,7 +114,10 @@ limitations under the License.
     }
 
     .mx_AddExistingToSpaceDialog_content {
+        flex-grow: 1;
+
         .mx_AddExistingToSpaceDialog_noResults {
+            display: block;
             margin-top: 24px;
         }
     }
@@ -162,8 +167,14 @@ limitations under the License.
 
         > span {
             flex-grow: 1;
-            font-size: $font-12px;
+            font-size: $font-14px;
             line-height: $font-15px;
+            font-weight: $font-semi-bold;
+
+            .mx_AccessibleButton {
+                font-size: inherit;
+                display: inline-block;
+            }
 
             > * {
                 vertical-align: middle;

res/css/views/dialogs/_SpaceSettingsDialog.scss

@@ -49,7 +49,7 @@ limitations under the License.
         }
     }
 
-    .mx_FormButton {
+    .mx_AccessibleButton_hasKind {
         padding: 8px 22px;
     }
 }

res/css/views/rooms/_NewRoomIntro.scss

@@ -33,8 +33,13 @@ limitations under the License.
 
         .mx_AccessibleButton {
             line-height: $font-24px;
+            display: inline-block;
 
-            &::before {
+            & + .mx_AccessibleButton {
+                margin-left: 12px;
+            }
+
+            &:not(.mx_AccessibleButton_kind_primary_outline)::before {
                 content: '';
                 display: inline-block;
                 background-color: $button-fg-color;

res/css/views/rooms/_RoomList.scss

@@ -27,6 +27,9 @@ limitations under the License.
 .mx_RoomList_iconExplore::before {
     mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
 }
+.mx_RoomList_iconBrowse::before {
+    mask-image: url('$(res)/img/element-icons/roomlist/browse.svg');
+}
 .mx_RoomList_iconDialpad::before {
     mask-image: url('$(res)/img/element-icons/roomlist/dialpad.svg');
 }
@@ -35,28 +38,32 @@ limitations under the License.
     margin: 4px 12px 4px;
     padding-top: 12px;
     border-top: 1px solid $tertiary-fg-color;
-    font-size: $font-13px;
+    font-size: $font-14px;
 
     div:first-child {
         font-weight: $font-semi-bold;
+        line-height: $font-18px;
+        color: $primary-fg-color;
     }
 
     .mx_AccessibleButton {
-        color: $secondary-fg-color;
+        color: $primary-fg-color;
         position: relative;
-        padding: 0 0 0 24px;
+        padding: 8px 8px 8px 32px;
         font-size: inherit;
-        margin-top: 8px;
+        margin-top: 12px;
         display: block;
         text-align: start;
+        background-color: $roomlist-button-bg-color;
+        border-radius: 4px;
 
         &::before {
             content: '';
             width: 16px;
             height: 16px;
             position: absolute;
-            top: 0;
-            left: 0;
+            top: 8px;
+            left: 8px;
             background: $secondary-fg-color;
             mask-position: center;
             mask-size: contain;
@@ -70,5 +77,13 @@ limitations under the License.
         &.mx_RoomList_explorePrompt_explore::before {
             mask-image: url('$(res)/img/element-icons/roomlist/explore.svg');
         }
+
+        &.mx_RoomList_explorePrompt_spaceInvite::before {
+            mask-image: url('$(res)/img/element-icons/room/invite.svg');
+        }
+
+        &.mx_RoomList_explorePrompt_spaceExplore::before {
+            mask-image: url('$(res)/img/element-icons/roomlist/browse.svg');
+        }
     }
 }

res/css/views/spaces/_SpaceCreateMenu.scss

@@ -79,7 +79,7 @@ $spacePanelWidth: 71px;
             }
         }
 
-        .mx_FormButton {
+        .mx_AccessibleButton_kind_primary {
             padding: 8px 22px;
             margin-left: auto;
             display: block;

res/img/element-icons/roomlist/browse.svg

@@ -49,11 +49,12 @@ export function showStartChatInviteDialog(initialText) {
     );
 }
 
-export function showRoomInviteDialog(roomId) {
+export function showRoomInviteDialog(roomId, initialText = "") {
     // This dialog handles the room creation internally - we don't need to worry about it.
     Modal.createTrackedDialog(
         "Invite Users", "", InviteDialog, {
             kind: KIND_INVITE,
+            initialText,
             roomId,
         },
         /*className=*/null, /*isPriority=*/false, /*isStatic=*/true,