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

@@ -118,8 +118,17 @@ export default withMatrixClient(React.createClass({
             this.state.groups.forEach((g) => {
                 groupNodes.push(<GroupTile groupId={g} />);
             });
-            content = <div className="mx_MyGroups_joinedGroups">
+            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">
@@ -131,27 +140,29 @@ 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_header'>
-                <div className="mx_MyGroups_createBox">
+                <div className="mx_MyGroups_headerCard">
-                    <div className="mx_MyGroups_joinCreateHeader">
+                    <AccessibleButton className='mx_MyGroups_headerCard_button' onClick={this._onCreateGroupClick}>
+                        <TintableSvg src="img/icons-create-room.svg" width="50" height="50" />
+                    </AccessibleButton>
+                    <div className="mx_MyGroups_headerCard_content">
+                        <div className="mx_MyGroups_headerCard_header">
                             { _t('Create a new community') }
                         </div>
-                    <AccessibleButton className='mx_MyGroups_joinCreateButton' onClick={this._onCreateGroupClick}>
-                        <TintableSvg src="img/icons-create-room.svg" width="50" height="50" />
-                    </AccessibleButton>
                         { _t(
-                        'Create a community to represent your community! '+
+                            'Create a community to group together users and rooms! ' +
-                        'Define a set of rooms and your own custom homepage '+
+                            'Build a custom homepage to mark out your space in the Matrix universe.',
-                        'to mark out your space in the Matrix universe.',
                         ) }
                     </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>
+                    <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 '+
@@ -161,8 +172,8 @@ export default withMatrixClient(React.createClass({
                         ) }
                     </div>
                 </div>
+            </div>
             <div className="mx_MyGroups_content">
-                <h3>{ _t('Your Communities') }</h3>
                 { content }
             </div>
         </div>;

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.",