Rework authenticate page and change color (#890)

* Rework authenticate page and change color This is the result of some experimentation on the "authenticate" page, as well as some general design changes: * The buttons and links on the "authenticate" page were moved a bit * A lot of text was removed from "authenticate", and the (optional) alternative origin URL is hidden in a tooltip * Buttons and cards in general were rounded * Color scheme was changed from pink/orange to purple * Anchor number input in "authenticate" was updated to only allow digits * Showcase was updated to show a alternative origin URL * "Internet Identity" was removed from titles and added to logo instead * Reset screenshots * 🤖 Selenium screenshots auto-update Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
dfinity · Sep 15, 2022 · 1f0c26d · 1f0c26d
1 parent c9d0ca1
commit 1f0c26d
Show file tree

Hide file tree

Showing 70 changed files with 410 additions and 206 deletions.
diff --git a/screenshots/00-welcome-desktop.png b/screenshots/00-welcome-desktop.png
diff --git a/screenshots/00-welcome-mobile.png b/screenshots/00-welcome-mobile.png
diff --git a/screenshots/01-register-desktop.png b/screenshots/01-register-desktop.png
diff --git a/screenshots/01-register-mobile.png b/screenshots/01-register-mobile.png
diff --git a/screenshots/02-register-confirm-desktop.png b/screenshots/02-register-confirm-desktop.png
diff --git a/screenshots/02-register-confirm-mobile.png b/screenshots/02-register-confirm-mobile.png
diff --git a/screenshots/03-register-user-number-desktop.png b/screenshots/03-register-user-number-desktop.png
diff --git a/screenshots/03-register-user-number-mobile.png b/screenshots/03-register-user-number-mobile.png
diff --git a/screenshots/04-recover-method-selector-desktop.png b/screenshots/04-recover-method-selector-desktop.png
diff --git a/screenshots/04-recover-method-selector-mobile.png b/screenshots/04-recover-method-selector-mobile.png
diff --git a/screenshots/05-single-device-warning-desktop.png b/screenshots/05-single-device-warning-desktop.png
diff --git a/screenshots/05-single-device-warning-mobile.png b/screenshots/05-single-device-warning-mobile.png
diff --git a/screenshots/06-main-desktop.png b/screenshots/06-main-desktop.png
diff --git a/screenshots/06-main-mobile.png b/screenshots/06-main-mobile.png
diff --git a/screenshots/07-welcome-back-desktop.png b/screenshots/07-welcome-back-desktop.png
diff --git a/screenshots/07-welcome-back-mobile.png b/screenshots/07-welcome-back-mobile.png
diff --git a/screenshots/08-new-device-flow-selection-desktop.png b/screenshots/08-new-device-flow-selection-desktop.png
diff --git a/screenshots/08-new-device-flow-selection-mobile.png b/screenshots/08-new-device-flow-selection-mobile.png
diff --git a/screenshots/09-new-device-instructions-desktop.png b/screenshots/09-new-device-instructions-desktop.png
diff --git a/screenshots/09-new-device-instructions-mobile.png b/screenshots/09-new-device-instructions-mobile.png
diff --git a/screenshots/10-new-device-user-number-desktop.png b/screenshots/10-new-device-user-number-desktop.png
diff --git a/screenshots/10-new-device-user-number-mobile.png b/screenshots/10-new-device-user-number-mobile.png
diff --git a/screenshots/11-new-device-alias-desktop.png b/screenshots/11-new-device-alias-desktop.png
diff --git a/screenshots/11-new-device-alias-mobile.png b/screenshots/11-new-device-alias-mobile.png
diff --git a/screenshots/12-new-device-registration-mode-disabled-instructions-desktop.png b/screenshots/12-new-device-registration-mode-disabled-instructions-desktop.png
diff --git a/screenshots/12-new-device-registration-mode-disabled-instructions-mobile.png b/screenshots/12-new-device-registration-mode-disabled-instructions-mobile.png
diff --git a/screenshots/13-new-device-show-verification-code-desktop.png b/screenshots/13-new-device-show-verification-code-desktop.png
diff --git a/screenshots/13-new-device-show-verification-code-mobile.png b/screenshots/13-new-device-show-verification-code-mobile.png
diff --git a/screenshots/14-new-device-enter-verification-code-desktop.png b/screenshots/14-new-device-enter-verification-code-desktop.png
diff --git a/screenshots/14-new-device-enter-verification-code-mobile.png b/screenshots/14-new-device-enter-verification-code-mobile.png
diff --git a/screenshots/15-new-device-login-desktop.png b/screenshots/15-new-device-login-desktop.png
diff --git a/screenshots/15-new-device-login-mobile.png b/screenshots/15-new-device-login-mobile.png
diff --git a/screenshots/16-new-device-listed-desktop.png b/screenshots/16-new-device-listed-desktop.png
diff --git a/screenshots/16-new-device-listed-mobile.png b/screenshots/16-new-device-listed-mobile.png
diff --git a/screenshots/17-device-settings-desktop.png b/screenshots/17-device-settings-desktop.png
diff --git a/screenshots/17-device-settings-mobile.png b/screenshots/17-device-settings-mobile.png
diff --git a/screenshots/18-about-desktop.png b/screenshots/18-about-desktop.png
diff --git a/screenshots/18-about-mobile.png b/screenshots/18-about-mobile.png
diff --git a/screenshots/19-after-removal-desktop.png b/screenshots/19-after-removal-desktop.png
diff --git a/screenshots/19-after-removal-mobile.png b/screenshots/19-after-removal-mobile.png
diff --git a/screenshots/20-compatibility-notice-desktop.png b/screenshots/20-compatibility-notice-desktop.png
diff --git a/screenshots/20-compatibility-notice-mobile.png b/screenshots/20-compatibility-notice-mobile.png
diff --git a/screenshots/21-faq-desktop.png b/screenshots/21-faq-desktop.png
diff --git a/screenshots/21-faq-mobile.png b/screenshots/21-faq-mobile.png
diff --git a/screenshots/22-faq-open-desktop.png b/screenshots/22-faq-open-desktop.png
diff --git a/screenshots/22-faq-open-mobile.png b/screenshots/22-faq-open-mobile.png
diff --git a/screenshots/23-features-warning-desktop.png b/screenshots/23-features-warning-desktop.png
diff --git a/screenshots/23-features-warning-mobile.png b/screenshots/23-features-warning-mobile.png
diff --git a/screenshots/24-authenticate-known-anchor-desktop.png b/screenshots/24-authenticate-known-anchor-desktop.png
diff --git a/screenshots/24-authenticate-known-anchor-mobile.png b/screenshots/24-authenticate-known-anchor-mobile.png
diff --git a/screenshots/25-authenticate-unknown-anchor-desktop.png b/screenshots/25-authenticate-unknown-anchor-desktop.png
diff --git a/screenshots/25-authenticate-unknown-anchor-mobile.png b/screenshots/25-authenticate-unknown-anchor-mobile.png
diff --git a/screenshots/26-authenticate-derivation-origin-desktop.png b/screenshots/26-authenticate-derivation-origin-desktop.png
diff --git a/screenshots/26-authenticate-derivation-origin-mobile.png b/screenshots/26-authenticate-derivation-origin-mobile.png
diff --git a/src/frontend/src/components/icons.ts b/src/frontend/src/components/icons.ts
@@ -33,49 +33,52 @@ export const checkmarkIcon = html`
 `;
 
 export const icLogo = html`
-  <svg
-    id="icLogo"
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    viewBox="0 0 230 109"
-  >
-    <defs>
-      <linearGradient
-        id="grad-o-y"
-        x1="145.304"
-        x2="221.385"
-        y1="7.174"
-        y2="85.958"
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop offset=".21" stop-color="#F15A24" />
-        <stop offset=".684" stop-color="#FBB03B" />
-      </linearGradient>
-      <linearGradient
-        id="grad-p-p"
-        x1="85.087"
-        x2="9.006"
-        y1="101.622"
-        y2="22.838"
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop offset=".21" stop-color="#ED1E79" />
-        <stop offset=".893" stop-color="#522785" />
-      </linearGradient>
-    </defs>
-    <path
-      fill="url(#grad-o-y)"
-      d="M174.433 0c-12.879 0-26.919 6.6-41.758 19.6-7.04 6.159-13.12 12.759-17.679 18.038l.04.04v-.04s7.199 7.84 15.159 16.24c4.28-5.08 10.44-12 17.519-18.24 13.2-11.559 21.799-13.999 26.719-13.999 18.52 0 33.559 14.68 33.559 32.719 0 17.92-15.079 32.599-33.559 32.719-.84 0-1.92-.12-3.28-.4 5.4 2.32 11.2 4 16.72 4 33.918 0 40.558-22.12 40.998-23.72 1-4.04 1.52-8.28 1.52-12.64C230.391 24.4 205.272 0 174.433 0Z"
-    />
-    <path
-      fill="url(#grad-p-p)"
-      d="M55.958 108.796c12.88 0 26.919-6.6 41.758-19.6 7.04-6.16 13.12-12.759 17.679-18.039l-.04-.04v.04s-7.199-7.84-15.159-16.24c-4.28 5.08-10.44 12-17.52 18.24-13.199 11.56-21.798 14-26.718 14-18.52-.04-33.559-14.72-33.559-32.76C22.4 36.48 37.48 21.8 55.958 21.68c.84 0 1.92.12 3.28.4-5.4-2.32-11.2-4-16.72-4C8.6 18.08 2 40.2 1.52 41.76A52.8 52.8 0 0 0 0 54.397c0 29.999 25.119 54.398 55.958 54.398Z"
-    />
-    <path
-      fill="#29ABE2"
-      d="M187.793 90.197c-17.36-.44-35.399-14.12-39.079-17.52-9.519-8.8-31.479-32.599-33.198-34.479C99.436 20.16 77.637 0 55.958 0h-.08C29.558.12 7.44 17.96 1.52 41.758c.44-1.56 9.12-24.119 40.958-23.319 17.36.44 35.479 14.32 39.199 17.72 9.52 8.8 31.479 32.598 33.199 34.478 16.079 18 37.878 38.159 59.557 38.159h.08c26.319-.12 48.478-17.96 54.358-41.759-.48 1.56-9.2 23.92-41.078 23.16Z"
-    />
-  </svg>
+  <div>
+    <svg
+      id="icLogo"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 230 109"
+    >
+      <defs>
+        <linearGradient
+          id="grad-o-y"
+          x1="145.304"
+          x2="221.385"
+          y1="7.174"
+          y2="85.958"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset=".21" stop-color="#F15A24" />
+          <stop offset=".684" stop-color="#FBB03B" />
+        </linearGradient>
+        <linearGradient
+          id="grad-p-p"
+          x1="85.087"
+          x2="9.006"
+          y1="101.622"
+          y2="22.838"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset=".21" stop-color="#ED1E79" />
+          <stop offset=".893" stop-color="#522785" />
+        </linearGradient>
+      </defs>
+      <path
+        fill="url(#grad-o-y)"
+        d="M174.433 0c-12.879 0-26.919 6.6-41.758 19.6-7.04 6.159-13.12 12.759-17.679 18.038l.04.04v-.04s7.199 7.84 15.159 16.24c4.28-5.08 10.44-12 17.519-18.24 13.2-11.559 21.799-13.999 26.719-13.999 18.52 0 33.559 14.68 33.559 32.719 0 17.92-15.079 32.599-33.559 32.719-.84 0-1.92-.12-3.28-.4 5.4 2.32 11.2 4 16.72 4 33.918 0 40.558-22.12 40.998-23.72 1-4.04 1.52-8.28 1.52-12.64C230.391 24.4 205.272 0 174.433 0Z"
+      />
+      <path
+        fill="url(#grad-p-p)"
+        d="M55.958 108.796c12.88 0 26.919-6.6 41.758-19.6 7.04-6.16 13.12-12.759 17.679-18.039l-.04-.04v.04s-7.199-7.84-15.159-16.24c-4.28 5.08-10.44 12-17.52 18.24-13.199 11.56-21.798 14-26.718 14-18.52-.04-33.559-14.72-33.559-32.76C22.4 36.48 37.48 21.8 55.958 21.68c.84 0 1.92.12 3.28.4-5.4-2.32-11.2-4-16.72-4C8.6 18.08 2 40.2 1.52 41.76A52.8 52.8 0 0 0 0 54.397c0 29.999 25.119 54.398 55.958 54.398Z"
+      />
+      <path
+        fill="#29ABE2"
+        d="M187.793 90.197c-17.36-.44-35.399-14.12-39.079-17.52-9.519-8.8-31.479-32.599-33.198-34.479C99.436 20.16 77.637 0 55.958 0h-.08C29.558.12 7.44 17.96 1.52 41.758c.44-1.56 9.12-24.119 40.958-23.319 17.36.44 35.479 14.32 39.199 17.72 9.52 8.8 31.479 32.598 33.199 34.478 16.079 18 37.878 38.159 59.557 38.159h.08c26.319-.12 48.478-17.96 54.358-41.759-.48 1.56-9.2 23.92-41.078 23.16Z"
+      />
+    </svg>
+    <p style="text-align: center; margin-top: 0.8rem;">Internet Identity</p>
+  </div>
 `;
 
 export const closeIcon = html`
@@ -181,3 +184,60 @@ export const settingsIcon = html`
     />
   </svg>
 `;
+
+export const forwardIcon = html`
+  <svg
+    width="22"
+    height="22"
+    viewBox="0 0 22 22"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M14.6258 10.8489L8.86013 6.67701C8.83211 6.65666 8.799 6.64448 8.76448 6.6418C8.72996 6.63912 8.69537 6.64605 8.66454 6.66183C8.63372 6.6776 8.60787 6.7016 8.58985 6.73117C8.57183 6.76074 8.56236 6.79472 8.56247 6.82935V7.92856C8.56247 8.16763 8.67731 8.39497 8.87185 8.53559L12.2797 11.0012L8.87185 13.4668C8.67731 13.6075 8.56247 13.8324 8.56247 14.0739V15.1731C8.56247 15.3254 8.73591 15.4145 8.86013 15.3254L14.6258 11.1536C14.7289 11.0786 14.7289 10.9239 14.6258 10.8489Z"
+      fill="#262626"
+    />
+    <path
+      d="M11 0.500122C5.20156 0.500122 0.5 5.20168 0.5 11.0001C0.5 16.7986 5.20156 21.5001 11 21.5001C16.7984 21.5001 21.5 16.7986 21.5 11.0001C21.5 5.20168 16.7984 0.500122 11 0.500122ZM11 19.7189C6.18594 19.7189 2.28125 15.8142 2.28125 11.0001C2.28125 6.18606 6.18594 2.28137 11 2.28137C15.8141 2.28137 19.7188 6.18606 19.7188 11.0001C19.7188 15.8142 15.8141 19.7189 11 19.7189Z"
+      fill="#262626"
+    />
+  </svg>
+`;
+
+export const infoIcon = html`
+  <svg
+    width="22"
+    height="22"
+    viewBox="0 0 22 22"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M11 0.500122C5.20156 0.500122 0.5 5.20168 0.5 11.0001C0.5 16.7986 5.20156 21.5001 11 21.5001C16.7984 21.5001 21.5 16.7986 21.5 11.0001C21.5 5.20168 16.7984 0.500122 11 0.500122ZM11 19.7189C6.18594 19.7189 2.28125 15.8142 2.28125 11.0001C2.28125 6.18606 6.18594 2.28137 11 2.28137C15.8141 2.28137 19.7188 6.18606 19.7188 11.0001C19.7188 15.8142 15.8141 19.7189 11 19.7189Z"
+      fill="#262626"
+    />
+    <path
+      d="M9.875 6.87512C9.875 7.17349 9.99353 7.45964 10.2045 7.67062C10.4155 7.8816 10.7016 8.00012 11 8.00012C11.2984 8.00012 11.5845 7.8816 11.7955 7.67062C12.0065 7.45964 12.125 7.17349 12.125 6.87512C12.125 6.57675 12.0065 6.29061 11.7955 6.07963C11.5845 5.86865 11.2984 5.75012 11 5.75012C10.7016 5.75012 10.4155 5.86865 10.2045 6.07963C9.99353 6.29061 9.875 6.57675 9.875 6.87512ZM11.5625 9.50012H10.4375C10.3344 9.50012 10.25 9.5845 10.25 9.68762V16.0626C10.25 16.1657 10.3344 16.2501 10.4375 16.2501H11.5625C11.6656 16.2501 11.75 16.1657 11.75 16.0626V9.68762C11.75 9.5845 11.6656 9.50012 11.5625 9.50012Z"
+      fill="#262626"
+    />
+  </svg>
+`;
+
+export const attentionIcon = html`
+  <svg
+    width="22"
+    height="22"
+    viewBox="0 0 22 22"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M11 0.500122C5.20156 0.500122 0.5 5.20168 0.5 11.0001C0.5 16.7986 5.20156 21.5001 11 21.5001C16.7984 21.5001 21.5 16.7986 21.5 11.0001C21.5 5.20168 16.7984 0.500122 11 0.500122ZM11 19.7189C6.18594 19.7189 2.28125 15.8142 2.28125 11.0001C2.28125 6.18606 6.18594 2.28137 11 2.28137C15.8141 2.28137 19.7188 6.18606 19.7188 11.0001C19.7188 15.8142 15.8141 19.7189 11 19.7189Z"
+      fill="#262626"
+    />
+    <path
+      d="M9.875 15.1251C9.875 15.4235 9.99353 15.7096 10.2045 15.9206C10.4155 16.1316 10.7016 16.2501 11 16.2501C11.2984 16.2501 11.5845 16.1316 11.7955 15.9206C12.0065 15.7096 12.125 15.4235 12.125 15.1251C12.125 14.8268 12.0065 14.5406 11.7955 14.3296C11.5845 14.1186 11.2984 14.0001 11 14.0001C10.7016 14.0001 10.4155 14.1186 10.2045 14.3296C9.99353 14.5406 9.875 14.8268 9.875 15.1251ZM10.4375 12.5001H11.5625C11.6656 12.5001 11.75 12.4157 11.75 12.3126V5.93762C11.75 5.8345 11.6656 5.75012 11.5625 5.75012H10.4375C10.3344 5.75012 10.25 5.8345 10.25 5.93762V12.3126C10.25 12.4157 10.3344 12.5001 10.4375 12.5001Z"
+      fill="#262626"
+    />
+  </svg>
+`;
diff --git a/src/frontend/src/flows/addDevice/welcomeView/index.ts b/src/frontend/src/flows/addDevice/welcomeView/index.ts
@@ -22,12 +22,20 @@ const pageContent = (userNumber: bigint | null) => html`
       placeholder="Enter Anchor"
       value=${userNumber ?? ""}
     />
-    <button class="c-button c-button--primary" id="addDeviceUserNumberContinue">
-      Continue
-    </button>
-    <button class="c-button c-button--secondary" id="addDeviceUserNumberCancel">
-      Cancel
-    </button>
+    <div class="c-button-group">
+      <button
+        class="c-button c-button--secondary"
+        id="addDeviceUserNumberCancel"
+      >
+        Cancel
+      </button>
+      <button
+        class="c-button c-button--primary"
+        id="addDeviceUserNumberContinue"
+      >
+        Continue
+      </button>
+    </div>
   </div>
 `;
 

diff --git a/src/frontend/src/flows/addDevice/welcomeView/registerTentativeDevice.ts b/src/frontend/src/flows/addDevice/welcomeView/registerTentativeDevice.ts
@@ -29,20 +29,20 @@ const pageContent = () => html`
       maxlength="64"
       class="c-input"
     />
-    <div class="l-section">
+    <div class="c-button-group">
+      <button
+        class="c-button c-button--secondary"
+        id="registerTentativeDeviceCancel"
+      >
+        Cancel
+      </button>
       <button
         class="c-button"
         id="registerTentativeDeviceContinue"
         class="primary"
       >
         Continue
       </button>
-      <button
-        class="c-button c-button--secondary"
-        id="registerTentativeDeviceCancel"
-      >
-        Cancel
-      </button>
     </div>
   </article>
 `;