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

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;
@@ -100,42 +100,13 @@ export const injectPCStyles = () => {
         --pc-z-popover: 1060;
         --pc-z-tooltip: 1070;
         --pc-icon-filter: 0;
+        --pc-consent-toolbar-control-height: 2rem;
+        --pc-navbar-actions-control-height: var(--pc-consent-toolbar-control-height);
         --pc-sidebar-mobile-width: 280px;
         --pc-sidebar-collapsed-width: 80px;
         --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;
-      }
     `;
     document.head.appendChild(variablesStyle);
   }
@@ -166,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% {
@@ -361,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) {
@@ -970,6 +866,516 @@ export const injectPCStyles = () => {
       }
     }
 
+    .pc-navbar-actions {
+      align-items: center !important;
+    }
+    .pc-navbar-language-select {
+      width: auto !important;
+      min-width: 120px !important;
+      max-width: min(65vw, 320px) !important;
+    }
+    .pc-navbar-language-select .pc-select {
+      box-sizing: border-box !important;
+      height: var(--pc-navbar-actions-control-height, var(--pc-consent-toolbar-control-height, 2rem)) !important;
+      min-height: var(--pc-navbar-actions-control-height, var(--pc-consent-toolbar-control-height, 2rem)) !important;
+      max-height: var(--pc-navbar-actions-control-height, var(--pc-consent-toolbar-control-height, 2rem)) !important;
+      padding: 0 0.625rem !important;
+      border-color: var(--pc-border-color) !important;
+      border-radius: 0.5rem !important;
+      background-color: var(--pc-bg-primary) !important;
+      box-shadow: none !important;
+      font-size: 0.8125rem !important;
+      line-height: 1 !important;
+    }
+    .pc-navbar-language-select .pc-select > span:nth-child(2) {
+      line-height: 1.25 !important;
+    }
+    .pc-navbar-language-select .pc-select svg {
+      width: 12px;
+      height: 12px;
+    }
+    .pc-navbar-icon-btn {
+      box-sizing: border-box !important;
+      width: var(--pc-navbar-actions-control-height, var(--pc-consent-toolbar-control-height, 2rem)) !important;
+      height: var(--pc-navbar-actions-control-height, var(--pc-consent-toolbar-control-height, 2rem)) !important;
+      min-width: var(--pc-navbar-actions-control-height, var(--pc-consent-toolbar-control-height, 2rem)) !important;
+      min-height: var(--pc-navbar-actions-control-height, var(--pc-consent-toolbar-control-height, 2rem)) !important;
+      border: 1px solid var(--pc-border-color) !important;
+      border-radius: 0.5rem !important;
+      background-color: var(--pc-bg-primary) !important;
+      color: var(--pc-text-primary) !important;
+      padding: 0 !important;
+    }
+    .pc-navbar-icon-btn:hover:not(:disabled) {
+      background-color: var(--pc-bg-hover) !important;
+      border-color: var(--pc-border-color-hover) !important;
+    }
+
+    /* Manage Consent specific shell + table polish */
+    .pc-consent-manager-surface {
+      width: 100%;
+      margin: 0;
+      padding-top: 0.25rem;
+    }
+    .pc-consent-shell-card .pc-consent-tabs-row {
+      align-items: center !important;
+      justify-content: space-between !important;
+      padding-top: 0.125rem !important;
+      padding-bottom: 0.375rem !important;
+    }
+    .pc-consent-shell-card .pc-consent-tabs-left {
+      display: flex !important;
+      align-items: center !important;
+      min-width: 0 !important;
+    }
+    .pc-consent-shell-card .pc-consent-view-toggle {
+      margin-left: auto !important;
+      display: flex !important;
+      align-items: center !important;
+      gap: 0.625rem !important;
+      padding-right: 0.5rem !important;
+      flex-shrink: 0 !important;
+      margin-bottom: 0.0625rem !important;
+    }
+    .pc-consent-shell-card .pc-consent-view-toggle-label {
+      white-space: nowrap !important;
+      font-size: 0.75rem !important;
+      color: var(--pc-text-secondary) !important;
+    }
+    .pc-consent-shell-card .pc-consent-view-toggle-group {
+      box-shadow: none !important;
+      border: 1px solid var(--pc-border-color) !important;
+      background-color: var(--pc-bg-secondary) !important;
+    }
+    .pc-consent-shell-card .pc-consent-view-toggle-btn {
+      color: var(--pc-text-secondary);
+    }
+    .pc-consent-shell-card .pc-consent-view-toggle-btn:hover:not(.is-active) {
+      background-color: var(--pc-bg-hover) !important;
+      color: var(--pc-text-primary) !important;
+    }
+    .pc-consent-shell-card .pc-consent-view-toggle-btn.is-active {
+      background-color: var(--pc-primary) !important;
+      color: var(--pc-text-inverse) !important;
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) !important;
+    }
+    .pc-consent-shell-card .pc-filters-responsive {
+      gap: 0.75rem !important;
+    }
+    @media (min-width: 768px) {
+      .pc-consent-shell-card .pc-filters-responsive {
+        align-items: center !important;
+      }
+    }
+    .pc-consent-shell-card .pc-search-responsive {
+      max-width: none !important;
+    }
+    .pc-consent-shell-card .pc-search-responsive > div {
+      width: 100% !important;
+    }
+    .pc-consent-shell-card .pc-search-responsive [style*="border"] {
+      border-color: var(--pc-border-color) !important;
+      box-shadow: none !important;
+    }
+    .pc-consent-shell-card .pc-search-responsive .pc-input-affix {
+      box-sizing: border-box !important;
+      height: var(--pc-consent-toolbar-control-height, 2rem) !important;
+      min-height: var(--pc-consent-toolbar-control-height, 2rem) !important;
+      max-height: var(--pc-consent-toolbar-control-height, 2rem) !important;
+      align-items: stretch !important;
+    }
+    .pc-consent-shell-card .pc-search-responsive .pc-input-affix > span:first-of-type,
+    .pc-consent-shell-card .pc-search-responsive .pc-input-affix > button {
+      align-self: center !important;
+    }
+    .pc-consent-shell-card .pc-search-responsive .pc-input {
+      box-sizing: border-box !important;
+      height: 100% !important;
+      min-height: 0 !important;
+      max-height: none !important;
+      padding: 0.25rem 0.5rem !important;
+      line-height: 1.25 !important;
+      font-size: 0.75rem !important;
+    }
+    .pc-consent-shell-card .pc-filter-select .pc-select {
+      box-sizing: border-box !important;
+      height: var(--pc-consent-toolbar-control-height, 2rem) !important;
+      min-height: var(--pc-consent-toolbar-control-height, 2rem) !important;
+      max-height: var(--pc-consent-toolbar-control-height, 2rem) !important;
+      padding: 0.25rem 0.5rem !important;
+      line-height: 1 !important;
+      font-size: 0.75rem !important;
+    }
+    .pc-consent-shell-card .pc-filter-select .pc-select > span:nth-child(2) {
+      line-height: 1.25 !important;
+    }
+    .pc-consent-shell-card .pc-filters-summary {
+      font-size: 0.6875rem !important;
+      color: var(--pc-text-secondary) !important;
+    }
+    .pc-consent-desktop-view {
+      display: block;
+    }
+    .pc-consent-mobile-view {
+      display: none;
+    }
+    .pc-consent-mobile-list {
+      display: flex;
+      flex-direction: column;
+      gap: 0.625rem;
+    }
+    .pc-consent-mobile-card {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+      border: 1px solid var(--pc-border-color);
+      border-radius: var(--pc-border-radius-lg);
+      background-color: var(--pc-bg-primary);
+      padding: 0.625rem 0.75rem;
+      box-shadow: none;
+    }
+    .pc-consent-mobile-card-header {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 0.5rem;
+      flex-wrap: wrap;
+    }
+    .pc-consent-mobile-product-head {
+      display: flex;
+      align-items: flex-start;
+      gap: 0.5rem;
+      min-width: 0;
+      flex: 1 1 180px;
+    }
+    .pc-consent-mobile-avatar {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      border-radius: 0.4375rem;
+      font-size: 0.6875rem;
+      font-weight: 700;
+      line-height: 1;
+      flex-shrink: 0;
+    }
+    .pc-consent-mobile-subtle-text {
+      margin: 0 !important;
+      margin-top: 0.125rem !important;
+      font-size: 0.6875rem !important;
+      line-height: 1.2 !important;
+      color: var(--pc-text-secondary) !important;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      word-break: break-word;
+    }
+    .pc-consent-mobile-chip-row {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.375rem;
+    }
+    .pc-consent-mobile-status-chip {
+      font-size: 0.65625rem !important;
+      font-weight: 600 !important;
+      padding: 0.125rem 0.4375rem !important;
+    }
+    .pc-consent-mobile-activity-row {
+      display: flex;
+      flex-direction: column;
+      gap: 0.125rem;
+      min-width: 0;
+    }
+    .pc-consent-mobile-meta-grid {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 0.5rem 0.625rem;
+    }
+    .pc-consent-mobile-meta-label {
+      margin: 0 !important;
+      margin-bottom: 0.1875rem !important;
+      font-size: 0.625rem !important;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      color: var(--pc-text-tertiary) !important;
+    }
+    .pc-consent-mobile-action-cell {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      justify-content: flex-end;
+    }
+    .pc-consent-mobile-expand-btn {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border: 1px solid var(--pc-border-color);
+      border-radius: var(--pc-border-radius-md);
+      background-color: var(--pc-bg-secondary);
+      color: var(--pc-text-primary);
+      font-size: 0.75rem;
+      font-weight: 600;
+      padding: 0.375rem 0.5rem;
+      cursor: pointer;
+    }
+    .pc-consent-mobile-purpose-list {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+      padding-top: 0.125rem;
+    }
+    .pc-consent-mobile-purpose-item {
+      border: 1px solid var(--pc-border-color);
+      border-radius: var(--pc-border-radius-md);
+      background-color: var(--pc-bg-secondary);
+      padding: 0.5rem;
+    }
+    .pc-consent-mobile-purpose-head {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 0.5rem;
+      margin-bottom: 0.375rem;
+    }
+    .pc-consent-mobile-empty {
+      border: 1px solid var(--pc-border-color);
+      border-radius: var(--pc-border-radius-lg);
+      background-color: var(--pc-bg-primary);
+      padding: 0.75rem;
+    }
+    .pc-consent-shell-card .pc-export-button-responsive {
+      display: inline-flex !important;
+      align-items: center !important;
+    }
+    .pc-consent-shell-card .pc-export-button-responsive button {
+      box-sizing: border-box !important;
+      height: var(--pc-consent-toolbar-control-height, 2rem) !important;
+      min-height: var(--pc-consent-toolbar-control-height, 2rem) !important;
+      max-height: var(--pc-consent-toolbar-control-height, 2rem) !important;
+      padding: 0 0.625rem !important;
+      line-height: 1 !important;
+      border-color: var(--pc-border-color) !important;
+      box-shadow: none !important;
+      font-size: 0.75rem !important;
+    }
+    .pc-consent-shell-card .pc-filters-row-responsive {
+      gap: 0.5rem !important;
+    }
+    @media (min-width: 768px) {
+      .pc-consent-shell-card .pc-search-responsive {
+        width: 310px !important;
+        min-width: 310px !important;
+        flex: 0 0 310px !important;
+      }
+      .pc-consent-shell-card .pc-filters-row-responsive {
+        align-items: center !important;
+        justify-content: flex-start !important;
+        margin-left: 0 !important;
+        flex: 1 1 auto !important;
+        width: auto !important;
+      }
+      .pc-consent-shell-card .pc-filter-select {
+        width: auto !important;
+        min-width: 0 !important;
+        flex: 0 0 auto !important;
+      }
+      .pc-consent-shell-card .pc-filter-select:first-child {
+        width: 128px !important;
+        min-width: 128px !important;
+      }
+      .pc-consent-shell-card .pc-filter-select:nth-child(2) {
+        width: 136px !important;
+        min-width: 136px !important;
+      }
+      .pc-consent-shell-card .pc-filters-summary {
+        margin-left: auto !important;
+      }
+    }
+    @media (max-width: 767px) {
+      .pc-consent-desktop-view {
+        display: none;
+      }
+      .pc-consent-mobile-view {
+        display: block;
+      }
+      .pc-consent-shell-card .pc-consent-tabs-row {
+        flex-wrap: wrap !important;
+        padding-bottom: 0.375rem !important;
+      }
+      .pc-consent-shell-card .pc-consent-view-toggle-label {
+        display: none !important;
+      }
+      .pc-consent-shell-card .pc-consent-view-toggle {
+        width: 100% !important;
+        justify-content: flex-end !important;
+        padding-right: 0 !important;
+        margin-bottom: 0 !important;
+      }
+      .pc-consent-shell-card .pc-filters-row-responsive {
+        width: 100% !important;
+      }
+      .pc-consent-shell-card .pc-filters-summary {
+        align-self: flex-start !important;
+      }
+      .pc-consent-pagination-wrap {
+        margin-top: 0.5rem;
+      }
+    }
+    @media (min-width: 768px) {
+      .pc-consent-desktop-view {
+        display: block;
+      }
+      .pc-consent-mobile-view {
+        display: none;
+      }
+    }
+    @media (max-width: 420px) {
+      .pc-consent-mobile-meta-grid {
+        grid-template-columns: 1fr;
+      }
+    }
+
+    .pc-consent-table-container {
+      border: 1px solid var(--pc-border-color) !important;
+      border-bottom: none !important;
+      border-radius: var(--pc-border-radius-lg) var(--pc-border-radius-lg) 0 0 !important;
+      box-shadow: none !important;
+      overflow: hidden !important;
+    }
+    .pc-consent-table {
+      table-layout: fixed;
+      width: 100%;
+    }
+    .pc-consent-table th:first-child,
+    .pc-consent-table td:first-child {
+      width: 32px !important;
+      min-width: 32px !important;
+      max-width: 32px !important;
+    }
+    .pc-consent-table th:nth-child(2),
+    .pc-consent-table td:nth-child(2) {
+      width: 38% !important;
+      min-width: 260px !important;
+    }
+    .pc-consent-table th:nth-child(3),
+    .pc-consent-table td:nth-child(3) {
+      width: 15% !important;
+      min-width: 120px !important;
+    }
+    .pc-consent-table th:nth-child(4),
+    .pc-consent-table td:nth-child(4) {
+      width: 20% !important;
+      min-width: 160px !important;
+    }
+    .pc-consent-table th:last-child,
+    .pc-consent-table td:last-child {
+      width: 27% !important;
+      min-width: 180px !important;
+    }
+    .pc-consent-table-purpose th:first-child,
+    .pc-consent-table-purpose td:first-child {
+      width: 28% !important;
+      min-width: 220px !important;
+      max-width: none !important;
+      text-align: left !important;
+      padding-left: 0.875rem !important;
+      padding-right: 0.875rem !important;
+    }
+    .pc-consent-table-purpose th:nth-child(2),
+    .pc-consent-table-purpose td:nth-child(2) {
+      width: 18% !important;
+      min-width: 140px !important;
+    }
+    .pc-consent-table-purpose th:nth-child(3),
+    .pc-consent-table-purpose td:nth-child(3) {
+      width: 14% !important;
+      min-width: 110px !important;
+    }
+    .pc-consent-table-purpose th:nth-child(4),
+    .pc-consent-table-purpose td:nth-child(4) {
+      width: 16% !important;
+      min-width: 140px !important;
+    }
+    .pc-consent-table-purpose th:nth-child(5),
+    .pc-consent-table-purpose td:nth-child(5) {
+      width: 14% !important;
+      min-width: 120px !important;
+    }
+    .pc-consent-table-purpose th:nth-child(6),
+    .pc-consent-table-purpose td:nth-child(6) {
+      width: 10% !important;
+      min-width: 90px !important;
+    }
+    .pc-consent-table-purpose th:nth-child(7),
+    .pc-consent-table-purpose td:nth-child(7) {
+      width: 10% !important;
+      min-width: 90px !important;
+      text-align: right !important;
+    }
+    .pc-consent-table-purpose .pc-consent-table-head-cell:first-child,
+    .pc-consent-table-purpose .pc-consent-table-row td:first-child {
+      text-align: left !important;
+      padding-left: 0.875rem !important;
+      padding-right: 0.875rem !important;
+    }
+    .pc-consent-table-head-cell {
+      font-size: 0.65rem !important;
+      letter-spacing: 0.06em !important;
+      text-transform: uppercase !important;
+      color: var(--pc-text-primary) !important;
+      font-weight: 600 !important;
+      padding-top: 0.625rem !important;
+      padding-bottom: 0.625rem !important;
+      background-color: var(--pc-bg-secondary) !important;
+    }
+    .pc-consent-table-row td {
+      padding-top: 0.5rem !important;
+      padding-bottom: 0.5rem !important;
+      vertical-align: middle !important;
+      -webkit-user-select: none !important;
+      user-select: none !important;
+    }
+    .pc-consent-table-head-cell:first-child,
+    .pc-consent-table-row td:first-child {
+      text-align: center !important;
+      padding-left: 0.375rem !important;
+      padding-right: 0.375rem !important;
+    }
+    .pc-consent-table-expanded-row:hover {
+      background-color: transparent !important;
+    }
+    .pc-consent-table-expanded-row td {
+      border-top: none !important;
+    }
+    .pc-consent-table-expanded-cell {
+      padding: 0 !important;
+      background-color: transparent !important;
+    }
+    /* Keep parent + expanded child hover in sync */
+    .pc-consent-table-row:hover + .pc-consent-table-expanded-row .pc-consent-expanded-surface,
+    .pc-consent-table-row:hover + .pc-consent-table-expanded-row .pc-consent-expanded-card,
+    .pc-consent-table-row:hover + .pc-consent-table-expanded-row .pc-consent-expanded-card th,
+    .pc-consent-table-row:hover + .pc-consent-table-expanded-row .pc-consent-expanded-card td,
+    .pc-consent-table-expanded-row:hover .pc-consent-expanded-surface,
+    .pc-consent-table-expanded-row:hover .pc-consent-expanded-card,
+    .pc-consent-table-expanded-row:hover .pc-consent-expanded-card th,
+    .pc-consent-table-expanded-row:hover .pc-consent-expanded-card td {
+      background-color: var(--pc-bg-hover) !important;
+    }
+
+    .pc-consent-pagination-wrap {
+      border-top: none !important;
+      border-left: 1px solid var(--pc-border-color);
+      border-right: 1px solid var(--pc-border-color);
+      border-bottom: 1px solid var(--pc-border-color);
+      border-radius: 0 0 var(--pc-border-radius-lg) var(--pc-border-radius-lg);
+      padding: 0.125rem 0.75rem 0.375rem;
+      background-color: var(--pc-bg-primary);
+    }
+
     /* ─── Case Details Page ───────────────────────────────────────────────── */
 
     .pc-case-page {
@@ -1885,19 +2291,27 @@ export const injectPCStyles = () => {
       display: flex;
       align-items: center;
       justify-content: center;
-      width: 32px;
-      height: 32px;
-      border: none;
-      background: none;
+      box-sizing: border-box;
+      width: var(--pc-navbar-actions-control-height, var(--pc-consent-toolbar-control-height, 2rem));
+      height: var(--pc-navbar-actions-control-height, var(--pc-consent-toolbar-control-height, 2rem));
+      min-width: var(--pc-navbar-actions-control-height, var(--pc-consent-toolbar-control-height, 2rem));
+      min-height: var(--pc-navbar-actions-control-height, var(--pc-consent-toolbar-control-height, 2rem));
+      border: 1px solid var(--pc-border-color);
+      background: var(--pc-bg-primary);
       cursor: pointer;
       border-radius: 0.5rem;
       color: var(--pc-text-primary);
-      transition: color 0.3s ease, background-color 0.15s ease;
+      transition: color 0.3s ease, background-color 0.15s ease, border-color 0.15s ease;
       padding: 0;
     }
+    .pc-notification-bell-btn svg {
+      width: 14px;
+      height: 14px;
+    }
 
     .pc-notification-bell-btn:hover {
       background-color: var(--pc-bg-hover);
+      border-color: var(--pc-border-color-hover);
     }
 
     .pc-notification-filter-tab {

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',