robobyte-front-builder 1.0.0

package/src/@core/theme/overrides/icon-button.js

@@ -0,0 +1,145 @@
+// Config Imports
+import themeConfig from 'src/configs/themeConfig'
+
+const iconButton = {
+  MuiIconButton: {
+    styleOverrides: {
+      root: {
+        variants: [
+          {
+            props: { color: 'default' },
+            style: {
+              '&:not(.Mui-disabled):hover, &:not(.Mui-disabled):active': {
+                backgroundColor: 'rgb(var(--mui-palette-text-primaryChannel) / 0.08)'
+              },
+              ...(themeConfig.disableRipple && {
+                '&.Mui-focusVisible:not(.Mui-disabled)': {
+                  backgroundColor: 'rgb(var(--mui-palette-text-primaryChannel) / 0.08)'
+                }
+              }),
+              '&.Mui-disabled': {
+                opacity: 0.45,
+                color: 'var(--mui-palette-action-active)'
+              }
+            }
+          },
+          {
+            props: { color: 'primary' },
+            style: {
+              '&:not(.Mui-disabled):hover, &:not(.Mui-disabled):active': {
+                backgroundColor: 'var(--mui-palette-primary-lighterOpacity)'
+              },
+              ...(themeConfig.disableRipple && {
+                '&.Mui-focusVisible:not(.Mui-disabled)': {
+                  backgroundColor: 'var(--mui-palette-primary-lighterOpacity)'
+                }
+              }),
+              '&.Mui-disabled': {
+                opacity: 0.45,
+                color: 'var(--mui-palette-primary-main)'
+              }
+            }
+          },
+          {
+            props: { color: 'secondary' },
+            style: {
+              '&:not(.Mui-disabled):hover, &:not(.Mui-disabled):active': {
+                backgroundColor: 'var(--mui-palette-secondary-lighterOpacity)'
+              },
+              ...(themeConfig.disableRipple && {
+                '&.Mui-focusVisible:not(.Mui-disabled)': {
+                  backgroundColor: 'var(--mui-palette-secondary-lighterOpacity)'
+                }
+              }),
+              '&.Mui-disabled': {
+                opacity: 0.45,
+                color: 'var(--mui-palette-secondary-main)'
+              }
+            }
+          },
+          {
+            props: { color: 'error' },
+            style: {
+              '&:not(.Mui-disabled):hover, &:not(.Mui-disabled):active': {
+                backgroundColor: 'var(--mui-palette-error-lighterOpacity)'
+              },
+              ...(themeConfig.disableRipple && {
+                '&.Mui-focusVisible:not(.Mui-disabled)': { backgroundColor: 'var(--mui-palette-error-lighterOpacity)' }
+              }),
+              '&.Mui-disabled': {
+                opacity: 0.45,
+                color: 'var(--mui-palette-error-main)'
+              }
+            }
+          },
+          {
+            props: { color: 'warning' },
+            style: {
+              '&:not(.Mui-disabled):hover, &:not(.Mui-disabled):active': {
+                backgroundColor: 'var(--mui-palette-warning-lighterOpacity)'
+              },
+              ...(themeConfig.disableRipple && {
+                '&.Mui-focusVisible:not(.Mui-disabled)': {
+                  backgroundColor: 'var(--mui-palette-warning-lighterOpacity)'
+                }
+              }),
+              '&.Mui-disabled': {
+                opacity: 0.45,
+                color: 'var(--mui-palette-warning-main)'
+              }
+            }
+          },
+          {
+            props: { color: 'info' },
+            style: {
+              '&:not(.Mui-disabled):hover, &:not(.Mui-disabled):active': {
+                backgroundColor: 'var(--mui-palette-info-lighterOpacity)'
+              },
+              ...(themeConfig.disableRipple && {
+                '&.Mui-focusVisible:not(.Mui-disabled)': { backgroundColor: 'var(--mui-palette-info-lighterOpacity)' }
+              }),
+              '&.Mui-disabled': {
+                opacity: 0.45,
+                color: 'var(--mui-palette-info-main)'
+              }
+            }
+          },
+          {
+            props: { color: 'success' },
+            style: {
+              '&:not(.Mui-disabled):hover, &:not(.Mui-disabled):active': {
+                backgroundColor: 'var(--mui-palette-success-lighterOpacity)'
+              },
+              ...(themeConfig.disableRipple && {
+                '&.Mui-focusVisible:not(.Mui-disabled)': {
+                  backgroundColor: 'var(--mui-palette-success-lighterOpacity)'
+                }
+              }),
+              '&.Mui-disabled': {
+                opacity: 0.45,
+                color: 'var(--mui-palette-success-main)'
+              }
+            }
+          }
+        ],
+        '& .MuiSvgIcon-root, & i, & svg': {
+          fontSize: 'inherit'
+        }
+      },
+      // sizeSmall: ({ theme }) => ({
+      //   padding: theme.spacing(1.75),
+      //   fontSize: '1.25rem'
+      // }),
+      // sizeMedium: ({ theme }) => ({
+      //   padding: theme.spacing(2),
+      //   fontSize: '1.375rem'
+      // }),
+      // sizeLarge: ({ theme }) => ({
+      //   padding: theme.spacing(2.25),
+      //   fontSize: '1.5rem'
+      // })
+    }
+  }
+}
+
+export default iconButton

