From 96bd052ecf025c8dc3526ec9fba1d7fc5d175d05 Mon Sep 17 00:00:00 2001
From: Andy Balaam <andyb@element.io>
Date: Wed, 20 Oct 2021 13:41:27 +0100
Subject: [PATCH] Improve visibility of font size chooser (#6988)

* Improve visibility of font size chooser

* Move slider dot sizes into variables

* Use a standard font size instead of percentage in Slider

* Use shorthand for padding in FontScalingPanel

* Change Slider text pos to px to be consistent when font changes

* Cleaner dot size for Slider selection
---
 res/css/_common.scss                            |  3 +++
 res/css/views/elements/_Slider.scss             | 17 +++++++++++++----
 res/css/views/settings/_FontScalingPanel.scss   |  2 +-
 src/components/views/elements/Slider.tsx        |  4 +++-
 .../FontScalingPanel-test.tsx.snap              | 10 ++++++++--
 5 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/res/css/_common.scss b/res/css/_common.scss
index d7f8355d81..2242658ae8 100644
--- a/res/css/_common.scss
+++ b/res/css/_common.scss
@@ -27,6 +27,9 @@ $EventTile_e2e_state_indicator_width: 4px;
 $MessageTimestamp_width: 46px; /* 8 + 30 (avatar) + 8 */
 $MessageTimestamp_width_hover: calc($MessageTimestamp_width - 2 * $EventTile_e2e_state_indicator_width);
 
+$slider-dot-size: 1em;
+$slider-selection-dot-size: 2.4em;
+
 :root {
     font-size: 10px;
 
diff --git a/res/css/views/elements/_Slider.scss b/res/css/views/elements/_Slider.scss
index 58ba2813b4..730da021bd 100644
--- a/res/css/views/elements/_Slider.scss
+++ b/res/css/views/elements/_Slider.scss
@@ -54,22 +54,31 @@ limitations under the License.
 
 .mx_Slider_selectionDot {
     position: absolute;
-    width: 1.1em;
-    height: 1.1em;
+    width: $slider-selection-dot-size;
+    height: $slider-selection-dot-size;
     background-color: $slider-selection-color;
     border-radius: 50%;
     box-shadow: 0 0 6px lightgrey;
     z-index: 10;
 }
 
+.mx_Slider_selectionText {
+    color: $muted-fg-color;
+    font-size: $font-14px;
+    position: relative;
+    text-align: center;
+    top: 30px;
+    width: 100%;
+}
+
 .mx_Slider_selection > hr {
     margin: 0;
     border: 0.2em solid $slider-selection-color;
 }
 
 .mx_Slider_dot {
-    height: 1em;
-    width: 1em;
+    height: $slider-dot-size;
+    width: $slider-dot-size;
     border-radius: 50%;
     background-color: $slider-background-color;
     z-index: 0;
diff --git a/res/css/views/settings/_FontScalingPanel.scss b/res/css/views/settings/_FontScalingPanel.scss
index bac1f92a4f..ff2e905320 100644
--- a/res/css/views/settings/_FontScalingPanel.scss
+++ b/res/css/views/settings/_FontScalingPanel.scss
@@ -34,7 +34,7 @@ limitations under the License.
     display: flex;
     flex-direction: row;
     align-items: center;
-    padding: 15px;
+    padding: 15px 15px 35px;
     background: rgba($appearance-tab-border-color, 0.2);
     border-radius: 10px;
     font-size: 10px;
diff --git a/src/components/views/elements/Slider.tsx b/src/components/views/elements/Slider.tsx
index df5776648e..a201659e3c 100644
--- a/src/components/views/elements/Slider.tsx
+++ b/src/components/views/elements/Slider.tsx
@@ -86,7 +86,9 @@ export default class Slider extends React.Component<IProps> {
         if (!this.props.disabled) {
             const offset = this.offset(this.props.values, this.props.value);
             selection = <div className="mx_Slider_selection">
-                <div className="mx_Slider_selectionDot" style={{ left: "calc(-0.55em + " + offset + "%)" }} />
+                <div className="mx_Slider_selectionDot" style={{ left: "calc(-1.195em + " + offset + "%)" }}>
+                    <div className="mx_Slider_selectionText">{ this.props.value }</div>
+                </div>
                 <hr style={{ width: offset + "%" }} />
             </div>;
         }
diff --git a/test/components/views/settings/__snapshots__/FontScalingPanel-test.tsx.snap b/test/components/views/settings/__snapshots__/FontScalingPanel-test.tsx.snap
index 2174b4f289..86163ab762 100644
--- a/test/components/views/settings/__snapshots__/FontScalingPanel-test.tsx.snap
+++ b/test/components/views/settings/__snapshots__/FontScalingPanel-test.tsx.snap
@@ -83,10 +83,16 @@ exports[`FontScalingPanel renders the font scaling UI 1`] = `
                     className="mx_Slider_selectionDot"
                     style={
                       Object {
-                        "left": "calc(-0.55em + 50%)",
+                        "left": "calc(-1.195em + 50%)",
                       }
                     }
-                  />
+                  >
+                    <div
+                      className="mx_Slider_selectionText"
+                    >
+                      15
+                    </div>
+                  </div>
                   <hr
                     style={
                       Object {