robobyte-front-builder 1.0.0

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

@@ -0,0 +1,83 @@
+const Card = (theme, skin) => {
+  return {
+    MuiCard: {
+      styleOverrides: {
+        root: {
+          boxShadow: skin !== 'bordered' ? theme.shadows[6] : theme.shadows[0],
+          ...(skin === 'bordered' && { border: `1px solid ${theme.palette.divider}` }),
+          '& .card-more-options': {
+            marginTop: theme.spacing(-1),
+            marginRight: theme.spacing(-3)
+          }
+        }
+      }
+    },
+    MuiCardHeader: {
+      styleOverrides: {
+        root: {
+          padding: theme.spacing(5),
+          '& + .MuiCardContent-root, & + .MuiCollapse-root .MuiCardContent-root': {
+            paddingTop: 0
+          },
+          '& .MuiCardHeader-subheader': {
+            fontSize: '0.875rem'
+          }
+        },
+        title: {
+          lineHeight: 1.6,
+          fontWeight: 500,
+          fontSize: '1.25rem'
+        },
+        action: {
+          marginTop: 0,
+          marginRight: 0
+        }
+      }
+    },
+    MuiCardContent: {
+      styleOverrides: {
+        root: {
+          padding: theme.spacing(5),
+          '& + .MuiCardContent-root': {
+            paddingTop: 0
+          },
+          '&:last-of-type': {
+            paddingBottom: theme.spacing(5)
+          },
+          '& + .MuiCardActions-root': {
+            paddingTop: 0
+          }
+        }
+      }
+    },
+    MuiCardActions: {
+      styleOverrides: {
+        root: {
+          padding: theme.spacing(5),
+          '&.card-action-dense': {
+            padding: theme.spacing(0, 2.5, 2.5),
+            '.MuiCard-root .MuiCardMedia-root + &': {
+              paddingTop: theme.spacing(2.5)
+            },
+            '.MuiCard-root &:first-of-type': {
+              paddingTop: theme.spacing(5),
+              paddingBottom: theme.spacing(5),
+              '& + .MuiCardContent-root': {
+                paddingTop: 0
+              },
+              '& + .MuiCardHeader-root': {
+                paddingTop: 0
+              }
+            }
+          },
+          '& .MuiButton-text': {
+            paddingLeft: theme.spacing(2.5),
+            paddingRight: theme.spacing(2.5)
+          }
+        }
+      }
+    }
+  }
+}
+
+export default Card

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

@@ -0,0 +1,95 @@
+const Icon = () => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24' fill='none'>
+      <path
+        d='M9 4H15C17.7614 4 20 6.23858 20 9V15C20 17.7614 17.7614 20 15 20H9C6.23858 20 4 17.7614 4 15V9C4 6.23858 6.23858 4 9 4Z'
+        stroke='var(--mui-palette-text-secondary)'
+        strokeOpacity='0.7'
+        strokeWidth='2'
+      />
+    </svg>
+  )
+}
+
+const IndeterminateIcon = () => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24' fill='none'>
+      <path
+        d='M3 9C3 5.68629 5.68629 3 9 3H15C18.3137 3 21 5.68629 21 9V15C21 18.3137 18.3137 21 15 21H9C5.68629 21 3 18.3137 3 15V9Z'
+        fill='currentColor'
+      />
+      <path d='M16 11.5H8V12.5H16V11.5Z' fill='white' />
+    </svg>
+  )
+}
+
+const CheckedIcon = () => {
+  return (
+    <svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24' fill='none'>
+      <path
+        d='M3 9C3 5.68629 5.68629 3 9 3H15C18.3137 3 21 5.68629 21 9V15C21 18.3137 18.3137 21 15 21H9C5.68629 21 3 18.3137 3 15V9Z'
+        fill='currentColor'
+      />
+      <path
+        d='M10.5001 14.0849L8.41508 11.9999L7.70508 12.7049L10.5001 15.4999L16.5001 9.49992L15.7951 8.79492L10.5001 14.0849Z'
+        fill='white'
+      />
+    </svg>
+  )
+}
+
+const checkbox = {
+  MuiCheckbox: {
+    defaultProps: {
+      icon: <Icon />,
+      indeterminateIcon: <IndeterminateIcon />,
+      checkedIcon: <CheckedIcon />
+    },
+    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.MuiCheckbox-colorPrimary': {
+            color: 'var(--mui-palette-primary-main)'
+          },
+          '&.Mui-checked.MuiCheckbox-colorSecondary': {
+            color: 'var(--mui-palette-secondary-main)'
+          },
+          '&.Mui-checked.MuiCheckbox-colorError': {
+            color: 'var(--mui-palette-error-main)'
+          },
+          '&.Mui-checked.MuiCheckbox-colorWarning': {
+            color: 'var(--mui-palette-warning-main)'
+          },
+          '&.Mui-checked.MuiCheckbox-colorInfo': {
+            color: 'var(--mui-palette-info-main)'
+          },
+          '&.Mui-checked.MuiCheckbox-colorSuccess': {
+            color: 'var(--mui-palette-success-main)'
+          }
+        }
+      })
+    }
+  }
+}
+
+export default checkbox

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

