Bring flair into the new settings

Makes the flair options in old settings look broken (cosmetic issues), but it's fine because we're ripping that out in due time.

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/tabs/_SettingsTab.scss

@@ -10,8 +10,13 @@
   font-family: $font-family-semibold;
   color: $primary-fg-color;
   margin-bottom: 10px;
-}
-
-.mx_SettingsTab_section {
   margin-top: 10px;
 }
+
+.mx_SettingsTab_subsectionText {
+  color: $settings-subsection-fg-color;
+  font-size: 12px;
+  padding-bottom: 12px;
+  margin: 0;
+  display: block;
+}

res/themes/dharma/css/_dharma.scss

@@ -125,6 +125,7 @@ $settings-profile-overlay-bg-color: #000;
 $settings-profile-overlay-placeholder-bg-color: transparent;
 $settings-profile-overlay-fg-color: #fff;
 $settings-profile-overlay-placeholder-fg-color: #454545;
+$settings-subsection-fg-color: #61708b;
 
 $voip-decline-color: #f48080;
 $voip-accept-color: #80f480;

res/themes/light/css/_base.scss

@@ -118,6 +118,7 @@ $settings-profile-overlay-bg-color: #000;
 $settings-profile-overlay-placeholder-bg-color: transparent;
 $settings-profile-overlay-fg-color: #fff;
 $settings-profile-overlay-placeholder-fg-color: #454545;
+$settings-subsection-fg-color: #61708b;
 
 $voip-decline-color: #f48080;
 $voip-accept-color: #80f480;

src/components/views/groups/GroupUserSettings.js

@@ -68,15 +68,12 @@ export default React.createClass({
             text = _t("You're not currently a member of any communities.");
         }
 
-        return <div>
+        return (
-            <h3>{ _t('Flair') }</h3>
+            <div>
-            <div className="mx_UserSettings_section">
+                <p className="mx_SettingsTab_subsectionText">{ text }</p>
-                <p>
-                    { text }
-                </p>
                 { scrollbox }
             </div>
-        </div>;
+        );
     },
 
     render() {

src/components/views/settings/tabs/GeneralSettingsTab.js

@@ -20,8 +20,16 @@ import MatrixClientPeg from "../../../../MatrixClientPeg";
 import Field from "../../elements/Field";
 import AccessibleButton from "../../elements/AccessibleButton";
 import classNames from 'classnames';
+import GroupUserSettings from "../../groups/GroupUserSettings";
+import PropTypes from "prop-types";
+import {MatrixClient} from "matrix-js-sdk";
+import { DragDropContext } from 'react-beautiful-dnd';
 
 export default class GeneralSettingsTab extends React.Component {
+    static childContextTypes = {
+        matrixClient: PropTypes.instanceOf(MatrixClient),
+    };
+
     constructor() {
         super();
 
@@ -40,6 +48,12 @@ export default class GeneralSettingsTab extends React.Component {
         };
     }
 
+    getChildContext() {
+        return {
+            matrixClient: MatrixClientPeg.get(),
+        };
+    }
+
     _uploadAvatar = (e) => {
         e.stopPropagation();
         e.preventDefault();
@@ -149,14 +163,19 @@ export default class GeneralSettingsTab extends React.Component {
                                   disabled={!this.state.enableProfileSave}>
                     {_t("Save")}
                 </AccessibleButton>
-                <div>FLAIR</div>
             </form>
         );
 
+        // HACK/TODO: Using DragDropContext feels wrong, but we need it.
         return (
             <div className="mx_SettingsTab_section">
                 <span className="mx_SettingsTab_subheading">{_t("Profile")}</span>
                 {form}
+
+                <span className="mx_SettingsTab_subheading">{_t("Flair")}</span>
+                <DragDropContext>
+                    <GroupUserSettings />
+                </DragDropContext>
             </div>
         );
     }

src/i18n/strings/en_EN.json

@@ -404,10 +404,10 @@
     "Noisy": "Noisy",
     "Profile picture": "Profile picture",
     "Upload profile picture": "Upload profile picture",
-    "Upload": "Upload",
     "Display Name": "Display Name",
     "Save": "Save",
     "Profile": "Profile",
+    "Flair": "Flair",
     "Account": "Account",
     "Language and region": "Language and region",
     "Theme": "Theme",
@@ -680,7 +680,6 @@
     "New address (e.g. #foo:%(localDomain)s)": "New address (e.g. #foo:%(localDomain)s)",
     "Invalid community ID": "Invalid community ID",
     "'%(groupId)s' is not a valid community ID": "'%(groupId)s' is not a valid community ID",
-    "Flair": "Flair",
     "Showing flair for these communities:": "Showing flair for these communities:",
     "This room is not showing flair for any communities": "This room is not showing flair for any communities",
     "New community ID (e.g. +foo:%(localDomain)s)": "New community ID (e.g. +foo:%(localDomain)s)",