diff --git a/frontend/editor/src/core/hooks/useLogoAssets.test.ts b/frontend/editor/src/core/hooks/useLogoAssets.test.ts index 3d314ba60b..b22701dedd 100644 --- a/frontend/editor/src/core/hooks/useLogoAssets.test.ts +++ b/frontend/editor/src/core/hooks/useLogoAssets.test.ts @@ -10,6 +10,11 @@ import type { LogoVariant } from "@app/services/preferencesService"; */ describe("useLogoAssets - Logo Asset Files", () => { const publicDir = path.resolve(__dirname, "../../../public"); + // Brand logo assets live in the shared design system; the editor's vite + // config copies shared/assets/brand//* into the served root at build + // time (see viteStaticCopy in editor/vite.config.ts), so useLogoAssets can + // keep referencing them by their public-URL path. Validate them at source. + const brandDir = path.resolve(__dirname, "../../../../shared/assets/brand"); // All asset files that useLogoAssets references const requiredAssets = [ @@ -27,7 +32,7 @@ describe("useLogoAssets - Logo Asset Files", () => { describe.each(logoVariants)("%s logo variant", (variant) => { const folder = LOGO_FOLDER_BY_VARIANT[variant]; - const folderPath = path.join(publicDir, folder); + const folderPath = path.join(brandDir, folder); test(`folder "${folder}" should exist`, () => { expect(fs.existsSync(folderPath)).toBe(true); diff --git a/frontend/editor/src/proprietary/routes/Login.tsx b/frontend/editor/src/proprietary/routes/Login.tsx index 86bedb1934..054aa0a47d 100644 --- a/frontend/editor/src/proprietary/routes/Login.tsx +++ b/frontend/editor/src/proprietary/routes/Login.tsx @@ -22,7 +22,7 @@ import { import SpringLoginForm from "@shared/auth/ui/SpringLoginForm"; import { useSpringLogin } from "@shared/auth/ui/useSpringLogin"; import LoggedInState from "@app/routes/login/LoggedInState"; -import loginHeader from "@shared/assets/login/LoginLightModeHeader.svg"; +import loginHeader from "@shared/assets/brand/modern-logo/LoginLightModeHeader.svg"; export default function Login() { const navigate = useNavigate(); diff --git a/frontend/editor/src/proprietary/routes/Signup.tsx b/frontend/editor/src/proprietary/routes/Signup.tsx index 49481c9ce3..8b9fc87d71 100644 --- a/frontend/editor/src/proprietary/routes/Signup.tsx +++ b/frontend/editor/src/proprietary/routes/Signup.tsx @@ -16,7 +16,7 @@ import { SignupFieldErrors, } from "@app/routes/signup/SignupFormValidation"; import { useAuthService } from "@app/routes/signup/AuthService"; -import loginHeader from "@shared/assets/login/LoginLightModeHeader.svg"; +import loginHeader from "@shared/assets/brand/modern-logo/LoginLightModeHeader.svg"; export default function Signup() { const navigate = useNavigate(); diff --git a/frontend/editor/src/saas/routes/Login.tsx b/frontend/editor/src/saas/routes/Login.tsx index de98ccf482..dc52096dba 100644 --- a/frontend/editor/src/saas/routes/Login.tsx +++ b/frontend/editor/src/saas/routes/Login.tsx @@ -19,7 +19,7 @@ import ErrorMessage from "@shared/auth/ui/ErrorMessage"; import EmailPasswordForm from "@app/routes/login/EmailPasswordForm"; import OAuthButtons from "@app/routes/login/OAuthButtons"; import LoggedInState from "@app/routes/login/LoggedInState"; -import loginHeader from "@shared/assets/login/LoginLightModeHeader.svg"; +import loginHeader from "@shared/assets/brand/modern-logo/LoginLightModeHeader.svg"; export default function Login() { const navigate = useNavigate(); diff --git a/frontend/editor/src/saas/routes/OAuthConsent.tsx b/frontend/editor/src/saas/routes/OAuthConsent.tsx index c02edfa934..8aa42cc430 100644 --- a/frontend/editor/src/saas/routes/OAuthConsent.tsx +++ b/frontend/editor/src/saas/routes/OAuthConsent.tsx @@ -8,7 +8,7 @@ import "@shared/auth/ui/auth.css"; import "@app/routes/authShared/saas-auth.css"; import { withBasePath } from "@app/constants/app"; import ErrorMessage from "@shared/auth/ui/ErrorMessage"; -import loginHeader from "@shared/assets/login/LoginLightModeHeader.svg"; +import loginHeader from "@shared/assets/brand/modern-logo/LoginLightModeHeader.svg"; /** * OAuth 2.1 consent screen for the Supabase OAuth server (used by MCP clients diff --git a/frontend/editor/src/saas/routes/Signup.tsx b/frontend/editor/src/saas/routes/Signup.tsx index 7327e04eb3..430fd54863 100644 --- a/frontend/editor/src/saas/routes/Signup.tsx +++ b/frontend/editor/src/saas/routes/Signup.tsx @@ -19,7 +19,7 @@ import { SignupFieldErrors, } from "@app/routes/signup/SignupFormValidation"; import { useAuthService } from "@app/routes/signup/AuthService"; -import loginHeader from "@shared/assets/login/LoginLightModeHeader.svg"; +import loginHeader from "@shared/assets/brand/modern-logo/LoginLightModeHeader.svg"; export default function Signup() { const navigate = useNavigate(); diff --git a/frontend/editor/vite.config.ts b/frontend/editor/vite.config.ts index 7ac9af5060..b2077ccc96 100644 --- a/frontend/editor/vite.config.ts +++ b/frontend/editor/vite.config.ts @@ -271,6 +271,17 @@ export default defineConfig(async ({ mode }) => { src: "../node_modules/pdfjs-dist/standard_fonts/*", dest: "pdfjs/standard_fonts", }, + { + // Brand assets live in the shared design system; the editor serves + // them by URL per variant, so copy each set to the /{variant}-logo + // path its manifests, index.html and useLogoAssets resolve against. + src: "../shared/assets/brand/classic-logo/*", + dest: "classic-logo", + }, + { + src: "../shared/assets/brand/modern-logo/*", + dest: "modern-logo", + }, ], }), compressStaticCopyPlugin(), diff --git a/frontend/portal/src/components/LoginScreen.tsx b/frontend/portal/src/components/LoginScreen.tsx index 67692b3c3c..a44c5aa6e0 100644 --- a/frontend/portal/src/components/LoginScreen.tsx +++ b/frontend/portal/src/components/LoginScreen.tsx @@ -7,7 +7,7 @@ import SpringLoginForm from "@shared/auth/ui/SpringLoginForm"; import { useSpringLogin } from "@shared/auth/ui/useSpringLogin"; import "@shared/auth/ui/auth-theme.css"; import "@shared/auth/ui/auth.css"; -import loginHeader from "@shared/assets/login/LoginLightModeHeader.svg"; +import loginHeader from "@shared/assets/brand/modern-logo/LoginLightModeHeader.svg"; /** * Full-screen login shown by the portal's auth gate. Renders the same screen as diff --git a/frontend/portal/src/components/Sidebar.tsx b/frontend/portal/src/components/Sidebar.tsx index 48e7ea0b04..a94c780e9d 100644 --- a/frontend/portal/src/components/Sidebar.tsx +++ b/frontend/portal/src/components/Sidebar.tsx @@ -8,8 +8,8 @@ import { useLink } from "@portal/contexts/LinkContext"; import { useAsync } from "@portal/hooks/useAsync"; import { fetchHomeKpis, type KpiEntry } from "@portal/api/home"; import { EDITOR_URL } from "@portal/auth/editorUrl"; -import markLight from "@shared/assets/stirling-mark-light.svg"; -import markDark from "@shared/assets/stirling-mark-dark.svg"; +import markLight from "@shared/assets/brand/modern-logo/StirlingPDFLogoNoTextLight.svg"; +import markDark from "@shared/assets/brand/modern-logo/StirlingPDFLogoNoTextDark.svg"; import { HomeIcon, UsersIcon, diff --git a/frontend/shared/assets/Brand.stories.tsx b/frontend/shared/assets/Brand.stories.tsx new file mode 100644 index 0000000000..87cf9f1257 --- /dev/null +++ b/frontend/shared/assets/Brand.stories.tsx @@ -0,0 +1,106 @@ +import type { Meta, StoryObj } from "@storybook/react-vite"; + +// Visual catalogue of the shared brand assets (shared/assets/brand) — the single +// source of truth for the Stirling logos used across the apps. +import modernMarkDark from "@shared/assets/brand/modern-logo/StirlingPDFLogoNoTextDark.svg"; +import modernMarkLight from "@shared/assets/brand/modern-logo/StirlingPDFLogoNoTextLight.svg"; +import modernBlack from "@shared/assets/brand/modern-logo/StirlingPDFLogoBlackText.svg"; +import modernWhite from "@shared/assets/brand/modern-logo/StirlingPDFLogoWhiteText.svg"; +import modernGrey from "@shared/assets/brand/modern-logo/StirlingPDFLogoGreyText.svg"; +import classicMarkDark from "@shared/assets/brand/classic-logo/StirlingPDFLogoNoTextDark.svg"; +import classicMarkLight from "@shared/assets/brand/classic-logo/StirlingPDFLogoNoTextLight.svg"; +import classicBlack from "@shared/assets/brand/classic-logo/StirlingPDFLogoBlackText.svg"; +import classicWhite from "@shared/assets/brand/classic-logo/StirlingPDFLogoWhiteText.svg"; +import classicGrey from "@shared/assets/brand/classic-logo/StirlingPDFLogoGreyText.svg"; + +type Asset = { label: string; src: string; onDark?: boolean }; +type VariantSet = { variant: string; mark: Asset[]; wordmark: Asset[] }; + +const SETS: VariantSet[] = [ + { + variant: "modern", + mark: [ + { label: "NoTextDark", src: modernMarkDark }, + { label: "NoTextLight", src: modernMarkLight, onDark: true }, + ], + wordmark: [ + { label: "BlackText", src: modernBlack }, + { label: "GreyText", src: modernGrey }, + { label: "WhiteText", src: modernWhite, onDark: true }, + ], + }, + { + variant: "classic", + mark: [ + { label: "NoTextDark", src: classicMarkDark }, + { label: "NoTextLight", src: classicMarkLight, onDark: true }, + ], + wordmark: [ + { label: "BlackText", src: classicBlack }, + { label: "GreyText", src: classicGrey }, + { label: "WhiteText", src: classicWhite, onDark: true }, + ], + }, +]; + +function Swatch({ label, src, onDark, h }: Asset & { h: number }) { + return ( +
+
+ {label} +
+
+ {label} +
+
+ ); +} + +function Row({ title, items }: { title: string; items: Asset[] }) { + return ( +
+

{title}

+
+ {items.map((a) => ( + + ))} +
+
+ ); +} + +const meta: Meta = { + title: "Brand/Logos", + parameters: { layout: "padded" }, +}; +export default meta; +type Story = StoryObj; + +/** Every brand mark + wordmark, per variant, on the background each is built for. */ +export const Logos: Story = { + render: () => ( +
+ {SETS.map((set) => ( +
+

+ {set.variant} +

+ + +
+ ))} +
+ ), +}; diff --git a/frontend/editor/public/classic-logo/Firstpage.png b/frontend/shared/assets/brand/classic-logo/Firstpage.png similarity index 100% rename from frontend/editor/public/classic-logo/Firstpage.png rename to frontend/shared/assets/brand/classic-logo/Firstpage.png diff --git a/frontend/editor/public/classic-logo/StirlingPDFLogoBlackText.svg b/frontend/shared/assets/brand/classic-logo/StirlingPDFLogoBlackText.svg similarity index 100% rename from frontend/editor/public/classic-logo/StirlingPDFLogoBlackText.svg rename to frontend/shared/assets/brand/classic-logo/StirlingPDFLogoBlackText.svg diff --git a/frontend/editor/public/classic-logo/StirlingPDFLogoGreyText.svg b/frontend/shared/assets/brand/classic-logo/StirlingPDFLogoGreyText.svg similarity index 100% rename from frontend/editor/public/classic-logo/StirlingPDFLogoGreyText.svg rename to frontend/shared/assets/brand/classic-logo/StirlingPDFLogoGreyText.svg diff --git a/frontend/editor/public/classic-logo/StirlingPDFLogoNoTextDark.svg b/frontend/shared/assets/brand/classic-logo/StirlingPDFLogoNoTextDark.svg similarity index 100% rename from frontend/editor/public/classic-logo/StirlingPDFLogoNoTextDark.svg rename to frontend/shared/assets/brand/classic-logo/StirlingPDFLogoNoTextDark.svg diff --git a/frontend/editor/public/classic-logo/StirlingPDFLogoNoTextLight.svg b/frontend/shared/assets/brand/classic-logo/StirlingPDFLogoNoTextLight.svg similarity index 100% rename from frontend/editor/public/classic-logo/StirlingPDFLogoNoTextLight.svg rename to frontend/shared/assets/brand/classic-logo/StirlingPDFLogoNoTextLight.svg diff --git a/frontend/editor/public/classic-logo/StirlingPDFLogoWhiteText.svg b/frontend/shared/assets/brand/classic-logo/StirlingPDFLogoWhiteText.svg similarity index 100% rename from frontend/editor/public/classic-logo/StirlingPDFLogoWhiteText.svg rename to frontend/shared/assets/brand/classic-logo/StirlingPDFLogoWhiteText.svg diff --git a/frontend/editor/public/classic-logo/favicon.ico b/frontend/shared/assets/brand/classic-logo/favicon.ico similarity index 100% rename from frontend/editor/public/classic-logo/favicon.ico rename to frontend/shared/assets/brand/classic-logo/favicon.ico diff --git a/frontend/editor/public/classic-logo/logo-tooltip.svg b/frontend/shared/assets/brand/classic-logo/logo-tooltip.svg similarity index 100% rename from frontend/editor/public/classic-logo/logo-tooltip.svg rename to frontend/shared/assets/brand/classic-logo/logo-tooltip.svg diff --git a/frontend/editor/public/classic-logo/logo192.png b/frontend/shared/assets/brand/classic-logo/logo192.png similarity index 100% rename from frontend/editor/public/classic-logo/logo192.png rename to frontend/shared/assets/brand/classic-logo/logo192.png diff --git a/frontend/editor/public/classic-logo/logo512.png b/frontend/shared/assets/brand/classic-logo/logo512.png similarity index 100% rename from frontend/editor/public/classic-logo/logo512.png rename to frontend/shared/assets/brand/classic-logo/logo512.png diff --git a/frontend/editor/public/modern-logo/Firstpage.png b/frontend/shared/assets/brand/modern-logo/Firstpage.png similarity index 100% rename from frontend/editor/public/modern-logo/Firstpage.png rename to frontend/shared/assets/brand/modern-logo/Firstpage.png diff --git a/frontend/editor/public/modern-logo/LoginDarkModeHeader.svg b/frontend/shared/assets/brand/modern-logo/LoginDarkModeHeader.svg similarity index 100% rename from frontend/editor/public/modern-logo/LoginDarkModeHeader.svg rename to frontend/shared/assets/brand/modern-logo/LoginDarkModeHeader.svg diff --git a/frontend/shared/assets/login/LoginLightModeHeader.svg b/frontend/shared/assets/brand/modern-logo/LoginLightModeHeader.svg similarity index 100% rename from frontend/shared/assets/login/LoginLightModeHeader.svg rename to frontend/shared/assets/brand/modern-logo/LoginLightModeHeader.svg diff --git a/frontend/editor/public/modern-logo/StirlingPDFLogoBlackText.svg b/frontend/shared/assets/brand/modern-logo/StirlingPDFLogoBlackText.svg similarity index 100% rename from frontend/editor/public/modern-logo/StirlingPDFLogoBlackText.svg rename to frontend/shared/assets/brand/modern-logo/StirlingPDFLogoBlackText.svg diff --git a/frontend/editor/public/modern-logo/StirlingPDFLogoGreyText.svg b/frontend/shared/assets/brand/modern-logo/StirlingPDFLogoGreyText.svg similarity index 100% rename from frontend/editor/public/modern-logo/StirlingPDFLogoGreyText.svg rename to frontend/shared/assets/brand/modern-logo/StirlingPDFLogoGreyText.svg diff --git a/frontend/editor/public/modern-logo/StirlingPDFLogoNoTextDark.svg b/frontend/shared/assets/brand/modern-logo/StirlingPDFLogoNoTextDark.svg similarity index 100% rename from frontend/editor/public/modern-logo/StirlingPDFLogoNoTextDark.svg rename to frontend/shared/assets/brand/modern-logo/StirlingPDFLogoNoTextDark.svg diff --git a/frontend/editor/public/modern-logo/StirlingPDFLogoNoTextLight.svg b/frontend/shared/assets/brand/modern-logo/StirlingPDFLogoNoTextLight.svg similarity index 100% rename from frontend/editor/public/modern-logo/StirlingPDFLogoNoTextLight.svg rename to frontend/shared/assets/brand/modern-logo/StirlingPDFLogoNoTextLight.svg diff --git a/frontend/editor/public/modern-logo/StirlingPDFLogoWhiteText.svg b/frontend/shared/assets/brand/modern-logo/StirlingPDFLogoWhiteText.svg similarity index 100% rename from frontend/editor/public/modern-logo/StirlingPDFLogoWhiteText.svg rename to frontend/shared/assets/brand/modern-logo/StirlingPDFLogoWhiteText.svg diff --git a/frontend/editor/public/modern-logo/favicon.ico b/frontend/shared/assets/brand/modern-logo/favicon.ico similarity index 100% rename from frontend/editor/public/modern-logo/favicon.ico rename to frontend/shared/assets/brand/modern-logo/favicon.ico diff --git a/frontend/editor/public/modern-logo/logo-tooltip.svg b/frontend/shared/assets/brand/modern-logo/logo-tooltip.svg similarity index 100% rename from frontend/editor/public/modern-logo/logo-tooltip.svg rename to frontend/shared/assets/brand/modern-logo/logo-tooltip.svg diff --git a/frontend/editor/public/modern-logo/logo192.png b/frontend/shared/assets/brand/modern-logo/logo192.png similarity index 100% rename from frontend/editor/public/modern-logo/logo192.png rename to frontend/shared/assets/brand/modern-logo/logo192.png diff --git a/frontend/editor/public/modern-logo/logo512.png b/frontend/shared/assets/brand/modern-logo/logo512.png similarity index 100% rename from frontend/editor/public/modern-logo/logo512.png rename to frontend/shared/assets/brand/modern-logo/logo512.png diff --git a/frontend/shared/assets/stirling-mark-dark.svg b/frontend/shared/assets/stirling-mark-dark.svg deleted file mode 100644 index a6f82dd6f6..0000000000 --- a/frontend/shared/assets/stirling-mark-dark.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/frontend/shared/assets/stirling-mark-light.svg b/frontend/shared/assets/stirling-mark-light.svg deleted file mode 100644 index 62a5b38387..0000000000 --- a/frontend/shared/assets/stirling-mark-light.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/frontend/shared/assets/stirling-pdf-logo-dark.svg b/frontend/shared/assets/stirling-pdf-logo-dark.svg deleted file mode 100644 index ade6937870..0000000000 --- a/frontend/shared/assets/stirling-pdf-logo-dark.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/frontend/shared/assets/stirling-pdf-logo-light.svg b/frontend/shared/assets/stirling-pdf-logo-light.svg deleted file mode 100644 index a4a1a1f87e..0000000000 --- a/frontend/shared/assets/stirling-pdf-logo-light.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - -