Merge pull request #3950 from matrix-org/t3chguy/cs_verification_decoration

Cross Signing Right Panel Verification Decoration

res/css/_components.scss

@@ -143,7 +143,9 @@
 @import "./views/messages/_TextualEvent.scss";
 @import "./views/messages/_UnknownBody.scss";
 @import "./views/messages/_ViewSourceEvent.scss";
+@import "./views/right_panel/_EncryptionInfo.scss";
 @import "./views/right_panel/_UserInfo.scss";
+@import "./views/right_panel/_VerificationPanel.scss";
 @import "./views/room_settings/_AliasSettings.scss";
 @import "./views/room_settings/_ColorSettings.scss";
 @import "./views/rooms/_AppsDrawer.scss";

res/css/views/right_panel/_EncryptionInfo.scss

@@ -0,0 +1,26 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_UserInfo {
+    .mx_EncryptionInfo_spinner {
+        .mx_Spinner {
+            margin-top: 25px;
+            margin-bottom: 15px;
+        }
+
+        text-align: center;
+    }
+}

res/css/views/right_panel/_UserInfo.scss

@@ -49,12 +49,17 @@ limitations under the License.
     }
 
     .mx_UserInfo_container {
-        padding: 0 16px 16px 16px;
+        padding: 8px 16px;
+    }
+
+    .mx_UserInfo_separator {
         border-bottom: 1px solid lightgray;
     }
 
     .mx_UserInfo_memberDetailsContainer {
+        padding-top: 0;
         padding-bottom: 0;
+        margin-bottom: 8px;
     }
 
     .mx_RoomTile_nameContainer {
@@ -76,6 +81,7 @@ limitations under the License.
     .mx_UserInfo_avatar > div {
         max-width: 30vh;
         margin: 0 auto;
+        transition: 0.5s;
     }
 
     .mx_UserInfo_avatar > div > div {
@@ -105,6 +111,7 @@ limitations under the License.
         // override the calculated sizes so that the letter isn't HUGE
         font-size: 56px !important;
         width: 100% !important;
+        transition: font-size 0.5s;
     }
 
     .mx_UserInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image {
@@ -204,10 +211,9 @@ limitations under the License.
         padding-bottom: 16px;
     }
 
-    .mx_UserInfo_scrollContainer .mx_UserInfo_container {
+    .mx_UserInfo_scrollContainer:not(.mx_UserInfo_separator) {
         padding-top: 16px;
         padding-bottom: 0;
-        border-bottom: none;
 
         > :not(h3) {
             margin-left: 8px;
@@ -256,11 +262,17 @@ limitations under the License.
 
     .mx_UserInfo_verify {
         display: block;
-        background-color: $accent-color;
-        color: $accent-fg-color;
-        border-radius: 4px;
-        padding: 7px 1.5em;
-        text-align: center;
         margin: 16px 0;
     }
 }
+
+.mx_UserInfo.mx_UserInfo_smallAvatar {
+    .mx_UserInfo_avatar > div {
+        max-width: 72px;
+        margin: 0 auto;
+    }
+
+    .mx_UserInfo_avatar .mx_BaseAvatar_initial {
+        font-size: 40px !important; // override the other override because here the avatar is smaller
+    }
+}

res/css/views/right_panel/_VerificationPanel.scss

@@ -0,0 +1,37 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_UserInfo {
+    .mx_VerificationPanel_verified_section .mx_E2EIcon {
+        margin: 0 auto;
+    }
+
+    .mx_VerificationPanel_qrCode {
+        padding: 4px 4px 0 4px;
+        background: white;
+        border-radius: 4px;
+        width: max-content;
+        max-width: 100%;
+        margin: 0 auto;
+
+        canvas {
+            // override height and width which are set on the element directly
+            height: auto !important;
+            width: 100% !important;
+            max-width: 240px;
+        }
+    }
+}