diff --git a/cypress/e2e/spaces/spaces.spec.ts b/cypress/e2e/spaces/spaces.spec.ts index 0a8212ab8d..e7767de942 100644 --- a/cypress/e2e/spaces/spaces.spec.ts +++ b/cypress/e2e/spaces/spaces.spec.ts @@ -237,4 +237,42 @@ describe("Spaces", () => { cy.contains(".mx_SpaceHierarchy_roomTile", "Gaming").should("exist"); }); }); + + it("should render subspaces in the space panel only when expanded", () => { + cy.injectAxe(); + + cy.createSpace({ + name: "Child Space", + initial_state: [], + }).then(spaceId => { + cy.createSpace({ + name: "Root Space", + initial_state: [ + spaceChildInitialState(spaceId), + ], + }).as("spaceId"); + }); + cy.get('.mx_SpacePanel .mx_SpaceButton[aria-label="Root Space"]').should("exist"); + cy.get('.mx_SpacePanel .mx_SpaceButton[aria-label="Child Space"]').should("not.exist"); + + const axeOptions = { + rules: { + // Disable this check as it triggers on nested roving tab index elements which are in practice fine + 'nested-interactive': { + enabled: false, + }, + }, + }; + cy.checkA11y(undefined, axeOptions); + cy.get(".mx_SpacePanel").percySnapshotElement("Space panel collapsed", { widths: [68] }); + + cy.get(".mx_SpaceButton_toggleCollapse").click({ force: true }); + cy.get(".mx_SpacePanel:not(.collapsed)").should("exist"); + + cy.contains(".mx_SpaceItem", "Root Space").should("exist") + .contains(".mx_SpaceItem", "Child Space").should("exist"); + + cy.checkA11y(undefined, axeOptions); + cy.get(".mx_SpacePanel").percySnapshotElement("Space panel expanded", { widths: [258] }); + }); }); diff --git a/res/css/structures/_HomePage.pcss b/res/css/structures/_HomePage.pcss index 6bfabd9c87..f35de9919c 100644 --- a/res/css/structures/_HomePage.pcss +++ b/res/css/structures/_HomePage.pcss @@ -37,15 +37,15 @@ limitations under the License. } h1 { - font-weight: 600; + font-weight: $font-semi-bold; font-size: $font-32px; line-height: $font-44px; margin-bottom: 4px; } - h4 { + h2 { margin-top: 4px; - font-weight: 600; + font-weight: $font-semi-bold; font-size: $font-18px; line-height: $font-25px; color: $muted-fg-color; diff --git a/res/css/structures/_SpacePanel.pcss b/res/css/structures/_SpacePanel.pcss index 72dbddf75e..6517aec5e1 100644 --- a/res/css/structures/_SpacePanel.pcss +++ b/res/css/structures/_SpacePanel.pcss @@ -286,6 +286,11 @@ $activeBorderColor: $primary-content; visibility: hidden; } } + + .mx_SpaceTreeLevel { + // Indent subspaces + padding-left: 16px; + } } .mx_SpaceButton_avatarWrapper { diff --git a/src/components/structures/HomePage.tsx b/src/components/structures/HomePage.tsx index 613625ae70..b2596cee43 100644 --- a/src/components/structures/HomePage.tsx +++ b/src/components/structures/HomePage.tsx @@ -85,7 +85,7 @@ const UserWelcomeTop = () => {

{ _tDom("Welcome %(name)s", { name: ownProfile.displayName }) }

-

{ _tDom("Now, let's help you get started") }

+

{ _tDom("Now, let's help you get started") }

; }; @@ -107,11 +107,11 @@ const HomePage: React.FC = ({ justRegistered = false }) => { introSection = {config.brand}

{ _tDom("Welcome to %(appName)s", { appName: config.brand }) }

-

{ _tDom("Own your conversations.") }

+

{ _tDom("Own your conversations.") }

; } - return + return
{ introSection }