@applica-software-guru/react-admin 1.0.32 → 1.0.34

package/src/themes/overrides/Fab.jsx

@@ -0,0 +1,77 @@
+import { alpha } from '@mui/material/styles'
+import getColors from '../getColors'
+import getShadow from '../getShadow'
+
+function getColorStyle({ color, theme }) {
+  const colors = getColors(theme, color)
+  const { main, dark, contrastText } = colors
+
+  const buttonShadow = `${color}Button`
+  const shadows = getShadow(theme, buttonShadow)
+
+  return {
+    color: contrastText,
+    backgroundColor: main,
+    boxShadow: shadows,
+    '&:hover': {
+      boxShadow: 'none',
+      backgroundColor: dark,
+    },
+    '&:focus-visible': {
+      outline: `2px solid ${dark}`,
+      outlineOffset: 2,
+    },
+    '&::after': {
+      borderRadius: '50px',
+      boxShadow: `0 0 5px 5px ${alpha(main, 0.9)}`,
+    },
+    '&:active::after': {
+      borderRadius: '50px',
+      boxShadow: `0 0 0 0 ${alpha(main, 0.9)}`,
+    },
+  }
+}
+
+// ==============================|| OVERRIDES - FAB BUTTON ||============================== //
+
+export default function Button(theme) {
+  return {
+    MuiFab: {
+      styleOverrides: {
+        root: {
+          fontWeight: 400,
+          '&.Mui-disabled': {
+            backgroundColor: theme.palette.grey[200],
+          },
+          '&.MuiFab-primary': getColorStyle({ color: 'primary', theme }),
+          '&.MuiFab-secondary': getColorStyle({ color: 'secondary', theme }),
+          '&.Mui-error': getColorStyle({ color: 'error', theme }),
+          '&.MuiFab-success': getColorStyle({ color: 'success', theme }),
+          '&.MuiFab-info': getColorStyle({ color: 'info', theme }),
+          '&.MuiFab-warning': getColorStyle({ color: 'warning', theme }),
+          '&::after': {
+            content: '""',
+            display: 'block',
+            position: 'absolute',
+            left: 0,
+            top: 0,
+            width: '100%',
+            height: '100%',
+            borderRadius: 4,
+            opacity: 0,
+            transition: 'all 0.5s',
+          },
+
+          '&:active::after': {
+            position: 'absolute',
+            borderRadius: 4,
+            left: 0,
+            top: 0,
+            opacity: 1,
+            transition: '0s',
+          },
+        },
+      },
+    },
+  }
+}

package/src/themes/overrides/IconButton.jsx

@@ -0,0 +1,28 @@
+// ==============================|| OVERRIDES - ICON BUTTON ||============================== //
+
+export default function IconButton(theme) {
+  return {
+    MuiIconButton: {
+      styleOverrides: {
+        root: {
+          borderRadius: 4,
+        },
+        sizeLarge: {
+          width: theme.spacing(5.5),
+          height: theme.spacing(5.5),
+          fontSize: '1.25rem',
+        },
+        sizeMedium: {
+          width: theme.spacing(4.5),
+          height: theme.spacing(4.5),
+          fontSize: '1rem',
+        },
+        sizeSmall: {
+          width: theme.spacing(3.75),
+          height: theme.spacing(3.75),
+          fontSize: '0.75rem',
+        },
+      },
+    },
+  }
+}

package/src/themes/overrides/InputBase.jsx

@@ -0,0 +1,13 @@
+// ==============================|| OVERRIDES - INPUT BASE ||============================== //
+
+export default function InputBase() {
+  return {
+    MuiInputBase: {
+      styleOverrides: {
+        // sizeSmall: {
+        //   fontSize: '0.75rem'
+        // }
+      },
+    },
+  }
+}

package/src/themes/overrides/InputLabel.jsx

@@ -0,0 +1,25 @@
+// ==============================|| OVERRIDES - INPUT LABEL ||============================== //
+
+export default function InputLabel(theme) {
+  return {
+    MuiInputLabel: {
+      styleOverrides: {
+        root: {
+          color: theme.palette.grey[600],
+        },
+        outlined: {
+          lineHeight: '0.8em',
+          '&.MuiInputLabel-sizeSmall': {
+            lineHeight: '1em',
+          },
+          '&.MuiInputLabel-shrink': {
+            background: theme.palette.background.paper,
+            padding: '0 8px',
+            marginLeft: -6,
+            lineHeight: '1.4375em',
+          },
+        },
+      },
+    },
+  }
+}

package/src/themes/overrides/LinearProgress.jsx

