restyle unknown devices dialog

res/css/views/dialogs/_UnknownDeviceDialog.scss

@@ -28,28 +28,28 @@ limitations under the License.
     flex-direction: column;
 }
 
+.mx_UnknownDeviceDialog ul {
+    list-style: none;
+    padding: 0;
+}
+// userid
+.mx_UnknownDeviceDialog p {
+    font-weight: bold;
+    font-size: 16px;
+}
+
 .mx_UnknownDeviceDialog .mx_DeviceVerifyButtons {
-    float: right;
+    flex-direction: row !important;
 }
 
 .mx_UnknownDeviceDialog .mx_Dialog_content {
     margin-bottom: 24px;
 }
 
-.mx_UnknownDeviceDialog .mx_MemberDeviceInfo {
-    float: right;
-    clear: both;
-    padding: 0px;
-    padding-top: 8px;
+.mx_UnknownDeviceDialog_deviceList > li {
+    padding: 4px;
 }
 
-.mx_UnknownDeviceDialog .mx_MemberDeviceInfo_textButton {
-    @mixin mx_DialogButton_small;
-    background-color: $primary-bg-color;
-    color: $accent-color;
-}
-
-.mx_UnknownDeviceDialog .mx_UnknownDeviceDialog_deviceList li {
-    height: 40px;
-    border-bottom: 1px solid $primary-hairline-color;
+.mx_UnknownDeviceDialog_deviceList > li > * {
+    padding-bottom: 0;
 }

src/components/views/dialogs/UnknownDeviceDialog.js

@@ -25,35 +25,12 @@ import { _t } from '../../../languageHandler';
 import SettingsStore from "../../../settings/SettingsStore";
 import { markAllDevicesKnown } from '../../../cryptodevices';
 
-function DeviceListEntry(props) {
-    const {userId, device} = props;
-
-    const DeviceVerifyButtons = sdk.getComponent('elements.DeviceVerifyButtons');
-
-    return (
-        <li>
-            { device.deviceId }
-            <DeviceVerifyButtons device={device} userId={userId} />
-            <br />
-            { device.getDisplayName() }
-        </li>
-    );
-}
-
-DeviceListEntry.propTypes = {
-    userId: PropTypes.string.isRequired,
-
-    // deviceinfo
-    device: PropTypes.object.isRequired,
-};
-
-
 function UserUnknownDeviceList(props) {
+    const MemberDeviceInfo = sdk.getComponent('rooms.MemberDeviceInfo');
     const {userId, userDevices} = props;
 
     const deviceListEntries = Object.keys(userDevices).map((deviceId) =>
-       <DeviceListEntry key={deviceId} userId={userId}
-           device={userDevices[deviceId]} />,
+        <li key={deviceId}><MemberDeviceInfo device={userDevices[deviceId]} userId={userId} showDeviceId={true} /></li>,
     );
 
     return (

src/components/views/rooms/MemberDeviceInfo.js

@@ -30,7 +30,7 @@ export default class MemberDeviceInfo extends React.Component {
             mx_MemberDeviceInfo_icon_unverified: this.props.device.isUnverified(),
         });
         const indicator = (<div className={iconClasses} />);
-        const deviceName = this.props.device.ambiguous ?
+        const deviceName = (this.props.device.ambiguous || this.props.showDeviceId) ?
             (this.props.device.getDisplayName() ? this.props.device.getDisplayName() : "") + " (" + this.props.device.deviceId + ")" :
             this.props.device.getDisplayName();