Set up responsive layout for Candid UI authorization panel (#480)

* Refactor auth form * Set up responsive text in login button * Adjust styling * Unformat * Improve responsive layout * Progress * Adjust margins * Use monochromatic astronaut logo for II button
dfinity · Oct 18, 2023 · 646f639 · 646f639
1 parent 3b25ba0
commit 646f639
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 51 deletions.
diff --git a/tools/ui/Cargo.lock b/tools/ui/Cargo.lock
diff --git a/tools/ui/src/auth/auth.ts b/tools/ui/src/auth/auth.ts
@@ -1,7 +1,7 @@
 import { Principal } from "@dfinity/principal"
 import { authClient } from "../candid"
 import { refresh_actor } from "../index"
-import { dfinity_logo, copy_icon } from "./icons"
+import { dfinityLogo, copyIcon } from "./icons"
 import { identityProvider } from "./identityProvider"
 
 export async function renderAuth() {
@@ -20,12 +20,11 @@ function insertLoginForm() {
   if (!cid) {
     throw new Error("No canister ID available for authentication")
   } else {
-    const auth = document.getElementById("authentication")
+    const auth = document.getElementById("authentication")!
 
     const buttonLogin = document.createElement("button")
-    buttonLogin.className = "btn"
-    buttonLogin.style.margin = "10px"
-    buttonLogin.innerHTML = `${dfinity_logo} Login with Internet Identity`
+    buttonLogin.className = "btn btn-auth"
+    buttonLogin.innerHTML = `${dfinityLogo} Login`
 
     const canisterId = Principal.fromText(cid)
 
@@ -40,38 +39,20 @@ function insertLoginForm() {
       await login(options)
     })
 
-    const { raw, raw_label, domain, domain_label } = domainForm()
-
-    auth!.innerHTML = ""
-    auth!.appendChild(raw)
-    auth!.appendChild(raw_label)
-    auth!.appendChild(domain)
-    auth!.appendChild(domain_label)
-    auth!.appendChild(buttonLogin)
+    auth.innerHTML = `
+      <label class="checkbox-label">
+        <input id="raw" type="checkbox" checked></input>
+        raw
+      </label>
+      <label class="checkbox-label">
+        <input id="domain" type="checkbox" checked></input>
+        ic0
+      </label>
+    `
+    auth.appendChild(buttonLogin);
   }
 }
 
-function domainForm() {
-  const raw = document.createElement("input")
-  raw.id = "raw"
-  raw.type = "checkbox"
-  raw.checked = true
-
-  const raw_label = document.createElement("label")
-  raw_label.innerText = "raw"
-  raw_label.style.marginRight = "10px"
-
-  const domain = document.createElement("input")
-  domain.id = "domain"
-  domain.type = "checkbox"
-  domain.checked = true
-
-  const domain_label = document.createElement("label")
-  domain_label.innerText = "icp0.io"
-
-  return { raw, raw_label, domain, domain_label }
-}
-
 function insertLogout() {
   const auth = document.getElementById("authentication")
   auth!.innerHTML = ""
@@ -111,7 +92,7 @@ function CopyId() {
   const copyButton = document.createElement("button")
   copyButton.id = "copyButton"
   copyButton.style.cursor = "pointer"
-  copyButton.innerHTML = `${copy_icon}`
+  copyButton.innerHTML = `${copyIcon}`
 
   copyButton.addEventListener("click", function () {
     navigator.clipboard.writeText(id).catch((err) => {

diff --git a/tools/ui/src/auth/icons.ts b/tools/ui/src/auth/icons.ts
@@ -1,20 +1,21 @@
-export const dfinity_logo = `
-<svg width="28" height="14" viewBox="0 0 358.8 179.8" xmlns="http://www.w3.org/2000/svg">
-  <linearGradient id="g1" x1="224.7853" y1="257.7536" x2="348.0663" y2="133.4581" gradientTransform="matrix(1 0 0 -1 0 272)">
-    <stop offset="0.21" stop-color="#F15A24"/>
-    <stop offset="0.6841" stop-color="#FBB03B"/>
-  </linearGradient>
-  <path fill="url(#g1)" d="M271.6,0c-20,0-41.9,10.9-65,32.4c-10.9,10.1-20.5,21.1-27.5,29.8c0,0,11.2,12.9,23.5,26.8 c6.7-8.4,16.2-19.8,27.3-30.1c20.5-19.2,33.9-23.1,41.6-23.1c28.8,0,52.2,24.2,52.2,54.1c0,29.6-23.4,53.8-52.2,54.1 c-1.4,0-3-0.2-5-0.6c8.4,3.9,17.5,6.7,26,6.7c52.8,0,63.2-36.5,63.8-39.1c1.5-6.7,2.4-13.7,2.4-20.9C358.6,40.4,319.6,0,271.6,0z"/>
-  <linearGradient id="g2" x1="133.9461" y1="106.4262" x2="10.6653" y2="230.7215" gradientTransform="matrix(1 0 0 -1 0 272)">
-    <stop offset="0.21" stop-color="#ED1E79"/>
-    <stop offset="0.8929" stop-color="#522785"/>
-  </linearGradient>
-  <path fill="url(#g2)" d="M87.1,179.8c20,0,41.9-10.9,65-32.4c10.9-10.1,20.5-21.1,27.5-29.8c0,0-11.2-12.9-23.5-26.8 c-6.7,8.4-16.2,19.8-27.3,30.1c-20.5,19-34,23.1-41.6,23.1c-28.8,0-52.2-24.2-52.2-54.1c0-29.6,23.4-53.8,52.2-54.1 c1.4,0,3,0.2,5,0.6c-8.4-3.9-17.5-6.7-26-6.7C13.4,29.6,3,66.1,2.4,68.8C0.9,75.5,0,82.5,0,89.7C0,139.4,39,179.8,87.1,179.8z"/>
-  <path fill="#29ABE2" d="M127.3,59.7c-5.8-5.6-34-28.5-61-29.3C18.1,29.2,4,64.2,2.7,68.7C12,29.5,46.4,0.2,87.2,0 c33.3,0,67,32.7,91.9,62.2c0,0,0.1-0.1,0.1-0.1c0,0,11.2,12.9,23.5,26.8c0,0,14,16.5,28.8,31c5.8,5.6,33.9,28.2,60.9,29 c49.5,1.4,63.2-35.6,63.9-38.4c-9.1,39.5-43.6,68.9-84.6,69.1c-33.3,0-67-32.7-92-62.2c0,0.1-0.1,0.1-0.1,0.2 c0,0-11.2-12.9-23.5-26.8C156.2,90.8,142.2,74.2,127.3,59.7z M2.7,69.1c0-0.1,0-0.2,0.1-0.3C2.7,68.9,2.7,69,2.7,69.1z"/>
+export const dfinityLogo = `
+<svg width="14.5833" height="14" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3323_81170)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.7256 6.51327C21.5297 6.49415 21.3336 6.49629 21.1399 6.52028C19.5323 6.71938 18.7738 8.11313 19.0586 10.4029C19.3187 12.4935 20.3789 14.71 22.4408 14.4846C22.5719 14.4702 22.6979 14.4492 22.8186 14.4219C21.6881 19.406 17.262 23.1245 11.9742 23.1245C5.83052 23.1245 0.850098 18.1049 0.850098 11.9129C0.850098 5.72081 5.83052 0.701172 11.9742 0.701172C16.1756 0.701172 19.833 3.04867 21.7256 6.51327ZM9.43409 19.6209C14.1749 19.6209 18.7188 15.2522 18.7188 10.5114C18.7188 5.77062 16.1019 1.92746 11.3611 1.92746C6.2808 1.92746 1.55088 6.47135 1.55088 11.2121C1.55088 17.3435 5.40489 19.6209 9.43409 19.6209Z" fill="#fff"/>
+<path d="M24.2914 10.0266C24.6652 11.8691 24.1709 13.4144 22.6371 13.6832C21.1032 13.9521 20.2092 12.1981 19.92 10.513C19.6033 8.66733 20.1084 7.50503 21.3033 7.2765C22.4982 7.04796 23.887 8.03333 24.2914 10.0266Z" fill="#fff"/>
+<path d="M12.3303 5.75576C11.5669 5.86286 10.7972 6.42532 10.0407 7.42662C9.6818 7.90116 9.38393 8.39743 9.16371 8.79191C9.16371 8.79191 9.16371 8.79191 9.16646 8.79428L9.16609 8.79158C9.16609 8.79158 9.66708 9.26117 10.2185 9.76225C10.4241 9.3836 10.7236 8.86506 11.0841 8.38479C11.7571 7.49436 12.2437 7.25808 12.5353 7.21716C13.6331 7.06316 14.6636 7.92948 14.8345 9.14776C15.0043 10.3579 14.2495 11.4747 13.1552 11.6365C13.1055 11.6435 13.0403 11.6443 12.957 11.6367C13.2991 11.7485 13.6588 11.8137 13.986 11.7678C15.9965 11.4858 16.1806 9.93676 16.1915 9.82505C16.2125 9.54391 16.2031 9.25325 16.1618 8.95881C15.8784 6.93824 14.1583 5.49933 12.3303 5.75576Z" fill="#fff"/>
+<path d="M6.33848 14.089C7.10192 13.9819 7.87159 13.4194 8.62805 12.4181C8.98698 11.9436 9.28485 11.4473 9.50506 11.0528C9.50506 11.0528 9.50506 11.0528 9.50231 11.0504L9.50269 11.0531C9.50269 11.0531 9.0017 10.5835 8.45028 10.0825C8.24472 10.4611 7.94516 10.9797 7.58462 11.4599C6.91173 12.3504 6.42509 12.5866 6.13347 12.6276C5.03535 12.7789 4.00481 11.9125 3.83391 10.6943C3.66414 9.48407 4.41891 8.36731 5.51314 8.20555C5.56293 8.19856 5.62808 8.19769 5.71135 8.20529C5.36929 8.09351 5.00959 8.02828 4.6824 8.07418C2.67186 8.35623 2.49021 9.90492 2.47654 10.0143C2.45592 10.2981 2.46489 10.5861 2.50619 10.8805C2.7904 12.9065 4.5105 14.3454 6.33848 14.089Z" fill="#fff"/>
+<path d="M13.9765 11.7378C12.9433 11.8524 11.7444 11.0786 11.4941 10.8796C10.8465 10.3645 9.31933 8.9398 9.19963 8.82713C8.07558 7.74256 6.59244 6.56238 5.3074 6.74264L5.30503 6.74298L5.30266 6.74331C3.74372 6.97026 2.60161 8.35897 2.47618 10.0155C2.48748 9.90645 2.78825 8.31075 4.68309 8.10003C5.71624 7.98539 6.92176 8.77207 7.17447 8.97075C7.82212 9.48587 9.34925 10.9105 9.46901 11.0232C10.5926 12.1051 12.0758 13.2853 13.3608 13.105L13.3632 13.1047L13.3655 13.1043C14.9245 12.8774 16.069 11.4883 16.192 9.83218C16.1783 9.94152 15.8733 11.5241 13.9765 11.7378Z" fill="#fff"/>
+</g>
+<defs>
+<clipPath id="clip0_3323_81170">
+<rect width="24" height="24" fill="white" transform="translate(0.5)"/>
+</clipPath>
+</defs>
 </svg>
 `
 
-export const copy_icon = `
+export const copyIcon = `
 <svg width="28" height="28" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
   <path stroke-linecap="round" stroke-linejoin="round" d="M15.666 3.888A2.25 2.25 0 0013.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 01-.75.75H9a.75.75 0 01-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 01-2.25 2.25H6.75A2.25 2.25 0 014.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 011.927-.184" />
 </svg>

diff --git a/tools/ui/src/candid.css b/tools/ui/src/candid.css
@@ -4,7 +4,7 @@
   font-size: 10px;
   --font-circular: 'Circular Std', 'Roboto', sans-serif;
   --font-mono: 'Vremena Grotesk', 'Roboto Mono', monospace;
-  --header-height: 3.8rem;
+  --header-height: 4rem;
   --pad-sm: 0.8rem;
   --pad-md: 1.5rem;
   --pad-lg: 2.4rem;
@@ -123,6 +123,15 @@ label.small {
 input[type='checkbox'] ~ .popup-form {
   padding-left: var(--pad-md);
 }
+.checkbox-label {
+  display: inline-flex;
+  gap: 4px;
+  align-items: center;
+  margin-bottom: 0;
+}
+.checkbox-label input[type='checkbox'] {
+  margin-bottom: 0;
+}
 .input-container > span > .popup-form,
 .ui-result > span > .popup-form {
   padding-left: 0;
@@ -192,6 +201,12 @@ input[type='checkbox'] ~ .popup-form {
 .btn:not(:last-child) {
   margin-right: var(--pad-md);
 }
+.btn-auth {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px;
+}
 button {
   padding: 0;
   border: none;
@@ -330,6 +345,18 @@ textarea:focus {
   background-color: var(--darkest);
 }
 
+@media not screen and (min-width: 600px) {
+  :root {
+    --header-height: initial;
+  }
+
+  #header {
+    flex-direction: column;
+    padding: 1rem 0;
+    gap: 1rem;
+  }
+}
+
 @media only screen and (min-width: 800px) {
   :root {
     --header-height: 5.6rem;
@@ -339,6 +366,7 @@ textarea:focus {
   #header {
     text-align: left;
     padding-left: 3rem;
+    padding-right: 1rem;
   }
 
   #container {

diff --git a/tools/ui/src/candid.html b/tools/ui/src/candid.html
@@ -1,6 +1,7 @@
 <html>
   <head>
     <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>DFINITY Canister Candid UI</title>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/reboot.css" />
     <link rel="preconnect" href="https://fonts.gstatic.com" />