dfinity · meodai · Jun 13, 2023 · Jun 13, 2023 · Jun 19, 2023 · Jun 19, 2023
diff --git a/screenshots/desktop/authorizeNew.png b/screenshots/desktop/authorizeNew.png
diff --git a/screenshots/desktop/authorizeNewAlt.png b/screenshots/desktop/authorizeNewAlt.png
diff --git a/screenshots/desktop/authorizeNewAlt_open.png b/screenshots/desktop/authorizeNewAlt_open.png
diff --git a/screenshots/desktop/authorizeNewKnown.png b/screenshots/desktop/authorizeNewKnown.png
diff --git a/screenshots/desktop/authorizeNewKnownAlt.png b/screenshots/desktop/authorizeNewKnownAlt.png
diff --git a/screenshots/desktop/authorizeNewKnownAlt_open.png b/screenshots/desktop/authorizeNewKnownAlt_open.png
diff --git a/screenshots/desktop/authorizeNewKnown_open.png b/screenshots/desktop/authorizeNewKnown_open.png
diff --git a/screenshots/desktop/authorizePick.png b/screenshots/desktop/authorizePick.png
diff --git a/screenshots/desktop/authorizePickMany.png b/screenshots/desktop/authorizePickMany.png
diff --git a/screenshots/desktop/authorizeUseExisting.png b/screenshots/desktop/authorizeUseExisting.png
diff --git a/screenshots/desktop/authorizeUseExistingKnown.png b/screenshots/desktop/authorizeUseExistingKnown.png
diff --git a/screenshots/desktop/authorizeUseExistingKnownAlt.png b/screenshots/desktop/authorizeUseExistingKnownAlt.png
diff --git a/screenshots/desktop/authorizeUseExistingKnownAlt_open.png b/screenshots/desktop/authorizeUseExistingKnownAlt_open.png
diff --git a/screenshots/desktop/authorizeUseExistingKnown_open.png b/screenshots/desktop/authorizeUseExistingKnown_open.png
diff --git a/screenshots/desktop/banner.png b/screenshots/desktop/banner.png
diff --git a/screenshots/desktop/compatibilityNotice.png b/screenshots/desktop/compatibilityNotice.png
diff --git a/screenshots/desktop/confirmSeedPhrase.png b/screenshots/desktop/confirmSeedPhrase.png
diff --git a/screenshots/desktop/displayError.png b/screenshots/desktop/displayError.png
diff --git a/screenshots/desktop/displaySeedPhrase.png b/screenshots/desktop/displaySeedPhrase.png
diff --git a/screenshots/desktop/landing_1.png b/screenshots/desktop/landing_1.png
diff --git a/screenshots/desktop/landing_2.png b/screenshots/desktop/landing_2.png
diff --git a/screenshots/desktop/landing_3.png b/screenshots/desktop/landing_3.png
diff --git a/screenshots/desktop/landing_4.png b/screenshots/desktop/landing_4.png
diff --git a/screenshots/desktop/manageNew.png b/screenshots/desktop/manageNew.png
diff --git a/screenshots/desktop/managePick.png b/screenshots/desktop/managePick.png
diff --git a/screenshots/desktop/manageUseExisting.png b/screenshots/desktop/manageUseExisting.png
diff --git a/screenshots/desktop/recoverWithPhrase.png b/screenshots/desktop/recoverWithPhrase.png
diff --git a/screenshots/desktop/registerDisabled.png b/screenshots/desktop/registerDisabled.png
diff --git a/screenshots/desktop/showSpinner.png b/screenshots/desktop/showSpinner.png
diff --git a/screenshots/mobile/addDeviceSuccess.png b/screenshots/mobile/addDeviceSuccess.png
diff --git a/screenshots/mobile/addPhrase.png b/screenshots/mobile/addPhrase.png
diff --git a/screenshots/mobile/addPhraseWarning.png b/screenshots/mobile/addPhraseWarning.png
diff --git a/screenshots/mobile/authorizeNew.png b/screenshots/mobile/authorizeNew.png
diff --git a/screenshots/mobile/authorizeNewAlt.png b/screenshots/mobile/authorizeNewAlt.png
diff --git a/screenshots/mobile/authorizeNewAlt_open.png b/screenshots/mobile/authorizeNewAlt_open.png
diff --git a/screenshots/mobile/authorizeNewKnown.png b/screenshots/mobile/authorizeNewKnown.png
diff --git a/screenshots/mobile/authorizeNewKnownAlt.png b/screenshots/mobile/authorizeNewKnownAlt.png
diff --git a/screenshots/mobile/authorizeNewKnownAlt_open.png b/screenshots/mobile/authorizeNewKnownAlt_open.png
diff --git a/screenshots/mobile/authorizeNewKnown_open.png b/screenshots/mobile/authorizeNewKnown_open.png
diff --git a/screenshots/mobile/authorizePick.png b/screenshots/mobile/authorizePick.png
diff --git a/screenshots/mobile/authorizePickMany.png b/screenshots/mobile/authorizePickMany.png
diff --git a/screenshots/mobile/authorizeUseExisting.png b/screenshots/mobile/authorizeUseExisting.png
diff --git a/screenshots/mobile/authorizeUseExistingKnown.png b/screenshots/mobile/authorizeUseExistingKnown.png
diff --git a/screenshots/mobile/authorizeUseExistingKnownAlt.png b/screenshots/mobile/authorizeUseExistingKnownAlt.png
diff --git a/screenshots/mobile/authorizeUseExistingKnownAlt_open.png b/screenshots/mobile/authorizeUseExistingKnownAlt_open.png
diff --git a/screenshots/mobile/authorizeUseExistingKnown_open.png b/screenshots/mobile/authorizeUseExistingKnown_open.png
diff --git a/screenshots/mobile/banner.png b/screenshots/mobile/banner.png
diff --git a/screenshots/mobile/compatibilityNotice.png b/screenshots/mobile/compatibilityNotice.png
diff --git a/screenshots/mobile/confirmSeedPhrase.png b/screenshots/mobile/confirmSeedPhrase.png
diff --git a/screenshots/mobile/dappsExplorer.png b/screenshots/mobile/dappsExplorer.png
diff --git a/screenshots/mobile/deviceRegistrationDisabledInfo.png b/screenshots/mobile/deviceRegistrationDisabledInfo.png
diff --git a/screenshots/mobile/displayError.png b/screenshots/mobile/displayError.png
diff --git a/screenshots/mobile/displayManage.png b/screenshots/mobile/displayManage.png
diff --git a/screenshots/mobile/displayManageSingle.png b/screenshots/mobile/displayManageSingle.png
diff --git a/screenshots/mobile/displaySeedPhrase.png b/screenshots/mobile/displaySeedPhrase.png
diff --git a/screenshots/mobile/displayUserNumber.png b/screenshots/mobile/displayUserNumber.png
diff --git a/screenshots/mobile/landing_1.png b/screenshots/mobile/landing_1.png
diff --git a/screenshots/mobile/landing_2.png b/screenshots/mobile/landing_2.png
diff --git a/screenshots/mobile/landing_3.png b/screenshots/mobile/landing_3.png
diff --git a/screenshots/mobile/landing_4.png b/screenshots/mobile/landing_4.png
diff --git a/screenshots/mobile/landing_5.png b/screenshots/mobile/landing_5.png
diff --git a/screenshots/mobile/manageNew.png b/screenshots/mobile/manageNew.png
diff --git a/screenshots/mobile/managePick.png b/screenshots/mobile/managePick.png
diff --git a/screenshots/mobile/manageUseExisting.png b/screenshots/mobile/manageUseExisting.png
diff --git a/screenshots/mobile/pickRecoveryDevice.png b/screenshots/mobile/pickRecoveryDevice.png
diff --git a/screenshots/mobile/pollForTentativeDevicePage.png b/screenshots/mobile/pollForTentativeDevicePage.png
diff --git a/screenshots/mobile/promptCaptcha.png b/screenshots/mobile/promptCaptcha.png
diff --git a/screenshots/mobile/promptCaptchaReady.png b/screenshots/mobile/promptCaptchaReady.png
diff --git a/screenshots/mobile/promptDeviceAlias.png b/screenshots/mobile/promptDeviceAlias.png
diff --git a/screenshots/mobile/promptUserNumber.png b/screenshots/mobile/promptUserNumber.png
diff --git a/screenshots/mobile/recoverWithDevice.png b/screenshots/mobile/recoverWithDevice.png
diff --git a/screenshots/mobile/recoverWithPhrase.png b/screenshots/mobile/recoverWithPhrase.png
diff --git a/screenshots/mobile/registerDisabled.png b/screenshots/mobile/registerDisabled.png
diff --git a/screenshots/mobile/savePasskey.png b/screenshots/mobile/savePasskey.png
diff --git a/screenshots/mobile/showMessage.png b/screenshots/mobile/showMessage.png
diff --git a/screenshots/mobile/showSpinner.png b/screenshots/mobile/showSpinner.png
diff --git a/screenshots/mobile/showVerificationCode.png b/screenshots/mobile/showVerificationCode.png
diff --git a/screenshots/mobile/toasts.png b/screenshots/mobile/toasts.png
diff --git a/screenshots/mobile/verifyTentativeDevice.png b/screenshots/mobile/verifyTentativeDevice.png
@@ -34,8 +34,21 @@ import { withLoader } from "./loader";
 import { mainWindow } from "./mainWindow";
 import { promptUserNumber } from "./promptUserNumber";
 