package/src/@core/theme/overrides/index.js

@@ -0,0 +1,103 @@
+// ** Overrides Imports
+import MuiFab from './fab'
+import MuiCard from './card'
+import MuiChip from './chip'
+import MuiLink from './link'
+import MuiList from './list'
+import MuiMenu from './menu'
+import MuiTabs from './tabs'
+import MuiInput from './input'
+import MuiPaper from './paper'
+import MuiTable from './table'
+import MuiAlerts from './alerts'
+import MuiButton from './button'
+import MuiDialog from './dialog'
+import MuiRating from './rating'
+import MuiSelect from './select'
+import MuiAvatar from './avatars'
+import Progress from './progress'
+import MuiDivider from './divider'
+import MuiPopover from './popover'
+import MuiTooltip from './tooltip'
+import MuiBackdrop from './backdrop'
+import MuiDataGrid from './dataGrid'
+import MuiSnackbar from './snackbar'
+import MuiSwitches from './switches'
+import MuiTimeline from './timeline'
+import MuiAccordion from './accordion'
+import MuiPagination from './pagination'
+import MuiTypography from './typography'
+import MuiBreadcrumbs from './breadcrumbs'
+import MuiButtonGroup from './buttonGroup'
+import MuiAutocomplete from './autocomplete'
+import MuiToggleButton from './toggleButton'
+import MuiDateTimePicker from './dateTimePicker'
+
+const Overrides = (theme, settings) => {
+  const { skin } = settings
+  const fab = MuiFab(theme)
+  const chip = MuiChip(theme)
+  const list = MuiList(theme)
+  const tabs = MuiTabs(theme)
+  const input = MuiInput(theme)
+  const tables = MuiTable(theme)
+  const alerts = MuiAlerts(theme)
+  const button = MuiButton(theme)
+  const rating = MuiRating(theme)
+  const select = MuiSelect(theme)
+  const avatars = MuiAvatar(theme)
+  const progress = Progress(theme)
+  const divider = MuiDivider(theme)
+  const menu = MuiMenu(theme, skin)
+  const tooltip = MuiTooltip(theme)
+  const cards = MuiCard(theme, skin)
+  const backdrop = MuiBackdrop(theme)
+  const dataGrid = MuiDataGrid(theme)
+  const switches = MuiSwitches(theme)
+  const timeline = MuiTimeline(theme)
+  const accordion = MuiAccordion(theme)
+  const dialog = MuiDialog(theme, skin)
+  const pagination = MuiPagination(theme)
+  const popover = MuiPopover(theme, skin)
+  const snackbar = MuiSnackbar(theme, skin)
+  const dateTimePicker = MuiDateTimePicker(theme)
+  const autocomplete = MuiAutocomplete(theme, skin)
+
+  return Object.assign(
+    fab,
+    chip,
+    list,
+    menu,
+    tabs,
+    cards,
+    input,
+    select,
+    alerts,
+    button,
+    dialog,
+    rating,
+    tables,
+    avatars,
+    divider,
+    popover,
+    tooltip,
+    MuiLink,
+    backdrop,
+    dataGrid,
+    MuiPaper,
+    progress,
+    snackbar,
+    switches,
+    timeline,
+    accordion,
+    pagination,
+    autocomplete,
+    MuiTypography,
+    dateTimePicker,
+    MuiBreadcrumbs,
+    MuiButtonGroup,
+    MuiToggleButton
+  )
+}
+
+export default Overrides

