Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Fix the header of Space landing page #8048

Merged
merged 2 commits into from
Mar 14, 2022
Merged

Fix the header of Space landing page #8048

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d976818
Fix the header of Space landing page
luixxiul Mar 12, 2022
43f71f5
Copied the comment for future reference
luixxiul Mar 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 21 additions & 14 deletions res/css/structures/_SpaceRoomView.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,6 +152,7 @@ $SpaceRoomViewInnerWidth: 428px;
right: 24px;
top: 32px;
}

// XXX remove this when spaces leaves Beta
.mx_SpaceRoomView_preview_spaceBetaPrompt {
font-weight: $font-semi-bold;
Expand Down Expand Up @@ -254,13 +255,27 @@ $SpaceRoomViewInnerWidth: 428px;
flex-direction: column;
min-width: 0;

> .mx_BaseAvatar {
width: 80px;
}
.mx_SpaceRoomView_landing_header {
display: flex;
justify-content: space-between;

> .mx_BaseAvatar_image,
> .mx_BaseAvatar > .mx_BaseAvatar_image {
border-radius: 12px;
.mx_BaseAvatar {
width: 80px;

.mx_BaseAvatar_image {
border-radius: 12px;
}
}

// XXX: Temporary for the Spaces release only
.mx_SpaceFeedbackPrompt {
padding: 7px; // 8px - 1px border
border: 1px solid rgba($primary-content, .1);
border-radius: 8px;
width: max-content;
height: fit-content;
margin-left: 24px;
}
}

.mx_SpaceRoomView_landing_name {
Expand Down Expand Up @@ -360,14 +375,6 @@ $SpaceRoomViewInnerWidth: 428px;
margin: 0 0 20px;
flex: 0;
}

.mx_SpaceFeedbackPrompt {
padding: 7px; // 8px - 1px border
border: 1px solid rgba($primary-content, .1);
border-radius: 8px;
width: max-content;
margin: 0 0 -40px auto; // collapse its own height to not push other components down
}
}

.mx_SpaceRoomView_privateScope {
Expand Down
4 changes: 2 additions & 2 deletions res/css/views/spaces/_SpaceCreateMenu.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ $spacePanelWidth: 68px;
color: $secondary-content;
}

// XXX: Temporary for the Spaces release only
.mx_SpaceFeedbackPrompt {
border-top: 1px solid $input-border-color;
padding-top: 12px;
Expand Down Expand Up @@ -112,14 +113,13 @@ $spacePanelWidth: 68px;
position: relative;
font-size: inherit;
line-height: inherit;
margin-right: auto;
margin-right: 8px;
}

.mx_AccessibleButton_kind_link {
color: $accent;
position: relative;
padding: 0;
margin-left: 8px;
font-size: inherit;
line-height: inherit;
}
Expand Down
6 changes: 4 additions & 2 deletions src/components/structures/SpaceRoomView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -479,8 +479,10 @@ const SpaceLanding = ({ space }: { space: Room }) => {
};

return <div className="mx_SpaceRoomView_landing">
<SpaceFeedbackPrompt />
<RoomAvatar room={space} height={80} width={80} viewAvatarOnClick={true} />
<div className="mx_SpaceRoomView_landing_header">
<RoomAvatar room={space} height={80} width={80} viewAvatarOnClick={true} />
<SpaceFeedbackPrompt />
</div>
<div className="mx_SpaceRoomView_landing_name">
<RoomName room={space}>
{ (name) => {
Expand Down