Improve font scaling panel style (#8887)

res/css/views/elements/_EventTilePreview.scss

@@ -14,6 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_FontScalingPanel_fontSlider_preview.mx_EventTilePreview_loader {
+.mx_FontScalingPanel_preview.mx_EventTilePreview_loader {
     padding: 9px 0;
 }

res/css/views/settings/_FontScalingPanel.scss

@@ -16,66 +16,59 @@ limitations under the License.
 
 .mx_FontScalingPanel {
     color: $primary-content;
-    > .mx_SettingsTab_SubHeading {
-        margin-bottom: 32px;
-    }
-}
 
-.mx_FontScalingPanel .mx_Field {
-    width: 256px;
-}
-
-.mx_FontScalingPanel_fontSlider,
-.mx_FontScalingPanel_fontSlider_preview {
-    @mixin mx_Settings_fullWidthField;
-}
-
-.mx_FontScalingPanel_fontSlider {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    padding: 15px 15px 35px;
-    background: rgba($quinary-content, 0.2);
-    border-radius: 10px;
-    font-size: 10px;
-    margin-top: 24px;
-    margin-bottom: 24px;
-}
-
-.mx_FontScalingPanel_fontSlider_preview {
-    border: 1px solid $quinary-content;
-    border-radius: 10px;
-    padding: 0 16px 9px 16px;
-    pointer-events: none;
-    display: flow-root;
-
-    .mx_EventTile[data-layout=bubble] {
-        margin-top: 30px;
+    .mx_FontScalingPanel_preview,
+    .mx_FontScalingPanel_fontSlider {
+        @mixin mx_Settings_fullWidthField;
     }
 
-    .mx_EventTile_msgOption {
-        display: none;
+    .mx_FontScalingPanel_preview {
+        border: 1px solid $quinary-content;
+        border-radius: 10px;
+        padding: 0 $spacing-16 9px $spacing-16;
+        pointer-events: none;
+        display: flow-root;
+
+        &.mx_IRCLayout {
+            padding-top: 9px; // TODO: Use a spacing variable
+        }
+
+        .mx_EventTile[data-layout=bubble] {
+            margin-top: 30px; // TODO: Use a spacing variable
+        }
+
+        .mx_EventTile_msgOption {
+            display: none;
+        }
     }
 
-    &.mx_IRCLayout {
-        padding-top: 9px;
+    .mx_FontScalingPanel_fontSlider {
+        display: flex;
+        align-items: center;
+        padding: 15px $spacing-20 35px; // TODO: Use spacing variables
+        background: rgba($quinary-content, 0.2);
+        border-radius: 10px;
+        font-size: $font-10px;
+        margin-top: $spacing-24;
+        margin-bottom: $spacing-24;
+
+        .mx_FontScalingPanel_fontSlider_smallText,
+        .mx_FontScalingPanel_fontSlider_largeText {
+            font-weight: 500;
+        }
+
+        .mx_FontScalingPanel_fontSlider_smallText {
+            font-size: $font-15px;
+            padding-inline-end: $spacing-20;
+        }
+
+        .mx_FontScalingPanel_fontSlider_largeText {
+            font-size: $font-18px;
+            padding-inline-start: $spacing-20;
+        }
+    }
+
+    .mx_FontScalingPanel_customFontSizeField {
+        margin-inline-start: var(--AppearanceUserSettingsTab_Field-margin-inline-start);
     }
 }
-
-.mx_FontScalingPanel_fontSlider_smallText {
-    font-size: 15px;
-    padding-right: 20px;
-    padding-left: 5px;
-    font-weight: 500;
-}
-
-.mx_FontScalingPanel_fontSlider_largeText {
-    font-size: 18px;
-    padding-left: 20px;
-    padding-right: 5px;
-    font-weight: 500;
-}
-
-.mx_FontScalingPanel_customFontSizeField {
-    margin-left: calc($font-16px + 10px);
-}

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

@@ -15,6 +15,8 @@ limitations under the License.
 */
 
 .mx_AppearanceUserSettingsTab {
+    --AppearanceUserSettingsTab_Field-margin-inline-start: calc($font-16px + 10px);
+
     .mx_SettingsTab_subsectionText {
         margin-block: $spacing-12 $spacing-32;
         color: $primary-content; // Same as mx_SettingsTab
@@ -30,7 +32,7 @@ limitations under the License.
         }
 
         .mx_AppearanceUserSettingsTab_systemFont {
-            margin-inline-start: calc($font-16px + 10px);
+            margin-inline-start: var(--AppearanceUserSettingsTab_Field-margin-inline-start);
         }
     }
 }

src/components/views/settings/FontScalingPanel.tsx

@@ -116,7 +116,7 @@ export default class FontScalingPanel extends React.Component<IProps, IState> {
 
             <span className="mx_SettingsTab_subheading">{ _t("Font size") }</span>
             <EventTilePreview
-                className="mx_FontScalingPanel_fontSlider_preview"
+                className="mx_FontScalingPanel_preview"
                 message={this.MESSAGE_PREVIEW_TEXT}
                 layout={this.state.layout}
                 userId={this.state.userId}

test/components/views/settings/__snapshots__/FontScalingPanel-test.tsx.snap

@@ -12,14 +12,14 @@ exports[`FontScalingPanel renders the font scaling UI 1`] = `
     </span>
     <EventTilePreview
       avatarUrl={null}
-      className="mx_FontScalingPanel_fontSlider_preview"
+      className="mx_FontScalingPanel_preview"
       displayName={null}
       layout="group"
       message="Hey you. You're the best!"
       userId={null}
     >
       <div
-        className="mx_FontScalingPanel_fontSlider_preview mx_EventTilePreview_loader"
+        className="mx_FontScalingPanel_preview mx_EventTilePreview_loader"
       >
         <Spinner
           h={32}