+import { getDapps } from "$src/flows/dappsExplorer/dapps";
+import { dappsHeader } from "$src/flows/dappsExplorer/teaser";
+import { shuffleArray } from "$src/utils/utils";
+
 import copyJson from "./authenticateBox.json";
 
+/** dapps visual used in sidebar */
+const dappsVisual = (): TemplateResult => {
+  const dapps = shuffleArray(getDapps());
+  return dappsHeader({
+    dapps,
+    clickable: false,
+  });
+};
+
 /** Template used for rendering specific authentication screens. See `authnPages` below
  * for meaning of "firstTime", "useExisting" and "pick". */
 export type AuthnTemplates = {
@@ -326,6 +339,10 @@ const page = (slot: TemplateResult) => {
     slot: html` <!-- The title is hidden but used for accessibility -->
       <h1 data-page="authenticate" class="is-hidden">Internet Identity</h1>
       ${slot}`,
+    slotSidebar: html`<h1 class="t-title t-title--main">
+      Securely connect to dapps on the Internet Computer
+    </h1>`,
+    slotSidebarDecoration: dappsVisual(),
   });
   const container = document.getElementById("pageContent") as HTMLElement;
   render(template, container);

@@ -16,13 +16,17 @@ import { icLogo } from "./icons";
  */
 export const mainWindow = ({
   slot,
+  slotSidebar,
+  slotSidebarDecoration,
   id,
   showFooter = true,
   showLogo = true,
   isWideContainer = false,
   additionalContainerClasses = [],
 }: {
   slot: TemplateResult;
+  slotSidebar?: TemplateResult;
+  slotSidebarDecoration?: TemplateResult;
   id?: string;
   showFooter?: boolean;
   showLogo?: boolean;
@@ -37,16 +41,41 @@ export const mainWindow = ({
   if (additionalContainerClasses.length > 0) {
     containerClasses.push(...additionalContainerClasses);
   }
+
+  const wrapClasses = ["l-wrap"];
+
+  if (slotSidebar !== undefined) {
+    wrapClasses.push("l-wrap--sidebar");
+  }
+
   return html`
-    <div
-      id="${ifDefined(id !== null ? id : undefined)}"
-      class="${containerClasses.join(" ")}"
-    >
-      ${showLogo ? html`<div class="c-logo">${icLogo}</div>` : ""}
-      <div class="c-card c-card--background">
-        <div class="c-card c-card--highlight">${slot}</div>
+    <div class="${wrapClasses.join(" ")}">
+      ${slotSidebar !== undefined
+        ? html`<div class="l-sidebar">
+            <div class="l-sidebar__main">
+              ${showLogo ? html`<div class="c-logo">${icLogo}</div>` : ""}
+              ${slotSidebar}
+            </div>
+            ${slotSidebarDecoration !== undefined
+              ? html`<div class="l-sidebar__decoration">
+                  ${slotSidebarDecoration}
+                </div>`
+              : ""}
+          </div>`
+        : ""}
+      <div
+        id="${ifDefined(id !== null ? id : undefined)}"
+        class="${containerClasses.join(" ")}"
+      >
+        ${showLogo && slotSidebar === undefined
+          ? html`<div class="c-logo">${icLogo}</div>`
+          : ""}
+        <div class="c-card c-card--background">
+          <div class="c-card c-card--highlight">${slot}</div>
+        </div>
       </div>
+      ${showFooter ? footer : ""}
     </div>
-    ${showFooter ? footer : ""}
+    <!-- /.l-wrap -->
   `;
 };
@@ -135,6 +135,8 @@
   --vs-bezel: calc(var(--vs-gutter) * 2); /* 4 */
   --vs-line: 1px; /* 5 */
 
+  --vs-gutter-relative: 5vmax;
+
   --vs-line-height: 1.4;
 
   --vs-border-radius: 0.8rem;
@@ -166,6 +168,9 @@
   --rc-background: var(--rc-light);
   --rc-background-transparent: var(--rc-light-transparent);
 
+  --rc-sidebar: var(--vc-brand-purple);
+  --rc-onSidebar: var(--vc-snow);
+
   --rc-footer: var(--rc-dark);
   --rc-onFooter: var(--rc-light);
 
@@ -239,6 +244,9 @@
   --rg-brand-bruised: var(--vc-brand-blue) 50%, var(--vc-brand-purple) 90%;
 
   /* reference tokens: sizes */
+  --rs-bezel-layout: var(--vs-gutter-relative);
+  --rs-bezel-sidebar: calc(var(--vs-gutter-relative) * 0.5);
+
   --rs-inline-grid-gap: var(--vs-inline);
   --rs-inline-icon-gap: var(--vs-inline);
 
@@ -602,28 +610,62 @@ a:hover,
   width: 100%;
 }
 
-#pageContent,
 .l-wrap {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   min-height: 100vh;
-  padding: 5vmax;
+  padding: var(--rs-bezel-layout);
 }
 
 @media (max-width: 512px) {
-  #pageContent,
   .l-wrap {
     padding: var(--rs-card-bezel);
   }
 }
 
+.l-wrap--sidebar {
+  --sidebar-width: calc(30rem + var(--rs-bezel-sidebar) * 2);
+  padding-left: var(--sidebar-width);
+}
+
+.l-sidebar {
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  width: calc(30rem + var(--rs-bezel-sidebar) * 2);
+  background: var(--rc-sidebar);
+  color: var(--rc-onSidebar);
+  padding: var(--rs-bezel-sidebar);
+}
+
+@media (max-width: 512px) {
+  .l-sidebar {
+    display: none;
+  }
+}
+
+.l-sidebar__main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.l-sidebar__decoration {
+  position: relative;
+  margin: 0 calc(var(--rs-bezel-sidebar) * -1)
+    calc(var(--rs-bezel-sidebar) * -1);
+}
+
 .l-container {
   position: relative;
   font-size: 1.6rem;
-  min-width: 40rem;
-  max-width: 40rem;
+  width: 40rem;
   /* centers the container and adds a bit of space to make sure the footer does not stick to it */
   margin: 0 auto 2rem;
 }
@@ -645,6 +687,16 @@ a:hover,
   right: 0;
 }
 
+.l-wrap--sidebar .l-footer {
+  left: var(--sidebar-width);
+}
+
+@media (max-width: 512px) {
+  .l-wrap--sidebar .l-footer {
+    left: 0;
+  }
+}
+
 /**
  * Title with counter and Actions
  */
@@ -2364,7 +2416,6 @@ a.c-action-list__item {
 /** responsiveness */
 
 @media (max-width: 512px) {
-  #pageContent,
   .l-wrap {
     justify-content: flex-start;
     padding: 0;