@nethru/ui 2.1.9 → 2.1.11

package/base/frame/Brand.js

@@ -5,13 +5,16 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 const Brand = /*#__PURE__*/forwardRef(({
   title,
   logoUri,
+  logoStyles,
   onLogoClick,
   ...props
 }, ref) => {
-  const logoStyles = useMemo(() => ({
-    cursor: onLogoClick ? 'pointer' : 'default'
-  }), [onLogoClick]);
+  const arrangedLogoStyles = useMemo(() => ({
+    cursor: onLogoClick ? 'pointer' : 'default',
+    ...logoStyles
+  }), [logoStyles, onLogoClick]);
   const titleStyles = useMemo(() => ({
+    color: 'var(--brand-text-color)',
     cursor: 'default'
   }), []);
   return /*#__PURE__*/_jsxs(Stack, {
@@ -23,7 +26,7 @@ const Brand = /*#__PURE__*/forwardRef(({
       component: "img",
       src: logoUri,
       onClick: onLogoClick,
-      sx: logoStyles,
+      sx: arrangedLogoStyles,
       alt: "logo"
     }), /*#__PURE__*/_jsx(Typography, {
       variant: "logo",

package/base/frame/sidebar/css/primary.module.css

@@ -24,7 +24,6 @@
     flex-direction: column;
     height: 50px;
     align-items: center;
-    color: #656565;
     cursor: pointer;
 }
 .nav-item .icon {
@@ -36,13 +35,13 @@
     border-radius: 6px;
 }
 .nav-item:hover .icon {
-    background-color: rgba(51,51,51,0.05);
+    background-color: var(--primary-menu-item-icon-hover-background-color);
 }
 .nav-item.active .icon {
-    color: #333;
-    background-color: rgba(51,51,51,0.1);
+    background-color: var(--primary-menu-item-icon-active-background-color);
 }
 .nav-item.active .text {
+    color: var(--primary-menu-item-text-active-color);
     font-weight: 600;
 }
 .container:hover .nav-item.active {
@@ -56,8 +55,16 @@
     height: 24px;
 }
 
+.icon > svg > path {
+    fill: var(--primary-menu-item-icon-color);
+}
+
+.nav-item.active .icon > svg > path {
+    fill: var(--primary-menu-item-icon-active-color);
+}
+
 .text {
-    color: #333;
+    color: var(--primary-menu-item-text-color);
     font-size: 10px;
     font-weight: 500;
     line-height: 1.4;

package/base/index.js

@@ -41,5 +41,4 @@ export { default as Switch } from "./Switch";
 export * from './frame/sidebar/SidebarContext';
 export { default as Error } from "./error/Error";
 export { default as HttpError } from "./error/HttpError";
-export { default as CircularProgress } from "./deprecated/CircularProgress";
-export { default as ShadowedSection } from "./deprecated/ShadowedSection";
+export { default as CircularProgress } from "./deprecated/CircularProgress";

package/base/styles/globalStyles.js

@@ -4,6 +4,21 @@ const globalStyles = {
   ':root': {
     '--body-background-color': blueGrey.contentBg,
     '--frame-background-color': blueGrey.frameBg,
+    '--brand-text-color': typography.logo.color,
+    '--primary-menu-item-text-color': '#333',
+    '--primary-menu-item-text-active-color': '#333',
+    '--primary-menu-item-icon-color': '#656565',
+    '--primary-menu-item-icon-active-color': '#333',
+    '--primary-menu-item-icon-active-background-color': 'rgba(51,51,51,0.1)',
+    '--primary-menu-item-icon-hover-background-color': 'rgba(51,51,51,0.05)',
+    // '--frame-background-color': 'darkslateblue',
+    // '--brand-text-color': 'white',
+    // '--primary-menu-item-text-color': 'white',
+    // '--primary-menu-item-text-active-color': 'yellow',
+    // '--primary-menu-item-icon-color': 'white',
+    // '--primary-menu-item-icon-active-color': 'yellow',
+    // '--primary-menu-item-icon-active-background-color': 'red',
+    // '--primary-menu-item-icon-hover-background-color': 'green',
     '--gnb-background-color': blueGrey.gnbBg,
     '--gnb-height': '64px',
     '--gnb-zindex': 1103,

package/base/styles/mui/appBar.js

@@ -1,10 +1,9 @@
 import typography from "../typography";
-import { blueGrey } from "../../colors";
 export const styles = {
   styleOverrides: {
     root: {
       fontFamily: typography.fontFamily,
-      backgroundColor: blueGrey.frameBg,
+      backgroundColor: 'var(--frame-background-color)',
       boxShadow: 'none',
       zIndex: `var(--gnb-zindex)`,
       '&.MuiAppBar-preview': {

package/base/styles/mui/dialogActions.js

@@ -2,7 +2,10 @@ export const styles = {
   styleOverrides: {
     root: {
       justifyContent: 'center',
-      padding: '0px 24px 24px 24px'
+      padding: '0px 24px 20px 24px',
+      '&.MuiPickersLayout-actionBar': {
+        padding: '12px 24px'
+      }
     }
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nethru/ui",
-  "version": "2.1.9",
+  "version": "2.1.11",
   "main": "base/index.js",
   "files": [
     "/base"

package/base/deprecated/ShadowedSection.js

@@ -1,36 +0,0 @@
-import { Box, Divider, Stack, Typography } from "@mui/material";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-export default function ShadowedSection({
-  label,
-  children,
-  marginTop = '20px',
-  sx,
-  ...props
-}) {
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Box, {
-      sx: {
-        mt: marginTop
-      },
-      children: /*#__PURE__*/_jsx(Typography, {
-        variant: "subtitle1",
-        children: label
-      })
-    }), /*#__PURE__*/_jsxs(Stack, {
-      sx: {
-        backgroundColor: '#fff',
-        boxShadow: '0 0.3rem 0.3rem rgba(0, 0, 0, 0.03) !important'
-      },
-      children: [/*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(Stack, {
-        sx: {
-          padding: 3,
-          ...sx
-        },
-        ...props,
-        children: children
-      }), /*#__PURE__*/_jsx(Divider, {})]
-    })]
-  });
-}