0.2.26A2

.umirc.js

@@ -3,9 +3,8 @@ import { resolve } from 'path'
 import { i18n } from './config/ycore.config.js'
 export default {
   ignoreMomentLocale: true,
-  targets: {
+  hash: true,
-    ie: 9,
+  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',
     ],
   ],
+
+  
+
 }

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,
+  auto_hide_postbar: fromStorage? SettingStoragedValue('auto_hide_postbar') : true,
-  default_collapse_sider: fromStorage? SettingStoragedValue('default_collapse_sider') : true,
-  force_show_postactions: fromStorage? SettingStoragedValue('force_show_postactions') : false,
   MaxLengthPosts: '512',
   CurrentBundle: 'light_ng',
   // In KB

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'))
 }

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',
+    title: 'No expire session',
-    description:
+    description: 'Force the app to not expire any session... [Developer]',
-      'Force the app to apply full light mode theme when the light mode is activated... (Experimental)',
+    value: fromStorage ? SettingStoragedValue('sessions_noexpire') : false,
-    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,
   },
   {
     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,
-  },
 ]

package.json

@@ -3,8 +3,8 @@
   "UUID": "C8mVSr-4nmPp2-pr5Vrz-CU4kg4",
   "title": "Comty™",
   "DevBuild": true,
-  "version": "0.2.25",
+  "version": "0.2.26",
-  "stage": "A1",
+  "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",

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 = {

src/@ycore/libs/comty_ng/comty_get.js

@@ -13,8 +13,33 @@ export const comty_get = {
       formdata
     )
   },
