Merge branch 'develop' of https://github.com/matrix-org/matrix-react-sdk into joriks/font-scaling-slider

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

@@ -32,3 +32,9 @@ limitations under the License.
     padding: 10px;
 }
 
+.mx_RestoreKeyBackupDialog_content > div {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    min-height: 110px; /* Empirically measured */
+}

res/css/views/elements/_RichText.scss

@@ -18,13 +18,14 @@ a.mx_Pill {
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
-    vertical-align: text-bottom;
     max-width: calc(100% - 1ch);
 }
 
 .mx_Pill {
     padding: $font-1px;
     padding-right: 0.4em;
+    vertical-align: text-top;
+    line-height: $font-17px;
 }
 
 /* More specific to override `.markdown-body a` color */

res/css/views/elements/_ToggleSwitch.scss

@@ -24,11 +24,6 @@ limitations under the License.
 
     background-color: $togglesw-off-color;
     opacity: 0.5;
-
-    display: flex;
-    flex-direction: row;
-    flex: 0 0 auto;
-    align-items: center;
 }
 
 .mx_ToggleSwitch_enabled {
@@ -38,16 +33,18 @@ limitations under the License.
 
 .mx_ToggleSwitch.mx_ToggleSwitch_on {
     background-color: $togglesw-on-color;
+
+    > .mx_ToggleSwitch_ball {
+        left: calc(100% - $font-20px);
+    }
 }
 
 .mx_ToggleSwitch_ball {
-    transition: left 0.15s ease-out 0.1s;
+    position: relative;
     width: $font-20px;
     height: $font-20px;
     border-radius: $font-20px;
     background-color: $togglesw-ball-color;
-}
-
-.mx_ToggleSwitch_on {
-    flex-direction: row-reverse;
+    transition: left 0.15s ease-out 0.1s;
+    left: 0;
 }

res/css/views/rooms/_EventTile.scss

@@ -126,7 +126,7 @@ limitations under the License.
 .mx_RoomView_timeline_rr_enabled,
 // on ELS we need the margin to allow interaction with the expand/collapse button which is normally in the RR gutter
 .mx_EventListSummary {
-    .mx_EventTile_line, .mx_EventTile_reply {
+    .mx_EventTile_line {
         /* ideally should be 100px, but 95px gives us a max thumbnail size of 800x600, which is nice */
         margin-right: 110px;
     }

res/css/views/rooms/_RoomRecoveryReminder.scss

@@ -33,11 +33,6 @@ limitations under the License.
     margin-bottom: 1em;
 }
 
-.mx_RoomRecoveryReminder_button {
-    @mixin mx_DialogButton;
-    margin: 0 10px;
-}
-
 .mx_RoomRecoveryReminder_secondary {
     font-size: 90%;
     margin-top: 1em;

res/css/views/settings/tabs/user/_GeneralUserSettingsTab.scss

@@ -22,6 +22,12 @@ limitations under the License.
     margin-top: 0;
 }
 
+.mx_GeneralUserSettingsTab_accountSection .mx_Spinner,
+.mx_GeneralUserSettingsTab_discovery .mx_Spinner {
+    // Move the spinner to the left side of the container (default center)
+    justify-content: left;
+}
+
 .mx_GeneralUserSettingsTab_accountSection .mx_EmailAddresses,
 .mx_GeneralUserSettingsTab_accountSection .mx_PhoneNumbers,
 .mx_GeneralUserSettingsTab_discovery .mx_ExistingEmailAddress,

res/css/views/settings/tabs/user/_SecurityUserSettingsTab.scss

@@ -55,3 +55,12 @@ limitations under the License.
 .mx_SecurityUserSettingsTab_ignoredUser .mx_AccessibleButton {
     margin-right: 10px;
 }
+
+.mx_SecurityUserSettingsTab {
+    .mx_SettingsTab_section {
+        .mx_AccessibleButton_kind_link {
+            padding: 0;
+            font-size: inherit;
+        }
+    }
+}