Use warnbox helper for temp key warning (#1913)

This PR replaces the custom markup of the temp key warning with
the `warnBox` helper.

src/frontend/src/flows/manage/tempKeys.ts

@@ -1,4 +1,4 @@
-import { cypherIcon, warningIcon } from "$src/components/icons";
+import { cypherIcon } from "$src/components/icons";
 import {
   authenticatorItem,
   dedupLabels,
@@ -8,6 +8,7 @@ import { I18n } from "$src/i18n";
 import { unreachable } from "$src/utils/utils";
 import { TemplateResult, html } from "lit-html";
 
+import { warnBox } from "$src/components/warnBox";
 import copyJson from "./tempKeys.json";
 
 export type TempKeysWarning =
@@ -33,29 +34,20 @@ export const tempKeyWarningSection = ({
     }
   };
 
-  return html`
-    <aside class="c-card c-card--narrow c-card--warning">
-      <span class="c-card__label c-card__label--hasIcon" aria-hidden="true">
-        <i class="c-card__icon c-icon c-icon--error__flipped c-icon--inline"
-          >${warningIcon}</i
-        >
-        <h2>${copy.security_warning}</h2>
-      </span>
-      <div class="t-title t-title--complications">
-        <h2 class="t-title">${copy.you_are_using_temporary_key}</h2>
-      </div>
-      <p class="warning-message t-paragraph t-lead">
-        ${copy.set_up_recovery_and_passkey}
-      </p>
-      <button
-        class="c-button c-button--primary l-stack"
-        @click="${tempKeysWarning.action}"
-        id="addRecovery"
-      >
-        <span>${warningButtonCopy(tempKeysWarning)}</span>
-      </button>
-    </aside>
-  `;
+  const button = html`<button
+    class="c-button c-button--primary l-stack"
+    @click="${tempKeysWarning.action}"
+    id="addRecovery"
+  >
+    <span>${warningButtonCopy(tempKeysWarning)}</span>
+  </button>`;
+
+  return warnBox({
+    headerSlot: html`<h2>${copy.security_warning}</h2>`,
+    title: copy.you_are_using_temporary_key,
+    message: copy.set_up_recovery_and_passkey,
+    slot: button,
+  });
 };
 
 export const tempKeysSection = ({