Device manager - device type and verification icons on device tile (PSG-637) (#9197)

* add unknown device icon

* add device type and verification icon component

* test

* stylelint

* fix securitycard spacing

Co-authored-by: Travis Ralston <travisr@matrix.org>

src/components/views/settings/devices/DeviceSecurityCard.tsx

@@ -47,7 +47,9 @@ const DeviceSecurityCard: React.FC<Props> = ({ variation, heading, description,
         <div className='mx_DeviceSecurityCard_content'>
             <p className='mx_DeviceSecurityCard_heading'>{ heading }</p>
             <p className='mx_DeviceSecurityCard_description'>{ description }</p>
-            { children }
+            { !!children && <div className='mx_DeviceSecurityCard_actions'>
+                { children }
+            </div> }
         </div>
     </div>;
 };

src/components/views/settings/devices/DeviceTile.tsx

@@ -24,6 +24,7 @@ import { Alignment } from "../../elements/Tooltip";
 import Heading from "../../typography/Heading";
 import { INACTIVE_DEVICE_AGE_DAYS, isDeviceInactive } from "./filter";
 import { DeviceWithVerification } from "./types";
+import { DeviceType } from "./DeviceType";
 export interface DeviceTileProps {
     device: DeviceWithVerification;
     children?: React.ReactNode;
@@ -93,6 +94,7 @@ const DeviceTile: React.FC<DeviceTileProps> = ({ device, children, onClick }) =>
         ];
 
     return <div className="mx_DeviceTile" data-testid={`device-tile-${device.device_id}`}>
+        <DeviceType isVerified={device.isVerified} />
         <div className="mx_DeviceTile_info" onClick={onClick}>
             <DeviceTileName device={device} />
             <div className="mx_DeviceTile_metadata">

src/components/views/settings/devices/DeviceType.tsx

@@ -0,0 +1,56 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import classNames from 'classnames';
+
+import { Icon as UnknownDeviceIcon } from '../../../../../res/img/element-icons/settings/unknown-device.svg';
+import { Icon as VerifiedIcon } from '../../../../../res/img/e2e/verified.svg';
+import { Icon as UnverifiedIcon } from '../../../../../res/img/e2e/warning.svg';
+import { _t } from '../../../../languageHandler';
+import { DeviceWithVerification } from './types';
+
+interface Props {
+    isVerified?: DeviceWithVerification['isVerified'];
+    isSelected?: boolean;
+}
+
+export const DeviceType: React.FC<Props> = ({ isVerified, isSelected }) => (
+    <div className={classNames('mx_DeviceType', {
+        mx_DeviceType_selected: isSelected,
+    })}
+    >
+        { /* TODO(kerrya) all devices have an unknown type until PSG-650 */ }
+        <UnknownDeviceIcon
+            className='mx_DeviceType_deviceIcon'
+            role='img'
+            aria-label={_t('Unknown device type')}
+        />
+        {
+            isVerified
+                ? <VerifiedIcon
+                    className={classNames('mx_DeviceType_verificationIcon', 'verified')}
+                    role='img'
+                    aria-label={_t('Verified')}
+                />
+                : <UnverifiedIcon
+                    className={classNames('mx_DeviceType_verificationIcon', 'unverified')}
+                    role='img'
+                    aria-label={_t('Unverified')}
+                />
+        }
+    </div>);
+

src/i18n/strings/en_EN.json

@@ -1712,6 +1712,7 @@
     "Inactive for %(inactiveAgeDays)s+ days": "Inactive for %(inactiveAgeDays)s+ days",
     "Verified": "Verified",
     "Unverified": "Unverified",
+    "Unknown device type": "Unknown device type",
     "Verified session": "Verified session",
     "This session is ready for secure messaging.": "This session is ready for secure messaging.",
     "Unverified session": "Unverified session",