Make editing prettier

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

@@ -29,8 +29,6 @@ limitations under the License.
     height: 70px;
     align-items: center;
     display: flex;
-    border-bottom: 1px solid #e5e5e5;
-    margin-bottom: 20px;
 }
 
 .mx_GroupView_header_avatar, .mx_GroupView_header_info {
@@ -38,6 +36,16 @@ limitations under the License.
     vertical-align: middle;
 }
 
+.mx_GroupView_avatarPicker {
+    position: relative;
+}
+
+.mx_GroupView_avatarPicker_edit {
+    position: absolute;
+    top: 50px;
+    left: 15px;
+}
+
 .mx_GroupView_header_leftCol {
     flex: 1;
 }
@@ -67,6 +75,10 @@ limitations under the License.
     border-bottom: 1px solid transparent;
 }
 
+.mx_GroupView_header_name input, .mx_GroupView_header_shortDesc input {
+    width: 400px;
+}
+
 .mx_GroupView_header_shortDesc {
     vertical-align: bottom;
     float: left;
@@ -74,12 +86,33 @@ limitations under the License.
     color: $settings-grey-fg-color;
     font-weight: 300;
     font-size: 13px;
+    padding-left: 19px;
     margin-right: 16px;
     overflow: hidden;
     text-overflow: ellipsis;
     border-bottom: 1px solid transparent;
 }
 
+.mx_GroupView_cancelButton {
+    padding-left: 8px;
+}
+
+.mx_GroupView_cancelButton img {
+    position: relative;
+    top: 5px;
+}
+
+.mx_GroupView_header_viewBottom {
+    border-bottom: 1px solid #e5e5e5;
+    height: 0;
+    margin-bottom: 20px;
+}
+
+.mx_GroupView_header_editBottom {
+    height: 0;
+    margin-top: 20px;
+}
+
 .mx_GroupView_featuredThings {
     margin-top: 20px;
 }
@@ -104,3 +137,8 @@ limitations under the License.
 .mx_GroupView_uploadInput {
     display: none;
 }
+
+.mx_GroupView_editLongDesc {
+    width: 100%;
+    height: 150px;
+}