Make the tabs look like the design

res/css/_components.scss

@@ -52,6 +52,7 @@
 @import "./views/dialogs/_SetPasswordDialog.scss";
 @import "./views/dialogs/_ShareDialog.scss";
 @import "./views/dialogs/_UnknownDeviceDialog.scss";
+@import "./views/dialogs/_UserSettingsDialog.scss";
 @import "./views/dialogs/keybackup/_CreateKeyBackupDialog.scss";
 @import "./views/dialogs/keybackup/_KeyBackupFailedDialog.scss";
 @import "./views/dialogs/keybackup/_RestoreKeyBackupDialog.scss";

res/css/structures/_TabbedView.scss

@@ -39,15 +39,46 @@ limitations under the License.
   height: 20px;
 }
 
-.mx_TabbedView_tabLabel:hover {
-  font-weight: 700;
-}
-
 .mx_TabbedView_tabLabel_active {
   background-color: $tab-label-active-bg-color;
   color: $tab-label-active-fg-color;
 }
 
+.mx_TabbedView_tabLabel_icon {
+  width: 12px;
+  height: 12px;
+  margin-left: 6px;
+  margin-right: 9px;
+  position: relative;
+}
+
+.mx_TabbedView_tabLabel_icon > .mx_TabbedView_maskedIcon {
+  width: 12px;
+  height: 12px;
+  display: inline-block;
+}
+
+.mx_TabbedView_tabLabel_icon > .mx_TabbedView_maskedIcon:before {
+  background-color: $tab-label-icon-bg-color;
+  mask-repeat: no-repeat;
+  mask-size: 12px;
+  mask-position: center;
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.mx_TabbedView_tabLabel_active .mx_TabbedView_tabLabel_icon > .mx_TabbedView_maskedIcon:before {
+  background-color: $tab-label-active-icon-bg-color;
+}
+
+.mx_TabbedView_tabLabel_text {
+  vertical-align: middle;
+}
+
 .mx_TabbedView_tabPanel {
   width: calc(100% - 320px);
   display: inline-block;

res/css/views/dialogs/_UserSettingsDialog.scss

@@ -0,0 +1,26 @@
+.mx_UserSettingsDialog_settingsIcon:before {
+  mask: url('$(res)/img/feather-icons/settings.svg');
+}
+
+.mx_UserSettingsDialog_voiceIcon:before {
+  mask: url('$(res)/img/feather-icons/phone.svg');
+}
+
+.mx_UserSettingsDialog_bellIcon:before {
+  mask: url('$(res)/img/feather-icons/notifications.svg');
+}
+
+.mx_UserSettingsDialog_preferencesIcon:before {
+  // TODO: Use real icon
+  mask: url('$(res)/img/feather-icons/paperclip.svg');
+}
+
+.mx_UserSettingsDialog_securityIcon:before {
+  // TODO: Use real icon
+  mask: url('$(res)/img/feather-icons/life-buoy.svg');
+}
+
+.mx_UserSettingsDialog_helpIcon:before {
+  // TODO: Use real icon
+  mask: url('$(res)/img/feather-icons/share.svg');
+}

res/themes/dharma/css/_dharma.scss

@@ -191,6 +191,8 @@ $tab-label-fg-color: #45474a;
 $tab-label-active-fg-color: #ffffff;
 $tab-label-bg-color: transparent;
 $tab-label-active-bg-color: #7ac9a1;
+$tab-label-icon-bg-color: #454545;
+$tab-label-active-icon-bg-color: #ffffff;
 
 // unused?
 $progressbar-color: #000;

res/themes/light/css/_base.scss

@@ -187,6 +187,8 @@ $tab-label-fg-color: #45474a;
 $tab-label-active-fg-color: #ffffff;
 $tab-label-bg-color: transparent;
 $tab-label-active-bg-color: #7ac9a1;
+$tab-label-icon-bg-color: #454545;
+$tab-label-active-icon-bg-color: #ffffff;
 
 // unused?
 $progressbar-color: #000;

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,11 +75,19 @@ 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)}>
+                {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 (
+            <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:",