@@ -0,0 +1,72 @@
+// ** Util Imports
+import { hexToRGBA } from 'src/@core/utils/hex-to-rgba'
+
+const Chip = theme => {
+  return {
+    MuiChip: {
+      styleOverrides: {
+        outlined: {
+          '&.MuiChip-colorDefault': {
+            borderColor: `rgba(${theme.palette.customColors.main}, 0.22)`
+          }
+        },
+        avatar: {
+          color: theme.palette.text.primary
+        },
+        iconColorDefault: {
+          color: theme.palette.text.primary
+        },
+        deletableColorPrimary: {
+          '&.MuiChip-light .MuiChip-deleteIcon': {
+            color: hexToRGBA(theme.palette.primary.main, 0.7),
+            '&:hover': {
+              color: theme.palette.primary.main
+            }
+          }
+        },
+        deletableColorSecondary: {
+          '&.MuiChip-light .MuiChip-deleteIcon': {
+            color: hexToRGBA(theme.palette.secondary.main, 0.7),
+            '&:hover': {
+              color: theme.palette.secondary.main
+            }
+          }
+        },
+        deletableColorSuccess: {
+          '&.MuiChip-light .MuiChip-deleteIcon': {
+            color: hexToRGBA(theme.palette.success.main, 0.7),
+            '&:hover': {
+              color: theme.palette.success.main
+            }
+          }
+        },
+        deletableColorError: {
+          '&.MuiChip-light .MuiChip-deleteIcon': {
+            color: hexToRGBA(theme.palette.error.main, 0.7),
+            '&:hover': {
+              color: theme.palette.error.main
+            }
+          }
+        },
+        deletableColorWarning: {
+          '&.MuiChip-light .MuiChip-deleteIcon': {
+            color: hexToRGBA(theme.palette.warning.main, 0.7),
+            '&:hover': {
+              color: theme.palette.warning.main
+            }
+          }
+        },
+        deletableColorInfo: {
+          '&.MuiChip-light .MuiChip-deleteIcon': {
+            color: hexToRGBA(theme.palette.info.main, 0.7),
+            '&:hover': {
+              color: theme.palette.info.main
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+export default Chip

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

@@ -0,0 +1,114 @@
+const DataGrid = theme => {
+  return {
+    MuiDataGrid: {
+      styleOverrides: {
+        root: {
+          border: 0,
+          color: theme.palette.text.primary,
+          '& .MuiDataGrid-columnHeader:focus, & .MuiDataGrid-columnHeader:focus-within': {
+            outline: 'none'
+          }
+        },
+        toolbarContainer: {
+          paddingRight: `${theme.spacing(5)} !important`,
+          paddingLeft: `${theme.spacing(3.25)} !important`
+        },
+        columnHeaders: {
+          maxHeight: '54px !important',
+          minHeight: '54px !important',
+          lineHeight: '24px !important',
+          backgroundColor: theme.palette.customColors.tableHeaderBg
+        },
+        columnHeader: {
+          height: '54px',
+          '&:not(.MuiDataGrid-columnHeaderCheckbox)': {
+            padding: theme.spacing(4),
+            '&:first-of-type': {
+              paddingLeft: theme.spacing(5)
+            }
+          },
+          '&:last-of-type': {
+            paddingRight: theme.spacing(5)
+          }
+        },
+        columnHeaderCheckbox: {
+          maxWidth: '58px !important',
+          minWidth: '58px !important'
+        },
+        columnHeaderTitleContainer: {
+          padding: 0
+        },
+        columnHeaderTitle: {
+          fontSize: '0.65rem',
+          letterSpacing: '0.17px',
+          textTransform: 'uppercase'
+        },
+        columnSeparator: {
+          color: theme.palette.divider
+        },
+        virtualScroller: {
+          marginTop: '54px !important'
+        },
+        virtualScrollerRenderZone: {
+          '& .MuiDataGrid-row': {
+            maxHeight: '50px !important',
+            minHeight: '50px !important'
+          }
+        },
+        row: {
+          '&:last-child': {
+            '& .MuiDataGrid-cell': {
+              borderBottom: 0
+            }
+          }
+        },
+        cell: {
+          maxHeight: '50px !important',
+          minHeight: '50px !important',
+          fontSize: '0.45rem',
+          lineHeight: '20px !important',
+          borderColor: theme.palette.divider,
+          '&:not(.MuiDataGrid-cellCheckbox)': {
+            padding: theme.spacing(4),
+            '&:first-of-type': {
+              paddingLeft: theme.spacing(5)
+            }
+          },
+          '&:last-of-type': {
+            paddingRight: theme.spacing(5)
+          },
+          '&:focus, &:focus-within': {
+            outline: 'none'
+          }
+        },
+        cellCheckbox: {
+          maxWidth: '58px !important',
+          minWidth: '58px !important'
+        },
+        editInputCell: {
+          padding: 0,
+          color: theme.palette.text.primary,
+          '& .MuiInputBase-input': {
+            padding: 0
+          }
+        },
+        footerContainer: {
+          minHeight: '50px !important',
+          borderTop: `1px solid ${theme.palette.divider}`,
+          '& .MuiTablePagination-toolbar': {
+            minHeight: '50px !important'
+          },
+          '& .MuiTablePagination-select': {
+            color: theme.palette.text.primary
+          }
+        }
+      },
+      defaultProps: {
+        rowHeight: 50,
+        headerHeight: 54
+      }
+    }
+  }
+}
+
+export default DataGrid

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

@@ -0,0 +1,65 @@
+const DateTimePicker = theme => {
+  return {
+    MuiCalendarPicker: {
+      styleOverrides: {
+        root: {
+          '& [role="presentation"]': {
+            fontWeight: 400,
+            '& .PrivatePickersFadeTransitionGroup-root + .PrivatePickersFadeTransitionGroup-root > div': {
+              marginRight: 0
+            },
+            '& .MuiIconButton-sizeSmall': {
+              padding: theme.spacing(0.5)
+            },
+            '& + div .MuiIconButton-root:not(.Mui-disabled)': {
+              color: theme.palette.text.secondary
+            }
+          },
+          '& .PrivatePickersSlideTransition-root': {
+            minHeight: 240
+          },
+          '& .MuiCalendarPicker-viewTransitionContainer .MuiTypography-root': {
+            color: theme.palette.text.disabled
+          }
+        }
+      }
+    },
+    MuiPickersDay: {
+      styleOverrides: {
+        root: {
+          fontSize: '0.875rem',
+          letterSpacing: '0.15px'
+        }
+      }
+    },
+    MuiClockPicker: {
+      styleOverrides: {
+        arrowSwitcher: {
+          '& .MuiIconButton-root:not(.Mui-disabled)': {
+            color: theme.palette.text.secondary
+          },
+          '& + div': {
+            '& > div': {
+              backgroundColor:
+                theme.palette.mode === 'light' ? theme.palette.grey[50] : theme.palette.background.default,
+              '& ~ .MuiIconButton-root span.MuiTypography-caption': {
+                color: 'inherit'
+              }
+            }
+          }
+        }
+      }
+    },
+    MuiMonthPicker: {
+      styleOverrides: {
+        root: {
+          '& > .MuiTypography-root.Mui-selected': {
+            fontSize: '1rem'
+          }
+        }
+      }
+    }
+  }
+}
+
+export default DateTimePicker

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

@@ -0,0 +1,120 @@
+// ** Util Import
+import { hexToRGBA } from 'src/@core/utils/hex-to-rgba'
+
+const Dialog = (theme, skin) => {
+  return {
+    MuiDialog: {
+      styleOverrides: {
+        paper: {
+          boxShadow: theme.shadows[skin === 'bordered' ? 0 : 10],
+          ...(skin === 'bordered' && { border: `1px solid ${theme.palette.divider}` }),
+          '&:not(.MuiDialog-paperFullScreen)': {
+            '@media (max-width:599px)': {
+              margin: theme.spacing(4),
+              width: `calc(100% - ${theme.spacing(8)})`,
+              maxWidth: `calc(100% - ${theme.spacing(8)}) !important`
+            }
+          },
+          '& > .MuiList-root': {
+            paddingLeft: theme.spacing(1),
+            paddingRight: theme.spacing(1)
+          }
+        }
+      }
+    },
+    MuiDialogTitle: {
+      styleOverrides: {
+        root: {
+          padding: theme.spacing(5)
+        }
+      }
+    },
+    MuiDialogContent: {
+      styleOverrides: {
+        root: {
+          padding: theme.spacing(5),
+          '& + .MuiDialogContent-root': {
+            paddingTop: 0
+          },
+          '& + .MuiDialogActions-root': {
+            paddingTop: 0
+          },
+
+          // Styling for Mobile Date Picker starts
+          '& .PrivatePickersToolbar-root': {
+            padding: theme.spacing(4, 5),
+            color: theme.palette.primary.contrastText,
+            backgroundColor: theme.palette.primary.main,
+            '& .MuiTypography-root': {
+              color: theme.palette.primary.contrastText
+            },
+            '& span.MuiTypography-overline': {
+              fontSize: '1rem',
+              lineHeight: '24px',
+              letterSpacing: '0.15px'
+            },
+            '& ~ div[class^="css-"] > div[class^="css-"]': {
+              marginTop: theme.spacing(6),
+              marginBottom: theme.spacing(6),
+              '& > div[class^="css-"]': {
+                backgroundColor:
+                  theme.palette.mode === 'light' ? theme.palette.grey[50] : theme.palette.background.default,
+                '& ~ .MuiIconButton-root span.MuiTypography-caption': {
+                  color: 'inherit'
+                }
+              }
+            },
+            '& .PrivateTimePickerToolbar-hourMinuteLabel': {
+              alignItems: 'center',
+              '& > .MuiButton-root span.MuiTypography-root': {
+                fontWeight: 500,
+                lineHeight: '72px',
+                fontSize: '3.75rem',
+                letterSpacing: '-0.5px'
+              },
+              '& > .MuiTypography-root': {
+                color: hexToRGBA(theme.palette.primary.contrastText, 0.54),
+                '& + .MuiButton-root > span.MuiTypography-root': {
+                  color: hexToRGBA(theme.palette.primary.contrastText, 0.54)
+                }
+              }
+            },
+            '& .PrivateTimePickerToolbar-ampmSelection': {
+              '& .MuiButton-root': {
+                marginBottom: theme.spacing(2)
+              },
+              '.PrivateTimePickerToolbar-ampmLabel': {
+                lineHeight: 1.5,
+                fontWeight: 400,
+                fontSize: '1rem',
+                letterSpacing: '0.15px',
+                '&:not(.Mui-selected)': {
+                  color: hexToRGBA(theme.palette.primary.contrastText, 0.54)
+                }
+              }
+            }
+          },
+          '& [role="listbox"] > span[role="option"]': {
+            lineHeight: 1.25,
+            fontSize: '0.875rem'
+          }
+
+          // Styling for Mobile Date Picker ends
+        }
+      }
+    },
+    MuiDialogActions: {
+      styleOverrides: {
+        root: {
+          padding: theme.spacing(5),
+          '&.dialog-actions-dense': {
+            padding: theme.spacing(2.5),
+            paddingTop: 0
+          }
+        }
+      }
+    }
+  }
+}
+
+export default Dialog

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

@@ -0,0 +1,13 @@
+const Divider = theme => {
+  return {
+    MuiDivider: {
+      styleOverrides: {
+        root: {
+          margin: `${theme.spacing(2)} 0`
+        }
+      }
+    }
+  }
+}
+
+export default Divider

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

@@ -0,0 +1,20 @@
+const drawer = skin => ({
+  MuiDrawer: {
+    defaultProps: {
+      ...(skin === 'bordered' && {
+        PaperProps: {
+          elevation: 0
+        }
+      })
+    },
+    styleOverrides: {
+      paper: {
+        ...(skin !== 'bordered' && {
+          boxShadow: 'var(--mui-customShadows-lg)'
+        })
+      }
+    }
+  }
+})
+
+export default drawer

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

@@ -0,0 +1,13 @@
+const Button = theme => {
+  return {
+    MuiFab: {
+      styleOverrides: {
+        root: {
+          boxShadow: theme.shadows[5]
+        }
+      }
+    }
+  }
+}
+
+export default Button

package/src/@core/theme/overrides/form-control-label.js

@@ -0,0 +1,19 @@
+const formControlLabel = {
+  MuiFormControlLabel: {
+    styleOverrides: {
+      root: ({ theme }) => ({
+        marginInlineStart: theme.spacing(-2)
+      }),
+      label: {
+        '&, &.Mui-disabled': {
+          color: 'var(--mui-palette-text-primary) !important'
+        },
+        '&.Mui-disabled': {
+          opacity: 0.45
+        }
+      }
+    }
+  }
+}
+
+export default formControlLabel