CSS for Modifying GroupView UI matrix-org/matrix-react-sdk#1475

src/components/structures/RightPanel.js

@@ -330,7 +330,7 @@ module.exports = React.createClass({
                     <div className="mx_RightPanel_icon" >
                         <TintableSvg src="img/icons-room-add.svg" width="35" height="35" />
                     </div>
-                    <div className="mx_RightPanel_message">{ _t('Add room to this group') }</div>
+                    <div className="mx_RightPanel_message">{ _t('Add rooms to this group') }</div>
                 </AccessibleButton>
             );
         }

src/skins/vector/css/_components.scss

@@ -56,6 +56,7 @@
 @import "./matrix-react-sdk/views/rooms/_MemberList.scss";
 @import "./matrix-react-sdk/views/rooms/_MessageComposer.scss";
 @import "./matrix-react-sdk/views/rooms/_PresenceLabel.scss";
+@import "./matrix-react-sdk/views/rooms/_RoomDetailList.scss";
 @import "./matrix-react-sdk/views/rooms/_RoomHeader.scss";
 @import "./matrix-react-sdk/views/rooms/_RoomList.scss";
 @import "./matrix-react-sdk/views/rooms/_RoomPreviewBar.scss";

src/skins/vector/css/matrix-react-sdk/structures/_GroupView.scss

@@ -19,6 +19,9 @@ limitations under the License.
     width: 100%;
     margin-left: auto;
     margin-right: auto;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
 }
 
 .mx_GroupView_error {
@@ -27,15 +30,13 @@ limitations under the License.
 
 .mx_GroupView_header {
     max-width: 960px;
-    margin: auto;
     height: 70px;
     align-items: center;
     display: flex;
-    margin-bottom: 20px;
 }
 
 .mx_GroupView_header_view {
-    border-bottom: 1px solid #e5e5e5;
+    border-bottom: 1px solid $primary-hairline-color;
 }
 
 .mx_GroupView_header_avatar, .mx_GroupView_header_info {
@@ -133,9 +134,53 @@ limitations under the License.
     top: 5px;
 }
 
+.mx_GroupView_body {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+}
+
+.mx_GroupView_rooms {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 200px;
+    user-select: none;
+}
+
+.mx_GroupView_rooms_header h3 {
+    margin-bottom: 10px
+}
+
+.mx_GroupView_rooms_header .mx_AccessibleButton {
+    padding-left: 14px;
+    margin-bottom: 14px;
+    height: 24px;
+}
+
+.mx_GroupView_rooms_header_addButton {
+    display: inline-block;
+}
+
+.mx_GroupView_rooms_header_addButton_label {
+    display: inline-block;
+    vertical-align: top;
+    line-height: 24px;
+    padding-left: 28px;
+    color: $accent-color;
+}
+
+.mx_GroupView_rooms .mx_RoomDetailList {
+    flex-grow: 1;
+    border-top: 1px solid $primary-hairline-color;
+    padding-top: 10px;
+}
+
+.mx_GroupView .mx_RoomView_messageListWrapper {
+    justify-content: flex-start;
+}
+
 .mx_GroupView_membershipSection {
-    margin-left: auto;
-    margin-right: auto;
     margin-bottom: 11px;
     color: $greyed-fg-color;
 }