From 16f5a667c68a5186b484aecf02df6bec6022ba16 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Thu, 21 Sep 2017 15:03:30 +0100
Subject: [PATCH] Redesign membership section in GroupView

---
 src/components/structures/GroupView.js | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/components/structures/GroupView.js b/src/components/structures/GroupView.js
index 1b4b5cb809..3d29c6d607 100644
--- a/src/components/structures/GroupView.js
+++ b/src/components/structures/GroupView.js
@@ -524,13 +524,15 @@ export default React.createClass({
             const Spinner = sdk.getComponent("elements.Spinner");
 
             if (this.state.membershipBusy) {
-                return <div className="mx_GroupView_invitedSection">
+                return <div className="mx_GroupView_membershipSection">
                     <Spinner />
                 </div>;
             }
 
-            return <div className="mx_GroupView_invitedSection">
-                {_t("%(inviter)s has invited you to join this group", {inviter: group.inviter.userId})}
+            return <div className="mx_GroupView_membershipSection mx_GroupView_membershipSection_invited">
+                <div className="mx_GroupView_membershipSection_description">
+                    {_t("%(inviter)s has invited you to join this group", {inviter: group.inviter.userId})}
+                </div>
                 <div className="mx_GroupView_membership_buttonContainer">
                     <AccessibleButton className="mx_GroupView_textButton mx_RoomHeader_textButton"
                         onClick={this._onAcceptInviteClick}
@@ -545,15 +547,15 @@ export default React.createClass({
                 </div>
             </div>;
         } else if (group.myMembership === 'join') {
-            return <div className="mx_GroupView_invitedSection">
-                {_t("You are a member of this group")}
-                <div className="mx_GroupView_membership_buttonContainer">
-                    <AccessibleButton className="mx_GroupView_textButton mx_RoomHeader_textButton"
-                        onClick={this._onLeaveClick}
-                    >
-                        {_t("Leave")}
-                    </AccessibleButton>
+            return <div className="mx_GroupView_membershipSection mx_GroupView_membershipSection_joined">
+                <div className="mx_GroupView_membershipSection_description">
+                    {_t("You are a member of this group")}
                 </div>
+                <AccessibleButton className="mx_GroupView_textButton mx_RoomHeader_textButton"
+                    onClick={this._onLeaveClick}
+                >
+                    {_t("Leave")}
+                </AccessibleButton>
             </div>;
         }