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/right_panel/EncryptionPanel.tsx

@@ -85,7 +85,7 @@ const EncryptionPanel: React.FC<IProps> = (props: IProps) => {
         // handle transitions -> cancelled for mismatches which fire a modal instead of showing a card
         if (request && request.cancelled && MISMATCHES.includes(request.cancellationCode)) {
             Modal.createDialog(ErrorDialog, {
-                headerImage: require("../../../../res/img/e2e/warning.svg").default,
+                headerImage: require("../../../../res/img/e2e/warning-deprecated.svg").default,
                 title: _t("Your messages are not secure"),
                 description: <div>
                     { _t("One of the following may be compromised:") }