package/src/@core/theme/overrides/input.js

@@ -0,0 +1,72 @@
+const input = theme => {
+  return {
+    MuiInputLabel: {
+      styleOverrides: {
+        root: {
+          color: theme.palette.text.secondary
+        }
+      }
+    },
+    MuiInput: {
+      styleOverrides: {
+        root: {
+          lineHeight: '1.5rem',
+          '&:before': {
+            borderBottom: `1px solid rgba(${theme.palette.customColors.main}, 0.22)`
+          },
+          '&:hover:not(.Mui-disabled):before': {
+            borderBottom: `1px solid rgba(${theme.palette.customColors.main}, 0.32)`
+          },
+          '&.Mui-disabled:before': {
+            borderBottomStyle: 'solid'
+          }
+        }
+      }
+    },
+    MuiFilledInput: {
+      styleOverrides: {
+        root: {
+          borderTopLeftRadius: 8,
+          borderTopRightRadius: 8,
+          backgroundColor: `rgba(${theme.palette.customColors.main}, 0.05)`,
+          '&:hover:not(.Mui-disabled)': {
+            backgroundColor: `rgba(${theme.palette.customColors.main}, 0.08)`
+          },
+          '&:before': {
+            borderBottom: `1px solid rgba(${theme.palette.customColors.main}, 0.22)`
+          },
+          '&:hover:not(.Mui-disabled):before': {
+            borderBottom: `1px solid rgba(${theme.palette.customColors.main}, 0.32)`
+          },
+          '&.Mui-disabled': {
+            backgroundColor: `rgba(${theme.palette.customColors.main}, 0.05)`,
+            '&:before': {
+              borderBottomStyle: 'solid'
+            }
+          }
+        }
+      }
+    },
+    MuiOutlinedInput: {
+      styleOverrides: {
+        root: {
+          borderRadius: 8,
+          '&:hover:not(.Mui-focused):not(.Mui-disabled) .MuiOutlinedInput-notchedOutline': {
+            borderColor: `rgba(${theme.palette.customColors.main}, 0.32)`
+          },
+          '&:hover.Mui-error .MuiOutlinedInput-notchedOutline': {
+            borderColor: theme.palette.error.main
+          },
+          '& .MuiOutlinedInput-notchedOutline': {
+            borderColor: `rgba(${theme.palette.customColors.main}, 0.22)`
+          },
+          '&.Mui-disabled .MuiOutlinedInput-notchedOutline': {
+            borderColor: theme.palette.text.disabled
+          }
+        }
+      }
+    }
+  }
+}
+
+export default input

package/src/@core/theme/overrides/link.js

@@ -0,0 +1,9 @@
+export default {
+  MuiLink: {
+    styleOverrides: {
+      root: {
+        textDecorationColor: 'transparent'
+      }
+    }
+  }
+}

package/src/@core/theme/overrides/list.js

@@ -0,0 +1,44 @@
+const List = theme => {
+  return {
+    MuiListItemIcon: {
+      styleOverrides: {
+        root: {
+          minWidth: 0,
+          marginRight: theme.spacing(3),
+          color: theme.palette.text.secondary
+        }
+      }
+    },
+    MuiListItemAvatar: {
+      styleOverrides: {
+        root: {
+          minWidth: 0,
+          marginRight: theme.spacing(4)
+        }
+      }
+    },
+    MuiListItemText: {
+      styleOverrides: {
+        dense: {
+          '& .MuiListItemText-primary': {
+            color: theme.palette.text.primary
+          },
+          '& .MuiListItemText-primary, & .MuiListItemText-secondary': {
+            lineHeight: 1.43
+          }
+        }
+      }
+    },
+    MuiListSubheader: {
+      styleOverrides: {
+        root: {
+          fontWeight: 600,
+          textTransform: 'uppercase',
+          color: theme.palette.text.primary
+        }
+      }
+    }
+  }
+}
+
+export default List

package/src/@core/theme/overrides/menu.js

