Some lints

res/css/views/elements/_Slider.scss

@@ -38,7 +38,7 @@ limitations under the License.
 
 .mx_Slider_bar > hr {
     width: 100%;
-    border: 0.2em solid $Slider-background-color;
+    border: 0.2em solid $slider-background-color;
 }
 
 .mx_Slider_selection {
@@ -54,7 +54,7 @@ limitations under the License.
     position: absolute;
     width: 1.1em;
     height: 1.1em;
-    background-color: $Slider-selection-color;
+    background-color: $slider-selection-color;
     border-radius: 50%;
     box-shadow: 0 0 6px lightgrey;
     z-index: 10;
@@ -63,7 +63,7 @@ limitations under the License.
 .mx_Slider_selection > hr {
     transition: width 0.25s;
     margin: 0;
-    border: 0.2em solid $Slider-selection-color;
+    border: 0.2em solid $slider-selection-color;
 }
 
 .mx_Slider_dot {
@@ -71,19 +71,19 @@ limitations under the License.
     height: 1em;
     width: 1em;
     border-radius: 50%;
-    background-color: $Slider-background-color;
+    background-color: $slider-background-color;
     z-index: 0;
 }
 
 .mx_Slider_dotActive {
-    background-color: $Slider-selection-color;
+    background-color: $slider-selection-color;
 }
 
 .mx_Slider_dotValue {
     display: flex;
     flex-direction: column;
     align-items: center;
-    color: $Slider-background-color;
+    color: $slider-background-color;
 }
 
 // The following is a hack to center the labels without adding

res/themes/light/css/_light.scss

@@ -263,8 +263,8 @@ $togglesw-on-color: $accent-color;
 $togglesw-ball-color: #fff;
 
 // Slider
-$Slider-selection-color: $accent-color;
-$Slider-background-color: #c1c9d6;
+$slider-selection-color: $accent-color;
+$slider-background-color: #c1c9d6;
 
 $progressbar-color: #000;
 

src/FontWatcher.js

@@ -23,7 +23,7 @@ export class FontWatcher {
     }
 
     start() {
-        this._setRootFontSize(SettingsStore.getValue("font_size"));
+        this._setRootFontSize(SettingsStore.getValue("fontSize"));
         this._dispatcherRef = dis.register(this._onAction);
     }
 
@@ -37,15 +37,15 @@ export class FontWatcher {
         }
     };
 
-    _setRootFontSize = size => {
-        const min = SettingsStore.getValue("font_size_min");
-        const max = SettingsStore.getValue("font_size_max");
+    _setRootFontSize = (size) => {
+        const min = SettingsStore.getValue("fontSizeMin");
+        const max = SettingsStore.getValue("fontSizeMax");
 
         const fontSize = Math.max(Math.min(max, size), min);
 
         if (fontSize != size) {
-            SettingsStore.setValue("font_size", null, SettingLevel.Device, fontSize);
+            SettingsStore.setValue("fontSize", null, SettingLevel.Device, fontSize);
         }
         document.querySelector(":root").style.fontSize = fontSize + "px";
-    }
+    };
 }

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

@@ -32,7 +32,7 @@ export default class AppearanceUserSettingsTab extends React.Component {
         super();
 
         this.state = {
-            fontSize: SettingsStore.getValue("font_size", null),
+            fontSize: SettingsStore.getValue("fontSize", null),
             ...this._calculateThemeState(),
             customThemeUrl: "",
             customThemeMessage: {isError: false, text: ""},
@@ -102,15 +102,15 @@ export default class AppearanceUserSettingsTab extends React.Component {
 
     _onFontSizeChanged = (size) => {
         this.setState({fontSize: size});
-        SettingsStore.setValue("font_size", null, SettingLevel.DEVICE, size);
+        SettingsStore.setValue("fontSize", null, SettingLevel.DEVICE, size);
     };
 
     _onValidateFontSize = ({value}) => {
         console.log({value});
 
         const parsedSize = parseFloat(value);
-        const min = SettingsStore.getValue("font_size_min");
-        const max = SettingsStore.getValue("font_size_max");
+        const min = SettingsStore.getValue("fontSizeMin");
+        const max = SettingsStore.getValue("fontSizeMax");
 
         if (isNaN(parsedSize)) {
             return {valid: false, feedback: _t("Size must be a number")};
@@ -123,7 +123,7 @@ export default class AppearanceUserSettingsTab extends React.Component {
             };
         }
 
-        SettingsStore.setValue("font_size", null, SettingLevel.DEVICE, value);
+        SettingsStore.setValue("fontSize", null, SettingLevel.DEVICE, value);
         return {valid: true, feedback: _t('Use between %(min)s pt and %(max)s pt', {min, max})};
     }
 
@@ -253,8 +253,8 @@ export default class AppearanceUserSettingsTab extends React.Component {
                 <div className="mx_AppearanceUserSettingsTab_fontSlider_smallText">Aa</div>
                 <Slider
                     values={_range(
-                        SettingsStore.getValue("font_size_min"),
-                        SettingsStore.getValue("font_size_max")+ 2,
+                        SettingsStore.getValue("fontSizeMin"),
+                        SettingsStore.getValue("fontSizeMax")+ 2,
                         2.5,
                     )}
                     value={this.state.fontSize}

src/settings/Settings.js

@@ -165,18 +165,18 @@ export const SETTINGS = {
         displayName: _td("Show info about bridges in room settings"),
         default: false,
     },
-    "font_size": {
+    "fontSize": {
         displayName: _td("Font size"),
         supportedLevels: LEVELS_ACCOUNT_SETTINGS,
         default: 16,
         controller: new FontSizeController(),
     },
-    "font_size_min": {
+    "fontSizeMin": {
         displayName: _td("Min font size"),
         supportedLevels: LEVELS_ACCOUNT_SETTINGS,
         default: 14,
     },
-    "font_size_max": {
+    "fontSizeMax": {
         displayName: _td("Max font size"),
         supportedLevels: LEVELS_ACCOUNT_SETTINGS,
         default: 24,