style security section as per design

res/css/views/right_panel/_UserInfo.scss

@@ -20,9 +20,9 @@ limitations under the License.
     flex-direction: column;
     flex: 1;
     overflow-y: auto;
-}
+    font-size: 12px;
 
-.mx_UserInfo_cancel {
+    .mx_UserInfo_cancel {
         height: 16px;
         width: 16px;
         padding: 10px 0 10px 10px;
@@ -32,46 +32,46 @@ limitations under the License.
         mask-position: 16px center;
         background-color: $rightpanel-button-color;
         position: absolute;
-}
+    }
 
-.mx_UserInfo h2 {
+    h2 {
         font-size: 18px;
         font-weight: 600;
         margin: 18px 0 0 0;
-}
+    }
 
-.mx_UserInfo_container {
+    .mx_UserInfo_container {
         padding: 0 16px 16px 16px;
         border-bottom: 1px solid lightgray;
-}
+    }
 
-.mx_UserInfo_memberDetailsContainer {
+    .mx_UserInfo_memberDetailsContainer {
         padding-bottom: 0;
-}
+    }
 
-.mx_UserInfo .mx_RoomTile_nameContainer {
+    .mx_RoomTile_nameContainer {
         width: 154px;
-}
+    }
 
-.mx_UserInfo .mx_RoomTile_badge {
+    .mx_RoomTile_badge {
         display: none;
-}
+    }
 
-.mx_UserInfo .mx_RoomTile_name {
+    .mx_RoomTile_name {
         width: 160px;
-}
+    }
 
-.mx_UserInfo_avatar {
+    .mx_UserInfo_avatar {
         margin: 24px 32px 0 32px;
         cursor: pointer;
-}
+    }
 
-.mx_UserInfo_avatar > div {
+    .mx_UserInfo_avatar > div {
         max-width: 30vh;
         margin: 0 auto;
-}
+    }
 