@@ -0,0 +1,25 @@
+const Menu = (theme, skin) => {
+  const boxShadow = () => {
+    if (skin === 'bordered') {
+      return theme.shadows[0]
+    } else if (theme.palette.mode === 'light') {
+      return theme.shadows[8]
+    } else return theme.shadows[9]
+  }
+
+  return {
+    MuiMenu: {
+      styleOverrides: {
+        root: {
+          '& .MuiMenu-paper': {
+            borderRadius: 5,
+            boxShadow: boxShadow(),
+            ...(skin === 'bordered' && { border: `1px solid ${theme.palette.divider}` })
+          }
+        }
+      }
+    }
+  }
+}
+
+export default Menu

package/src/@core/theme/overrides/pagination.js

@@ -0,0 +1,41 @@
+// ** Util Import
+import { hexToRGBA } from 'src/@core/utils/hex-to-rgba'
+
+const Pagination = theme => {
+  return {
+    MuiPaginationItem: {
+      styleOverrides: {
+        root: {
+          '&.Mui-selected:not(.Mui-disabled):not(.MuiPaginationItem-textPrimary):not(.MuiPaginationItem-textSecondary):hover':
+            {
+              backgroundColor: `rgba(${theme.palette.customColors.main}, 0.12)`
+            }
+        },
+        outlined: {
+          borderColor: `rgba(${theme.palette.customColors.main}, 0.22)`
+        },
+        outlinedPrimary: {
+          '&.Mui-selected': {
+            backgroundColor: hexToRGBA(theme.palette.primary.main, 0.12),
+            '&:hover': {
+              backgroundColor: `${hexToRGBA(theme.palette.primary.main, 0.24)} !important`
+            }
+          }
+        },
+        outlinedSecondary: {
+          '&.Mui-selected': {
+            backgroundColor: hexToRGBA(theme.palette.secondary.main, 0.12),
+            '&:hover': {
+              backgroundColor: `${hexToRGBA(theme.palette.secondary.main, 0.24)} !important`
+            }
+          }
+        },
+        rounded: {
+          borderRadius: 8
+        }
+      }
+    }
+  }
+}
+
+export default Pagination

package/src/@core/theme/overrides/paper.js

@@ -0,0 +1,9 @@
+export default {
+  MuiPaper: {
+    styleOverrides: {
+      root: {
+        backgroundImage: 'none'
+      }
+    }
+  }
+}

package/src/@core/theme/overrides/popover.js

@@ -0,0 +1,16 @@
+const Popover = (theme, skin) => {
+  return {
+    MuiPopover: {
+      styleOverrides: {
+        root: {
+          '& .MuiPopover-paper': {
+            boxShadow: theme.shadows[skin === 'bordered' ? 0 : 6],
+            ...(skin === 'bordered' && { border: `1px solid ${theme.palette.divider}` })
+          }
+        }
+      }
+    }
+  }
+}
+
+export default Popover

package/src/@core/theme/overrides/progress.js

@@ -0,0 +1,38 @@
+// ** Util Import
+import { hexToRGBA } from 'src/@core/utils/hex-to-rgba'
+
+const Progress = theme => {
+  return {
+    MuiLinearProgress: {
+      styleOverrides: {
+        root: {
+          height: 6,
+          borderRadius: theme.shape.borderRadius,
+          '&.MuiLinearProgress-colorPrimary': {
+            backgroundColor: hexToRGBA(theme.palette.primary.main, 0.12)
+          },
+          '&.MuiLinearProgress-colorSecondary': {
+            backgroundColor: hexToRGBA(theme.palette.secondary.main, 0.12)
+          },
+          '&.MuiLinearProgress-colorSuccess': {
+            backgroundColor: hexToRGBA(theme.palette.success.main, 0.12)
+          },
+          '&.MuiLinearProgress-colorError': {
+            backgroundColor: hexToRGBA(theme.palette.error.main, 0.12)
+          },
+          '&.MuiLinearProgress-colorWarning': {
+            backgroundColor: hexToRGBA(theme.palette.warning.main, 0.12)
+          },
+          '&.MuiLinearProgress-colorInfo': {
+            backgroundColor: hexToRGBA(theme.palette.info.main, 0.12)
+          }
+        },
+        bar: {
+          borderRadius: theme.shape.borderRadius
+        }
+      }
+    }
+  }
+}
+
+export default Progress

package/src/@core/theme/overrides/radio.jsx

