From d40b6d0c9fdc150e14b7a121ffaff7c8ef32e55d Mon Sep 17 00:00:00 2001
From: natib21 <yaschalew10@gmail.com>
Date: Fri, 19 Jun 2026 13:49:31 +0000
Subject: [PATCH] vehicle

---
 .../src/components/fleet/FleetFormDialog.tsx  | 27 ++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/apps/edr-freight-web/backoffice/src/components/fleet/FleetFormDialog.tsx b/apps/edr-freight-web/backoffice/src/components/fleet/FleetFormDialog.tsx
index 9718613ea..6629ad491 100644
--- a/apps/edr-freight-web/backoffice/src/components/fleet/FleetFormDialog.tsx
+++ b/apps/edr-freight-web/backoffice/src/components/fleet/FleetFormDialog.tsx
@@ -206,12 +206,13 @@ const FleetFormDialog = ({
           firstDayOfWeek={0}
           description={field.description || "Select a date"}
           rightSection={
-            <ActionIcon size="sm" variant="subtle" color="gray">
+            <ActionIcon size="sm" variant="subtle" color="green">
               <Calendar size={16} />
             </ActionIcon>
           }
           size="sm"
           radius="md"
+          popoverProps={{ shadow: "md", radius: "lg" }}
           styles={{
             input: {
               borderColor: "var(--mantine-color-gray-3)",
@@ -222,6 +223,30 @@ const FleetFormDialog = ({
                 backgroundColor: "var(--mantine-color-gray-1)",
               },
             },
+            calendar: {
+              padding: "md",
+            },
+            calendarHeaderControl: {
+              "&:hover": {
+                backgroundColor: "var(--mantine-color-green-0)",
+              },
+            },
+            day: {
+              "&[data-selected]": {
+                backgroundColor: "var(--mantine-color-green-6)",
+                color: "white",
+                fontWeight: 600,
+              },
+              "&[data-in-range]": {
+                backgroundColor: "var(--mantine-color-green-1)",
+              },
+              "&:hover": {
+                backgroundColor: "var(--mantine-color-green-2)",
+              },
+            },
+            monthRow: {
+              marginBottom: "0.5rem",
+            },
           }}
         />
       );