@@ -0,0 +1,17 @@
+// ==============================|| OVERRIDES - LINER PROGRESS ||============================== //
+
+export default function LinearProgress() {
+  return {
+    MuiLinearProgress: {
+      styleOverrides: {
+        root: {
+          height: 6,
+          borderRadius: 100,
+        },
+        bar: {
+          borderRadius: 100,
+        },
+      },
+    },
+  }
+}

package/src/themes/overrides/Link.jsx

@@ -0,0 +1,11 @@
+// ==============================|| OVERRIDES - LINK ||============================== //
+
+export default function Link() {
+  return {
+    MuiLink: {
+      defaultProps: {
+        underline: 'hover',
+      },
+    },
+  }
+}

package/src/themes/overrides/ListItemButton.jsx

@@ -0,0 +1,18 @@
+// ==============================|| OVERRIDES - LIST ITEM ICON ||============================== //
+
+export default function ListItemButton(theme) {
+  return {
+    MuiListItemButton: {
+      styleOverrides: {
+        root: {
+          '&.Mui-selected': {
+            color: theme.palette.primary.main,
+            '& .MuiListItemIcon-root': {
+              color: theme.palette.primary.main,
+            },
+          },
+        },
+      },
+    },
+  }
+}

package/src/themes/overrides/ListItemIcon.jsx

@@ -0,0 +1,14 @@
+// ==============================|| OVERRIDES - LIST ITEM ICON ||============================== //
+
+export default function ListItemIcon(theme) {
+  return {
+    MuiListItemIcon: {
+      styleOverrides: {
+        root: {
+          minWidth: 24,
+          color: theme.palette.text.primary,
+        },
+      },
+    },
+  }
+}

package/src/themes/overrides/LoadingButton.jsx

@@ -0,0 +1,17 @@
+// ==============================|| OVERRIDES - LOADING BUTTON ||============================== //
+
+export default function LoadingButton() {
+  return {
+    MuiLoadingButton: {
+      styleOverrides: {
+        root: {
+          padding: '6px 16px',
+          '&.MuiLoadingButton-loading': {
+            opacity: 0.6,
+            textShadow: 'none',
+          },
+        },
+      },
+    },
+  }
+}

package/src/themes/overrides/OutlinedInput.jsx

@@ -0,0 +1,54 @@
+import getColors from '../getColors'
+import getShadow from '../getShadow'
+
+function getColor({ variant, theme }) {
+  const colors = getColors(theme, variant)
+  const { light } = colors
+
+  const shadows = getShadow(theme, `${variant}`)
+
+  return {
+    '&:hover .MuiOutlinedInput-notchedOutline': {
+      borderColor: light,
+    },
+    '&.Mui-focused': {
+      boxShadow: shadows,
+      '& .MuiOutlinedInput-notchedOutline': {
+        border: `1px solid ${light}`,
+      },
+    },
+  }
+}
+
+export default function OutlinedInput(theme) {
+  return {
+    MuiOutlinedInput: {
+      styleOverrides: {
+        input: {
+          padding: '10.5px 14px 10.5px 12px',
+        },
+        notchedOutline: {
+          borderColor:
+            theme.palette.mode === 'dark' ? theme.palette.grey[200] : theme.palette.grey[300],
+        },
+        root: {
+          ...getColor({ variant: 'primary', theme }),
+          '&.Mui-error': {
+            ...getColor({ variant: 'error', theme }),
+          },
+        },
+        inputSizeSmall: {
+          padding: '7.5px 8px 7.5px 12px',
+        },
+        inputMultiline: {
+          padding: 0,
+        },
+        colorSecondary: getColor({ variant: 'secondary', theme }),
+        colorError: getColor({ variant: 'error', theme }),
+        colorWarning: getColor({ variant: 'warning', theme }),
+        colorInfo: getColor({ variant: 'info', theme }),
+        colorSuccess: getColor({ variant: 'success', theme }),
+      },
+    },
+  }
+}

package/src/themes/overrides/Pagination.jsx

@@ -0,0 +1,11 @@
+// ==============================|| OVERRIDES - PAGINATION ||============================== //
+
+export default function Pagination() {
+  return {
+    MuiPagination: {
+      defaultProps: {
+        shape: 'rounded',
+      },
+    },
+  }
+}

package/src/themes/overrides/PaginationItem.jsx

