Merge pull request #2522 from matrix-org/bwindels/memberpanel-tiny-makeover

Redesign: small member info panel makeover

res/css/views/dialogs/_EncryptedEventDialog.scss

@@ -14,10 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_EncryptedEventDialog .mx_MemberDeviceInfo {
+.mx_EncryptedEventDialog .mx_DeviceVerifyButtons {
     float: right;
     padding: 0px;
     margin-right: 42px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
 }
 
 .mx_EncryptedEventDialog .mx_MemberDeviceInfo_textButton {

res/css/views/rooms/_MemberDeviceInfo.scss

@@ -15,13 +15,15 @@ limitations under the License.
 */
 
 .mx_MemberDeviceInfo {
-    padding: 10px 0px;
+    display: flex;
+    padding-bottom: 10px;
 }
 
-.mx_MemberDeviceInfo.mx_DeviceVerifyButtons {
+.mx_MemberDeviceInfo > .mx_DeviceVerifyButtons {
     display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
+    flex-direction: column;
+    flex: 0 1 auto;
+    align-items: stretch;
 }
 
 .mx_MemberDeviceInfo_textButton {
@@ -39,16 +41,13 @@ limitations under the License.
 }
 
 .mx_MemberDeviceInfo_deviceInfo {
-    margin-bottom: 10px;
-    padding-bottom: 10px;
-    border-bottom: 1px solid rgba(0,0,0,0.1);
+    margin: 0 5px 5px 8px;
 }
 
 /* "Unblacklist" is too long for a regular button: make it wider and
    reduce the padding. */
 .mx_EncryptedEventDialog .mx_MemberDeviceInfo_blacklist,
 .mx_EncryptedEventDialog .mx_MemberDeviceInfo_unblacklist {
-    width: 8em;
     padding-left: 1em;
     padding-right: 1em;
 }

res/css/views/rooms/_MemberInfo.scss

@@ -43,7 +43,7 @@ limitations under the License.
 }
 
 .mx_MemberInfo_container {
-    padding: 8px;
+    margin: 0 16px 16px 16px;
 }
 
 .mx_MemberInfo .mx_RoomTile_nameContainer {
@@ -60,6 +60,7 @@ limitations under the License.
 
 .mx_MemberInfo_avatar {
     background: $tagpanel-bg-color;
+    margin-bottom: 16px;
 }
 
 .mx_MemberInfo_avatar > img {
@@ -83,15 +84,14 @@ limitations under the License.
 
 .mx_MemberInfo h3 {
     text-transform: uppercase;
-    color: $h3-color;
-    font-weight: 600;
-    font-size: 13px;
-    margin-top: 16px;
-    margin-bottom: 14px;
+    color: $input-darker-fg-color;
+    font-weight: bold;
+    font-size: 12px;
+    margin: 4px 0;
 }
 
 .mx_MemberInfo_profileField {
-    font-size: 13px;
+    font-size: 15px;
     position: relative;
 }
 
@@ -101,14 +101,17 @@ limitations under the License.
 
 .mx_MemberInfo_field {
     cursor: pointer;
-    font-size: 13px;
-    color: $accent-color;
+    font-size: 15px;
+    color: $primary-fg-color;
     margin-left: 8px;
     line-height: 23px;
 }
 
 .mx_MemberInfo_createRoom {
     cursor: pointer;
+    display: flex;
+    align-items: center;
+    padding: 0 8px;
 }
 
 .mx_MemberInfo_createRoom_label {

src/components/views/elements/DeviceVerifyButtons.js

@@ -114,9 +114,8 @@ export default React.createClass({
             );
         }
 
-        // mx_MemberDeviceInfo because the vector's CSS on EncryptedEventDialog is awful
         return (
-            <div className="mx_MemberDeviceInfo mx_DeviceVerifyButtons" >
+            <div className="mx_DeviceVerifyButtons" >
                 { verifyButton }
                 { blacklistButton }
             </div>