Make the tabs look like the design

src/components/structures/TabbedView.js

@@ -26,11 +26,12 @@ export class Tab {
     /**
      * Creates a new tab.
      * @param {string} tabLabel The untranslated tab label.
-     * @param {string} tabIconRef The relative path to the tab's icon.
+     * @param {string} tabIconJsx The JSX for the tab icon. This should be a plain img element or null.
      * @param {string} tabJsx The JSX for the tab container.
      */
-    constructor(tabLabel, tabIconRef, tabJsx) {
+    constructor(tabLabel, tabIconJsx, tabJsx) {
         this.label = tabLabel;
+        this.icon = tabIconJsx;
         this.body = tabJsx;
     }
 }
@@ -74,10 +75,18 @@ export class TabbedView extends React.Component {
         const idx = this.props.tabs.indexOf(tab);
         if (idx === this._getActiveTabIndex()) classes += "mx_TabbedView_tabLabel_active";
 
+        let tabIcon = null;
+        if (tab.icon) {
+            tabIcon = <span className="mx_TabbedView_tabLabel_icon">{tab.icon}</span>;
+        }
+
         return (
             <span className={classes} key={"tab_label_ " + tab.label}
                   onClick={() => this._setActiveTab(tab)}>
-                {_t(tab.label)}
+                {tabIcon}
+                <span className="mx_TabbedView_tabLabel_text">
+                    {_t(tab.label)}
+                </span>
             </span>
         );
     }

src/components/views/dialogs/UserSettingsDialog.js

@@ -17,7 +17,7 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import {Tab, TabbedView} from "../../structures/TabbedView";
-import {_td} from "../../../languageHandler";
+import {_t, _td} from "../../../languageHandler";
 
 export default class UserSettingsDialog extends React.Component {
     static propTypes = {
@@ -26,14 +26,26 @@ export default class UserSettingsDialog extends React.Component {
 
     _getTabs() {
         return [
-            new Tab(_td("General"), "", <div>General Test</div>),
-            new Tab(_td("Account"), "", <div>Account Test</div>),
+            new Tab(_td("General"), <span className="mx_UserSettingsDialog_settingsIcon mx_TabbedView_maskedIcon" />, <div>General Test</div>),
+            new Tab(_td("Notifications"), <span className="mx_UserSettingsDialog_bellIcon mx_TabbedView_maskedIcon" />, <div>Notifications Test</div>),
+            new Tab(_td("Preferences"), <span className="mx_UserSettingsDialog_preferencesIcon mx_TabbedView_maskedIcon" />, <div>Preferences Test</div>),
+            new Tab(_td("Voice & Video"), <span className="mx_UserSettingsDialog_voiceIcon mx_TabbedView_maskedIcon" />, <div>Voice Test</div>),
+            new Tab(_td("Security & Privacy"), <span className="mx_UserSettingsDialog_securityIcon mx_TabbedView_maskedIcon" />, <div>Security Test</div>),
+            new Tab(_td("Help & About"), <span className="mx_UserSettingsDialog_helpIcon mx_TabbedView_maskedIcon" />, <div>Help Test</div>),
         ];
     }
 
     render() {
         return (
-            <TabbedView tabs={this._getTabs()} />
+            <div className="mx_UserSettingsDialog">
+                <h1 className="mx_UserSettingsDialog_header">
+                    {_t("Settings")}
+                </h1>
+                <span className="mx_UserSettingsDialog_close">
+                    X
+                </span>
+                <TabbedView tabs={this._getTabs()} />
+            </div>
             // <UserSettings
             //     onClose={this.props.onFinished}
             //     brand={SdkConfig.get().brand}

src/i18n/strings/en_EN.json

@@ -1044,7 +1044,10 @@
     "\"%(RoomName)s\" contains devices that you haven't seen before.": "\"%(RoomName)s\" contains devices that you haven't seen before.",
     "Unknown devices": "Unknown devices",
     "General": "General",
-    "Account": "Account",
+    "Preferences": "Preferences",
+    "Voice & Video": "Voice & Video",
+    "Security & Privacy": "Security & Privacy",
+    "Help & About": "Help & About",
     "Unable to load backup status": "Unable to load backup status",
     "Unable to restore backup": "Unable to restore backup",
     "No backup found!": "No backup found!",
@@ -1224,7 +1227,6 @@
     "Click to unmute audio": "Click to unmute audio",
     "Click to mute audio": "Click to mute audio",
     "Filter room names": "Filter room names",
-    "Return to app": "Return to app",
     "Clear filter": "Clear filter",
     "Tried to load a specific point in this room's timeline, but you do not have permission to view the message in question.": "Tried to load a specific point in this room's timeline, but you do not have permission to view the message in question.",
     "Tried to load a specific point in this room's timeline, but was unable to find it.": "Tried to load a specific point in this room's timeline, but was unable to find it.",
@@ -1289,6 +1291,7 @@
     "Add email address": "Add email address",
     "Profile": "Profile",
     "Display name": "Display name",
+    "Account": "Account",
     "To return to your account in future you need to set a password": "To return to your account in future you need to set a password",
     "Logged in as:": "Logged in as:",
     "Access Token:": "Access Token:",