More video rooms design updates (#8222)

* Update video room icon * Hide room header border in video rooms * Fix inconsistent padding on AppTile frames
matrix-org · Apr 5, 2022 · 4f6b939 · 4f6b939
1 parent c0c447a
commit 4f6b939
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 11 deletions.
diff --git a/res/css/structures/_RoomView.scss b/res/css/structures/_RoomView.scss
@@ -213,14 +213,20 @@ hr.mx_RoomView_myReadMarker {
 }
 
 // Immersive widgets
-.mx_RoomView_body > .mx_AppTile {
-    margin: $container-gap-width;
-    margin-right: calc($container-gap-width / 2);
-    width: auto;
-    height: 100%;
-    padding-top: 33px; // to match the right panel chat heading
+.mx_RoomView_immersive {
+    .mx_RoomHeader_wrapper {
+        border: unset;
+    }
 
-    border-radius: 8px;
+    .mx_AppTile {
+        margin: $container-gap-width;
+        margin-right: calc($container-gap-width / 2);
+        width: auto;
+        height: 100%;
+        padding-top: 33px; // to match the right panel chat heading
+
+        border-radius: 8px;
+    }
 }
 
 .mx_RoomView_callStatusBar .mx_UploadBar_uploadProgressInner {

diff --git a/res/css/views/rooms/_AppsDrawer.scss b/res/css/views/rooms/_AppsDrawer.scss
@@ -148,8 +148,6 @@ $MinWidth: 240px;
     width: 50%;
     min-width: $MinWidth;
     border: $container-border-width solid $widget-menu-bar-bg-color;
-    border-left-width: 5px;
-    border-right-width: 5px;
     display: flex;
     flex-direction: column;
     box-sizing: border-box;

diff --git a/res/css/views/rooms/_RoomList.scss b/res/css/views/rooms/_RoomList.scss
@@ -25,7 +25,7 @@ limitations under the License.
     mask-image: url('$(res)/img/element-icons/roomlist/hash-plus.svg');
 }
 .mx_RoomList_iconNewVideoRoom::before {
-    mask-image: url('$(res)/img/element-icons/call/video-call.svg');
+    mask-image: url('$(res)/img/element-icons/roomlist/hash-video.svg');
 }
 .mx_RoomList_iconAddExistingRoom::before {
     mask-image: url('$(res)/img/element-icons/roomlist/hash.svg');

diff --git a/res/css/views/rooms/_RoomListHeader.scss b/res/css/views/rooms/_RoomListHeader.scss
@@ -107,7 +107,7 @@ limitations under the License.
     mask-image: url('$(res)/img/element-icons/roomlist/hash-plus.svg');
 }
 .mx_RoomListHeader_iconNewVideoRoom::before {
-    mask-image: url('$(res)/img/element-icons/call/video-call.svg');
+    mask-image: url('$(res)/img/element-icons/roomlist/hash-video.svg');
 }
 .mx_RoomListHeader_iconExplore::before {
     mask-image: url('$(res)/img/element-icons/roomlist/hash-search.svg');

diff --git a/res/img/element-icons/roomlist/hash-video.svg b/res/img/element-icons/roomlist/hash-video.svg
diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx
@@ -2100,6 +2100,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
 
         const mainClasses = classNames("mx_RoomView", {
             mx_RoomView_inCall: Boolean(activeCall),
+            mx_RoomView_immersive: this.state.mainSplitContentType === MainSplitContentType.Video,
         });
 
         const showChatEffects = SettingsStore.getValue('showChatEffects');