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.

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>
-            <h3>{ _t('Flair') }</h3>
-            <div className="mx_UserSettings_section">
-                <p>
-                    { text }
-                </p>
+        return (
+            <div>
+                <p className="mx_SettingsTab_subsectionText">{ 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>
         );
     }