@eventcatalog/core 4.12.2 → 5.0.0-beta.0

package/eventcatalog/src/components/FieldsExplorer/FieldFilters.tsx

@@ -15,7 +15,6 @@ export interface FieldFiltersProps {
     formats: { value: string; count: number }[];
     messageTypes: { value: string; count: number }[];
   } | null;
-  isScaleEnabled?: boolean;
 }
 
 export default function FieldFilters({
@@ -28,7 +27,6 @@ export default function FieldFilters({
   conflictingOnly,
   onConflictingOnlyChange,
   facets,
-  isScaleEnabled = false,
 }: FieldFiltersProps) {
   const toggleFormat = (value: string) => {
     if (selectedFormats.includes(value)) {
@@ -131,32 +129,30 @@ export default function FieldFilters({
       </div>
 
       {/* Conflicting Fields Only Toggle */}
-      {isScaleEnabled && (
-        <div>
-          <label className="flex items-center gap-2 cursor-pointer group">
-            <div
-              className={`w-4 h-4 flex-shrink-0 rounded border flex items-center justify-center transition-colors ${
-                conflictingOnly
-                  ? 'bg-amber-500 border-amber-500'
-                  : 'border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-input-bg))] group-hover:border-[rgb(var(--ec-icon-color))]'
-              }`}
-              onClick={() => onConflictingOnlyChange(!conflictingOnly)}
-            >
-              {conflictingOnly && (
-                <svg className="w-3 h-3 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3">
-                  <path d="M5 13l4 4L19 7" strokeLinecap="round" strokeLinejoin="round" />
-                </svg>
-              )}
-            </div>
-            <span className="text-sm text-[rgb(var(--ec-page-text))]" onClick={() => onConflictingOnlyChange(!conflictingOnly)}>
-              Conflicting fields
-            </span>
-          </label>
-          <p className="text-[11px] text-[rgb(var(--ec-page-text-muted))] mt-1 ml-6">
-            Show only fields with inconsistent types across messages
-          </p>
-        </div>
-      )}
+      <div>
+        <label className="flex items-center gap-2 cursor-pointer group">
+          <div
+            className={`w-4 h-4 flex-shrink-0 rounded border flex items-center justify-center transition-colors ${
+              conflictingOnly
+                ? 'bg-amber-500 border-amber-500'
+                : 'border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-input-bg))] group-hover:border-[rgb(var(--ec-icon-color))]'
+            }`}
+            onClick={() => onConflictingOnlyChange(!conflictingOnly)}
+          >
+            {conflictingOnly && (
+              <svg className="w-3 h-3 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3">
+                <path d="M5 13l4 4L19 7" strokeLinecap="round" strokeLinejoin="round" />
+              </svg>
+            )}
+          </div>
+          <span className="text-sm text-[rgb(var(--ec-page-text))]" onClick={() => onConflictingOnlyChange(!conflictingOnly)}>
+            Conflicting fields
+          </span>
+        </label>
+        <p className="text-[11px] text-[rgb(var(--ec-page-text-muted))] mt-1 ml-6">
+          Show only fields with inconsistent types across messages
+        </p>
+      </div>
 
       {/* Results & Clear */}
       {activeFilterCount > 0 && (

package/eventcatalog/src/components/FieldsExplorer/FieldNodeGraph.tsx

@@ -211,23 +211,28 @@ function FieldNodeGraphInner({
   occurrences,
   onClose,
 }: FieldNodeGraphProps) {
-  const { nodes: initialNodes, edges: initialEdges } = useMemo(
-    () => getNodesAndEdges({ fieldPath, fieldType, occurrences }),
-    [fieldPath, fieldType, occurrences]
-  );
-
-  const [nodes, , onNodesChange] = useNodesState(initialNodes);
-  const [edges, , onEdgesChange] = useEdgesState(initialEdges);
-  const edgesRef = useRef(initialEdges);
+  const [nodes, setNodes, onNodesChange] = useNodesState<Node>([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([]);
+  const edgesRef = useRef(edges);
   edgesRef.current = edges;
 
   const { fitView } = useReactFlow();
   const wrapperRef = useRef<HTMLDivElement>(null);
 
+  // Laying the graph out is async, so it's shown (and fitted) once it's ready
   useEffect(() => {
-    const timer = setTimeout(() => fitView({ padding: 0.2 }), 50);
-    return () => clearTimeout(timer);
-  }, [fitView]);
+    let cancelled = false;
+    getNodesAndEdges({ fieldPath, fieldType, occurrences }).then((graph) => {
+      if (cancelled) return;
+      setNodes(graph.nodes);
+      setEdges(graph.edges);
+      // Called straight after setNodes so React Flow fits once they're measured
+      fitView({ padding: 0.2 });
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [fieldPath, fieldType, occurrences, setNodes, setEdges, fitView]);
 
   // Unique messages, producers, consumers for the details panel
   const uniqueMessages = useMemo(() => {

package/eventcatalog/src/components/FieldsExplorer/FieldsExplorer.tsx

@@ -1,205 +1,11 @@
 import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
-import { ChevronLeft, ChevronRight, Lock, Search, X, AlertTriangle } from 'lucide-react';
+import { ChevronLeft, ChevronRight, Search, X, AlertTriangle } from 'lucide-react';
 import FieldFilters from './FieldFilters';
 import FieldsTable from './FieldsTable';
 import type { FieldResult } from './FieldsTable';
 import FieldNodeGraph from './FieldNodeGraph';
 import { buildUrl } from '@utils/url-builder';
 
-function DummyNode({
-  type,
-  name,
-  version,
-  className,
-}: {
-  type: 'service' | 'event' | 'field';
-  name: string;
-  version?: string;
-  className?: string;
-}) {
-  const styles = {
-    service: { border: 'border-pink-500', badge: 'bg-pink-500', label: 'SERVICE' },
-    event: { border: 'border-orange-500', badge: 'bg-orange-500', label: 'EVENT' },
-    field: { border: 'border-cyan-500', badge: 'bg-cyan-500', label: 'FIELD' },
-  };
-  const s = styles[type];
-  return (
-    <div
-      className={`relative rounded-xl border-2 ${s.border} bg-[rgb(var(--ec-card-bg))] px-3 pt-4 pb-2.5 min-w-[140px] ${className || ''}`}
-    >
-      <div
-        className={`absolute -top-2.5 left-2.5 ${s.badge} text-white text-[7px] font-bold uppercase tracking-widest px-1.5 py-0.5 rounded`}
-      >
-        {s.label}
-      </div>
-      <div className="text-[11px] font-semibold text-[rgb(var(--ec-page-text))]">{name}</div>
-      {version && <div className="text-[9px] text-[rgb(var(--ec-page-text-muted))]">v{version}</div>}
-    </div>
-  );
-}
-
-function DummyEdge({ label }: { label: string }) {
-  return (
-    <div className="flex items-center gap-1">
-      <div className="w-8 h-px bg-[rgb(var(--ec-page-border))]" />
-      <span className="text-[8px] text-[rgb(var(--ec-page-text-muted))] whitespace-nowrap">{label}</span>
-      <div className="w-8 h-px bg-[rgb(var(--ec-page-border))]" />
-    </div>
-  );
-}
-
-function FieldLineageUpgradeModal({ fieldPath, onClose }: { fieldPath: string; onClose: () => void }) {
-  return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={onClose}>
-      <div
-        className="w-[90vw] h-[80vh] max-w-[1400px] rounded-xl border shadow-2xl flex flex-col overflow-hidden relative"
-        style={{
-          backgroundColor: 'rgb(var(--ec-page-bg))',
-          borderColor: 'rgb(var(--ec-page-border))',
-        }}
-        onClick={(e) => e.stopPropagation()}
-      >
-        {/* Header */}
-        <div
-          className="flex items-center justify-between px-5 py-3 border-b flex-shrink-0"
-          style={{ borderColor: 'rgb(var(--ec-page-border))' }}
-        >
-          <div className="flex items-center gap-2">
-            <h3 className="text-sm font-semibold" style={{ color: 'rgb(var(--ec-page-text))' }}>
-              Field Traceability
-            </h3>
-            <code
-              className="px-2 py-0.5 rounded text-xs font-mono"
-              style={{
-                backgroundColor: 'rgb(var(--ec-accent) / 0.1)',
-                color: 'rgb(var(--ec-accent))',
-              }}
-            >
-              {fieldPath}
-            </code>
-          </div>
-          <button
-            onClick={onClose}
-            className="p-1.5 rounded-lg transition-colors hover:bg-[rgb(var(--ec-content-hover))] flex-shrink-0"
-            style={{ color: 'rgb(var(--ec-icon-color))' }}
-          >
-            <X className="w-4 h-4" />
-          </button>
-        </div>
-
-        {/* Blurred dummy content */}
-        <div className="flex-1 relative overflow-hidden">
-          {/* Fake graph + side panel */}
-          <div className="absolute inset-0 flex blur-[2px] opacity-60 select-none pointer-events-none">
-            {/* Fake graph area */}
-            <div className="flex-1 flex items-center justify-center p-8">
-              <div className="flex items-center gap-3">
-                {/* Producer services */}
-                <div className="flex flex-col gap-6">
-                  <DummyNode type="service" name="Billing Service" version="1.2.0" />
-                  <DummyNode type="service" name="Order Service" version="2.0.1" />
-                </div>
-                {/* Edges to events */}
-                <div className="flex flex-col gap-12">
-                  <DummyEdge label="produces" />
-                  <DummyEdge label="produces" />
-                </div>
-                {/* Events */}
-                <div className="flex flex-col gap-6">
-                  <DummyNode type="event" name="Payment Due" version="0.0.1" />
-                  <DummyNode type="event" name="Order Created" version="1.0.0" />
-                </div>
-                {/* Edges to field */}
-                <div className="flex flex-col gap-12">
-                  <DummyEdge label="contains" />
-                  <DummyEdge label="contains" />
-                </div>
-                {/* Field */}
-                <div className="flex flex-col gap-6">
-                  <DummyNode type="field" name={fieldPath} />
-                </div>
-                {/* Edges to consumers */}
-                <div className="flex flex-col gap-12">
-                  <DummyEdge label="consumed by" />
-                </div>
-                {/* Consumer services */}
-                <div className="flex flex-col gap-6">
-                  <DummyNode type="service" name="Notification Service" version="0.0.2" />
-                </div>
-              </div>
-            </div>
-            {/* Fake side panel */}
-            <div className="w-[280px] flex-shrink-0 border-l border-[rgb(var(--ec-page-border))] p-4 space-y-4">
-              <div>
-                <div className="text-[11px] font-medium text-[rgb(var(--ec-page-text-muted))] uppercase tracking-wider mb-2">
-                  Field
-                </div>
-                <div className="text-sm font-mono font-semibold text-[rgb(var(--ec-page-text))]">{fieldPath}</div>
-                <div className="text-xs text-[rgb(var(--ec-page-text-muted))] mt-1">string</div>
-              </div>
-              <div>
-                <div className="text-[11px] font-medium text-amber-500 uppercase tracking-wider mb-2">Type Conflict</div>
-                <div className="rounded-lg border border-amber-500/20 bg-amber-500/5 p-2.5 space-y-1">
-                  <div className="text-xs text-amber-600">Inconsistent types detected</div>
-                  <div className="flex justify-between text-xs">
-                    <code className="font-mono">string</code>
-                    <span className="text-[rgb(var(--ec-page-text-muted))]">3 schemas</span>
-                  </div>
-                  <div className="flex justify-between text-xs">
-                    <code className="font-mono">integer</code>
-                    <span className="text-[rgb(var(--ec-page-text-muted))]">1 schema</span>
-                  </div>
-                </div>
-              </div>
-              <div>
-                <div className="text-[11px] font-medium text-[rgb(var(--ec-page-text-muted))] uppercase tracking-wider mb-2">
-                  Messages (3)
-                </div>
-                <div className="space-y-1.5">
-                  <div className="rounded-lg border border-[rgb(var(--ec-page-border)/0.5)] bg-[rgb(var(--ec-card-bg))] px-2.5 py-2 text-xs">
-                    Payment Due
-                  </div>
-                  <div className="rounded-lg border border-[rgb(var(--ec-page-border)/0.5)] bg-[rgb(var(--ec-card-bg))] px-2.5 py-2 text-xs">
-                    Order Created
-                  </div>
-                  <div className="rounded-lg border border-[rgb(var(--ec-page-border)/0.5)] bg-[rgb(var(--ec-card-bg))] px-2.5 py-2 text-xs">
-                    Invoice Generated
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          {/* Upgrade prompt overlay */}
-          <div className="absolute inset-0 flex items-center justify-center bg-[rgb(var(--ec-page-bg)/0.5)]">
-            <div className="text-center max-w-lg px-6 py-8 rounded-2xl border border-[rgb(var(--ec-page-border))] bg-[rgb(var(--ec-page-bg))] shadow-2xl">
-              <div className="w-12 h-12 rounded-full bg-[rgb(var(--ec-accent)/0.1)] flex items-center justify-center mx-auto mb-4">
-                <Lock className="w-6 h-6 text-[rgb(var(--ec-accent))]" />
-              </div>
-              <h3 className="text-lg font-semibold text-[rgb(var(--ec-page-text))] mb-2">Field Lineage & Traceability</h3>
-              <p className="text-sm text-[rgb(var(--ec-page-text-muted))] mb-5 leading-relaxed">
-                See which services produce and consume this field, detect type conflicts across schemas, and trace field usage
-                across your entire event-driven architecture.
-              </p>
-              <a
-                href="https://eventcatalog.cloud/"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg text-sm font-medium text-white bg-[rgb(var(--ec-accent))] hover:opacity-90 transition-opacity"
-              >
-                Start your 14-day free trial
-              </a>
-              <p className="text-xs text-[rgb(var(--ec-page-text-muted))] mt-3">
-                Available with EventCatalog Scale. No credit card required.
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
 interface Facets {
   formats: { value: string; count: number }[];
   types: { value: string; count: number }[];
@@ -223,11 +29,7 @@ interface SelectedField {
   occurrences: FieldResult[];
 }
 
-interface FieldsExplorerProps {
-  isScaleEnabled?: boolean;
-}
-
-export default function FieldsExplorer({ isScaleEnabled = false }: FieldsExplorerProps) {
+export default function FieldsExplorer() {
   const [fields, setFields] = useState<FieldResult[]>([]);
   const [total, setTotal] = useState(0);
   const [cursor, setCursor] = useState<string | null>(null);
@@ -325,18 +127,6 @@ export default function FieldsExplorer({ isScaleEnabled = false }: FieldsExplore
 
   // Open modal: fetch all occurrences for the field path, then show modal
   const handleSelectField = useCallback(async (fieldPath: string) => {
-    // Non-scale users get the locked upgrade modal
-    if (!isScaleEnabled) {
-      setSelectedField({
-        path: fieldPath,
-        type: 'unknown',
-        description: '',
-        required: false,
-        occurrences: [],
-      });
-      return;
-    }
-
     try {
       // Fetch all pages of occurrences for this field path
       let allOccurrences: FieldResult[] = [];
@@ -446,7 +236,6 @@ export default function FieldsExplorer({ isScaleEnabled = false }: FieldsExplore
               conflictingOnly={conflictingOnly}
               onConflictingOnlyChange={setConflictingOnly}
               facets={filterFacets}
-              isScaleEnabled={isScaleEnabled}
             />
           </div>
         </div>
@@ -485,7 +274,7 @@ export default function FieldsExplorer({ isScaleEnabled = false }: FieldsExplore
           )}
 
           {/* Table */}
-          <FieldsTable fields={fields} onSelectField={handleSelectField} isLoading={isLoading} isScaleEnabled={isScaleEnabled} />
+          <FieldsTable fields={fields} onSelectField={handleSelectField} isLoading={isLoading} />
 
           {/* Pagination */}
           <div className="flex-shrink-0 flex items-center justify-between px-6 py-3 border-t border-[rgb(var(--ec-page-border))]">
@@ -524,10 +313,7 @@ export default function FieldsExplorer({ isScaleEnabled = false }: FieldsExplore
         </div>
 
         {/* Field Detail Modal with Node Graph */}
-        {selectedField && !isScaleEnabled && (
-          <FieldLineageUpgradeModal fieldPath={selectedField.path} onClose={() => setSelectedField(null)} />
-        )}
-        {selectedField && isScaleEnabled && (
+        {selectedField && (
           <FieldNodeGraph
             fieldPath={selectedField.path}
             fieldType={selectedField.type}

package/eventcatalog/src/components/FieldsExplorer/FieldsTable.tsx

@@ -26,7 +26,6 @@ export interface FieldsTableProps {
   fields: FieldResult[];
   onSelectField: (fieldPath: string) => void;
   isLoading: boolean;
-  isScaleEnabled?: boolean;
 }
 
 const getColorAndIconForMessageType = (type: string) => {
@@ -82,7 +81,7 @@ function FieldPathCell({ path }: { path: string }) {
   );
 }
 
-export default function FieldsTable({ fields, onSelectField, isLoading, isScaleEnabled = false }: FieldsTableProps) {
+export default function FieldsTable({ fields, onSelectField, isLoading }: FieldsTableProps) {
   if (isLoading) {
     return (
       <div className="flex-1 flex items-center justify-center px-6 pb-5">
@@ -130,16 +129,12 @@ export default function FieldsTable({ fields, onSelectField, isLoading, isScaleE
               <th className="px-4 py-2.5 text-left text-[11px] font-medium text-[rgb(var(--ec-page-text-muted))] uppercase tracking-wider">
                 Required
               </th>
-              {isScaleEnabled && (
-                <th className="px-4 py-2.5 text-left text-[11px] font-medium text-[rgb(var(--ec-page-text-muted))] uppercase tracking-wider">
-                  Consistency
-                </th>
-              )}
-              {isScaleEnabled && (
-                <th className="px-4 py-2.5 text-left text-[11px] font-medium text-[rgb(var(--ec-page-text-muted))] uppercase tracking-wider">
-                  Used In
-                </th>
-              )}
+              <th className="px-4 py-2.5 text-left text-[11px] font-medium text-[rgb(var(--ec-page-text-muted))] uppercase tracking-wider">
+                Consistency
+              </th>
+              <th className="px-4 py-2.5 text-left text-[11px] font-medium text-[rgb(var(--ec-page-text-muted))] uppercase tracking-wider">
+                Used In
+              </th>
               <th className="px-4 py-2.5 text-left text-[11px] font-medium text-[rgb(var(--ec-page-text-muted))] uppercase tracking-wider">
                 Owners
               </th>
@@ -178,32 +173,28 @@ export default function FieldsTable({ fields, onSelectField, isLoading, isScaleE
                       <span className="text-[0.8rem] text-[rgb(var(--ec-page-text-muted))]">-</span>
                     )}
                   </td>
-                  {isScaleEnabled && (
-                    <td className="px-4 py-3 text-sm text-[rgb(var(--ec-page-text-muted))]">
-                      {field.conflicts && field.conflicts.length > 1 ? (
-                        <div
-                          className="flex items-center gap-1.5"
-                          title={field.conflicts.map((c) => `${c.type} (${c.count})`).join(', ')}
-                        >
-                          <AlertTriangle className="w-3.5 h-3.5 text-amber-500 flex-shrink-0" />
-                          <span className="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-semibold bg-amber-500/10 text-amber-600 border border-amber-500/20">
-                            {field.conflicts.length} types
-                          </span>
-                        </div>
-                      ) : (
-                        <span className="inline-flex items-center" title="All usages of this field match the same type">
-                          <Check className="h-4 w-4 text-green-500" />
+                  <td className="px-4 py-3 text-sm text-[rgb(var(--ec-page-text-muted))]">
+                    {field.conflicts && field.conflicts.length > 1 ? (
+                      <div
+                        className="flex items-center gap-1.5"
+                        title={field.conflicts.map((c) => `${c.type} (${c.count})`).join(', ')}
+                      >
+                        <AlertTriangle className="w-3.5 h-3.5 text-amber-500 flex-shrink-0" />
+                        <span className="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-semibold bg-amber-500/10 text-amber-600 border border-amber-500/20">
+                          {field.conflicts.length} types
                         </span>
-                      )}
-                    </td>
-                  )}
-                  {isScaleEnabled && (
-                    <td className="px-4 py-3 text-sm text-[rgb(var(--ec-page-text-muted))]">
-                      <span className="text-[0.8rem] text-[rgb(var(--ec-page-text-muted))]">
-                        {field.usedInCount || 1} {(field.usedInCount || 1) === 1 ? 'schema' : 'schemas'}
+                      </div>
+                    ) : (
+                      <span className="inline-flex items-center" title="All usages of this field match the same type">
+                        <Check className="h-4 w-4 text-green-500" />
                       </span>
-                    </td>
-                  )}
+                    )}
+                  </td>
+                  <td className="px-4 py-3 text-sm text-[rgb(var(--ec-page-text-muted))]">
+                    <span className="text-[0.8rem] text-[rgb(var(--ec-page-text-muted))]">
+                      {field.usedInCount || 1} {(field.usedInCount || 1) === 1 ? 'schema' : 'schemas'}
+                    </span>
+                  </td>
                   <td className="px-4 py-3 text-sm text-[rgb(var(--ec-page-text-muted))]">
                     {owners.length > 0 ? (
                       <div className="flex items-center gap-1 flex-wrap">

package/eventcatalog/src/components/Header.astro

@@ -2,17 +2,12 @@
 import catalog from '@utils/eventcatalog-config/catalog';
 import Search from '@components/Search/Search.astro';
 import { buildUrl } from '@utils/url-builder';
-import {
-  showEventCatalogBranding,
-  showCustomBranding,
-  isEventCatalogChatVisible,
-  isEventCatalogChatEnabled,
-} from '@utils/feature';
 import { getSession } from '@utils/auth-astro/server';
-import { isAuthEnabled, isSSR } from '@utils/feature';
+import { isAuthEnabled, isEventCatalogChatVisible, isEventCatalogChatEnabled } from '@utils/feature';
 import { EnvironmentDropdown } from './EnvironmentDropdown';
 import ChatPanelButton from './ChatPanel/ChatPanelButton';
 import ThemeToggle from './ThemeToggle';
+import TrialBadge from './TrialBadge.astro';
 
 const { showNestedSideBar = true } = Astro.props;
 
@@ -27,7 +22,16 @@ const logo = {
   text: catalog?.logo?.text || 'EventCatalog',
 };
 
-const repositoryUrl = catalog?.repositoryUrl || 'https://github.com/event-catalog/eventcatalog';
+const repositoryUrl = catalog?.repositoryUrl;
+
+// Header icons match the theme toggle: a 20px icon in a padded button, coloured with the theme's icon colour
+const headerIconLinkClass =
+  'block p-2 rounded-md text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-icon-hover))] hover:bg-[rgb(var(--ec-dropdown-hover))] transition-colors';
+const headerIconClass = 'block h-5 w-5 bg-current';
+const iconMask = (name: string) => {
+  const url = buildUrl(`/icons/${name}.svg`, true);
+  return `mask: url("${url}") center / contain no-repeat; -webkit-mask: url("${url}") center / contain no-repeat;`;
+};
 
 const user = session?.user as { name?: string; email?: string; image?: string; provider?: string } | undefined;
 const userName = user?.name || user?.email || 'User';
@@ -70,7 +74,8 @@ const providerName = user?.provider ? providerNames[user.provider] || user.provi
       <div class="hidden md:block shrink-0 ml-auto">
         {
           session ? (
-            <div class="flex items-center space-x-4 justify-end pr-2">
+            <div class="flex items-center gap-3 justify-end pr-2">
+              <TrialBadge />
               {catalog.environments && catalog.environments.length > 0 && (
                 <EnvironmentDropdown environments={catalog.environments} client:idle />
               )}
@@ -168,7 +173,8 @@ const providerName = user?.provider ? providerNames[user.provider] || user.provi
             </div>
           ) : (
             <>
-              <div class="flex items-center space-x-4 justify-end pr-2">
+              <div class="flex items-center gap-3 justify-end pr-2">
+                <TrialBadge />
                 {catalog.environments && catalog.environments.length > 0 && (
                   <EnvironmentDropdown environments={catalog.environments} client:idle />
                 )}
@@ -180,57 +186,36 @@ const providerName = user?.provider ? providerNames[user.provider] || user.provi
                     Sign In
                   </button>
                 )}
-                <ThemeToggle client:idle />
-                {showEventCatalogBranding() && (
-                  <ul class="flex space-x-4">
-                    <li>
-                      <a
-                        href="https://discord.com/invite/3rjaZMmrAm"
-                        class="block p-1.5 rounded-lg hover:bg-[rgb(var(--ec-dropdown-hover))] transition-colors"
-                        aria-label="Join our Discord community"
-                      >
-                        <img
-                          src={buildUrl('/icons/discord.svg', true)}
-                          alt=""
-                          class="h-6 w-6 hover:opacity-100 transition-opacity ec-themed-icon"
-                          aria-hidden="true"
-                        />
-                      </a>
-                    </li>
-                    <li>
-                      <a
-                        href="https://github.com/event-catalog/eventcatalog"
-                        class="block p-1.5 rounded-lg hover:bg-[rgb(var(--ec-dropdown-hover))] transition-colors"
-                        aria-label="View EventCatalog on GitHub"
-                      >
-                        <img
-                          src={buildUrl('/icons/github.svg', true)}
-                          alt=""
-                          class="h-6 w-6 hover:opacity-100 transition-opacity ec-themed-icon"
-                          aria-hidden="true"
-                        />
-                      </a>
-                    </li>
-                  </ul>
-                )}
-                {showCustomBranding() && !showEventCatalogBranding() && (
-                  <ul class="flex space-x-4">
+                <ul class="flex items-center gap-1">
+                  <li>
+                    <ThemeToggle client:idle />
+                  </li>
+                  {repositoryUrl && (
                     <li>
-                      <a
-                        href={repositoryUrl}
-                        class="block p-1.5 rounded-lg hover:bg-[rgb(var(--ec-dropdown-hover))] transition-colors focus:outline-hidden"
-                        aria-label="View repository on GitHub"
-                      >
-                        <img
-                          src={buildUrl('/icons/github.svg', true)}
-                          alt=""
-                          class="h-6 w-6 opacity-70 hover:opacity-100 transition-opacity ec-themed-icon"
-                          aria-hidden="true"
-                        />
+                      <a href={repositoryUrl} class={headerIconLinkClass} aria-label="View repository on GitHub">
+                        <span class={headerIconClass} style={iconMask('github')} aria-hidden="true" />
                       </a>
                     </li>
-                  </ul>
-                )}
+                  )}
+                  <li>
+                    <a
+                      href="https://discord.com/invite/3rjaZMmrAm"
+                      class={headerIconLinkClass}
+                      aria-label="Join our Discord community"
+                    >
+                      <span class={headerIconClass} style={iconMask('discord')} aria-hidden="true" />
+                    </a>
+                  </li>
+                  <li>
+                    <a
+                      href="https://github.com/event-catalog/eventcatalog"
+                      class={headerIconLinkClass}
+                      aria-label="View EventCatalog on GitHub"
+                    >
+                      <span class={headerIconClass} style={iconMask('github')} aria-hidden="true" />
+                    </a>
+                  </li>
+                </ul>
               </div>
             </>
           )

package/eventcatalog/src/components/Lists/PillListFlat.styles.css

@@ -1,20 +1,20 @@
 .tooltip {
-    visibility: hidden;
-    position: absolute;
-  }
-  .has-tooltip:hover .tooltip {
-    visibility: visible;
-    z-index: 100;
-  }
+  visibility: hidden;
+  position: absolute;
+}
+.has-tooltip:hover .tooltip {
+  visibility: visible;
+  z-index: 100;
+}
 
-  .pill-item:hover {
-    background: linear-gradient(to left, rgb(var(--ec-accent-gradient-from)), rgb(var(--ec-accent-gradient-to)));
-    color: white;
-    font-weight: normal;
-  }
+.pill-item:hover {
+  background: linear-gradient(to left, rgb(var(--ec-accent-gradient-from)), rgb(var(--ec-accent-gradient-to)));
+  color: white;
+  font-weight: normal;
+}
 
-  .owner-item:hover {
-    background: linear-gradient(to left, rgb(var(--ec-accent-gradient-from)), rgb(var(--ec-accent-gradient-to)));
-    color: white;
-    font-weight: normal;
-  }
+.owner-item:hover {
+  background: linear-gradient(to left, rgb(var(--ec-accent-gradient-from)), rgb(var(--ec-accent-gradient-to)));
+  color: white;
+  font-weight: normal;
+}