@redacto.io/consent-sdk-react 6.0.0 → 7.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redacto.io/consent-sdk-react",
-  "version": "6.0.0",
+  "version": "7.0.0",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",

package/src/RedactoPrivacyCenter/PrivacyCenterLayout.tsx

@@ -1,6 +1,5 @@
 import { useEffect, useState, useRef, type ReactNode } from 'react';
 import { OrganizationProvider } from './context/OrganizationContext';
-import { ThemeProvider } from './context/theme';
 import type { OrganizationDetail } from './lib/types';
 import {
   checkAndRefreshAuth,
@@ -14,12 +13,11 @@ import PrivacyCenterLayoutComponent from './components/PrivacyCenterLayout';
 
 interface PrivacyCenterLayoutProps {
   children: ReactNode;
-  defaultTheme?: 'light' | 'dark';
   slug: string;
   onBack?: 'back' | 'signout';
 }
 
-export function PrivacyCenterLayout({ children, defaultTheme, slug, onBack }: PrivacyCenterLayoutProps) {
+export function PrivacyCenterLayout({ children, slug, onBack }: PrivacyCenterLayoutProps) {
   const { consentClient } = useBaseUrl();
   // Read accessToken from AuthContext so this effect re-runs after AuthProvider
   // syncs JWT data to sessionStorage (fixes race condition where child effects
@@ -162,12 +160,10 @@ export function PrivacyCenterLayout({ children, defaultTheme, slug, onBack }: Pr
   }
 
   return (
-    <ThemeProvider defaultTheme={defaultTheme}>
-      <OrganizationProvider organization={organization}>
-        <PrivacyCenterLayoutComponent onBack={onBack}>
-          {children}
-        </PrivacyCenterLayoutComponent>
-      </OrganizationProvider>
-    </ThemeProvider>
+    <OrganizationProvider organization={organization}>
+      <PrivacyCenterLayoutComponent onBack={onBack}>
+        {children}
+      </PrivacyCenterLayoutComponent>
+    </OrganizationProvider>
   );
 }

package/src/RedactoPrivacyCenter/RedactoPrivacyCenter.tsx

@@ -7,6 +7,7 @@ import { AuthProvider } from './context/AuthContext';
 import { NavigationProvider } from './context/NavigationContext';
 import type { InternalPage } from './context/NavigationContext';
 import { PageChromeProvider } from './context/PageChromeContext';
+import { BrandingProvider } from './context/BrandingContext';
 import { injectPCStyles } from './styles/injectStyles';
 
 // Inject Privacy Center CSS styles on module load
@@ -15,7 +16,6 @@ injectPCStyles();
 interface RedactoPrivacyCenterProps {
   baseUrl: string; // Consent server base URL
   slug: string;
-  theme?: 'light' | 'dark';
   accessToken: string;
   refreshToken: string;
   onError: (error: Error) => boolean;
@@ -26,7 +26,6 @@ interface RedactoPrivacyCenterProps {
 export function RedactoPrivacyCenter({
   baseUrl,
   slug,
-  theme = 'light',
   accessToken,
   refreshToken,
   onError,
@@ -35,21 +34,23 @@ export function RedactoPrivacyCenter({
 }: RedactoPrivacyCenterProps) {
   return (
     <I18nextProvider i18n={i18n}>
-      <BaseUrlProvider baseUrl={baseUrl}>
-        <AuthProvider
-          accessToken={accessToken}
-          refreshToken={refreshToken}
-          onError={onError}
-        >
-          <NavigationProvider initialPage={initialPage}>
-            <PageChromeProvider>
-              <PrivacyCenterLayout defaultTheme={theme} slug={slug} onBack={onBack}>
-                <PrivacyCenterHomePage />
-              </PrivacyCenterLayout>
-            </PageChromeProvider>
-          </NavigationProvider>
-        </AuthProvider>
-      </BaseUrlProvider>
+      <BrandingProvider slug={slug}>
+        <BaseUrlProvider baseUrl={baseUrl}>
+          <AuthProvider
+            accessToken={accessToken}
+            refreshToken={refreshToken}
+            onError={onError}
+          >
+            <NavigationProvider initialPage={initialPage}>
+              <PageChromeProvider>
+                <PrivacyCenterLayout slug={slug} onBack={onBack}>
+                  <PrivacyCenterHomePage />
+                </PrivacyCenterLayout>
+              </PageChromeProvider>
+            </NavigationProvider>
+          </AuthProvider>
+        </BaseUrlProvider>
+      </BrandingProvider>
     </I18nextProvider>
   );
 }

package/src/RedactoPrivacyCenter/api/orgBranding.ts

@@ -0,0 +1,9 @@
+import { apiFetch } from './fetcher';
+import type { OrgBrandingDetail } from '../lib/types';
+
+const USER_SERVER_BASE_URL = 'https://api.redacto.tech/user/api/0';
+
+export async function fetchOrgBranding(slug: string): Promise<OrgBrandingDetail> {
+  const url = `${USER_SERVER_BASE_URL}/public/org-branding/by-slug/${encodeURIComponent(slug)}`;
+  return apiFetch<OrgBrandingDetail>(url, { method: 'GET' });
+}

package/src/RedactoPrivacyCenter/components/ConsentManager.tsx

@@ -447,12 +447,17 @@ export default function ConsentManager({ variant }: ConsentManagerProps) {
       );
       setConsentRows(filteredRows);
 
-      // Extract unique products from all groups
-      const combinedGroups = [
-        ...(response.direct || []),
-        ...(response.nominated || []),
-      ];
-      setProductOptions(buildProductOptionsFromGroups(combinedGroups));
+      // Only refresh the product filter options from an unfiltered fetch.
+      // When a product filter is active the API returns rows for that one
+      // product, so re-deriving options here would shrink the dropdown to
+      // just the selected product (forcing the user to refresh to recover).
+      if (!productFilter) {
+        const combinedGroups = [
+          ...(response.direct || []),
+          ...(response.nominated || []),
+        ];
+        setProductOptions(buildProductOptionsFromGroups(combinedGroups));
+      }
     } catch (error) {
       console.error(error);
       setConsentDetail(null);
@@ -1122,14 +1127,11 @@ export default function ConsentManager({ variant }: ConsentManagerProps) {
           </>
         )}
 
-        {/* Always show pagination, even during loading */}
-        <div className="pc-consent-pagination-wrap">
-          {viewMode === 'product' ? (
+        {viewMode === 'product' && (
+          <div className="pc-consent-pagination-wrap">
             <AdvancedTablePagination table={productTable} />
-          ) : (
-            <AdvancedTablePagination table={purposeTable} />
-          )}
-        </div>
+          </div>
+        )}
       </div>
 
       <PCModal
@@ -1153,7 +1155,7 @@ export default function ConsentManager({ variant }: ConsentManagerProps) {
         }
         footer={
           <div className="pc-modal-footer-actions">
-            <PCButton variant="outline" onClick={() => setExportModal(false)}>
+            <PCButton variant="secondary" onClick={() => setExportModal(false)}>
               {t('cancel')}
             </PCButton>
             <PCButton variant="primary" onClick={handleExport}>

package/src/RedactoPrivacyCenter/components/Form.tsx

@@ -1483,11 +1483,11 @@ export default function Form({
                     className="pc-flex-responsive pc-spacing-responsive"
                   >
                     {isPopup ? (
-                      <PCButton variant="outline" onClick={onClose} style={{ flexShrink: 0 }}>
+                      <PCButton variant="secondary" onClick={onClose} style={{ flexShrink: 0 }}>
                         {t('cancel') ?? 'Cancel'}
                       </PCButton>
                     ) : (
-                      <PCButton variant="outline" style={{ flexShrink: 0 }}>
+                      <PCButton variant="secondary" style={{ flexShrink: 0 }}>
                         {t('saveDraft')}
                       </PCButton>
                     )}
@@ -1523,7 +1523,7 @@ export default function Form({
         footer={
           <div className="pc-erasure-modal-footer">
             <PCButton
-              variant="outline"
+              variant="secondary"
               onClick={() => handleErasureModalChoice(false)}
               disabled={isLoading}
             >

package/src/RedactoPrivacyCenter/components/ModifyConsentModal.tsx

@@ -300,7 +300,7 @@ export const ModifyConsentModal = ({
               ...pcStyles.gapSm,
               ...pcStyles.justifyEnd,
             }}>
-              <PCButton variant="outline" onClick={onClose}>
+              <PCButton variant="secondary" onClick={onClose}>
                 {t('cancel')}
               </PCButton>
               <PCButton

package/src/RedactoPrivacyCenter/components/PrivacyCenterLayout.tsx

@@ -1,8 +1,6 @@
 import { Suspense, useState, useEffect, useCallback } from 'react';
 import SideBarPC from './SideMenuBarPC/SideBarPC';
 import Footer from '../ui/Footer';
-import ThemeToggle from '../ui/ThemeToggle';
-import ThemeTransitionOverlay from './ThemeTransitionOverlay';
 import { PCSelect } from '../ui';
 import { useTranslation } from 'react-i18next';
 import { PAGE_CHROME_BY_PAGE, languageOptions } from '../lib/constants';
@@ -42,7 +40,6 @@ export default function PrivacyCenterLayout({
   return (
     <LocaleContext.Provider value={{ locale, setLocale }}>
       <Suspense fallback={<div style={{ ...pcStyles.flex, ...pcStyles.itemsCenter, ...pcStyles.justifyCenter, minHeight: '100vh' }}>{t('loadingEllipsis')}</div>}>
-        <ThemeTransitionOverlay />
         <main
           className="pc-root"
           style={{
@@ -188,7 +185,6 @@ export default function PrivacyCenterLayout({
                   onChange={handleLanguageChange}
                 />
                 <NotificationBell />
-                <ThemeToggle className="pc-navbar-icon-btn" />
               </div>
             </nav>
             <div style={{

package/src/RedactoPrivacyCenter/components/SideMenuBarPC/SideBarPC.tsx

@@ -18,6 +18,7 @@ const getVar = (varName: string): string => `var(${varName})`;
 import { SideMenuPC } from './SideMenuPC';
 import { useMenuItemsPC } from '../../lib/constants';
 import { useOrganization } from '../../context/OrganizationContext';
+import { useBranding } from '../../context/BrandingContext';
 import type { SideBarPCProps } from './types';
 import { signOutPrivacyCenter } from '../../lib/utils';
 
@@ -34,6 +35,7 @@ export default function SideBarPC({
   const [email, setEmail] = useState<string>('');
   // const [isSigningOut, setIsSigningOut] = useState(false);
   const { organization } = useOrganization();
+  const branding = useBranding();
 
   useEffect(() => {
     setEmail(sessionStorage.getItem('email') || '');
@@ -109,6 +111,8 @@ export default function SideBarPC({
   }, [isMobileOpen]);
 
   const organizationName = organization?.name || '';
+  const displayName = branding?.brand_name || organizationName;
+  const isExpanded = isMobileOpen || !isCollapsed;
 
   const sidebarClassName = useMemo(
     () =>
@@ -325,7 +329,17 @@ export default function SideBarPC({
               transition: 'transform 0.3s ease',
               willChange: 'transform',
             }}>
-              <PCAvatar name={organizationName} color="info" size="md" />
+              {isExpanded && branding?.logo_url ? (
+                <img
+                  src={branding.logo_url}
+                  alt={displayName}
+                  style={{ height: '32px', width: 'auto', maxWidth: '160px', objectFit: 'contain', display: 'block' }}
+                />
+              ) : branding?.icon_url ? (
+                <PCAvatar src={branding.icon_url} name={displayName} color="info" size="md" />
+              ) : (
+                <PCAvatar name={displayName} color="info" size="md" />
+              )}
             </div>
             <div style={headerTextStyle}>
               <PCText style={{
@@ -337,7 +351,7 @@ export default function SideBarPC({
                 transition: 'opacity 0.3s ease, transform 0.3s ease',
                 willChange: 'opacity, transform',
               }}>
-                {organizationName}
+                {displayName}
               </PCText>
             </div>
           </div>

package/src/RedactoPrivacyCenter/context/BrandingContext.tsx

@@ -0,0 +1,44 @@
+import { createContext, useContext, useEffect, useState, type ReactNode } from 'react';
+import { fetchOrgBranding } from '../api/orgBranding';
+import { applyBrandingTheme, clearBrandingTheme } from '../styles/applyBrandingTheme';
+import type { OrgBrandingDetail } from '../lib/types';
+
+type BrandingContextValue = { branding: OrgBrandingDetail | null };
+
+const BrandingContext = createContext<BrandingContextValue | null>(null);
+
+export const BrandingProvider = ({ children, slug }: { children: ReactNode; slug: string }) => {
+  const [branding, setBranding] = useState<OrgBrandingDetail | null>(null);
+
+  useEffect(() => {
+    if (!slug) return;
+    let cancelled = false;
+    fetchOrgBranding(slug)
+      .then((data) => {
+        if (!cancelled) setBranding(data);
+      })
+      .catch((error) => {
+        console.warn('[RedactoPrivacyCenter] org branding fetch failed:', error);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [slug]);
+
+  useEffect(() => {
+    if (!branding) return;
+    applyBrandingTheme(branding.theme);
+    return clearBrandingTheme;
+  }, [branding]);
+
+  return (
+    <BrandingContext.Provider value={{ branding }}>
+      {children}
+    </BrandingContext.Provider>
+  );
+};
+
+export const useBranding = (): OrgBrandingDetail | null => {
+  const ctx = useContext(BrandingContext);
+  return ctx?.branding ?? null;
+};

package/src/RedactoPrivacyCenter/lib/types.ts

@@ -27,6 +27,28 @@ export type OrganizationResponse = {
   detail: OrganizationDetail;
 };
 
+export type OrgBrandingTheme = {
+  primary: string;
+  secondary: string;
+  primary_contrast: string;
+  link: string;
+  surface: string;
+  text: string;
+  text_muted: string;
+  border: string;
+  success: string;
+  warning: string;
+  danger: string;
+};
+
+export type OrgBrandingDetail = {
+  logo_url: string | null;
+  icon_url: string | null;
+  brand_name: string;
+  theme: OrgBrandingTheme;
+  hide_platform_branding: boolean;
+};
+
 export type DataElement = {
   uuid: string;
   name: string;

package/src/RedactoPrivacyCenter/styles/applyBrandingTheme.ts

@@ -0,0 +1,66 @@
+import type { OrgBrandingTheme } from '../lib/types';
+
+const OVERRIDDEN_VARS = [
+  '--pc-primary',
+  '--pc-primary-hover',
+  '--pc-primary-active',
+  '--pc-info',
+  '--pc-border-color-focus',
+  '--pc-secondary',
+  '--pc-secondary-hover',
+  '--pc-text-inverse',
+  '--pc-bg-shell',
+  '--pc-bg-primary',
+  '--pc-text-primary',
+  '--pc-text-secondary',
+  '--pc-border-color',
+  '--pc-success',
+  '--pc-warning',
+  '--pc-error',
+] as const;
+
+function darken(hex: string, amount: number): string {
+  const h = hex.replace('#', '').trim();
+  if (h.length !== 6) return hex;
+  const num = parseInt(h, 16);
+  if (Number.isNaN(num)) return hex;
+  const r = Math.max(0, ((num >> 16) & 0xff) - Math.round(255 * amount));
+  const g = Math.max(0, ((num >> 8) & 0xff) - Math.round(255 * amount));
+  const b = Math.max(0, (num & 0xff) - Math.round(255 * amount));
+  return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, '0')}`;
+}
+
+export function applyBrandingTheme(theme: OrgBrandingTheme): void {
+  if (typeof document === 'undefined') return;
+  const root = document.documentElement;
+  const set = (prop: string, value: string) => root.style.setProperty(prop, value);
+
+  set('--pc-primary', theme.primary);
+  set('--pc-primary-hover', darken(theme.primary, 0.08));
+  set('--pc-primary-active', darken(theme.primary, 0.16));
+  set('--pc-info', theme.primary);
+  set('--pc-border-color-focus', theme.primary);
+
+  set('--pc-secondary', theme.secondary);
+  set('--pc-secondary-hover', darken(theme.secondary, 0.08));
+
+  set('--pc-text-inverse', theme.primary_contrast);
+
+  set('--pc-bg-shell', theme.surface);
+  set('--pc-bg-primary', theme.surface);
+
+  set('--pc-text-primary', theme.text);
+  set('--pc-text-secondary', theme.text_muted);
+
+  set('--pc-border-color', theme.border);
+
+  set('--pc-success', theme.success);
+  set('--pc-warning', theme.warning);
+  set('--pc-error', theme.danger);
+}
+
+export function clearBrandingTheme(): void {
+  if (typeof document === 'undefined') return;
+  const root = document.documentElement;
+  for (const prop of OVERRIDDEN_VARS) root.style.removeProperty(prop);
+}

package/src/RedactoPrivacyCenter/styles/injectStyles.ts

@@ -32,7 +32,7 @@ export const injectPCStyles = () => {
     // CSS variables will be injected via a separate import or inline
     // For now, we'll rely on the host app or inject them here
     variablesStyle.textContent = `
-      :root, [data-theme="light"] {
+      :root {
         --pc-primary: #3b82f6;
         --pc-primary-hover: #2563eb;
         --pc-primary-active: #1d4ed8;
@@ -107,39 +107,6 @@ export const injectPCStyles = () => {
         --pc-sidebar-expanded-width: 300px;
         --pc-sidebar-expanded-width-2xl: 320px;
       }
-      [data-theme="dark"] {
-        --pc-primary: #60a5fa;
-        --pc-primary-hover: #3b82f6;
-        --pc-primary-active: #2563eb;
-        --pc-secondary: #9ca3af;
-        --pc-secondary-hover: #6b7280;
-        --pc-success: #34d399;
-        --pc-error: #f87171;
-        --pc-warning: #fbbf24;
-        --pc-warning-bg: #78350f;
-        --pc-warning-border: #fbbf24;
-        --pc-warning-text: #fef3c7;
-        --pc-info: #60a5fa;
-        --pc-bg-shell: #111827;
-        --pc-bg-primary: #1b2435;
-        --pc-bg-secondary: #243044;
-        --pc-bg-tertiary: #31405a;
-        --pc-bg-hover: #243044;
-        --pc-bg-active: #31405a;
-        --pc-bg-overlay: rgba(0, 0, 0, 0.7);
-        --pc-text-primary: #f9fafb;
-        --pc-text-secondary: #d1d5db;
-        --pc-text-tertiary: #9ca3af;
-        --pc-text-inverse: #111827;
-        --pc-text-disabled: #6b7280;
-        --pc-border-color: rgba(148, 163, 184, 0.18);
-        --pc-border-color-hover: rgba(148, 163, 184, 0.28);
-        --pc-border-color-focus: #60a5fa;
-        --pc-sidebar-shadow: 14px 0 36px rgba(2, 6, 23, 0.42), 1px 0 0 rgba(148, 163, 184, 0.08);
-        --pc-icon-filter: 1;
-        --pc-consent-toolbar-control-height: 2rem;
-        --pc-navbar-actions-control-height: var(--pc-consent-toolbar-control-height);
-      }
     `;
     document.head.appendChild(variablesStyle);
   }
@@ -170,82 +137,6 @@ export const injectPCStyles = () => {
       transition: none !important;
     }
     
-    /* Sun and Moon Rising Animation */
-    @keyframes pc-sun-moon-rise {
-      0% {
-        bottom: -150px;
-        opacity: 0;
-        transform: translateX(-50%) scale(0.5) rotate(-10deg);
-      }
-      15% {
-        opacity: 1;
-        transform: translateX(-50%) scale(1) rotate(0deg);
-      }
-      70% {
-        opacity: 1;
-        transform: translateX(-50%) scale(1.1) rotate(5deg);
-      }
-      100% {
-        bottom: calc(100vh + 50px);
-        opacity: 0;
-        transform: translateX(-50%) scale(0.7) rotate(10deg);
-      }
-    }
-    
-    /* Sun specific glow animation */
-    @keyframes pc-sun-glow {
-      0%, 100% {
-        filter: drop-shadow(0 0 30px rgba(251, 191, 36, 0.7)) 
-                drop-shadow(0 0 60px rgba(251, 191, 36, 0.4));
-      }
-      50% {
-        filter: drop-shadow(0 0 50px rgba(251, 191, 36, 0.9)) 
-                drop-shadow(0 0 100px rgba(251, 191, 36, 0.6));
-      }
-    }
-    
-    /* Moon specific glow animation */
-    @keyframes pc-moon-glow {
-      0%, 100% {
-        filter: drop-shadow(0 0 30px rgba(224, 231, 255, 0.7)) 
-                drop-shadow(0 0 60px rgba(224, 231, 255, 0.4));
-      }
-      50% {
-        filter: drop-shadow(0 0 50px rgba(224, 231, 255, 0.9)) 
-                drop-shadow(0 0 100px rgba(224, 231, 255, 0.6));
-      }
-    }
-    
-    .pc-theme-transition-overlay {
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      pointer-events: none;
-      z-index: 9999;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      opacity: 0;
-      will-change: opacity;
-      overflow: hidden;
-    }
-    
-    .pc-theme-transition-icon {
-      will-change: transform, opacity, bottom, filter;
-    }
-    
-    .pc-theme-transition-light {
-      animation: pc-sun-moon-rise 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards,
-                 pc-sun-glow 1s ease-in-out;
-    }
-    
-    .pc-theme-transition-dark {
-      animation: pc-sun-moon-rise 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards,
-                 pc-moon-glow 1s ease-in-out;
-    }
-    
     /* Keyframe Animations */
     @keyframes pc-spin {
       0% {
@@ -365,7 +256,8 @@ export const injectPCStyles = () => {
     }
 
     .pc-button-secondary:hover:not(:disabled) {
-      background-color: var(--pc-secondary-hover) !important;
+      background-color: var(--pc-primary) !important;
+      color: var(--pc-text-inverse) !important;
     }
 
     .pc-button-outline:hover:not(:disabled) {

package/src/RedactoPrivacyCenter/styles/pcStyles.ts

@@ -204,8 +204,9 @@ export const pcStyles = {
     backgroundColor: getVar('--pc-primary-hover'),
   },
   buttonSecondary: {
-    backgroundColor: getVar('--pc-secondary'),
-    color: getVar('--pc-text-inverse'),
+    backgroundColor: 'transparent',
+    color: getVar('--pc-primary'),
+    border: `1px solid ${getVar('--pc-primary')}`,
   },
   buttonOutline: {
     backgroundColor: 'transparent',

package/src/RedactoPrivacyCenter/styles/variables.css

@@ -1,8 +1,7 @@
 /* CSS Custom Properties for Privacy Center SDK */
 /* These variables are scoped and won't conflict with host app styles */
 
-:root,
-[data-theme="light"] {
+:root {
   /* Colors */
   --pc-primary: #3b82f6;
   --pc-primary-hover: #2563eb;
@@ -95,44 +94,3 @@
   /* Header: language, notifications, theme (same pixel row as compact controls) */
   --pc-navbar-actions-control-height: var(--pc-consent-toolbar-control-height);
 }
-
-[data-theme="dark"] {
-  /* Colors */
-  --pc-primary: #60a5fa;
-  --pc-primary-hover: #3b82f6;
-  --pc-primary-active: #2563eb;
-  --pc-secondary: #9ca3af;
-  --pc-secondary-hover: #6b7280;
-  --pc-success: #34d399;
-  --pc-error: #f87171;
-  --pc-warning: #fbbf24;
-  --pc-warning-bg: #78350f;
-  --pc-warning-border: #fbbf24;
-  --pc-warning-text: #fef3c7;
-  --pc-info: #60a5fa;
-
-  /* Backgrounds */
-  --pc-bg-shell: #111827;
-  --pc-bg-primary: #1b2435;
-  --pc-bg-secondary: #243044;
-  --pc-bg-tertiary: #31405a;
-  --pc-bg-hover: #243044;
-  --pc-bg-active: #31405a;
-  --pc-bg-overlay: rgba(0, 0, 0, 0.7);
-
-  /* Text */
-  --pc-text-primary: #f9fafb;
-  --pc-text-secondary: #d1d5db;
-  --pc-text-tertiary: #9ca3af;
-  --pc-text-inverse: #111827;
-  --pc-text-disabled: #6b7280;
-
-  /* Borders */
-  --pc-border-color: rgba(148, 163, 184, 0.18);
-  --pc-border-color-hover: rgba(148, 163, 184, 0.28);
-  --pc-border-color-focus: #60a5fa;
-  --pc-sidebar-shadow: 14px 0 36px rgba(2, 6, 23, 0.42), 1px 0 0 rgba(148, 163, 184, 0.08);
-  
-  /* Icon filters for dark theme */
-  --pc-icon-filter: 1;
-}

package/src/RedactoPrivacyCenter/ui/Footer.tsx

@@ -1,13 +1,15 @@
 import { useTranslation } from 'react-i18next';
 import { pcStyles } from '../styles/pcStyles';
 import PoweredByRedacto from '../assets/poweredByRedacto.svg';
-import { useTheme } from '../context/theme';
+import { useBranding } from '../context/BrandingContext';
 
 const getVar = (varName: string): string => `var(${varName})`;
 
 export default function Footer() {
   const { t } = useTranslation();
-  const { theme } = useTheme();
+  const branding = useBranding();
+
+  if (branding?.hide_platform_branding) return null;
 
   return (
     <footer
@@ -46,15 +48,7 @@ export default function Footer() {
             alignItems: 'center',
             justifyContent: 'center',
             minHeight: '1.75rem',
-            padding:
-              theme === 'dark' ? '0.25rem 0.5rem' : 0,
-            backgroundColor:
-              theme === 'dark' ? 'rgba(255, 255, 255, 0.92)' : 'transparent',
             borderRadius: '9999px',
-            boxShadow:
-              theme === 'dark'
-                ? '0 8px 18px rgba(2, 6, 23, 0.28)'
-                : 'none',
           }}
         >
           <img