Merge pull request #2538 from matrix-org/bwindels/community-redesign-cleanup

Redesign: community page cleanup

res/css/structures/_GroupView.scss

@@ -25,7 +25,7 @@ limitations under the License.
 }
 
 .mx_GroupView_header {
-    min-height: 70px;
+    min-height: 52px;
     align-items: center;
     display: flex;
     padding-bottom: 10px;
@@ -34,7 +34,7 @@ limitations under the License.
 .mx_GroupView_header_view {
     border-bottom: 1px solid $primary-hairline-color;
     padding-bottom: 0px;
-    padding-left: 8px;
+    padding-left: 19px;
     padding-right: 8px;
 }
 
@@ -349,3 +349,8 @@ limitations under the License.
 .mx_GroupView_changeDelayWarning {
     padding: 40px 20px;
 }
+
+.mx_GroupView .mx_MemberInfo .gm-scroll-view > :not(.mx_MemberInfo_avatar) {
+    padding-left: 16px;
+    padding-right: 16px;
+}

res/css/views/rooms/_MemberList.scss

@@ -72,6 +72,7 @@ limitations under the License.
     padding: 8px;
     margin: 9px;
     display: flex;
+    justify-content: center;
     color: $button-fg-color;
     font-weight: 600;
 
@@ -82,7 +83,6 @@ limitations under the License.
 }
 
 .mx_MemberList_invite span {
-    margin: 0 auto;
     background-image: url('$(res)/img/feather-icons/user-add.svg');
     background-repeat: no-repeat;
     background-position: center left;

src/components/structures/GroupView.js

@@ -1178,7 +1178,7 @@ export default React.createClass({
                     avatarImage = <GroupAvatar groupId={this.props.groupId}
                         groupName={this.state.profileForm.name}
                         groupAvatarUrl={this.state.profileForm.avatar_url}
-                        width={48} height={48} resizeMethod='crop'
+                        width={28} height={28} resizeMethod='crop'
                     />;
                 }
 
@@ -1228,7 +1228,7 @@ export default React.createClass({
                     groupAvatarUrl={groupAvatarUrl}
                     groupName={groupName}
                     onClick={onGroupHeaderItemClick}
-                    width={48} height={48}
+                    width={28} height={28}
                 />;
                 if (summary.profile && summary.profile.name) {
                     nameNode = <div onClick={onGroupHeaderItemClick}>

src/components/views/groups/GroupMemberInfo.js

@@ -166,17 +166,15 @@ module.exports = React.createClass({
             }
         }
 
-        const avatarUrl = this.context.matrixClient.mxcUrlToHttp(
-            this.props.groupMember.avatarUrl,
-            36, 36, 'crop',
-        );
 
-        const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
-        const avatar = (
-            <BaseAvatar name={this.props.groupMember.userId} width={36} height={36}
-                url={avatarUrl}
-            />
-        );
+        const avatarUrl = this.props.groupMember.avatarUrl;
+        let avatarElement;
+        if (avatarUrl) {
+            const httpUrl = this.context.matrixClient.mxcUrlToHttp(avatarUrl, 800, 800);
+            avatarElement = (<div className="mx_MemberInfo_avatar">
+                            <img src={httpUrl} />
+                        </div>);
+        }
 
         const groupMemberName = (
             this.props.groupMember.displayname || this.props.groupMember.userId
@@ -190,10 +188,7 @@ module.exports = React.createClass({
                     <AccessibleButton className="mx_MemberInfo_cancel" onClick={this._onCancel}>
                         <img src={require("../../../../res/img/cancel.svg")} width="18" height="18" className="mx_filterFlipColor" />
                     </AccessibleButton>
-                    <div className="mx_MemberInfo_avatar">
-                        { avatar }
-                    </div>
-
+                    { avatarElement }
                     <EmojiText element="h2">{ groupMemberName }</EmojiText>
 
                     <div className="mx_MemberInfo_profile">

src/components/views/groups/GroupRoomInfo.js

@@ -149,7 +149,6 @@ module.exports = React.createClass({
     },
 
     render: function() {
-        const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
         const EmojiText = sdk.getComponent('elements.EmojiText');
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
         const InlineSpinner = sdk.getComponent('elements.InlineSpinner');
@@ -204,22 +203,23 @@ module.exports = React.createClass({
                 </div>;
         }
 
-        const avatarUrl = this.context.matrixClient.mxcUrlToHttp(
-            this.state.groupRoom.avatarUrl,
-            36, 36, 'crop',
-        );
+        const avatarUrl = this.state.groupRoom.avatarUrl;
+        let avatarElement;
+        if (avatarUrl) {
+            const httpUrl = this.context.matrixClient.mxcUrlToHttp(avatarUrl, 800, 800);
+            avatarElement = (<div className="mx_MemberInfo_avatar">
+                            <img src={httpUrl} />
+                        </div>);
+        }
 
         const groupRoomName = this.state.groupRoom.displayname;
-        const avatar = <BaseAvatar name={groupRoomName} width={36} height={36} url={avatarUrl} />;
         return (
             <div className="mx_MemberInfo">
                 <GeminiScrollbarWrapper autoshow={true}>
                     <AccessibleButton className="mx_MemberInfo_cancel" onClick={this._onCancel}>
                         <img src={require("../../../../res/img/cancel.svg")} width="18" height="18" className="mx_filterFlipColor" />
                     </AccessibleButton>
-                    <div className="mx_MemberInfo_avatar">
-                        { avatar }
-                    </div>
+                    { avatarElement }
 
                     <EmojiText element="h2">{ groupRoomName }</EmojiText>
 

test/components/structures/GroupView-test.js

@@ -188,7 +188,7 @@ describe('GroupView', function() {
             expect(avatarImgElement).toBeTruthy();
             expect(avatarImgElement.src).toContain(
                 'https://my.home.server/_matrix/media/v1/thumbnail/' +
-                'someavatarurl?width=48&height=48&method=crop',
+                'someavatarurl?width=28&height=28&method=crop',
             );
 
             const name = ReactTestUtils.findRenderedDOMComponentWithClass(root, 'mx_GroupView_header_name');