@@ -0,0 +1,211 @@
+import getColors from '../getColors'
+
+function getColorStyle({ variant, color, theme }) {
+  const colors = getColors(theme, color)
+  const { lighter, light, dark, main, contrastText } = colors
+
+  const focusStyle = {
+    '&:focus-visible': {
+      outline: `2px solid ${dark}`,
+      outlineOffset: 2,
+      ...(variant === 'text' && {
+        backgroundColor: theme.palette.background.paper,
+      }),
+    },
+  }
+
+  switch (variant) {
+    case 'combined':
+    case 'contained':
+      return {
+        color: contrastText,
+        backgroundColor: main,
+        '&:hover': {
+          backgroundColor: light,
+        },
+        ...focusStyle,
+      }
+    case 'outlined':
+      return {
+        borderColor: main,
+        '&:hover': {
+          backgroundColor: lighter,
+          borderColor: light,
+        },
+        ...focusStyle,
+      }
+    case 'text':
+    default:
+      return {
+        color: main,
+        '&:hover': {
+          backgroundColor: main,
+          color: lighter,
+        },
+        ...focusStyle,
+      }
+  }
+}
+
+// ==============================|| OVERRIDES - PAGINATION ITEM ||============================== //
+
+export default function PaginationItem(theme) {
+  return {
+    MuiPaginationItem: {
+      styleOverrides: {
+        root: {
+          '&:focus-visible': {
+            outline: `2px solid ${theme.palette.secondary.dark}`,
+            outlineOffset: 2,
+          },
+        },
+        text: {
+          '&.Mui-selected': {
+            backgroundColor: 'transparent',
+            fontSize: '1rem',
+            fontWeight: 500,
+            '&.MuiPaginationItem-textPrimary': getColorStyle({
+              variant: 'text',
+              color: 'primary',
+              theme,
+            }),
+            '&.MuiPaginationItem-textSecondary': getColorStyle({
+              variant: 'text',
+              color: 'secondary',
+              theme,
+            }),
+            '&.MuiPaginationItem-textError': getColorStyle({
+              variant: 'text',
+              color: 'error',
+              theme,
+            }),
+            '&.MuiPaginationItem-textSuccess': getColorStyle({
+              variant: 'text',
+              color: 'success',
+              theme,
+            }),
+            '&.MuiPaginationItem-textInfo': getColorStyle({
+              variant: 'text',
+              color: 'info',
+              theme,
+            }),
+            '&.MuiPaginationItem-textWarning': getColorStyle({
+              variant: 'text',
+              color: 'warning',
+              theme,
+            }),
+          },
+        },
+        contained: {
+          '&.Mui-selected': {
+            '&.MuiPaginationItem-containedPrimary': getColorStyle({
+              variant: 'contained',
+              color: 'primary',
+              theme,
+            }),
+            '&.MuiPaginationItem-containedSecondary': getColorStyle({
+              variant: 'contained',
+              color: 'secondary',
+              theme,
+            }),
+            '&.MuiPaginationItem-containedError': getColorStyle({
+              variant: 'contained',
+              color: 'error',
+              theme,
+            }),
+            '&.MuiPaginationItem-containedSuccess': getColorStyle({
+              variant: 'contained',
+              color: 'success',
+              theme,
+            }),
+            '&.MuiPaginationItem-containedInfo': getColorStyle({
+              variant: 'contained',
+              color: 'info',
+              theme,
+            }),
+            '&.MuiPaginationItem-containedWarning': getColorStyle({
+              variant: 'contained',
+              color: 'warning',
+              theme,
+            }),
+          },
+        },
+        combined: {
+          border: '1px solid',
+          borderColor: theme.palette.divider,
+          '&.MuiPaginationItem-ellipsis': {
+            border: 'none',
+          },
+          '&.Mui-selected': {
+            '&.MuiPaginationItem-combinedPrimary': getColorStyle({
+              variant: 'combined',
+              color: 'primary',
+              theme,
+            }),
+            '&.MuiPaginationItem-combinedSecondary': getColorStyle({
+              variant: 'combined',
+              color: 'secondary',
+              theme,
+            }),
+            '&.MuiPaginationItem-combinedError': getColorStyle({
+              variant: 'combined',
+              color: 'error',
+              theme,
+            }),
+            '&.MuiPaginationItem-combinedSuccess': getColorStyle({
+              variant: 'combined',
+              color: 'success',
+              theme,
+            }),
+            '&.MuiPaginationItem-combinedInfo': getColorStyle({
+              variant: 'combined',
+              color: 'info',
+              theme,
+            }),
+            '&.MuiPaginationItem-combinedWarning': getColorStyle({
+              variant: 'combined',
+              color: 'warning',
+              theme,
+            }),
+          },
+        },
+        outlined: {
+          borderColor: theme.palette.divider,
+          '&.Mui-selected': {
+            backgroundColor: 'transparent',
+            '&.MuiPaginationItem-outlinedPrimary': getColorStyle({
+              variant: 'outlined',
+              color: 'primary',
+              theme,
+            }),
+            '&.MuiPaginationItem-outlinedSecondary': getColorStyle({
+              variant: 'outlined',
+              color: 'secondary',
+              theme,
+            }),
+            '&.MuiPaginationItem-outlinedError': getColorStyle({
+              variant: 'outlined',
+              color: 'error',
+              theme,
+            }),
+            '&.MuiPaginationItem-outlinedSuccess': getColorStyle({
+              variant: 'outlined',
+              color: 'success',
+              theme,
+            }),
+            '&.MuiPaginationItem-outlinedInfo': getColorStyle({
+              variant: 'outlined',
+              color: 'info',
+              theme,
+            }),
+            '&.MuiPaginationItem-outlinedWarning': getColorStyle({
+              variant: 'outlined',
+              color: 'warning',
+              theme,
+            }),
+          },
+        },
+      },
+    },
+  }
+}

