Move compoenets/FontSlider to views/Slider

res/css/_components.scss

@@ -7,7 +7,7 @@
 @import "./structures/_CreateRoom.scss";
 @import "./structures/_CustomRoomTagPanel.scss";
 @import "./structures/_FilePanel.scss";
-@import "./structures/_FontSlider.scss";
+@import "./structures/_Slider.scss";
 @import "./structures/_GenericErrorPage.scss";
 @import "./structures/_GroupView.scss";
 @import "./structures/_HeaderButtons.scss";

res/css/structures/_Slider.scss

@@ -39,7 +39,7 @@ limitations under the License.
 
 .mx_Slider_bar > hr {
     width: 100%;
-    border: 0.2rem solid $fontSlider-background-color;
+    border: 0.2rem solid $Slider-background-color;
 }
 
 .mx_Slider_selection {
@@ -55,7 +55,7 @@ limitations under the License.
     position: absolute;
     width: 1.1rem;
     height: 1.1rem;
-    background-color: $fontSlider-selection-color;
+    background-color: $Slider-selection-color;
     border-radius: 50%;
     box-shadow: 0 0 6px lightgrey;
     z-index: 10;
@@ -64,7 +64,7 @@ limitations under the License.
 .mx_Slider_selection > hr {
     transition: width 0.25s;
     margin: 0;
-    border: 0.2rem solid $fontSlider-selection-color;
+    border: 0.2rem solid $Slider-selection-color;
 }
 
 .mx_Slider_dot {
@@ -72,18 +72,18 @@ limitations under the License.
     height: 1rem;
     width: 1rem;
     border-radius: 50%;
-    background-color: $fontSlider-background-color;
+    background-color: $Slider-background-color;
     margin-bottom: 5px;
     z-index: 0;
 }
 
 .mx_Slider_dotActive {
-    background-color: $fontSlider-selection-color;
+    background-color: $Slider-selection-color;
 }
 
 .mx_Slider_dotValue {
     display: flex;
     flex-direction: column;
     align-items: center;
-    color: $fontSlider-background-color;
+    color: $Slider-background-color;
 }

res/themes/light/css/_light.scss

@@ -262,9 +262,9 @@ $togglesw-off-color: #c1c9d6;
 $togglesw-on-color: $accent-color;
 $togglesw-ball-color: #fff;
 
-// FontSlider
-$fontSlider-selection-color: $accent-color;
-$fontSlider-background-color: #c1c9d6;
+// Slider
+$Slider-selection-color: $accent-color;
+$Slider-background-color: #c1c9d6;
 
 $progressbar-color: #000;
 

src/components/views/elements/Slider.tsx

@@ -16,6 +16,7 @@ limitations under the License.
 
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
+import { replaceableComponent } from '../../../utils/replaceableComponent';
 
 type SliderProps = {
         // A callback for the selected value
@@ -93,6 +94,7 @@ type DotProps = {
     label: string,
 }
 
+@replaceableComponent("views.elements.Dot")
 class Dot extends React.Component<DotProps> {
     static propTypes = {
         // Callback for behaviour onclick

src/components/views/settings/tabs/user/AppearanceUserSettingsTab.js

@@ -20,7 +20,7 @@ import SettingsStore, {SettingLevel} from "../../../../../settings/SettingsStore
 import * as sdk from "../../../../../index";
 import {enumerateThemes, ThemeWatcher} from "../../../../../theme";
 import Field from "../../../elements/Field";
-import FontSlider from "../../../../structures/FontSlider";
+import Slider from "../../../elements/Slider";
 import AccessibleButton from "../../../elements/AccessibleButton";
 import dis from "../../../../../dispatcher";
 
@@ -223,7 +223,7 @@ export default class StyleUserSettingsTab extends React.Component {
     _renderFontSection() {
         return <div className="mx_SettingsTab_section mx_StyleUserSettingsTab_fontScaling">
             <span className="mx_SettingsTab_subheading">{_t("Font size")}</span>
-            <FontSlider
+            <Slider
                 values={[12, 14, 16, 18, 20]}
                 value={this.state.fontSize}
                 updateFontSize={this._onFontSizeChanged}