add: electron support

.env

@@ -1,2 +1,2 @@
-UMI_UI=true
+UMI_UI=false
-NODE_ENV=production
+NODE_ENV=development

.umirc.js

@@ -1,15 +1,19 @@
 import { defineConfig } from 'umi';
+import slash from 'slash';
 
-const { resolve } = require('path');
+const { resolve, join } = require('path');
 
 export default defineConfig({
   hash: false,
-  ignoreMomentLocale: true,
-  targets: { ie: 9 },
    dynamicImport: {
      loading: 'components/Loader/Loader.js',
    },
+  // dynamicImport: false,
+  // history: { type: "hash" },
+
+  targets: { ie: 9 },
   dva: { immer: true },
+  ignoreMomentLocale: true,
   nodeModulesTransform: {
     type: 'none',
   },
@@ -23,6 +27,7 @@ export default defineConfig({
     components: resolve(__dirname, './src/components'),
     models: resolve(__dirname, './src/models'),
     routes: resolve(__dirname, './src/routes'),
+    node_modules: resolve(__dirname, './node_modules')
   },
   extraBabelPlugins: [
     [
@@ -35,6 +40,28 @@ export default defineConfig({
       'lodash',
     ],
   ],
+  // externals(context, request, callback) {
+  //   const isDev = process.env.NODE_ENV === 'development';
+  //   let isExternal = false;
+  //   const load = [
+  //     'electron',
+  //     'fs',
+  //     'path',
+  //     'os',
+  //     'child_process'
+  //   ];
+  //   if (load.includes(request)) {
+  //     isExternal = `require("${request}")`;
+  //   }
+  //   const appDeps = Object.keys(require('./package.json').dependencies);
+  //   if (appDeps.includes(request)) {
+  //     const orininalPath = slash(join(__dirname, 'node_modules', request));
+  //     const requireAbsolute = `require('${orininalPath}')`;
+  //     console.log(isDev)
+  //     isExternal = isDev ? requireAbsolute : `require('${request}')`;
+  //   }
+  //   callback(null, isExternal);
+  // },
   // plugins: [themePlugin],
   // chainWebpack: function(config, { webpack }) {
   //   config.module

comty_dev.service

@@ -1,11 +0,0 @@
-[Unit]
-Description=Comty_Development
-
-[Service]
-ExecStart=npm start
-Restart=always
-User=root
-WorkingDirectory=/ycore/development/comty-development
-
-[Install]
-WantedBy=multi-user.target

comty_dist.service

@@ -1,11 +0,0 @@
-[Unit]
-Description=Comty_Development
-
-[Service]
-ExecStart=serve ./dist
-Restart=always
-User=root
-WorkingDirectory=/ycore/development/comty-development
-
-[Install]
-WantedBy=multi-user.target

dev-server.sh

@@ -1,64 +0,0 @@
-#!/bin/sh
-
-pause(){
-  read -p "Press [Enter] key to continue..." fackEnterKey
-}
-
-start_cli_dev(){
-	sudo npm start
-}
-
-start_dev(){
-    sudo systemctl start comty_dev
-    echo "Starting dev server..."
-}
- 
-stop_dev(){
-	sudo systemctl stop comty_dev
-    echo "Stoping dev server..."
-}
-show_logs(){
-	sudo journalctl -u comty_dev
-}
-update(){
-	git reset --merge&&git fetch --all&&git reset --hard origin/master
-
-
-}
-
-show_menus() {
-	clear
-	echo "~~~~~~~~~~~~~~~~~~~~~"	
-	echo " Development Server  "
-	echo "~~~~~~~~~~~~~~~~~~~~~"
-	echo "1. Start CLI Server"
-	echo "2. Start Server"
-    echo "3. Stop Server"
-	echo "4. Show DevServer Logs"
-	echo "5. Update from Git"
-	echo ""
-	echo "0. Exit"
-}
-
-read_options(){
-	local choice
-	read -p "Enter choice [ 1 - 5 ] " choice
-	case $choice in
-        0) exit 0;;
-		1) start_cli_dev ;;
-		2) start_dev ;;
-        3) stop_dev ;;
-		4) show_logs;;
-		5) update;;
-		*) echo -e "${RED}Error...${STD}" && sleep 2
-	esac
-}
- 
-trap '' SIGINT SIGQUIT SIGTSTP
- 
-while true
-do
- 
-	show_menus
-	read_options
-done

