@nethru/ui 2.1.8 → 2.1.10

package/base/editor/Editor.js

@@ -3,11 +3,9 @@ import { Box, FormHelperText } from "@mui/material";
 import CodeMirror from '@uiw/react-codemirror';
 import { javascript } from '@codemirror/lang-javascript';
 import { json } from '@codemirror/lang-json';
-import { nScript } from './nScript';
-import { Decoration, EditorView } from "@codemirror/view";
+import { Decoration, EditorView, keymap as keyMapper } from "@codemirror/view";
 import { RegExpCursor, SearchCursor } from '@codemirror/search';
 import { StateEffect, StateField } from "@codemirror/state";
-import { keymap as keyMapper } from '@codemirror/view';
 import { defaultKeymap } from '@codemirror/commands';
 import borderRadius from "../styles/borderRadius";
 import { blue, grey, red, yellow } from "../colors";
@@ -135,7 +133,7 @@ export default function Editor({
       case 'json':
         return json();
       case 'nscript':
-        return nScript;
+        return undefined;
       default:
         return javascript({
           jsx: true
@@ -146,7 +144,8 @@ export default function Editor({
     return [keyMapper.of(keymap), keyMapper.of(defaultKeymap)];
   }, [keymap]);
   const extensionList = useMemo(() => {
-    const result = [languageExtension, EditorView.lineWrapping, highlight.extension, ...keymapExtension];
+    const result = [EditorView.lineWrapping, highlight.extension, ...keymapExtension];
+    if (languageExtension) result.push(languageExtension);
     if (onScroll) {
       result.push(EditorView.domEventHandlers({
         scroll(event, view) {

package/base/frame/Brand.js

@@ -12,6 +12,7 @@ const Brand = /*#__PURE__*/forwardRef(({
     cursor: onLogoClick ? 'pointer' : 'default'
   }), [onLogoClick]);
   const titleStyles = useMemo(() => ({
+    color: 'var(--brand-text-color)',
     cursor: 'default'
   }), []);
   return /*#__PURE__*/_jsxs(Stack, {

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.8",
+  "version": "2.1.10",
   "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, {})]
-    })]
-  });
-}