-  session_data: () => {},
+  session_id: callback => {
-  general_data: () => {
+    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
 

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) => {

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))
-  },
-}

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: () => {
 

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 = {

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 = {
+export const router = {
-  native: e => {
+  go: e => {
+    gotoElement('primaryContent')
     umiRouter.push({
       pathname: `/${e}`,
       search: window.location.search,
     })
   },
-  default: e => {
-    router.push(e)
-  },
 }
 
 /**

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

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>

src/components/HeaderSearch/index.less

@@ -1,4 +1,4 @@
-@import '~themes/vars.less';
+@import '~themes/index.less';
 
 .HeaderSearchWrapper {
   z-index: 20;

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;

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);

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() {
+  Swapper = {
+    close: () => {
       this.setState({
-      swap: !this.state.swap,
+        swap: false,
+        half: false,
         pri_raw: null,
         sec_raw: null,
-      mode: '',
+        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 => {
+    try {
       const post_comments = JSON.parse(payload)['post_comments']
       const post_data = JSON.parse(payload)['post_data']
-    console.log(post_comments)
+      return (
-    return <__secComments post_id={post_data.post_id} payload={post_comments} />
+        <__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, {
+          className={styles.secondary_layout_bg}
-            [styles.desktop_mode]: this.props.desktop_mode,
-          })}
         >
-          <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.container_2, {
+            className={classnames(styles.secondary_container_2, {
               [styles.active]: this.state.swap,
             })}
           >
             {this.SwapBalanceContent('__sec')}
           </div>
+
         </div>
+      </div>
+      </>
     )
   }
 }

src/components/Layout/Secondary/index.less

@@ -1,45 +1,58 @@
-@SwapAnimDuration: 340ms;
+@import '~themes/index.less';
 
-.SecondaryWrapper {
+.__secondary_colider{
-  width: 27%;
+  position: relative;
+  float: right;
+  width: @__secondary_colider_width;
+  height: 100vh;
+  background-color: @__Global_layout_backgroud;
+}
+
+.secondary_wrapper {
+  width: @secondary_wrapper_hidden_width;
   height: 100vh;
 
-
+  z-index: 50;
-  position: relative;
+  position: absolute;
-  float: left;
+  right: 0;
-  overflow-y: hidden !important;
+  top: 0;
   overflow-x: hidden;
 
   display: flex;
 
   &.active {
-    width: 96vw;
+    width: @secondary_wrapper_showFull_width;
-    position: absolute;
+    >.container_bg {
-    right: 0;
+      border-radius: @__Global_layout_border-rd;
-
+    }
-    >.container {
+    @media (min-width: 1000px) {
-      border-radius: 12px 12px 12px 12px;
+      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 {
+.secondary_layout_bg {
-  z-index: 50;
-  position: relative;
-  background-color: #201F23;
-  color: @DarkMode-color_container  !important;
-
-  &.desktop_mode {
-    border-radius: 0 12px 12px 0;
-  }
-
   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;
+      color: @secondary_container_1_btn_color;
-      background-color: #4c4c4c;
+      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);
+      box-shadow: @secondary_container_1_btn_shadow;
-      transition: all 150ms linear;
+      transition: all @__Global_Components_transitions_dur linear;
     }
   }
 }
 
-.container_body {
+.secondary_container_2 {
-  padding: 30px 375px 30px 75px;
+  position: relative;
-}
-
-.container_2 {
-  z-index: 51;
-
-  background-color: #fff;
-  border-radius: 32px 0 0 32px;
-  padding: 20px 15px 15px 15px;
-
-  width: 0;
   height: 100vh;
-  opacity: 0;
+  width: 0;
-
-  position: absolute;
   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;
+  }
+}

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>
+    )
+  }
+}

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;
+  }
+
+}

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 = () => {
+  isSelected(key){
-    const { theme } = this.props
+    if (this.state.selectedKey == (key)) {
-    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') {
       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
+          collapsed
-          defaultCollapsed="true"
+          width="90"
-          collapsedWidth={this.state.collapsedWidth}
+          className={styles.left_sider_container}
-          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' })}
         >
-          <div className={styles.brand}>
+          <div className={styles.left_sider_brandholder}>
             <img
-              onClick={() => ycore.crouter.native('main')}
+              onClick={() => ycore.router.go('main')}
-              src={collapsed ? config.LogoPath : config.FullLogoPath}
+              src={config.LogoPath}
             />
           </div>
-          <div
+         
-            className={
+          <div className={styles.left_sider_menuContainer}>
-              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 }}>
               <antd.Menu
-                className={
+                selectable={false}
-                  collapsed ? styles.menuItemsCollapsed : styles.menuItems
+                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">
+                <antd.Menu.Item key="saves">
-                  <Icons.ReadOutlined />
+                  <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={
+                  className={styles.left_sider_menuItems}
-                    collapsed ? styles.menuItemsCollapsed : styles.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) ? (
+                  {ycore.IsThisUser.dev() ? (
-                    <antd.Menu.Item key="admin_area">
+                    <antd.Menu.Item key="debug_area">
                       <Icons.ThunderboltOutlined />
-                      <Trans>
+                      <span>Debug</span>
-                        <span>{userData.username}</span>
-                      </Trans>
                     </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>

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;
+.left_sider_wrapper {
-@LLightMode-color: #2F2E30;
+  border-color: transparent;
-
+  font-size: 13px;
-.CollapserWrapperLight {
+  font-family: @__Global_general_font_family;
-  height: 100%;
+  height: 100vh;
-  position: absolute;
+  z-index: 40;
   float: left;
-  top: 0;
+  position: relative;
-  left: 0;
-  z-index: 200;
-  vertical-align: middle;
 
   :global {
+    .ant-layout-sider {
+      background-color: @left_sider_backgroud;
 
-    .ant-btn {
+      .ant-menu {
-      border: none;
-      border-radius: unset;
         vertical-align: middle;
-      height: 100%;
+        margin: 0 0 0 5px;
-      color: white;
-      background-color: transparent;
-      border-color: transparent;
-      box-shadow: none;
-      transition: all 1s ease-in;
       }
 
-    .ant-btn:hover {
+      .ant-menu-item {
-      background: rgba(121, 121, 121, 0.247);
+        color: @left_sider_color;
-      background: linear-gradient(270deg, rgba(121, 121, 121, 0) 0%, rgba(252, 252, 252, 0.13) 95%);
+      }
-      transition: all 1s ease-in;
+
+      .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 {
+.left_sider_brandholder {
-    .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 {
   cursor: pointer;
 
   img {
@@ -77,199 +52,42 @@
     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%;
+    .anticon{
+      font-size: 15px!important;
     }
-}
+    .ant-menu-item{
-
+      height: 35px!important;
-.siderhead {
+      line-height: 0px!important;
-  cursor: pointer;
+      padding: 0!important;
-  font-family: 'Source Sans Pro', sans-serif;
+      margin: 0!important;
-  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;
-      }
-    }
-
-    .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;
-      }
     }
   }
 }
 
-.sider {
+.left_sider_container {
   border-right: transparent;
-
-  &.desktop_mode {
-    border-radius: 12px 0 0 12px;
-  }
-
   height: 100%;
   z-index: 50;
+}
 
-  :global {
+.left_sider_menuContainer {
-    .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;
@@ -290,53 +108,30 @@
       }
     }
 
-      .scrollbar-container {
-        position: initial;
-        height: 100%;
-      }
-
     .ant-menu-inline .ant-menu-item {
-        font-size: 14px;
+      font-family: @__Global_general_font_family;
-        font-family: 'Source Sans Pro', sans-serif;
     }
 
     .ant-menu-dark .ant-menu-item a {
       color: rgb(197, 197, 197);
     }
   }
-  }
 }
 
-.scrollbar-container {
+.left_sider_menuItems {
-  position: initial;
+  background-color: transparent;
-  height: 100%;
+  margin-bottom: 8px;
-}
+  width: 100%;
+  font-weight: 500;
 
-@keyframes fadeLeftIn {
+  animation: fadein 0.5s;
-  0% {
-    transform: translateX(5px);
-    opacity: 0;
-  }
 
-  100% {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-
-.themeSwitcher {
   :global {
-    .ant-switch-checked {
+    .ant-menu-item {
-      background-color: #2F2E30;
+      padding: 0 !important;
+      margin: 2px auto 2px auto;
+      width: 100%;
+      text-align: center;
     }
   }
-
-  svg {
-    height: 100%;
-    vertical-align: middle;
-  }
-
-  span {
-    line-height: 10px;
-  }
 }

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 }) => {
+const Loader = (loading) => {
-  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>
-    )
-  }
   return (
+      <div className={classNames(styles.wrapper, {[styles.end]: !loading.spinning })}>
+        <span>Loading... </span>
         <div
-      className={classNames(styles.loader, {
+          className={styles.newloader}
-        [styles.hidden]: !spinning,
-        [styles.fullScreen]: fullScreen,
-      })}
-    >
-      <div className={styles.warpper}>
-        <div
-          className={classNames(styles.newloader, { [styles.end]: !spinning })}
         >
           <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

src/components/Loader/Loader.less

@@ -1,60 +1,44 @@
-@import '~themes/vars.less';
+@import '~themes/index.less';
 
-.loader {
+.wrapper {
-  background-color: transparent; //rgba(44, 44, 44, 0.74);
+  font-family: @__Global_general_font_family;
-  width: 100%;
+  color: white;
-  position: absolute;
+  line-height: 55px;
-  top: 0;
+  span{
-  bottom: 0;
+    margin: 0 10px 0 auto;
-  z-index: 100000;
-  display: flex;
-  justify-content: right;
-  float: right;
-  opacity: 1;
-  text-align: center;
-
-  &.fullScreen {
-    position: fixed;
   }
 
-  &.hidden {
-    z-index: -1;
-    opacity: 0;
-    transition: opacity 3s ease 0.5s, z-index 0.1s ease 1.5s;
-  }
-
-  .warpper {
   position: absolute;
+  z-index: 1000;
   right: 0;
-    width: 100px;
+  bottom: 0;
-    height: 100px;
+  width: 140px;
-    display: inline-flex;
+  height: 55px;
-    flex-direction: column;
+  display: flex;
+  flex-direction: row;
   justify-content: space-around;
-  }
+  background-color: #2d2d2dc2;
+  border-radius: 28px;
+  margin: 10px;
 
   
-  .newloader {
-    transform: scale(0.4);
-    width: 0px;
-    height: 0px;
-    margin: 0 auto;
-    position: relative;
-
   &.end {
-      .loader {
+    animation: unshow 0.8s linear;
-        z-index: -1;
+    .newloader>div {
+      animation: loader 0.8s linear;
+    }
     opacity: 0;
   }
 
-      >div {
+  .newloader {
-        animation: newloader 0.8s linear;
+    transform: translate(21px,27px) scale(0.3);
-      }
+    width: 0px;
-    }
+    height: 0px;
+    margin: 0 45px 0 0;
+    position: relative;  
   }
   
   .newloader>div {
-    background-color: rgb(34, 34, 34);
     width: 6px;
     height: 20px;
     position: absolute;
@@ -63,7 +47,7 @@
     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) {
@@ -100,19 +84,9 @@
     transform: rotate(315deg);
     animation-delay: 0.7s;
   }
+}
 
-  @keyframes unshow {
+@keyframes loader {
-    0% {
-      opacity: 1;
-    }
-
-    100% {
-      opacity: 0;
-      z-index: -1;
-    }
-  }
-
-  @keyframes newloader {
   0% {
     background: transparent;
     left: -10px;
@@ -128,5 +102,15 @@
     left: 10px;
     transform-origin: -10px 35px;
   }
+}
+
+@keyframes unshow {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+    display: none;
   }
 }

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) {

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}

src/components/PostCard/index.less

@@ -1,25 +1,25 @@
-@import '~themes/vars.less';
+@import '~themes/index.less';
 
-.flaggedWarning {
+.post_card_flaggedWarning {
-  border-radius: 7px;
+  border-radius: @post_card_general_border-rd;
   width: 100%;
   text-align: center;
   position: absolute;
   z-index: 20;
-  background: #ffffff60;
+  background: @post_card_flaggedWarning_backgroud;
-  font-family: "Poppins", sans-serif;
+  font-family: @__Global_general_font_family;
-  padding: 20px 15px 25px 15px;
+  padding: @post_card_flaggedWarning_padding;
 
   :global {
     .anticon {
-      font-size: 40px;
+      font-size: @post_card_flaggedWarning_iconSize;
     }
   }
 }
 
-.cardWrapper {
+.post_card_wrapper {
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+  box-shadow: @post_card_wrapper_shadow;
-  border-radius: 7px;
+  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 {
+.post_card_content {
-  display: flex;
-
-  h4 {
-    cursor: pointer;
-  }
-}
-
-.postContent {
   word-break: break-all;
   display: flex;
   border-radius: 3px;
   margin: 23px 24px 23px 24px;
 
   h3 {
-    font-family: "Poppins", sans-serif;
+    font-family: @__Global_general_font_family;
-    color: #555555;
+    color: @post_card_wrapper_post_content_color;
-    font-weight: 400;
+    font-weight: @post_card_wrapper_post_content_weight;
-    font-size: 15px;
+    font-size: @post_card_wrapper_post_content_fontSize;
-    letter-spacing: -0.3px;
+    letter-spacing: @post_card_wrapper_post_content_letterSpacing;
   }
 }
 
-.postContentFILE {
+.post_card_file {
   display: flex;
   margin: 23px 0 5px 0;
   max-height: 600px;

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);

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 = () => {

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;

src/components/ScrollBar/index.less

@@ -1,4 +1,4 @@
-@import '~themes/vars.less';
+@import '~themes/index.less';
 
 :global {
 

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()}

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);

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 }

src/components/UserProfile/styles.less

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

src/components/YulioID/index.less

@@ -1,4 +1,4 @@
-  @import '~themes/vars.less';
+  @import '~themes/index.less';
 
   .loginWrapper {
     :global {

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>
     )

src/layouts/BaseLayout.less

@@ -1,11 +1,6 @@
-@import '~themes/vars.less';
 @import '~themes/index.less';
 
 :global {
-  #root {
-    width: 100%;
-  }
-
   #nprogress {
     pointer-events: none;
 

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
+          <antd.Layout id="primaryLayout" className={styles.primary_layout}>
-            className={classnames(styles.layout, {
-              [styles.md_dark]: this.isDarkMode(),
-              [styles.desktop_mode]: desktop_mode,
-            })}
-          >
             <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, {
+                  id="primaryContent"
-                    [styles.collapsed]: !collapsed,
+                  className={styles.primary_layout_content}
-                  })}
                 >
                   <HeaderSearch />
                   {children}
@@ -138,7 +124,6 @@ class PrimaryLayout extends React.Component {
 
             <Secondary {...SecondaryProps} />
           </antd.Layout>
-        </div>
       </React.Fragment>
     )
   }

src/layouts/PrimaryLayout.less

@@ -1,141 +1,40 @@
-@import '~themes/vars.less';
+@import '~themes/index.less';
 
-.AppWrapper {
+.__ControlBar {
-  &.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 {
   width: 100%;
   position: absolute;
   bottom: 0;
   z-index: 30;
 }
 
-.leftContainer {
+.primary_layout {
-  align-self: center;
+    overflow-x: hidden!important;
-  width: 100vw;
+    overflow-y: hidden!important;
-  position: relative;
+    background-color: @primary_layout_backgroud;
-  float: left;
+    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;
-  :global {
+  float: left;
-    #scroller {
-      overflow-y: scroll !important;
-    }
-
-  }
 }
 
-
+.primary_layout_content {
-
+  vertical-align: middle;
-@media (max-width: 767px) {
+  width: 100%;
-  .content {
+  float: right;
-    padding: 12px;
+  padding: @primary_layout_content_padding;
-  }
+  transition: all @__Global_layout_transitions-dur ease;
-
-  .layout {
-    height: 100vh;
-    flex: 1;
-  }
 }

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)
       }

src/pages/__m/style.less

@@ -1,4 +1,4 @@
-@import '~themes/vars.less';
+@import '~themes/index.less';
 
 .Wrapper {
   padding: 10px;

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" />
+        )
+    }
+}

src/pages/events/index.less

@@ -0,0 +1 @@
+@import '~themes/index.less';

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>

src/pages/g/$group/styles.less

@@ -1,4 +1,4 @@
-@import '~themes/vars.less';
+@import '~themes/index.less';
 
 .searchHeader {
   font-family: "Nunito", sans-serif;

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`)
   }
 }
 

src/pages/login/index.less

@@ -1,4 +1,4 @@
-@import '~themes/vars.less';
+@import '~themes/index.less';
 
 
 .login_wrapper{

src/pages/main/index.less

@@ -1,4 +1,4 @@
-@import '~themes/vars.less';
+@import '~themes/index.less';
 
 .mainWrapper {
   position: relative;

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" />
+        )
+    }
+}

src/pages/marketplace/index.less

@@ -0,0 +1 @@
+@import '~themes/index.less';

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
   }
 }

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}>

src/pages/s/$search/styles.less

@@ -1,4 +1,4 @@
-@import '~themes/vars.less';
+@import '~themes/index.less';
 
 .searchHeader {
   font-family: "Nunito", sans-serif;

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>
+        )
+    }
+}

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;
+}

src/pages/settings/components/notification/index.less

@@ -1,4 +1,4 @@
-@import '~themes/vars.less';
+@import '~themes/index.less';
 
 .main {
 

src/pages/settings/components/security/index.less

@@ -1,4 +1,4 @@
-@import '~themes/vars.less';
+@import '~themes/index.less';
 
 .main {
 

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) => {

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

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;

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;

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);

src/themes/index.less

@@ -1,130 +1,3 @@
-@import '~themes/vars.less';
+@import '~themes/antd-design.less';
-
+@import '~themes/base/index.less';
-body {
+@import (inline) './fonts-imports.css';
-  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;
-      }
-    }
-  }
-}

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);

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;
-  }
-}

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;

webpack.config.js

@@ -1,7 +0,0 @@
-module.exports = {
-    resolve: {
-      alias: {
-        '@': require('path').resolve(__dirname, 'src'),
-      },
-    },
-  };