dist-server.sh

@@ -1,59 +0,0 @@
-#!/bin/sh
-
-pause(){
-  read -p "Press [Enter] key to continue..." fackEnterKey
-}
-
-start_cli_dev(){
-	sudo serve ./dist
-}
-
-start_dev(){
-    sudo systemctl start comty_dist
-    echo "Starting dev server..."
-}
- 
-stop_dev(){
-	sudo systemctl stop comty_dist
-    echo "Stoping dev server..."
-}
-show_logs(){
-	sudo journalctl -u comty_dist
-	pause
-}
-
-
-show_menus() {
-	clear
-	echo "~~~~~~~~~~~~~~~~~~~~~"	
-	echo " BuildServe Server  "
-	echo "~~~~~~~~~~~~~~~~~~~~~"
-	echo "1. Start CLI Server"
-	echo "2. Start Server"
-    echo "3. Stop Server"
-	echo "4. Show DevServer Logs"
-	echo ""
-	echo "0. Exit"
-}
-
-read_options(){
-	local choice
-	read -p "Enter choice [ 1 - 4 ] " choice
-	case $choice in
-        0) exit 0;;
-		1) start_cli_dev ;;
-		2) start_dev ;;
-        3) stop_dev ;;
-		4) show_logs;;
-		*) echo -e "${RED}Error...${STD}" && sleep 2
-	esac
-}
- 
-trap '' SIGINT SIGQUIT SIGTSTP
- 
-while true
-do
- 
-	show_menus
-	read_options
-done

electron-builder.yml

@@ -0,0 +1,12 @@
+appId: com.example.bruh
+productName: Bruh
+copyright: Copyright © Bruh
+directories:
+  output: dist
+  buildResources: resources
+files:
+  - from: .
+    filter:
+      - package.json
+      - app
+publish: null

main/configs/config.js

@@ -0,0 +1,3 @@
+const Config = require('electron-config')
+
+module.exports = new Config({ name: 'config' });

main/index.js

@@ -0,0 +1,83 @@
+const { app, BrowserWindow, Menu, Tray, nativeImage } = require('electron')
+const { join } = require('path')
+const path = require('path')
+const packagejson = require('../package.json')
+const is = require('electron-is')
+const waitOn = require('wait-on');
+
+let app_path = `file://${join(__dirname, '..', 'renderer')}/index.html`;
+
+if (is.dev()) {
+  require('electron-debug')(); // eslint-disable-line global-require
+}
+
+if (is.dev()) {
+  app_path = 'http://127.0.0.1:8000/';
+}
+
+// app.on('window-all-closed', () => {
+//   if (process.platform !== 'darwin') {
+//     app.quit();
+//   }
+// });
+
+app.on('activate', () => {
+  // inits
+});
+
+app.on('ready', () => {
+  loadWindow = new BrowserWindow({ 
+    icon: nativeImage.createFromPath(path.join(__dirname, '/public/favicon.png')), 
+    width: 700, 
+    height: 600,
+    frame: false,
+    resizable: false,
+    center: true,
+    transparent: true,
+    
+  });
+
+  mainWindow = new BrowserWindow({
+    icon: nativeImage.createFromPath(path.join(__dirname, '/public/favicon.png')), 
+    show: false,
+    width: 1280, 
+    height: 720,
+    frame: false,
+    webPreferences: {
+      nodeIntegration: true
+    } 
+  });
+ 
+  tray = new Tray(nativeImage.createFromPath(path.join(__dirname, '/public/favicon.png')))
+
+  const contextMenu = Menu.buildFromTemplate([
+    { label: 'Open', type: 'normal', click:  function(){
+      mainWindow.show();
+  }  },
+    { label: 'bruh', type: 'radio', checked: true },
+  ])
+  tray.setToolTip(packagejson.title)
+  tray.setContextMenu(contextMenu)
+
+  if (is.dev()) {
+    loadWindow.loadURL(`file://${__dirname}/statics/loading_dev.html`)
+  }else{
+    loadWindow.loadURL(`file://${__dirname}/statics/loading.html`)
+  }
+
+  waitOn({ resources: [app_path] }, function (err) {
+    if (err) {
+      return console.log(err, ' | electron Aborted create window')
+    }
+    loadWindow.close()
+    mainWindow.show()
+    mainWindow.loadURL(app_path);
+  });
+  
+});
+
+app.on('close', (event) => {
+  event.preventDefault();
+  mainWindow.hide();
+});
+

