Implement the "General" tab of new user settings

res/css/_components.scss

@@ -79,6 +79,7 @@
 @import "./views/elements/_RoleButton.scss";
 @import "./views/elements/_Spinner.scss";
 @import "./views/elements/_SyntaxHighlight.scss";
+@import "./views/elements/_ToggleSwitch.scss";
 @import "./views/elements/_ToolTipButton.scss";
 @import "./views/globals/_MatrixToolbar.scss";
 @import "./views/groups/_GroupPublicityToggle.scss";
@@ -127,9 +128,12 @@
 @import "./views/rooms/_TopUnreadMessagesBar.scss";
 @import "./views/rooms/_WhoIsTypingTile.scss";
 @import "./views/settings/_DevicesPanel.scss";
+@import "./views/settings/_EmailAddresses.scss";
 @import "./views/settings/_IntegrationsManager.scss";
 @import "./views/settings/_KeyBackupPanel.scss";
 @import "./views/settings/_Notifications.scss";
+@import "./views/settings/_PhoneNumbers.scss";
+@import "./views/settings/_ProfileSettings.scss";
 @import "./views/settings/tabs/_GeneralSettingsTab.scss";
 @import "./views/settings/tabs/_SettingsTab.scss";
 @import "./views/voip/_CallView.scss";

res/css/structures/_UserSettings.scss

@@ -255,3 +255,15 @@ input.mx_UserSettings_phoneNumberField {
 .mx_UserSettings_analyticsModal table {
     margin: 10px 0px;
 }
+
+
+// Temp styles to keep the layout moderately usable. Not perfect, but better
+// than 30 options being impossible to understand.
+.mx_UserSettings .mx_SettingsFlag {
+    height: 30px;
+}
+
+.mx_UserSettings .mx_SettingsFlag .mx_ToggleSwitch {
+    float: left;
+    margin-right: 5px;
+}

res/css/views/elements/_AccessibleButton.scss

@@ -42,3 +42,35 @@ limitations under the License.
     color: $button-primary-disabled-fg-color;
     background-color: $button-primary-disabled-bg-color;
 }
+
+.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_primary_sm {
+    padding: 5px 12px;
+    color: $button-primary-fg-color;
+    background-color: $button-primary-bg-color;
+}
+
+.mx_AccessibleButton_kind_primary_sm.mx_AccessibleButton_disabled {
+    color: $button-primary-disabled-fg-color;
+    background-color: $button-primary-disabled-bg-color;
+}
+
+.mx_AccessibleButton_kind_danger {
+    color: $button-danger-fg-color;
+    background-color: $button-danger-bg-color;
+}
+
+.mx_AccessibleButton_kind_danger.mx_AccessibleButton_disabled {
+    color: $button-danger-disabled-fg-color;
+    background-color: $button-danger-disabled-bg-color;
+}
+
+.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_danger_sm {
+    padding: 5px 12px;
+    color: $button-danger-fg-color;
+    background-color: $button-danger-bg-color;
+}
+
+.mx_AccessibleButton_kind_danger_sm.mx_AccessibleButton_disabled {
+    color: $button-danger-disabled-fg-color;
+    background-color: $button-danger-disabled-bg-color;
+}

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/elements/_ToggleSwitch.scss

