Add card-label (#1643)

* add basic CSS for card-labels

* 🤖 Selenium screenshots auto-update

* nicer icon style

* add card header to components

* 🤖 Selenium screenshots auto-update

* 🤖 Selenium screenshots auto-update

* add card label to addPhrase

* 🤖 Selenium screenshots auto-update

* change label text

* 🤖 Selenium screenshots auto-update

---------

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

src/frontend/src/components/warnBox.ts

@@ -27,7 +27,11 @@ export const warnBox = ({
     cssClasses.push(...additionalClasses);
   }
   const contents: TemplateResult = html`
-    <span class="c-card__icon" aria-hidden="true">${warningIcon}</span>
+    <span class="c-card__label c-card__label--hasIcon" aria-hidden="true">
+      <i class="c-card__icon c-icon c-icon--error c-icon--inline"
+        >${warningIcon}</i
+      >
+    </span>
     <div class="c-card__content">
       <h3 class="t-title c-card__title">${title}</h3>
       <div data-role="warning-message" class="t-paragraph c-card__paragraph">

src/frontend/src/flows/addDevice/manage/pollForTentativeDevice.ts

@@ -51,9 +51,7 @@ const pollForTentativeDeviceTemplate = ({
 
   const pageContentSlot = html`
     <hgroup>
-      <h2 class="t-title t-title--discrete">
-        ${copy.identity_anchor} ${userNumber}
-      </h2>
+      <h2 class="c-card__label">${copy.identity_anchor} ${userNumber}</h2>
       <h1 class="t-title t-title--main l-stack--none">
         ${copy.add_trusted_device}
       </h1>

src/frontend/src/flows/dappsExplorer/index.ts

@@ -27,7 +27,7 @@ const dappsExplorerTemplate = ({
 
   const pageContent = html`
     <hgroup ${scrollToTop ? mount(() => window.scrollTo(0, 0)) : undefined}>
-      <h2 class="t-title t-title--discrete">${copy.dapps_explorer}</h2>
+      <h2 class="c-card__label">${copy.dapps_explorer}</h2>
       <h1 class="t-title">${copy.try_these_dapps}</h1>
     </hgroup>
     <button

src/frontend/src/flows/dappsExplorer/teaser.ts

@@ -30,9 +30,7 @@ export const dappsTeaser = ({
   copy: { dapps_explorer: DynamicKey; sign_into_dapps: DynamicKey };
 }): TemplateResult => {
   return html`<article class="c-card c-card--narrow">
-    <h3 class="t-title t-title--discrete" role="presentation">
-      ${dapps_explorer}
-    </h3>
+    <h3 class="c-card__label" role="presentation">${dapps_explorer}</h3>
     <h2 class="t-title">${sign_into_dapps}</h2>
     <button
       class="c-click-area"

src/frontend/src/flows/recovery/recoveryWizard.json

@@ -1,5 +1,6 @@
 {
   "en": {
+    "label": "Security warning",
     "title": "Create your recovery phrase",
     "paragraph": "This will take a few minutes. Make sure no one is watching your screen and that you have a pen and paper or password manager ready.",
 

src/frontend/src/flows/recovery/recoveryWizard.ts

@@ -7,6 +7,7 @@ import { html, TemplateResult } from "lit-html";
 import { AuthenticatedConnection } from "$src/utils/iiConnection";
 import { setupRecovery } from "./setupRecovery";
 
+import { warningIcon } from "$src/components/icons";
 import copyJson from "./recoveryWizard.json";
 
 /* Phrase creation kick-off screen */
@@ -26,19 +27,27 @@ const addPhraseTemplate = ({
   const copy = i18n.i18n(copyJson);
   const slot = html`
     <hgroup ${scrollToTop ? mount(() => window.scrollTo(0, 0)) : undefined}>
+      <h2 class="c-card__label c-card__label--hasIcon">
+        <i class="c-card__icon c-icon c-icon--error c-icon--inline"
+          >${warningIcon}</i
+        >
+        ${copy.label}
+      </h2>
       <h1 class="t-title t-title--main">${copy.title}</h1>
       <p class="t-paragraph">${copy.paragraph}</p>
     </hgroup>
-    <button @click=${() => ok()} data-action="next" class="c-button">
-      ${copy.ok}
-    </button>
-    <button
-      @click=${() => skip()}
-      data-action="skip"
-      class="c-button c-button--secondary"
-    >
-      ${copy.skip}
-    </button>
+    <div class="l-stack">
+      <button @click=${() => ok()} data-action="next" class="c-button">
+        ${copy.ok}
+      </button>
+      <button
+        @click=${() => skip()}
+        data-action="skip"
+        class="c-button c-button--secondary"
+      >
+        ${copy.skip}
+      </button>
+    </div>
     <section style="margin-top: 7em;" class="c-marketing-block">
       <aside class="l-stack">
         <h3 class="t-title">${copy.what_is_phrase_q}</h3>

src/frontend/src/styleguide.ts

@@ -206,6 +206,20 @@ export const styleguide = html`
           <div class="c-card c-card--narrow l-stack">
             <h2 class="t-title">Narrow Card</h2>
           </div>
+          <div class="c-card l-stack">
+            <h3 class="c-card__label">Card Label</h3>
+            <h2 class="t-title">Default card</h2>
+          </div>
+
+          <div class="c-card l-stack">
+            <h3 class="c-card__label c-card__label--hasIcon">
+              <i class="c-card__icon c-icon c-icon--error c-icon--inline">
+                ${warningIcon}
+              </i>
+              Card Label
+            </h3>
+            <h2 class="t-title">Default card</h2>
+          </div>
           ${warnBox({
             title: "Warning Card with Icon",
             message: "This is a card with a warning icon",

src/frontend/src/styles/main.css

@@ -498,16 +498,6 @@ body {
   margin-top: 0.5em;
 }
 
-.t-title--discrete {
-  font-size: 1rem;
-  opacity: 0.6;
-  text-transform: uppercase;
-}
-
-.t-title--discrete + .t-title {
-  margin-top: 0.2em;
-}
-
 .t-title--list {
   font-size: 1.4rem;
   font-weight: 600;
@@ -691,16 +681,38 @@ a:hover,
   width: 100%;
 }
 
-.c-icon--ok [fill] {
-  fill: var(--rc-positive);
+.c-icon--ok,
+.c-icon--warning,
+.c-icon--error {
+  background: var(--bgc);
+  border-radius: 50%;
 }
 
-.c-icon--warning [fill] {
-  fill: var(--rc-warning);
+.c-icon--ok svg,
+.c-icon--warning svg,
+.c-icon--error svg {
+  transform: translate(-50%, -50%) scale(0.65);
 }
 
+.c-icon--ok [fill],
+.c-icon--warning [fill],
 .c-icon--error [fill] {
-  fill: var(--rc-error);
+  fill: var(--onBgc);
+}
+
+.c-icon--ok {
+  --bgc: var(--rc-positive);
+  --onBgc: var(--rc-onPositive);
+}
+
+.c-icon--warning {
+  --bgc: var(--rc-warning);
+  --onBgc: var(--rc-onWarning);
+}
+
+.c-icon--error {
+  --bgc: var(--rc-error);
+  --onBgc: var(--rc-onError);
 }
 
 .c-icon--lock svg {
@@ -864,30 +876,33 @@ a:hover,
   }
 }
 
-.c-card__icon {
-  position: absolute;
-  right: 0;
-  top: 0;
-  width: 10%;
-  aspect-ratio: 1;
-  z-index: var(--z-foreground);
-  transform: translate(40%, -40%);
+.c-card__label {
+  display: block;
+  font-size: 1rem;
+  /* opacity only on text color not the full element */
+  color: color-mix(in srgb-linear, var(--rc-text), var(--rc-card) 30%);
+  text-transform: uppercase;
+  font-weight: 600;
+  line-height: 1.1;
+  position: relative;
+  z-index: 2;
 }
 
-.c-card__icon svg {
-  position: absolute;
-  display: block;
-  width: 100%;
-  height: 100%;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+.c-card__label + .t-title {
+  margin-top: 0.2em;
+}
+
+/** can be replaced with :has(.c-card__icon) as soon as it's supported
+by all browsers (FF is missing) */
+.c-card__label--hasIcon {
+  border-bottom: var(--rs-line) solid var(--rc-line);
+  padding-bottom: calc(0.5 * var(--rs-card-bezel));
+  margin-bottom: calc(0.75 * var(--rs-card-bezel));
+  margin-top: calc(-0.15 * var(--rs-card-bezel));
 }
 
-.c-card__icon svg * {
-  fill: var(--rc-background);
-  stroke-width: 3px;
-  stroke: var(--rc-error);
+.c-card__icon {
+  height: 2rem;
 }
 
 .c-card__close {