-.mx_UserInfo_avatar > div > div {
+    .mx_UserInfo_avatar > div > div {
         /* use padding-top instead of height to make this element square,
         as the % in padding is a % of the width (including margin,
         that's why we had to put the margin to center on a parent div),
@@ -84,25 +84,30 @@ limitations under the License.
         background-repeat: no-repeat;
         background-size: cover;
         background-position: center;
-}
+    }
 
-.mx_UserInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image {
+    .mx_UserInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image {
         cursor: zoom-in;
-}
+    }
 
-.mx_UserInfo h3 {
+    h3 {
         text-transform: uppercase;
-    color: $input-darker-fg-color;
+        color: $notice-secondary-color;
         font-weight: bold;
         font-size: 12px;
         margin: 4px 0;
-}
+    }
 
-.mx_UserInfo_profile {
+    p {
-    font-size: 12px;
+        margin: 5px 0;
+    }
+
+    .mx_UserInfo_profile {
         text-align: center;
 
         h2 {
+            font-size: 18px;
+            line-height: 25px;
             flex: 1;
             overflow-x: auto;
             max-height: 50px;
@@ -119,76 +124,78 @@ limitations under the License.
         .mx_UserInfo_profileStatus {
             margin-top: 12px;
         }
-}
+    }
 
-
+    .mx_UserInfo_memberDetails {
-.mx_UserInfo_memberDetails {
         text-align: center;
-}
+    }
 
-.mx_UserInfo_field {
+    .mx_UserInfo_field {
         cursor: pointer;
-    font-size: 15px;
+        color: $accent-color;
-    color: $primary-fg-color;
+        line-height: 16px;
-    margin-left: 8px;
+        margin: 8px 0;
-    line-height: 23px;
-}
 
-.mx_UserInfo_createRoom {
+    }
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    padding: 0 8px;
-}
 
-.mx_UserInfo_createRoom_label {
+    .mx_UserInfo_statusMessage {
-    width: initial !important;
-    cursor: pointer;
-}
-
-.mx_UserInfo_statusMessage {
         font-size: 11px;
         opacity: 0.5;
         overflow: hidden;
         white-space: nowrap;
         text-overflow: clip;
-}
+    }
-.mx_UserInfo .mx_UserInfo_scrollContainer {
+
+    .mx_UserInfo_scrollContainer {
         flex: 1;
         padding-bottom: 16px;
-}
+    }
 
-.mx_UserInfo .mx_UserInfo_scrollContainer .mx_UserInfo_container {
+    .mx_UserInfo_scrollContainer .mx_UserInfo_container {
         padding-top: 16px;
         padding-bottom: 0;
         border-bottom: none;
-}
 
-.mx_UserInfo_container_header {
+        >:not(h3) {
-    display: flex;
+            margin-left: 8px;
-}
-
-.mx_UserInfo_container_header_right {
-    position: relative;
-    margin-left: auto;
-}
-
-.mx_UserInfo_newDmButton {
-    background-color: $roomheader-addroom-bg-color;
-    border-radius: 10px; // 16/2 + 2 padding
-    height: 16px;
-    flex: 0 0 16px;
-
-    &::before {
-        background-color: $roomheader-addroom-fg-color;
-        mask: url('$(res)/img/icons-room-add.svg');
-        mask-repeat: no-repeat;
-        mask-position: center;
-        content: '';
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
         }
+    }
+
+    .mx_UserInfo_devices {
+        .mx_UserInfo_device {
+            display: flex;
+
+            &.mx_UserInfo_device_verified {
+                .mx_UserInfo_device_trusted {
+                    color: $accent-color;
+                }
+            }
+            &.mx_UserInfo_device_unverified {
+                .mx_UserInfo_device_trusted {
+                    color: $warning-color;
+                }
+            }
+
+            .mx_UserInfo_device_name {
+                flex: 1;
+                margin-right: 5px;
+            }
+        }
+
+        // both for icon in expand button and device item
+        .mx_E2EIcon {
+            // don't squeeze
+            flex: 0 0 auto;
+            margin: 2px 5px 0 0;
+            width: 12px;
+            height: 12px;
+        }
+
+        .mx_UserInfo_expand {
+            display: flex;
+            margin-top: 11px;
+            color: $accent-color;
+        }
+    }
+
 }

src/components/views/right_panel/UserInfo.js

@@ -110,8 +110,42 @@ function useIsEncrypted(cli, room) {
     return isEncrypted;
 }
 
-const DevicesSection = ({devices, userId, loading}) => {
+function verifyDevice(userId, device) {
-    const MemberDeviceInfo = sdk.getComponent('rooms.MemberDeviceInfo');
+    const DeviceVerifyDialog = sdk.getComponent('views.dialogs.DeviceVerifyDialog');
+    Modal.createTrackedDialog('Device Verify Dialog', '', DeviceVerifyDialog, {
+        userId: userId,
+        device: device,
+    });
+}
+
+function DeviceItem({userId, device}) {
+    const classes = classNames("mx_UserInfo_device", {
+        mx_UserInfo_device_verified: device.isVerified(),
+        mx_UserInfo_device_unverified: !device.isVerified(),
+    });
+    const iconClasses = classNames("mx_E2EIcon", {
+        mx_E2EIcon_verified: device.isVerified(),
+        mx_E2EIcon_warning: !device.isVerified(),
+    });
+
+    const onDeviceClick = () => {
+        if (!device.isVerified()) {
+            verifyDevice(userId, device);
+        }
+    };
+
+    const deviceName = device.ambiguous ?
+            (device.getDisplayName() ? device.getDisplayName() : "") + " (" + device.deviceId + ")" :
+            device.getDisplayName();
+    const trustedLabel = device.isVerified() ? _t("Trusted") : _t("Not trusted");
+    return (<AccessibleButton className={classes} onClick={onDeviceClick}>
+        <div className={iconClasses} />
+        <div className="mx_UserInfo_device_name">{deviceName}</div>
+        <div className="mx_UserInfo_device_trusted">{trustedLabel}</div>
+    </AccessibleButton>);
+}
+
+function DevicesSection({devices, userId, loading}) {
     const Spinner = sdk.getComponent("elements.Spinner");
 
     const [isExpanded, setExpanded] = useState(false);
@@ -130,23 +164,24 @@ const DevicesSection = ({devices, userId, loading}) => {
     let expandButton;
     if (verifiedDevices.length) {
         if (isExpanded) {
-            expandButton = (<AccessibleButton onClick={() => setExpanded(false)}>
+            expandButton = (<AccessibleButton className="mx_UserInfo_expand" onClick={() => setExpanded(false)}>
-                {_t("Hide verified Sign-In's")}
+                <div>{_t("Hide verified Sign-In's")}</div>
             </AccessibleButton>);
         } else {
-            expandButton = (<AccessibleButton onClick={() => setExpanded(true)}>
+            expandButton = (<AccessibleButton className="mx_UserInfo_expand" onClick={() => setExpanded(true)}>
-                {_t("%(count)s verified Sign-In's", {count: verifiedDevices.length})}
+                <div className="mx_E2EIcon mx_E2EIcon_verified" />
+                <div>{_t("%(count)s verified Sign-In's", {count: verifiedDevices.length})}</div>
             </AccessibleButton>);
         }
     }
 
     let deviceList = unverifiedDevices.map((device, i) => {
-        return (<MemberDeviceInfo key={i} userId={userId} device={device} />);
+        return (<DeviceItem key={i} userId={userId} device={device} />);
     });
     if (isExpanded) {
         const keyStart = unverifiedDevices.length;
         deviceList = deviceList.concat(verifiedDevices.map((device, i) => {
-            return (<MemberDeviceInfo key={i + keyStart} userId={userId} device={device} />);
+            return (<DeviceItem key={i + keyStart} userId={userId} device={device} />);
         }));
     }
 
@@ -156,7 +191,7 @@ const DevicesSection = ({devices, userId, loading}) => {
             <div>{expandButton}</div>
         </div>
     );
-};
+}
 
 const UserOptionsSection = withLegacyMatrixClient(({matrixClient: cli, member, isIgnored, canInvite, devices}) => {
     let ignoreButton = null;

src/i18n/strings/en_EN.json

@@ -1066,10 +1066,11 @@
     "When someone puts a URL in their message, a URL preview can be shown to give more information about that link such as the title, description, and an image from the website.": "When someone puts a URL in their message, a URL preview can be shown to give more information about that link such as the title, description, and an image from the website.",
     "Members": "Members",
     "Files": "Files",
-    "Direct messages": "Direct messages",
+    "Trusted": "Trusted",
+    "Not trusted": "Not trusted",
     "Hide verified Sign-In's": "Hide verified Sign-In's",
-    "%(count)s verified Sign-In's|one": "1 verified Sign-In",
     "%(count)s verified Sign-In's|other": "%(count)s verified Sign-In's",
+    "%(count)s verified Sign-In's|one": "1 verified Sign-In",
     "Direct message": "Direct message",
     "Unverify user": "Unverify user",
     "Options": "Options",