@eventcatalog/core 5.0.0-beta.8 → 5.0.0

package/eventcatalog/src/components/Settings/LicenseSettings.tsx

@@ -1,7 +1,16 @@
 import { useEffect, useState } from 'react';
-import { ArrowUpRight, Clock, TriangleAlert } from 'lucide-react';
+import { ArrowUpRight, Clock, Info, Mail, TriangleAlert } from 'lucide-react';
 import { Row, cn } from './Row';
-import { getTrialStatus, LICENSE_FAQ_URL, LICENSE_REMINDER_DAYS, LICENSE_RENEW_URL, TRIAL_LENGTH_DAYS } from '@utils/trial';
+import {
+  BUY_BUSINESS_URL,
+  getTrialStatus,
+  LICENSE_FAQ_URL,
+  LICENSE_REMINDER_DAYS,
+  LICENSE_RENEW_URL,
+  PRICING_URL,
+  TALK_TO_US_URL,
+  TRIAL_LENGTH_DAYS,
+} from '@utils/trial';
 
 /**
  * The license status (see getLicenseStatus in @utils/license) with dates as unix ms, so it can be
@@ -35,7 +44,8 @@ const PILL_TONES: Record<Tone, string> = {
     'border-[rgb(var(--ec-badge-color-amber-text)/0.3)] bg-[rgb(var(--ec-badge-color-amber-background))] text-[rgb(var(--ec-badge-color-amber-text))]',
   danger:
     'border-[rgb(var(--ec-badge-color-red-text)/0.3)] bg-[rgb(var(--ec-badge-color-red-background))] text-[rgb(var(--ec-badge-color-red-text))]',
-  info: 'border-[rgb(var(--ec-accent)/0.3)] bg-[rgb(var(--ec-accent-subtle))] text-[rgb(var(--ec-accent))]',
+  // Black on light themes, white on dark: the catalog's accent colour reads as a warning
+  info: 'border-transparent bg-[rgb(var(--ec-page-text))] text-[rgb(var(--ec-page-bg))]',
   neutral: 'border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-bg))] text-[rgb(var(--ec-page-text-muted))]',
 };
 
@@ -120,11 +130,21 @@ const LicenseNotice = ({ license, now }: { license: LicenseProps; now: number })
         <p className="text-[13px] font-semibold">
           {expired ? 'Your commercial license has expired' : `Your commercial license expires in ${formatDays(daysLeft!)}`}
         </p>
-        <p className="text-[13px] opacity-90">
-          {expired
-            ? `It expired on ${formatDate(expiresAt)}. Renew it to keep using EventCatalog commercially.`
-            : `It expires on ${formatDate(expiresAt)}. Renew it before then to keep using EventCatalog commercially.`}
-        </p>
+        {expired ? (
+          <>
+            <p className="text-[13px] opacity-90">
+              It expired on {formatDate(expiresAt)}. Organisations that don't qualify for Free Use need a commercial license to
+              use EventCatalog in production.
+            </p>
+            <p className="text-[13px] opacity-90">
+              Your catalog keeps building and running. Renew to stay licensed, or talk to us if anything has changed.
+            </p>
+          </>
+        ) : (
+          <p className="text-[13px] opacity-90">
+            It expires on {formatDate(expiresAt)}. Renew it before then to keep using EventCatalog commercially.
+          </p>
+        )}
         <div className="flex flex-wrap items-center gap-3 pt-2">
           <a
             href={LICENSE_RENEW_URL}
@@ -135,6 +155,14 @@ const LicenseNotice = ({ license, now }: { license: LicenseProps; now: number })
             Renew license
             <ArrowUpRight className="h-3.5 w-3.5" aria-hidden />
           </a>
+          <a
+            href={TALK_TO_US_URL}
+            target="_blank"
+            rel="noreferrer"
+            className="text-[13px] font-medium underline underline-offset-2 hover:opacity-80"
+          >
+            Talk to us
+          </a>
           <a
             href={LICENSE_FAQ_URL}
             target="_blank"
@@ -149,6 +177,55 @@ const LicenseNotice = ({ license, now }: { license: LicenseProps; now: number })
   );
 };
 
+// Where a customer with a legacy key asks for a license.jwt (as the license FAQ does)
+const LICENSE_CONTACT_EMAIL = 'hello@eventcatalog.dev';
+
+/**
+ * A Scale or Starter plan uses a license key from before EventCatalog 5, checked online. It still works, but the
+ * customer should ask us for a license.jwt (checked offline) for their plan.
+ */
+const LegacyKeyNotice = ({ plan }: { plan: 'scale' | 'starter' }) => {
+  const subject = encodeURIComponent(`A license.jwt for our ${PLAN_NAMES[plan]} plan`);
+  return (
+    <div
+      role="note"
+      className="flex gap-3 rounded-lg border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-text)/0.05)] p-4 text-[rgb(var(--ec-page-text))]"
+    >
+      <Info className="mt-0.5 h-4 w-4 shrink-0 text-[rgb(var(--ec-page-text))]" aria-hidden />
+      <div className="space-y-1">
+        <p className="text-[13px] font-semibold">You're using a legacy license key</p>
+        <p className="text-[13px] text-[rgb(var(--ec-page-text-muted))]">
+          Your plan still works. Its key is from before EventCatalog 5.
+        </p>
+        <p className="text-[13px] text-[rgb(var(--ec-page-text-muted))]">
+          Contact us for a new key: a license.jwt file, checked offline.
+        </p>
+        <div className="pt-2">
+          <a
+            href={`mailto:${LICENSE_CONTACT_EMAIL}?subject=${subject}`}
+            className="inline-flex items-center gap-1.5 rounded-md bg-[rgb(var(--ec-page-text))] px-3.5 py-1.5 text-[13px] font-medium text-[rgb(var(--ec-page-bg))] shadow-sm transition-opacity hover:opacity-85"
+          >
+            Contact us for a new key
+            <Mail className="h-3.5 w-3.5" aria-hidden />
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// For organisations that don't need to pay: without it, the trial reads as "EventCatalog is now paid"
+const FreeUseNotice = () => (
+  <p className="text-[13px] leading-relaxed text-[rgb(var(--ec-content-text-muted,var(--ec-page-text-muted)))]">
+    <span className="font-medium text-[rgb(var(--ec-page-text))]">You may qualify for Free Use.</span> Under $10M revenue and $10M
+    raised, an individual or an open-source project? You can use EventCatalog for free.{' '}
+    <a href={LICENSE_RENEW_URL} target="_blank" rel="noreferrer" className="underline underline-offset-2 hover:opacity-80">
+      Get a free key at eventcatalog.cloud
+    </a>
+    .
+  </p>
+);
+
 const LicenseTable = ({ license, now }: { license: LicenseProps; now: number }) => {
   if (license.state === 'plan') {
     return (
@@ -243,46 +320,78 @@ interface Props {
   trialStartedAt?: number;
   /** When the page was rendered, unix ms: the first render matches the server's, then it counts from now */
   renderedAt: number;
+  /** EventCatalog's license (the Business Source License) on GitHub */
+  licenseUrl: string;
 }
 
-export const LicenseSettings = ({ license, trialStartedAt, renderedAt }: Props) => {
+export const LicenseSettings = ({ license, trialStartedAt, renderedAt, licenseUrl }: Props) => {
   const [now, setNow] = useState(renderedAt);
   useEffect(() => setNow(Date.now()), []);
+  // A catalog is on the trial or has a license: an expired license is shown (to renew), not the trial. As in the header.
+  const onTrial = license.state === 'none' || license.state === 'invalid';
+  // While the trial runs, buying starts from pricing; once it has ended, from the Business order form
+  const trialEnded = onTrial && getTrialStatus(trialStartedAt, now)?.ended;
 
   return (
-    <div className="divide-y divide-[rgb(var(--ec-page-border))]">
+    // A top border, as on the other settings pages
+    <div className="divide-y divide-[rgb(var(--ec-page-border))] border-t border-[rgb(var(--ec-page-border))]">
       <Row
         title="License"
-        description="EventCatalog is licensed under the Business Source License 1.1. Your license is read from the license.jwt file in the root of your catalog."
+        description={
+          <>
+            EventCatalog is licensed under the{' '}
+            <a href={licenseUrl} target="_blank" rel="noreferrer" className="underline underline-offset-2 hover:opacity-80">
+              Business Source License 1.1
+            </a>
+            . Your license is read from the license.jwt file in the root of your catalog. The{' '}
+            <a href={LICENSE_FAQ_URL} target="_blank" rel="noreferrer" className="underline underline-offset-2 hover:opacity-80">
+              license FAQ
+            </a>{' '}
+            explains who can use EventCatalog for free.
+          </>
+        }
+        aside={
+          (onTrial || license.state === 'expired') && (
+            <div className="space-y-3">
+              <FreeUseNotice />
+              <p className="text-[13px] leading-relaxed text-[rgb(var(--ec-content-text-muted,var(--ec-page-text-muted)))]">
+                Questions about licensing, or need something different? Get in touch and let us know how we can help.
+              </p>
+            </div>
+          )
+        }
         canEdit={false}
         dirty={false}
       >
         <div className="space-y-4">
           <LicenseTable license={license} now={now} />
           <LicenseNotice license={license} now={now} />
-          {/* The trial applies until there's a valid license or plan */}
-          {license.state !== 'plan' && (license.state !== 'licensed' || isExpired(license, now)) && (
-            <TrialTable trialStartedAt={trialStartedAt} now={now} />
+          {license.state === 'plan' && <LegacyKeyNotice plan={license.plan} />}
+          {onTrial && <TrialTable trialStartedAt={trialStartedAt} now={now} />}
+          {onTrial && (
+            <div className="flex flex-wrap gap-3">
+              <a
+                href={trialEnded ? BUY_BUSINESS_URL : PRICING_URL}
+                target="_blank"
+                rel="noreferrer"
+                className="inline-flex items-center gap-1.5 rounded-md bg-[rgb(var(--ec-page-text))] px-4 py-2 text-[13px] font-medium text-[rgb(var(--ec-page-bg))] shadow-sm transition-opacity hover:opacity-85"
+              >
+                {trialEnded ? 'Buy Business' : 'Buy a license'}
+                <ArrowUpRight className="h-3.5 w-3.5" aria-hidden />
+              </a>
+              <a
+                href={TALK_TO_US_URL}
+                target="_blank"
+                rel="noreferrer"
+                className="inline-flex items-center gap-1.5 rounded-md border border-[rgb(var(--ec-page-border))] px-4 py-2 text-[13px] font-medium text-[rgb(var(--ec-page-text))] transition-opacity hover:opacity-80"
+              >
+                Talk to us
+                <ArrowUpRight className="h-3.5 w-3.5" aria-hidden />
+              </a>
+            </div>
           )}
         </div>
       </Row>
-
-      <Row
-        title="Learn more"
-        description="Who can use EventCatalog for free, and when you need a commercial license."
-        canEdit={false}
-        dirty={false}
-      >
-        <a
-          href={LICENSE_FAQ_URL}
-          target="_blank"
-          rel="noreferrer"
-          className="inline-flex items-center gap-1.5 rounded-md bg-[rgb(var(--ec-page-text))] px-4 py-2 text-[13px] font-medium text-[rgb(var(--ec-page-bg))] shadow-sm transition-opacity hover:opacity-85"
-        >
-          Read the license FAQ
-          <ArrowUpRight className="h-3.5 w-3.5" aria-hidden />
-        </a>
-      </Row>
     </div>
   );
 };

package/eventcatalog/src/components/Settings/LlmAccessSettingsForm.tsx

@@ -64,44 +64,49 @@ export const LlmAccessSettingsForm = ({ canEdit, initial, apiBase, llmsTxtUrl, l
   };
 
   return (
-    <form onSubmit={(e) => e.preventDefault()} className="divide-y divide-[rgb(var(--ec-page-border))]">
+    <>
       <Toaster richColors closeButton position="bottom-right" theme="system" />
-      {!canEdit && (
-        <div className="pb-6">
-          <ReadOnlyBanner />
-        </div>
-      )}
-
-      <Row
-        title="llms.txt"
-        description="Generate llms.txt files so tools like Claude, ChatGPT, and Cursor can read your catalog at /llms.txt."
-        canEdit={canEdit}
-        dirty={dirty}
-        saving={saving}
-        onSave={save}
+      <form
+        onSubmit={(e) => e.preventDefault()}
+        className="divide-y divide-[rgb(var(--ec-page-border))] border-t border-[rgb(var(--ec-page-border))]"
       >
-        <ToggleRow
-          icon={<Bot className="h-4 w-4" aria-hidden />}
-          label={llmsTxtEnabled ? 'Enabled' : 'Disabled'}
-          hint={
-            llmsTxtEnabled ? 'AI tools can read your catalog at /llms.txt.' : 'AI tools will not be able to read your catalog.'
-          }
-          checked={llmsTxtEnabled}
-          disabled={!canEdit}
-          onChange={setLlmsTxtEnabled}
-        />
-        {llmsTxtEnabled && <LlmsTxtPreview url={llmsTxtUrl} fullUrl={llmsFullTxtUrl} />}
-      </Row>
+        {!canEdit && (
+          <div className="pb-6">
+            <ReadOnlyBanner />
+          </div>
+        )}
 
-      <Row
-        title="schemas.txt"
-        description="Give LLMs access to every schema across your organization in one place — events, commands, queries, and services."
-        canEdit={false}
-        dirty={false}
-      >
-        <SchemasTxtAvailable url={schemasTxtUrl} />
-      </Row>
-    </form>
+        <Row
+          title="llms.txt"
+          description="Generate llms.txt files so tools like Claude, ChatGPT, and Cursor can read your catalog at /llms.txt."
+          canEdit={canEdit}
+          dirty={dirty}
+          saving={saving}
+          onSave={save}
+        >
+          <ToggleRow
+            icon={<Bot className="h-4 w-4" aria-hidden />}
+            label={llmsTxtEnabled ? 'Enabled' : 'Disabled'}
+            hint={
+              llmsTxtEnabled ? 'AI tools can read your catalog at /llms.txt.' : 'AI tools will not be able to read your catalog.'
+            }
+            checked={llmsTxtEnabled}
+            disabled={!canEdit}
+            onChange={setLlmsTxtEnabled}
+          />
+          {llmsTxtEnabled && <LlmsTxtPreview url={llmsTxtUrl} fullUrl={llmsFullTxtUrl} />}
+        </Row>
+
+        <Row
+          title="schemas.txt"
+          description="Give LLMs access to every schema across your organization in one place — events, commands, queries, and services."
+          canEdit={false}
+          dirty={false}
+        >
+          <SchemasTxtAvailable url={schemasTxtUrl} />
+        </Row>
+      </form>
+    </>
   );
 };
 

package/eventcatalog/src/components/Settings/LogoUpload.tsx

@@ -75,7 +75,7 @@ export const LogoUpload = ({ canEdit, initialSrc, apiUrl, onSrcChange }: LogoUpl
       onDrop={onDrop}
       className={`relative flex items-center gap-5 rounded-lg border border-dashed px-4 py-4 transition-colors ${
         dragOver
-          ? 'border-[rgb(var(--ec-accent)/0.6)] bg-[rgb(var(--ec-accent-subtle)/0.4)]'
+          ? 'border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-text)/0.04)]'
           : 'border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-bg)/0.4)]'
       }`}
     >

package/eventcatalog/src/components/Settings/McpSettingsForm.tsx

@@ -26,7 +26,8 @@ interface Props {
 
 export const McpSettingsForm = ({ inSSR, mcpUrl, domainServers }: Props) => {
   return (
-    <div className="divide-y divide-[rgb(var(--ec-page-border))]">
+    // A top border, as on the other settings pages
+    <div className="divide-y divide-[rgb(var(--ec-page-border))] border-t border-[rgb(var(--ec-page-border))]">
       <Row
         title="Catalog MCP Server"
         description="Connect AI agents (Claude, Cursor, VS Code and any MCP client) to every resource in your catalog: domains, services, messages, flows, schemas and the teams that own them."
@@ -63,7 +64,7 @@ const LivePill = () => (
 const CatalogServer = ({ url }: { url: string }) => (
   <div className="overflow-hidden rounded-lg border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))]">
     <div className="flex items-start gap-3 px-4 py-3.5">
-      <span className="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg border border-[rgb(var(--ec-accent)/0.3)] bg-[rgb(var(--ec-accent-subtle))] text-[rgb(var(--ec-accent))]">
+      <span className="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-text)/0.05)] text-[rgb(var(--ec-page-text))]">
         <Library className="h-4 w-4" aria-hidden />
       </span>
       <div className="min-w-0 flex-1">
@@ -83,7 +84,7 @@ const CatalogServer = ({ url }: { url: string }) => (
         href={MCP_DOCS_URL}
         target="_blank"
         rel="noreferrer"
-        className="mt-3 inline-flex items-center gap-1 text-[12px] font-medium text-[rgb(var(--ec-accent))] hover:underline"
+        className="mt-3 inline-flex items-center gap-1 text-[12px] font-medium text-[rgb(var(--ec-page-text))] hover:underline"
       >
         How to connect a client
         <ArrowUpRight className="h-3.5 w-3.5" aria-hidden />
@@ -100,7 +101,7 @@ const DomainServers = ({ servers }: { servers: DomainMcpServer[] }) => (
           <a
             href={server.docsUrl}
             title={server.summary}
-            className="inline-flex min-w-0 items-center gap-2 text-[13px] font-medium text-[rgb(var(--ec-page-text))] hover:text-[rgb(var(--ec-accent))]"
+            className="inline-flex min-w-0 items-center gap-2 text-[13px] font-medium text-[rgb(var(--ec-page-text))] hover:underline"
           >
             <Boxes className="h-3.5 w-3.5 flex-shrink-0 self-center text-[rgb(var(--ec-icon-color))]" aria-hidden />
             <span className="truncate">{server.name}</span>
@@ -114,15 +115,15 @@ const DomainServers = ({ servers }: { servers: DomainMcpServer[] }) => (
 );
 
 const McpNeedsSSR = () => (
-  <div className="overflow-hidden rounded-lg border border-[rgb(var(--ec-accent)/0.4)] bg-gradient-to-br from-[rgb(var(--ec-accent)/0.1)] via-[rgb(var(--ec-accent)/0.05)] to-transparent">
+  <div className="overflow-hidden rounded-lg border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-text)/0.03)]">
     <div className="flex items-start gap-3 px-4 py-3.5">
-      <span className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md border border-[rgb(var(--ec-accent)/0.4)] bg-[rgb(var(--ec-accent)/0.1)] text-[rgb(var(--ec-accent))]">
+      <span className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-text)/0.05)] text-[rgb(var(--ec-page-text))]">
         <ServerCog className="h-4 w-4" aria-hidden />
       </span>
       <div className="flex-1 min-w-0">
         <div className="flex items-center gap-2">
           <p className="text-[13px] font-semibold text-[rgb(var(--ec-page-text))]">Server output mode required</p>
-          <span className="inline-flex items-center gap-1 rounded-full border border-[rgb(var(--ec-accent)/0.4)] bg-[rgb(var(--ec-accent)/0.1)] px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-[rgb(var(--ec-accent))]">
+          <span className="inline-flex items-center gap-1 rounded-full border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-text)/0.05)] px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-[rgb(var(--ec-page-text))]">
             SSR
           </span>
         </div>
@@ -134,7 +135,7 @@ const McpNeedsSSR = () => (
             href={MCP_DOCS_URL}
             target="_blank"
             rel="noreferrer"
-            className="inline-flex items-center gap-1 rounded-md bg-[rgb(var(--ec-accent))] px-3 py-1.5 text-[12px] font-semibold text-white shadow-sm transition-colors hover:bg-[rgb(var(--ec-accent-hover))]"
+            className="inline-flex items-center gap-1 rounded-md bg-[rgb(var(--ec-page-text))] px-3 py-1.5 text-[12px] font-semibold text-[rgb(var(--ec-page-bg))] shadow-sm transition-colors hover:opacity-85"
           >
             MCP setup guide
             <ExternalLink className="h-3 w-3" aria-hidden />

package/eventcatalog/src/components/Settings/Row.tsx

@@ -3,7 +3,7 @@ import { AlertCircle } from 'lucide-react';
 export const cn = (...parts: Array<string | false | undefined | null>): string => parts.filter(Boolean).join(' ');
 
 export const inputBase =
-  'block w-full rounded-md border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-input-bg,var(--ec-page-bg)))] px-3 py-2 text-[13px] text-[rgb(var(--ec-page-text))] placeholder:text-[rgb(var(--ec-page-text-muted)/0.7)] transition-colors focus:border-[rgb(var(--ec-accent)/0.6)] focus:outline-none focus:ring-2 focus:ring-[rgb(var(--ec-accent)/0.25)] disabled:cursor-not-allowed disabled:opacity-60';
+  'block w-full rounded-md border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-input-bg,var(--ec-page-bg)))] px-3 py-2 text-[13px] text-[rgb(var(--ec-page-text))] placeholder:text-[rgb(var(--ec-page-text-muted)/0.7)] transition-colors focus:border-[rgb(var(--ec-page-text)/0.5)] focus:outline-none focus:ring-2 focus:ring-[rgb(var(--ec-page-text)/0.15)] disabled:cursor-not-allowed disabled:opacity-60';
 
 export const monoInput = 'font-mono text-[12.5px] tracking-tight';
 
@@ -11,7 +11,9 @@ export const inputError = 'border-red-500/70 focus:border-red-500 focus:ring-red
 
 interface RowProps {
   title: string;
-  description: string;
+  description: React.ReactNode;
+  /** Shown under the description, in the left column */
+  aside?: React.ReactNode;
   canEdit: boolean;
   dirty: boolean;
   saving?: boolean;
@@ -20,13 +22,14 @@ interface RowProps {
   children: React.ReactNode;
 }
 
-export const Row = ({ title, description, canEdit, dirty, saving, onSave, error, children }: RowProps) => (
+export const Row = ({ title, description, aside, canEdit, dirty, saving, onSave, error, children }: RowProps) => (
   <section className="grid grid-cols-1 gap-6 py-8 md:grid-cols-[minmax(0,_18rem)_minmax(0,_1fr)] md:gap-12">
     <header className="space-y-1.5">
       <h3 className="text-[14px] font-semibold tracking-tight text-[rgb(var(--ec-page-text))]">{title}</h3>
       <p className="text-[13px] leading-relaxed text-[rgb(var(--ec-content-text-muted,var(--ec-page-text-muted)))]">
         {description}
       </p>
+      {aside && <div className="pt-3">{aside}</div>}
     </header>
     <div className="space-y-2.5">
       {children}
@@ -45,7 +48,7 @@ export const Row = ({ title, description, canEdit, dirty, saving, onSave, error,
             className={cn(
               'inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-[12px] font-medium transition-colors',
               dirty && !saving
-                ? 'border-[rgb(var(--ec-accent)/0.5)] bg-[rgb(var(--ec-accent-subtle))] text-[rgb(var(--ec-accent-text))] hover:bg-[rgb(var(--ec-accent-subtle)/0.8)]'
+                ? 'border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-text)/0.05)] text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-page-text)/0.08)]'
                 : 'border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-bg))] text-[rgb(var(--ec-page-text-muted))]',
               'disabled:cursor-not-allowed disabled:opacity-60'
             )}

package/eventcatalog/src/components/Settings/SettingsShared.tsx

@@ -32,7 +32,7 @@ export const UrlPanel = ({ url }: UrlPanelProps) => {
         href={url}
         target="_blank"
         rel="noreferrer"
-        className="flex-1 truncate rounded-md border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-bg))] px-2.5 py-1.5 font-mono text-[12px] text-[rgb(var(--ec-page-text))] transition-colors hover:border-[rgb(var(--ec-accent)/0.5)] hover:text-[rgb(var(--ec-accent))]"
+        className="flex-1 truncate rounded-md border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-bg))] px-2.5 py-1.5 font-mono text-[12px] text-[rgb(var(--ec-page-text))] transition-colors hover:border-[rgb(var(--ec-page-text)/0.4)]"
       >
         {fullUrl}
       </a>
@@ -72,13 +72,13 @@ export const Toggle = ({ checked, disabled, onChange }: ToggleProps) => (
     onClick={() => onChange(!checked)}
     className={cn(
       'relative inline-flex h-5 w-9 flex-shrink-0 cursor-pointer items-center rounded-full transition-colors',
-      checked ? 'bg-[rgb(var(--ec-accent))]' : 'bg-[rgb(var(--ec-page-text-muted)/0.35)]',
+      checked ? 'bg-[rgb(var(--ec-page-text))]' : 'bg-[rgb(var(--ec-page-text-muted)/0.35)]',
       disabled && 'cursor-not-allowed opacity-50'
     )}
   >
     <span
       className={cn(
-        'inline-block h-3.5 w-3.5 transform rounded-full bg-white shadow-sm transition-transform',
+        'inline-block h-3.5 w-3.5 transform rounded-full bg-[rgb(var(--ec-page-bg))] shadow-sm transition-transform',
         checked ? 'translate-x-[1.125rem]' : 'translate-x-[0.1875rem]'
       )}
     />