From fe175bb9a89d87307805582040e1f3295a2d0475 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens <joriksch@gmail.com>
Date: Wed, 22 Apr 2020 17:31:49 +0100
Subject: [PATCH] Styling for the font slider

---
 .../tabs/user/_AppearanceUserSettingsTab.scss | 20 +++++++++++++++++++
 .../tabs/user/AppearanceUserSettingsTab.js    | 18 +++++++++++------
 2 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
index 8c80a35e40..e4285e248c 100644
--- a/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
+++ b/res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss
@@ -14,7 +14,27 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+.mx_AppearanceUserSettingsTab_fontSlider,
 .mx_AppearanceUserSettingsTab_themeSection .mx_Field,
 .mx_AppearanceUserSettingsTab_fontScaling .mx_Field {
     @mixin mx_Settings_fullWidthField;
 }
+
+.mx_AppearanceUserSettingsTab_fontSlider {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 10px;
+    background: #FFFFFF;
+    border-radius: 10px;
+}
+
+.mx_AppearanceUserSettingsTab_fontSlider_smallText {
+    font-size: 15px;
+    padding-right: 10px;
+}
+
+.mx_AppearanceUserSettingsTab_fontSlider_largeText {
+    font-size: 18px;
+    padding-left: 10px;
+}
diff --git a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
index 046184da69..e1bbaab2cc 100644
--- a/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js
@@ -25,6 +25,7 @@ import Field from "../../../elements/Field";
 import Slider from "../../../elements/Slider";
 import AccessibleButton from "../../../elements/AccessibleButton";
 import dis from "../../../../../dispatcher";
+import _range from "lodash/range";
 
 export default class StyleUserSettingsTab extends React.Component {
     constructor() {
@@ -225,12 +226,17 @@ export default class StyleUserSettingsTab extends React.Component {
     _renderFontSection() {
         return <div className="mx_SettingsTab_section mx_AppearanceUserSettingsTab_fontScaling">
             <span className="mx_SettingsTab_subheading">{_t("Font size")}</span>
-            <Slider
-                values={[12, 14, 16, 18, 20]}
-                value={this.state.fontSize}
-                onSelectionChange={this._onFontSizeChanged}
-                displayFunc={value => {}}
-            />
+            <div className="mx_AppearanceUserSettingsTab_fontSlider">
+                <div className="mx_AppearanceUserSettingsTab_fontSlider_smallText">Aa</div>
+                <Slider
+                    values={_range(SettingsStore.getValue("font_size_min"), SettingsStore.getValue("font_size_max"), 2)}
+                    value={this.state.fontSize}
+                    onSelectionChange={this._onFontSizeChanged}
+                    displayFunc={value => {}}
+                    disabled={false}
+                />
+                <div className="mx_AppearanceUserSettingsTab_fontSlider_largeText">Aa</div>
+            </div>
             <Field
                 type="text"
                 label={_t("Font size")}