package/src/themes/overrides/Popover.jsx

@@ -0,0 +1,13 @@
+// ==============================|| OVERRIDES - DIALOG CONTENT TEXT ||============================== //
+
+export default function Popover(theme) {
+  return {
+    MuiPopover: {
+      styleOverrides: {
+        paper: {
+          boxShadow: theme.customShadows.z1,
+        },
+      },
+    },
+  }
+}

package/src/themes/overrides/Radio.jsx

@@ -0,0 +1,121 @@
+import { Box } from '@mui/material'
+import getColors from '../getColors'
+
+function getColorStyle({ color, theme }) {
+  const colors = getColors(theme, color)
+  const { lighter, main, dark } = colors
+
+  return {
+    '& .dot': {
+      backgroundColor: main,
+    },
+    '&:hover': {
+      backgroundColor: lighter,
+    },
+    '&.Mui-focusVisible': {
+      outline: `2px solid ${dark}`,
+      outlineOffset: -4,
+    },
+  }
+}
+
+function getSizeStyle(size) {
+  switch (size) {
+    case 'small':
+      return { size: 16, dotSize: 8, position: 3 }
+    case 'large':
+      return { size: 24, dotSize: 12, position: 5 }
+    case 'medium':
+    default:
+      return { size: 20, dotSize: 10, position: 4 }
+  }
+}
+
+function radioStyle(size) {
+  const sizes = getSizeStyle(size)
+
+  return {
+    '& .icon': {
+      width: sizes.size,
+      height: sizes.size,
+      '& .dot': {
+        width: sizes.dotSize,
+        height: sizes.dotSize,
+        top: sizes.position,
+        left: sizes.position,
+      },
+    },
+  }
+}
+
+// ==============================|| OVERRIDES - CHECKBOX ||============================== //
+
+export default function Radio(theme) {
+  const { palette } = theme
+
+  return {
+    MuiRadio: {
+      defaultProps: {
+        className: 'size-small',
+        icon: (
+          <Box
+            className="icon"
+            sx={{
+              width: 16,
+              height: 16,
+              border: '1px solid',
+              borderColor: 'inherit',
+              borderRadius: '50%',
+            }}
+          />
+        ),
+        checkedIcon: (
+          <Box
+            className="icon"
+            sx={{
+              width: 16,
+              height: 16,
+              border: '1px solid',
+              borderColor: 'inherit',
+              borderRadius: '50%',
+              position: 'relative',
+            }}
+          >
+            <Box
+              className="dot"
+              sx={{
+                width: 8,
+                height: 8,
+                backgroundColor: 'inherit',
+                borderRadius: '50%',
+                position: 'absolute',
+                top: 3,
+                left: 3,
+              }}
+            />
+          </Box>
+        ),
+      },
+      styleOverrides: {
+        root: {
+          color: palette.secondary[300],
+          '&.size-small': {
+            ...radioStyle('small'),
+          },
+          '&.size-medium': {
+            ...radioStyle('medium'),
+          },
+          '&.size-large': {
+            ...radioStyle('large'),
+          },
+        },
+        colorPrimary: getColorStyle({ color: 'primary', theme }),
+        colorSecondary: getColorStyle({ color: 'secondary', theme }),
+        colorSuccess: getColorStyle({ color: 'success', theme }),
+        colorWarning: getColorStyle({ color: 'warning', theme }),
+        colorInfo: getColorStyle({ color: 'info', theme }),
+        colorError: getColorStyle({ color: 'error', theme }),
+      },
+    },
+  }
+}