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

@@ -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;
 

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;

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;

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>;
         }

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 {