From 9665b38bb870e620e2d89a26ba77f76f31b2954f Mon Sep 17 00:00:00 2001
From: pedrooot <pedromarting3@gmail.com>
Date: Wed, 22 Jul 2026 16:42:50 +0200
Subject: [PATCH] chore: add correct styling

---
 .../_components/aggregated-compliance-detail.tsx         | 2 +-
 .../compliance/_components/aggregated-framework-card.tsx | 2 +-
 ui/components/compliance/compliance-card.tsx             | 2 +-
 .../compliance/compliance-header/compliance-header.tsx   | 2 +-
 ui/styles/globals.css                                    | 9 +++++++++
 5 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/ui/app/(prowler)/compliance/_components/aggregated-compliance-detail.tsx b/ui/app/(prowler)/compliance/_components/aggregated-compliance-detail.tsx
index 0a8de5abb0..8324ad4d26 100644
--- a/ui/app/(prowler)/compliance/_components/aggregated-compliance-detail.tsx
+++ b/ui/app/(prowler)/compliance/_components/aggregated-compliance-detail.tsx
@@ -49,7 +49,7 @@ export const AggregatedComplianceDetail = ({
                   alt={`${compliancetitle} logo`}
                   fill
                   sizes="48px"
-                  className="border-border-neutral-secondary bg-bg-neutral-primary rounded-lg border object-contain"
+                  className="border-border-neutral-tertiary bg-bg-logo-surface rounded-lg border object-contain"
                 />
               </div>
             )}
diff --git a/ui/app/(prowler)/compliance/_components/aggregated-framework-card.tsx b/ui/app/(prowler)/compliance/_components/aggregated-framework-card.tsx
index fbc8fc9539..8ec9c6c480 100644
--- a/ui/app/(prowler)/compliance/_components/aggregated-framework-card.tsx
+++ b/ui/app/(prowler)/compliance/_components/aggregated-framework-card.tsx
@@ -54,7 +54,7 @@ export const AggregatedFrameworkCard = ({
         <div className="flex w-full flex-col gap-3">
           <div className="flex items-center gap-3">
             {logo && (
-              <div className="border-border-neutral-secondary bg-bg-neutral-primary flex h-10 w-10 min-w-10 shrink-0 items-center justify-center rounded-md border">
+              <div className="border-border-neutral-tertiary bg-bg-logo-surface flex h-10 w-10 min-w-10 shrink-0 items-center justify-center rounded-md border">
                 <Image
                   src={logo}
                   alt={`${frameworkTitle} logo`}
diff --git a/ui/components/compliance/compliance-card.tsx b/ui/components/compliance/compliance-card.tsx
index 37c7892fda..9a7c6d744f 100644
--- a/ui/components/compliance/compliance-card.tsx
+++ b/ui/components/compliance/compliance-card.tsx
@@ -119,7 +119,7 @@ export const ComplianceCard: React.FC<ComplianceCardProps> = ({
         <div className="flex w-full flex-col gap-3">
           <div className="flex items-center gap-3 pr-9">
             {getComplianceIcon(title) && (
-              <div className="flex h-10 w-10 min-w-10 shrink-0 items-center justify-center rounded-md border border-gray-300 bg-white">
+              <div className="border-border-neutral-tertiary bg-bg-logo-surface flex h-10 w-10 min-w-10 shrink-0 items-center justify-center rounded-md border">
                 <Image
                   src={getComplianceIcon(title)}
                   alt={`${title} logo`}
diff --git a/ui/components/compliance/compliance-header/compliance-header.tsx b/ui/components/compliance/compliance-header/compliance-header.tsx
index 049a91ea1a..20d1010620 100644
--- a/ui/components/compliance/compliance-header/compliance-header.tsx
+++ b/ui/components/compliance/compliance-header/compliance-header.tsx
@@ -86,7 +86,7 @@ export const ComplianceHeader = ({
                     src={logoPath}
                     alt={`${complianceTitle} logo`}
                     fill
-                    className="rounded-lg border border-gray-300 bg-white object-contain p-0"
+                    className="border-border-neutral-tertiary bg-bg-logo-surface rounded-lg border object-contain p-0"
                   />
                 </div>
               )}
diff --git a/ui/styles/globals.css b/ui/styles/globals.css
index 2b4b4abfc6..95e22c21ad 100644
--- a/ui/styles/globals.css
+++ b/ui/styles/globals.css
@@ -135,6 +135,11 @@
   --bg-fail-primary: var(--color-rose-500);
   --bg-fail-secondary: var(--color-rose-50);
 
+  /* Surface for third-party brand logos. Intentionally light in both themes:
+     vendor artwork is drawn for a light background and is unreadable on a
+     dark one. Do not swap this for a theme-dependent neutral token. */
+  --bg-logo-surface: var(--color-white);
+
   /* Data Background Colors */
   --bg-data-azure: var(--color-sky-400);
   --bg-data-kubernetes: var(--color-indigo-600);
@@ -244,6 +249,9 @@
   --bg-fail-primary: var(--color-rose-500);
   --bg-fail-secondary: #432232;
 
+  /* Same value as light on purpose — see the light-theme declaration. */
+  --bg-logo-surface: var(--color-white);
+
   /* Data Background Colors */
   --bg-data-azure: var(--color-sky-400);
   --bg-data-kubernetes: var(--color-indigo-600);
@@ -354,6 +362,7 @@
   --color-bg-warning-secondary: var(--bg-warning-secondary);
   --color-bg-fail: var(--bg-fail-primary);
   --color-bg-fail-secondary: var(--bg-fail-secondary);
+  --color-bg-logo-surface: var(--bg-logo-surface);
   --color-bg-feature-new: var(--bg-feature-new);
   --color-text-feature-new: var(--text-feature-new);