Make the dialog look more like a new dialog

res/css/_common.scss

@@ -160,7 +160,7 @@ textarea {
     padding: 0 58px 36px;
     width: 60%;
     max-width: 704px;
-    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2);
+    box-shadow: 2px 15px 30px 0 $dialog-shadow-color;
     max-height: 80%;
     overflow-y: auto;
 }
@@ -171,7 +171,7 @@ textarea {
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: $dialog-background-bg-color;
+    background-color: $dialog-backdrop-color;
     opacity: 0.8;
 }
 

res/css/structures/_TabbedView.scss

@@ -82,8 +82,8 @@ limitations under the License.
 .mx_TabbedView_tabPanel {
   width: calc(100% - 320px);
   display: inline-block;
-  height: 100vh; // 100% of viewport height
   margin-left: 20px;
+  flex-grow: 1;
 }
 
 .mx_TabbedView_tabPanelContent {

res/css/views/dialogs/_UserSettingsDialog.scss

@@ -1,3 +1,44 @@
+.mx_UserSettingsDialog_header {
+  font-size: 24px;
+  display: block;
+  text-align: center;
+  color: $dialog-title-fg-color;
+  margin-top: 23px;
+  margin-bottom: 32px;
+  padding: 0;
+}
+
+.mx_UserSettingsDialog_close {
+  position: absolute;
+  top: 23px;
+  right: 25px;
+}
+
+.mx_UserSettingsDialog_closeIcon {
+  width: 14px;
+  height: 14px;
+  display: inline-block;
+}
+
+.mx_UserSettingsDialog_closeIcon:before {
+  // TODO: Use real icon
+  mask: url('$(res)/img/feather-icons/video.svg');
+  background-color: $dialog-close-fg-color;
+  mask-repeat: no-repeat;
+  mask-size: 14px;
+  mask-position: center;
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+
+// ICONS
+// ==========================================================
+
 .mx_UserSettingsDialog_settingsIcon:before {
   mask: url('$(res)/img/feather-icons/settings.svg');
 }

res/themes/dharma/css/_dharma.scss

@@ -96,6 +96,11 @@ $avatar-bg-color: #ffffff;
 
 $h3-color: #3d3b39;
 
+$dialog-title-fg-color: #454545;
+$dialog-backdrop-color: rgba(46, 48, 51, 0.38);
+$dialog-shadow-color: rgba(0, 0, 0, 0.48);
+$dialog-close-fg-color: #9fa9ba;
+
 $dialog-background-bg-color: #e9e9e9;
 $lightbox-background-bg-color: #000;
 

res/themes/light/css/_base.scss

@@ -93,6 +93,11 @@ $avatar-bg-color: #ffffff;
 
 $h3-color: #3d3b39;
 
+$dialog-title-fg-color: #454545;
+$dialog-backdrop-color: rgba(46, 48, 51, 0.38);
+$dialog-shadow-color: rgba(0, 0, 0, 0.48);
+$dialog-close-fg-color: #9fa9ba;
+
 $dialog-background-bg-color: #e9e9e9;
 $lightbox-background-bg-color: #000;
 

src/components/views/dialogs/UserSettingsDialog.js

@@ -18,6 +18,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {Tab, TabbedView} from "../../structures/TabbedView";
 import {_t, _td} from "../../../languageHandler";
+import AccessibleButton from "../elements/AccessibleButton";
 
 export default class UserSettingsDialog extends React.Component {
     static propTypes = {
@@ -38,12 +39,12 @@ export default class UserSettingsDialog extends React.Component {
     render() {
         return (
             <div className="mx_UserSettingsDialog">
-                <h1 className="mx_UserSettingsDialog_header">
+                <div className="mx_UserSettingsDialog_header">
                     {_t("Settings")}
-                </h1>
                     <span className="mx_UserSettingsDialog_close">
-                    X
+                        <AccessibleButton className="mx_UserSettingsDialog_closeIcon" onClick={this.props.onFinished} />
                     </span>
+                </div>
                 <TabbedView tabs={this._getTabs()} />
             </div>
             // <UserSettings