update: model, layout styles

globals/settings.js

@@ -1,34 +1,32 @@
-module.exports = [
+import * as Icons from 'components/Icons'
+
+export default [
   {
     id: 'session_noexpire',
+    icon: <Icons.Watch />,
     type: 'switch',
     title: 'No expire session',
     description: 'Force the app to not expire any session... [Developer]',
   },
   {
     id: 'search_ontype',
+    icon: <Icons.CornerDownRight />,
     type: 'switch',
     title: 'Detect input on search bar',
-    description:
+    description: 'Force the app to automaticly search when a type input is detected... [Developer]',
-      'Force the app to automaticly search when a type input is detected... [Developer]',
   },
   {
     id: 'post_hidebar',
+    icon: <Icons.Menu />,
     type: 'switch',
     title: 'Auto hide postbar',
-    description: 'Force the app to dont hide the post actions (likes, comments ...etc) automaticly... [Developer]',
+    description: 'Force the app to hide the post actions (likes, comments ...etc) automaticly... [Developer]',
   },
   {
     id: 'verbosity',
+    icon: <Icons.Terminal />,
     type: 'switch',
     title: 'Enable core verbosity',
     description: 'Show all console logs... [Developer]',
-  },
+  }
-  {
-    id: 'overlay_loosefocus',
-    type: 'switch',
-    title: 'Overlay loose focus',
-    description: 'Close the overlay when loose focus',
-  },
-
 ]

globals/sidebar_menu.js

@@ -46,13 +46,38 @@ export default [
         }
     },
     {
-        id: 'notifications',
+        id: 'rooms',
-        title: 'Notifications',       
+        title: 'Rooms',       
-        icon: <Icons.Inbox/>,
+        icon: <Icons.Box />,
         attributes: {
             require: 'login'
         }
     },
