From 422018aeb227dffe3da7bfc772d86f9ce9c2bcd1 Mon Sep 17 00:00:00 2001 From: Matt Kane Date: Fri, 3 Apr 2026 22:23:02 +0100 Subject: [PATCH] feat(admin): add proper EmDash logo branding to admin UI (#200) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replace placeholder text branding ("— EmDash") with actual logo SVGs from the brand assets. Adds Logo.tsx with LogoIcon (icon mark) and LogoLockup (icon + wordmark) components. - Sidebar: gradient icon mark replaces em dash text character - Login, Signup, Setup: full lockup SVG with currentColor wordmark - Welcome modal: logo icon replaces Sparkle placeholder - Favicon: real gradient icon SVG replaces emoji --- .changeset/admin-logo-branding.md | 6 + packages/admin/src/components/LoginPage.tsx | 5 +- packages/admin/src/components/Logo.tsx | 148 ++++++++++++++++++ packages/admin/src/components/SetupWizard.tsx | 3 +- packages/admin/src/components/Sidebar.tsx | 5 +- packages/admin/src/components/SignupPage.tsx | 3 +- .../admin/src/components/WelcomeModal.tsx | 6 +- packages/core/src/astro/routes/admin.astro | 2 +- 8 files changed, 167 insertions(+), 11 deletions(-) create mode 100644 .changeset/admin-logo-branding.md create mode 100644 packages/admin/src/components/Logo.tsx diff --git a/.changeset/admin-logo-branding.md b/.changeset/admin-logo-branding.md new file mode 100644 index 0000000..11f1598 --- /dev/null +++ b/.changeset/admin-logo-branding.md @@ -0,0 +1,6 @@ +--- +"@emdash-cms/admin": patch +"emdash": patch +--- + +Replace placeholder text branding with proper EmDash logo SVGs in admin UI diff --git a/packages/admin/src/components/LoginPage.tsx b/packages/admin/src/components/LoginPage.tsx index 3236b21..6d028a7 100644 --- a/packages/admin/src/components/LoginPage.tsx +++ b/packages/admin/src/components/LoginPage.tsx @@ -21,6 +21,7 @@ import * as React from "react"; import { apiFetch, fetchManifest } from "../lib/api"; import { sanitizeRedirectUrl } from "../lib/url"; import { PasskeyLogin } from "./auth/PasskeyLogin"; +import { LogoLockup } from "./Logo.js"; // ============================================================================ // Types @@ -256,7 +257,7 @@ export function LoginPage({ redirectUrl = "/_emdash/admin" }: LoginPageProps) { return (
-
— EmDash
+
@@ -268,7 +269,7 @@ export function LoginPage({ redirectUrl = "/_emdash/admin" }: LoginPageProps) {
{/* Header */}
-
— EmDash
+

{method === "passkey" && "Sign in to your site"} {method === "magic-link" && "Sign in with email"} diff --git a/packages/admin/src/components/Logo.tsx b/packages/admin/src/components/Logo.tsx new file mode 100644 index 0000000..88f82e5 --- /dev/null +++ b/packages/admin/src/components/Logo.tsx @@ -0,0 +1,148 @@ +import type * as React from "react"; + +/** + * EmDash icon mark — the rounded-rect em dash symbol. + * Used in the sidebar brand and as favicon. + */ +export function LogoIcon(props: React.SVGProps) { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +/** + * Full logo lockup — icon + "EmDash" wordmark. + * Renders both dark-text and light-text variants, switching via CSS `light-dark()`. + */ +export function LogoLockup({ className, ...props }: React.SVGProps) { + return ( + + {/* Icon mark */} + + + {/* Wordmark — uses currentColor so it adapts to light/dark context */} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/packages/admin/src/components/SetupWizard.tsx b/packages/admin/src/components/SetupWizard.tsx index 4ab9043..ed5a0f3 100644 --- a/packages/admin/src/components/SetupWizard.tsx +++ b/packages/admin/src/components/SetupWizard.tsx @@ -16,6 +16,7 @@ import * as React from "react"; import { apiFetch, parseApiResponse } from "../lib/api/client"; import { PasskeyRegistration } from "./auth/PasskeyRegistration"; +import { LogoLockup } from "./Logo.js"; // ============================================================================ // Types @@ -481,7 +482,7 @@ export function SetupWizard() {
{/* Header */}
-
— EmDash
+

{currentStep === "site" && "Set up your site"} {currentStep === "admin" && "Create your account"} diff --git a/packages/admin/src/components/Sidebar.tsx b/packages/admin/src/components/Sidebar.tsx index 4779b6e..63592f6 100644 --- a/packages/admin/src/components/Sidebar.tsx +++ b/packages/admin/src/components/Sidebar.tsx @@ -24,6 +24,7 @@ import { fetchCommentCounts } from "../lib/api/comments"; import { useCurrentUser } from "../lib/api/current-user"; import { usePluginAdmins } from "../lib/plugin-context"; import { cn } from "../lib/utils"; +import { LogoIcon } from "./Logo.js"; // Re-export for Shell.tsx and Header.tsx export { KumoSidebar as Sidebar, useSidebar }; @@ -346,9 +347,7 @@ export function SidebarNav({ manifest }: SidebarNavProps) { to="/" className="emdash-brand-link flex w-full min-w-0 items-center gap-2 px-3 py-1" > - +