diff --git a/packages/console/app/src/asset/lander/brand-assets-dark.svg b/packages/console/app/src/asset/lander/brand-assets-dark.svg new file mode 100644 index 00000000..196ed8de --- /dev/null +++ b/packages/console/app/src/asset/lander/brand-assets-dark.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/packages/console/app/src/asset/lander/brand-assets-light.svg b/packages/console/app/src/asset/lander/brand-assets-light.svg new file mode 100644 index 00000000..3f898f2a --- /dev/null +++ b/packages/console/app/src/asset/lander/brand-assets-light.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/packages/console/app/src/asset/lander/logo-dark.svg b/packages/console/app/src/asset/lander/logo-dark.svg new file mode 100644 index 00000000..8a2f7ebb --- /dev/null +++ b/packages/console/app/src/asset/lander/logo-dark.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/packages/console/app/src/asset/lander/logo-light.svg b/packages/console/app/src/asset/lander/logo-light.svg new file mode 100644 index 00000000..54f90aed --- /dev/null +++ b/packages/console/app/src/asset/lander/logo-light.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/packages/console/app/src/asset/lander/wordmark-dark.svg b/packages/console/app/src/asset/lander/wordmark-dark.svg new file mode 100644 index 00000000..42f8e22a --- /dev/null +++ b/packages/console/app/src/asset/lander/wordmark-dark.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/console/app/src/asset/lander/wordmark-light.svg b/packages/console/app/src/asset/lander/wordmark-light.svg new file mode 100644 index 00000000..398278da --- /dev/null +++ b/packages/console/app/src/asset/lander/wordmark-light.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/console/app/src/component/header-context-menu.css b/packages/console/app/src/component/header-context-menu.css index ee30b10c..e88af0c5 100644 --- a/packages/console/app/src/component/header-context-menu.css +++ b/packages/console/app/src/component/header-context-menu.css @@ -2,33 +2,49 @@ position: fixed; z-index: 1000; min-width: 160px; - border: 1px solid var(--color-border); - border-radius: var(--border-radius-sm); - background-color: var(--color-bg); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); - padding: var(--space-1); + border-radius: 8px; + background-color: var(--color-background); + box-shadow: 0 0 0 1px rgba(19, 16, 16, 0.08), 0 6px 8px -4px rgba(19, 16, 16, 0.12), 0 4px 3px -2px rgba(19, 16, 16, 0.12), 0 1px 2px -1px rgba(19, 16, 16, 0.12); + padding: 6px; @media (prefers-color-scheme: dark) { - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); + box-shadow: 0 0 0 1px rgba(247, 237, 237, 0.1); } } .context-menu-item { - display: block; + display: flex; + gap: 12px; width: 100%; - padding: var(--space-2-5) var(--space-3); - border: none; + padding: 8px 16px 8px 8px; + font-weight: 500; + cursor: pointer; background: none; + border: none; + align-items: center; color: var(--color-text); font-size: var(--font-size-sm); - font-family: var(--font-sans); text-align: left; cursor: pointer; - border-radius: var(--border-radius-sm); - transition: background-color 0.15s ease; + border-radius: 2px; + transition: background-color 0.2s ease; + + [data-slot="copy dark"] { + display: none; + } + + @media (prefers-color-scheme: dark) { + [data-slot="copy light"] { + display: none; + } + [data-slot="copy dark"] { + display: block; + } + } &:hover { - background-color: var(--color-bg-surface); + background-color: var(--color-background-weak-hover); + color: var(--color-text-strong); } } diff --git a/packages/console/app/src/component/header.tsx b/packages/console/app/src/component/header.tsx index 943ee683..8f686e38 100644 --- a/packages/console/app/src/component/header.tsx +++ b/packages/console/app/src/component/header.tsx @@ -1,5 +1,11 @@ import logoLight from "../asset/logo-ornate-light.svg" import logoDark from "../asset/logo-ornate-dark.svg" +import copyLogoLight from "../asset/lander/logo-light.svg" +import copyLogoDark from "../asset/lander/logo-dark.svg" +import copyWordmarkLight from "../asset/lander/wordmark-light.svg" +import copyWordmarkDark from "../asset/lander/wordmark-dark.svg" +import copyBrandAssetsLight from "../asset/lander/brand-assets-light.svg" +import copyBrandAssetsDark from "../asset/lander/brand-assets-dark.svg" import { A, createAsync } from "@solidjs/router" import { createMemo, Match, Show, Switch } from "solid-js" import { createStore } from "solid-js/store" @@ -50,6 +56,53 @@ export function Header(props: { zen?: boolean }) { setStore("contextMenuOpen", true) } + const copyWordmarkToClipboard = async () => { + try { + const wordmarkSvg = ` + + + + + + + + + + + + + + + + + + + + + + + + +` + await navigator.clipboard.writeText(wordmarkSvg) + } catch (err) { + console.error("Failed to copy wordmark to clipboard:", err) + } + } + + const copyLogoToClipboard = async () => { + try { + const logoSvg = ` + + + +` + await navigator.clipboard.writeText(logoSvg) + } catch (err) { + console.error("Failed to copy logo to clipboard:", err) + } + } + return (
@@ -64,20 +117,26 @@ export function Header(props: { zen?: boolean }) { class="context-menu" style={`left: ${store.contextMenuPosition.x}px; top: ${store.contextMenuPosition.y}px;`} > - - -
@@ -90,7 +149,20 @@ export function Header(props: { zen?: boolean }) {
  • - Brand assets + Docs +
    • +
  • + Enterprise +
    • +
  • + + + Login + + + Zen + +
    • @@ -151,7 +223,20 @@ export function Header(props: { zen?: boolean }) {
  • - Brand assets + Docs +
    • +
  • + Enterprise +
    • +
  • + + + Login + + + Zen + +