From 2cefa58d5d2ffd249587a754d0afa6a31294bc9c Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Mon, 16 Oct 2017 11:44:38 +0100
Subject: [PATCH] CSS for Modifying GroupView UI
 matrix-org/matrix-react-sdk#1475

---
 src/components/structures/RightPanel.js       |  2 +-
 src/skins/vector/css/_components.scss         |  1 +
 .../structures/_GroupView.scss                | 55 +++++++++++++++++--
 3 files changed, 52 insertions(+), 6 deletions(-)

diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js
index d70bfdbf86..aec66712f2 100644
--- a/src/components/structures/RightPanel.js
+++ b/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>
             );
         }
diff --git a/src/skins/vector/css/_components.scss b/src/skins/vector/css/_components.scss
index 4948ac8520..1daa99454c 100644
--- a/src/skins/vector/css/_components.scss
+++ b/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";
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_GroupView.scss b/src/skins/vector/css/matrix-react-sdk/structures/_GroupView.scss
index 838f147e84..23a9f8bb1f 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_GroupView.scss
+++ b/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;
 }