0.2.26A2

2025-06-09 10:34:17 +00:00 · 2020-03-27 00:35:26 +01:00 · 2020-03-27 00:35:26 +01:00 · 839ea58aba
commit 839ea58aba
parent 44b186c3af
71 changed files with 1059 additions and 1248 deletions
--- a/.umirc.js
+++ b/.umirc.js
@ -3,9 +3,8 @@ import { resolve } from 'path'
 import { i18n } from './config/ycore.config.js'
 export default {
  ignoreMomentLocale: true,
-  targets: {
-    ie: 9,
-  },
+  hash: true,
+  targets: { ie: 9,},
  treeShaking: true,
  plugins: [
    [
@ -13,7 +12,6 @@ export default {
      {
        dva: {
          immer: true,
-          hmr: true,
        },
        antd: true,
        dynamicImport: {
@ -52,13 +50,12 @@ export default {
            return routes
          },
        },
-        dll: false,
+        dll:false,
        pwa: {
          manifestOptions: {
            srcPath: 'manifest.json',
          },
        },
-        hd: false,
      },
    ],
  ],
@ -68,13 +65,11 @@ export default {
  // Webpack Configuration
  alias: {
    ycore: resolve(__dirname, './src/@ycore/ycore_worker.js'),
-    api: resolve(__dirname, './src/services/'),
    globals: resolve(__dirname, './globals'),
    components: resolve(__dirname, './src/components'),
    config: resolve(__dirname, './config/ycore.config.js'),
    models: resolve(__dirname, './src/models'),
    routes: resolve(__dirname, './src/routes'),
-    services: resolve(__dirname, './src/services'),
    themes: resolve(__dirname, './src/themes'),
    utils: resolve(__dirname, './src/utils'),
  },
@ -90,4 +85,7 @@ export default {
      'lodash',
    ],
  ],
+
+  
+
 }
--- a/config/app.settings.js
+++ b/config/app.settings.js
@ -23,13 +23,10 @@ export var AppSettings = {
  DisablePasswordRecover: true,
  // Activating this, the logs must be trowed
  force_showDevLogs: fromStorage? SettingStoragedValue('force_showDevLogs') : false,
-  StrictLightMode: fromStorage? SettingStoragedValue('strict_lightMode') : false,
  SignForNotExpire: fromStorage? SettingStoragedValue('sessions_noexpire') : false,
  auto_search_ontype: fromStorage? SettingStoragedValue('auto_search_ontype') : false,
  auto_feedrefresh: fromStorage? SettingStoragedValue('auto_feedrefresh') : false,
-  default_showpostcreator: fromStorage? SettingStoragedValue('default_showpostcreator') : false,
-  default_collapse_sider: fromStorage? SettingStoragedValue('default_collapse_sider') : true,
-  force_show_postactions: fromStorage? SettingStoragedValue('force_show_postactions') : false,
+  auto_hide_postbar: fromStorage? SettingStoragedValue('auto_hide_postbar') : true,
  MaxLengthPosts: '512',
  CurrentBundle: 'light_ng',
  // In KB
--- a/config/theme.config.js
+++ b/config/theme.config.js
@ -3,6 +3,6 @@ const path = require('path')
 const lessToJs = require('less-vars-to-js')

 module.exports = () => {
-  const themePath = path.join(__dirname, `../src/themes/vars.less`)
+  const themePath = path.join(__dirname, `../src/themes/index.less`)
  return lessToJs(fs.readFileSync(themePath, 'utf8'))
 }
--- a/globals/settings.js
+++ b/globals/settings.js
@ -15,20 +15,11 @@ function SettingStoragedValue(e) {

 export var ListSettings = [
  {
-    SettingID: 'strict_lightMode',
+    SettingID: 'sessions_noexpire',
    type: 'switch',
-    title: 'Strict Light Mode',
-    description:
-      'Force the app to apply full light mode theme when the light mode is activated... (Experimental)',
-    value: fromStorage ? SettingStoragedValue('strict_lightMode') : false,
-  },
-  {
-    SettingID: 'default_collapse_sider',
-    type: 'switch',
-    title: 'Default Collapse Sider',
-    description:
-      'Force the app to apply collapsed mode theme when the app is mounted...',
-    value: fromStorage ? SettingStoragedValue('default_collapse_sider') : true,
+    title: 'No expire session',
+    description: 'Force the app to not expire any session... [Developer]',
+    value: fromStorage ? SettingStoragedValue('sessions_noexpire') : false,
  },
  {
    SettingID: 'auto_feedrefresh',
@ -38,6 +29,22 @@ export var ListSettings = [
      'Force the app to auto refresh the posts feed when exist news posts for update',
    value: fromStorage ? SettingStoragedValue('auto_feedrefresh') : false,
  },
+  {
+    SettingID: 'auto_search_ontype',
+    type: 'switch',
+    title: 'Detect input on search bar',
+    description:
+      'Force the app to automaticly search when a type input is detected... [Developer]',
+    value: fromStorage ? SettingStoragedValue('auto_search_ontype') : false,
+  },
+  {
+    SettingID: 'auto_hide_postbar',
+    type: 'switch',
+    title: 'Auto hide postbar',
+    description:
+      'Force the app to dont hide the post actions (likes, comments ...etc) automaticly... [Developer]',
+    value: fromStorage ? SettingStoragedValue('auto_hide_postbar') : true,
+  },
  {
    SettingID: 'force_showDevLogs',
    type: 'switch',
@ -45,37 +52,4 @@ export var ListSettings = [
    description: 'Show all console logs... [Developer]',
    value: fromStorage ? SettingStoragedValue('force_showDevLogs') : false,
  },
-  {
-    SettingID: 'sessions_noexpire',
-    type: 'switch',
-    title: 'No expire session',
-    description: 'Force the app to not expire any session... [Developer]',
-    value: fromStorage ? SettingStoragedValue('sessions_noexpire') : false,
-  },
-  {
-    SettingID: 'auto_search_ontype',
-    type: 'switch',
-    title: 'Auto search',
-    description:
-      'Force the app to automaticly search when a type input is detected... [Developer]',
-    value: fromStorage ? SettingStoragedValue('auto_search_ontype') : false,
-  },
-  {
-    SettingID: 'default_showpostcreator',
-    type: 'switch',
-    title: 'Show default Post Creator',
-    description:
-      'Force the app to automaticly search when a type input is detected... [Developer]',
-    value: fromStorage
-      ? SettingStoragedValue('default_showpostcreator')
-      : false,
-  },
-  {
-    SettingID: 'force_show_postactions',
-    type: 'switch',
-    title: 'Not auto hide Posts Actions',
-    description:
-      'Force the app to dont hide the post actions (likes, comments ...etc) automaticly... [Developer]',
-    value: fromStorage ? SettingStoragedValue('force_show_postactions') : false,
-  },
 ]
--- a/package.json
+++ b/package.json
@ -3,8 +3,8 @@
  "UUID": "C8mVSr-4nmPp2-pr5Vrz-CU4kg4",
  "title": "Comty™",
  "DevBuild": true,
-  "version": "0.2.25",
-  "stage": "A1",
+  "version": "0.2.26",
+  "stage": "A2",
  "description": "",
  "main": "app/main.js",
  "author": "RageStudio",
@ -23,10 +23,11 @@
    "@material-ui/icons": "^4.9.1",
    "antd": "^4.0.4",
    "axios": "^0.19.2",
-    "babel-core": "7.0.0-bridge.0",
+    "bag.js": "0.0.2",
    "classnames": "^2.2.6",
    "cryptr": "^6.0.1",
    "dotenv": "^8.2.0",
+    "dva": "2.4.1",
    "dva-model-extend": "^0.1.2",
    "enquire-js": "^0.2.1",
    "jquery": "^3.4.1",
@ -45,7 +46,7 @@
    "react-dazzle": "^1.4.0",
    "react-helmet": "^5.2.1",
    "react-perfect-scrollbar": "^1.5.8",
-    "react-scripts": "^3.3.1",
+    "react-scripts": "^3.4.1",
    "react-select-country-list": "^2.1.2",
    "react-sound": "^1.2.0",
    "react-virtualized": "^9.21.2",
@ -60,16 +61,13 @@
    "@lingui/cli": "^2.9.1",
    "@lingui/loader": "^2.9.1",
    "@types/react": "^16.9.19",
+    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^10.0.3",
    "babel-plugin-dev-expression": "^0.2.2",
    "babel-plugin-import": "^1.13.0",
    "babel-plugin-macros": "^2.8.0",
    "babel-plugin-module-resolver": "^4.0.0",
    "cross-env": "^7.0.0",
-    "electron": "^8.1.1",
-    "electron-builder": "^22.4.1",
-    "electron-devtools-installer": "^2.2.4",
-    "electron-reload": "^1.5.0",
    "eslint": "^6.8.0",
    "eslint-config-react-app": "^5.2.0",
    "eslint-plugin-flowtype": "^4.6.0",
@ -92,6 +90,9 @@
    "wait-on": "^4.0.0",
    "workbox-webpack-plugin": "^5.0.0"
  },
+  "engines": {
+    "node": ">= 10.0.0"
+  },
  "lingui": {
    "fallbackLocale": "en",
    "sourceLocale": "en",
@ -111,17 +112,6 @@
  },
  "scripts": {
    "clean": "rimraf dist",
-    "postinstall": "electron-builder install-app-deps",
-    "app-dev": "concurrently \"npm run start\" \"wait-on http://localhost:8000 && npm run electron-dev\"",
-    "electron-dev": "cross-env NODE_ENV=development electron .",
-    "electron-prod": "cross-env NODE_ENV=production electron .",
-    "pack:mac": "npm run clean && npm run build && npm run private:build:mac",
-    "pack:win": "npm run clean && npm run build && npm run private:build:win",
-    "pack:linux": "npm run clean && npm run build && npm run private:build:linux",
-    "private:build:all": "electron-builder -mwl",
-    "private:build:mac": "electron-builder --mac",
-    "private:build:win": "electron-builder -c.extraMetadata.main=public/electron.js --win --x64",
-    "private:build:linux": "electron-builder --linux",
    "analyze": "cross-env ANALYZE=1 umi build",
    "build": "umi build",
    "start": "umi dev",
--- a/src/@ycore/libs/app_functions/pre.js
+++ b/src/@ycore/libs/app_functions/pre.js
@ -1,3 +1,4 @@
+import { RenderFeed } from '../../../components/MainFeed'
 import { transitionToogle } from '../../../pages/login'
 import { SetControls, CloseControls } from '../../../components/Layout/Control'
 import { SwapMode } from '../../../components/Layout/Secondary'
@ -20,7 +21,7 @@ export function SetupApp() {
    localStorage.setItem('resource_bundle', 'light_ng')
  }
  setTimeout(() => {
-    ycore.crouter.native('main')
+    ycore.router.go('main')
  }, 500)
 }

@ -41,6 +42,9 @@ export const SecondarySwap = {
  openPost: e => {
    SwapMode.openPost(e)
  },
+  openSearch: e => {
+    SwapMode.openSearch(e)
+  }
 }

 export const ControlBar = {
--- a/src/@ycore/libs/comty_ng/comty_get.js
+++ b/src/@ycore/libs/comty_ng/comty_get.js
@ -13,8 +13,33 @@ export const comty_get = {
      formdata
    )
  },
-  session_data: () => {},
-  general_data: () => {
+  session_id: callback => {
+    let formdata = new FormData()
+    formdata.append('type', 'get')
+
+    API_Call((err,res) => {
+      if (err) return false
+      try {
+        const a = JSON.parse(res)['data']
+        return callback(err, a.session_id)
+      } catch (error) {
+        return callback(err, '0x0000')
+      }
+    },
+    endpoints.get_sessions,
+    formdata)
+  },
+  session: (callback) => {
+    let formdata = new FormData()
+    formdata.append('type', 'get')
+
+    API_Call((err,res) => {
+      return callback(err, res)
+    },
+    endpoints.get_sessions,
+    formdata)
+  },
+  general_data: (callback, payload) => {
    if (!payload) return false
    const { id } = payload

--- a/src/@ycore/libs/comty_ng/comty_post.js
+++ b/src/@ycore/libs/comty_ng/comty_post.js
@ -1,4 +1,4 @@
-import { API_Call, endpoints, AppSettings } from 'ycore'
+import { API_Call, endpoints, AppSettings, yconsole } from 'ycore'

 export const comty_post = {
  getFeed: (callback, payload) => {
@ -127,6 +127,29 @@ export const comty_post = {
      formdata
    )
  },
+  getSaved: (callback, payload) => {
+    if (!payload) {
+      yconsole.log(
+        'Calling api without Payload!!! | Limmit & OffsetKey = default |'
+      )
+    }
+    if (payload) {
+      const { limit, fkey } = payload
+    }
+
+    let formdata = new FormData()
+    formdata.append('type', 'saved')
+    formdata.append('limit', payload? limit : AppSettings.limit_post_catch || 20)
+    formdata.append('after_post_id', payload? fkey : 0)
+
+    API_Call(
+      (err, res) => {
+        return callback(err, res)
+      },
+      endpoints.get_posts,
+      formdata
+    )
+  },
  edit: (callback, payload) => {},
  __pin: (callback, payload) => {},
  __boost: (callback, payload) => {
--- a/src/@ycore/libs/comty_ng/get_app_session.js
+++ b/src/@ycore/libs/comty_ng/get_app_session.js
@ -1,46 +0,0 @@
-import { __server, yconsole, endpoints, token_data } from 'ycore'
-
-export const get_app_session = {
-  get_id: callback => {
-    let formdata = new FormData()
-    formdata.append('server_key', __server.getKey())
-    formdata.append('type', 'get')
-    const requestOptions = {
-      method: 'POST',
-      body: formdata,
-      redirect: 'follow',
-    }
-    const uriObj = `${endpoints.get_sessions}${token_data.__token()}`
-    fetch(uriObj, requestOptions)
-      .then(response => response.text())
-      .then(result => {
-        const pre = JSON.stringify(result)
-        const pre2 = JSON.parse(pre)
-        const pre3 = JSON.stringify(JSON.parse(pre2)['data'])
-        const obj = JSON.parse(pre3)['session_id']
-        return callback(null, obj)
-      })
-      .catch(error => yconsole.log('error', error))
-  },
-  raw: callback => {
-    const formdata = new FormData()
-    formdata.append('server_key', __server.getKey())
-    formdata.append('type', 'get')
-    const requestOptions = {
-      method: 'POST',
-      body: formdata,
-      redirect: 'follow',
-    }
-    const uriObj = `${endpoints.get_sessions}${token_data.__token()}`
-    fetch(uriObj, requestOptions)
-      .then(response => response.text())
-      .then(result => {
-        const pre = JSON.stringify(result)
-        const parsed = JSON.parse(pre)
-        const obj = JSON.parse(parsed)['data']
-        yconsole.log(result, obj)
-        return callback(null, obj)
-      })
-      .catch(error => yconsole.log('error', error))
-  },
-}
--- a/src/@ycore/libs/comty_ng/pre.js
+++ b/src/@ycore/libs/comty_ng/pre.js
@ -5,7 +5,6 @@ import { RenderFeed } from 'components/MainFeed'
 export * from './comty_post.js'
 export * from './comty_user.js'
 export * from './comty_post_comment.js'
-export * from './get_app_session.js'
 export * from './comty_search.js'
 export * from './comty_get.js'

@ -31,6 +30,9 @@ export const IsThisPost = {
  },
  boosted: () => {

+  },
+  saved: () => {
+
  },
  pinned: () => {

--- a/src/@ycore/libs/rs_cloud/pre.js
+++ b/src/@ycore/libs/rs_cloud/pre.js
@ -13,13 +13,13 @@ export const Alive_API = {
    ycore.notify.expire(
      'It seems that your token has expired or no longer exists'
    )
-    ycore.crouter.native('login')
+    ycore.router.go('login')
  },
  violation: a => {
    ycore.notify.expire(
      'It seems that there has been a problem with your token, we need you to log in again.'
    )
-    ycore.crouter.native('login')
+    ycore.router.go('login')
  },
 }
 export const __server = {
--- a/src/@ycore/ycore_worker.js
+++ b/src/@ycore/ycore_worker.js
@ -20,7 +20,6 @@ import './libs.js'
 export * from '../../config/app.settings.js'
 export * from './libs.js'

-export var { router } = require('utils')
 export var endpoints = Endpoints

 export const package_json = require('../../package.json')
@ -200,6 +199,17 @@ export function gotoBottom(id) {
  element.scrollTop = element.scrollHeight - element.clientHeight
 }

+/**
+ * Go to top of an element by id
+ *
+ * @param id {string}
+ * @return null
+ */
+export function gotoTop(id) {  
+  const element = document.getElementById(id)
+  element.scrollTop = element.scrollHeight + element.clientHeight
+}
+
 /**
 * Go to position of an element by id
 *
@ -233,16 +243,14 @@ export const time = {
 * Framework functionality for navigate between pages (Router)
 *
 */
-export const crouter = {
-  native: e => {
+export const router = {
+  go: e => {
+    gotoElement('primaryContent')
    umiRouter.push({
      pathname: `/${e}`,
      search: window.location.search,
    })
  },
-  default: e => {
-    router.push(e)
-  },
 }

 /**
--- a/src/components/CustomIcons/index.js
+++ b/src/components/CustomIcons/index.js
@ -2,7 +2,10 @@ const VerifiedBadge = () => (<svg xmlns="http://www.w3.org/2000/svg" fill="#55ac
 const CommonThings = () => (<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#ff5991" d="M15,2C16.94,2 18.59,2.7 19.95,4.05C21.3,5.41 22,7.06 22,9C22,10.56 21.5,11.96 20.58,13.2C19.64,14.43 18.44,15.27 16.97,15.7L17,15.38V15C17,12.81 16.23,10.93 14.65,9.35C13.07,7.77 11.19,7 9,7H8.63L8.3,7.03C8.73,5.56 9.57,4.36 10.8,3.42C12.04,2.5 13.44,2 15,2M9,8A7,7 0 0,1 16,15A7,7 0 0,1 9,22A7,7 0 0,1 2,15A7,7 0 0,1 9,8M9,10A5,5 0 0,0 4,15A5,5 0 0,0 9,20A5,5 0 0,0 14,15A5,5 0 0,0 9,10Z"></path></svg>)
 const SunSVG = () => (<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 21 21"><g fill="none" fillRule="evenodd"><path fill="#fff" fillRule="nonzero" d="M21 10.5l-3 3V18h-4.5l-3 3-3-3H3v-4.5l-3-3 3-3V3h4.5l3-3 3 3H18v4.5z"></path><circle stroke="#000" strokeWidth="1.5" cx="10.5" cy="10.5" r="4"></circle></g></svg>)
 const MoonSVG = () => (<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15"  viewBox="0 0 21 21"><g fill="none" fillRule="evenodd"><circle fill="#fff" cx="10.5" cy="10.5" r="10.5"></circle><path d="M13.396 11c0-3.019-1.832-5.584-4.394-6.566A6.427 6.427 0 0111.304 4C15.002 4 18 7.135 18 11c0 3.866-2.998 7-6.698 7A6.42 6.42 0 019 17.566c2.564-.98 4.396-3.545 4.396-6.566z" fill="#2F2E30" fillRule="nonzero"></path></g></svg>)
-const RobotOutlined = () => (<svg viewBox="64 64 896 896" focusable="false" class="" data-icon="robot" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M300 328a60 60 0 10120 0 60 60 0 10-120 0zM852 64H172c-17.7 0-32 14.3-32 32v660c0 17.7 14.3 32 32 32h680c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32zm-32 660H204V128h616v596zM604 328a60 60 0 10120 0 60 60 0 10-120 0zm250.2 556H169.8c-16.5 0-29.8 14.3-29.8 32v36c0 4.4 3.3 8 7.4 8h729.1c4.1 0 7.4-3.6 7.4-8v-36c.1-17.7-13.2-32-29.7-32zM664 508H360c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h304c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"></path></svg>)
+const RobotOutlined = () => (<svg viewBox="64 64 896 896" focusable="false"  data-icon="robot" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M300 328a60 60 0 10120 0 60 60 0 10-120 0zM852 64H172c-17.7 0-32 14.3-32 32v660c0 17.7 14.3 32 32 32h680c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32zm-32 660H204V128h616v596zM604 328a60 60 0 10120 0 60 60 0 10-120 0zm250.2 556H169.8c-16.5 0-29.8 14.3-29.8 32v36c0 4.4 3.3 8 7.4 8h729.1c4.1 0 7.4-3.6 7.4-8v-36c.1-17.7-13.2-32-29.7-32zM664 508H360c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h304c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"></path></svg>)
+const SavedPost = () => (<svg viewBox="0 0 24 24" focusable="false" width="1em" height="1em" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" ><path d="M4 3h16a2 2 0 0 1 2 2v6a10 10 0 0 1-10 10A10 10 0 0 1 2 11V5a2 2 0 0 1 2-2z"></path><polyline points="8 10 12 14 16 10"></polyline></svg>)
+const SavedPostColor = () => (<svg viewBox="0 0 24 24" focusable="false" width="1em" height="1em" fill="rgb(230, 247, 255)" stroke="rgb(24, 144, 255)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" ><path d="M4 3h16a2 2 0 0 1 2 2v6a10 10 0 0 1-10 10A10 10 0 0 1 2 11V5a2 2 0 0 1 2-2z"></path><polyline points="8 10 12 14 16 10"></polyline></svg>)
+const SavedPostGrey = () => (<svg viewBox="0 0 24 24" focusable="false" width="1em" height="1em" fill="rgb(196, 196, 196)" stroke="rgba(133, 133, 133, 1)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" ><path d="M4 3h16a2 2 0 0 1 2 2v6a10 10 0 0 1-10 10A10 10 0 0 1 2 11V5a2 2 0 0 1 2-2z"></path><polyline points="8 10 12 14 16 10"></polyline></svg>)

-const CustomIcons = {VerifiedBadge, CommonThings, SunSVG, MoonSVG, RobotOutlined}
+const CustomIcons = {SavedPostGrey, SavedPostColor, VerifiedBadge, CommonThings, SunSVG, MoonSVG, RobotOutlined, SavedPost}
 export default CustomIcons
--- a/src/components/HeaderSearch/index.js
+++ b/src/components/HeaderSearch/index.js
@ -30,10 +30,16 @@ export default class HeaderSearch extends Component {
    }
  }

+  openSearcher = () => {
+    const { value } = this.state
+    ycore.SecondarySwap.openSearch(value);
+  }
+
  sendToSearch = () => {
    const { value } = this.state
-    ycore.crouter.native(`s/${value}`)
+    ycore.router.go(`s/${value}`)
  }
+  
  onChange = e => {
    const { value } = e.target
    this.setState({ value: value })
@ -41,6 +47,7 @@ export default class HeaderSearch extends Component {
      this.autosend()
    }
  }
+
  autosend = () => {
    let timeout = null
    let input = document.getElementById('search_input')
@ -48,7 +55,7 @@ export default class HeaderSearch extends Component {
      clearTimeout(timeout)
      timeout = setTimeout(() => {
        const { value } = this.state
-        ycore.crouter.native(`s/${value}`)
+        ycore.router.go(`s/${value}`)
      }, 500)
    })
  }
@ -67,7 +74,7 @@ export default class HeaderSearch extends Component {
            prefix={<Icons.SearchOutlined />}
            placeholder=" Search on Comty..."
            onChange={this.onChange}
-            onPressEnter={this.sendToSearch}
+            onPressEnter={this.openSearcher}
          />
        </span>
      </div>
--- a/src/components/HeaderSearch/index.less
+++ b/src/components/HeaderSearch/index.less
@ -1,4 +1,4 @@
-@import '~themes/vars.less';
+@import '~themes/index.less';

 .HeaderSearchWrapper {
  z-index: 20;
--- a/src/components/Layout/ChatSider.less
+++ b/src/components/Layout/ChatSider.less
@ -1,4 +1,4 @@
-@import '~themes/vars.less';
+@import '~themes/index.less';

@LDarkMode-backgroud: rgba(47, 46, 48, 0.74);
@LLightMode-backgroud: #fff;
--- a/src/components/Layout/Control.less
+++ b/src/components/Layout/Control.less
@ -1,4 +1,4 @@
-@import '~themes/vars.less';
+@import '~themes/index.less';

 .ControlCard {
  background-color: rgba(0, 0, 0, 0.1);
--- a/src/components/Layout/Secondary/index.js
+++ b/src/components/Layout/Secondary/index.js
@ -5,7 +5,7 @@ import * as Icons from '@ant-design/icons'
 import styles from './index.less'
 import classnames from 'classnames'

-import { __priPost, __secComments } from './renders.js'
+import { __priPost, __secComments, __priSearch } from './renders.js'

 export const SwapMode = {
  close: () => {
@ -13,10 +13,19 @@ export const SwapMode = {
  },
  openPost: (a, b) => {
    SecondaryLayoutComponent.setState({
-      swap: true,
      mode: 'post',
      global_raw: a,
    })
+    SecondaryLayoutComponent.Swapper.open()
+  },
+  openSearch: a => {
+    SecondaryLayoutComponent.setState({
+      halfSwap: true,
+      loading: true,
+      mode: 'search',
+      pri_raw: a,
+    })
+    SecondaryLayoutComponent.Swapper.half()
  },
 }

@ -24,6 +33,7 @@ export default class Secondary extends React.PureComponent {
  constructor(props) {
    super(props), (window.SecondaryLayoutComponent = this)
    this.state = {
+      half: false,
      swap: false,
      mode: '',
      global_raw: '',
@ -32,13 +42,29 @@ export default class Secondary extends React.PureComponent {
    }
  }

-  closeSwap() {
-    this.setState({
-      swap: !this.state.swap,
-      pri_raw: null,
-      sec_raw: null,
-      mode: '',
-    })
+  Swapper = {
+    close: () => {
+      this.setState({
+        swap: false,
+        half: false,
+        pri_raw: null,
+        sec_raw: null,
+        global_raw: null,
+        mode: null,
+      })
+    },
+    open: () => {
+      this.setState({
+        swap: true,
+        half: false,
+      })
+    },
+    half : () => {
+      this.setState({
+        swap: false,
+        half: true,
+      })
+    }
  }

  SwapBalanceContent(container) {
@ -60,6 +86,9 @@ export default class Secondary extends React.PureComponent {
      case 'post': {
        return this.renderPost(this.state.global_raw)
      }
+      case 'search': {
+        return this.renderSearch(dtraw)
+      }
      default:
        return null
    }
@ -75,63 +104,88 @@ export default class Secondary extends React.PureComponent {
    }
  }

+  renderSearch = key => {
+    const payload = { key: key }
+    ycore.comty_search.keywords((err, res) => {
+      if (err) {
+        ycore.notify.error(err)
+      }
+      ycore.yconsole.log('Founded entries => ', JSON.parse(res))
+      this.setState({ global_raw: res, loading: false })
+    }, payload)
+    return (
+      <div className={styles.renderSearch_wrapper}>
+        <h2><Icons.SearchOutlined /> Results of {key || '... nothing ?'}</h2>
+        <__priSearch payload={this.state.global_raw} />
+      </div>
+    )
+  }
+
  renderPost = payload => {
    const post_data = JSON.parse(payload)['post_data']
-    console.log(post_data)
    return <__priPost payload={post_data} />
  }

  renderComments = payload => {
-    const post_comments = JSON.parse(payload)['post_comments']
-    const post_data = JSON.parse(payload)['post_data']
-    console.log(post_comments)
-    return <__secComments post_id={post_data.post_id} payload={post_comments} />
+    try {
+      const post_comments = JSON.parse(payload)['post_comments']
+      const post_data = JSON.parse(payload)['post_data']
+      return (
+        <__secComments post_id={post_data.post_id} payload={post_comments} />
+      )
+    } catch (error) {
+      return null
+    }
  }

  render() {
    const { userData } = this.props
    return (
+      <>
+      <div className={styles.__secondary_colider}></div>
      <div
-        className={classnames(styles.SecondaryWrapper, {
+        className={classnames(styles.secondary_wrapper, {
          [styles.active]: this.state.swap,
+          [styles.half]: this.state.half,
        })}
      >
-        <div className={styles.UserHeader}>
+        <div className={styles.secondary_userholder}>
          <div className={styles.notif_box}></div>
          <img
-            onClick={() => ycore.crouter.native(`@${userData.username}`)}
+            onClick={() => ycore.router.go(`@${userData.username}`)}
            src={userData.avatar}
          />
        </div>

        <div
-          className={classnames(styles.container, {
-            [styles.desktop_mode]: this.props.desktop_mode,
-          })}
+          className={styles.secondary_layout_bg}
        >
-          <div className={styles.container_body}>
-            {this.state.swap ? (
+          
+          <div className={styles.secondary_container_1}>
+            {this.state.swap || this.state.half ? (
              <antd.Button
                type="ghost"
                icon={<Icons.LeftOutlined />}
-                onClick={() => this.closeSwap()}
+                onClick={() => this.Swapper.close()}
              >
-                {' '}
-                Back{' '}
+                Back
              </antd.Button>
            ) : null}
            {this.SwapBalanceContent('__pri')}
          </div>
-        </div>
+        
+
+          <div
+            className={classnames(styles.secondary_container_2, {
+              [styles.active]: this.state.swap,
+            })}
+          >
+            {this.SwapBalanceContent('__sec')}
+          </div>

-        <div
-          className={classnames(styles.container_2, {
-            [styles.active]: this.state.swap,
-          })}
-        >
-          {this.SwapBalanceContent('__sec')}
        </div>
      </div>
+      </>
    )
  }
 }
--- a/src/components/Layout/Secondary/index.less
+++ b/src/components/Layout/Secondary/index.less
@ -1,45 +1,58 @@
-@SwapAnimDuration: 340ms;
+@import '~themes/index.less';

-.SecondaryWrapper {
-  width: 27%;
+.__secondary_colider{
+  position: relative;
+  float: right;
+  width: @__secondary_colider_width;
+  height: 100vh;
+  background-color: @__Global_layout_backgroud;
+}
+
+.secondary_wrapper {
+  width: @secondary_wrapper_hidden_width;
  height: 100vh;

-
-  position: relative;
-  float: left;
-  overflow-y: hidden !important;
+  z-index: 50;
+  position: absolute;
+  right: 0;
+  top: 0;
  overflow-x: hidden;

  display: flex;

  &.active {
-    width: 96vw;
-    position: absolute;
-    right: 0;
-
-    >.container {
-      border-radius: 12px 12px 12px 12px;
+    width: @secondary_wrapper_showFull_width;
+    >.container_bg {
+      border-radius: @__Global_layout_border-rd;
+    }
+    @media (min-width: 1000px) {
+      width: 95.4%
    }
  }

+  &.half {
+    width: @secondary_wrapper_showHalf_width;
+    >.container_bg {
+      border-radius: 12px 0 0 12px;
+    }
+  }

-  transition: all @SwapAnimDuration ease-in-out;
+  transition: width @__Global_SwapAnimDuration ease-in-out;

 }

-.UserHeader {
+.secondary_userholder {
  right: 20px;
  top: 25px;
  display: flex;
  position: absolute;
-  z-index: 52;
+  z-index: 51;

  img {
    border-radius: 15px;
    width: 40px;
    transition: all 150ms linear;
    box-shadow: 0px 0px 0 0px rgba(255, 255, 255, 0);
-
  }

  img:hover {
@ -58,63 +71,78 @@
  }
 }

-.container {
-  z-index: 50;
-  position: relative;
-  background-color: #201F23;
-  color: @DarkMode-color_container  !important;
-
-  &.desktop_mode {
-    border-radius: 0 12px 12px 0;
-  }
-
+.secondary_layout_bg {
  width: 100%;
-  height: 100vh;
+  height: 100%;
+
+  right: 0;
+  z-index: 50;
+  position: absolute;
+  display: flex;
+  overflow: hidden;
+
+  transition: all @__Global_SwapAnimDuration ease-in-out;
+  background-color: @secondary_container_bg_background;
+
+  border-radius: @__Global_layout_border-rd;
+}
+
+.secondary_container_1 {
+  width: 100%;
+  height: 100%;
+
+  position: relative;
+  padding: @secondary_container_1_padding;
+
+  color: @secondary_container_1_color;

  :global {
-    h1 {
-      color: @DarkMode-color_container;
-    }
-
    .ant-btn {
-      color: #ffffff;
-      background-color: #4c4c4c;
+      color: @secondary_container_1_btn_color;
+      background-color: @secondary_container_1_btn_backgroud;
      border-color: transparent;
      border-radius: 12px;
    }

    .ant-btn:hover {
-      box-shadow: 0px 0px 10px 0px rgba(255, 255, 255, 0.205);
-      transition: all 150ms linear;
+      box-shadow: @secondary_container_1_btn_shadow;
+      transition: all @__Global_Components_transitions_dur linear;
    }
  }
 }

-.container_body {
-  padding: 30px 375px 30px 75px;
-}
-
-.container_2 {
-  z-index: 51;
-
-  background-color: #fff;
-  border-radius: 32px 0 0 32px;
-  padding: 20px 15px 15px 15px;
-
-  width: 0;
+.secondary_container_2 {
+  position: relative;
  height: 100vh;
-  opacity: 0;
-
-  position: absolute;
+  width: 0;
  right: -500px;
+  padding: @secondaty_container_2_padding;
+  
+  opacity: 0;
+  color: @secondary_container_2_color;
+  background-color: @secondary_container_2_backgroud;
+
+  border-radius: 32px 0 0 32px;

  &.active {
-    width: 300px;
+    width: 400px;
    opacity: 1;
    right: 0;
+    @media (min-width: 1000px) {
+      width: 600px
+    }
  }

-  transition: all @SwapAnimDuration ease-in-out;
+  transition: all @__Global_SwapAnimDuration ease-in-out;
+  
 }

-.comments_body {}
+.renderSearch_wrapper {
+  height: 87vh;
+  overflow: hidden;
+  margin: 20px 0 0 0;
+  font-family: @__Global_general_font_family;
+  h2 {
+    color: #ffffff;
+  }
+}
--- a/src/components/Layout/Secondary/renders.js
+++ b/src/components/Layout/Secondary/renders.js
@ -1,5 +1,6 @@
 import React from 'react'
 import styles from './renders.less'
+import { SearchCard } from 'components'

 import * as antd from 'antd'
 import * as ycore from 'ycore'
@ -16,7 +17,6 @@ const VerifiedBadge = () => (
    height="15"
    viewBox="0 0 24 24"
  >
-    {' '}
    <path d="M23 12l-2.44-2.78.34-3.68-3.61-.82-1.89-3.18L12 3 8.6 1.54 6.71 4.72l-3.61.81.34 3.68L1 12l2.44 2.78-.34 3.69 3.61.82 1.89 3.18L12 21l3.4 1.46 1.89-3.18 3.61-.82-.34-3.68L23 12m-13 5l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z"></path>
  </svg>
 )
@ -80,7 +80,7 @@ export class __secComments extends React.Component {
    loading: false,
  }
  handleDeleteComment(id) {
-    console.log(`Removing Comment with id => ${id}`)
+    ycore.yconsole.log(`Removing Comment with id => ${id}`)
    ycore.comty_post_comment.delete(
      (err, res) => {
        if (err) {
@ -199,3 +199,99 @@ export class __secComments extends React.Component {
    )
  }
 }
+
+export class __priSearch extends React.Component {
+  renderResult = source => {
+    try {
+      const Empty = (
+        <div>
+          <antd.Result
+            status="404"
+            title="Nothing..."
+            subTitle="Sorry, this does not exist."
+          />
+        </div>
+      )
+
+      // TO DO:  Settings serach & Post Search
+      const usersParsed = JSON.parse(source)['users']
+      const groupsParsed = JSON.parse(source)['groups']
+      const pagesParsed = JSON.parse(source)['pages']
+
+      const users = () => {
+        if (usersParsed.length >= 1) {
+          ycore.yconsole.log('Users => ', usersParsed)
+          return this.EntryComponent('Users', usersParsed)
+        }
+      }
+      const groups = () => {
+        if (groupsParsed.length >= 1) {
+          ycore.yconsole.log('Groups => ', groupsParsed)
+          return this.EntryComponent('Groups', groupsParsed)
+        }
+      }
+      const pages = () => {
+        if (pagesParsed.length >= 1) {
+          ycore.yconsole.log('Pages => ', pagesParsed)
+          return this.EntryComponent('Pages', pagesParsed)
+        }
+      }
+
+      if (
+        !usersParsed.length >= 1 &&
+        !groupsParsed.length >= 1 &&
+        !pagesParsed.length >= 1
+      ) {
+        return Empty
+      }
+
+      return [users(), groups(), pages()]
+    } catch (error) {
+      return (
+        <center>
+          <h2>Render Error</h2>
+        </center>
+      )
+    }
+  }
+  EntryComponent = (t, source) => {
+    try {
+      return (
+            <antd.List
+              dataSource={source}
+              renderItem={item => 
+                <div id={item.id} className={styles.search_card} onClick={() => {ycore.router.go(`@${item.username}`)}}>
+                  <div className={styles.search_title}>
+                    <img src={item.avatar} />
+                    <p className={styles.search_user_username}>
+                      @{item.username}
+                      {ycore.booleanFix(item.verified) ? (
+                        <Icon component={VerifiedBadge} />
+                      ) : null}
+                    </p>
+                   
+                  </div>
+                  <div className={styles.search_text}>
+                    <p>{item.about}</p>
+                  </div>
+                </div>
+              }
+            />
+
+      )
+    } catch (error) {
+      return (
+        <center>
+          <h2>Render Error</h2>
+        </center>
+      )
+    }
+  }
+  render(){
+    return(      
+      <div className={styles.search_wrapper}>
+          {this.renderResult(this.props.payload)}
+      </div>
+    )
+  }
+}
--- a/src/components/Layout/Secondary/renders.less
+++ b/src/components/Layout/Secondary/renders.less
@ -1,4 +1,4 @@
-@import '~themes/vars.less';
+@import '~themes/index.less';

 .SecondaryBody {
  width: 100%;
@ -130,6 +130,7 @@
 }

 .comments_body {
+  height: 100%;
  font-family: "Poppins", sans-serif;
  padding: 75px 10px 10px 20px;

@ -145,7 +146,7 @@
  .comments_cards_wrapper {
    z-index: 50;
    overflow: scroll;
-
+    height: 84%;
    :global {
      overflow: scroll;
    }
@ -221,3 +222,51 @@
  }

 }
+
+.search_wrapper{
+  color: #ffffff;
+  height: 100%;
+  width: 82%;
+  margin: auto;
+  :global{
+    .ant-list-items{
+      height: 82vh;
+      overflow: scroll;
+    }
+  }
+}
+
+.search_card {
+  position: relative;
+  background-color: rgba(255, 255, 255, 0.034);
+  margin: 10px 0 10px 0;
+  border-radius: 8px;
+  padding: 10px;
+  word-break: break-all;
+  color: #ffffff;
+  cursor: pointer;
+
+  .search_title {
+    display: flex;
+
+    img {
+      float: left;
+      width: 30px;
+      height: 30px;
+      border-radius: 12px;
+    }
+
+    .search_user_username {
+      margin: 0 5px 0 8px;
+      vertical-align: middle;
+      height: 100%;
+      color: #ffffff;      
+      line-height: 25px;
+    }
+  }
+
+  .search_text {
+    margin: 10px 0 0 0;
+  }
+
+}
--- a/src/components/Layout/Sider.js
+++ b/src/components/Layout/Sider.js
@ -6,135 +6,119 @@ import * as Icons from '@ant-design/icons'
 import Icon from '@ant-design/icons'

 import { withI18n, Trans } from '@lingui/react'
-import ScrollBar from '../ScrollBar'
 import { config } from 'utils'
 import styles from './Sider.less'
 import * as ycore from 'ycore'
 import router from 'umi/router'
-import { CustomIcons } from 'components'
+import CustomIcons from '../CustomIcons'

@withI18n()
 class Sider extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
+      selectedKey: '',
      isHover: false,
-      collapsedWidth: '30',
+      collapsedWidth: '70',
    }
  }

-  StrictMode = () => {
-    const { theme } = this.props
-    if (ycore.AppSettings.StrictLightMode == false) {
-      return 'dark'
-    }
-    return theme
-  }
-
-  handleClickMenu = e => {
-    e.key === 'SignOut' && ycore.app_session.logout()
-    e.key === 'general_settings' && ycore.crouter.native('settings')
-    e.key === 'accountpage' && router.push('/account')
-    e.key === 'explore' && router.push('main')
-    e.key === 'admin_area' && router.push('__m')
-  }
-
-  isDarkMode() {
-    const { theme } = this.props
-    if (theme == 'dark') {
+  isSelected(key){
+    if (this.state.selectedKey == (key)) {
      return true
    }
    return false
  }
+  
+  onClickFunctions = {
+    saves: (e) => {
+      this.setState({selectedKey: e})
+      ycore.router.go('saves')  
+    },
+    events: (e) => {
+     this.setState({selectedKey: e})
+     ycore.router.go('events')
+    },
+    marketplace: (e) => {
+      this.setState({selectedKey: e})
+      ycore.router.go('marketplace') 
+    },
+    explore: (e) => {
+      this.setState({selectedKey: e})
+      ycore.router.go('main') 
+    },
+  }
+
+  handleClickMenu = e => {
+    e.key === 'SignOut' && ycore.app_session.logout()
+    e.key === 'general_settings' && ycore.router.go('settings')
+    e.key === 'saves' && this.onClickFunctions.saves(e.key)
+    e.key === 'events' && this.onClickFunctions.events(e.key)
+    e.key === 'marketplace' && this.onClickFunctions.marketplace(e.key)
+    e.key === 'explore' && this.onClickFunctions.explore(e.key)
+    e.key === 'debug_area' && ycore.router.go('__m')
+  }

  render() {
-    const {
-      theme,
-      userData,
-      collapsed,
-      onThemeChange,
-      onCollapseChange,
-    } = this.props
    return (
-      <div className={styles.siderwrapper}>
+      <div className={styles.left_sider_wrapper}>
        <antd.Layout.Sider
-          breakpoint="lg"
          trigger={null}
-          collapsible
-          defaultCollapsed="true"
-          collapsedWidth={this.state.collapsedWidth}
-          theme={this.StrictMode()}
-          width="180"
-          collapsed={collapsed}
-          className={classnames(styles.sider, {
-            [styles.darkmd]: this.isDarkMode(),
-            [styles.desktop_mode]: this.props.desktop_mode,
-          })}
-          onMouseEnter={() => this.setState({ collapsedWidth: '90' })}
-          onMouseLeave={() => this.setState({ collapsedWidth: '35' })}
+          collapsed
+          width="90"
+          className={styles.left_sider_container}
        >
-          <div className={styles.brand}>
+          <div className={styles.left_sider_brandholder}>
            <img
-              onClick={() => ycore.crouter.native('main')}
-              src={collapsed ? config.LogoPath : config.FullLogoPath}
+              onClick={() => ycore.router.go('main')}
+              src={config.LogoPath}
            />
          </div>
-          <div
-            className={
-              this.StrictMode()
-                ? styles.CollapserWrapperLight
-                : styles.CollapserWrapperDark
-            }
-          >
-            <antd.Button
-              width={'20px'}
-              onClick={() => onCollapseChange(!collapsed)}
-              icon={
-                collapsed ? (
-                  <Icons.RightOutlined />
-                ) : (
-                  <Icons.DoubleLeftOutlined />
-                )
-              }
-            />
-          </div>
-          <div className={styles.menuContainer}>
-            <ScrollBar options={{ suppressScrollX: true }}>
+         
+          <div className={styles.left_sider_menuContainer}>
+           
              <antd.Menu
-                className={
-                  collapsed ? styles.menuItemsCollapsed : styles.menuItems
-                }
+                selectable={false}
+                className={styles.left_sider_menuItems}
                mode="vertical"
                onClick={this.handleClickMenu}
              >
                <antd.Menu.Item key="explore">
-                  <Icons.CompassOutlined />
+                  <Icons.CompassTwoTone twoToneColor={this.isSelected('explore')? "#28c35d" : "#85858570"} />
                  <Trans>
                    <span>Explore</span>
                  </Trans>
                </antd.Menu.Item>

-                <antd.Menu.Item key="journal_page">
-                  <Icons.ReadOutlined />
+                <antd.Menu.Item key="saves">
+                  <Icon component={this.isSelected('saves')? CustomIcons.SavedPostColor : CustomIcons.SavedPostGrey} />
                  <Trans>
-                    <span>Journal</span>
+                    <span>Saves</span>
                  </Trans>
                </antd.Menu.Item>

-                <antd.Menu.Item key="marketplace_page">
-                  <Icons.ReconciliationOutlined />
+               
+                <antd.Menu.Item key="marketplace">
+                  <Icons.ShoppingTwoTone twoToneColor={this.isSelected('marketplace')? "#ff7a45" : "#85858570" }/>
                  <Trans>
                    <span>Marketplace</span>
                  </Trans>
                </antd.Menu.Item>
+         
+
+              <antd.Menu.Item key="events">
+                  <Icons.CarryOutTwoTone twoToneColor={this.isSelected('events')? "#ff4d4f" : "#85858570"}/>
+                  <Trans>
+                    <span>Events</span>
+                  </Trans>
+              </antd.Menu.Item>
+
              </antd.Menu>

              <div className={styles.something_thats_pulling_me_down}>
                <antd.Menu
                  selectable={false}
-                  className={
-                    collapsed ? styles.menuItemsCollapsed : styles.menuItems
-                  }
+                  className={styles.left_sider_menuItems}
                  mode="vertical"
                  onClick={this.handleClickMenu}
                >
@ -144,52 +128,25 @@ class Sider extends PureComponent {
                      <span>Settings</span>
                    </Trans>
                  </antd.Menu.Item>
-                  {ycore.booleanFix(userData.admin) ? (
-                    <antd.Menu.Item key="admin_area">
+                  {ycore.IsThisUser.dev() ? (
+                    <antd.Menu.Item key="debug_area">
                      <Icons.ThunderboltOutlined />
-                      <Trans>
-                        <span>{userData.username}</span>
-                      </Trans>
+                      <span>Debug</span>
                    </antd.Menu.Item>
                  ) : (
                    undefined
                  )}
-                  <antd.Menu.Item
-                    style={{ fontSize: '15px' }}
-                    key="LightMode"
-                    disabled={false}
-                  >
-                    {collapsed ? (
-                      <Icons.BulbOutlined />
-                    ) : (
-                      <div className={styles.themeSwitcher}>
-                        <antd.Switch
-                          onChange={onThemeChange.bind(
-                            this,
-                            theme === 'light' ? 'dark' : 'light'
-                          )}
-                          checkedChildren={
-                            <CustomIcons.MoonSVG
-                              style={{ vertialAlign: 'middle' }}
-                            />
-                          }
-                          unCheckedChildren={
-                            <CustomIcons.SunSVG
-                              style={{ vertialAlign: 'middle' }}
-                            />
-                          }
-                          defaultChecked={theme === 'dark'}
-                        />
-                      </div>
-                    )}
-                  </antd.Menu.Item>
+
                  <antd.Menu.Item key="SignOut">
                    <Icons.LogoutOutlined style={{ color: 'red' }} />
-                    {collapsed ? null : <Trans>Logout</Trans>}
+                     <Trans>
+                       <span>Logout</span>
+                     </Trans>
                  </antd.Menu.Item>
+
                </antd.Menu>
              </div>
-            </ScrollBar>
+   
          </div>
        </antd.Layout.Sider>
      </div>
--- a/src/components/Layout/Sider.less
+++ b/src/components/Layout/Sider.less
@ -1,73 +1,48 @@
-@import '~themes/vars.less';
+@import '~themes/index.less';

-@LDarkMode-backgroud: rgba(47, 46, 48, 0.74);
-@LLightMode-backgroud: #fff;

-@LDarkMode-color: #fff;
-@LLightMode-color: #2F2E30;
-
-.CollapserWrapperLight {
-  height: 100%;
-  position: absolute;
+.left_sider_wrapper {
+  border-color: transparent;
+  font-size: 13px;
+  font-family: @__Global_general_font_family;
+  height: 100vh;
+  z-index: 40;
  float: left;
-  top: 0;
-  left: 0;
-  z-index: 200;
-  vertical-align: middle;
+  position: relative;

  :global {
+    .ant-layout-sider {
+      background-color: @left_sider_backgroud;

-    .ant-btn {
-      border: none;
-      border-radius: unset;
-      vertical-align: middle;
-      height: 100%;
-      color: white;
-      background-color: transparent;
-      border-color: transparent;
-      box-shadow: none;
-      transition: all 1s ease-in;
-    }
+      .ant-menu {
+        vertical-align: middle;
+        margin: 0 0 0 5px;
+      }

-    .ant-btn:hover {
-      background: rgba(121, 121, 121, 0.247);
-      background: linear-gradient(270deg, rgba(121, 121, 121, 0) 0%, rgba(252, 252, 252, 0.13) 95%);
-      transition: all 1s ease-in;
+      .ant-menu-item {
+        color: @left_sider_color;
+      }
+
+      .anticon {
+        font-size: @left_sider_sizeIcons;
+      }
+
+      .ant-menu-inline-collapsed,
+      .antd-menu-vertical-left,
+      .ant-menu-vertical {
+        :hover {
+          background-color: @left_sider_menu__onhover_backgroud;
+          color: @left_sider_menu__onhover_color;
+        }
+
+        border-right: 0 solid transparent;
+      }
    }
  }
 }

-.CollapserWrapperDark {
-  height: 100%;
-  position: absolute;
-  float: left;
-  top: 0;
-  left: 0;
-  z-index: 200;
-  vertical-align: middle;

-  :global {
-    .ant-btn {
-      border: none;
-      border-radius: unset;
-      vertical-align: middle;
-      height: 100%;
-      color: white;
-      background-color: transparent;
-      border-color: transparent;
-      box-shadow: none;
-      transition: all 1s ease-in;
-    }
-
-    .ant-btn:hover {
-      background: rgba(121, 121, 121, 0.247);
-      background: linear-gradient(270deg, rgba(121, 121, 121, 0) 0%, rgba(121, 121, 121, 0.13) 95%);
-      transition: all 1s ease-in;
-    }
-  }
-}
-
-.brand {
+.left_sider_brandholder {
  cursor: pointer;

  img {
@ -77,266 +52,86 @@
    margin: 7px auto 15px auto;
    width: 100%;
    max-height: 58px;
+    transform: translate(2px, 0);
  }
 }

-
-.avatarFull {
-  width: 120px;
-}
-
-.avatar {
-  margin: 0 0 15px 0;
-}
-
 .something_thats_pulling_me_down {
+  margin: 0 0 12px 0;
  :global {
    text-align: center;
    bottom: 0;
    position: absolute;
    width: 100%;
-  }
-}
-
-.siderhead {
-  cursor: pointer;
-  font-family: 'Source Sans Pro', sans-serif;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  ::first-letter {
-    margin-left: 7px;
-  }
-
-  height: 60px;
-  font-size: 17px;
-}
-
-.siderwrapper {
-  border-color: transparent;
-  font-size: 13px;
-  font-family: "Poppins", sans-serif;
-  height: 100vh;
-  z-index: 100;
-  float: left;
-  position: relative;
-
-  :global {
-    .ant-layout-sider-dark {
-      background-color: @LDarkMode-backgroud;
-      color: @DarkMode-color;
-
-      h2 {
-        color: @Theme-SiderDeco-Color;
-      }
-
-      .ant-menu-item {
-        color: @DarkMode-color;
-      }
-
-      .ant-menu-inline,
-      .ant-menu-vertical,
-      .ant-menu-vertical-left {
-        :hover {
-          background-color: rgb(80, 80, 80);
-          color: #fff;
-        }
-
-        border-right: 1px solid transparent;
-      }
+    .anticon{
+      font-size: 15px!important;
    }
-
-    .ant-layout-sider-light {
-      background-color: @Theme-SiderDeco-Backgroud;
-      color: @Theme-SiderDeco-Color;
-
-      h2 {
-        color: @Theme-SiderDeco-Color;
-      }
-
-      .ant-menu-item {
-        color: @Theme-SiderDeco-Color;
-      }
-
-      .ant-menu-inline,
-      .ant-menu-vertical,
-      .ant-menu-vertical-left {
-        :hover {
-          background-color: @Theme-Hover-Backgroud;
-          color: #fff;
-        }
-
-        border-right: 1px solid transparent;
-      }
+    .ant-menu-item{
+      height: 35px!important;
+      line-height: 0px!important;
+      padding: 0!important;
+      margin: 0!important;
    }
  }
 }

-.sider {
+.left_sider_container {
  border-right: transparent;
-
-  &.desktop_mode {
-    border-radius: 12px 0 0 12px;
-  }
-
  height: 100%;
  z-index: 50;
-
-  :global {
-    .ant-menu-sub {
-      font-size: 14px;
-      -webkit-box-shadow: 13px 4px 34px 0px rgba(0, 0, 0, 0.005);
-      -moz-box-shadow: 13px 4px 34px 0px rgba(0, 0, 0, 0.005);
-      box-shadow: 13px 4px 34px 0px rgba(0, 0, 0, 0.005);
-    }
-
-    .ant-menu-dark {
-      background-color: @LDarkMode-backgroud;
-      color: @LDarkMode-color;
-    }
-
-    .ant-menu-light {
-      background-color: @LLightMode-backgroud;
-      color: @LLightMode-color;
-    }
-  }
-
-  .menuItems {
-    background-color: transparent;
-    margin-bottom: 8px;
-    width: 100%;
-    font-weight: 500;
-
-    animation: fadein 0.5s;
-
-    :global {
-      .ant-menu-item-selected {
-        background-color: transparent;
-      }
-
-      .ant-menu-item .anticon,
-      .ant-menu-submenu-title .anticon {
-        font-weight: 500;
-        min-width: 14px;
-        margin: 0 10px 0 10px;
-        font-size: 16px;
-        line-height: 1;
-      }
-    }
-  }
-
-  .menuItemsCollapsed {
-    background-color: transparent;
-    margin-bottom: 8px;
-    width: 100%;
-    font-weight: 500;
-
-    animation: fadein 0.5s;
-
-    :global {
-      .ant-menu-item-selected {
-        background-color: transparent;
-      }
-
-      .ant-menu-item {
-        padding: 0 !important;
-        margin: 2px 0 2px 0;
-        width: 100%;
-        text-align: center;
-      }
-    }
-  }
-
-  .menuContainer {
-    height: 100%;
-    margin: 18px 0 8px 0;
-
-    .scrollbar-container {
-      position: initial;
-      height: 100%;
-    }
-
-    overflow-x: hidden;
-    flex: 1;
-
-    &::-webkit-scrollbar-thumb {
-      background-color: transparent;
-    }
-
-    &:hover {
-      &::-webkit-scrollbar-thumb {
-        background-color: rgba(59, 59, 59, 0.2);
-      }
-    }
-
-    :global {
-      .ant-layout-sider-children {
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-      }
-
-      .ant-layout-sider-collapsed {
-        .ant-menu-item {
-          left: 0;
-          margin: 0;
-          padding: 0;
-        }
-
-        .ant-menu-inline-collapsed>.ant-menu-item {
-          padding: 0;
-          left: 0;
-        }
-      }
-
-      .scrollbar-container {
-        position: initial;
-        height: 100%;
-      }
-
-      .ant-menu-inline .ant-menu-item {
-        font-size: 14px;
-        font-family: 'Source Sans Pro', sans-serif;
-      }
-
-      .ant-menu-dark .ant-menu-item a {
-        color: rgb(197, 197, 197);
-      }
-    }
-  }
 }

-.scrollbar-container {
-  position: initial;
+.left_sider_menuContainer {
  height: 100%;
-}
+  margin: 18px 0 8px 0;

-@keyframes fadeLeftIn {
-  0% {
-    transform: translateX(5px);
-    opacity: 0;
-  }
+  overflow-x: hidden;
+  flex: 1;

-  100% {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-
-.themeSwitcher {
  :global {
-    .ant-switch-checked {
-      background-color: #2F2E30;
+    .ant-layout-sider-children {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+    }
+
+    .ant-layout-sider-collapsed {
+      .ant-menu-item {
+        left: 0;
+        margin: 0;
+        padding: 0;
+      }
+
+      .ant-menu-inline-collapsed>.ant-menu-item {
+        padding: 0;
+        left: 0;
+      }
+    }
+
+    .ant-menu-inline .ant-menu-item {
+      font-family: @__Global_general_font_family;
+    }
+
+    .ant-menu-dark .ant-menu-item a {
+      color: rgb(197, 197, 197);
    }
  }
+}

-  svg {
-    height: 100%;
-    vertical-align: middle;
-  }
+.left_sider_menuItems {
+  background-color: transparent;
+  margin-bottom: 8px;
+  width: 100%;
+  font-weight: 500;

-  span {
-    line-height: 10px;
+  animation: fadein 0.5s;
+
+  :global {
+    .ant-menu-item {
+      padding: 0 !important;
+      margin: 2px auto 2px auto;
+      width: 100%;
+      text-align: center;
+    }
  }
 }
--- a/src/components/Loader/Loader.js
+++ b/src/components/Loader/Loader.js
@ -1,39 +1,13 @@
 import React from 'react'
-import { CoreLoader } from 'components'
-import { AppSettings } from 'ycore'
-import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import styles from './Loader.less'

-const Loader = ({ spinning = true, fullScreen }) => {
-  if (AppSettings.InfiniteLoading == true) {
-    return (
-      <div className={styles.loader}>
-        <div className={styles.warpper}>
-          <div className={styles.newloader}>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-            <div></div>
-          </div>
-        </div>
-      </div>
-    )
-  }
+const Loader = (loading) => {
  return (
-    <div
-      className={classNames(styles.loader, {
-        [styles.hidden]: !spinning,
-        [styles.fullScreen]: fullScreen,
-      })}
-    >
-      <div className={styles.warpper}>
+      <div className={classNames(styles.wrapper, {[styles.end]: !loading.spinning })}>
+        <span>Loading... </span>
        <div
-          className={classNames(styles.newloader, { [styles.end]: !spinning })}
+          className={styles.newloader}
        >
          <div></div>
          <div></div>
@ -44,13 +18,11 @@ const Loader = ({ spinning = true, fullScreen }) => {
          <div></div>
          <div></div>
        </div>
+       
      </div>
-    </div>
+
  )
 }
-Loader.propTypes = {
-  spinning: PropTypes.bool,
-  fullScreen: PropTypes.bool,
-}
+

 export default Loader
--- a/src/components/Loader/Loader.less
+++ b/src/components/Loader/Loader.less
@ -1,60 +1,44 @@
-@import '~themes/vars.less';
+@import '~themes/index.less';
+
+.wrapper {
+  font-family: @__Global_general_font_family;
+  color: white;
+  line-height: 55px;
+  span{
+    margin: 0 10px 0 auto;
+  }

-.loader {
-  background-color: transparent; //rgba(44, 44, 44, 0.74);
-  width: 100%;
  position: absolute;
-  top: 0;
+  z-index: 1000;
+  right: 0;
  bottom: 0;
-  z-index: 100000;
+  width: 140px;
+  height: 55px;
  display: flex;
-  justify-content: right;
-  float: right;
-  opacity: 1;
-  text-align: center;
+  flex-direction: row;
+  justify-content: space-around;
+  background-color: #2d2d2dc2;
+  border-radius: 28px;
+  margin: 10px;

-  &.fullScreen {
-    position: fixed;
-  }
-
-  &.hidden {
-    z-index: -1;
+  
+  &.end {
+    animation: unshow 0.8s linear;
+    .newloader>div {
+      animation: loader 0.8s linear;
+    }
    opacity: 0;
-    transition: opacity 3s ease 0.5s, z-index 0.1s ease 1.5s;
  }

-  .warpper {
-    position: absolute;
-    right: 0;
-    width: 100px;
-    height: 100px;
-    display: inline-flex;
-    flex-direction: column;
-    justify-content: space-around;
-  }
-
-
  .newloader {
-    transform: scale(0.4);
+    transform: translate(21px,27px) scale(0.3);
    width: 0px;
    height: 0px;
-    margin: 0 auto;
-    position: relative;
-
-    &.end {
-      .loader {
-        z-index: -1;
-        opacity: 0;
-      }
-
-      >div {
-        animation: newloader 0.8s linear;
-      }
-    }
+    margin: 0 45px 0 0;
+    position: relative;  
  }
-
+  
  .newloader>div {
-    background-color: rgb(34, 34, 34);
    width: 6px;
    height: 20px;
    position: absolute;
@ -63,70 +47,70 @@
    border-radius: 5px;
    transform-origin: 10px 35px;
    transform: rotate(0deg);
-    animation: newloader 0.8s infinite;
+    animation: loader 0.8s infinite;
  }
-
+  
  .newloader>div:nth-child(2) {
    transform: rotate(45deg);
    animation-delay: 0.1s;
  }
-
+  
  .newloader>div:nth-child(3) {
    transform: rotate(90deg);
    animation-delay: 0.2s;
  }
-
+  
  .newloader>div:nth-child(4) {
    transform: rotate(135deg);
    animation-delay: 0.3s;
  }
-
+  
  .newloader>div:nth-child(5) {
    transform: rotate(180deg);
    animation-delay: 0.4s;
  }
-
+  
  .newloader>div:nth-child(6) {
    transform: rotate(225deg);
    animation-delay: 0.5s;
  }
-
+  
  .newloader>div:nth-child(7) {
    transform: rotate(270deg);
    animation-delay: 0.6s;
  }
-
+  
  .newloader>div:nth-child(8) {
    transform: rotate(315deg);
    animation-delay: 0.7s;
  }
+}

-  @keyframes unshow {
-    0% {
-      opacity: 1;
-    }
-
-    100% {
-      opacity: 0;
-      z-index: -1;
-    }
+@keyframes loader {
+  0% {
+    background: transparent;
+    left: -10px;
+    transform-origin: 10px 35px;
  }

-  @keyframes newloader {
-    0% {
-      background: transparent;
-      left: -10px;
-      transform-origin: 10px 35px;
-    }
+  30% {
+    background: #fff;
+  }

-    30% {
-      background: #fff;
-    }
-
-    100% {
-      background: transparent;
-      left: 10px;
-      transform-origin: -10px 35px;
-    }
+  100% {
+    background: transparent;
+    left: 10px;
+    transform-origin: -10px 35px;
  }
 }
+
+@keyframes unshow {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    display: none;
+  }
+}
--- a/src/components/MainFeed/index.js
+++ b/src/components/MainFeed/index.js
@ -18,6 +18,9 @@ export const RenderFeed = {
    window.MainFeedComponent.addToRend(payload)
    return
  },
+  disableMenu: () => {
+
+  },
 }
 class MainFeed extends React.Component {
  constructor(props) {
--- a/src/components/PostCard/index.js
+++ b/src/components/PostCard/index.js
@ -78,7 +78,7 @@ class PostCard extends React.PureComponent {

  render() {
    const { payload, customActions } = this.props
-    const ActShowMode = ycore.AppSettings.force_show_postactions
+    const ActShowMode = ycore.AppSettings.auto_hide_postbar
    const {
      id,
      post_time,
@ -196,15 +196,15 @@ class PostCard extends React.PureComponent {
    )

    return (
-      <div className={styles.cardWrapper}>
+      <div className={styles.post_card_wrapper}>
        <antd.Card
          onDoubleClick={() => this.goToPost(id)}
          hoverable
-          className={ActShowMode ? styles.showMode : null}
+          className={ActShowMode ? null : styles.showMode}
          actions={actions}
        >
          {this.state.ReportIgnore ? null : this.state.postReported ? (
-            <div className={styles.flaggedWarning}>
+            <div className={styles.post_card_flaggedWarning}>
              <Icons.FlagOutlined />
              <h3>It seems that this post has been reported</h3>
              <p>The content may be inappropriate or compromising</p>
@ -235,14 +235,14 @@ class PostCard extends React.PureComponent {
                </div>
              }
              title={
-                <div className={styles.titleWrapper}>
+                <div className={styles.post_card_title}>
                  <h4
                    onClick={() =>
-                      ycore.crouter.native(`@${publisher.username}`)
+                      ycore.router.go(`@${publisher.username}`)
                    }
                    className={styles.titleUser}
                  >
-                    @{publisher.username}{' '}
+                    @{publisher.username}
                    {ycore.booleanFix(publisher.verified) ? (
                      <Icon
                        style={{ color: 'blue' }}
@ -274,13 +274,13 @@ class PostCard extends React.PureComponent {
              bordered="false"
            />
            {postText ? (
-              <div className={styles.postContent}>
+              <div className={styles.post_card_content}>
                {' '}
                <h3 dangerouslySetInnerHTML={{ __html: postText }} />{' '}
              </div>
            ) : null}
            {postFile ? (
-              <div className={styles.postContentFILE}>
+              <div className={styles.post_card_file}>
                {this.renderPostPlayer(postFile)}
              </div>
            ) : null}
--- a/src/components/PostCard/index.less
+++ b/src/components/PostCard/index.less
@ -1,25 +1,25 @@
-@import '~themes/vars.less';
+@import '~themes/index.less';

-.flaggedWarning {
-  border-radius: 7px;
+.post_card_flaggedWarning {
+  border-radius: @post_card_general_border-rd;
  width: 100%;
  text-align: center;
  position: absolute;
  z-index: 20;
-  background: #ffffff60;
-  font-family: "Poppins", sans-serif;
-  padding: 20px 15px 25px 15px;
+  background: @post_card_flaggedWarning_backgroud;
+  font-family: @__Global_general_font_family;
+  padding: @post_card_flaggedWarning_padding;

  :global {
    .anticon {
-      font-size: 40px;
+      font-size: @post_card_flaggedWarning_iconSize;
    }
  }
 }

-.cardWrapper {
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
-  border-radius: 7px;
+.post_card_wrapper {
+  box-shadow: @post_card_wrapper_shadow;
+  border-radius: @post_card_general_border-rd;
  max-width: 510px;
  min-width: 265px;
  width: auto;
@ -31,7 +31,7 @@
    }

    .ant-card {
-      border-radius: 7px;
+      border-radius: @post_card_general_border-rd;
      border: 0;
      border-top: 1px solid #4646460c;
    }
@ -42,10 +42,10 @@

    .ant-card-actions {
      border-top: 0;
-      background: #EBEBEB;
+      background: @post_card_wrapper_actions_backgroud;
      height: 30px;
      position: relative;
-      transition: opacity 150ms linear, position 150ms linear, transform 150ms linear;
+      transition: opacity @__Global_Components_transitions_dur linear, position @__Global_Components_transitions_dur linear, transform @__Global_Components_transitions_dur linear;
      border-radius: 0 0 10px 10px;
      opacity: 0;

@ -58,7 +58,7 @@
    .ant-card-actions:hover {
      opacity: 1;
      transform: translate(0, 15px);
-      transition: opacity 150ms linear, position 150ms linear, transform 150ms linear;
+      transition: opacity @__Global_Components_transitions_dur linear, position @__Global_Components_transitions_dur linear, transform @__Global_Components_transitions_dur linear;
    }

    .ant-card-actions>li>.anticon {
@ -66,9 +66,8 @@
      line-height: 22px;
      width: 40px;
      height: 40px;
-      background: white;
+      background: @post_card_wrapper_actions_icon_backgroud;
      border-radius: 23px;
-
    }

    .ant-card-actions>li {
@ -97,7 +96,7 @@
        line-height: 22px;
        width: 40px;
        height: 40px;
-        background: white;
+        background: @post_card_wrapper_actions_icon_backgroud;
        border-radius: 23px;
        margin: auto;
      }
@ -130,6 +129,16 @@
  }
 }

+
+.post_card_title {
+  display: flex;
+
+  h4 {
+    cursor: pointer;
+  }
+
+}
+
 .postAvatar {
  position: absolute;
  left: -8px;
@ -139,7 +148,7 @@

 .titleUser {
  display: flex;
-  font-family: 'Poppins', sans-serif;
+  font-family: @__Global_general_font_family;
  margin: 0 0 0 50px;
 }

@ -156,43 +165,31 @@

  :global {
    .anticon {
-      color: rgb(249, 179, 64);
+      color: @post_card_wrapper_tags_color_default;
      float: right;
      margin: -0 6px 0 0;
-      ;
      font-size: 17px;
    }

-    .MoreMenu {
-      color: #2d2d2d !important;
-    }
  }
 }

-.titleWrapper {
-  display: flex;
-
-  h4 {
-    cursor: pointer;
-  }
-}
-
-.postContent {
+.post_card_content {
  word-break: break-all;
  display: flex;
  border-radius: 3px;
  margin: 23px 24px 23px 24px;

  h3 {
-    font-family: "Poppins", sans-serif;
-    color: #555555;
-    font-weight: 400;
-    font-size: 15px;
-    letter-spacing: -0.3px;
+    font-family: @__Global_general_font_family;
+    color: @post_card_wrapper_post_content_color;
+    font-weight: @post_card_wrapper_post_content_weight;
+    font-size: @post_card_wrapper_post_content_fontSize;
+    letter-spacing: @post_card_wrapper_post_content_letterSpacing;
  }
 }

-.postContentFILE {
+.post_card_file {
  display: flex;
  margin: 23px 0 5px 0;
  max-height: 600px;
--- a/src/components/PostCreator/index.less
+++ b/src/components/PostCreator/index.less
@ -1,4 +1,4 @@
-@import '~themes/vars.less';
+@import '~themes/index.less';

 .cardWrapper {
  // box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
--- a/src/components/PostCreator/local_components/post_options.js
+++ b/src/components/PostCreator/local_components/post_options.js
@ -26,7 +26,7 @@ export default class Post_options extends React.Component {
  }

  onChangeOption(checked, id) {
-    console.log(`${id} to ${checked}`)
+    ycore.yconsole.log(`${id} to ${checked}`)
  }

  handleToggleToolbox = () => {
--- a/src/components/PostCreator/local_components/post_options.less
+++ b/src/components/PostCreator/local_components/post_options.less
@ -1,4 +1,4 @@
-@import '~themes/vars.less';
+@import '~themes/index.less';

 .optionsWrapper {
  font-family: "Poppins", sans-serif;
--- a/src/components/ScrollBar/index.less
+++ b/src/components/ScrollBar/index.less
@ -1,4 +1,4 @@
-@import '~themes/vars.less';
+@import '~themes/index.less';

 :global {

--- a/src/components/SearchCard/index.js
+++ b/src/components/SearchCard/index.js
@ -52,7 +52,7 @@ class SearchCard extends React.PureComponent {
            title={
              <div className={styles.titleWrapper}>
                <h4
-                  onClick={() => ycore.crouter.native(`@${username}`)}
+                  onClick={() => ycore.router.go(`@${username}`)}
                  className={styles.titleUser}
                >
                  {DataStrip.title()}
--- a/src/components/SearchCard/index.less
+++ b/src/components/SearchCard/index.less
@ -1,4 +1,4 @@
-@import '~themes/vars.less';
+@import '~themes/index.less';

 .cardWrapper {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
--- a/src/components/UserProfile/index.js
+++ b/src/components/UserProfile/index.js
@ -53,7 +53,7 @@ class UserProfile extends React.Component {
          ycore.yconsole.log('Bad response / User not found')
          const val = { id: null, username: 'User not found!' }
          this.setState({ invalid: true, RenderValue: val, loading: false })
-          ycore.crouter.native(`main`)
+          ycore.router.go(`main`)
          antd.message.warning(`Its seams like @${string} not exist`)
          return
        }
@ -61,7 +61,7 @@ class UserProfile extends React.Component {
        const c2 = string.toLowerCase()
        if (c1 !== c2) {
          ycore.yconsole.log(`Using aproximate user! => ${c1}  /  ${c2}`)
-          ycore.crouter.native(`@${c1}`)
+          ycore.router.go(`@${c1}`)
        }

        const payload = { id: rp['0'].user_id }
--- a/src/components/UserProfile/styles.less
+++ b/src/components/UserProfile/styles.less
@ -1,4 +1,4 @@
-@import '~themes/vars.less';
+@import '~themes/index.less';

 .textOverflow() {
  overflow: hidden;
--- a/src/components/YulioID/index.less
+++ b/src/components/YulioID/index.less
@ -1,4 +1,4 @@
-  @import '~themes/vars.less';
+  @import '~themes/index.less';

  .loginWrapper {
    :global {
--- a/src/layouts/BaseLayout.js
+++ b/src/layouts/BaseLayout.js
@ -7,6 +7,7 @@ import { queryLayout } from 'utils'
 import NProgress from 'nprogress'
 import config from 'config'
 import withRouter from 'umi/withRouter'
+import {AppSettings} from 'ycore'

 import PublicLayout from './PublicLayout'
 import PrimaryLayout from './PrimaryLayout'
@ -41,6 +42,8 @@ class BaseLayout extends PureComponent {
        <Helmet>
          <title>{config.siteName}</title>
        </Helmet>
+        {Loader( AppSettings.InfiniteLoading? {spinning: true} : loading )}
+  
        <Container>{children}</Container>
      </Fragment>
    )
--- a/src/layouts/BaseLayout.less
+++ b/src/layouts/BaseLayout.less
@ -1,11 +1,6 @@
-@import '~themes/vars.less';
@import '~themes/index.less';

 :global {
-  #root {
-    width: 100%;
-  }
-
  #nprogress {
    pointer-events: none;

--- a/src/layouts/PrimaryLayout.js
+++ b/src/layouts/PrimaryLayout.js
@ -94,41 +94,27 @@ class PrimaryLayout extends React.Component {
    }

    const SecondaryProps = {
-      desktop_mode: desktop_mode,
      userData,
      isMobile,
-      theme,
    }

    return (
      <React.Fragment>
-        <div
-          className={classnames(styles.AppWrapper, {
-            [styles.desktop_mode]: desktop_mode,
-          })}
-        >
          {isMobile ? <MobileWarning /> : null}
-          <div className={styles.BarControlWrapper}>
+          <div className={styles.__ControlBar}>
            <Control />
          </div>
-          <antd.Layout
-            className={classnames(styles.layout, {
-              [styles.md_dark]: this.isDarkMode(),
-              [styles.desktop_mode]: desktop_mode,
-            })}
-          >
+          <antd.Layout id="primaryLayout" className={styles.primary_layout}>
            <Sider {...SiderProps} />

-            <div id="primaryLayout" className={styles.leftContainer}>
+            <div className={styles.primary_layout_container}>
              <PageTransition
                preset="moveToRightScaleUp"
-                id="scroller"
                transitionKey={location.pathname}
              >
                <Content
-                  className={classnames(styles.content, {
-                    [styles.collapsed]: !collapsed,
-                  })}
+                  id="primaryContent"
+                  className={styles.primary_layout_content}
                >
                  <HeaderSearch />
                  {children}
@ -138,7 +124,6 @@ class PrimaryLayout extends React.Component {

            <Secondary {...SecondaryProps} />
          </antd.Layout>
-        </div>
      </React.Fragment>
    )
  }
--- a/src/layouts/PrimaryLayout.less
+++ b/src/layouts/PrimaryLayout.less
@ -1,141 +1,40 @@
-@import '~themes/vars.less';
+@import '~themes/index.less';

-.AppWrapper {
-  &.desktop_mode {
-    padding: 0 30px 0 30px;
-    border-radius: 10px;
-  }
-}
-
-.content {
-  vertical-align: middle;
-  width: 100%;
-  float: right;
-  padding: 35px 25px 15px 60px;
-  transition: all 0.2s ease;
-
-  &.collapsed {
-    width: ~'calc(100% - 180px)';
-    transition: all 0.2s ease;
-  }
-}
-
-.layout {
-
-  background-color: @Theme-Layout-Backgroud; //#E2E6E9;
-  transition: background-color 200ms linear;
-
-  &.desktop_mode {
-    border-radius: 12px;
-  }
-
-  &.md_radius {
-    width: 95%;
-    margin: auto;
-    position: relative;
-    border-radius: 15px;
-  }
-
-  &.md_dark {
-    background-color: @DarkMode-backgroud_container;
-    color: @DarkMode-color_container;
-    transition: background-color 200ms linear;
-
-    :global {
-      h1 {
-        color: @DarkMode-color_container;
-      }
-
-      h2 {
-        color: @DarkMode-color_container;
-      }
-
-      h3 {
-        color: @DarkMode-color_container;
-      }
-
-      h4 {
-        color: @DarkMode-color_container;
-      }
-
-      h5 {
-        color: @DarkMode-color_container;
-      }
-
-      h6 {
-        color: @DarkMode-color_container;
-      }
-
-      p {
-        color: @DarkMode-color_container;
-      }
-
-      span {
-        color: @DarkMode-color_container;
-      }
-
-      pre {
-        color: @DarkMode-color_container;
-      }
-
-      .ant-pro-page-header-wrap-page-header-warp {
-        color: @DarkMode-color_container;
-        background-color: @DarkMode-backgroud_container;
-        transition: background-color 200ms linear;
-      }
-
-      .ant-card {
-        background-color: @DarkMode-backgroud;
-      }
-
-      .ant-input {
-        color: @DarkMode-color_container;
-        background-color: @DarkMode-backgroud;
-      }
-
-      .ant-btn-primary[disabled] {
-        color: @DarkMode-color_container;
-        background-color: @DarkMode-backgroud;
-      }
-
-      transition: background-color 200ms linear;
-    }
-  }
-}
-
-.BarControlWrapper {
+.__ControlBar {
  width: 100%;
  position: absolute;
  bottom: 0;
  z-index: 30;
 }

-.leftContainer {
-  align-self: center;
-  width: 100vw;
-  position: relative;
-  float: left;
-  overflow-x: hidden;
-  height: 100vh;
-  bottom: 0;
-
-  :global {
-    #scroller {
-      overflow-y: scroll !important;
-    }
-
-  }
+.primary_layout {
+    overflow-x: hidden!important;
+    overflow-y: hidden!important;
+    background-color: @primary_layout_backgroud;
+    margin: auto;
 }

+// PRIMARY LAYOUT 
+.primary_layout_container {
+  transition: background-color @__Global_layout_transitions-dur linear;
+  background-color: @primary_layout_container_backgroud;
+  border-radius: @primary_layout_container_border-rd;

+  overflow-x: hidden;
+  margin: 0 0 0 10px;
+  width: 100vw;
+  height: 100vh;
+  
+  position: relative;
+  bottom: 0;
+  align-self: center;
+  float: left;
+}

-@media (max-width: 767px) {
-  .content {
-    padding: 12px;
-  }
-
-  .layout {
-    height: 100vh;
-    flex: 1;
-  }
-}
+.primary_layout_content {
+  vertical-align: middle;
+  width: 100%;
+  float: right;
+  padding: @primary_layout_content_padding;
+  transition: all @__Global_layout_transitions-dur ease;
+}
--- a/src/pages/__m/index.js
+++ b/src/pages/__m/index.js
@ -21,15 +21,12 @@ export default class __m extends React.Component {
  }

  componentDidMount() {
-    if (ycore.IsThisUser.dev() == false || ycore.IsThisUser.admin() == false) {
-      return ycore.crouter.native('main')
-    }
    this.handleSID()
    this.handleToken()
  }

  handleSID() {
-    ycore.get_app_session.get_id((err, response) => {
+    ycore.comty_get.session_id((err, response) => {
      if (err) {
        return ycore.notify.error(err)
      }
--- a/src/pages/__m/style.less
+++ b/src/pages/__m/style.less
@ -1,4 +1,4 @@
-@import '~themes/vars.less';
+@import '~themes/index.less';

 .Wrapper {
  padding: 10px;
--- a/src/pages/events/index.js
+++ b/src/pages/events/index.js
@ -0,0 +1,10 @@
+import React from 'react'
+import * as antd from 'antd'
+
+export default class Events extends React.PureComponent{
+    render(){
+        return(
+            <antd.Result status="404" title="Hey!" subTitle="It seems that this version of the app is not yet available this function" />
+        )
+    }
+}
--- a/src/pages/events/index.less
+++ b/src/pages/events/index.less
@ -0,0 +1 @@
+@import '~themes/index.less';
--- a/src/pages/g/$group/index.js
+++ b/src/pages/g/$group/index.js
@ -55,7 +55,6 @@ class GroupIndexer extends PureComponent {
        </div>
      )
    } catch (error) {
-      console.log(error)
      return (
        <center>
          <h2>Render Error</h2>
--- a/src/pages/g/$group/styles.less
+++ b/src/pages/g/$group/styles.less
@ -1,4 +1,4 @@
-@import '~themes/vars.less';
+@import '~themes/index.less';

 .searchHeader {
  font-family: "Nunito", sans-serif;
--- a/src/pages/index.js
+++ b/src/pages/index.js
@ -3,7 +3,7 @@ import * as ycore from 'ycore'

 class Index extends PureComponent {
  render() {
-    ycore.crouter.native(`login`)
+    ycore.router.go(`login`)
  }
 }

--- a/src/pages/login/index.less
+++ b/src/pages/login/index.less
@ -1,4 +1,4 @@
-@import '~themes/vars.less';
+@import '~themes/index.less';


 .login_wrapper{
--- a/src/pages/main/index.less
+++ b/src/pages/main/index.less
@ -1,4 +1,4 @@
-@import '~themes/vars.less';
+@import '~themes/index.less';

 .mainWrapper {
  position: relative;
--- a/src/pages/marketplace/index.js
+++ b/src/pages/marketplace/index.js
@ -0,0 +1,10 @@
+import React from 'react'
+import * as antd from 'antd'
+
+export default class Marketplace extends React.PureComponent{
+    render(){
+        return(
+            <antd.Result status="404" title="Hey!" subTitle="It seems that this version of the app is not yet available this function" />
+        )
+    }
+}
--- a/src/pages/marketplace/index.less
+++ b/src/pages/marketplace/index.less
@ -0,0 +1 @@
+@import '~themes/index.less';
--- a/src/pages/p/$post/index.js
+++ b/src/pages/p/$post/index.js
@ -41,7 +41,7 @@ export default class Indexer_Post extends React.Component {
  }

  render() {
-    ycore.crouter.native('main')
+    ycore.router.go('main')
    return null
  }
 }
--- a/src/pages/s/$search/index.js
+++ b/src/pages/s/$search/index.js
@ -59,19 +59,19 @@ class SearchPageIndexer extends PureComponent {

      const users = () => {
        if (usersParsed.length >= 1) {
-          console.log('Users => ', usersParsed)
+          ycore.yconsole.log('Users => ', usersParsed)
          return this.EntryComponent('Users', usersParsed)
        }
      }
      const groups = () => {
        if (groupsParsed.length >= 1) {
-          console.log('Groups => ', groupsParsed)
+          ycore.yconsole.log('Groups => ', groupsParsed)
          return this.EntryComponent('Groups', groupsParsed)
        }
      }
      const pages = () => {
        if (pagesParsed.length >= 1) {
-          console.log('Pages => ', pagesParsed)
+          ycore.yconsole.log('Pages => ', pagesParsed)
          return this.EntryComponent('Pages', pagesParsed)
        }
      }
@ -86,7 +86,6 @@ class SearchPageIndexer extends PureComponent {

      return [users(), groups(), pages()]
    } catch (error) {
-      console.log(error)
      return (
        <center>
          <h2>Render Error</h2>
@ -119,7 +118,6 @@ class SearchPageIndexer extends PureComponent {
        </div>
      )
    } catch (error) {
-      console.log(error)
      return (
        <center>
          <h2>Render Error</h2>
@ -137,7 +135,7 @@ class SearchPageIndexer extends PureComponent {
    const string = raw.replace('/s/', '')

    if (matchSearch) {
-      console.log(`Search matched!  ${location.pathname}`)
+      ycore.yconsole.log(`Search matched!  ${location.pathname}`)
      return (
        <div>
          <h1 className={styles.searchHeader}>
--- a/src/pages/s/$search/styles.less
+++ b/src/pages/s/$search/styles.less
@ -1,4 +1,4 @@
-@import '~themes/vars.less';
+@import '~themes/index.less';

 .searchHeader {
  font-family: "Nunito", sans-serif;
--- a/src/pages/saves/index.js
+++ b/src/pages/saves/index.js
@ -0,0 +1,47 @@
+import React from 'react'
+import * as ycore from 'ycore'
+import * as antd from 'antd'
+import * as Icons from '@ant-design/icons'
+import { MainFeed } from 'components'
+import styles from './index.less'
+
+export default class PostSaved extends React.PureComponent{
+    state = {
+        loading: true,
+        data: null,
+    }
+    componentDidMount(){
+        ycore.comty_post.getSaved((err,res) => {
+            if (err) return false
+            try {
+            const a = JSON.parse(res)['data']
+            this.setState({ data: a, loading: false })
+            } catch (error) {
+                ycore.notify.exception('Error cathing saved posts... ', error)
+            }
+        })
+    }
+    renderSavedPost(){
+        const { data } = this.state
+        try {
+            if (data.length < 1) {
+            return <antd.Result title={`You don't have any saved posts`} />
+            }
+            return <MainFeed custompayload={data} />
+        } catch (err) {
+            
+        }
+    }
+    render(){
+        return(
+            <div className={styles.saved_post_wrapper}>
+                <div className={styles.saved_post_title}>
+                    <h2><Icons.BookOutlined /> Saved Post</h2>
+                </div>
+                <div className={styles.saved_post_content}>
+                    {this.renderSavedPost()}
+                </div>
+            </div>
+        )
+    }
+}
--- a/src/pages/saves/index.less
+++ b/src/pages/saves/index.less
@ -0,0 +1,14 @@
+@import '~themes/index.less';
+
+.saved_post_wrapper{
+    
+}
+.saved_post_title{
+    font-family: @__Global_general_font_family;
+}
+.saved_post_content{
+    margin-top: 10px;
+    padding: 10px;
+    background-color: #ffffff8e;
+    border-radius: 12px;
+}
--- a/src/pages/settings/components/notification/index.less
+++ b/src/pages/settings/components/notification/index.less
@ -1,4 +1,4 @@
-@import '~themes/vars.less';
+@import '~themes/index.less';

 .main {

--- a/src/pages/settings/components/security/index.less
+++ b/src/pages/settings/components/security/index.less
@ -1,4 +1,4 @@
-@import '~themes/vars.less';
+@import '~themes/index.less';

 .main {

--- a/src/pages/settings/components/security/sessions.js
+++ b/src/pages/settings/components/security/sessions.js
@ -7,7 +7,7 @@ export default class Sessions_Manager extends React.Component {
    sessions_data: '',
  }
  componentDidMount() {
-    ycore.get_app_session.get_id((err, res) => {
+    ycore.comty_get.session_id((err, res) => {
      this.setState({ sid: res })
    })
    ycore.comty_get.sessions((err, res) => {
--- a/src/pages/settings/index.js
+++ b/src/pages/settings/index.js
@ -17,6 +17,11 @@ const menuMap = {
      <Icons.ControlOutlined /> General
    </span>
  ),
+  sync: (
+    <span>
+      <Icons.SyncOutlined /> Sync™
+    </span>
+  ),
  security: (
    <span>
      <Icons.SafetyCertificateOutlined /> Security & Privacity
--- a/src/pages/settings/style.less
+++ b/src/pages/settings/style.less
@ -1,6 +1,4 @@
-@import '~themes/vars.less';
-
-
+@import '~themes/index.less';

 .main {
  font-family: "Nunito", sans-serif;
@ -9,7 +7,7 @@
  width: 100%;
  height: 100%;
  overflow: auto;
-  color: @DarkMode-color_container;
+  color: @__Global_layout_color;
  background-color: #ffffff;
  padding: 15px;
  border-radius: 10px;
@ -19,7 +17,7 @@

    :global {
      .ant-menu-inline {
-        color: @DarkMode-color_container;
+        color: @__Global_layout_color;
        background-color: transparent;
        border: none;
      }
@ -39,7 +37,7 @@

    .title {
      margin-bottom: 12px;
-      color: @heading-color;
+      color: @__Global_layout_color;
      font-weight: 500;
      font-size: 20px;
      line-height: 28px;
--- a/src/themes/antd-design.less
+++ b/src/themes/antd-design.less
@ -1,13 +1,6 @@
-// 本文件是对 ant-design:
-// https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less
-// 相应变量值的覆盖
-// 注意：只需写出要覆盖的变量即可（不需要覆盖的变量不要写）
-
-
 /* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
@import '../../node_modules/antd/lib/style/themes/default.less';

-
 // -------- Colors -----------
@primary-color: @blue-6;
@info-color: @blue-6;
--- a/src/themes/base/index.less
+++ b/src/themes/base/index.less
@ -0,0 +1,182 @@
+
+// FOR LAYOUTS
+@__Global_general_font_family: "Poppins", sans-serif;
+@__Global_layout_backgroud: #F8F6F8;
+@__Global_layout_color: #2d2d2d;
+@__Global_layout_border-rd: 27px 0 0 0;
+@__Global_layout_transitions-dur: 200ms; 
+@__Global_Components_transitions_dur: 150ms;
+
+@mamamia: #85858570;
+// FOR SECONDARY
+@__Global_SwapAnimDuration: 170ms;
+
+@transition-ease-in: all 0.3s ease-out;
+@transition-ease-out: all 0.3s ease-out;
+@ease-in: ease-in;
+
+::-webkit-scrollbar {
+    width: 14px;
+    height: 18px;
+  }
+::-webkit-scrollbar-thumb {
+    height: 6px;
+    border: 4px solid rgba(0, 0, 0, 0);
+    background-clip: padding-box;
+    margin: 0 10px 0 0;
+    -webkit-border-radius: 7px;
+    background-color: rgba(0, 0, 0, 0.15);
+    -webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05);
+}
+::-webkit-scrollbar-button {
+    width: 0;
+    height: 0;
+    display: none;
+}
+::-webkit-scrollbar-corner {
+    background-color: transparent;
+}
+
+// Global Documents
+body {
+  height: 100%;
+  overflow-y: hidden;
+  background-color: transparent; // rgb(249, 249, 249);
+}
+
+@media (min-width: 1600px) {
+  :global {
+    .ant-col-xl-48 {
+      width: 20%;
+    }
+
+    .ant-col-xl-96 {
+      width: 40%;
+    }
+  }
+}
+
+@media (max-width: 767px) {
+  :global {
+    .ant-card {
+      .ant-card-head {
+        padding: 0 12px;
+      }
+
+      .ant-card-body {
+        padding: 12px;
+      }
+    }
+  }
+}
+
+// PrimaryLayout 
+@media (max-width: 767px) {
+    .primary_layout_content {
+      padding: 12px;
+    }
+  
+    .primary_layout {
+      height: 100vh;
+      flex: 1;
+    }
+}
+
+// .primary_layout_*
+@primary_layout_backgroud: #2d2d2d;
+
+@primary_layout_container_backgroud: @__Global_layout_backgroud;
+@primary_layout_container_border-rd: @__Global_layout_border-rd;
+
+@primary_layout_content_padding: 35px 25px 15px 40px;
+
+// .secondary_*
+@__secondary_colider_width: 31.2vw;
+@secondary_wrapper_hidden_width: 22vw;
+@secondary_wrapper_showFull_width: 94.2vw;
+@secondary_wrapper_showHalf_width: 35vw;
+@secondary_container_bg_background: #201F23;
+@secondary_container_1_color: #fff;
+@secondary_container_2_color: #201F23;
+@secondary_container_2_backgroud: #fff;
+@secondary_container_1_btn_backgroud: #4c4c4c;
+@secondary_container_1_btn_color: #fff;
+@secondary_container_1_btn_shadow: 0px 0px 10px 0px rgba(255, 255, 255, 0.205);
+
+@secondary_container_1_padding: 30px 70px 30px 75px;
+@secondaty_container_2_padding: 20px 15px 15px 15px;
+
+// .left_sider*
+@left_sider_backgroud: #2d2d2d;
+@left_sider_color: #fff;
+@left_sider_sizeIcons: 19px;
+@left_sider_menu__onhover_backgroud: rgb(80, 80, 80);
+@left_sider_menu__onhover_color: #fff;
+
+// .post_card*
+@post_card_general_border-rd: 7px;
+@post_card_wrapper_shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+@post_card_wrapper_actions_backgroud: rgba(235, 235, 235, 0.815);
+@post_card_wrapper_actions_icon_backgroud: #fff;
+
+@post_card_wrapper_tags_color_default: rgb(249, 179, 64);
+@post_card_wrapper_tags_color_nsfw: #111;
+@post_card_wrapper_tags_color_flag: #111;
+
+@post_card_wrapper_post_content_color: #555555;
+@post_card_wrapper_post_content_weight: 400;
+@post_card_wrapper_post_content_fontSize: 15px;
+@post_card_wrapper_post_content_letterSpacing: -0.3px;
+
+@post_card_flaggedWarning_backgroud: #ffffff60;
+@post_card_flaggedWarning_padding: 20px 15px 25px 15px;
+@post_card_flaggedWarning_iconSize: 40px;
+
+// YulioID
+@canvasColor: #f9f9f9;
+@backgroundColor: #fff;
+@foregroundColor: #111;
+@primaryColor: #373F51;
+@primaryShade1: #ffe2d1;
+@primaryShade2: #ffceb2;
+@primaryShade3: #ffb184;
+@primaryShade4: #e88850;
+@primaryShade5: #d17a48;
+@secondaryColor: #ffcc67;
+@secondaryShade1: #fff1d5;
+@secondaryShade2: #ffde9e;
+@secondaryShade3: #ffd074;
+@secondaryShade4: #e8ba5e;
+@secondaryShade5: #ba954b;
+@accentColor: #4e5166;
+@accentShade1: #cecfd5;
+@accentShade2: #aeafb9;
+@accentShade3: #8e909d;
+@accentShade4: #6e7081;
+@accentShade5: #404354;
+@accent2Color: #588b8b;
+@accent2Shade1: #c2d4d4;
+@accent2Shade2: #a3bfbf;
+@accent2Shade3: #85aaaa;
+@accent2Shade4: #507f7f;
+@accent2Shade5: #497272;
+@accent3Color: #fe5f55;
+@accent3Shade1: #fec4c1;
+@accent3Shade2: #fea7a2;
+@accent3Shade3: #fe7c73;
+@accent3Shade4: #e7574e;
+@accent3Shade5: #b9463e;
+
+@neutralShade0: #f8f8f8;
+@neutralShade1: #f2f2f2;
+@neutralShade2: #e8e9e9;
+@neutralShade3: #d1d3d4;
+@neutralShade4: #babdbf;
+@neutralShade5: #808488;
+@neutralShade6: #666a6d;
+@neutralShade7: #4d5052;
+@neutralShade8: #212122;
+@grayColor: #999;
+@lightGrayColor: #ddd;
+@borderRadius: 6px;
+@boxShadow: 0 2px 5px rgba(#333, 0.2);
--- a/src/themes/fonts-imports.css
+++ b/src/themes/fonts-imports.css
--- a/src/themes/index.less
+++ b/src/themes/index.less
@ -1,130 +1,3 @@
-@import '~themes/vars.less';
-
-body {
-  height: 100%;
-  overflow-y: hidden;
-  background-color: transparent; // rgb(249, 249, 249);
-}
-
-::-webkit-scrollbar-thumb {
-  background-color: #fff;
-}
-
-
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-:global {
-
-  .ant-breadcrumb {
-    &>span {
-      &:last-child {
-        color: #999;
-        font-weight: normal;
-      }
-    }
-  }
-
-  .ant-breadcrumb-link {
-    .anticon+span {
-      margin-left: 4px;
-    }
-  }
-
-  .ant-table {
-    .ant-table-thead>tr>th {
-      text-align: center;
-    }
-
-    .ant-table-tbody>tr>td {
-      text-align: center;
-    }
-
-    &.ant-table-small {
-      .ant-table-thead>tr>th {
-        background: #f7f7f7;
-      }
-
-      .ant-table-body>table {
-        padding: 0;
-      }
-    }
-  }
-
-
-  .ant-table-pagination {
-    float: none !important;
-    display: table;
-    margin: 16px auto !important;
-  }
-
-  .ant-popover-inner {
-    border: none;
-    border-radius: 0;
-    box-shadow: 0 0 20px rgba(100, 100, 100, 0.2);
-  }
-
-  .ant-form-item-control {
-    vertical-align: middle;
-  }
-
-  .ant-modal-mask {
-    background-color: rgba(55, 55, 55, 0.2);
-  }
-
-  .ant-modal-content {
-    box-shadow: none;
-  }
-
-  .ant-select-dropdown-menu-item {
-    padding: 12px 16px !important;
-  }
-
-  .margin-right {
-    margin-right: 16px;
-  }
-
-  a:focus {
-    text-decoration: none;
-  }
-
-  .ant-table-layout-fixed table {
-    table-layout: auto;
-  }
-}
-
-@media (min-width: 1600px) {
-  :global {
-    .ant-col-xl-48 {
-      width: 20%;
-    }
-
-    .ant-col-xl-96 {
-      width: 40%;
-    }
-  }
-}
-
-@media (max-width: 767px) {
-  :global {
-
-    .ant-pagination-item,
-    .ant-pagination-next,
-    .ant-pagination-options,
-    .ant-pagination-prev {
-      margin-bottom: 8px;
-    }
-
-    .ant-card {
-      .ant-card-head {
-        padding: 0 12px;
-      }
-
-      .ant-card-body {
-        padding: 12px;
-      }
-    }
-  }
-}
+@import '~themes/antd-design.less';
+@import '~themes/base/index.less';
+@import (inline) './fonts-imports.css';
--- a/src/themes/light_ng/index.less
+++ b/src/themes/light_ng/index.less
@ -1,64 +0,0 @@
-@Theme-Shade-1: #ff971d;
-@Theme-Shade-2: #ffe8d6;
-@Theme-Shade-3: #f9f6f7;
-@Theme-Shade-4: #ffffff;
-
-@Theme-Shade-Color: #f9f6f7;
-@Theme-Layout-Backgroud: #F8F6F8;
-@Theme-2Layout-Baackgroud: #201F23;
-@Theme-SiderDeco-Backgroud: #4D91EA;
-@Theme-SiderDeco-Color: #f9f6f7;
-
-@Theme-Hover-Backgroud: rgba(107, 162, 235, 0.507);
-
-
-
-// YulioID
-
-@canvasColor: #f9f9f9;
-@backgroundColor: #fff;
-@foregroundColor: #111;
-@primaryColor: #373F51;
-@primaryShade1: #ffe2d1;
-@primaryShade2: #ffceb2;
-@primaryShade3: #ffb184;
-@primaryShade4: #e88850;
-@primaryShade5: #d17a48;
-@secondaryColor: #ffcc67;
-@secondaryShade1: #fff1d5;
-@secondaryShade2: #ffde9e;
-@secondaryShade3: #ffd074;
-@secondaryShade4: #e8ba5e;
-@secondaryShade5: #ba954b;
-@accentColor: #4e5166;
-@accentShade1: #cecfd5;
-@accentShade2: #aeafb9;
-@accentShade3: #8e909d;
-@accentShade4: #6e7081;
-@accentShade5: #404354;
-@accent2Color: #588b8b;
-@accent2Shade1: #c2d4d4;
-@accent2Shade2: #a3bfbf;
-@accent2Shade3: #85aaaa;
-@accent2Shade4: #507f7f;
-@accent2Shade5: #497272;
-@accent3Color: #fe5f55;
-@accent3Shade1: #fec4c1;
-@accent3Shade2: #fea7a2;
-@accent3Shade3: #fe7c73;
-@accent3Shade4: #e7574e;
-@accent3Shade5: #b9463e;
-
-@neutralShade0: #f8f8f8;
-@neutralShade1: #f2f2f2;
-@neutralShade2: #e8e9e9;
-@neutralShade3: #d1d3d4;
-@neutralShade4: #babdbf;
-@neutralShade5: #808488;
-@neutralShade6: #666a6d;
-@neutralShade7: #4d5052;
-@neutralShade8: #212122;
-@grayColor: #999;
-@lightGrayColor: #ddd;
-@borderRadius: 6px;
-@boxShadow: 0 2px 5px rgba(#333, 0.2);
--- a/src/themes/mixin.less
+++ b/src/themes/mixin.less
@ -1,36 +0,0 @@
-@import '~themes/default';
-@import (inline) './fonty.css';
-@import (inline) './plyr.css';
-
-@dark-half: #494949;
-@purple: #d897eb;
-@shadow-1: 4px 4px 20px 0 rgba(0, 0, 0, 0.01);
-@shadow-2: 4px 4px 40px 0 rgba(0, 0, 0, 0.05);
-@transition-ease-in: all 0.3s ease-out;
-@transition-ease-out: all 0.3s ease-out;
-@ease-in: ease-in;
-
-.text-overflow {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-
-.text-gradient {
-  background-image: -webkit-gradient(linear,
-      37.219838% 34.532506%,
-      36.425669% 93.178216%,
-      from(#29cdff),
-      to(#0a60ff),
-      color-stop(0.37, #148eff));
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
-
-.background-hover {
-  transition: @transition-ease-in;
-
-  &:hover {
-    background-color: @hover-color;
-  }
-}
--- a/src/themes/plyr.css
+++ b/src/themes/plyr.css
--- a/src/themes/vars.less
+++ b/src/themes/vars.less
@ -1,11 +0,0 @@
-@import '~themes/default.less';
-@import '~themes/mixin.less';
-@import '~themes/light_ng/index.less';
-
-@DarkMode-backgroud_container: rgb(24, 26, 27);
-@DarkMode-backgroud: #212121;
-@LightMode-backgroud: #fff;
-
-@DarkMode-color_container: rgb(195, 191, 182);
-@DarkMode-color: #fff;
-@LightMode-color: #2F2E30;
--- a/webpack.config.js
+++ b/webpack.config.js
@ -1,7 +0,0 @@
-module.exports = {
-    resolve: {
-      alias: {
-        '@': require('path').resolve(__dirname, 'src'),
-      },
-    },
-  };