From b0559cafba380ef2e1b1626756f0f51faa1fa604 Mon Sep 17 00:00:00 2001
From: rvanasa <ryan.vandersmith@dfinity.org>
Date: Tue, 17 Oct 2023 13:51:12 -0600
Subject: [PATCH 1/8] Refactor auth form

---
 tools/ui/Cargo.lock       |  2 +-
 tools/ui/src/auth/auth.ts | 42 +++++++++++----------------------------
 2 files changed, 13 insertions(+), 31 deletions(-)

diff --git a/tools/ui/Cargo.lock b/tools/ui/Cargo.lock
index 7e687c39..b36fc70c 100644
--- a/tools/ui/Cargo.lock
+++ b/tools/ui/Cargo.lock
@@ -111,7 +111,7 @@ checksum = "14c189c53d098945499cdfa7ecc63567cf3886b3332b312a5b4585d8d3a6a610"
 
 [[package]]
 name = "candid"
-version = "0.9.9"
+version = "0.9.10"
 dependencies = [
  "anyhow",
  "binread",
diff --git a/tools/ui/src/auth/auth.ts b/tools/ui/src/auth/auth.ts
index d6bdfe09..83dd0003 100644
--- a/tools/ui/src/auth/auth.ts
+++ b/tools/ui/src/auth/auth.ts
@@ -20,7 +20,7 @@ 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"
@@ -40,38 +40,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>
+        <input id="raw" type="checkbox" checked></input>
+        raw
+      </label>
+      <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 = ""

From 966d5abfefb6a8e368d656cf3467f9d3a61c25e1 Mon Sep 17 00:00:00 2001
From: rvanasa <ryan.vandersmith@dfinity.org>
Date: Tue, 17 Oct 2023 14:09:30 -0600
Subject: [PATCH 2/8] Set up responsive text in login button

---
 tools/ui/src/auth/auth.ts | 2 +-
 tools/ui/src/candid.css   | 6 ++++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/tools/ui/src/auth/auth.ts b/tools/ui/src/auth/auth.ts
index 83dd0003..688d7deb 100644
--- a/tools/ui/src/auth/auth.ts
+++ b/tools/ui/src/auth/auth.ts
@@ -25,7 +25,7 @@ function insertLoginForm() {
     const buttonLogin = document.createElement("button")
     buttonLogin.className = "btn"
     buttonLogin.style.margin = "10px"
-    buttonLogin.innerHTML = `${dfinity_logo} Login with Internet Identity`
+    buttonLogin.innerHTML = `${dfinity_logo} Login <span class="hide-narrow">with Internet Identity</span>`
 
     const canisterId = Principal.fromText(cid)
 
diff --git a/tools/ui/src/candid.css b/tools/ui/src/candid.css
index a4c62720..caf5782c 100644
--- a/tools/ui/src/candid.css
+++ b/tools/ui/src/candid.css
@@ -330,6 +330,12 @@ textarea:focus {
   background-color: var(--darkest);
 }
 
+@media not screen and (min-width: 800px) {
+  .hide-narrow {
+    display: none;
+  }
+}
+
 @media only screen and (min-width: 800px) {
   :root {
     --header-height: 5.6rem;

From ee2a1e34fab234e307246e404a96f25240bdfa4e Mon Sep 17 00:00:00 2001
From: rvanasa <ryan.vandersmith@dfinity.org>
Date: Tue, 17 Oct 2023 17:20:40 -0600
Subject: [PATCH 3/8] Adjust styling

---
 tools/ui/src/auth/auth.ts |  9 +++++---
 tools/ui/src/candid.css   | 43 +++++++++++++++++++++++++++++----------
 2 files changed, 38 insertions(+), 14 deletions(-)

diff --git a/tools/ui/src/auth/auth.ts b/tools/ui/src/auth/auth.ts
index 688d7deb..f7bc3bf4 100644
--- a/tools/ui/src/auth/auth.ts
+++ b/tools/ui/src/auth/auth.ts
@@ -23,9 +23,12 @@ function insertLoginForm() {
     const auth = document.getElementById("authentication")!
 
     const buttonLogin = document.createElement("button")
-    buttonLogin.className = "btn"
-    buttonLogin.style.margin = "10px"
-    buttonLogin.innerHTML = `${dfinity_logo} Login <span class="hide-narrow">with Internet Identity</span>`
+    buttonLogin.className = "btn btn-auth"
+    buttonLogin.innerHTML = `
+      ${dfinity_logo}
+      <span class="show-narrow">Login</span>
+      <span class="hide-narrow">Login with Internet Identity</span>
+    `
 
     const canisterId = Principal.fromText(cid)
 
diff --git a/tools/ui/src/candid.css b/tools/ui/src/candid.css
index caf5782c..849dde34 100644
--- a/tools/ui/src/candid.css
+++ b/tools/ui/src/candid.css
@@ -1,9 +1,9 @@
 :root {
-  font-family: 'Circular Std', 'Roboto', sans-serif;
+  font-family: "Circular Std", "Roboto", sans-serif;
   font-weight: 300;
   font-size: 10px;
-  --font-circular: 'Circular Std', 'Roboto', sans-serif;
-  --font-mono: 'Vremena Grotesk', 'Roboto Mono', monospace;
+  --font-circular: "Circular Std", "Roboto", sans-serif;
+  --font-mono: "Vremena Grotesk", "Roboto Mono", monospace;
   --header-height: 3.8rem;
   --pad-sm: 0.8rem;
   --pad-md: 1.5rem;
@@ -66,7 +66,7 @@
 }
 
 #methods {
-  font-family: 'Vremena Grotesk', 'Roboto Mono', monospace;
+  font-family: "Vremena Grotesk", "Roboto Mono", monospace;
   padding: 0;
   margin: 0;
 }
@@ -95,22 +95,22 @@
 input,
 select {
   font-size: var(--font-md);
-  font-family: 'Circular Std', 'Roboto', sans-serif;
+  font-family: "Circular Std", "Roboto", sans-serif;
   margin-bottom: var(--pad-lg);
 }
-input:not([type='checkbox']),
+input:not([type="checkbox"]),
 select {
   width: 100%;
   height: 4.8rem;
   padding: 1.5rem;
   border: 1px solid var(--dark);
 }
-input[type='number']::-webkit-inner-spin-button {
+input[type="number"]::-webkit-inner-spin-button {
   width: 3rem;
   height: 3rem;
 }
 label {
-  font-family: 'Circular Std', 'Roboto', sans-serif;
+  font-family: "Circular Std", "Roboto", sans-serif;
   margin-right: var(--pad-sm);
 }
 label.small {
@@ -120,7 +120,7 @@ label.small {
   padding-left: var(--pad-md);
   width: 100%;
 }
-input[type='checkbox'] ~ .popup-form {
+input[type="checkbox"] ~ .popup-form {
   padding-left: var(--pad-md);
 }
 .input-container > span > .popup-form,
@@ -178,7 +178,7 @@ input[type='checkbox'] ~ .popup-form {
 }
 
 .btn {
-  font-family: 'Roboto', sans-serif;
+  font-family: "Roboto", sans-serif;
   letter-spacing: 0.05rem;
   background-color: var(--darkest);
   color: var(--lightest);
@@ -192,6 +192,12 @@ input[type='checkbox'] ~ .popup-form {
 .btn:not(:last-child) {
   margin-right: var(--pad-md);
 }
+.btn-auth {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  margin: 10px;
+}
 button {
   padding: 0;
   border: none;
@@ -330,6 +336,17 @@ textarea:focus {
   background-color: var(--darkest);
 }
 
+@media not screen and (min-width: 600px) {
+  :root {
+    --header-height: 8rem;
+  }
+
+  #header {
+    flex-direction: column;
+    align-items: start;
+  }
+}
+
 @media not screen and (min-width: 800px) {
   .hide-narrow {
     display: none;
@@ -342,6 +359,10 @@ textarea:focus {
     --console-width: clamp(28rem, 30vw, 40rem);
   }
 
+  .show-narrow {
+    display: none;
+  }
+
   #header {
     text-align: left;
     padding-left: 3rem;
@@ -371,7 +392,7 @@ textarea:focus {
   .ui-result span:not(:first-child):not(.status) {
     margin-left: var(--pad-md);
   }
-  input:not([type='checkbox']),
+  input:not([type="checkbox"]),
   select {
     width: 23.2rem;
     height: 4rem;

From f1fe5fabd556108689d493daada4cd04e38c50a9 Mon Sep 17 00:00:00 2001
From: rvanasa <ryan.vandersmith@dfinity.org>
Date: Tue, 17 Oct 2023 17:36:09 -0600
Subject: [PATCH 4/8] Unformat

---
 tools/ui/src/candid.css | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/tools/ui/src/candid.css b/tools/ui/src/candid.css
index 849dde34..8be4a925 100644
--- a/tools/ui/src/candid.css
+++ b/tools/ui/src/candid.css
@@ -1,9 +1,9 @@
 :root {
-  font-family: "Circular Std", "Roboto", sans-serif;
+  font-family: 'Circular Std', 'Roboto', sans-serif;
   font-weight: 300;
   font-size: 10px;
-  --font-circular: "Circular Std", "Roboto", sans-serif;
-  --font-mono: "Vremena Grotesk", "Roboto Mono", monospace;
+  --font-circular: 'Circular Std', 'Roboto', sans-serif;
+  --font-mono: 'Vremena Grotesk', 'Roboto Mono', monospace;
   --header-height: 3.8rem;
   --pad-sm: 0.8rem;
   --pad-md: 1.5rem;
@@ -66,7 +66,7 @@
 }
 
 #methods {
-  font-family: "Vremena Grotesk", "Roboto Mono", monospace;
+  font-family: 'Vremena Grotesk', 'Roboto Mono', monospace;
   padding: 0;
   margin: 0;
 }
@@ -95,22 +95,22 @@
 input,
 select {
   font-size: var(--font-md);
-  font-family: "Circular Std", "Roboto", sans-serif;
+  font-family: 'Circular Std', 'Roboto', sans-serif;
   margin-bottom: var(--pad-lg);
 }
-input:not([type="checkbox"]),
+input:not([type='checkbox']),
 select {
   width: 100%;
   height: 4.8rem;
   padding: 1.5rem;
   border: 1px solid var(--dark);
 }
-input[type="number"]::-webkit-inner-spin-button {
+input[type='number']::-webkit-inner-spin-button {
   width: 3rem;
   height: 3rem;
 }
 label {
-  font-family: "Circular Std", "Roboto", sans-serif;
+  font-family: 'Circular Std', 'Roboto', sans-serif;
   margin-right: var(--pad-sm);
 }
 label.small {
@@ -120,7 +120,7 @@ label.small {
   padding-left: var(--pad-md);
   width: 100%;
 }
-input[type="checkbox"] ~ .popup-form {
+input[type='checkbox'] ~ .popup-form {
   padding-left: var(--pad-md);
 }
 .input-container > span > .popup-form,
@@ -178,7 +178,7 @@ input[type="checkbox"] ~ .popup-form {
 }
 
 .btn {
-  font-family: "Roboto", sans-serif;
+  font-family: 'Roboto', sans-serif;
   letter-spacing: 0.05rem;
   background-color: var(--darkest);
   color: var(--lightest);
@@ -392,7 +392,7 @@ textarea:focus {
   .ui-result span:not(:first-child):not(.status) {
     margin-left: var(--pad-md);
   }
-  input:not([type="checkbox"]),
+  input:not([type='checkbox']),
   select {
     width: 23.2rem;
     height: 4rem;

From fe5b30713d9d6bbca9cb206e791942156a4e7a4f Mon Sep 17 00:00:00 2001
From: rvanasa <ryan.vandersmith@dfinity.org>
Date: Wed, 18 Oct 2023 11:15:37 -0600
Subject: [PATCH 5/8] Improve responsive layout

---
 tools/ui/src/candid.css | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/tools/ui/src/candid.css b/tools/ui/src/candid.css
index 8be4a925..0ebdc947 100644
--- a/tools/ui/src/candid.css
+++ b/tools/ui/src/candid.css
@@ -196,7 +196,6 @@ input[type='checkbox'] ~ .popup-form {
   display: inline-flex;
   align-items: center;
   gap: 5px;
-  margin: 10px;
 }
 button {
   padding: 0;
@@ -338,12 +337,16 @@ textarea:focus {
 
 @media not screen and (min-width: 600px) {
   :root {
-    --header-height: 8rem;
+    --header-height: 9rem;
   }
 
   #header {
     flex-direction: column;
-    align-items: start;
+    margin-top: 1rem;
+  }
+
+  .btn-auth {
+    padding: 10px;
   }
 }
 
@@ -460,4 +463,8 @@ textarea:focus {
   #methods-list {
     height: calc(100vh - (var(--header-height) * 2));
   }
+
+  .btn-auth {
+    margin: 10px;
+  }
 }

From d79b34c9f673bf43505dfc99dadb28a8e3f050c3 Mon Sep 17 00:00:00 2001
From: rvanasa <ryan.vandersmith@dfinity.org>
Date: Wed, 18 Oct 2023 11:37:08 -0600
Subject: [PATCH 6/8] Progress

---
 tools/ui/src/auth/auth.ts |  4 ++--
 tools/ui/src/candid.css   | 23 ++++++++++++-----------
 tools/ui/src/candid.html  |  1 +
 3 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/tools/ui/src/auth/auth.ts b/tools/ui/src/auth/auth.ts
index f7bc3bf4..9f7688a5 100644
--- a/tools/ui/src/auth/auth.ts
+++ b/tools/ui/src/auth/auth.ts
@@ -44,11 +44,11 @@ function insertLoginForm() {
     })
 
     auth.innerHTML = `
-      <label>
+      <label class="checkbox-label">
         <input id="raw" type="checkbox" checked></input>
         raw
       </label>
-      <label>
+      <label class="checkbox-label">
         <input id="domain" type="checkbox" checked></input>
         ic0
       </label>
diff --git a/tools/ui/src/candid.css b/tools/ui/src/candid.css
index 0ebdc947..46716779 100644
--- 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,13 @@ label.small {
 input[type='checkbox'] ~ .popup-form {
   padding-left: var(--pad-md);
 }
+.checkbox-label {
+  margin-bottom: 0;
+}
+.checkbox-label input[type='checkbox'] {
+  margin-bottom: 0;
+  transform: translateY(2px);
+}
 .input-container > span > .popup-form,
 .ui-result > span > .popup-form {
   padding-left: 0;
@@ -196,6 +203,7 @@ input[type='checkbox'] ~ .popup-form {
   display: inline-flex;
   align-items: center;
   gap: 5px;
+  padding: 10px;
 }
 button {
   padding: 0;
@@ -337,16 +345,13 @@ textarea:focus {
 
 @media not screen and (min-width: 600px) {
   :root {
-    --header-height: 9rem;
+    --header-height: initial;
   }
 
   #header {
     flex-direction: column;
-    margin-top: 1rem;
-  }
-
-  .btn-auth {
-    padding: 10px;
+    padding: 1rem 0;
+    gap: 1rem;
   }
 }
 
@@ -463,8 +468,4 @@ textarea:focus {
   #methods-list {
     height: calc(100vh - (var(--header-height) * 2));
   }
-
-  .btn-auth {
-    margin: 10px;
-  }
 }
diff --git a/tools/ui/src/candid.html b/tools/ui/src/candid.html
index 7161ecbb..475ee03a 100644
--- 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/bootstrap-reboot@4.5.4/reboot.css" />
     <link rel="preconnect" href="https://fonts.gstatic.com" />

From fde396d9a6714d1d1e867428fbb13022204e5f3b Mon Sep 17 00:00:00 2001
From: rvanasa <ryan.vandersmith@dfinity.org>
Date: Wed, 18 Oct 2023 11:47:57 -0600
Subject: [PATCH 7/8] Adjust margins

---
 tools/ui/src/candid.css | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/tools/ui/src/candid.css b/tools/ui/src/candid.css
index 46716779..c69da027 100644
--- a/tools/ui/src/candid.css
+++ b/tools/ui/src/candid.css
@@ -124,11 +124,13 @@ 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;
-  transform: translateY(2px);
 }
 .input-container > span > .popup-form,
 .ui-result > span > .popup-form {

From 533de4c9985bf1e90ca55e69ca64f721ebdec7ea Mon Sep 17 00:00:00 2001
From: rvanasa <ryan.vandersmith@dfinity.org>
Date: Wed, 18 Oct 2023 12:04:54 -0600
Subject: [PATCH 8/8] Use monochromatic astronaut logo for II button

---
 tools/ui/src/auth/auth.ts  | 10 +++-------
 tools/ui/src/auth/icons.ts | 29 +++++++++++++++--------------
 tools/ui/src/candid.css    | 13 ++-----------
 3 files changed, 20 insertions(+), 32 deletions(-)

diff --git a/tools/ui/src/auth/auth.ts b/tools/ui/src/auth/auth.ts
index 9f7688a5..92f5814d 100644
--- 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() {
@@ -24,11 +24,7 @@ function insertLoginForm() {
 
     const buttonLogin = document.createElement("button")
     buttonLogin.className = "btn btn-auth"
-    buttonLogin.innerHTML = `
-      ${dfinity_logo}
-      <span class="show-narrow">Login</span>
-      <span class="hide-narrow">Login with Internet Identity</span>
-    `
+    buttonLogin.innerHTML = `${dfinityLogo} Login`
 
     const canisterId = Principal.fromText(cid)
 
@@ -96,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
index a40efc70..e1117a3c 100644
--- 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
index c69da027..35bfa6f3 100644
--- a/tools/ui/src/candid.css
+++ b/tools/ui/src/candid.css
@@ -204,7 +204,7 @@ input[type='checkbox'] ~ .popup-form {
 .btn-auth {
   display: inline-flex;
   align-items: center;
-  gap: 5px;
+  gap: 8px;
   padding: 10px;
 }
 button {
@@ -357,25 +357,16 @@ textarea:focus {
   }
 }
 
-@media not screen and (min-width: 800px) {
-  .hide-narrow {
-    display: none;
-  }
-}
-
 @media only screen and (min-width: 800px) {
   :root {
     --header-height: 5.6rem;
     --console-width: clamp(28rem, 30vw, 40rem);
   }
 
-  .show-narrow {
-    display: none;
-  }
-
   #header {
     text-align: left;
     padding-left: 3rem;
+    padding-right: 1rem;
   }
 
   #container {