@@ -0,0 +1,80 @@
+const IconChecked = () => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24' fill='none'>
+      <path
+        d='M12 18.5C8.41015 18.5 5.5 15.5899 5.5 12C5.5 8.41015 8.41015 5.5 12 5.5C15.5899 5.5 18.5 8.41015 18.5 12C18.5 15.5899 15.5899 18.5 12 18.5Z'
+        fill='white'
+        stroke='currentColor'
+        strokeWidth='5'
+      />
+    </svg>
+  )
+}
+
+const UncheckedIcon = () => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24' fill='none'>
+      <path
+        d='M12 20C7.58172 20 4 16.4183 4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12C20 16.4183 16.4183 20 12 20Z'
+        stroke='var(--mui-palette-text-secondary)'
+        strokeOpacity='0.7'
+        strokeWidth='2'
+      />
+    </svg>
+  )
+}
+
+const radio = {
+  MuiRadio: {
+    defaultProps: {
+      icon: <UncheckedIcon />,
+      checkedIcon: <IconChecked />
+    },
+    styleOverrides: {
+      root: ({ theme, ownerState }) => ({
+        ...(ownerState.size === 'small'
+          ? {
+              padding: theme.spacing(1),
+              '& svg': {
+                fontSize: '1.25rem'
+              }
+            }
+          : {
+              padding: theme.spacing(1.5),
+              '& svg': {
+                fontSize: '1.5rem'
+              }
+            }),
+        '&.Mui-checked:not(.Mui-disabled) svg': {
+          filter: 'drop-shadow(var(--mui-customShadows-xs))'
+        },
+        '&.Mui-disabled': {
+          opacity: 0.45,
+          '&:not(.Mui-checked)': {
+            color: 'var(--mui-palette-text-secondary)'
+          },
+          '&.Mui-checked.MuiRadio-colorPrimary': {
+            color: 'var(--mui-palette-primary-main)'
+          },
+          '&.Mui-checked.MuiRadio-colorSecondary': {
+            color: 'var(--mui-palette-secondary-main)'
+          },
+          '&.Mui-checked.MuiRadio-colorError': {
+            color: 'var(--mui-palette-error-main)'
+          },
+          '&.Mui-checked.MuiRadio-colorWarning': {
+            color: 'var(--mui-palette-warning-main)'
+          },
+          '&.Mui-checked.MuiRadio-colorInfo': {
+            color: 'var(--mui-palette-info-main)'
+          },
+          '&.Mui-checked.MuiRadio-colorSuccess': {
+            color: 'var(--mui-palette-success-main)'
+          }
+        }
+      })
+    }
+  }
+}
+
+export default radio

package/src/@core/theme/overrides/rating.js

@@ -0,0 +1,16 @@
+const Rating = theme => {
+  return {
+    MuiRating: {
+      styleOverrides: {
+        root: {
+          color: theme.palette.warning.main
+        },
+        iconEmpty: {
+          color: `rgba(${theme.palette.customColors.main}, 0.22)`
+        }
+      }
+    }
+  }
+}
+
+export default Rating

package/src/@core/theme/overrides/rating.jsx

@@ -0,0 +1,32 @@
+const rating = {
+  MuiRating: {
+    defaultProps: {
+      emptyIcon: <i className='ri-star-line' />,
+      icon: <i className='ri-star-fill' />
+    },
+    styleOverrides: {
+      root: {
+        gap: '2px',
+        color: 'var(--mui-palette-warning-main)',
+        '& i, & svg': {
+          flexShrink: 0
+        },
+        '& .MuiRating-decimal > label:first-of-type, & .MuiRating-decimal > span:first-of-type': {
+          zIndex: 1
+        }
+      },
+      sizeSmall: {
+        '& .MuiRating-icon i, & .MuiRating-icon svg': {
+          fontSize: '1.25rem'
+        }
+      },
+      sizeLarge: {
+        '& .MuiRating-icon i, & .MuiRating-icon svg': {
+          fontSize: '1.75rem'
+        }
+      }
+    }
+  }
+}
+
+export default rating

package/src/@core/theme/overrides/select.js

@@ -0,0 +1,19 @@
+const select = theme => {
+  return {
+    MuiSelect: {
+      styleOverrides: {
+        select: {
+          minWidth: '6rem !important',
+          '&.MuiTablePagination-select': {
+            minWidth: '1.5rem !important'
+          },
+          '&.Mui-disabled ~ .MuiOutlinedInput-notchedOutline': {
+            borderColor: `rgba(${theme.palette.customColors.main}, 0.22)`
+          }
+        }
+      }
+    }
+  }
+}
+
+export default select