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..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() { @@ -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 = ` + + + ` + 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 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 = ` - - - - - - - - - - - - +export const dfinityLogo = ` + + + + + + + + + + + + + ` -export const copy_icon = ` +export const copyIcon = ` diff --git a/tools/ui/src/candid.css b/tools/ui/src/candid.css index a4c62720..35bfa6f3 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,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 index 7161ecbb..475ee03a 100644 --- a/tools/ui/src/candid.html +++ b/tools/ui/src/candid.html @@ -1,6 +1,7 @@ + DFINITY Canister Candid UI