fix(odyssey-react-mui): remove commented code and fix clock style

okta · Dec 2, 2024 · 7824076 · 7824076
1 parent 1e0d555
commit 7824076
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 30 deletions.
diff --git a/packages/odyssey-react-mui/src/labs/DatePickers/DateTimePicker.tsx b/packages/odyssey-react-mui/src/labs/DatePickers/DateTimePicker.tsx
@@ -14,7 +14,7 @@ import { memo, useCallback, useEffect, useMemo, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import {
   type DateTimePickerSlots,
-  DateTimePicker as MuiDateTimePicker,
+  MobileDateTimePicker as MuiDateTimePicker,
   DateTimePickerProps as MuiDateTimePickerProps,
   DateTimePickerSlotProps,
 } from "@mui/x-date-pickers";

diff --git a/packages/odyssey-react-mui/src/labs/DatePickers/dateTimePickerTheme.ts b/packages/odyssey-react-mui/src/labs/DatePickers/dateTimePickerTheme.ts
@@ -18,27 +18,29 @@ import { datePickerTheme, dateStyles } from "./datePickerTheme";
 
 const theme: ThemeOptions = {
   components: {
-    // MuiClock: {
-    //   styleOverrides: {
-    //     clock: ({ theme }) => ({
-    //       width: `calc(${theme.spacing(9)} * 4)`,
-    //       height: `calc(${theme.spacing(9)} * 4)`,
-    //     }),
-    //     pin: ({ theme }) => ({
-    //       backgroundColor: theme.palette.primary.light,
-    //     }),
-    //   },
-    // },
-    // MuiClockPointer: {
-    //   styleOverrides: {
-    //     root: ({ theme }) => ({
-    //       backgroundColor: theme.palette.primary.light,
-    //     }),
-    //     thumb: ({ theme }) => ({
-    //       borderColor: theme.palette.primary.light,
-    //     }),
-    //   },
-    // },
+    MuiClock: {
+      styleOverrides: {
+        clock: ({ theme }) => ({
+          width: `calc(${theme.spacing(9)} * 4)`,
+          height: `calc(${theme.spacing(9)} * 4)`,
+          backgroundColor: theme.palette.grey[50],
+        }),
+        pin: ({ theme }) => ({
+          backgroundColor: theme.palette.primary.light,
+        }),
+      },
+    },
+    MuiClockPointer: {
+      styleOverrides: {
+        root: ({ theme }) => ({
+          backgroundColor: theme.palette.primary.light,
+        }),
+        thumb: ({ theme }) => ({
+          borderColor: theme.palette.primary.light,
+          backgroundColor: theme.palette.primary.main,
+        }),
+      },
+    },
     MuiDateCalendar: {
       styleOverrides: {
         root: {
@@ -47,14 +49,6 @@ const theme: ThemeOptions = {
         },
       },
     },
-    // MuiPickersCalendarHeader: {
-    //   styleOverrides: {
-    //     switchViewButton: {
-    //       margin: "0 20px 0 20px",
-    //       color: "red"
-    //     },
-    //   },
-    // },
     MuiPickersArrowSwitcher: {
       styleOverrides: {
         button: ({ theme }) => ({