Device manager - device security recommendation card (PSG-637) (#9158)

* add security card and style

* deprecate warning and verified svgs that use hard coded color

* style icons, test

* i18n

* stylelint

* redo lost lint fixes

* fix svg ref

* actually fix svg

* fix stupid copy pasting

* use rgba for e2e light variations

* add security card and style

* deprecate warning and verified svgs that use hard coded color

* style icons, test

* i18n

* stylelint

* fix svg ref

* actually fix svg

* fix stupid copy pasting

* use rgba for e2e light variations

* use device security card in current session section

* lint

* update snapshot test after dev merge

src/components/views/settings/tabs/user/SessionManagerTab.tsx

@@ -20,6 +20,7 @@ import { _t } from "../../../../../languageHandler";
 import Spinner from '../../../elements/Spinner';
 import { useOwnDevices } from '../../devices/useOwnDevices';
 import DeviceTile from '../../devices/DeviceTile';
+import DeviceSecurityCard, { DeviceSecurityVariation } from '../../devices/DeviceSecurityCard';
 import SettingsSubsection from '../../shared/SettingsSubsection';
 import SettingsTab from '../SettingsTab';
 import FilteredDeviceList from '../../devices/FilteredDeviceList';
@@ -30,15 +31,32 @@ const SessionManagerTab: React.FC = () => {
     const { [currentDeviceId]: currentDevice, ...otherDevices } = devices;
     const shouldShowOtherSessions = Object.keys(otherDevices).length > 0;
 
+    const securityCardProps = currentDevice?.isVerified ? {
+        variation: DeviceSecurityVariation.Verified,
+        heading: _t('Verified session'),
+        description: _t('This session is ready for secure messaging.'),
+    } : {
+        variation: DeviceSecurityVariation.Unverified,
+        heading: _t('Unverified session'),
+        description: _t('Verify or sign out from this session for best security and reliability.'),
+    };
+
     return <SettingsTab heading={_t('Sessions')}>
         <SettingsSubsection
             heading={_t('Current session')}
             data-testid='current-session-section'
         >
             { isLoading && <Spinner /> }
-            { !!currentDevice && <DeviceTile
-                device={currentDevice}
-            /> }
+            { !!currentDevice && <>
+                <DeviceTile
+                    device={currentDevice}
+                />
+                <br />
+                <DeviceSecurityCard
+                    {...securityCardProps}
+                />
+            </>
+            }
         </SettingsSubsection>
         {
             shouldShowOtherSessions &&