main/statics/loading.css

@@ -0,0 +1,97 @@
+body {
+    background-color: transparent;
+    border-radius: 12px;
+    resize: none;
+    font-family: 'Alata', sans-serif;
+}
+.wrapper {
+    display: flex;
+    align-items: center;
+    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;
+    height: 200px;
+    width: 200px;
+    top: 0;
+    left: 43%;
+    transform: translate(-50%, 0);
+    -webkit-animation-direction: alternate;
+    -webkit-animation-duration: 1s;
+    -webkit-animation-name: my-bounce;
+    -webkit-animation-iteration-count: infinite;
+    animation-direction: alternate;
+    animation-duration: 1s;
+    animation-name: my-bounce;
+    animation-iteration-count: infinite;
+  }
+  .bouncy-logo .ball-shadow {
+    background: radial-gradient(50% 50%, #ccc 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;
+    -webkit-animation-iteration-count: infinite;
+    animation-direction: alternate;
+    animation-duration: 1s;
+    animation-name: my-grow;
+    animation-iteration-count: infinite;
+  }
+  
+  @-webkit-keyframes my-grow {
+    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 {
+    from {
+      top: 0;
+    }
+    to {
+      top: 10%;
+    }
+  }
+  @keyframes my-bounce {
+    from {
+      top: 0;
+    }
+    to {
+      top: 10%;
+    }
+  }

main/statics/loading.html

@@ -0,0 +1,12 @@
+<html>
+    <link rel="stylesheet" href="./loading.css">
+    <link href="https://fonts.googleapis.com/css2?family=Alata&display=swap" rel="stylesheet">
+    <body>
+        <div class="wrapper">
+            <div class="bouncy-logo">
+                <div class="ball-shadow"></div>
+                <div class="ball"><img src="../../public/logo.svg"></div>
+              </div> 
+        </div>
+    </body>
+</html>

main/statics/loading_dev.html

@@ -0,0 +1,13 @@
+<html>
+    <link rel="stylesheet" href="./loading.css">
+    <link href="https://fonts.googleapis.com/css2?family=Alata&display=swap" rel="stylesheet">
+    <body>
+        <div class="wrapper">
+            <div class="bouncy-logo">
+                <div class="ball-shadow"></div>
+                <div class="ball"><img src="../../public/logo.svg"></div>
+              </div> 
+            <h2> Starting the development server... </h2>
+        </div>
+    </body>
+</html>

package.json

@@ -3,30 +3,32 @@
   "UUID": "C8mVSr-4nmPp2-pr5Vrz-CU4kg4",
   "title": "Comty™",
   "DevBuild": true,
-  "version": "0.8.22",
+  "version": "0.8.27",
   "stage": "dev-pre",
   "description": "",
   "author": "RageStudio",
   "license": "ISC",
   "private": true,
+  "main": "main/index.js",
+  "build": {
+    "files": [
+      "./dist/**/*",
+      "./pages/**/*",
+      "./node_modules/**/*"
+    ],
+    "appId": "com.rstudio.comty",
+    "asar": false
+  },
   "scripts": {
     "start": "umi dev",
-    "build": "umi build",
+    "postinstall": "electron-builder install-app-deps",
-    "postinstall": "umi generate tmp",
+    "dev": "concurrently \"electron .\" \"umi dev\"",
-    "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'",
+    "build": "npm run build:main && npm run build:renderer",
-    "test": "umi-test",
+    "build:main": "ESLINT=none roadhog build",
-    "test:coverage": "umi-test --coverage"
+    "build:renderer": "ESLINT=none umi build",
-  },
+    "pack": "npm run build && npm run rebuild && build",
-  "gitHooks": {
+    "pack:dir": "npm run build && npm run rebuild && build --dir",
-    "pre-commit": "lint-staged"
+    "pack:dirOnly": "build --dir"
-  },
-  "lint-staged": {
-    "*.{js,jsx,less,md,json}": [
-      "prettier --write"
-    ],
-    "*.ts?(x)": [
-      "prettier --parser=typescript --write"
-    ]
   },
   "dependencies": {
     "@icons-pack/react-simple-icons": "^3.8.0",
@@ -36,27 +38,26 @@
     "@material-ui/core": "^4.9.9",
     "@material-ui/icons": "^4.9.1",
     "@ragestudio/ycorejs-lib": "^0.1.22",
-    "@steveeeie/react-page-transition": "^1.2.0",
+    "antd": "^4.6.1",
-    "antd": "^4.5.1",
     "axios": "^0.19.2",
     "babel-core": "^6.26.3",
     "classnames": "^2.2.6",
-    "dva-model-extend": "^0.1.2",
+    "electron-config": "^2.0.0",
+    "electron-is": "^3.0.0",
+    "electron-log": "^4.2.4",
     "enquire-js": "^0.2.1",
     "feather-reactjs": "^2.0.13",
     "jquery": "^3.5.1",
     "less-vars-to-js": "^1.3.0",
-    "lint-staged": "^10.0.7",
     "localforage": "^1.7.4",
     "lodash": "^4.17.19",
     "moment": "^2.27.0",
     "node-sass": "^4.13.1",
     "nprogress": "^0.2.0",
     "path-to-regexp": "^6.1.0",
-    "prettier": "^1.19.1",
+    "platform": "^1.3.6",
-    "prop-types": "^15.7.2",
     "radium": "^0.26.0",
-    "react": "^16.12.0",
+    "react": "^16.13.1",
     "react-animations": "^1.0.0",
     "react-color": "^2.18.1",
     "react-dazzle": "^1.4.0",
@@ -66,27 +67,39 @@
     "react-helmet": "^5.2.1",
     "react-linkify": "^1.0.0-alpha",
     "react-perfect-scrollbar": "^1.5.8",
+    "react-redux": "^7.2.1",
     "react-reveal": "^1.2.2",
     "react-scripts": "^3.4.1",
-    "react-transition-group": "^4.4.1",
     "react-virtualized": "^9.21.2",
     "simple-icons": "^3.3.0",
+    "slash": "^3.0.0",
     "stack-trace": "0.0.10",
     "store": "^2.0.12",
     "styled-components": "^5.1.1",
-    "timeago.js": "^4.0.2"
+    "timeago.js": "^4.0.2",
+    "wait-on": "^5.2.0"
   },
   "devDependencies": {
     "@lingui/babel-preset-react": "^2.9.0",
     "@lingui/cli": "^2.9.0",
     "@lingui/loader": "^2.9.0",
     "@umijs/preset-react": "^1.4.0",
+    "electron": "^10.0.1",
+    "electron-debug": "^2.0.0",
+    "electron-rebuild": "^1.7.3",
+    "electron-builder": "^22.8.0",
+    "electron-devtools-installer": "^3.1.1",
+    "concurrently": "^3.5.1",
     "babel-eslint": "^10.0.1",
     "babel-plugin-dev-expression": "^0.2.1",
     "babel-plugin-module-resolver": "^4.0.0",
     "cross-env": "^6.0.0",
-    "typescript": "^3.8.3",
+    "dva-model-extend": "^0.1.2",
     "jsdoc": "^3.6.5",
-    "umi": "^3.2.9"
+    "typescript": "^3.8.3",
+    "umi": "^3.2.17",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@types/electron-devtools-installer": "^2.2.0",
+    "@types/node": "^12.12.52"
   }
 }

src/components/About/index.js

@@ -1,12 +1,13 @@
 import React from 'react'
 import styles from './index.less'
 import { app_info, UUAID, package_json } from 'core'
+import * as Icons from 'components/Icons'
 import * as antd from 'antd'
 
-const { logo, name, version, stage } = app_info
+const { logo, name, version, stage, os, layout } = app_info
 
 export default class App_About extends React.Component {
-  DetectNoNStableBuild() {
+  renderStableTag() {
     if (package_json.DevBuild == false) {
       return <antd.Tag color="blue">Stable</antd.Tag>
     } else {
@@ -21,9 +22,13 @@ export default class App_About extends React.Component {
           <h1 className={styles.appName}> {name} </h1>
           {UUAID}
           <br />
-          <antd.Tag color="geekblue">v{version}</antd.Tag>
+          <antd.Tag color="green"><Icons.Monitor />{os.toString()}</antd.Tag>
-          <antd.Tag color="red">{stage}</antd.Tag>
+          <antd.Tag color="geekblue"><Icons.Package />v{version}</antd.Tag>
-          {this.DetectNoNStableBuild()}
+          <antd.Tag color="red"><Icons.Radio />{stage}</antd.Tag>
+          <antd.Tag color="magenta"><Icons.Layers />Render with {layout}</antd.Tag>
+          {this.renderStableTag()}
+         
+
         </antd.Card>
       </div>
     )

src/components/Layout/WindowNavbar/index.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import styles from './index.less'
+
+export default class WindowNavbar extends React.Component{
+    render(){
+        return(
+            <div className={styles.navbar} >
+                
+            </div>
+        )
+    }
+}

src/components/Layout/WindowNavbar/index.less

@@ -0,0 +1,11 @@
+.navbar{
+    display: block;
+    -webkit-app-region: drag;
+    height: 35px;
+    width: 100%;
+    position: absolute;
+    z-index: 5000;
+    top: 0;
+    right: 0;
+    background-color: rgba(45, 45, 45, 0.274);
+}

src/components/Layout/index.js

@@ -1,5 +1,6 @@
 import Sider from './Sider'
 import Control from './ControlBar'
 import Overlay from './Overlay/index.tsx'
+import WindowNavbar from './WindowNavbar/index.js'
 
-export { Sider, Control, Overlay }
+export { Sider, Control, Overlay, WindowNavbar }

src/core/cores/router/index.js

@@ -18,11 +18,11 @@ export const router = {
   },
   go: e => {
     router.push(e);
-    goTo.element('primaryContent');
+    // goTo.element('primaryContent');
   },
   goprofile: () => {
     router.push(`/@${e}`);
-    goTo.element('primaryContent');
+    // goTo.element('primaryContent');
   },
 };
 

src/core/index.js

@@ -4,6 +4,7 @@ import { cloneDeep } from 'lodash';
 import store from 'store';
 import { i18n, app_config } from 'config';
 import * as errorHandlers from 'core/libs/errorhandler'
+import platform from 'platform'
 
 const { pathToRegexp } = require('path-to-regexp');
 
@@ -23,6 +24,8 @@ export const app_info = {
   version: package_json.version,
   logo: app_config.FullLogoPath,
   logo_dark: app_config.DarkFullLogoPath,
+  os: platform.os,
+  layout: platform.layout
 };
 
 export function imageToBase64(img, callback){

src/layouts/BaseLayout.js

@@ -5,6 +5,7 @@ import { Loader } from 'components'
 import NProgress from 'nprogress'
 import { withRouter, connect } from 'umi'
 import { queryLayout } from 'core'
+import WindowNavbar from 'components/Layout/WindowNavbar'
 import config from 'config'
 
 import PrimaryLayout from './PrimaryLayout'
@@ -43,6 +44,7 @@ class BaseLayout extends React.Component {
         <Helmet>
           <title>{config.app_config.siteName}</title>
         </Helmet>
+        {this.props.app.electron? <WindowNavbar /> : null}
         {Loader(this.renderLoading)}
         <Container>{children}</Container>
       </React.Fragment>

src/layouts/PrimaryLayout.js

@@ -53,7 +53,6 @@ class PrimaryLayout extends React.Component {
     store.set('collapsed', !fromStore)
   }
 
-
   render() {
     const { location, dispatch, children } = this.props
     const { collapsed, isMobile } = this.state
@@ -99,10 +98,9 @@ class PrimaryLayout extends React.Component {
                   overflow: "hidden", 
                   opacity: currentTheme.backgroundImage.opacity
                 }} /> : null}
-          <antd.Layout id="app" className={isActive(currentTheme['darkmode'])? "dark_mode" : null }>
+          <antd.Layout id="app" style={this.props.app.electron? { paddingTop: "35px", marginBottom: "12px", borderRadius: "12px" } : null} className={isActive(currentTheme['darkmode'])? "dark_mode" : null }>
             <Sider {...SiderProps} />
             <div className={styles.primary_layout_container}>
-           
                 <Content
                   id="primaryContent"
                   className={styles.primary_layout_content}

src/models/app.js

@@ -26,13 +26,20 @@ export default {
     controlActive: false,
     feedOutdated: false,
 
+    electron: null,
     app_settings: store.get(app_config.app_settings_storage),
     app_theme: store.get(app_config.appTheme_container) || [],
     notifications: [],
-    locationQuery: {},
   },
   subscriptions: {
     setup({ dispatch }) {
+      try {
+        const electron = window.require("electron")
+        dispatch({ type: 'updateState', payload: { electron: electron } });
+        console.log('ELECTRON INTERFACED')
+      } catch (error) {
+        console.log('Normal interface')
+      }
       dispatch({ type: 'query' });
     },
     setupHistory({ dispatch, history }) {
@@ -143,10 +150,10 @@ export default {
       };
     },
     updateFrames(state) {
+      try {
         let sessionAuthframe = sessionStorage.getItem('session')
         let sessionDataframe = sessionStorage.getItem('data')
         
-      try {
         if (sessionAuthframe) {
           sessionAuthframe = JSON.parse(atob(sessionAuthframe))
         }  

src/pages/index.js

@@ -23,12 +23,16 @@ class PageIndex extends React.PureComponent {
 
   render() {
     const AppState = () => {
+      if (!this.props.app) {
+        return false
+      }
       let tmp = []
   
       const keys = Object.keys(this.props.app)
       const values = Object.values(this.props.app)
       const lenght = keys.length
   
+      if(lenght > 0){
         for (let i = 0; i < lenght; i++) {
           let obj = {}
           obj.key = keys[i]
@@ -38,18 +42,24 @@ class PageIndex extends React.PureComponent {
         }
       
         const map = tmp.map(e => {
+          try {
            const v = JSON.stringify(e.value)
+           if(!v) return false
            return(
              <div style={{ margin: '20px 50px 20px 10px' }} key={e.key} > 
                <h4>{e.key}</h4>
                {v.length < 500? <span>{v}</span> : <antd.Collapse ><antd.Collapse.Panel header={`Hidden text ( ${v.length} Characters )`}><span>{v}</span></antd.Collapse.Panel></antd.Collapse>}
              </div>
            )
+          } catch (error) {
+            return null
+          }
         })
 
         return map
       }
-  
+      return null
+    }
     return (
       <div>
         <antd.Card style={{ wordBreak: 'break-all' }} title={<><Icons.Redux style={{ height: '19px', marginRight: '7px' }} /> Redux state</>}>

src/theme/base/index.less

@@ -38,7 +38,10 @@
 }
 
 #app {
+  -webkit-app-region: no-drag;
   overflow: hidden;
+  border-radius: 12px;
+
   color: @AppTheme_global_color!important;
   background-color: @AppTheme_global_background!important;
   background-repeat: repeat-x;
@@ -48,7 +51,7 @@
   overflow: hidden;
   background-color: transparent;
   margin: auto;
-  height: 100vh;
+  height: 100%;
   width: 100vw;
 
   transition: all @__Global_Components_transitions_dur linear;
@@ -79,6 +82,8 @@
 }
 
 body {
+  -webkit-app-region: no-drag;
+
   scroll-behavior: smooth;
   height: 100%;
 
@@ -88,7 +93,7 @@ body {
   line-height: @base-line-height;
 
   font-family: @__Global_texted_font;
-
+  border-radius: 12px;
 }
 
 @media (max-width: @bp-small){
@@ -113,10 +118,6 @@ body {
 
 }
 
-
-
-
-
 .text-overflow {
   white-space: nowrap;
   text-overflow: ellipsis;