@@ -0,0 +1,51 @@
+/*
+Copyright 2019 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+// TODO: Fancy transitions
+
+.mx_ToggleSwitch {
+    width: 48px;
+    height: 24px;
+    border-radius: 14px;
+    background-color: $togglesw-off-color;
+    position: relative;
+}
+
+.mx_ToggleSwitch_enabled {
+    cursor: pointer;
+}
+
+.mx_ToggleSwitch.mx_ToggleSwitch_on {
+    background-color: $togglesw-on-color;
+}
+
+.mx_ToggleSwitch_ball {
+    margin: 2px;
+    width: 20px;
+    height: 20px;
+    border-radius: 20px;
+    background-color: $togglesw-ball-color;
+    position: absolute;
+    top: 0;
+}
+
+.mx_ToggleSwitch:not(.mx_ToggleSwitch_on) > .mx_ToggleSwitch_ball {
+    left: 2px;
+}
+
+.mx_ToggleSwitch_on > .mx_ToggleSwitch_ball {
+    right: 2px;
+}

res/css/views/groups/_GroupUserSettings.scss

@@ -18,6 +18,5 @@ limitations under the License.
     height: 200px;
     border: 1px solid $primary-hairline-color;
     border-radius: 3px;
-    margin-right: 32px;
     overflow: hidden;
 }

res/css/views/settings/_EmailAddresses.scss

@@ -0,0 +1,43 @@
+/*
+Copyright 2019 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_ExistingEmailAddress {
+  margin-bottom: 5px;
+}
+
+.mx_ExistingEmailAddress_delete {
+  margin-right: 5px;
+  cursor: pointer;
+  vertical-align: middle;
+}
+
+.mx_ExistingEmailAddress_email {
+  vertical-align: middle;
+}
+
+.mx_ExistingEmailAddress_promptText {
+  margin-right: 10px;
+}
+
+.mx_ExistingEmailAddress_confirmBtn {
+  margin-right: 5px;
+}
+
+.mx_EmailAddresses_new .mx_Field input {
+  // Use 100% of the space available for the input, but don't let the 10px
+  // padding on either side of the input to push it out of alignment.
+  width: calc(100% - 20px);
+}

res/css/views/settings/_PhoneNumbers.scss

@@ -0,0 +1,56 @@
+/*
+Copyright 2019 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_ExistingPhoneNumber {
+  margin-bottom: 5px;
+}
+
+.mx_ExistingPhoneNumber_delete {
+  margin-right: 5px;
+  cursor: pointer;
+  vertical-align: middle;
+}
+
+.mx_ExistingPhoneNumber_address {
+  vertical-align: middle;
+}
+
+.mx_ExistingPhoneNumber_promptText {
+  margin-right: 10px;
+}
+
+.mx_ExistingPhoneNumber_confirmBtn {
+  margin-right: 5px;
+}
+
+.mx_PhoneNumbers_new .mx_Field input {
+  // Use 100% of the space available for the input, but don't let the 10px
+  // padding on either side of the input to push it out of alignment.
+  width: calc(100% - 20px);
+}
+
+.mx_PhoneNumbers_input {
+  display: flex;
+  align-items: center;
+}
+
+.mx_PhoneNumbers_input > .mx_Field {
+  flex-grow: 1;
+}
+
+.mx_PhoneNumbers_country {
+  width: 80px;
+}

res/css/views/settings/_ProfileSettings.scss

@@ -0,0 +1,107 @@
+/*
+Copyright 2019 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_ProfileSettings_profile {
+  display: flex;
+}
+
+.mx_ProfileSettings_controls {
+  flex-grow: 1;
+}
+
+.mx_ProfileSettings_controls .mx_Field #profileDisplayName {
+  width: calc(100% - 20px); // subtract 10px padding on left and right
+}
+
+.mx_ProfileSettings_avatar {
+  width: 88px;
+  height: 88px;
+  margin-left: 13px;
+  position: relative;
+  cursor: pointer;
+}
+
+.mx_ProfileSettings_avatar > * {
+  display: block;
+  width: 88px;
+  height: 88px;
+  border-radius: 4px;
+}
+
+.mx_ProfileSettings_avatar .mx_ProfileSettings_avatarPlaceholder {
+  background-color: $settings-profile-placeholder-bg-color;
+}
+
+.mx_ProfileSettings_avatarOverlay {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: none;
+  text-align: center;
+  vertical-align: middle;
+  font-size: 10px;
+}
+
+.mx_ProfileSettings_avatar:hover .mx_ProfileSettings_avatarOverlay {
+  display: inline-block;
+  opacity: 0.5 !important;
+  color: $settings-profile-overlay-fg-color !important;
+  background-color: $settings-profile-overlay-bg-color !important;
+}
+
+.mx_ProfileSettings_avatarOverlay_show {
+  display: inline-block;
+  opacity: 1;
+  color: $settings-profile-overlay-placeholder-fg-color;
+  background-color: $settings-profile-overlay-placeholder-bg-color;
+}
+
+.mx_ProfileSettings_avatarOverlayText {
+  display: block;
+  margin-top: 17px;
+  margin-bottom: 8px;
+}
+
+.mx_ProfileSettings_avatarOverlayImgContainer {
+  position: relative;
+  width: 14px;
+  height: 14px;
+  margin: auto;
+}
+
+.mx_ProfileSettings_avatarOverlayImg:before {
+  background-color: $settings-profile-overlay-placeholder-fg-color;
+  mask: url("$(res)/img/feather-icons/upload.svg");
+  mask-repeat: no-repeat;
+  mask-size: 14px;
+  mask-position: center;
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.mx_ProfileSettings_avatar:hover .mx_ProfileSettings_avatarOverlayImg:before {
+  background-color: $settings-profile-overlay-fg-color !important;
+}
+
+.mx_ProfileSettings_avatarUpload {
+  display: none;
+}