style security section as per design

res/css/views/right_panel/_UserInfo.scss

@@ -20,175 +20,182 @@ limitations under the License.
     flex-direction: column;
     flex: 1;
     overflow-y: auto;
-}
-
-.mx_UserInfo_cancel {
-    height: 16px;
-    width: 16px;
-    padding: 10px 0 10px 10px;
-    cursor: pointer;
-    mask-image: url('$(res)/img/minimise.svg');
-    mask-repeat: no-repeat;
-    mask-position: 16px center;
-    background-color: $rightpanel-button-color;
-    position: absolute;
-}
-
-.mx_UserInfo h2 {
-    font-size: 18px;
-    font-weight: 600;
-    margin: 18px 0 0 0;
-}
-
-.mx_UserInfo_container {
-    padding: 0 16px 16px 16px;
-    border-bottom: 1px solid lightgray;
-}
-
-.mx_UserInfo_memberDetailsContainer {
-    padding-bottom: 0;
-}
-
-.mx_UserInfo .mx_RoomTile_nameContainer {
-    width: 154px;
-}
-
-.mx_UserInfo .mx_RoomTile_badge {
-    display: none;
-}
-
-.mx_UserInfo .mx_RoomTile_name {
-    width: 160px;
-}
-
-.mx_UserInfo_avatar {
-    margin: 24px 32px 0 32px;
-    cursor: pointer;
-}
-
-.mx_UserInfo_avatar > div {
-    max-width: 30vh;
-    margin: 0 auto;
-}
-
-.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),
-    and not a % of the parent height. */
-    padding-top: 100%;
-    height: 0;
-    border-radius: 100%;
-    max-height: 30vh;
-    box-sizing: content-box;
-    background-repeat: no-repeat;
-    background-size: cover;
-    background-position: center;
-}
-
-.mx_UserInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image {
-    cursor: zoom-in;
-}
-
-.mx_UserInfo h3 {
-    text-transform: uppercase;
-    color: $input-darker-fg-color;
-    font-weight: bold;
     font-size: 12px;
-    margin: 4px 0;
-}
 
-.mx_UserInfo_profile {
+    .mx_UserInfo_cancel {
-    font-size: 12px;
+        height: 16px;
-    text-align: center;
+        width: 16px;
+        padding: 10px 0 10px 10px;
+        cursor: pointer;
+        mask-image: url('$(res)/img/minimise.svg');
+        mask-repeat: no-repeat;
+        mask-position: 16px center;
+        background-color: $rightpanel-button-color;
+        position: absolute;
+    }
 
     h2 {
-        flex: 1;
+        font-size: 18px;
-        overflow-x: auto;
+        font-weight: 600;
-        max-height: 50px;
+        margin: 18px 0 0 0;
-        display: flex;
+    }
-        justify-self: ;
-        justify-content: center;
-        align-items: center;
 
-        .mx_E2EIcon {
+    .mx_UserInfo_container {
-            margin: 5px;
+        padding: 0 16px 16px 16px;
+        border-bottom: 1px solid lightgray;
+    }
+
+    .mx_UserInfo_memberDetailsContainer {
+        padding-bottom: 0;
+    }
+
+    .mx_RoomTile_nameContainer {
+        width: 154px;
+    }
+
+    .mx_RoomTile_badge {
+        display: none;
+    }
+
+    .mx_RoomTile_name {
+        width: 160px;
+    }
+
+    .mx_UserInfo_avatar {
+        margin: 24px 32px 0 32px;
+        cursor: pointer;
+    }
+
+    .mx_UserInfo_avatar > div {
+        max-width: 30vh;
+        margin: 0 auto;
+    }
+
+    .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),
+        and not a % of the parent height. */
+        padding-top: 100%;
+        height: 0;
+        border-radius: 100%;
+        max-height: 30vh;
+        box-sizing: content-box;
+        background-repeat: no-repeat;
+        background-size: cover;
+        background-position: center;
+    }
+
+    .mx_UserInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image {
+        cursor: zoom-in;
+    }
+
+    h3 {
+        text-transform: uppercase;
+        color: $notice-secondary-color;
+        font-weight: bold;
+        font-size: 12px;
+        margin: 4px 0;
+    }
+
+    p {
+        margin: 5px 0;
+    }
+
+    .mx_UserInfo_profile {
+        text-align: center;
+
+        h2 {
+            font-size: 18px;
+            line-height: 25px;
+            flex: 1;
+            overflow-x: auto;
+            max-height: 50px;
+            display: flex;
+            justify-self: ;
+            justify-content: center;
+            align-items: center;
+
+            .mx_E2EIcon {
+                margin: 5px;
+            }
+        }
+
+        .mx_UserInfo_profileStatus {
+            margin-top: 12px;
         }
     }
 
-    .mx_UserInfo_profileStatus {
+    .mx_UserInfo_memberDetails {
-        margin-top: 12px;
+        text-align: center;
     }
-}
 
+    .mx_UserInfo_field {
+        cursor: pointer;
+        color: $accent-color;
+        line-height: 16px;
+        margin: 8px 0;
 
-.mx_UserInfo_memberDetails {
-    text-align: center;
-}
-
-.mx_UserInfo_field {
-    cursor: pointer;
-    font-size: 15px;
-    color: $primary-fg-color;
-    margin-left: 8px;
-    line-height: 23px;
-}
-
-.mx_UserInfo_createRoom {
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    padding: 0 8px;
-}
-
-.mx_UserInfo_createRoom_label {
-    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 {
-    flex: 1;
-    padding-bottom: 16px;
-}
-
-.mx_UserInfo .mx_UserInfo_scrollContainer .mx_UserInfo_container {
-    padding-top: 16px;
-    padding-bottom: 0;
-    border-bottom: none;
-}
-
-.mx_UserInfo_container_header {
-    display: flex;
-}
-
-.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_statusMessage {
+        font-size: 11px;
+        opacity: 0.5;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: clip;
+    }
+
+    .mx_UserInfo_scrollContainer {
+        flex: 1;
+        padding-bottom: 16px;
+    }
+
+    .mx_UserInfo_scrollContainer .mx_UserInfo_container {
+        padding-top: 16px;
+        padding-bottom: 0;
+        border-bottom: none;
+
+        >:not(h3) {
+            margin-left: 8px;
+        }
+    }
+
+    .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",