vehicle

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",
+            },
           }}
         />
       );