Merge pull request #282 from lifeomic/fix-day-picker-hover-color

fix: Use palette for `<DayPicker` background hover color
lifeomic · Jun 21, 2022 · 372ea9c · 372ea9c
2 parents 60fc784 + 7451180
commit 372ea9c
Showing 1 changed file with 4 additions and 0 deletions.
diff --git a/src/components/DayPicker/DayPicker.tsx b/src/components/DayPicker/DayPicker.tsx
@@ -13,6 +13,7 @@ import { TextField, TextFieldProps } from '../TextField';
 import { GetClasses } from '../../typeUtils';
 import { ButtonUnstyled } from '../ButtonUnstyled';
 import { composeEventHandlers } from '../../utils';
+import { fade } from '@material-ui/core/styles/colorManipulator';
 
 export const DayPickerStylesKey = 'ChromaDayPicker';
 export type DayPickerClasses = GetClasses<typeof useStyles>;
@@ -61,6 +62,9 @@ const useStyles = makeStyles((theme) => ({
       color: theme.palette.common.black,
       backgroundColor: theme.palette.grey[300],
     },
+    '&.DayPicker:not(.DayPicker--interactionDisabled) .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside):hover': {
+      backgroundColor: fade(theme.palette.primary[50], 0.5),
+    },
   },
   dayPickerBottomLeft: {
     top: '100%',