+    {
+        id: 'workshop',
+        title: 'Workshop',       
+        icon: <Icons.Package />,
+        attributes: {
+            require: 'login'
+        }
+    },
+    {
+        id: 'streams',
+        title: 'Streams',       
+        icon: <Icons.Tv />,
+        attributes: {
+            require: 'login'
+        }
+    },
+    {
+        id: 'debug',
+        title: 'Debug',
+        icon: <Icons.Tool />,
+        attributes: {
+            position: "bottom",
+            require: "dev"
+        }
+    },
     {
         id: 'settings',
         title: 'Settings',

main/index.js

@@ -7,6 +7,7 @@ const {
   dialog,
   shell,
   screen,
+  BrowserView,
   globalShortcut
 } = require('electron');
 const path = require('path');
@@ -37,17 +38,22 @@ if (!gotTheLock) {
 
 function createWindow() {
   mainWindow = new BrowserWindow({
+    title: packagejson.title,
     icon: path.join(__dirname, './icon.png'),
     width: 1100,
     height: 700,
-    minWidth: 1100,
+    minWidth: 1256,
-    minHeight: 700,
+    minHeight: 755,
     show: true,
     frame: false,
     transparent: false,
+    hasShadow: true,
+    //webgl: true,
     visualEffectState: "followWindow",
     backgroundColor: '#00ffffff',
     webPreferences: {
+      //enableRemoteModule: true,
+      enableBlinkFeatures: true,
       experimentalFeatures: true,
       nodeIntegration: true,
       // Disable in dev since I think hot reload is messing with it
@@ -103,7 +109,10 @@ function createWindow() {
     },
     {
       label: 'Reload',
-      click: () => ipcMain.invoke("appRestart")
+      click: () => {
+        app.relaunch();
+        mainWindow.close();
+      }
     },
     {
       label: 'Close app',
@@ -117,7 +126,6 @@ function createWindow() {
   tray.on('double-click', () => mainWindow.show());
 
   mainWindow.loadURL(app_path);
-
   if (is.dev()) {
     mainWindow.webContents.openDevTools();
   }
@@ -137,7 +145,7 @@ app.on('ready', () => {
   if (is.dev()) {
     loadWindow = new BrowserWindow({ 
       width: 700, 
-      height: 600,
+      height: 500,
       frame: false,
       resizable: false,
       center: true,

main/partials/WindowAppBar.css

@@ -0,0 +1,30 @@
+.WindowAppBar {
+    -webkit-app-region: drag;
+    position: relative;
+    vertical-align: top;
+    width: 100%;
+    height: 25px;
+    z-index: 5000;
+    background-color: #2d2d2d;
+}
+
+.WindowControl {
+    float: right;
+    height: 100%;
+    padding: 0 20px 0 0;
+    transition: all 140ms linear;
+    color: #747474;
+}
+
+.anticon{  
+    margin: 0 15px 0 15px;
+    display: inline-block;
+    color: inherit;
+    font-style: normal;
+    vertical-align: middle;
+    text-align: center;
+}
+
+.WindowControl:hover{
+    color: #ffffff;
+}

main/partials/WindowAppBar.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="WindowAppBar.css">
+</head>
+<body>
+    
+<div class="WindowAppBar">
+    <div class="WindowControl">
+        <span role="img" aria-label="minus" id="minimize-button" class="anticon">
+            <svg viewBox="64 64 896 896" focusable="false" class="" data-icon="minus" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M872 474H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h720c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"></path></svg>
+        </span>
+        <span role="img" aria-label="fullscreen" class="anticon">
+            <svg viewBox="64 64 896 896" focusable="false" class="" data-icon="fullscreen" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M290 236.4l43.9-43.9a8.01 8.01 0 00-4.7-13.6L169 160c-5.1-.6-9.5 3.7-8.9 8.9L179 329.1c.8 6.6 8.9 9.4 13.6 4.7l43.7-43.7L370 423.7c3.1 3.1 8.2 3.1 11.3 0l42.4-42.3c3.1-3.1 3.1-8.2 0-11.3L290 236.4zm352.7 187.3c3.1 3.1 8.2 3.1 11.3 0l133.7-133.6 43.7 43.7a8.01 8.01 0 0013.6-4.7L863.9 169c.6-5.1-3.7-9.5-8.9-8.9L694.8 179c-6.6.8-9.4 8.9-4.7 13.6l43.9 43.9L600.3 370a8.03 8.03 0 000 11.3l42.4 42.4zM845 694.9c-.8-6.6-8.9-9.4-13.6-4.7l-43.7 43.7L654 600.3a8.03 8.03 0 00-11.3 0l-42.4 42.3a8.03 8.03 0 000 11.3L734 787.6l-43.9 43.9a8.01 8.01 0 004.7 13.6L855 864c5.1.6 9.5-3.7 8.9-8.9L845 694.9zm-463.7-94.6a8.03 8.03 0 00-11.3 0L236.3 733.9l-43.7-43.7a8.01 8.01 0 00-13.6 4.7L160.1 855c-.6 5.1 3.7 9.5 8.9 8.9L329.2 845c6.6-.8 9.4-8.9 4.7-13.6L290 787.6 423.7 654c3.1-3.1 3.1-8.2 0-11.3l-42.4-42.4z"></path></svg>
+        </span>
+        <span role="img" aria-label="close" id="close-button" class="anticon">
+            <svg viewBox="64 64 896 896" focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg>
+        </span>
+    </div>
+</div>
+
+</body>
+</html>

main/statics/loading.css

@@ -1,33 +1,49 @@
-body {
+  body {
-    background-color: transparent;
+      background-color: transparent;
-    border-radius: 12px;
+      border-radius: 12px;
-    resize: none;
+      font-family: 'Alata', sans-serif;
-    font-family: 'Alata', sans-serif;
+      width: 100vw;
-}
+      height: 100vh;
-.wrapper {
+      overflow: hidden;
-    display: flex;
+      user-select: none;
-    align-items: center;
+      -webkit-app-region: drag;
-    justify-content: center; 
-    flex-direction: column;
-    background-color: #222222;
-    color: #efefef;
-    border-radius: 12px;
-    text-align: center;
-    padding: 20px;
-}
-.bouncy-logo {
-    width: 400px;
-    height: 400px;
-    margin: 0 auto;
-    position: relative;
   }
-  .bouncy-logo .ball img {
+
-    position: absolute;
+  .wrapper {
-    height: 200px;
+      position: absolute;
+      top: 0;
+      right: 0;
+
+      display: flex;
+      align-items: center;
+      justify-content: center; 
+      flex-direction: column;
+      background-color: #efefef;
+      color: #2d2d2d;
+      border-radius: 12px;
+      text-align: center;
+
+      width: 100%;
+      height: 100%;
+  }
+
+  .bouncy-logo{
+    width: 100%;
+    height: auto;
+    margin: auto;
+  }
+
+  .bouncy-logo .ball {
+    height: auto;
+    width: 100%;
+    transform: translate(-10px, 0);
+  }
+
+  .bouncy-logo .ball svg { 
     width: 200px;
-    top: 0;
+    height: 200px;
-    left: 43%;
+    margin: auto;
-    transform: translate(-50%, 0);
+
     -webkit-animation-direction: alternate;
     -webkit-animation-duration: 1s;
     -webkit-animation-name: my-bounce;
@@ -37,14 +53,17 @@ body {
     animation-name: my-bounce;
     animation-iteration-count: infinite;
   }
+
+  .shadow{
+    width: 100%;
+    height: auto;
+  }
+
   .bouncy-logo .ball-shadow {
-    background: radial-gradient(50% 50%, #ccc 0%, transparent 100%);
+    margin: auto;
+    background: radial-gradient(50% 50%, rgba(204, 204, 204, 0.45) 0%, transparent 100%);
     height: 50px;
     width: 200px;
-    position: absolute;
-    top: 230px;
-    left: 50%;
-    transform: translate(-50%, 0);
     -webkit-animation-direction: alternate;
     -webkit-animation-duration: 1s;
     -webkit-animation-name: my-grow;
@@ -59,24 +78,20 @@ body {
     from {
       width: 200px;
       height: 50px;
-      top: 230px;
     }
     to {
       width: 150px;
       height: 10px;
-      top: 240px;
     }
   }
   @keyframes my-grow {
     from {
       width: 200px;
       height: 50px;
-      top: 230px;
     }
     to {
       width: 150px;
       height: 10px;
-      top: 240px;
     }
   }
   @-webkit-keyframes my-bounce {

main/statics/loading.html

@@ -4,8 +4,19 @@
     <body>
         <div class="wrapper">
             <div class="bouncy-logo">
-                <div class="ball-shadow"></div>
+                <div class="ball">
-                <div class="ball"><img src="../../public/logo.svg"></div>
+                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 120">
+                        <path
+                            d="M77.55,29.69,92,18.78a1.42,1.42,0,0,0,.25-2,39.2,39.2,0,0,0-56.31-4.21A38.05,38.05,0,0,0,23.23,42a38.09,38.09,0,0,0,3.62,15.1A38.65,38.65,0,0,0,37.8,70.84,39.46,39.46,0,0,0,83.37,73a38.26,38.26,0,0,0,8.41-7.4,1.41,1.41,0,0,0-.23-2L77.65,53a1.43,1.43,0,0,0-1.9.15A17,17,0,0,1,72.55,56a17.75,17.75,0,0,1-9,2.88c-8.32.31-13.62-5.69-14-6.13a17.68,17.68,0,0,1-4.13-10.13,17.93,17.93,0,0,1,4.56-13A17.46,17.46,0,0,1,71.7,26.34a17.3,17.3,0,0,1,4,3.2A1.41,1.41,0,0,0,77.55,29.69Z"
+                            style="fill: rgba(51, 51, 51, 0.45); backdrop-filter: blur(2px);"
+                        />
+                        <path
+                            d="M13,63.17a2.77,2.77,0,0,1,3.75,1.43A48.38,48.38,0,0,0,32.07,84.53,48.83,48.83,0,0,0,52.34,93.3,47.37,47.37,0,0,0,92.57,81.8a2.77,2.77,0,0,1,4,.3l6.23,7.4a2.79,2.79,0,0,1-.21,3.83,63.83,63.83,0,0,1-6,5,62.21,62.21,0,0,1-7.44,4.7A60.84,60.84,0,0,1,77,108a62.3,62.3,0,0,1-27,1.51A62.51,62.51,0,0,1,40.18,107,61.5,61.5,0,0,1,20.1,95.69,61.73,61.73,0,0,1,2.41,71a2.79,2.79,0,0,1,1.42-3.55Z"
+                            style="fill: rgba(51, 51, 51, 0.45); backdrop-filter: blur(2px);"
+                        />
+                    </svg>
+                </div>
+                <div class="shadow"><div class="ball-shadow"></div></div>
               </div> 
         </div>
     </body>

main/statics/loading_dev.html

@@ -4,8 +4,19 @@
     <body>
         <div class="wrapper">
             <div class="bouncy-logo">
-                <div class="ball-shadow"></div>
+                <div class="ball">
-                <div class="ball"><img src="../../public/logo.svg"></div>
+                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 120">
+                        <path
+                            d="M77.55,29.69,92,18.78a1.42,1.42,0,0,0,.25-2,39.2,39.2,0,0,0-56.31-4.21A38.05,38.05,0,0,0,23.23,42a38.09,38.09,0,0,0,3.62,15.1A38.65,38.65,0,0,0,37.8,70.84,39.46,39.46,0,0,0,83.37,73a38.26,38.26,0,0,0,8.41-7.4,1.41,1.41,0,0,0-.23-2L77.65,53a1.43,1.43,0,0,0-1.9.15A17,17,0,0,1,72.55,56a17.75,17.75,0,0,1-9,2.88c-8.32.31-13.62-5.69-14-6.13a17.68,17.68,0,0,1-4.13-10.13,17.93,17.93,0,0,1,4.56-13A17.46,17.46,0,0,1,71.7,26.34a17.3,17.3,0,0,1,4,3.2A1.41,1.41,0,0,0,77.55,29.69Z"
+                            style="fill: rgba(51, 51, 51, 0.45); backdrop-filter: blur(2px);"
+                        />
+                        <path
+                            d="M13,63.17a2.77,2.77,0,0,1,3.75,1.43A48.38,48.38,0,0,0,32.07,84.53,48.83,48.83,0,0,0,52.34,93.3,47.37,47.37,0,0,0,92.57,81.8a2.77,2.77,0,0,1,4,.3l6.23,7.4a2.79,2.79,0,0,1-.21,3.83,63.83,63.83,0,0,1-6,5,62.21,62.21,0,0,1-7.44,4.7A60.84,60.84,0,0,1,77,108a62.3,62.3,0,0,1-27,1.51A62.51,62.51,0,0,1,40.18,107,61.5,61.5,0,0,1,20.1,95.69,61.73,61.73,0,0,1,2.41,71a2.79,2.79,0,0,1,1.42-3.55Z"
+                            style="fill: rgba(51, 51, 51, 0.45); backdrop-filter: blur(2px);"
+                        />
+                    </svg>
+                </div>
+                <div class="shadow"><div class="ball-shadow"></div></div>
               </div> 
             <h2> Starting the development server... </h2>
         </div>

package.json

@@ -3,7 +3,7 @@
   "UUID": "C8mVSr-4nmPp2-pr5Vrz-CU4kg4",
   "title": "Comty™",
   "DevBuild": true,
-  "version": "0.8.30",
+  "version": "0.9.1",
   "stage": "dev-pre",
   "description": "",
   "author": "RageStudio",
@@ -74,8 +74,11 @@
     "react-reveal": "^1.2.2",
     "react-scripts": "^3.4.1",
     "react-virtualized": "^9.21.2",
+    "redux-socket.io": "^1.4.0",
+    "redux-thunk": "^2.3.0",
     "simple-icons": "^3.3.0",
     "slash": "^3.0.0",
+    "socket.io-client": "^2.3.0",
     "stack-trace": "0.0.10",
     "store": "^2.0.12",
     "styled-components": "^5.1.1",

src/components/About/index.less

@@ -1,7 +1,7 @@
 .aboutWrapper {
   margin: auto;
   max-width: 70vw;
-  width: 500px;
+  width: 450px;
   vertical-align: middle;
   position: relative;
   background-color: rgba(73, 72, 72, 0.349);

src/components/Layout/Overlay/components/Card_Component.tsx

@@ -4,6 +4,7 @@ import * as Icons from 'components/Icons'
 import styles from '../index.less'
 
 export interface Card_Component_props {
+    style: object;
     type: string;
     children: any;
 }
@@ -18,13 +19,14 @@ const Card_Component = (props: Card_Component_props) => {
     if (!props.type) frag = (props.children)
   
     return(
-      <div className={styles.render_component}>
+      <div style={props.style} className={styles.render_component}>
         {frag}
       </div>
     )
 }
 
 Card_Component.defaultProps = {
+    style: null,
     type: null,
     children: <h2>Empty</h2>
 }

src/components/Layout/Overlay/index.less

@@ -43,7 +43,7 @@
   
   height: 100%;
   // 150px extra for left-sider
-  width: calc( 100% + 150px );
+  width: 87%;
   backdrop-filter: blur(2px);
   &.mobile{
     overflow-y: scroll;
@@ -162,3 +162,10 @@
       color: #ffffff;
     }
   }
+
+
+  .mainElement {
+    > div {
+      margin: 30px 0;
+    }
+  }

src/components/Layout/Overlay/index.tsx

@@ -4,6 +4,7 @@ import { connect } from 'umi'
 import classnames from 'classnames'
 import styles from './index.less'
 import * as errorhandler from 'core/libs/errorhandler'
+import * as antd from 'antd'
 
 import {
   Primary,
@@ -95,8 +96,16 @@ export default class Overlay extends React.PureComponent {
 
   
   render() {
-    const { overlayElement, overlayActive } = this.props.app
+    const { overlayElement, overlayActive, session_data, session_valid, session_uuid } = this.props.app
-    
+    const mainElement = (
+      <div>
+        <div><__searchBar /></div> 
+        <div className={styles.mainElement}>
+          <Card_Component>Banana</Card_Component>
+          {session_valid? <Card_Component style={{ display: 'flex', lineHeight: '30px', wordBreak: 'break-all' }} ><antd.Avatar src={session_data.avatar} shape="square" /> <div style={{ marginLeft: '10px' }}> @{session_data.username}<span style={{ fontSize: "11px" }}>#{session_uuid}</span></div></Card_Component> : null }
+        </div>
+      </div>
+    )
     const renderElement = () => {
 
       if (overlayElement && overlayActive) {
@@ -116,7 +125,7 @@ export default class Overlay extends React.PureComponent {
       }
 
       return(
-        <Primary id="main" fragment={<>  <div><__searchBar /></div> <div></div>   </>}  />
+        <Primary id="main" fragment={mainElement}  />
       )
 
     }

src/components/Layout/Sider/default/index.js

@@ -34,7 +34,8 @@ export default class Sider_Default extends React.PureComponent {
         <antd.Layout.Sider
           trigger={null}
           className={styles.left_sider_container}
-          style={{ flex:'unset', maxWidth: 'unset', minWidth: '200px', width: '100%'}}
+          width="175px"
+          style={{ flex:'unset', maxWidth: 'unset', minWidth: '175px', width: '100%'}}
         >
           <div className={styles.left_sider_brandholder}>
             <img

src/components/Layout/Sider/default/index.less

@@ -8,7 +8,7 @@
   font-family: @__Global_texted_font;
   font-weight: 600;
 
-  width: 100%;
+  width: 65%;
   height: 100%;
 
   z-index: 40;

src/components/Layout/WindowNavbar/index.less

@@ -10,7 +10,12 @@
     z-index: 5000;
     top: 0;
     right: 0;
-    background-color: rgba(0, 0, 0, 0);
+    background-color: rgba(54, 54, 54, 0);
+    transition: all 150ms ease-in-out;
+}
+
+.navbar:hover{
+    background-color: rgba(54, 54, 54, 0.658); 
 }
 
 .controls{
@@ -21,6 +26,19 @@
     width: auto;
     margin: auto;
     > div{
-        padding: 0 6px;
+        padding: 0 14px;
+        svg{
+            margin: 0!important;
+            padding: 0;
+        }
     }
+    > div:hover{
+        background-color: rgba(54, 54, 54, 0.808); 
+        color: #fdfdfd;
+    }
+    transition: all 150ms ease-in-out;
+}
+
+.controls:hover{
+    background-color: rgba(54, 54, 54, 0.705);
 }

src/components/Loader/Loader.js

@@ -5,7 +5,6 @@ import styles from './Loader.less'
 const Loader = (loading) => {
   return (
       <div className={classNames(styles.wrapper, {[styles.end]: !loading })}>
-        <span>Loading... </span>
         <div
           className={styles.newloader}
         >

src/components/Loader/Loader.less

@@ -1,26 +1,17 @@
 @import '~theme/index.less';
 
 .wrapper {
-  font-family: @__Global_general_font_family;
+  user-select: none;
-  color: white;
-  line-height: 55px;
-  span{
-    margin: 0 10px 0 auto;
-  }
-
   position: absolute;
   z-index: 1000;
   right: 0;
   bottom: 0;
-  width: 140px;
+  width: auto;
-  height: 55px;
+  height: 29px;
-  display: flex;
+
-  flex-direction: row;
+  margin: 30px;
-  justify-content: space-around;
   background-color: #2d2d2dc2;
   border-radius: 28px;
-  margin: 10px;
-
   
   &.end {
     animation: unshow 0.8s linear;
@@ -32,11 +23,9 @@
   }
 
   .newloader {
-    transform: translate(21px,27px) scale(0.3);
+    transform: scale(0.28);
-    width: 0px;
+    width: 54px;
-    height: 0px;
+    height: 23px; 
-    margin: 0 45px 0 0;
-    position: relative;  
   }
   
   .newloader>div {

src/core/index.js

@@ -408,3 +408,26 @@ export function get_value(source,key){
 export function iatToString(iat){
   return  new Date(iat * 1000).toLocaleString()
 }
+
+export function extendIDCode(id){
+  num.toString().padStart(4, "0");
+
+}
+
+export function generateUUID( lenght = 6 ){
+  let text = ""
+  const possibleChars = "abcdefghijklmnopqrstuvwxyz0123456789"
+
+  for ( let i = 0; i < 6; i++ )
+    text += possibleChars.charAt ( Math.floor ( Math.random () * possibleChars.length ) )
+
+  return text
+}
+
+	/**
+	 * Generate a random string
+	 * @returns {string}
+	 */
+export function generateRandomId( length = 15 ){
+	return Math.random ().toString ( 36 ).substring ( 0, length );
+}

src/layouts/PrimaryLayout.less

@@ -3,13 +3,13 @@
 // PRIMARY LAYOUT 
 .primary_layout_container {
   background-color: transparent;
-  transition: all @__Global_Components_transitions_dur linear;
+  transition: all 150ms ease-in-out;
 
   overflow-x: hidden;
   // overflow-y: overlay;
 
   width: auto;
-  height: 100%;
+  height: 97%;
 
   position: relative;
   bottom: 0;
@@ -20,10 +20,10 @@
   min-width: 570px;
 
   @media (min-width: @bp-medium) {
-    min-width: 650px; 
+    min-width: 750px; 
   }
-  @media (min-width: @bp-large) {
+  @media (min-width: @bp-xlarge) {
-    min-width: 850px;
+    min-width: 1112px;
   }
 
   &.interfaced{
@@ -36,9 +36,9 @@
   vertical-align: middle;
   width: 100%;
   padding: @primary_layout_content_padding;
-  transition: all @__Global_layout_transitions-dur ease;
+  transition: all 150ms ease-in-out;
 
-  @media (max-width: @bp-medium) {
+  @media (min-width: @bp-medium) {
     padding: 0;
   }
 }

src/models/app.js

@@ -292,7 +292,13 @@ export default {
           break;
         }
         case 'dev':{
-          callback(state.session_data.dev? true : false)
+          if(state.session_data){
+            return callback(state.session_data.dev? true : false)
+          }
+          return callback(false)
+        }
+        case 'embedded':{
+          callback(state.electron? true : false)
           break;
         }
         default:{

src/pages/debug/antd.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import themeStyle from 'theme/base/vars.less'
 
-class AntdDebug extends React.Component{
+export default class AntdDebug extends React.Component{
     state = {
         styleLink: document.getElementById('theme-style'),
         body: document.getElementsByTagName('body')[0]
@@ -14,4 +14,3 @@ class AntdDebug extends React.Component{
         )
     }
 }
-export default AntdDebug

src/pages/debug/api.js

@@ -0,0 +1,355 @@
+import React from 'react';
+import {v3_request} from 'api';
+import { api_request } from 'core/libs/v3_model'
+import {
+  Row,
+  Col,
+  Select,
+  Form,
+  Input,
+  Button,
+  List,
+  Tag,
+  Checkbox,
+} from 'antd';
+import classnames from 'classnames';
+import { CloseOutlined } from '@ant-design/icons';
+import endpoints_list from 'config/endpoints';
+
+import styles from './api.less';
+
+const { Option } = Select;
+const InputGroup = Input.Group;
+const methods = ['POST', 'GET', 'PUT', 'PATCH', 'DELETE'];
+
+const methodTagColor = {
+  GET: 'green',
+  POST: 'orange',
+  DELETE: 'red',
+  PUT: 'geekblue',
+};
+
+const requests = Object.values(endpoints_list).map(item => {
+  let url = item;
+  let method = 'GET';
+  const paramsArray = item.split(' ');
+  if (paramsArray.length === 2) {
+    method = paramsArray[0];
+    url = paramsArray[1];
+  }
+  return {
+    method,
+    url,
+  };
+});
+
+let uuid = 2;
+
+export default class RequestPage extends React.Component {
+  paramsForm = React.createRef();
+  bodyDataForm = React.createRef();
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      // Default sets
+      method: 'GET',
+      url: '',
+      ParamsKeys: [1],
+      BodyKeys: [1],
+      result: null,
+      visible: true,
+    };
+  }
+
+  handleRequest = () => {
+    const { method, url } = this.state;
+    let params = {};
+    let body = {};
+
+    this.paramsForm.current
+      .validateFields()
+      .then(values => {
+        if (values) {
+          for (let i in values) {
+            if (i.startsWith('check')) {
+              const index = i.match(/check\[(\d+)\]/)[1];
+              const key = values[`key[${index}]`];
+              params[key] = values[`value[${index}]`];
+            }
+          }
+        }
+      })
+      .catch(errorInfo => {
+        console.log(errorInfo);
+      });
+
+    this.bodyDataForm.current
+      .validateFields()
+      .then(values => {
+        if (values) {
+          for (let i in values) {
+            if (i.startsWith('check')) {
+              const index = i.match(/check\[(\d+)\]/)[1];
+              const key = values[`key[${index}]`];
+              body[key] = values[`value[${index}]`];
+            }
+          }
+        }
+      })
+      .catch(errorInfo => {
+        console.log(errorInfo);
+      });
+      const frame = {
+        method,
+        endpoint: `${method} ${url}`,
+        body,
+        verbose: true
+      }
+      console.log(frame)
+      api_request(frame, (err, res) => {
+        this.setState({
+          result: res,
+        });
+      })
+  };
+
+  handleClickListItem = ({ method, url }) => {
+    this.setState({
+      method,
+      url,
+      keys: [uuid++],
+      result: null,
+    });
+  };
+
+  handleInputChange = e => {
+    this.setState({
+      url: e.target.value,
+    });
+  };
+
+  handleSelectChange = method => {
+    this.setState({
+      method,
+    });
+  };
+
+  handleAddParam = () => {
+    const { ParamsKeys } = this.state;
+    const nextKeys = ParamsKeys.concat(uuid);
+    uuid++;
+    this.setState({
+      ParamsKeys: nextKeys,
+    });
+  };
+
+  handleAddBody = () => {
+    const { BodyKeys } = this.state;
+    const nextKeys = BodyKeys.concat(uuid);
+    uuid++;
+    this.setState({
+      BodyKeys: nextKeys,
+    });
+  };
+
+  handleRemoveParam = key => {
+    const { ParamsKeys } = this.state;
+    this.setState({
+      ParamsKeys: ParamsKeys.filter(item => item !== key),
+    });
+  };
+
+  handleRemoveBody = key => {
+    const { BodyKeys } = this.state;
+    this.setState({
+      BodyKeys: BodyKeys.filter(item => item !== key),
+    });
+  };
+
+  handleVisible = () => {
+    this.setState({
+      visible: !this.state.visible,
+    });
+  };
+
+  render() {
+    const { result, url, method, ParamsKeys, BodyKeys, visible } = this.state;
+
+    return (
+      <div>
+        <Row>
+          <Col lg={8} md={24}>
+            <List
+              className={styles.requestList}
+              dataSource={requests}
+              renderItem={item => (
+                <List.Item
+                  className={classnames(styles.listItem, {
+                    [styles.lstItemActive]:
+                      item.method === method && item.url === url,
+                  })}
+                  onClick={this.handleClickListItem.bind(this, item)}
+                >
+                  <span style={{ width: 72 }}>
+                    <Tag
+                      style={{ marginRight: 8 }}
+                      color={methodTagColor[item.method]}
+                    >
+                      {item.method}
+                    </Tag>
+                  </span>
+                  {item.url}
+                </List.Item>
+              )}
+            />
+          </Col>
+          <Col lg={16} md={24}>
+            <Row type="flex" justify="space-between">
+              <InputGroup compact size="large" style={{ flex: 1 }}>
+                <Select
+                  size="large"
+                  value={method}
+                  style={{ width: 100 }}
+                  onChange={this.handleSelectChange}
+                >
+                  {methods.map(item => (
+                    <Option value={item} key={item}>
+                      {item}
+                    </Option>
+                  ))}
+                </Select>
+                <Input
+                  value={url}
+                  onChange={this.handleInputChange}
+                  style={{ width: 'calc(100% - 200px)' }}
+                />
+                <Button
+                  ghost={visible}
+                  type={visible ? 'primary' : ''}
+                  onClick={this.handleVisible}
+                  size="large"
+                >
+                  Params
+                </Button>
+              </InputGroup>
+
+              <Button
+                size="large"
+                type="primary"
+                style={{ width: 100 }}
+                onClick={this.handleRequest}
+              >
+                Send
+              </Button>
+            </Row>
+
+            <Row justify="center">
+              <Col span={12}>
+                <Form ref={this.paramsForm} name="control-ref">
+                  <div
+                    className={classnames(styles.paramsBlock, {
+                      [styles.hideParams]: !visible,
+                    })}
+                  >
+                    {ParamsKeys.map((key, index) => (
+                      <Row
+                        gutter={8}
+                        type="flex"
+                        justify="start"
+                        align="middle"
+                        key={key}
+                      >
+                        <Col style={{ marginTop: 8 }}>
+                          <Form.Item
+                            name={`check[${key}]`}
+                            valuePropName="checked"
+                          >
+                            <Checkbox defaultChecked />
+                          </Form.Item>
+                        </Col>
+                        <Col style={{ marginTop: 8 }}>
+                          <Form.Item name={`key[${key}]`}>
+                            <Input placeholder="Key" />
+                          </Form.Item>
+                        </Col>
+                        <Col style={{ marginTop: 8 }}>
+                          <Form.Item name={`value[${key}]`}>
+                            <Input placeholder="Value" />
+                          </Form.Item>
+                        </Col>
+                        <Col style={{ marginTop: 8 }}>
+                          <CloseOutlined
+                            onClick={this.handleRemoveParam.bind(this, key)}
+                            style={{ cursor: 'pointer' }}
+                          />
+                        </Col>
+                      </Row>
+                    ))}
+
+                    <Row style={{ marginTop: 8 }}>
+                      <Button onClick={this.handleAddParam}>Add Param</Button>
+                    </Row>
+                  </div>
+                </Form>
+              </Col>
+
+              <Col span={12}>
+                <Form ref={this.bodyDataForm} name="control-ref">
+                  <div
+                    className={classnames(styles.paramsBlock, {
+                      [styles.hideParams]: !visible,
+                    })}
+                  >
+                    {BodyKeys.map((key, index) => (
+                      <Row
+                        gutter={8}
+                        type="flex"
+                        justify="start"
+                        align="middle"
+                        key={key}
+                      >
+                        <Col style={{ marginTop: 8 }}>
+                          <Form.Item
+                            name={`check[${key}]`}
+                            valuePropName="checked"
+                          >
+                            <Checkbox defaultChecked />
+                          </Form.Item>
+                        </Col>
+                        <Col style={{ marginTop: 8 }}>
+                          <Form.Item name={`key[${key}]`}>
+                            <Input placeholder="Key" />
+                          </Form.Item>
+                        </Col>
+                        <Col style={{ marginTop: 8 }}>
+                          <Form.Item name={`value[${key}]`}>
+                            <Input placeholder="Value" />
+                          </Form.Item>
+                        </Col>
+                        <Col style={{ marginTop: 8 }}>
+                          <CloseOutlined
+                            onClick={this.handleRemoveBody.bind(this, key)}
+                            style={{ cursor: 'pointer' }}
+                          />
+                        </Col>
+                      </Row>
+                    ))}
+
+                    <Row style={{ marginTop: 8 }}>
+                      <Button onClick={this.handleAddBody}>
+                        Add form-data
+                      </Button>
+                    </Row>
+                  </div>
+                </Form>
+              </Col>
+            </Row>
+
+            <div className={styles.result}>{result}</div>
+          </Col>
+        </Row>
+      </div>
+    );
+  }
+}

src/pages/debug/api.less

@@ -0,0 +1,39 @@
+@import '~theme/index.less';
+
+.result {
+  height: 700px;
+  width: 100%;
+  background: @hover-color;
+  border-color: #ddd;
+  padding: 16px;
+  margin-top: 16px;
+  word-break: break-word;
+  line-height: 2;
+  overflow: scroll;
+}
+
+.requestList {
+  padding-right: 24px;
+  margin-bottom: 24px;
+  .listItem {
+    cursor: pointer;
+    padding-left: 8px;
+    &.lstItemActive {
+      background-color: @hover-color;
+    }
+    .background-hover();
+  }
+}
+
+.paramsBlock {
+  overflow: visible;
+  opacity: 1;
+  height: auto;
+  transition: opacity 0.3s;
+  &.hideParams {
+    width: 0;
+    height: 0;
+    opacity: 0;
+    overflow: hidden;
+  }
+}

src/pages/debug/core.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import * as antd from 'antd'
+import * as core from 'core'
+
+export default class CoreDebug extends React.Component {
+    render(){
+        const handleGenerateUUID = () => { console.log(core.generateUUID()) }
+        return(
+            <div>
+                <antd.Button onClick={() => handleGenerateUUID()} >generate uuid</antd.Button>
+            </div>
+        )
+    }
+}

src/pages/debug/index.js

@@ -1,357 +1,93 @@
-import React from 'react';
+import React from 'react'
-import {v3_request} from 'api';
+import { Menu } from 'antd'
-import { api_request } from 'core/libs/v3_model'
+import * as Icons from 'components/Icons'
-import {
-  Row,
-  Col,
-  Select,
-  Form,
-  Input,
-  Button,
-  List,
-  Tag,
-  Checkbox,
-} from 'antd';
-import classnames from 'classnames';
-import { CloseOutlined } from '@ant-design/icons';
-import endpoints_list from 'config/endpoints';
 
-import styles from './index.less';
+import styles from './index.less'
 
-const { Option } = Select;
+import ApiDebug from './api.js'
-const InputGroup = Input.Group;
+import AntdDebug from './antd.js'
-const methods = ['POST', 'GET', 'PUT', 'PATCH', 'DELETE'];
+import CoreDebug from './core.js'
+import ThemeDebug from './theme.js'
 
-const methodTagColor = {
+const debbugers = {
-  GET: 'green',
+  apiDebug: <ApiDebug />,
-  POST: 'orange',
+  antdDebug: <AntdDebug />,
-  DELETE: 'red',
+  coreDebug: <CoreDebug />,
-  PUT: 'geekblue',
+  themeDebug: <ThemeDebug />
-};
-
-const requests = Object.values(endpoints_list).map(item => {
-  let url = item;
-  let method = 'GET';
-  const paramsArray = item.split(' ');
-  if (paramsArray.length === 2) {
-    method = paramsArray[0];
-    url = paramsArray[1];
-  }
-  return {
-    method,
-    url,
-  };
-});
-
-let uuid = 2;
-
-class RequestPage extends React.Component {
-  paramsForm = React.createRef();
-  bodyDataForm = React.createRef();
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      // Default sets
-      method: 'GET',
-      url: '',
-      ParamsKeys: [1],
-      BodyKeys: [1],
-      result: null,
-      visible: true,
-    };
-  }
-
-  handleRequest = () => {
-    const { method, url } = this.state;
-    let params = {};
-    let body = {};
-
-    this.paramsForm.current
-      .validateFields()
-      .then(values => {
-        if (values) {
-          for (let i in values) {
-            if (i.startsWith('check')) {
-              const index = i.match(/check\[(\d+)\]/)[1];
-              const key = values[`key[${index}]`];
-              params[key] = values[`value[${index}]`];
-            }
-          }
-        }
-      })
-      .catch(errorInfo => {
-        console.log(errorInfo);
-      });
-
-    this.bodyDataForm.current
-      .validateFields()
-      .then(values => {
-        if (values) {
-          for (let i in values) {
-            if (i.startsWith('check')) {
-              const index = i.match(/check\[(\d+)\]/)[1];
-              const key = values[`key[${index}]`];
-              body[key] = values[`value[${index}]`];
-            }
-          }
-        }
-      })
-      .catch(errorInfo => {
-        console.log(errorInfo);
-      });
-      const frame = {
-        method,
-        endpoint: `${method} ${url}`,
-        body,
-        verbose: true
-      }
-      console.log(frame)
-      api_request(frame, (err, res) => {
-        this.setState({
-          result: res,
-        });
-      })
-  };
-
-  handleClickListItem = ({ method, url }) => {
-    this.setState({
-      method,
-      url,
-      keys: [uuid++],
-      result: null,
-    });
-  };
-
-  handleInputChange = e => {
-    this.setState({
-      url: e.target.value,
-    });
-  };
-
-  handleSelectChange = method => {
-    this.setState({
-      method,
-    });
-  };
-
-  handleAddParam = () => {
-    const { ParamsKeys } = this.state;
-    const nextKeys = ParamsKeys.concat(uuid);
-    uuid++;
-    this.setState({
-      ParamsKeys: nextKeys,
-    });
-  };
-
-  handleAddBody = () => {
-    const { BodyKeys } = this.state;
-    const nextKeys = BodyKeys.concat(uuid);
-    uuid++;
-    this.setState({
-      BodyKeys: nextKeys,
-    });
-  };
-
-  handleRemoveParam = key => {
-    const { ParamsKeys } = this.state;
-    this.setState({
-      ParamsKeys: ParamsKeys.filter(item => item !== key),
-    });
-  };
-
-  handleRemoveBody = key => {
-    const { BodyKeys } = this.state;
-    this.setState({
-      BodyKeys: BodyKeys.filter(item => item !== key),
-    });
-  };
-
-  handleVisible = () => {
-    this.setState({
-      visible: !this.state.visible,
-    });
-  };
-
-  render() {
-    const { result, url, method, ParamsKeys, BodyKeys, visible } = this.state;
-
-    return (
-      <div>
-        <Row>
-          <Col lg={8} md={24}>
-            <List
-              className={styles.requestList}
-              dataSource={requests}
-              renderItem={item => (
-                <List.Item
-                  className={classnames(styles.listItem, {
-                    [styles.lstItemActive]:
-                      item.method === method && item.url === url,
-                  })}
-                  onClick={this.handleClickListItem.bind(this, item)}
-                >
-                  <span style={{ width: 72 }}>
-                    <Tag
-                      style={{ marginRight: 8 }}
-                      color={methodTagColor[item.method]}
-                    >
-                      {item.method}
-                    </Tag>
-                  </span>
-                  {item.url}
-                </List.Item>
-              )}
-            />
-          </Col>
-          <Col lg={16} md={24}>
-            <Row type="flex" justify="space-between">
-              <InputGroup compact size="large" style={{ flex: 1 }}>
-                <Select
-                  size="large"
-                  value={method}
-                  style={{ width: 100 }}
-                  onChange={this.handleSelectChange}
-                >
-                  {methods.map(item => (
-                    <Option value={item} key={item}>
-                      {item}
-                    </Option>
-                  ))}
-                </Select>
-                <Input
-                  value={url}
-                  onChange={this.handleInputChange}
-                  style={{ width: 'calc(100% - 200px)' }}
-                />
-                <Button
-                  ghost={visible}
-                  type={visible ? 'primary' : ''}
-                  onClick={this.handleVisible}
-                  size="large"
-                >
-                  Params
-                </Button>
-              </InputGroup>
-
-              <Button
-                size="large"
-                type="primary"
-                style={{ width: 100 }}
-                onClick={this.handleRequest}
-              >
-                Send
-              </Button>
-            </Row>
-
-            <Row justify="center">
-              <Col span={12}>
-                <Form ref={this.paramsForm} name="control-ref">
-                  <div
-                    className={classnames(styles.paramsBlock, {
-                      [styles.hideParams]: !visible,
-                    })}
-                  >
-                    {ParamsKeys.map((key, index) => (
-                      <Row
-                        gutter={8}
-                        type="flex"
-                        justify="start"
-                        align="middle"
-                        key={key}
-                      >
-                        <Col style={{ marginTop: 8 }}>
-                          <Form.Item
-                            name={`check[${key}]`}
-                            valuePropName="checked"
-                          >
-                            <Checkbox defaultChecked />
-                          </Form.Item>
-                        </Col>
-                        <Col style={{ marginTop: 8 }}>
-                          <Form.Item name={`key[${key}]`}>
-                            <Input placeholder="Key" />
-                          </Form.Item>
-                        </Col>
-                        <Col style={{ marginTop: 8 }}>
-                          <Form.Item name={`value[${key}]`}>
-                            <Input placeholder="Value" />
-                          </Form.Item>
-                        </Col>
-                        <Col style={{ marginTop: 8 }}>
-                          <CloseOutlined
-                            onClick={this.handleRemoveParam.bind(this, key)}
-                            style={{ cursor: 'pointer' }}
-                          />
-                        </Col>
-                      </Row>
-                    ))}
-
-                    <Row style={{ marginTop: 8 }}>
-                      <Button onClick={this.handleAddParam}>Add Param</Button>
-                    </Row>
-                  </div>
-                </Form>
-              </Col>
-
-              <Col span={12}>
-                <Form ref={this.bodyDataForm} name="control-ref">
-                  <div
-                    className={classnames(styles.paramsBlock, {
-                      [styles.hideParams]: !visible,
-                    })}
-                  >
-                    {BodyKeys.map((key, index) => (
-                      <Row
-                        gutter={8}
-                        type="flex"
-                        justify="start"
-                        align="middle"
-                        key={key}
-                      >
-                        <Col style={{ marginTop: 8 }}>
-                          <Form.Item
-                            name={`check[${key}]`}
-                            valuePropName="checked"
-                          >
-                            <Checkbox defaultChecked />
-                          </Form.Item>
-                        </Col>
-                        <Col style={{ marginTop: 8 }}>
-                          <Form.Item name={`key[${key}]`}>
-                            <Input placeholder="Key" />
-                          </Form.Item>
-                        </Col>
-                        <Col style={{ marginTop: 8 }}>
-                          <Form.Item name={`value[${key}]`}>
-                            <Input placeholder="Value" />
-                          </Form.Item>
-                        </Col>
-                        <Col style={{ marginTop: 8 }}>
-                          <CloseOutlined
-                            onClick={this.handleRemoveBody.bind(this, key)}
-                            style={{ cursor: 'pointer' }}
-                          />
-                        </Col>
-                      </Row>
-                    ))}
-
-                    <Row style={{ marginTop: 8 }}>
-                      <Button onClick={this.handleAddBody}>
-                        Add form-data
-                      </Button>
-                    </Row>
-                  </div>
-                </Form>
-              </Col>
-            </Row>
-
-            <div className={styles.result}>{result}</div>
-          </Col>
-        </Row>
-      </div>
-    );
-  }
 }
 
-export default RequestPage;
+const { Item } = Menu
+const menuMap = {
+  apiDebug: (
+    <span>
+      <Icons.Globe /> V3 Api
+    </span>
+  ),
+  antdDebug: (
+    <span>
+      <Icons.AntDesignOutlined /> Antd
+    </span>
+  ),
+  coreDebug: (
+    <span>
+      <Icons.Box /> Core
+    </span>
+  ),
+  themeDebug: (
+    <span>
+      <Icons.Image /> Theme
+    </span>
+  ),
+}
+
+export default class Debug extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      selectKey: '',
+    }
+  }
+
+  getMenu = () => {
+    return Object.keys(menuMap).map(item => (
+      <Item key={item}>{menuMap[item]}</Item>
+    ))
+  }
+
+  selectKey = key => {
+    this.setState({
+      selectKey: key,
+    })
+  }
+
+  renderChildren = () => {
+    try {
+      if (!this.state.selectKey) {
+        return <div>Select an debugger</div>
+      }
+      return debbugers[this.state.selectKey]
+    } catch (error) {
+      return <div>Select an debugger</div>
+    }
+  }
+
+  render() {
+    const { selectKey } = this.state
+    return (
+      <div className={styles.main}>
+          <h2>
+            <Icons.SettingOutlined /> Debuggers
+          </h2>
+          <Menu
+            mode="horizontal"
+            selectedKeys={[selectKey]}
+            onClick={({ key }) => this.selectKey(key)}
+          >
+            {this.getMenu()}
+          </Menu>
+     
+        <div className={styles.debuggerComponent}>{this.renderChildren()}</div>
+      </div>
+    )
+  }
+}

src/pages/debug/index.less

@@ -1,39 +1,47 @@
 @import '~theme/index.less';
 
-.result {
+.main {
-  height: 600px;
+  font-family: "Nunito", sans-serif;
+  margin: 20px 0 0;
+  display: flex;
+  flex-direction: column;
   width: 100%;
-  background: @hover-color;
-  border-color: #ddd;
-  padding: 16px;
-  margin-top: 16px;
-  word-break: break-word;
-  line-height: 2;
-  overflow: scroll;
-}
-
-.requestList {
-  padding-right: 24px;
-  margin-bottom: 24px;
-  .listItem {
-    cursor: pointer;
-    padding-left: 8px;
-    &.lstItemActive {
-      background-color: @hover-color;
-    }
-    .background-hover();
-  }
-}
-
-.paramsBlock {
-  overflow: visible;
-  opacity: 1;
   height: auto;
-  transition: opacity 0.3s;
+  overflow: auto;
-  &.hideParams {
+  color: @__Global_layout_color;
-    width: 0;
+  background-color: #ffffff;
-    height: 0;
+  padding: 15px;
-    opacity: 0;
+  border-radius: 10px;
-    overflow: hidden;
+
+  :global {
+    .ant-menu-inline {
+      color: @__Global_layout_color;
+      background-color: transparent;
+      border: none;
+    }
+
+    .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
+      font-weight: bold;
+    }
+  }
+
+  .debuggerComponent {
+    padding: 15px;
+  }
+
+  :global {
+    .ant-list-item {
+      padding-top: 7px;
+      padding-bottom: 7px;
+    }
+
+    .ant-list-split .ant-list-item {
+      border-bottom: 0;
+    }
+
+    .ant-list-item-meta-title {
+      color: rgba(0, 0, 0, 0.733);
+      font-size: 14px;
+    }
   }
 }

src/pages/settings/components/base.js

@@ -114,7 +114,7 @@ class Base extends Component {
             renderItem={item => (
               <List.Item actions={item.actions} key={item.id}>
                 <List.Item.Meta
-                  title={item.title}
+                  title={<>{item.icon}{item.title}</>}
                   description={item.description}
                 />
                 {this.renderSetting(item)}

src/pages/settings/components/electron/index.js

@@ -0,0 +1,11 @@
+import React from 'react'
+
+export default class ElectronSettings extends React.Component{
+    render(){
+        return(
+            <div>
+                Electron
+            </div>
+        )
+    }
+}

src/pages/settings/components/theme/index.js

@@ -27,7 +27,7 @@ class ThemeConfigurator extends React.Component{
 
     handleUpdate(payload){
         if(!this.state.key || !this.props.dispatch) {
-            return onError.internal_proccess(`"Config key" or "Dispatcher" is missing`)
+            return onError.internal_proccess(`"Config key" or "App/Dispatcher" is missing`)
         }
         if (!payload) {
             payload = this.state.model
@@ -128,8 +128,8 @@ class BackgroundImage extends ThemeConfigurator{
             key: "backgroundImage",
             model: { active: false, opacity: null, src: null },
     
-            textColor: this.rgbToScheme(getComputedStyle(document.getElementById("app")).color),
+            textColor: this.rgbToScheme(getComputedStyle(document.getElementById("root")).color),
-            overlayColor: this.rgbToScheme(getComputedStyle(document.getElementById("app")).backgroundColor),
+            overlayColor: this.rgbToScheme(getComputedStyle(document.getElementById("root")).backgroundColor),
     
             processing: null,
             customURL: '',

src/pages/settings/index.js

@@ -1,7 +1,6 @@
 import React from 'react'
 import { Menu } from 'antd'
 import * as Icons from 'components/Icons'
-import * as Feather from 'feather-reactjs'
 
 import styles from './style.less'
 
@@ -13,50 +12,57 @@ import Base from './components/base.js'
 import AppAbout from './components/about.js'
 import Theme from './components/theme'
 
-const { Item } = Menu
+const Settings = {
-const menuMap = {
+  base: <Base />,
-  base: (
+  about: <AppAbout />,
-    <span>
+  theme: <Theme />,
-      <Icons.ControlOutlined /> General
+  earnings: <Earnings />,
-    </span>
+  security: <SecurityView />,
-  ),
+  notification: <NotificationView />
-  theme: (
-    <span>
-      <Feather.Layers /> Theme
-    </span>
-  ),
-  sync: (
-    <span>
-      <Icons.SyncOutlined /> Sync™
-    </span>
-  ),
-  security: (
-    <span>
-      <Feather.Lock /> Security & Privacity
-    </span>
-  ),
-  notification: (
-    <span>
-      <Feather.Bell /> Notification
-    </span>
-  ),
-  earnings: (
-    <span>
-      <Icons.DollarCircleOutlined /> Earnings
-    </span>
-  ),
-  help: (
-    <span>
-      <Icons.LifeBuoy /> Help
-    </span>
-  ),
-  about: (
-    <span>
-      <Feather.Info /> About
-    </span>
-  ),
 }
 
+
+const { Item } = Menu
+
+const menuList = [
+  {
+    key: "base",
+    title: "General",
+    icons: <Icons.ControlOutlined />,
+  },
+  {
+    key: "app",
+    title: "Application",
+    icons: <Icons.Command />,
+    require: "embedded"
+  },
+  {
+    key: "theme",
+    title: "Customization",
+    icons: <Icons.Layers />,
+  },
+  {
+    key: "security",
+    title: "Security & Privacity",
+    icons: <Icons.ControlOutlined />,
+  },
+  {
+    key: "notification",
+    title: "Notification",
+    icons: <Icons.Bell />,
+  },
+  {
+    key: "help",
+    title: "Help",
+    icons: <Icons.LifeBuoy />,
+  },
+  {
+    key: "about",
+    title: "About",
+    icons: <Icons.Info />,
+  },
+]
+
 class GeneralSettings extends React.Component {
   constructor(props) {
     super(props)
@@ -66,8 +72,10 @@ class GeneralSettings extends React.Component {
   }
 
   getMenu = () => {
-    return Object.keys(menuMap).map(item => (
+    return menuList.map(item => (
-      <Item key={item}>{menuMap[item]}</Item>
+      <Item key={item.key}>
+        <span>{item.icons} {item.title}</span>
+      </Item>
     ))
   }
 
@@ -78,24 +86,11 @@ class GeneralSettings extends React.Component {
   }
 
   renderChildren = () => {
-    const { selectKey } = this.state
+    if(this.state.selectKey){
-    switch (selectKey) {
+      return Settings[this.state.selectKey]
-      case 'base':
+    }else{
-        return <Base />
+      <div> Select an setting </div>
-      case 'security':
-        return <SecurityView />
-      case 'theme':
-        return <Theme />
-      case 'notification':
-        return <NotificationView />
-      case 'about':
-        return <AppAbout />
-      case 'earnings':
-        return <Earnings />
-      default:
-        break
     }
-    return null
   }
 
   render() {

src/pages/settings/style.less

@@ -5,7 +5,7 @@
   margin: 20px 0 0;
   display: flex;
   width: 100%;
-  height: 100%;
+  height: auto;
   overflow: auto;
   color: @__Global_layout_color;
   background-color: #ffffff;

src/theme/base/index.less

@@ -39,6 +39,7 @@
 
 #root{
   background-color: @AppTheme_global_background!important;
+  color: @AppTheme_global_color!important;
 }
 
 .app{
@@ -62,7 +63,6 @@
 #app {
   -webkit-app-region: no-drag;
   overflow: hidden;
-  border-radius: 12px;
   position: absolute;
   bottom: 0;
 
@@ -103,7 +103,7 @@ body {
   line-height: @base-line-height;
 
   font-family: @__Global_texted_font;
-  border-radius: 12px;
+  background-color: @AppTheme_global_background!important;
 }
 
 @media (max-width: @bp-small){

src/theme/base/layout/Primary_Layout.less

@@ -3,5 +3,5 @@
 @primary_layout_container_backgroud: @__Global_layout_backgroud;
 @primary_layout_container_border-rd: @__Global_layout_border-rd;
 
-@primary_layout_content_padding: 25px;
+@primary_layout_content_padding: 0 40px 20px 0;