From a0e218d1071a98f779eb716e1405ada9b4ad829b Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Fri, 20 Oct 2017 17:28:33 +0100
Subject: [PATCH 1/2] Add placeholder to MyGroups page, adjust CSS classes

 - This is part of a general improvement in the look of MyGroups
 - Wording on "Create a community to..." modified to not have the word "community" twice
---
 src/components/structures/MyGroups.js | 65 ++++++++++++++++-----------
 src/i18n/strings/en_EN.json           |  5 ++-
 2 files changed, 41 insertions(+), 29 deletions(-)

diff --git a/src/components/structures/MyGroups.js b/src/components/structures/MyGroups.js
index 6c9aa88b8d..038074beff 100644
--- a/src/components/structures/MyGroups.js
+++ b/src/components/structures/MyGroups.js
@@ -118,9 +118,18 @@ export default withMatrixClient(React.createClass({
             this.state.groups.forEach((g) => {
                 groupNodes.push(<GroupTile groupId={g} />);
             });
-            content = <div className="mx_MyGroups_joinedGroups">
-                { groupNodes }
-            </div>;
+            content = groupNodes.length > 0 ?
+                <div>
+                    <h3>{ _t('Your Communities') }</h3>
+                    <div className="mx_MyGroups_joinedGroups">
+                        { groupNodes }
+                    </div>
+                </div> :
+                <div className="mx_MyGroups_placeholder">
+                    { _t(
+                        "You're currently not a member of any communities.",
+                    ) }
+                </div>;
         } else if (this.state.error) {
             content = <div className="mx_MyGroups_error">
                 { _t('Error whilst fetching joined communities') }
@@ -131,38 +140,40 @@ export default withMatrixClient(React.createClass({
 
         return <div className="mx_MyGroups">
             <SimpleRoomHeader title={_t("Communities")} icon="img/icons-groups.svg" />
-            <div className='mx_MyGroups_joinCreateBox'>
-                <div className="mx_MyGroups_createBox">
-                    <div className="mx_MyGroups_joinCreateHeader">
-                        { _t('Create a new community') }
-                    </div>
-                    <AccessibleButton className='mx_MyGroups_joinCreateButton' onClick={this._onCreateGroupClick}>
+            <div className='mx_MyGroups_header'>
+                <div className="mx_MyGroups_headerCard">
+                    <AccessibleButton className='mx_MyGroups_headerCard_button' onClick={this._onCreateGroupClick}>
                         <TintableSvg src="img/icons-create-room.svg" width="50" height="50" />
                     </AccessibleButton>
-                    { _t(
-                        'Create a community to represent your community! '+
-                        'Define a set of rooms and your own custom homepage '+
-                        'to mark out your space in the Matrix universe.',
-                    ) }
+                    <div className="mx_MyGroups_headerCard_content">
+                        <div className="mx_MyGroups_headerCard_header">
+                            { _t('Create a new community') }
+                        </div>
+                        { _t(
+                            'Create a community to group together users and rooms! ' +
+                            'Build a custom homepage to mark out your space in the Matrix universe.',
+                        ) }
+                    </div>
                 </div>
-                <div className="mx_MyGroups_joinBox">
-                    <div className="mx_MyGroups_joinCreateHeader">
-                        { _t('Join an existing community') }
-                    </div>
-                    <AccessibleButton className='mx_MyGroups_joinCreateButton' onClick={this._onJoinGroupClick}>
+                <div className="mx_MyGroups_joinBox mx_MyGroups_headerCard">
+                    <AccessibleButton className='mx_MyGroups_headerCard_button' onClick={this._onJoinGroupClick}>
                         <TintableSvg src="img/icons-create-room.svg" width="50" height="50" />
                     </AccessibleButton>
-                    { _tJsx(
-                        'To join an existing community you\'ll have to '+
-                        'know its community identifier; this will look '+
-                        'something like <i>+example:matrix.org</i>.',
-                        /<i>(.*)<\/i>/,
-                        (sub) => <i>{ sub }</i>,
-                    ) }
+                    <div className="mx_MyGroups_headerCard_content">
+                        <div className="mx_MyGroups_headerCard_header">
+                            { _t('Join an existing community') }
+                        </div>
+                        { _tJsx(
+                            'To join an existing community you\'ll have to '+
+                            'know its community identifier; this will look '+
+                            'something like <i>+example:matrix.org</i>.',
+                            /<i>(.*)<\/i>/,
+                            (sub) => <i>{ sub }</i>,
+                        ) }
+                    </div>
                 </div>
             </div>
             <div className="mx_MyGroups_content">
-                <h3>{ _t('Your Communities') }</h3>
                 { content }
             </div>
         </div>;
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index 4338287be3..a0e7b27384 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -698,12 +698,13 @@
     "Signed Out": "Signed Out",
     "For security, this session has been signed out. Please sign in again.": "For security, this session has been signed out. Please sign in again.",
     "Logout": "Logout",
+    "Your Communities": "Your Communities",
+    "You're currently not a member of any communities.": "You're currently not a member of any communities.",
     "Error whilst fetching joined communities": "Error whilst fetching joined communities",
     "Create a new community": "Create a new community",
-    "Create a community to represent your community! Define a set of rooms and your own custom homepage to mark out your space in the Matrix universe.": "Create a community to represent your community! Define a set of rooms and your own custom homepage to mark out your space in the Matrix universe.",
+    "Create a community to group together users and rooms! Build a custom homepage to mark out your space in the Matrix universe.": "Create a community to group together users and rooms! Build a custom homepage to mark out your space in the Matrix universe.",
     "Join an existing community": "Join an existing community",
     "To join an existing community you'll have to know its community identifier; this will look something like <i>+example:matrix.org</i>.": "To join an existing community you'll have to know its community identifier; this will look something like <i>+example:matrix.org</i>.",
-    "Your Communities": "Your Communities",
     "You have no visible notifications": "You have no visible notifications",
     "Scroll to bottom of page": "Scroll to bottom of page",
     "Connectivity to the server has been lost.": "Connectivity to the server has been lost.",

From 1a7710c192f1b04e36167b3e98e8379c161d3c8c Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Fri, 20 Oct 2017 18:10:14 +0100
Subject: [PATCH 2/2] Adjust wording on placeholder

---
 src/components/structures/MyGroups.js | 2 +-
 src/i18n/strings/en_EN.json           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/structures/MyGroups.js b/src/components/structures/MyGroups.js
index 038074beff..bb0d42435e 100644
--- a/src/components/structures/MyGroups.js
+++ b/src/components/structures/MyGroups.js
@@ -127,7 +127,7 @@ export default withMatrixClient(React.createClass({
                 </div> :
                 <div className="mx_MyGroups_placeholder">
                     { _t(
-                        "You're currently not a member of any communities.",
+                        "You're not currently a member of any communities.",
                     ) }
                 </div>;
         } else if (this.state.error) {
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index a0e7b27384..a9f14151c9 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -699,7 +699,7 @@
     "For security, this session has been signed out. Please sign in again.": "For security, this session has been signed out. Please sign in again.",
     "Logout": "Logout",
     "Your Communities": "Your Communities",
-    "You're currently not a member of any communities.": "You're currently not a member of any communities.",
+    "You're not currently a member of any communities.": "You're not currently a member of any communities.",
     "Error whilst fetching joined communities": "Error whilst fetching joined communities",
     "Create a new community": "Create a new community",
     "Create a community to group together users and rooms! Build a custom homepage to mark out your space in the Matrix universe.": "Create a community to group together users and rooms! Build a custom homepage to mark out your space in the Matrix universe.",