@deix/rossini-core 0.5.3 → 0.6.0

package/lib/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@deix/rossini-core",
-    "version": "0.5.3",
+    "version": "0.6.0",
     "main": "lib/src/index.js",
     "type": "commonjs",
     "repository": {

package/lib/src/components/buttons/Avatar/Avatar.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 export interface AvatarProps {
     /**
      * URL address for the logout API.

package/lib/src/components/buttons/Avatar/Avatar.js

@@ -49,21 +49,21 @@ const Avatar = ({ logoutUrl, accountSettingsUrl, }) => {
     const apiClient = (0, utils_1.useAPI)(accountSettingsUrl);
     const { data: userInfo } = (0, useKeycloak_1.useUserInfo)(apiClient);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(material_1.Tooltip, { title: userInfo?.preferredUserName || 'Anonymous User' },
-            react_1.default.createElement(material_1.Avatar, { alt: userInfo?.preferredUserName || 'user-name', sx: {
-                    bgcolor: muiTheme.palette.primary.main,
+        react_1.default.createElement(material_1.Tooltip, { title: userInfo?.preferredUserName || "Anonymous User" },
+            react_1.default.createElement(material_1.Avatar, { alt: userInfo?.preferredUserName || "user-name", sx: {
                     width: 24,
                     height: 24,
+                    bgcolor: muiTheme.palette.topbar.contrastText,
                 }, onClick: handleClick })),
         react_1.default.createElement(material_1.Menu, { anchorEl: anchorEl, open: open, onClose: handleClose, anchorOrigin: {
-                vertical: 'bottom',
-                horizontal: 'right',
+                vertical: "bottom",
+                horizontal: "right",
             }, transformOrigin: {
-                vertical: 'top',
-                horizontal: 'right',
+                vertical: "top",
+                horizontal: "right",
             }, PaperProps: {
                 sx: {
-                    padding: '4px',
+                    padding: "4px",
                 },
             } },
             accountSettingsUrl && (react_1.default.createElement(link_1.default, { href: accountSettingsUrl },

package/lib/src/components/buttons/LanguageSelect/LanguageSelect.d.ts

@@ -1,5 +1,5 @@
-import { FunctionComponent } from 'react';
-import { Language, Locale } from '../../../types/languages';
+import { FunctionComponent } from "react";
+import { Language, Locale } from "../../../types/languages";
 export interface LanguageSelectProps {
     /**
      * Internationalization locale.

package/lib/src/components/buttons/LanguageSelect/LanguageSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LanguageSelect.d.ts","sourceRoot":"","sources":["../../../../../src/components/buttons/LanguageSelect/LanguageSelect.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAgBjD,OAAO,EAGL,QAAQ,EACR,MAAM,EACP,MAAM,0BAA0B,CAAC;AAGlC,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;CACxB;AAED,eAAO,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,CA6EjE,CAAC"}
+{"version":3,"file":"LanguageSelect.d.ts","sourceRoot":"","sources":["../../../../../src/components/buttons/LanguageSelect/LanguageSelect.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAiBjD,OAAO,EAGL,QAAQ,EACR,MAAM,EACP,MAAM,0BAA0B,CAAC;AAGlC,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;CACxB;AAED,eAAO,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,CA+EjE,CAAC"}

package/lib/src/components/buttons/LanguageSelect/LanguageSelect.js

@@ -11,14 +11,15 @@ const Language_1 = __importDefault(require("@mui/icons-material/Language"));
 const material_1 = require("@mui/material");
 const languages_1 = require("../../../types/languages");
 const translations_json_1 = __importDefault(require("./translations.json"));
-const LanguageSelect = ({ locale = 'en', languages = [
+const LanguageSelect = ({ locale = "en", languages = [
     {
-        id: 'en',
-        label: 'English',
-        countryCode: 'us',
-        MUILocale: 'enUS',
+        id: "en",
+        label: "English",
+        countryCode: "us",
+        MUILocale: "enUS",
     },
 ], }) => {
+    const muiTheme = (0, material_1.useTheme)();
     // Menu controls
     const [anchorEl, setAnchorEl] = react_1.default.useState(null);
     const open = Boolean(anchorEl);
@@ -34,18 +35,18 @@ const LanguageSelect = ({ locale = 'en', languages = [
     };
     const router = (0, router_1.useRouter)();
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(material_1.Tooltip, { title: translations_json_1.default['tooltip'][locale] },
+        react_1.default.createElement(material_1.Tooltip, { title: translations_json_1.default["tooltip"][locale] },
             react_1.default.createElement(material_1.IconButton, { component: 'span', "aria-label": 'language', onClick: openOptions },
-                react_1.default.createElement(Language_1.default, null))),
+                react_1.default.createElement(Language_1.default, { htmlColor: muiTheme.palette.topbar.contrastText }))),
         react_1.default.createElement(material_1.Menu, { anchorEl: anchorEl, id: 'language-menu', open: open, onClose: closeOptions, onClick: closeOptions, anchorOrigin: {
-                vertical: 'bottom',
-                horizontal: 'right',
+                vertical: "bottom",
+                horizontal: "right",
             }, transformOrigin: {
-                vertical: 'top',
-                horizontal: 'right',
+                vertical: "top",
+                horizontal: "right",
             }, PaperProps: {
                 sx: {
-                    padding: '4px',
+                    padding: "4px",
                 },
             } },
             react_1.default.createElement(material_1.MenuList, { dense: true }, languages?.map((lang) => (react_1.default.createElement(link_1.default, { key: lang.id, href: router.asPath, locale: lang.id },

package/lib/src/components/layout/components/Sidebar/Sidebar.d.ts

@@ -1,6 +1,6 @@
-import React, { ReactElement } from 'react';
-import { Variant } from '@mui/material/styles/createTypography';
-import { Locale, StringTranslation } from '../../../../types/languages';
+import React, { ReactElement } from "react";
+import { Variant } from "@mui/material/styles/createTypography";
+import { Locale, StringTranslation } from "../../../../types/languages";
 export interface SidebarLink {
     /**
      * Unique identifier of the link.

package/lib/src/components/layout/components/Sidebar/Sidebar.js

@@ -42,12 +42,12 @@ const Sidebar = ({ links, open, isMobile, logo, locale, onClose, }) => {
     // Handle default item icon and change color according to selection
     const icons = (link, selected) => {
         const color = selected
-            ? muiTheme.palette.primary.main
-            : muiTheme.palette.linkNotActive.main;
+            ? muiTheme.palette.sidebar.contrastText
+            : muiTheme.palette.sidebar.light;
         return (react_1.default.createElement(material_1.ListItemIcon, { color: color }, link.sidebarIcon ? (link.sidebarIcon(color)) : (react_1.default.createElement(ArrowRightOutlined_1.default, { htmlColor: color }))));
     };
     // Persist which items of the sidebar are open to avoid resetting on page change
-    const [sidebarItemOpen, setSidebarItemOpen] = (0, utils_1.usePersistedState)('sidebarItemOpen', {});
+    const [sidebarItemOpen, setSidebarItemOpen] = (0, utils_1.usePersistedState)("sidebarItemOpen", {});
     const handleOpenSidebarItem = (item) => {
         const oldOpenState = { ...sidebarItemOpen };
         oldOpenState[item] =
@@ -81,39 +81,39 @@ const Sidebar = ({ links, open, isMobile, logo, locale, onClose, }) => {
                 }
             })
                 .map((link) => {
-                const selected = link.path === '/'
-                    ? pathname === '/'
+                const selected = link.path === "/"
+                    ? pathname === "/"
                     : pathname.slice(1).startsWith(link.path.slice(1));
                 if (!link.subPages) {
                     return (react_1.default.createElement(link_1.default, { key: link.id, href: link.path },
                         react_1.default.createElement(material_1.ListItemButton, { selected: selected, style: {
-                                paddingLeft: options.level === 1 && open ? '32px' : '22px',
+                                paddingLeft: options.level === 1 && open ? "32px" : "22px",
                                 paddingTop: options.level === 1 ? 0 : 8,
                                 paddingBottom: options.level === 1 ? 0 : 8,
-                                borderTopRightRadius: '20px',
-                                borderBottomRightRadius: '20px',
+                                borderTopRightRadius: "20px",
+                                borderBottomRightRadius: "20px",
                             } },
                             icons(link, selected),
                             react_1.default.createElement(material_1.ListItemText, { style: {
                                     color: selected
-                                        ? `${muiTheme.palette.primary.main} !important`
-                                        : `${muiTheme.palette.linkNotActive.main} !important`,
-                                    marginLeft: '-20px',
-                                    visibility: 'visible',
-                                }, disableTypography: true, primary: react_1.default.createElement(material_1.Typography, { variant: link.labelVariant || 'h6', style: selected
-                                        ? { color: muiTheme.palette.primary.main }
-                                        : { color: muiTheme.palette.linkNotActive.main } }, (0, languages_1.isStringTranslation)(link.label)
+                                        ? `${muiTheme.palette.sidebar.contrastText} !important`
+                                        : `${muiTheme.palette.sidebar.light} !important`,
+                                    marginLeft: "-20px",
+                                    visibility: "visible",
+                                }, disableTypography: true, primary: react_1.default.createElement(material_1.Typography, { variant: link.labelVariant || "h6", style: selected
+                                        ? { color: muiTheme.palette.sidebar.contrastText }
+                                        : { color: muiTheme.palette.sidebar.light } }, (0, languages_1.isStringTranslation)(link.label)
                                     ? link.label[locale]
                                     : link.label) }))));
                 }
                 return (react_1.default.createElement("div", { key: link.id },
                     react_1.default.createElement(link_1.default, { href: link.path },
                         react_1.default.createElement(material_1.ListItemButton, { key: link.id, selected: selected, style: {
-                                paddingLeft: '22px',
+                                paddingLeft: "22px",
                                 paddingTop: 8,
                                 paddingBottom: 8,
-                                borderTopRightRadius: '20px',
-                                borderBottomRightRadius: '20px',
+                                borderTopRightRadius: "20px",
+                                borderBottomRightRadius: "20px",
                             }, onClick: (_evt) => {
                                 if (!sidebarItemOpen[link.id]) {
                                     handleOpenSidebarItem(link.id);
@@ -122,13 +122,13 @@ const Sidebar = ({ links, open, isMobile, logo, locale, onClose, }) => {
                             icons(link, selected),
                             react_1.default.createElement(material_1.ListItemText, { style: {
                                     color: selected
-                                        ? `${muiTheme.palette.primary.main} !important`
-                                        : `${muiTheme.palette.linkNotActive.main} !important`,
-                                    marginLeft: '-20px',
-                                    visibility: 'visible',
-                                }, disableTypography: true, primary: react_1.default.createElement(material_1.Typography, { variant: link.labelVariant || 'h6', style: selected
-                                        ? { color: muiTheme.palette.primary.main }
-                                        : { color: muiTheme.palette.linkNotActive.main } }, (0, languages_1.isStringTranslation)(link.label)
+                                        ? `${muiTheme.palette.sidebar.contrastText} !important`
+                                        : `${muiTheme.palette.sidebar.light} !important`,
+                                    marginLeft: "-20px",
+                                    visibility: "visible",
+                                }, disableTypography: true, primary: react_1.default.createElement(material_1.Typography, { variant: link.labelVariant || "h6", style: selected
+                                        ? { color: muiTheme.palette.sidebar.contrastText }
+                                        : { color: muiTheme.palette.sidebar.light } }, (0, languages_1.isStringTranslation)(link.label)
                                     ? link.label[locale]
                                     : link.label) }),
                             sidebarItemOpen[link.id] ? (react_1.default.createElement(material_1.IconButton, { onClick: (e) => {
@@ -156,40 +156,40 @@ const Sidebar = ({ links, open, isMobile, logo, locale, onClose, }) => {
             })
                 // .filter((l) => l.id !== 'settings')
                 .map((link) => {
-                const selected = link.path === '/'
-                    ? pathname === '/'
+                const selected = link.path === "/"
+                    ? pathname === "/"
                     : pathname.slice(1).startsWith(link.path.slice(1));
                 if (link.subPages) {
                     return (react_1.default.createElement("div", { key: link.id },
                         react_1.default.createElement(material_1.ListItemButton, { selected: selected, style: {
-                                paddingLeft: '22px',
+                                paddingLeft: "22px",
                                 paddingTop: 8,
                                 paddingBottom: 8,
-                                borderTopRightRadius: '20px',
-                                borderBottomRightRadius: '20px',
+                                borderTopRightRadius: "20px",
+                                borderBottomRightRadius: "20px",
                             }, onClick: (evt) => handleOpenSidebarMenu(link.id, evt) },
                             react_1.default.createElement(material_1.Tooltip, { title: (0, languages_1.isStringTranslation)(link.label)
                                     ? link.label[locale]
                                     : link.label, placement: 'right', enterDelay: 600, enterNextDelay: 600, arrow: true }, icons(link, selected))),
                         react_1.default.createElement(material_1.Menu, { id: `${link.id}-subpages-menu`, anchorEl: subPagesMenuAnchorEl[link.id], open: Boolean(subPagesMenuAnchorEl[link.id]), onClose: (_evt) => handleCloseSidebarMenu(link.id), anchorOrigin: {
-                                vertical: 'top',
-                                horizontal: 'right',
+                                vertical: "top",
+                                horizontal: "right",
                             }, transformOrigin: {
-                                vertical: 'top',
-                                horizontal: 'left',
+                                vertical: "top",
+                                horizontal: "left",
                             }, PaperProps: {
                                 sx: {
-                                    borderRadius: '2px',
-                                    padding: '2px',
-                                    overflow: 'visible',
+                                    borderRadius: "2px",
+                                    padding: "2px",
+                                    overflow: "visible",
                                 },
                             } }, link.subPages.map((subPage) => (react_1.default.createElement(link_1.default, { key: subPage.id, href: subPage.path },
                             react_1.default.createElement(material_1.MenuItem, null,
                                 icons(subPage, selected),
                                 react_1.default.createElement(material_1.ListItemText, { style: {
                                         color: selected
-                                            ? `${muiTheme.palette.primary.main} !important`
-                                            : `${muiTheme.palette.linkNotActive.main} !important`,
+                                            ? `${muiTheme.palette.sidebar.contrastText} !important`
+                                            : `${muiTheme.palette.sidebar.light} !important`,
                                     } }, (0, languages_1.isStringTranslation)(subPage.label)
                                     ? subPage.label[locale]
                                     : subPage.label))))))));
@@ -197,11 +197,11 @@ const Sidebar = ({ links, open, isMobile, logo, locale, onClose, }) => {
                 else {
                     return (react_1.default.createElement(link_1.default, { key: link.id, href: link.path },
                         react_1.default.createElement(material_1.ListItemButton, { selected: selected, style: {
-                                paddingLeft: '22px',
+                                paddingLeft: "22px",
                                 paddingTop: 8,
                                 paddingBottom: 8,
-                                borderTopRightRadius: '20px',
-                                borderBottomRightRadius: '20px',
+                                borderTopRightRadius: "20px",
+                                borderBottomRightRadius: "20px",
                             } },
                             react_1.default.createElement(material_1.Tooltip, { title: (0, languages_1.isStringTranslation)(link.label)
                                     ? link.label[locale]
@@ -210,27 +210,27 @@ const Sidebar = ({ links, open, isMobile, logo, locale, onClose, }) => {
             }));
         }
     };
-    return (react_1.default.createElement(material_1.Drawer, { anchor: 'left', onClose: onClose, open: open, variant: isMobile ? 'temporary' : 'permanent', sx: {
+    return (react_1.default.createElement(material_1.Drawer, { anchor: 'left', onClose: onClose, open: open, variant: isMobile ? "temporary" : "permanent", sx: {
             flexShrink: 0,
-            whiteSpace: 'nowrap',
-            height: '100%',
+            whiteSpace: "nowrap",
+            height: "100%",
             width: {
-                xs: open ? '65%' : `${parseInt(muiTheme.spacing(10), 10) + 1}px`,
-                sm: open ? '50%' : `${parseInt(muiTheme.spacing(10), 10) + 1}px`,
-                md: open ? '300px' : `${parseInt(muiTheme.spacing(10), 10) + 1}px`,
+                xs: open ? "65%" : `${parseInt(muiTheme.spacing(10), 10) + 1}px`,
+                sm: open ? "50%" : `${parseInt(muiTheme.spacing(10), 10) + 1}px`,
+                md: open ? "300px" : `${parseInt(muiTheme.spacing(10), 10) + 1}px`,
             },
         }, PaperProps: {
             sx: {
                 // pr: 1,
                 width: {
-                    xs: open ? '65%' : `${parseInt(muiTheme.spacing(10), 10) + 1}px`,
-                    sm: open ? '50%' : `${parseInt(muiTheme.spacing(10), 10) + 1}px`,
-                    md: open ? '300px' : `${parseInt(muiTheme.spacing(10), 10) + 1}px`,
+                    xs: open ? "65%" : `${parseInt(muiTheme.spacing(10), 10) + 1}px`,
+                    sm: open ? "50%" : `${parseInt(muiTheme.spacing(10), 10) + 1}px`,
+                    md: open ? "300px" : `${parseInt(muiTheme.spacing(10), 10) + 1}px`,
                 },
                 background: muiTheme.palette.sidebar.main,
             },
         } },
-        react_1.default.createElement(material_1.List, { style: { marginTop: '19px' } }, handler(links, { level: 0 })),
+        react_1.default.createElement(material_1.List, { style: { marginTop: "19px" } }, handler(links, { level: 0 })),
         react_1.default.createElement("div", { style: { flexGrow: 1 } }),
         logo));
 };

package/lib/src/components/layout/components/Topbar/Topbar.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
-import { Language, Locale } from '../../../../types/languages';
-import { AvatarProps } from '../../../buttons/Avatar/Avatar';
+import React from "react";
+import { Language, Locale } from "../../../../types/languages";
+import { AvatarProps } from "../../../buttons/Avatar/Avatar";
 interface TopbarProps {
     /**
      * If true the layout has a sidebar.
@@ -30,6 +30,8 @@ interface TopbarProps {
      * The props to be passed to the Avatar button component.
      */
     avatar?: AvatarProps;
+    backgroundColor?: string;
+    iconsColor?: string;
 }
 declare const Topbar: React.FC<TopbarProps>;
 export default Topbar;

package/lib/src/components/layout/components/Topbar/Topbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Topbar.d.ts","sourceRoot":"","sources":["../../../../../../src/components/layout/components/Topbar/Topbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAE/D,OAAO,EAAU,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAIrE,UAAU,WAAW;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,IAAI,EAAE,OAAO,CAAC;IACd;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB;;OAEG;IACH,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B;;OAEG;IACH,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA8DjC,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Topbar.d.ts","sourceRoot":"","sources":["../../../../../../src/components/layout/components/Topbar/Topbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,6BAA6B,CAAC;AAE/D,OAAO,EAAU,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAIrE,UAAU,WAAW;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,IAAI,EAAE,OAAO,CAAC;IACd;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB;;OAEG;IACH,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B;;OAEG;IACH,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAgEjC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/src/components/layout/components/Topbar/Topbar.js

@@ -38,11 +38,11 @@ const ElevationScroll_1 = __importDefault(require("./ElevationScroll"));
 const S = __importStar(require("./Topbar.styles"));
 const translations_json_1 = __importDefault(require("./translations.json"));
 const Topbar = (props) => {
-    const { hasSidebar = false, onSidebarClose, onSidebarOpen, open, locale, languages, avatar, } = props;
+    const { hasSidebar = false, onSidebarClose, onSidebarOpen, open, locale, languages, avatar, backgroundColor, iconsColor, } = props;
     const { resolvedTheme, setTheme } = (0, next_themes_1.useTheme)();
     const muiTheme = (0, material_1.useTheme)();
-    const SidebarIcon = open ? (react_1.default.createElement(MenuOpenTwoTone_1.default, { color: 'primary' })) : (react_1.default.createElement(MenuTwoTone_1.default, { color: 'primary' }));
-    const menuMessage = open ? translations_json_1.default['menuClose'][locale] : translations_json_1.default['menuOpen'][locale];
+    const SidebarIcon = open ? (react_1.default.createElement(MenuOpenTwoTone_1.default, { htmlColor: muiTheme.palette.topbar.contrastText })) : (react_1.default.createElement(MenuTwoTone_1.default, { htmlColor: muiTheme.palette.topbar.contrastText }));
+    const menuMessage = open ? translations_json_1.default["menuClose"][locale] : translations_json_1.default["menuOpen"][locale];
     return (react_1.default.createElement(ElevationScroll_1.default, { ...props },
         react_1.default.createElement(S.StyledAppBar, { position: 'static', theme: muiTheme },
             react_1.default.createElement(material_1.Toolbar, null,
@@ -52,10 +52,10 @@ const Topbar = (props) => {
                 react_1.default.createElement(index_1.LanguageSelect, { locale: locale, languages: languages }),
                 react_1.default.createElement(material_1.IconButton, { component: 'span', "aria-label": 'user options' },
                     react_1.default.createElement(Avatar_1.Avatar, { ...avatar })),
-                react_1.default.createElement(material_1.Tooltip, { title: resolvedTheme === 'light'
-                        ? translations_json_1.default['enableDark'][locale]
-                        : translations_json_1.default['disableDark'][locale] },
-                    react_1.default.createElement(material_1.IconButton, { component: 'span', "aria-label": 'toggle dark mode', onClick: () => setTheme(resolvedTheme === 'light' ? 'dark' : 'light') },
-                        react_1.default.createElement(ModeNight_1.default, null)))))));
+                react_1.default.createElement(material_1.Tooltip, { title: resolvedTheme === "light"
+                        ? translations_json_1.default["enableDark"][locale]
+                        : translations_json_1.default["disableDark"][locale] },
+                    react_1.default.createElement(material_1.IconButton, { component: 'span', "aria-label": 'toggle dark mode', onClick: () => setTheme(resolvedTheme === "light" ? "dark" : "light") },
+                        react_1.default.createElement(ModeNight_1.default, { htmlColor: muiTheme.palette.topbar.contrastText })))))));
 };
 exports.default = Topbar;

