ish-ui 1.0.50 → 1.0.55

package/dist/layout/resizable/ResizableWrapper.js

@@ -3,7 +3,7 @@ import { Resizable } from 're-resizable';
 import { withStyles, createStyles } from '@mui/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import clsx from 'clsx';
-const LIST_SIDE_BAR_DEFAULT_WIDTH = 265;
+const LIST_SIDE_BAR_DEFAULT_WIDTH = 280;
 const styles = (theme) => createStyles({
     sideBar: {
         borderRight: `1px solid ${theme.palette.divider}`,

package/dist/model/Theme.d.ts

@@ -17,7 +17,7 @@ type TextExtended = TypeText & {
     hint: string;
     grey: string;
 };
-export interface AppTheme extends Theme {
+export interface ThemeOverrides {
     heading: StringKeyObject<ColorGetter>;
     blog: StringKeyObject<StringKeyObject<ColorGetter>>;
     share: StringKeyObject<StringKeyObject<ColorGetter>>;
@@ -31,4 +31,5 @@ export interface AppTheme extends Theme {
     };
     addButtonColor: StringKeyObject<ColorGetter>;
 }
+export type AppTheme = Theme & ThemeOverrides;
 export {};

package/dist/themes/index.d.ts

@@ -1,2 +1 @@
 export * from './ishTheme';
-export * from './appTheme';

package/dist/themes/index.js

@@ -6,4 +6,3 @@
  *  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.
  */
 export * from './ishTheme';
-export * from './appTheme';

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'
@@ -226,20 +227,100 @@ const defaultThemePalette = {
         default: '#fbf9f0'
     },
     secondary: {
-        main: '#4b6390'
-    },
-    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',
+        main: '#5660AB'
     }
-};
-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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ish-ui",
   "sideEffects": false,
-  "version": "1.0.50",
+  "version": "1.0.55",
   "description": "UI elements for onCourse and other ish apps",
   "main": "main.ts",
   "devDependencies": {

package/dist/themes/appTheme.d.ts

@@ -1,4 +0,0 @@
-import { ThemeValues, AppTheme } from '../model';
-export declare const theme: {
-    [K in ThemeValues]: Partial<AppTheme>;
-};

package/dist/themes/appTheme.js

@@ -1,322 +0,0 @@
-import { grey, yellow } from '@mui/material/colors';
-import { alpha, darken } from '@mui/material/styles';
-export const theme = {
-    default: {
-        heading: {
-            color: '#4b6390'
-        },
-        blog: {
-            root: {
-                backgroundColor: yellow[100]
-            }
-        },
-        share: {
-            exportContainer: {
-                backgroundColor: '#302A22'
-            },
-            closeButton: {
-                color: '#f7941d'
-            },
-            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: '#f7941d'
-            },
-            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: '#f7941d',
-            },
-            helpMenu: {
-                color: '#f7941d',
-            }
-        },
-        tabList: {
-            listContainer: {
-                backgroundColor: '#4b6390'
-            },
-            listItemRoot: {
-                color: '#fff'
-            },
-        },
-        table: {
-            contrastRow: {
-                main: '#f8f8f8',
-                light: '#f4f3ec'
-            }
-        },
-        addButtonColor: {
-            color: '#f7941d'
-        }
-    },
-    dark: {
-        heading: {
-            color: '#9bbeff'
-        },
-        blog: {
-            root: {
-                backgroundColor: '#303030'
-            }
-        },
-        share: {
-            exportContainer: {
-                backgroundColor: '#302A22'
-            },
-            closeButton: {
-                color: '#f7941d'
-            },
-            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: '#f7941d'
-            },
-            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: '#f7941d',
-                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)
-        }
-    },
-    monochrome: {
-        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'
-        }
-    },
-    highcontrast: {
-        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'
-        }
-    }
-};