ish-ui 1.0.54 → 1.1.0

package/dist/themes/ishTheme.js

@@ -5,9 +5,10 @@
  *
  *  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
  */
-import { createTheme } from '@mui/material/styles';
-import { theme } from './appTheme';
-import { DarkThemeKey, DefaultThemeKey, HighcontrastThemeKey, MonochromeThemeKey } from '../model';
+import { alpha, createTheme, darken } from '@mui/material/styles';
+import { DarkThemeKey, DefaultThemeKey, HighcontrastThemeKey, MonochromeThemeKey, } from '../model';
+import createPalette from '@mui/material/styles/createPalette';
+import { grey, yellow } from '@mui/material/colors';
 const createOverrides = (palette) => ({
     components: {
         MuiButtonBase: {
@@ -217,7 +218,7 @@ const commonTypography = {
     }
 };
 // Default Theme
-const defaultThemePalette = {
+const defaultThemePalette = createPalette({
     primary: {
         main: '#f7941d',
         contrastText: '#fff'
@@ -227,19 +228,99 @@ const defaultThemePalette = {
     },
     secondary: {
         main: '#5660AB'
-    },
-    text: {
-        secondary: 'rgba(0, 0, 0, 0.54)',
-        primary: 'rgba(0, 0, 0, 0.87)',
-        primaryEditable: 'rgba(0, 0, 0, 0.95)',
-        disabled: 'rgba(34, 34, 34, 0.38)',
-        hint: 'rgba(34, 34, 34, 0.38)',
-        grey: '#434343',
     }
-};
-export const defaultTheme = createTheme(Object.assign(Object.assign(Object.assign({ palette: defaultThemePalette }, commonTypography), theme.default), createOverrides(defaultThemePalette)));
+});
+const getDefaultThemeOverrides = (pallete) => ({
+    heading: {
+        color: pallete.secondary.main
+    },
+    blog: {
+        root: {
+            backgroundColor: yellow[100]
+        }
+    },
+    share: {
+        exportContainer: {
+            backgroundColor: '#302A22'
+        },
+        closeButton: {
+            color: pallete.primary.main
+        },
+        shareButton: {
+            color: '#302A22',
+            backgroundColor: '#fff',
+            backgroundColorHover: alpha('#fff', 0.9)
+        },
+        color: {
+            headerText: '#fff',
+            itemText: 'rgba(255,255,255,0.6)',
+            selectedItemText: 'rgba(255,255,255,1)',
+            customLabel: 'rgba(255,255,255,.5)'
+        }
+    },
+    statistics: {
+        coloredHeaderText: {
+            color: pallete.primary.main
+        },
+        enrolmentText: {
+            color: '#73cba7',
+            strokeColor: '#73cba7'
+        },
+        revenueText: {
+            color: '#ffd876',
+            strokeColor: '#ffd876'
+        },
+        rightColumn: {
+            color: alpha('rgba(0, 0, 0, 0.87)', 0.4)
+        }
+    },
+    appBar: {
+        header: {
+            background: '#fbf9f0',
+            color: '#222',
+        },
+        headerAlternate: {
+            background: '#fff',
+            color: '#222',
+        },
+    },
+    appBarButton: {
+        close: {
+            color: pallete.primary.main,
+        },
+        helpMenu: {
+            color: pallete.primary.main,
+        }
+    },
+    tabList: {
+        listContainer: {
+            backgroundColor: pallete.secondary.main
+        },
+        listItemRoot: {
+            color: '#fff'
+        },
+    },
+    table: {
+        contrastRow: {
+            main: '#f8f8f8',
+            light: '#f4f3ec'
+        }
+    },
+    addButtonColor: {
+        color: pallete.primary.main
+    },
+    palette: Object.assign(Object.assign({}, pallete), { text: {
+            secondary: 'rgba(0, 0, 0, 0.54)',
+            primary: 'rgba(0, 0, 0, 0.87)',
+            primaryEditable: 'rgba(0, 0, 0, 0.95)',
+            disabled: 'rgba(34, 34, 34, 0.38)',
+            hint: 'rgba(34, 34, 34, 0.38)',
+            grey: '#434343',
+        } })
+});
+export const defaultTheme = createTheme(Object.assign(Object.assign(Object.assign({ palette: defaultThemePalette }, commonTypography), getDefaultThemeOverrides(defaultThemePalette)), createOverrides(defaultThemePalette)));
 // Dark Theme
-const darkThemePalette = {
+const darkThemePalette = createPalette({
     mode: 'dark',
     common: { black: '#000', white: '#fff' },
     primary: {
@@ -252,26 +333,106 @@ const darkThemePalette = {
         paper: '#313131'
     },
     secondary: {
-        light: 'rgba(75, 99, 144, 1)',
-        main: '#9bbeff',
-        dark: 'rgba(75, 99, 144, 1)',
+        light: '#6971B4',
+        main: '#B4B8D9',
+        dark: '#6971B4',
         contrastText: '#fff'
     },
     error: {
         light: '#e57373', main: '#f44336', dark: '#d32f2f', contrastText: '#fff'
-    },
-    text: {
-        primary: 'rgba(255, 255, 255, 0.87)',
-        primaryEditable: 'rgba(255, 255, 255, 0.95)',
-        secondary: 'rgba(255, 255, 255, 0.65)',
-        disabled: 'rgba(255, 255, 255, 0.38)',
-        hint: 'rgba(255, 255, 255, 0.38)',
-        grey: 'rgba(255, 255, 255, 0.65)',
     }
-};
-export const darkTheme = createTheme(Object.assign(Object.assign(Object.assign({ palette: darkThemePalette }, commonTypography), theme.dark), createOverrides(darkThemePalette)));
+});
+const getDarkThemeOverrides = (pallete) => ({
+    heading: {
+        color: pallete.secondary.main
+    },
+    blog: {
+        root: {
+            backgroundColor: '#303030'
+        }
+    },
+    share: {
+        exportContainer: {
+            backgroundColor: '#302A22'
+        },
+        closeButton: {
+            color: pallete.primary.main
+        },
+        shareButton: {
+            color: '#302A22',
+            backgroundColor: '#fff',
+            backgroundColorHover: alpha('#fff', 0.9)
+        },
+        color: {
+            headerText: '#fff',
+            itemText: 'rgba(255,255,255,0.6)',
+            selectedItemText: 'rgba(255,255,255,1)',
+            customLabel: 'rgba(255,255,255,.5)'
+        }
+    },
+    statistics: {
+        coloredHeaderText: {
+            color: pallete.primary.main
+        },
+        enrolmentText: {
+            color: '#73cba7',
+            strokeColor: '#73cba7'
+        },
+        revenueText: {
+            color: '#ffd876',
+            strokeColor: '#ffd876'
+        },
+        rightColumn: {
+            color: alpha('rgba(255, 255, 255, 0.87)', 0.4)
+        }
+    },
+    appBar: {
+        header: {
+            background: '#1b1b1b',
+            color: '#fff',
+        },
+        headerAlternate: {
+            background: pallete.primary.main,
+            color: '#fff',
+        },
+    },
+    appBarButton: {
+        close: {
+            color: 'white'
+        },
+        helpMenu: {
+            color: '#fff'
+        }
+    },
+    tabList: {
+        listContainer: {
+            backgroundColor: '#302A22'
+        },
+        listItemRoot: {
+            color: '#fff'
+        },
+    },
+    table: {
+        contrastRow: {
+            main: '#696969',
+            light: '#696969bf'
+        }
+    },
+    addButtonColor: {
+        color: darken(grey[400], 0.1)
+    },
+    palette: Object.assign(Object.assign({}, pallete), { text: {
+            primary: 'rgba(255, 255, 255, 0.87)',
+            primaryEditable: 'rgba(255, 255, 255, 0.95)',
+            secondary: 'rgba(255, 255, 255, 0.65)',
+            disabled: 'rgba(255, 255, 255, 0.38)',
+            hint: 'rgba(255, 255, 255, 0.38)',
+            grey: 'rgba(255, 255, 255, 0.65)',
+        } })
+});
+export const darkTheme = createTheme(Object.assign(Object.assign(Object.assign({ palette: darkThemePalette }, commonTypography), getDarkThemeOverrides(darkThemePalette)), createOverrides(darkThemePalette)));
 // Monochrome Theme
-const monochromeThemePalette = {
+const monochromeThemePalette = createPalette({
     mode: 'light',
     common: { black: '#000', white: '#fff' },
     primary: {
@@ -280,26 +441,106 @@ const monochromeThemePalette = {
         contrastText: '#fff'
     },
     secondary: {
-        light: '#9bbeff',
+        light: '#B4B8D9',
         main: '#111111',
         dark: '#111111',
         contrastText: '#fff'
     },
     error: {
         light: '#e57373', main: '#f44336', dark: '#d32f2f', contrastText: '#fff'
-    },
-    text: {
-        primary: '#222222',
-        primaryEditable: '#181818',
-        secondary: 'rgba(34, 34, 34, 0.54)',
-        disabled: 'rgba(34, 34, 34, 0.38)',
-        hint: 'rgba(34, 34, 34, 0.38)',
-        grey: '#434343',
     }
-};
-export const monochromeTheme = createTheme(Object.assign(Object.assign(Object.assign({ palette: monochromeThemePalette }, commonTypography), theme.monochrome), createOverrides(monochromeThemePalette)));
+});
+const getMonochromeThemeOverrides = (pallete) => ({
+    heading: {
+        color: '#000'
+    },
+    blog: {
+        root: {
+            backgroundColor: '#eee'
+        }
+    },
+    share: {
+        exportContainer: {
+            backgroundColor: '#222222'
+        },
+        closeButton: {
+            color: '#eaeaea'
+        },
+        shareButton: {
+            color: '#fff',
+            backgroundColor: '#3e8ef7',
+            backgroundColorHover: alpha('#3e8ef7', 0.9)
+        },
+        color: {
+            headerText: '#fff',
+            itemText: 'rgba(255,255,255,0.6)',
+            selectedItemText: 'rgba(255,255,255,1)',
+            customLabel: 'rgba(255,255,255,.5)'
+        }
+    },
+    statistics: {
+        coloredHeaderText: {
+            color: '#222222'
+        },
+        enrolmentText: {
+            color: '#73cba7',
+            strokeColor: '#73cba7'
+        },
+        revenueText: {
+            color: '#ffd876',
+            strokeColor: '#ffd876'
+        },
+        rightColumn: {
+            color: alpha('#222222', 0.4)
+        }
+    },
+    appBar: {
+        header: {
+            background: '#fff',
+            color: '#000',
+        },
+        headerAlternate: {
+            background: '#f4f4f4',
+            color: '#000',
+        },
+    },
+    appBarButton: {
+        close: {
+            color: '#222222'
+        },
+        helpMenu: {
+            color: '#222222'
+        }
+    },
+    tabList: {
+        listContainer: {
+            backgroundColor: '#e3e3e3'
+        },
+        listItemRoot: {
+            color: '#000',
+        },
+    },
+    table: {
+        contrastRow: {
+            main: '#f8f8f8',
+            light: '#f4f3ec'
+        }
+    },
+    addButtonColor: {
+        color: '#000'
+    },
+    palette: Object.assign(Object.assign({}, pallete), { text: {
+            primary: '#222222',
+            primaryEditable: '#181818',
+            secondary: 'rgba(34, 34, 34, 0.54)',
+            disabled: 'rgba(34, 34, 34, 0.38)',
+            hint: 'rgba(34, 34, 34, 0.38)',
+            grey: '#434343',
+        } })
+});
+export const monochromeTheme = createTheme(Object.assign(Object.assign(Object.assign({ palette: monochromeThemePalette }, commonTypography), getMonochromeThemeOverrides(monochromeThemePalette)), createOverrides(monochromeThemePalette)));
 // High Contrast Theme
-const highcontrastThemePalette = {
+const highcontrastThemePalette = createPalette({
     common: { black: '#111111', white: '#fff' },
     primary: {
         main: '#111111',
@@ -318,20 +559,98 @@ const highcontrastThemePalette = {
     error: {
         light: '#e57373', main: '#f44336', dark: '#d32f2f', contrastText: '#fff'
     },
-    text: {
-        primary: '#111111',
-        primaryEditable: '#070707',
-        secondary: '#111111',
-        disabled: 'rgba(34, 34, 34, 0.38)',
-        hint: 'rgba(34, 34, 34, 0.38)',
-        grey: '#434343',
-    },
     action: {
         selected: 'rgba(0, 0, 0, 0.3)'
     },
     divider: 'rgba(0, 0, 0, 0.40)'
-};
-export const highcontrastTheme = createTheme(Object.assign(Object.assign(Object.assign({ palette: highcontrastThemePalette }, commonTypography), theme.highcontrast), createOverrides(highcontrastThemePalette)));
+});
+const getHighcontrastThemeOverrides = (pallete) => ({
+    heading: {
+        color: '#424242'
+    },
+    blog: {
+        root: {
+            backgroundColor: '#fff'
+        }
+    },
+    share: {
+        exportContainer: {
+            backgroundColor: '#eee'
+        },
+        closeButton: {
+            color: '#111111'
+        },
+        shareButton: {
+            color: '#fff',
+            backgroundColor: '#111111',
+            backgroundColorHover: alpha('#fff', 0.9)
+        },
+        color: {
+            headerText: '#000',
+            itemText: 'rgba(17,17,17,0.6)',
+            selectedItemText: 'rgba(17,17,17,1)',
+            customLabel: 'rgba(17,17,17,.5)'
+        }
+    },
+    statistics: {
+        coloredHeaderText: {
+            color: '#111111'
+        },
+        enrolmentText: {
+            color: '#111111'
+        },
+        revenueText: {
+            color: '#111111'
+        },
+        rightColumn: {
+            color: '#111111'
+        }
+    },
+    appBar: {
+        header: {
+            background: '#f2f2f2',
+            color: '#222',
+        },
+        headerAlternate: {
+            background: '#111',
+            color: '#fff',
+        },
+    },
+    appBarButton: {
+        close: {
+            color: '#222'
+        },
+        helpMenu: {
+            color: '#222'
+        }
+    },
+    tabList: {
+        listContainer: {
+            backgroundColor: '#292929'
+        },
+        listItemRoot: {
+            color: '#fff'
+        },
+    },
+    table: {
+        contrastRow: {
+            main: '#f8f8f8',
+            light: '#f4f3ec'
+        }
+    },
+    addButtonColor: {
+        color: '#111111'
+    },
+    palette: Object.assign(Object.assign({}, pallete), { text: {
+            primary: '#111111',
+            primaryEditable: '#070707',
+            secondary: '#111111',
+            disabled: 'rgba(34, 34, 34, 0.38)',
+            hint: 'rgba(34, 34, 34, 0.38)',
+            grey: '#434343',
+        } })
+});
+export const highcontrastTheme = createTheme(Object.assign(Object.assign(Object.assign({ palette: createPalette(highcontrastThemePalette) }, commonTypography), getHighcontrastThemeOverrides(highcontrastThemePalette)), createOverrides(highcontrastThemePalette)));
 export const currentTheme = (themeName) => {
     switch (themeName) {
         case DarkThemeKey: {

package/dist/timetable/miniCalendar/CalendarDay.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DateArgFunction, CalendarDayModel } from '../../model';
+import { CalendarDayModel, DateArgFunction } from '../../model';
 interface Props extends CalendarDayModel {
     dayIndexValue: number;
     isSameAsTarget?: boolean;

package/dist/timetable/miniCalendar/CalendarDay.js

@@ -7,56 +7,55 @@
  */
 import React, { memo } from 'react';
 import { Button } from '@mui/material';
-import clsx from 'clsx';
 import { alpha } from '@mui/material/styles';
 import { makeAppStyles } from '../../styles';
-const useStyles = makeAppStyles(theme => ({
-    root: {
-        padding: 0,
-        border: '2px solid transparent',
-        borderRadius: 4,
-        minWidth: 'initial',
-        boxShadow: 'none',
-        fontWeight: 'normal',
-        color: theme.palette.text.primary,
-        '&:active': {
-            boxShadow: 'none'
-        },
-        '&:focus': {
-            boxShadow: 'none'
-        },
-        '&::after': {
-            content: '\'\'',
-            position: 'absolute',
-            width: 4,
-            height: 4,
-            top: 4,
-            borderRadius: '100%'
+const useStyles = makeAppStyles()((theme, { dayIndexValue }) => {
+    const backgroundColor = alpha(theme.palette.primary.main, dayIndexValue);
+    return {
+        root: {
+            padding: 0,
+            border: '2px solid transparent',
+            borderRadius: 4,
+            minWidth: 'initial',
+            boxShadow: 'none',
+            fontWeight: 'normal',
+            color: theme.palette.text.primary,
+            '&:active': {
+                boxShadow: 'none'
+            },
+            '&:focus': {
+                boxShadow: 'none'
+            },
+            '&::after': {
+                content: '\'\'',
+                position: 'absolute',
+                width: 4,
+                height: 4,
+                top: 4,
+                borderRadius: '100%'
+            },
+            '&$same': {
+                border: `2px solid ${theme.palette.text.primary}`
+            }
         },
-        '&$same': {
-            border: `2px solid ${theme.palette.text.primary}`
-        }
-    },
-    same: {},
-    hasSession: ({ dayIndexValue }) => {
-        const backgroundColor = alpha(theme.palette.primary.main, dayIndexValue);
-        return {
+        same: {},
+        hasSession: {
             backgroundColor,
             color: theme.palette.getContrastText(backgroundColor),
             '&:hover': {
                 backgroundColor,
                 color: theme.palette.getContrastText(backgroundColor)
             }
-        };
-    },
-    isToday: {
-        fontWeight: 900
-    }
-}));
+        },
+        isToday: {
+            fontWeight: 900
+        }
+    };
+});
 const CalendarDay = memo((props) => {
     const { customClasses = {}, day, date, setTargetDay, dayIndexValue, hasSession, isSameAsTarget, isToday, disabled } = props;
-    const classes = useStyles({ dayIndexValue, hasSession, isToday });
-    return (React.createElement(Button, { className: clsx(classes.root, customClasses.root, isSameAsTarget && clsx(classes.same, customClasses.selected), {
+    const { classes, cx } = useStyles({ dayIndexValue });
+    return (React.createElement(Button, { className: cx(classes.root, customClasses.root, isSameAsTarget && cx(classes.same, customClasses.selected), {
             [customClasses.hasSession || classes.hasSession]: hasSession,
             [customClasses.today || classes.isToday]: isToday
         }), onClick: () => setTargetDay(date), classes: {

package/dist/timetable/miniCalendar/CalendarHeader.js

@@ -1,9 +1,8 @@
 import React from 'react';
 import { IconButton, Typography } from '@mui/material';
 import { KeyboardArrowLeft, KeyboardArrowRight } from '@mui/icons-material';
-import clsx from 'clsx';
 import { makeAppStyles } from '../../styles';
-const useStyles = makeAppStyles(theme => ({
+const useStyles = makeAppStyles()(theme => ({
     root: {
         display: 'flex',
         justifyContent: 'space-between',
@@ -12,8 +11,8 @@ const useStyles = makeAppStyles(theme => ({
     }
 }));
 const CalendarHeader = ({ month, year, previousMonth, nextMonth, customClasses = {} }) => {
-    const classes = useStyles();
-    return React.createElement("div", { className: clsx(classes.root, customClasses.root) },
+    const { classes, cx } = useStyles();
+    return React.createElement("div", { className: cx(classes.root, customClasses.root) },
         React.createElement(IconButton, { onClick: previousMonth, className: customClasses.leftButton },
             React.createElement(KeyboardArrowLeft, null)),
         React.createElement(Typography, { align: "center", className: customClasses.selectedMonth },

package/dist/timetable/miniCalendar/CalendarWeekPanel.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import WeekDay from './WeekDay';
-import clsx from 'clsx';
 import { makeAppStyles } from '../../styles';
-const useStyles = makeAppStyles(theme => ({
+const useStyles = makeAppStyles()(theme => ({
     root: {
         display: 'grid',
         gridTemplateColumns: `repeat(7, ${theme.spacing(4)})`,
@@ -14,7 +13,7 @@ const useStyles = makeAppStyles(theme => ({
 }));
 const week = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
 const CalendarWeekPanel = ({ className, dayClass, switchWeekDays, selectedWeekDays = [] }) => {
-    const classes = useStyles();
-    return (React.createElement("div", { className: clsx(classes.root, className) }, week.map((el, id) => (React.createElement(WeekDay, { key: id, id: id, name: el, selected: selectedWeekDays[id], click: switchWeekDays, className: dayClass })))));
+    const { classes, cx } = useStyles();
+    return (React.createElement("div", { className: cx(classes.root, className) }, week.map((el, id) => (React.createElement(WeekDay, { key: id, id: id, name: el, selected: selectedWeekDays[id], click: switchWeekDays, className: dayClass })))));
 };
 export default CalendarWeekPanel;

package/dist/timetable/miniCalendar/WeekDay.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import { Button, Typography } from '@mui/material';
-import clsx from 'clsx';
 import { makeAppStyles } from '../../styles';
-const useStyles = makeAppStyles(theme => ({
+const useStyles = makeAppStyles()(theme => ({
     weekButton: {
         padding: theme.spacing(0.5),
         minWidth: 'initial',
@@ -20,9 +19,9 @@ const useStyles = makeAppStyles(theme => ({
 }));
 const DivRoot = props => React.createElement("div", { className: props.className }, props.children);
 const WeekDay = ({ name, selected, click, id, className }) => {
-    const classes = useStyles();
+    const { classes, cx } = useStyles();
     const Root = click ? Button : DivRoot;
-    return React.createElement(Root, { className: clsx(classes.weekButton, {
+    return React.createElement(Root, { className: cx(classes.weekButton, {
             [classes.selectedWeekDay]: selected
         }, className), onClick: () => click(id), variant: selected ? 'contained' : 'text', color: selected ? 'primary' : 'inherit', disableElevation: true },
         React.createElement(Typography, { variant: "caption", align: "center", className: selected ? classes.weekDayText : '' }, name));