style: finalize the style of the dashboard

apps/edr-freight-web/backoffice/src/components/ruleEngine/RuleEngineCardGrid.tsx

@@ -1,5 +1,5 @@
 import type { OnChangeFn, PaginationState } from "@tanstack/react-table";
-import { Stack, Group, Text, Card, SimpleGrid } from "@mantine/core";
+import { Stack, Group, Text, Card, SimpleGrid, Skeleton } from "@mantine/core";
 
 import type { RuleEngineResourceConfig } from "@/pages/ruleEngine/config/resources";
 import type { RuleEngineRecord } from "@/types/rule-engine";
@@ -99,13 +99,16 @@ const RuleEngineCardGrid = ({
       <Stack gap="md" p="md">
         <SimpleGrid cols={{ base: 1, sm: 2, md: 2, lg: 3 }} spacing="md">
           {Array.from({ length: 6 }).map((_, index) => (
-            <Card key={index} p="md" radius="lg" withBorder style={{ height: "280px", background: "var(--mantine-color-gray-0)" }}>
-              <div style={{ animation: "pulse 2s infinite", opacity: 0.5 }}>
-                <div style={{ height: "20px", background: "var(--mantine-color-gray-3)", borderRadius: "4px", marginBottom: "12px" }} />
-                <div style={{ height: "16px", background: "var(--mantine-color-gray-3)", borderRadius: "4px", marginBottom: "20px", width: "80%" }} />
-                <div style={{ height: "16px", background: "var(--mantine-color-gray-3)", borderRadius: "4px", marginBottom: "8px" }} />
-                <div style={{ height: "16px", background: "var(--mantine-color-gray-3)", borderRadius: "4px" }} />
-              </div>
+            <Card key={index} p="lg">
+              <Group gap="sm" mb="md">
+                <Skeleton height={44} width={44} radius="md" />
+                <Stack gap={6} style={{ flex: 1 }}>
+                  <Skeleton height={14} width="70%" radius="sm" />
+                  <Skeleton height={10} width="40%" radius="sm" />
+                </Stack>
+              </Group>
+              <Skeleton height={12} radius="sm" mb={8} />
+              <Skeleton height={12} width="80%" radius="sm" />
             </Card>
           ))}
         </SimpleGrid>
@@ -124,8 +127,8 @@ const RuleEngineCardGrid = ({
     );
   }
 
-  const avatarBg = "#f1f5f9";
-  const avatarText = "#475569";
+  const avatarBg = "var(--mantine-color-gray-1)";
+  const avatarText = "var(--mantine-color-gray-7)";
 
   return (
     <Stack gap="md" p="md">
@@ -152,24 +155,7 @@ const RuleEngineCardGrid = ({
             <Card
               key={record.id}
               p="lg"
-              radius="lg"
-              withBorder
-              style={{
-                background: "white",
-                border: "1px solid var(--mantine-color-gray-2)",
-                display: "flex",
-                flexDirection: "column",
-                transition: "all 0.2s ease",
-                cursor: "pointer",
-              }}
-              onMouseEnter={(e) => {
-                e.currentTarget.style.boxShadow = "0 4px 12px rgba(0, 0, 0, 0.08)";
-                e.currentTarget.style.borderColor = "var(--mantine-color-gray-3)";
-              }}
-              onMouseLeave={(e) => {
-                e.currentTarget.style.boxShadow = "none";
-                e.currentTarget.style.borderColor = "var(--mantine-color-gray-2)";
-              }}
+              style={{ display: "flex", flexDirection: "column" }}
             >
               <Group justify="space-between" align="flex-start" mb="md">
                 <Group gap="sm" style={{ flex: 1, minWidth: 0 }}>
@@ -207,7 +193,7 @@ const RuleEngineCardGrid = ({
               </Group>
 
               {(subtitle || presentation.detailColumns.length > 0) && (
-                <Stack gap="xs" style={{ flex: 1, marginBottom: "md" }}>
+                <Stack gap="xs" mb="md" style={{ flex: 1 }}>
                   {subtitle && (
                     <Group gap="xs">
                       <Text size="xs" c="dimmed" fw={500}>
@@ -234,7 +220,7 @@ const RuleEngineCardGrid = ({
                 </Stack>
               )}
 
-              <Group justify="flex-end" gap="xs" style={{ borderTop: "1px solid var(--mantine-color-gray-1)", paddingTop: "md" }}>
+              <Group justify="flex-end" gap="xs" pt="md" style={{ borderTop: "1px solid var(--mantine-color-gray-2)" }}>
                 <RuleEngineRecordActions
                   record={record}
                   config={config}

apps/edr-freight-web/backoffice/src/components/ruleEngine/RuleEngineFormDialog.tsx

@@ -119,15 +119,6 @@ const resolveSelectValue = (
 
 const inputStyles = {
   label: { fontWeight: 600, marginBottom: 6, color: "var(--mantine-color-gray-8)" },
-  input: {
-    borderColor: "#e2e8f0",
-    background: "white",
-    transition: "border-color 0.15s ease, box-shadow 0.15s ease",
-    "&:focus": {
-      borderColor: "var(--freight-brand)",
-      boxShadow: "0 0 0 3px var(--freight-brand-ring)",
-    },
-  },
 } as const;
 
 const FieldLabel = ({ label, required }: { label: string; required?: boolean }) => (
@@ -228,8 +219,8 @@ const RuleEngineFormDialog = ({
           px="md"
           style={{
             minHeight: 42,
-            background: "#f8fafc",
-            border: "1px solid #e2e8f0",
+            background: "var(--mantine-color-gray-0)",
+            border: "1px solid var(--mantine-color-gray-3)",
             borderRadius: "var(--mantine-radius-md)",
           }}
         >

apps/edr-freight-web/backoffice/src/components/ruleEngine/ruleEngineStyles.ts

@@ -40,7 +40,7 @@ export const ruleEngineCard = {
     "group flex flex-col overflow-hidden rounded-lg border border-border bg-card shadow-sm transition-shadow duration-200 hover:shadow-md",
   header: "border-b border-border bg-muted/25 px-3 py-2.5 sm:px-4 sm:py-3.5",
   avatar:
-    "flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-[#f1f5f9] text-xs font-semibold text-slate-600 sm:h-10 sm:w-10 sm:text-sm",
+    "flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-muted text-xs font-semibold text-muted-foreground sm:h-10 sm:w-10 sm:text-sm",
   title: "truncate text-sm font-semibold text-foreground sm:text-[15px]",
   meta: "text-xs text-muted-foreground",
   detailLabel: