underpost 2.8.846 → 2.8.848

package/README.md

@@ -35,6 +35,12 @@ template
 
 
 
+
+
+
+
+
+
 
 
 
@@ -44,7 +50,7 @@ template
 <!-- badges -->
 
 
-[![Node.js CI](https://github.com/underpostnet/engine/actions/workflows/docker-image.ci.yml/badge.svg?branch=master)](https://github.com/underpostnet/engine/actions/workflows/docker-image.yml) [![Test](https://github.com/underpostnet/engine/actions/workflows/coverall.ci.yml/badge.svg?branch=master)](https://github.com/underpostnet/engine/actions/workflows/coverall.yml) [![Downloads](https://img.shields.io/npm/dm/underpost.svg)](https://www.npmjs.com/package/underpost) [![Socket Badge](https://socket.dev/api/badge/npm/package/underpost/2.8.846)](https://socket.dev/npm/package/underpost/overview/2.8.846) [![Coverage Status](https://coveralls.io/repos/github/underpostnet/engine/badge.svg?branch=master)](https://coveralls.io/github/underpostnet/engine?branch=master) [![Version](https://img.shields.io/npm/v/underpost.svg)](https://www.npmjs.org/package/underpost) [![License](https://img.shields.io/npm/l/underpost.svg)](https://www.npmjs.com/package/underpost)
+[![Node.js CI](https://github.com/underpostnet/engine/actions/workflows/docker-image.ci.yml/badge.svg?branch=master)](https://github.com/underpostnet/engine/actions/workflows/docker-image.yml) [![Test](https://github.com/underpostnet/engine/actions/workflows/coverall.ci.yml/badge.svg?branch=master)](https://github.com/underpostnet/engine/actions/workflows/coverall.yml) [![Downloads](https://img.shields.io/npm/dm/underpost.svg)](https://www.npmjs.com/package/underpost) [![Socket Badge](https://socket.dev/api/badge/npm/package/underpost/2.8.848)](https://socket.dev/npm/package/underpost/overview/2.8.848) [![Coverage Status](https://coveralls.io/repos/github/underpostnet/engine/badge.svg?branch=master)](https://coveralls.io/github/underpostnet/engine?branch=master) [![Version](https://img.shields.io/npm/v/underpost.svg)](https://www.npmjs.org/package/underpost) [![License](https://img.shields.io/npm/l/underpost.svg)](https://www.npmjs.com/package/underpost)
 
 
 <!-- end-badges -->
@@ -62,6 +68,12 @@ template
 
 
 
+
+
+
+
+
+
 
 
 
@@ -112,7 +124,7 @@ Run dev client server
 npm run dev
 ```
 <!-- -->
-## underpost ci/cd cli v2.8.846
+## underpost ci/cd cli v2.8.848
 
 ### Usage: `underpost [options] [command]`
   ```
@@ -142,6 +154,7 @@ Commands:
   fs [options] [path]                                        Manages file storage, defaulting to file upload operations.
   test [options] [deploy-list]                               Manages and runs tests, defaulting to the current Underpost default test suite.
   monitor [options] <deploy-id> [env]                        Manages health server monitoring for specified deployments.
+  ssh [options]                                              Import and start ssh server and client based on current default deployment ID.
   run [options] <runner-id> [path]                           Runs a script from the specified path.
   lxd [options]                                              Manages LXD containers and virtual machines.
   baremetal [options] [workflow-id] [hostname] [ip-address]  Manages baremetal server operations, including installation, database setup, commissioning, and user management.

package/bin/build.js

@@ -53,7 +53,9 @@ if (process.argv.includes('conf')) {
     fs.removeSync(toPath);
     fs.mkdirSync(toPath, { recursive: true });
     fs.copySync(`./engine-private/conf/${_confName}`, toPath);
-    if (fs.existsSync(`./engine-private/replica`)) {
+    if (process.argv.includes('remove-replica') && fs.existsSync(`../${privateRepoName}/replica`)) {
+      fs.removeSync(`../${privateRepoName}/replica`);
+    } else if (fs.existsSync(`./engine-private/replica`)) {
       const replicas = await fs.readdir(`./engine-private/replica`);
       for (const replica of replicas)
         if (replica.match(_confName))
@@ -187,4 +189,8 @@ const { DefaultConf } = await import(`../conf.${confName}.js`);
 
   fs.copyFileSync(`./.github/workflows/${repoName}.ci.yml`, `${basePath}/.github/workflows/${repoName}.ci.yml`);
   fs.copyFileSync(`./.github/workflows/${repoName}.cd.yml`, `${basePath}/.github/workflows/${repoName}.cd.yml`);
+
+  if (fs.existsSync(`./src/ws/${confName.split('-')[1]}`)) {
+    fs.copySync(`./src/ws/${confName.split('-')[1]}`, `${basePath}/src/ws/${confName.split('-')[1]}`);
+  }
 }

package/bin/deploy.js

@@ -835,6 +835,12 @@ ${shellExec(`git log | grep Author: | sort -u`, { stdout: true }).split(`\n`).jo
     }
 
     case 'ssh': {
+      // only import + start
+      // node bin/deploy ssh root@<host> <password> import
+
+      // generate + import + start
+      // node bin/deploy ssh root@<host> <password>
+
       const host = process.argv[3] ?? `root@${await ip.public.ipv4()}`;
       const domain = host.split('@')[1];
       const user = 'root'; // host.split('@')[0];
@@ -907,7 +913,7 @@ EOF`);
         // shellExec(`sudo echo "" > ~/.ssh/known_hosts`);
 
         // ssh-copy-id -i ~/.ssh/id_rsa.pub -p <port_number> <username>@<host>
-        shellExec(`ssh-copy-id -i ~/.ssh/id_rsa.pub -p ${port} ${host}`);
+        // shellExec(`ssh-copy-id -i ~/.ssh/id_rsa.pub -p ${port} ${host}`);
         // debug:
         // shellExec(`ssh -vvv ${host}`);
 

package/cli.md

@@ -1,4 +1,4 @@
-## underpost ci/cd cli v2.8.846
+## underpost ci/cd cli v2.8.848
 
 ### Usage: `underpost [options] [command]`
   ```
@@ -28,6 +28,7 @@ Commands:
   fs [options] [path]                                        Manages file storage, defaulting to file upload operations.
   test [options] [deploy-list]                               Manages and runs tests, defaulting to the current Underpost default test suite.
   monitor [options] <deploy-id> [env]                        Manages health server monitoring for specified deployments.
+  ssh [options]                                              Import and start ssh server and client based on current default deployment ID.
   run [options] <runner-id> [path]                           Runs a script from the specified path.
   lxd [options]                                              Manages LXD containers and virtual machines.
   baremetal [options] [workflow-id] [hostname] [ip-address]  Manages baremetal server operations, including installation, database setup, commissioning, and user management.
@@ -552,6 +553,20 @@ Options:
 ```
   
 
+### `ssh` :
+```
+ Usage: underpost ssh [options]
+
+Import and start ssh server and client based on current default deployment ID.
+
+Options:
+  --generate  Generates new ssh credential and stores it in current private
+              keys file storage.
+  -h, --help  display help for command
+ 
+```
+  
+
 ### `run` :
 ```
  Usage: underpost run [options] <runner-id> [path]
@@ -559,7 +574,7 @@ Options:
 Runs a script from the specified path.
 
 Arguments:
-  runner-id                                The runner ID to run. Options: spark-template, rmi, kill, secret, gpu-env, tf-gpu-test, dev-cluster, cyberia-ide, engine-ide, ssh-deploy, ide, monitor, db-client, cluster, deploy, tf-vae-test, deploy-job.
+  runner-id                                The runner ID to run. Options: spark-template, rmi, kill, secret, gpu-env, tf-gpu-test, dev-cluster, cyberia-ide, engine-ide, template-deploy, ssh-deploy, ide, monitor, db-client, cluster, deploy, tf-vae-test, deploy-job.
   path                                     The absolute or relative directory path where the script is located.
 
 Options:

package/conf.js

@@ -6,7 +6,7 @@ const DefaultConf = /**/ {
   client: {
     default: {
       metadata: {
-        title: 'Demo App',
+        title: 'PWA Demo App',
         backgroundImage: 'assets/background/white0-min.jpg',
         description: 'Web application',
         keywords: ['web', 'app', 'spa', 'demo', 'github-pages'],

package/docker-compose.yml

@@ -58,7 +58,7 @@ services:
           cpus: '0.25'
           memory: 20M
     labels: # labels in Compose file instead of Dockerfile
-      engine.version: '2.8.846'
+      engine.version: '2.8.848'
     networks:
       - load-balancer
 

package/manifests/deployment/dd-template-development/deployment.yaml

@@ -17,7 +17,7 @@ spec:
     spec:
       containers:
         - name: dd-template-development-blue
-          image: localhost/rockylinux9-underpost:v2.8.846
+          image: localhost/rockylinux9-underpost:v2.8.848
           #          resources:
           #            requests:
           #              memory: "124Ki"
@@ -100,7 +100,7 @@ spec:
     spec:
       containers:
         - name: dd-template-development-green
-          image: localhost/rockylinux9-underpost:v2.8.846
+          image: localhost/rockylinux9-underpost:v2.8.848
           #          resources:
           #            requests:
           #              memory: "124Ki"

package/package.json

@@ -2,7 +2,7 @@
     "type": "module",
     "main": "src/index.js",
     "name": "underpost",
-    "version": "2.8.846",
+    "version": "2.8.848",
     "description": "pwa api rest template",
     "scripts": {
         "start": "env-cmd -f .env.production node --max-old-space-size=8192 src/server",

package/src/api/user/user.service.js

@@ -444,7 +444,7 @@ const UserService = {
           _id: user._id,
         }).select(UserDto.select.get());
       } else throw new Error('invalid token');
-    }
+    } else delete req.body.password;
 
     switch (req.params.id) {
       default: {
@@ -453,9 +453,6 @@ const UserService = {
         });
         switch (user.role) {
           case 'admin': {
-            if (req.body.password !== undefined && req.body.password !== user.password)
-              req.body.password = await hashPassword(req.body.password);
-            else delete req.body.password;
             return await User.findByIdAndUpdate(req.params.id, req.body, {
               runValidators: true,
             });

package/src/cli/cluster.js

@@ -476,6 +476,12 @@ net.bridge.bridge-nf-call-arptables = 1
 net.ipv4.ip_forward = 1' | sudo tee ${iptableConfPath}`,
           { silent: true },
         );
+
+      // Increase inotify limits
+      shellExec(`sudo sysctl -w fs.inotify.max_user_watches=2099999999`);
+      shellExec(`sudo sysctl -w fs.inotify.max_user_instances=2099999999`);
+      shellExec(`sudo sysctl -w fs.inotify.max_queued_events=2099999999`);
+
       // shellExec(`sudo sysctl --system`); // Apply sysctl changes immediately
       // Apply NAT iptables rules.
       shellExec(`${underpostRoot}/manifests/maas/nat-iptables.sh`, { silent: true });

package/src/cli/deploy.js

@@ -528,13 +528,14 @@ node bin/deploy build-full-client ${deployId}
         }).trim(),
       );
     },
-    checkDeploymentReadyStatus(deployId, env, traffic) {
+    checkDeploymentReadyStatus(deployId, env, traffic, ignoresNames = []) {
       const cmd = `underpost config get container-status`;
       const pods = UnderpostDeploy.API.get(`${deployId}-${env}-${traffic}`);
       const readyPods = [];
       const notReadyPods = [];
       for (const pod of pods) {
         const { NAME } = pod;
+        if (ignoresNames && ignoresNames.find((t) => NAME.trim().toLowerCase().match(t.trim().toLowerCase()))) continue;
         if (
           shellExec(`sudo kubectl exec -i ${NAME} -- sh -c "${cmd}"`, { stdout: true }).match(
             `${deployId}-${env}-running-deployment`,

package/src/cli/index.js

@@ -316,6 +316,13 @@ program
   .description('Manages health server monitoring for specified deployments.')
   .action(Underpost.monitor.callback);
 
+// 'ssh' command: SSH management
+program
+  .command('ssh')
+  .option('--generate', 'Generates new ssh credential and stores it in current private keys file storage.')
+  .description('Import and start ssh server and client based on current default deployment ID.')
+  .action(Underpost.ssh.callback);
+
 // 'run' command: Run a script
 program
   .command('run')

package/src/cli/run.js

@@ -86,6 +86,13 @@ class UnderpostRun {
       shellExec(`${baseCommand} run ide /home/dd/engine`);
       shellExec(`${baseCommand} run ide /home/dd/engine/engine-private`);
     },
+    'template-deploy': (path, options = UnderpostRun.DEFAULT_OPTION) => {
+      const baseCommand = options.dev || true ? 'node bin' : 'underpost';
+      shellCd('/home/dd/engine');
+      shellExec(`git reset`);
+      shellExec(`${baseCommand} cmt . --empty ci package-pwa-microservices-template`);
+      shellExec(`${baseCommand} push . underpostnet/engine`);
+    },
     'ssh-deploy': (path, options = UnderpostRun.DEFAULT_OPTION) => {
       const baseCommand = options.dev || true ? 'node bin' : 'underpost';
       shellCd('/home/dd/engine');
@@ -206,12 +213,13 @@ class UnderpostRun {
       const currentTraffic = UnderpostDeploy.API.getCurrentTraffic(deployId);
       const targetTraffic = currentTraffic === 'blue' ? 'green' : 'blue';
       const env = 'production';
+      const ignorePods = UnderpostDeploy.API.get(`${deployId}-${env}-${targetTraffic}`).map((p) => p.NAME);
       shellExec(`sudo kubectl rollout restart deployment/${deployId}-${env}-${targetTraffic}`);
 
       let secondsElapsed = 0;
       logger.info('Deployment init', { deployId, env, targetTraffic });
 
-      while (!UnderpostDeploy.API.checkDeploymentReadyStatus(deployId, env, targetTraffic).ready) {
+      while (!UnderpostDeploy.API.checkDeploymentReadyStatus(deployId, env, targetTraffic, ignorePods).ready) {
         await timer(1000);
         secondsElapsed++;
         logger.info(`Deployment in progress, seconds elapsed: ${secondsElapsed}`);

package/src/cli/ssh.js

@@ -0,0 +1,32 @@
+import { getNpmRootPath } from '../server/conf.js';
+import { shellExec } from '../server/process.js';
+
+class UnderpostSSH {
+  static API = {
+    /**
+     * @method callback
+     * @param {object} options
+     * @param {boolean} options.generate - Generates new ssh credential and stores it in current private keys file storage.
+     * @description Import and start ssh server and client based on current default deployment ID.
+     */
+    callback: async (
+      options = {
+        generate: false,
+      },
+    ) => {
+      // only import + start
+      // node bin/deploy ssh root@<host> <password> import
+
+      // generate + import + start
+      // node bin/deploy ssh root@<host> <password>
+
+      shellExec(
+        `node bin/deploy ssh root@${process.env.DEFAULT_DEPLOY_HOST} ${process.env.DEFAULT_DEPLOY_PASSWORD ?? `''`}${
+          options.generate === true ? '' : ' import'
+        }`,
+      );
+    },
+  };
+}
+
+export default UnderpostSSH;

package/src/client/Default.index.js

@@ -16,6 +16,7 @@ import { SocketIo } from './components/core/SocketIo.js';
 import { SocketIoDefault } from './components/default/SocketIoDefault.js';
 import { ElementsDefault } from './components/default/ElementsDefault.js';
 import { Scroll } from './components/core/Scroll.js';
+import { CssDefaultDark, CssDefaultLight } from './components/default/CssDefault.js';
 
 const htmlMainBody = async () => {
   return html`<span>Hello World!!</span>`;
@@ -25,12 +26,15 @@ window.onload = () =>
   Worker.instance({
     router: RouterDefault,
     render: async () => {
-      await Css.loadThemes();
+      await Css.loadThemes([CssDefaultLight, CssDefaultDark]);
       await TranslateCore.Init();
       await TranslateDefault.Init();
       await Responsive.Init();
       await MenuDefault.Render({ htmlMainBody });
-      await SocketIo.Init({ channels: ElementsDefault.Data });
+      await SocketIo.Init({
+        channels: ElementsDefault.Data,
+        path: `/`,
+      });
       await SocketIoDefault.Init();
       await LogInDefault();
       await LogOutDefault();

package/src/client/components/core/Account.js

@@ -44,7 +44,7 @@ const Account = {
         { model: 'email', id: `account-email`, rules: [{ type: 'isEmpty' }, { type: 'isEmail' }] },
         {
           model: 'password',
-          defaultValue: '*******',
+          defaultValue: '#Changethis123',
           id: `account-password`,
           rules: [{ type: 'isStrongPassword' }],
         },

package/src/client/components/core/Css.js

@@ -51,8 +51,8 @@ const Css = {
     // if (!ThemesScope.find((t) => t.dark)) addTheme(CssCoreDark);
     // if (!ThemesScope.find((t) => !t.dark)) addTheme(CssCoreLight);
     if (ThemesScope.length === 0) {
-      addTheme(CssCoreDark);
       addTheme(CssCoreLight);
+      addTheme(CssCoreDark);
     }
     const localStorageTheme = localStorage.getItem('_theme');
     if (localStorageTheme && Themes[localStorageTheme]) {
@@ -199,6 +199,7 @@ const addTheme = (options) => {
       if (!['core', 'css-core'].includes(options.theme))
         render += darkTheme ? await CssCoreDark.render() : await CssCoreLight.render();
       render += await options.render();
+      render += await subThemeManager.render();
       htmls('.theme', render);
       TriggerThemeEvents();
     }
@@ -232,18 +233,29 @@ const borderChar = (px, color, selectors, hover = false) => {
     ${color}, ${px}px ${px}px ${px}px ${color};
   `;
 };
-
 const boxShadow = ({ selector }) => html`
-  <style>
-    ${selector} {
-      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-    }
-    ${selector}:hover {
-      box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 10px 30px 0 rgba(0, 0, 0, 0.3);
-    }
-  </style>
+  ${darkTheme
+    ? html`
+        <style>
+          ${selector} {
+            box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.1), 0 6px 20px 0 rgba(255, 255, 255, 0.08);
+          }
+          ${selector}:hover {
+            box-shadow: 0 8px 16px 0 rgba(255, 255, 255, 0.15), 0 10px 30px 0 rgba(255, 255, 255, 0.1);
+          }
+        </style>
+      `
+    : html`
+        <style>
+          ${selector} {
+            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+          }
+          ${selector}:hover {
+            box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 10px 30px 0 rgba(0, 0, 0, 0.3);
+          }
+        </style>
+      `}
 `;
-
 const renderMediaQuery = (mediaData) => {
   //  first limit should be '0'
   return html`
@@ -677,6 +689,166 @@ const scrollBarLightRender = () => {
     .join('');
 };
 
+/**
+ * Adjust hex color brightness toward white/black ("mix") or by modifying HSL lightness ("hsl").
+ *
+ * @param {string} hex - Color as '#rrggbb', 'rrggbb', '#rgb', or 'rgb'.
+ * @param {number} factor - -1..1 or -100..100 (percent). Positive = lighten, negative = darken.
+ * @param {{mode?: 'mix'|'hsl'}} [options]
+ * @returns {string} - Adjusted color as '#rrggbb' (lowercase).
+ */
+function adjustHex(hex, factor = 0.1, options = {}) {
+  if (typeof hex !== 'string') throw new TypeError('hex must be a string');
+  if (typeof factor !== 'number') throw new TypeError('factor must be a number');
+
+  // normalize factor: allow -100..100 or -1..1
+  if (factor > 1 && factor <= 100) factor = factor / 100;
+  if (factor < -1 && factor >= -100) factor = factor / 100;
+  factor = Math.max(-1, Math.min(1, factor));
+
+  const mode = options.mode === 'hsl' ? 'hsl' : 'mix';
+
+  // normalize hex
+  let h = hex.replace(/^#/, '').trim();
+  if (!(h.length === 3 || h.length === 6)) throw new Error('Invalid hex format');
+  if (h.length === 3)
+    h = h
+      .split('')
+      .map((c) => c + c)
+      .join('');
+
+  const r = parseInt(h.slice(0, 2), 16);
+  const g = parseInt(h.slice(2, 4), 16);
+  const b = parseInt(h.slice(4, 6), 16);
+
+  const clamp = (v, a = 0, z = 255) => Math.max(a, Math.min(z, v));
+
+  const rgbToHex = (rr, gg, bb) =>
+    '#' +
+    [rr, gg, bb]
+      .map((v) => Math.round(v).toString(16).padStart(2, '0'))
+      .join('')
+      .toLowerCase();
+
+  if (mode === 'mix') {
+    // positive: mix toward white (255); negative: mix toward black (0)
+    const mixChannel = (c) => {
+      if (factor >= 0) {
+        return clamp(Math.round(c + (255 - c) * factor));
+      } else {
+        const a = Math.abs(factor);
+        return clamp(Math.round(c * (1 - a)));
+      }
+    };
+    return rgbToHex(mixChannel(r), mixChannel(g), mixChannel(b));
+  } else {
+    // HSL mode: convert rgb to hsl, adjust L by factor, convert back
+    const rgbToHsl = (r, g, b) => {
+      r /= 255;
+      g /= 255;
+      b /= 255;
+      const max = Math.max(r, g, b),
+        min = Math.min(r, g, b);
+      let h = 0,
+        s = 0,
+        l = (max + min) / 2;
+      if (max !== min) {
+        const d = max - min;
+        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+        switch (max) {
+          case r:
+            h = (g - b) / d + (g < b ? 6 : 0);
+            break;
+          case g:
+            h = (b - r) / d + 2;
+            break;
+          case b:
+            h = (r - g) / d + 4;
+            break;
+        }
+        h /= 6;
+      }
+      return { h, s, l };
+    };
+
+    const hslToRgb = (h, s, l) => {
+      let r, g, b;
+      if (s === 0) {
+        r = g = b = l;
+      } else {
+        const hue2rgb = (p, q, t) => {
+          if (t < 0) t += 1;
+          if (t > 1) t -= 1;
+          if (t < 1 / 6) return p + (q - p) * 6 * t;
+          if (t < 1 / 2) return q;
+          if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+          return p;
+        };
+        const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+        const p = 2 * l - q;
+        r = hue2rgb(p, q, h + 1 / 3);
+        g = hue2rgb(p, q, h);
+        b = hue2rgb(p, q, h - 1 / 3);
+      }
+      return { r: r * 255, g: g * 255, b: b * 255 };
+    };
+
+    const { h: hh, s: ss, l: ll } = rgbToHsl(r, g, b);
+    // add factor to lightness (factor already normalized -1..1)
+    let newL = ll + factor;
+    newL = Math.max(0, Math.min(1, newL));
+    const { r: r2, g: g2, b: b2 } = hslToRgb(hh, ss, newL);
+    return rgbToHex(r2, g2, b2);
+  }
+}
+
+// Convenience helpers:
+function lightenHex(hex, percentOr01 = 0.1, options = {}) {
+  return adjustHex(hex, Math.abs(percentOr01), options);
+}
+function darkenHex(hex, percentOr01 = 0.1, options = {}) {
+  return adjustHex(hex, -Math.abs(percentOr01), options);
+}
+
+const subThemeManager = {
+  render: async function () {
+    if (darkTheme && this.renderDark) {
+      return await this.renderDark();
+    } else if (!darkTheme && this.renderLight) {
+      return await this.renderLight();
+    }
+    return html``;
+  },
+  lightColor: null,
+  setLightTheme: function (color) {
+    this.lightColor = color;
+    this.renderLight = async function () {
+      return html`<style>
+        button:hover,
+        .a-btn:hover,
+        .main-btn-menu-active {
+          color: ${this.lightColor};
+          background-color: ${lightenHex(this.lightColor, 0.8)};
+        }
+      </style>`;
+    };
+  },
+  darkColor: null,
+  setDarkTheme: function (color) {
+    this.darkColor = color;
+    this.renderDark = async function () {
+      return html`<style>
+        button:hover,
+        .a-btn:hover,
+        .main-btn-menu-active {
+          color: ${lightenHex(this.darkColor, 0.8)};
+          background-color: ${darkenHex(this.darkColor, 0.75)};
+        }
+      </style>`;
+    };
+  },
+};
+
 const scrollBarDarkRender = () => {
   return cssBrowserCodes
     .map(
@@ -685,8 +857,8 @@ const scrollBarDarkRender = () => {
     ::-` +
         b +
         `-scrollbar {
-      width: 5px;
-      height: 5px; 
+      width: 8px;
+      height: 8px; 
       /* line-height: 1em; */
     }
 
@@ -702,7 +874,7 @@ const scrollBarDarkRender = () => {
         b +
         `-scrollbar-thumb {
       background: #74747457;
-      border-radius: 3px;
+      border-radius: 4px;
     }
 
     /* Handle on hover */
@@ -907,4 +1079,8 @@ export {
   simpleIconsRender,
   extractBackgroundImageUrl,
   renderChessPattern,
+  subThemeManager,
+  lightenHex,
+  darkenHex,
+  adjustHex,
 };

package/src/client/components/core/CssCore.js

@@ -17,8 +17,8 @@ const CssCommonCore = async () => {
   await AgGrid.RenderStyle();
   return html`<style>
       .top-bar-app-icon {
-        width: 35px;
-        height: 35px;
+        width: 40px;
+        height: 40px;
       }
       .mini-title {
         font-size: 15px;
@@ -33,7 +33,7 @@ const CssCommonCore = async () => {
         top: 0;
         left: 0;
         transition: 0.3s;
-        height: 5px;
+        height: 10px;
         width: 100%;
         z-index: 11;
       }
@@ -51,7 +51,6 @@ const CssCommonCore = async () => {
         cursor: grabbing !important;
       }
       .btn-label-content {
-        height: 100%;
         top: 15px;
       }
       .badge {

package/src/client/components/core/Docs.js

@@ -16,10 +16,7 @@ const Docs = {
     const docData = this.Data.find((d) => d.type === type);
     const ModalId = `modal-docs-${docData.type}`;
     const { barConfig } = await Themes[Css.currentTheme]();
-    barConfig.buttons.close.onClick = () => {
-      setQueryPath({ path: 'docs' });
-      Modal.removeModal(ModalId);
-    };
+
     await Modal.Render({
       barConfig,
       title: renderViewTitle(docData),
@@ -53,6 +50,9 @@ const Docs = {
       }
     };
     Modal.Data[ModalId].onObserverListener[ModalId]();
+    Modal.Data[ModalId].onCloseListener[ModalId] = () => {
+      setQueryPath({ path: 'docs', queryPath: '' });
+    };
   },
   Data: [
     {