Improve the profile section a bit and add a highlight to the temp tab

res/css/structures/_TabbedView.scss

@@ -45,6 +45,11 @@ limitations under the License.
   color: $tab-label-active-fg-color;
 }
 
+// TODO: Remove temporary hack alongside "visit old settings" tab
+.mx_TabbedView_tabLabel_TEMP_HACK {
+  background-color: orange;
+}
+
 .mx_TabbedView_tabLabel_icon {
   width: 14px;
   height: 14px;
@@ -89,4 +94,5 @@ limitations under the License.
 
 .mx_TabbedView_tabPanelContent {
   flex-grow: 1;
+  min-width: 560px;
 }

res/css/views/elements/_AccessibleButton.scss

@@ -21,3 +21,24 @@ limitations under the License.
 .mx_AccessibleButton {
     cursor: pointer;
 }
+
+.mx_AccessibleButton_disabled {
+    cursor: default;
+}
+
+.mx_AccessibleButton_hasKind {
+    padding: 10px 25px;
+    text-align: center;
+    border-radius: 4px;
+    display: inline-block;
+}
+
+.mx_AccessibleButton_kind_primary {
+    color: $button-primary-fg-color;
+    background-color: $button-primary-bg-color;
+}
+
+.mx_AccessibleButton_kind_primary.mx_AccessibleButton_disabled {
+    color: $button-primary-disabled-fg-color;
+    background-color: $button-primary-disabled-bg-color;
+}

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

@@ -1,6 +1,25 @@
-.mx_GeneralSettingsTab_profile input {
+.mx_GeneralSettingsTab_profile {
+  display: flex;
+}
+
+.mx_GeneralSettingsTab_profileControls {
+  flex-grow: 1;
+}
+
+.mx_GeneralSettingsTab_profileControls .mx_Field #profileDisplayName {
+  width: calc(100% - 20px); // subtract 10px padding on left and right
+}
+
+.mx_GeneralSettingsTab_profileAvatar {
+  width: 88px;
+  height: 88px;
+  margin-left: 13px;
+}
+
+.mx_GeneralSettingsTab_profileAvatar div {
   display: block;
-  font-size: 14px;
-  padding: 5px;
+  width: 88px;
+  height: 88px;
   border-radius: 4px;
+  background-color: #ccc;
 }