Approve information Sharing CSS (#2138)

* add more example markdown content

* basic formatting of VC

* nicer markdown styles

* add boder to consent box

* nicer templates

* add overtitle

* remove console.log

* Scroll approve button into view on mobile

* move comment to its function

* better solution for hacky to override the the oneLiner

* proper boolean check

---------

Co-authored-by: Frederik Rothenberger <frederik.rothenberger@dfinity.org>

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

@@ -36,7 +36,9 @@ const dappsExplorerTemplate = ({
     >
       ${closeIcon}
     </button>
-    <div class="c-action-list">${dapps.map((dapp) => dappTemplate(dapp))}</div>
+    <div class="c-action-list">
+      ${dapps.map((dapp) => dappTemplateLink(dapp))}
+    </div>
     <p class="t-paragraph t-centered">
       ${copy.add_your_dapp}
       <a
@@ -60,8 +62,39 @@ const dappsExplorerTemplate = ({
 
 export const dappsExplorerPage = renderPage(dappsExplorerTemplate);
 
+export type DappTemplateArgs = {
+  logoSrc: string;
+  name: string;
+  oneLiner?: string;
+  oneLinerAboveTitle?: boolean;
+};
+
+export const dappTemplate = ({
+  logoSrc,
+  name,
+  oneLiner,
+  oneLinerAboveTitle = false,
+}: DappTemplateArgs): TemplateResult => {
+  return html`
+    <div class="c-action-list__icon" aria-hidden="true">
+      <img src=${logoSrc} alt=${name} loading="lazy" />
+    </div>
+    <div
+      class="c-action-list__label c-action-list__label--stacked${oneLinerAboveTitle ===
+      true
+        ? " c-action-list__label--inverted"
+        : ""}"
+    >
+      <h3 class="t-title t-title--list">${name}</h3>
+      ${nonNullish(oneLiner)
+        ? html`<p class="t-weak">${oneLiner}</p>`
+        : undefined}
+    </div>
+  `;
+};
+
 /* Template for a single dapp */
-const dappTemplate = ({
+const dappTemplateLink = ({
   website,
   logoSrc,
   name,
@@ -74,15 +107,7 @@ const dappTemplate = ({
       class="c-action-list__item"
       rel="noopener noreferrer"
     >
-      <div class="c-action-list__icon" aria-hidden="true">
-        <img src=${logoSrc} alt=${name} loading="lazy" />
-      </div>
-      <div class="c-action-list__label c-action-list__label--stacked">
-        <h3 class="t-title t-title--list">${name}</h3>
-        ${nonNullish(oneLiner)
-          ? html`<p class="t-weak">${oneLiner}</p>`
-          : undefined}
-      </div>
+      ${dappTemplate({ logoSrc, name, oneLiner } as KnownDapp)}
       <span class="c-action-list__action"
         ><i class="c-icon c-icon--circle">${externalLinkIcon}</i></span
       >

src/frontend/src/flows/verifiableCredentials/allowCredentials.json

@@ -1,9 +1,12 @@
 {
   "en": {
-    "title": "Credential Access Request",
+    "title": "Approve information sharing",
     "allow_start": "Allow verifying credential",
+    "label_ii_input": "Your Internet Identity",
     "allow_sep_with": "with",
     "cancel": "Cancel",
-    "allow": "Allow"
+    "allow": "Allow",
+    "issued_by": "Issued by",
+    "relying_party": "Relying party"
   }
 }

src/frontend/src/flows/verifiableCredentials/allowCredentials.ts

@@ -8,13 +8,32 @@ import { html, TemplateResult } from "lit-html";
 import { asyncReplace } from "lit-html/directives/async-replace.js";
 import { unsafeHTML } from "lit-html/directives/unsafe-html.js";
 
+import { getDapps, KnownDapp } from "../dappsExplorer/dapps";
+import { dappTemplate } from "../dappsExplorer/index";
+
 import DOMPurify from "dompurify";
 
 import copyJson from "./allowCredentials.json";
 
+/*
+ * Get the dapp that corresponds to the origin, or create a new one if it's
+ * unknown
+ */
+const getOrigin = (origin: string, dapplist: KnownDapp[]): KnownDapp => {
+  let foundDapp = dapplist.find((dapp) => dapp.hasOrigin(origin));
+
+  if (!foundDapp) {
+    foundDapp = new KnownDapp({
+      name: origin,
+      website: origin,
+      logo: "unwnowndapp.png",
+    });
+  }
+  return foundDapp;
+};
+
 /* A screen prompting the user to allow (or cancel) issuing verified
  * credentials */
-
 const allowCredentialsTemplate = ({
   i18n,
   relyingOrigin,
@@ -41,6 +60,7 @@ const allowCredentialsTemplate = ({
     onSubmit: (userNumber) => onAllow(userNumber),
   });
 
+  const knownDapps = getDapps();
   const consentMessage = new Chan<TemplateElement>(html`${consentMessage_}`);
 
   // Kickstart markdown parsing & sanitizing; once done, replace the consent message
@@ -50,25 +70,42 @@ const allowCredentialsTemplate = ({
     consentMessage.send(unsafeHTML(sanitized));
   })();
 
+  const originDapp = getOrigin(providerOrigin, knownDapps);
+  const relyingDapp = getOrigin(relyingOrigin, knownDapps);
+
+  // copy.relying_party as string
   const slot = html`
     <hgroup
       data-page="vc-allow"
       ${scrollToTop ? mount(() => window.scrollTo(0, 0)) : undefined}
     >
       <h1 class="t-title t-title--main">${copy.title}</h1>
     </hgroup>
-
+    <article class="l-stack c-card c-card--consent">
+      <div class="t-formatted t-formatted--monospace">
+        ${asyncReplace(consentMessage)}
+      </div>
+    </article>
     ${anchorInput.template}
-
-    <p class="t-paragraph">
-      ${copy.allow_start}
-      <strong class="t-strong">${providerOrigin}</strong> ${copy.allow_sep_with}
-      <strong class="t-strong">${relyingOrigin}</strong>?
-    </p>
-
-    <div class="l-stack c-input c-input--readonly">
-      <pre class="c-consent-message">${asyncReplace(consentMessage)}</pre>
-    </div>
+    <h2 class="c-card__label l-stack">${copy.allow_start}</h2>
+    <ul class="c-action-list">
+      <li class="c-action-list__item">
+        ${dappTemplate({
+          logoSrc: originDapp.logoSrc,
+          name: originDapp.name,
+          oneLinerAboveTitle: true,
+          oneLiner: copy.issued_by as string,
+        })}
+      </li>
+      <li class="c-action-list__item">
+        ${dappTemplate({
+          logoSrc: relyingDapp.logoSrc,
+          name: relyingDapp.name,
+          oneLinerAboveTitle: true,
+          oneLiner: copy.relying_party as string,
+        })}
+      </li>
+    </ul>
 
     <div class="c-button-group">
       <button