small makeover of member info panel

this removes the style sharing between the verify buttons in the memberinfo panel and
and the encrypted event dialog because the diverge too much now.

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>