Bring in theme and language options

res/css/views/elements/_Field.scss

@@ -64,7 +64,7 @@ limitations under the License.
 
 .mx_Field input:focus + label,
 .mx_Field input:not(:placeholder-shown) + label,
-.mx_Field select:focus + label {
+.mx_Field select + label /* Always show a select's label on top to not collide with the value */ {
     transition:
         font-size 0.25s ease-out 0s,
         color 0.25s ease-out 0s,

res/css/views/settings/tabs/_GeneralSettingsTab.scss

@@ -14,11 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_GeneralSettingsTab_changePassword {
+.mx_GeneralSettingsTab_changePassword,
+.mx_GeneralSettingsTab_themeSection {
   display: block;
 }
 
-.mx_GeneralSettingsTab_changePassword .mx_Field {
+.mx_GeneralSettingsTab_changePassword .mx_Field,
+.mx_GeneralSettingsTab_themeSection .mx_Field {
   display: block;
   margin-right: 100px; // Align with the other fields on the page
 }
@@ -32,6 +34,13 @@ limitations under the License.
   margin-top: 0;
 }
 
-.mx_GeneralSettingsTab_accountSection > .mx_EmailAddresses {
+.mx_GeneralSettingsTab_themeSection .mx_Field select {
+  display: block;
+  width: 100%;
+}
+
+.mx_GeneralSettingsTab_accountSection > .mx_EmailAddresses,
+.mx_GeneralSettingsTab_accountSection > .mx_PhoneNumbers,
+.mx_GeneralSettingsTab_languageInput {
   margin-right: 100px; // Align with the other fields on the page
 }

src/components/views/settings/tabs/GeneralSettingsTab.js

@@ -24,8 +24,15 @@ import { DragDropContext } from 'react-beautiful-dnd';
 import ProfileSettings from "../ProfileSettings";
 import EmailAddresses from "../EmailAddresses";
 import PhoneNumbers from "../PhoneNumbers";
+import Field from "../../elements/Field";
+import * as languageHandler from "../../../../languageHandler";
+import {SettingLevel} from "../../../../settings/SettingsStore";
+import SettingsStore from "../../../../settings/SettingsStore";
+import LanguageDropdown from "../../elements/LanguageDropdown";
+const PlatformPeg = require("../../../../PlatformPeg");
 const sdk = require('../../../../index');
 const Modal = require("../../../../Modal");
+const dis = require("../../../../dispatcher");
 
 export default class GeneralSettingsTab extends React.Component {
     static childContextTypes = {
@@ -34,6 +41,11 @@ export default class GeneralSettingsTab extends React.Component {
 
     constructor() {
         super();
+
+        this.state = {
+            language: languageHandler.getCurrentLanguage(),
+            theme: SettingsStore.getValueAt(SettingLevel.ACCOUNT, "theme"),
+        };
     }
 
     getChildContext() {
@@ -42,6 +54,22 @@ export default class GeneralSettingsTab extends React.Component {
         };
     }
 
+    _onLanguageChange = (newLanguage) => {
+        if (this.state.language === newLanguage) return;
+
+        SettingsStore.setValue("language", null, SettingLevel.DEVICE, newLanguage);
+        this.setState({language: newLanguage});
+        PlatformPeg.get().reload();
+    };
+
+    _onThemeChange = (e) => {
+        const newTheme = e.target.value;
+        if (this.state.theme === newTheme) return;
+
+        SettingsStore.setValue("theme", null, SettingLevel.ACCOUNT, newTheme);
+        dis.dispatch({action: 'set_theme', value: newTheme});
+    };
+
     _onPasswordChangeError = (err) => {
         // TODO: Figure out a design that doesn't involve replacing the current dialog
         let errMsg = err.error || "";
@@ -114,19 +142,28 @@ export default class GeneralSettingsTab extends React.Component {
     }
 
     _renderLanguageSection() {
+        // TODO: Convert to new-styled Field
         return (
             <div className="mx_SettingsTab_section">
                 <span className="mx_SettingsTab_subheading">{_t("Language and region")}</span>
-                <p>LANGUAGE SECTION</p>
+                <LanguageDropdown className="mx_GeneralSettingsTab_languageInput"
+                                  onOptionChange={this._onLanguageChange} value={this.state.language}/>
             </div>
         );
     }
 
     _renderThemeSection() {
+        // TODO: Re-enable theme selection once the themes actually work
         return (
-            <div className="mx_SettingsTab_section">
+            <div className="mx_SettingsTab_section mx_GeneralSettingsTab_themeSection">
                 <span className="mx_SettingsTab_subheading">{_t("Theme")}</span>
-                <p>THEME SECTION</p>
+                <Field id="theme" label={_t("Theme")} element="select" disabled={true}
+                       value={this.state.theme} onChange={this._onThemeChange}>
+                    <option value="light">{_t("Light theme")}</option>
+                    <option value="dark">{_t("Dark theme")}</option>
+                    <option value="dharma">{_t("2018 theme")}</option>
+                    <option value="status">{_t("Status.im theme")}</option>
+                </Field>
             </div>
         );
     }