Merge branch 'develop' into feature/padLockInviteOnly

res/css/structures/_RoomDirectory.scss

@@ -119,6 +119,16 @@ limitations under the License.
     display: inline-block;
 }
 
+.mx_RoomDirectory_perm {
+    border-radius: 10px;
+    display: inline-block;
+    height: 20px;
+    line-height: 20px;
+    padding: 0 5px;
+    color: $accent-fg-color;
+    background-color: $rte-room-pill-color;
+}
+
 .mx_RoomDirectory_topic {
     cursor: initial;
     color: $light-fg-color;

res/css/views/dialogs/_DevtoolsDialog.scss

@@ -189,3 +189,37 @@ limitations under the License.
         }
     }
 }
+
+.mx_DevTools_VerificationRequest {
+    border: 1px solid #cccccc;
+    border-radius: 3px;
+    padding: 1px 5px;
+    margin-bottom: 6px;
+    font-family: $monospace-font-family;
+
+    dl {
+        display: grid;
+        grid-template-columns: max-content auto;
+        margin: 0;
+    }
+
+    dd {
+        grid-column-start: 2;
+    }
+
+    dd:empty {
+        color: #666666;
+        &::after {
+            content: "(empty)";
+        }
+    }
+
+    dt {
+        font-weight: bold;
+        grid-column-start: 1;
+    }
+
+    dt::after {
+        content: ":";
+    }
+}

res/css/views/dialogs/_InviteDialog.scss

@@ -62,7 +62,7 @@ limitations under the License.
     }
 
     .mx_InviteDialog_goButton {
-        width: 48px;
+        min-width: 48px;
         margin-left: 10px;
         height: 25px;
         line-height: 25px;
@@ -131,7 +131,7 @@ limitations under the License.
             height: 24px;
             grid-column: 1;
             grid-row: 1;
-            mask-image: url('$(res)/img/feather-customised/check.svg');
+            mask-image: url("$(res)/img/feather-customised/check.svg");
             mask-size: 100%;
             mask-repeat: no-repeat;
             position: absolute;

res/css/views/dialogs/keybackup/_CreateKeyBackupDialog.scss

@@ -85,3 +85,9 @@ limitations under the License.
     flex: 1;
     white-space: nowrap;
 }
+
+.mx_CreateKeyBackupDialog {
+    details .mx_AccessibleButton {
+        margin: 1em 0; // emulate paragraph spacing because we can't put this button in a paragraph due to HTML rules
+    }
+}

res/css/views/right_panel/_VerificationPanel.scss

@@ -37,3 +37,70 @@ limitations under the License.
         }
     }
 }
+
+// Special case styling for EncryptionPanel in a Modal dialog
+.mx_Dialog, .mx_CompleteSecurity_body {
+    .mx_VerificationPanel_QRPhase_startOptions {
+        display: flex;
+        margin-top: 10px;
+        margin-bottom: 10px;
+        align-items: stretch;
+
+        > .mx_VerificationPanel_QRPhase_betweenText {
+            width: 50px;
+            vertical-align: middle;
+            text-align: center;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .mx_VerificationPanel_QRPhase_startOption {
+            background-color: $user-tile-hover-bg-color;
+            border-radius: 10px;
+            flex: 1;
+            display: flex;
+            padding: 10px;
+            align-items: center;
+            flex-direction: column;
+            position: relative;
+
+            canvas, .mx_VerificationPanel_QRPhase_noQR {
+                width: 220px !important;
+                height: 220px !important;
+                background-color: #fff;
+                border-radius: 4px;
+                vertical-align: middle;
+                text-align: center;
+                padding: 10px;
+            }
+
+            > p {
+                font-weight: 700;
+            }
+
+            .mx_VerificationPanel_QRPhase_helpText {
+                font-size: 14px;
+                margin-top: 71px;
+                text-align: center;
+            }
+
+            .mx_AccessibleButton {
+                position: absolute;
+                bottom: 30px;
+            }
+        }
+    }
+
+    // EncryptionPanel when verification is done
+    .mx_VerificationPanel_verified_section {
+        // center the big shield icon
+        .mx_E2EIcon {
+            margin: 0 auto;
+        }
+        // right align the "Got it" button
+        .mx_AccessibleButton {
+            float: right;
+        }
+    }
+}

res/css/views/rooms/_TopUnreadMessagesBar.scss

@@ -32,9 +32,9 @@ limitations under the License.
     width: 4px;
     height: 4px;
     border-radius: 16px;
-    overflow: hidden;
     background-color: $secondary-accent-color;
     border: 6px solid $accent-color;
+    pointer-events: none;
 }
 
 .mx_TopUnreadMessagesBar_scrollUp {

res/css/views/rooms/_WhoIsTypingTile.scss

@@ -31,14 +31,15 @@ limitations under the License.
     margin-left: -12px;
 }
 
-.mx_WhoIsTypingTile_avatars .mx_BaseAvatar_image {
-    border: 1px solid $primary-bg-color;
-}
-
 .mx_WhoIsTypingTile_avatars .mx_BaseAvatar_initial {
     padding-top: 1px;
 }
 
+.mx_WhoIsTypingTile_avatars .mx_BaseAvatar {
+    border: 1px solid $primary-bg-color;
+    border-radius: 40px;
+}
+
 .mx_WhoIsTypingTile_remainingAvatarPlaceholder {
     position: relative;
     display: inline-block;

res/css/views/settings/_DevicesPanel.scss

@@ -18,7 +18,7 @@ limitations under the License.
     display: table;
     table-layout: fixed;
     width: 880px;
-    border-spacing: 2px;
+    border-spacing: 10px;
 }
 
 .mx_DevicesPanel_header {
@@ -32,7 +32,11 @@ limitations under the License.
 
 .mx_DevicesPanel_header > div {
     display: table-cell;
-    vertical-align: bottom;
+    vertical-align: middle;
+}
+
+.mx_DevicesPanel_header .mx_DevicesPanel_deviceName {
+    width: 50%;
 }
 
 .mx_DevicesPanel_header .mx_DevicesPanel_deviceLastSeen {