Address design issues and set theme at device level

res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss

@@ -44,8 +44,15 @@ limitations under the License.
     padding-right: 5px;
 }
 
+.mx_AppearanceUserSettingsTab {
+    > .mx_SettingsTab_SubHeading {
+        margin-bottom: 32px;
+    }
+}
+
 .mx_AppearanceUserSettingsTab_themeSection {
     $radio-bg-color: $input-darker-bg-color;
+    color: $primary-fg-color;
 
     > .mx_ThemeSelectors {
         display: flex;
@@ -53,19 +60,31 @@ limitations under the License.
         flex-wrap: wrap;
 
         margin-top: 13px;
+        margin-bottom: 30px;
 
         > .mx_RadioButton {
             padding: $font-16px;
+            box-sizing: border-box;
             border-radius: 10px;
-            background: rgba($radio-bg-color, 0.2);
             width: 180px;
+
+            background: rgba($radio-bg-color, 0.2);
+
             flex-shrink: 1;
             flex-grow: 0;
+
             margin-right: 15px;
             margin-top: 10px;
+
+            font-weight: 600;
+            color: $muted-fg-color;
+
+            > span {
+                justify-content: center;
+            }
         }
 
-        > .mx_RadioButton:not([disabled]) {
+        > .mx_RadioButton_enabled {
             // These need to be hardcoded because they don't change with the theme
             &.mx_ThemeSelector_light {
                 background-color: #f3f8fd;
@@ -74,6 +93,7 @@ limitations under the License.
 
             &.mx_ThemeSelector_dark {
                 background-color: #181b21;
+                color: #f3f8fd;
 
                 > input > div {
                     border-color: $input-darker-bg-color;
@@ -85,6 +105,7 @@ limitations under the License.
 
             &.mx_ThemeSelector_black {
                 background-color: #000000;
+                color: #f3f8fd;
 
                 > input > div {
                     border-color: $input-darker-bg-color;

src/components/views/elements/StyledRadioButton.tsx

@@ -29,9 +29,16 @@ export default class StyledRadioButton extends React.PureComponent<IProps, IStat
     }
 
     public render() {
-        const { children, className, ...otherProps } = this.props;
-        return <label className={classnames('mx_RadioButton', className)}>
-            <input type='radio' {...otherProps} />
+        const { children, className, disabled, ...otherProps } = this.props;
+        const _className = classnames(
+            'mx_RadioButton',
+            className,
+            {
+                "mx_RadioButton_disabled": disabled,
+                "mx_RadioButton_enabled": !disabled,
+            });
+        return <label className={_className}>
+            <input type='radio' disabled={disabled} {...otherProps} />
             {/* Used to render the radio button circle */}
             <div><div></div></div>
             <span>{children}</span>

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

@@ -110,7 +110,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
         // doing getValue in the .catch will still return the value we failed to set,
         // so remember what the value was before we tried to set it so we can revert
         const oldTheme: string = SettingsStore.getValue('theme');
-        SettingsStore.setValue("theme", null, SettingLevel.ACCOUNT, newTheme).catch(() => {
+        SettingsStore.setValue("theme", null, SettingLevel.DEVICE, newTheme).catch(() => {
             dis.dispatch<RecheckThemePayload>({action: Action.RecheckTheme});
             this.setState({theme: oldTheme});
         });
@@ -316,7 +316,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
 
     render() {
         return (
-            <div className="mx_SettingsTab">
+            <div className="mx_SettingsTab mx_AppearanceUserSettingsTab">
                 <div className="mx_SettingsTab_heading">{_t("Customise your appearance")}</div>
                 <div className="mx_SettingsTab_SubHeading">
                     {_t("Appearance Settings only affect this Riot session.")}

src/i18n/strings/en_EN.json

@@ -298,8 +298,8 @@
     "%(senderName)s changed a rule that was banning rooms matching %(oldGlob)s to matching %(newGlob)s for %(reason)s": "%(senderName)s changed a rule that was banning rooms matching %(oldGlob)s to matching %(newGlob)s for %(reason)s",
     "%(senderName)s changed a rule that was banning servers matching %(oldGlob)s to matching %(newGlob)s for %(reason)s": "%(senderName)s changed a rule that was banning servers matching %(oldGlob)s to matching %(newGlob)s for %(reason)s",
     "%(senderName)s updated a ban rule that was matching %(oldGlob)s to matching %(newGlob)s for %(reason)s": "%(senderName)s updated a ban rule that was matching %(oldGlob)s to matching %(newGlob)s for %(reason)s",
-    "Light theme": "Light theme",
-    "Dark theme": "Dark theme",
+    "Light": "Light",
+    "Dark": "Dark",
     "You signed in to a new session without verifying it:": "You signed in to a new session without verifying it:",
     "Verify your other session using one of the options below.": "Verify your other session using one of the options below.",
     "%(name)s (%(userId)s) signed in to a new session without verifying it:": "%(name)s (%(userId)s) signed in to a new session without verifying it:",

src/theme.js

@@ -24,8 +24,8 @@ import ThemeWatcher from "./settings/watchers/ThemeWatcher";
 
 export function enumerateThemes() {
     const BUILTIN_THEMES = {
-        "light": _t("Light theme"),
-        "dark": _t("Dark theme"),
+        "light": _t("Light"),
+        "dark": _t("Dark"),
     };
     const customThemes = SettingsStore.getValue("custom_themes");
     const customThemeNames = {};