From 3d7bd99b4b3d5ba2e102960b98a670c00d3398cf Mon Sep 17 00:00:00 2001
From: estifanos <estifanos.tria@gmail.com>
Date: Thu, 27 Aug 2026 08:16:20 +0000
Subject: [PATCH] style: update component background and icon colors to use
 semantic theme variables

---
 .../certificate-requirements/components/ConditionBuilder.tsx  | 2 +-
 .../components/DocumentRequirementsTab.tsx                    | 2 +-
 .../certificate-requirements/components/FormSchemaTab.tsx     | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/backoffice/src/app/features/certificate-requirements/components/ConditionBuilder.tsx b/apps/backoffice/src/app/features/certificate-requirements/components/ConditionBuilder.tsx
index b1192fca2..7c016bd76 100644
--- a/apps/backoffice/src/app/features/certificate-requirements/components/ConditionBuilder.tsx
+++ b/apps/backoffice/src/app/features/certificate-requirements/components/ConditionBuilder.tsx
@@ -198,7 +198,7 @@ function ConditionArmFields({
               fz="xs"
               px={6}
               py={2}
-              bg="var(--mantine-color-gray-1)"
+              bg="var(--mantine-color-default-hover)"
               style={{ borderRadius: 4, cursor: 'pointer' }}
               onClick={() => setInValues((value.in ?? []).filter((_, idx) => idx !== i).map(String))}
               title={t('certReq.condition.removeValue', 'Click to remove')}
diff --git a/apps/backoffice/src/app/features/certificate-requirements/components/DocumentRequirementsTab.tsx b/apps/backoffice/src/app/features/certificate-requirements/components/DocumentRequirementsTab.tsx
index 05680009d..033795186 100644
--- a/apps/backoffice/src/app/features/certificate-requirements/components/DocumentRequirementsTab.tsx
+++ b/apps/backoffice/src/app/features/certificate-requirements/components/DocumentRequirementsTab.tsx
@@ -127,7 +127,7 @@ export function DocumentRequirementsTab({ licenseType }: { licenseType: LicenseT
             ) : (
               <Stack gap="xs">
                 {rows.map((req) => (
-                  <Card key={req.id} withBorder radius="sm" p="xs" bg="var(--mantine-color-gray-0)">
+                  <Card key={req.id} withBorder radius="sm" p="xs" bg="var(--mantine-color-default-hover)">
                     <Group justify="space-between" wrap="nowrap">
                       <div style={{ minWidth: 0 }}>
                         <Group gap={6}>
diff --git a/apps/backoffice/src/app/features/certificate-requirements/components/FormSchemaTab.tsx b/apps/backoffice/src/app/features/certificate-requirements/components/FormSchemaTab.tsx
index ddeb712f1..f103b43d4 100644
--- a/apps/backoffice/src/app/features/certificate-requirements/components/FormSchemaTab.tsx
+++ b/apps/backoffice/src/app/features/certificate-requirements/components/FormSchemaTab.tsx
@@ -209,7 +209,7 @@ export function FormSchemaTab({ licenseType }: { licenseType: LicenseType }) {
             <Card key={section.key} withBorder radius="md" p="md">
               <Group justify="space-between" align="flex-start" mb="sm">
                 <Group gap="xs" wrap="nowrap">
-                  <IconGripVertical size={16} color="var(--mantine-color-gray-5)" />
+                  <IconGripVertical size={16} color="var(--mantine-color-dimmed)" />
                   <div>
                     <Group gap="xs">
                       <Text fw={700}>{localized(section.title) || section.key}</Text>
@@ -237,7 +237,7 @@ export function FormSchemaTab({ licenseType }: { licenseType: LicenseType }) {
 
               <Stack gap="xs">
                 {section.fields.map((field, fIndex) => (
-                  <Card key={field.key} withBorder radius="sm" p="xs" bg="var(--mantine-color-gray-0)">
+                  <Card key={field.key} withBorder radius="sm" p="xs" bg="var(--mantine-color-default-hover)">
                     <Group justify="space-between" wrap="nowrap">
                       <Group gap="xs" wrap="nowrap" style={{ minWidth: 0 }}>
                         <div style={{ minWidth: 0 }}>