package/lib/src/types/palette.d.ts

@@ -1,14 +1,14 @@
-declare module '@mui/material/styles/createPalette' {
+declare module "@mui/material/styles/createPalette" {
     interface Palette {
         gradient: SimplePaletteColorOptions;
         linkNotActive: SimplePaletteColorOptions;
-        sidebar: SimplePaletteColorOptions;
+        sidebar: Required<SimplePaletteColorOptions>;
         topbar: SimplePaletteColorOptions;
     }
     interface PaletteOptions {
         gradient: SimplePaletteColorOptions;
         linkNotActive: SimplePaletteColorOptions;
-        sidebar: SimplePaletteColorOptions;
+        sidebar: Required<SimplePaletteColorOptions>;
         topbar: SimplePaletteColorOptions;
     }
 }

package/lib/src/types/palette.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../../../src/types/palette.ts"],"names":[],"mappings":"AACA,OAAO,QAAQ,oCAAoC,CAAC;IAClD,UAAU,OAAO;QACf,QAAQ,EAAE,yBAAyB,CAAC;QACpC,aAAa,EAAE,yBAAyB,CAAC;QACzC,OAAO,EAAE,yBAAyB,CAAC;QACnC,MAAM,EAAE,yBAAyB,CAAC;KACnC;IACD,UAAU,cAAc;QACtB,QAAQ,EAAE,yBAAyB,CAAC;QACpC,aAAa,EAAE,yBAAyB,CAAC;QACzC,OAAO,EAAE,yBAAyB,CAAC;QACnC,MAAM,EAAE,yBAAyB,CAAC;KACnC;CACF;AAED,OAAO,EAAE,CAAC"}
+{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../../../src/types/palette.ts"],"names":[],"mappings":"AACA,OAAO,QAAQ,oCAAoC,CAAC;IAClD,UAAU,OAAO;QACf,QAAQ,EAAE,yBAAyB,CAAC;QACpC,aAAa,EAAE,yBAAyB,CAAC;QACzC,OAAO,EAAE,QAAQ,CAAC,yBAAyB,CAAC,CAAC;QAC7C,MAAM,EAAE,yBAAyB,CAAC;KACnC;IACD,UAAU,cAAc;QACtB,QAAQ,EAAE,yBAAyB,CAAC;QACpC,aAAa,EAAE,yBAAyB,CAAC;QACzC,OAAO,EAAE,QAAQ,CAAC,yBAAyB,CAAC,CAAC;QAC7C,MAAM,EAAE,yBAAyB,CAAC;KACnC;CACF;AAED,OAAO,EAAE,CAAC"}

package/lib/src/utils/hooks/usePersistedState.js

@@ -11,7 +11,6 @@ function usePersistedState(name, defaultValue) {
     const [value, setValue] = (0, react_1.useState)(defaultValue);
     const firstRender = (0, react_1.useRef)(true);
     (0, react_1.useEffect)(() => {
-        firstRender.current = false;
         try {
             const localValueString = window.localStorage.getItem(name);
             if (localValueString) {
@@ -26,6 +25,7 @@ function usePersistedState(name, defaultValue) {
     }, [name, setValue]);
     (0, react_1.useEffect)(() => {
         if (firstRender.current) {
+            firstRender.current = false;
             return;
         }
         try {

package/lib/src/utils/theme/palette/index.d.ts

@@ -1,5 +1,5 @@
-import { PaletteOptions } from '@mui/material/styles';
-export type AllowedTheme = NonNullable<PaletteOptions['mode']>;
+import { PaletteOptions } from "@mui/material/styles";
+export type AllowedTheme = NonNullable<PaletteOptions["mode"]>;
 export declare const DEFAULT_THEME: AllowedTheme;
 export declare const defaultLightPalette: PaletteOptions;
 export declare const defaultDarkPalette: PaletteOptions;

package/lib/src/utils/theme/palette/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/utils/theme/palette/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtD,MAAM,MAAM,YAAY,GAAG,WAAW,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;AAE/D,eAAO,MAAM,aAAa,EAAE,YAAsB,CAAC;AAEnD,eAAO,MAAM,mBAAmB,EAAE,cAsCjC,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,cAoChC,CAAC;AAEF,eAAO,MAAM,eAAe,SACpB,YAAY,iBACH,cAAc,gBACf,cAAc,KAC3B,cAQF,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/utils/theme/palette/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtD,MAAM,MAAM,YAAY,GAAG,WAAW,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;AAE/D,eAAO,MAAM,aAAa,EAAE,YAAsB,CAAC;AAEnD,eAAO,MAAM,mBAAmB,EAAE,cA2CjC,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,cAyChC,CAAC;AAEF,eAAO,MAAM,eAAe,SACpB,YAAY,iBACH,cAAc,gBACf,cAAc,KAC3B,cAQF,CAAC"}

package/lib/src/utils/theme/palette/index.js

@@ -1,82 +1,92 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.adaptivePalette = exports.defaultDarkPalette = exports.defaultLightPalette = exports.DEFAULT_THEME = void 0;
-exports.DEFAULT_THEME = 'light';
+exports.DEFAULT_THEME = "light";
 exports.defaultLightPalette = {
-    mode: 'light',
+    mode: "light",
     gradient: {
         main: `linear-gradient(90deg, #008080, #00283D)`,
     },
     primary: {
-        main: '#008080',
+        main: "#008080",
     },
     secondary: {
-        main: '#E2634E',
+        main: "#E2634E",
     },
     success: {
-        main: '#26B540',
+        main: "#26B540",
     },
     info: {
-        main: '#2466F4',
+        main: "#2466F4",
     },
     warning: {
-        main: '#EA8A04',
+        main: "#EA8A04",
     },
     error: {
-        main: '#D3343F',
+        main: "#D3343F",
     },
     background: {
-        default: '#fafafa',
-        paper: '#ffffff',
+        default: "#fafafa",
+        paper: "#ffffff",
     },
     text: {
-        secondary: 'rgba(0,0,0,0.54)',
-        primary: 'rgba(0,0,0,0.87)',
-        disabled: 'rgba(0,0,0,0.38)',
+        secondary: "rgba(0,0,0,0.54)",
+        primary: "rgba(0,0,0,0.87)",
+        disabled: "rgba(0,0,0,0.38)",
     },
-    divider: 'rgba(0,0,0,0.12)',
+    divider: "rgba(0,0,0,0.12)",
     linkNotActive: {
-        main: '#afafaf',
+        main: "#afafaf",
     },
-    sidebar: { main: '#fafafa' },
-    topbar: { main: '#fafafa' },
+    sidebar: {
+        main: "#fafafa",
+        contrastText: "#008080",
+        light: "#afafaf",
+        dark: "#00283D",
+    },
+    topbar: { main: "#fafafa", contrastText: "#008080" },
 };
 exports.defaultDarkPalette = {
-    mode: 'dark',
+    mode: "dark",
     gradient: {
         main: `linear-gradient(90deg, #2CB2A7, #C6F8E7)`,
     },
     primary: {
-        main: '#2CB2A7',
+        main: "#2CB2A7",
     },
     secondary: {
-        main: '#E2634E',
+        main: "#E2634E",
     },
     success: {
-        main: '#26B540',
+        main: "#26B540",
     },
     info: {
-        main: '#2466F4',
+        main: "#2466F4",
     },
     warning: {
-        main: '#EA8A04',
+        main: "#EA8A04",
     },
     error: {
-        main: '#D3343F',
+        main: "#D3343F",
     },
     background: {
-        default: '#303030',
-        paper: '#424242',
+        default: "#303030",
+        paper: "#424242",
     },
     text: {
-        primary: '#ffffff',
-        secondary: 'rgba(255,255,255,0.7)',
-        disabled: 'rgba(255,255,255,0.5)',
-    },
-    divider: 'rgba(255,255,255,0.12)',
-    linkNotActive: { main: '#afafaf' },
-    sidebar: { main: '#303030' },
-    topbar: { main: '#303030' },
+        primary: "#ffffff",
+        secondary: "rgba(255,255,255,0.7)",
+        disabled: "rgba(255,255,255,0.5)",
+    },
+    divider: "rgba(255,255,255,0.12)",
+    linkNotActive: { main: "#afafaf" },
+    sidebar: {
+        main: "#303030",
+        contrastText: "#2CB2A7",
+        dark: "#000000",
+        light: "#afafaf",
+    },
+    topbar: { main: "#303030", contrastText: "#ffffff" },
 };
 const adaptivePalette = (mode, lightPalette, darkPalette) => {
     let light = exports.defaultLightPalette;
@@ -85,6 +95,6 @@ const adaptivePalette = (mode, lightPalette, darkPalette) => {
         light = lightPalette;
         dark = darkPalette;
     }
-    return mode === 'light' ? light : dark;
+    return mode === "light" ? light : dark;
 };
 exports.adaptivePalette = adaptivePalette;