improve: refactorized "secondary"

.umirc.js

@@ -85,7 +85,4 @@ export default {
       'lodash',
     ],
   ],
-
-  
-
 }

src/@app/libs/app_functions/modals.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import * as ycore from 'app'
+import * as app from 'app'
 import * as antd from 'antd'
 import * as Icons from '@ant-design/icons'
 import styles from './modals.less';
@@ -24,7 +24,7 @@ class __Model_postreport extends React.PureComponent {
             }, payload)
         }
         setTimeout(() => {
-            app.SecondarySwap.close()
+            app.OverlaySwap.close()
         }, 500)
 
     }
@@ -116,7 +116,7 @@ export const app_modals = {
             icon: <Icons.FrownOutlined />,
             content: 'It seems that you want to report this post, first of all it is necessary that you take into account that this tool is only intended for serious cases and we need you to comply with some questions to be able to report this post and to guarantee the quality of service ...',
             onOk() {
-                return app.SecondarySwap.openFragment(<__Model_postreport id={post_id} />)
+                return app.OverlaySwap.openFragment(<__Model_postreport id={post_id} />)
             },
             onCancel() {
                 return false

src/@app/libs/app_functions/pre.js

@@ -1,7 +1,7 @@
 import { RenderFeed } from 'components/MainFeed'
 import { transitionToogle } from '../../../pages/login'
-import { SetControls, CloseControls } from '../../../components/Layout/Control'
-import { SwapMode } from '../../../components/Layout/Secondary'
+import { SetControls, CloseControls } from 'components/Layout/ControlBar'
+import { SwapMode } from 'components/Layout/Overlay'
 import umiRouter from 'umi/router'
 import * as app from 'app'
 import * as antd from 'antd'
@@ -34,7 +34,7 @@ export const CheckThisApp = {
   },
 }
 
-export const SecondarySwap = {
+export const OverlaySwap = {
   close: () => {
     SwapMode.close()
   },

src/components/Layout/Overlay/components/layout/__pri.tsx

@@ -43,8 +43,8 @@ const __pri = (props: __pri_props) => {
     
     return (
         <div
-            id="secondary_layout_pri"
-            className={classnames(styles.secondary_container_1, {
+            id="Overlay_layout_pri"
+            className={classnames(styles.Overlay_container_1, {
                 [styles.mobile]: isMobile,
                 [styles.full_open]: t_full,
                 [styles.half]: t_half,

src/components/Layout/Overlay/components/layout/__sec.tsx

@@ -40,8 +40,8 @@ const __sec = (props: __sec_props) => {
     const t_def = type == 'active'? true: false 
     return (
         <div
-            id="secondary_layout__sec"
-            className={classnames(styles.secondary_container_2, {
+            id="Overlay_layout__sec"
+            className={classnames(styles.Overlay_container_2, {
                 [styles.mobile]: isMobile,
                 [styles.active]: t_def,
                 [styles.full_open]: t_full,

src/components/Layout/Overlay/components/swapper/__priSearch.less

@@ -7,10 +7,10 @@
     margin: auto;
     :global{
       .ant-result-title{
-        color: @secondary_container_1_color!important;
+        color: @Overlay_container_1_color!important;
       }
       .ant-result-subtitle{
-        color: @secondary_container_1_color!important;
+        color: @Overlay_container_1_color!important;
   
       }
       .ant-list-items{

src/components/Layout/Overlay/index.js

@@ -19,11 +19,11 @@ import {
 
 export const SwapMode = {
   close: () => {
-    SecondaryLayoutComponent.Swapper.close()
+    OverlayLayoutComponent.Swapper.close()
   },
   openFragment: (fragment)=>{
     if (!fragment) return false
-    return SecondaryLayoutComponent.setState({ 
+    return OverlayLayoutComponent.setState({ 
       rd__sec: fragment, 
       __sec_active: true,
     })
@@ -50,9 +50,9 @@ export const SwapMode = {
       tmp = content
     }
   
-    const pdata = <__priPost isMobile={SecondaryLayoutComponent.props.isMobile} payload={tmp}/>
+    const pdata = <__priPost isMobile={OverlayLayoutComponent.props.isMobile} payload={tmp}/>
     
-    return SecondaryLayoutComponent.setState({ 
+    return OverlayLayoutComponent.setState({ 
       rd__pri: pdata, 
       __pri_full: true 
     })
@@ -81,7 +81,7 @@ export const SwapMode = {
     }
     
     const pdata = <__secComments post_id={id} payload={tmp} />
-    return SecondaryLayoutComponent.setState({
+    return OverlayLayoutComponent.setState({
       rd__sec: pdata,
       __sec_active: true,
     })
@@ -111,7 +111,7 @@ export const SwapMode = {
       <__priSearch payload={tmp} />
     </div>
 
-    return SecondaryLayoutComponent.setState({
+    return OverlayLayoutComponent.setState({
       rd__pri: pdata,
       __pri_half: true,
     })
@@ -120,10 +120,10 @@ export const SwapMode = {
 
 }
 
-export default class Secondary extends React.PureComponent {
+export default class Overlay extends React.PureComponent {
   constructor(props) {
     super(props),
-      (window.SecondaryLayoutComponent = this),
+      (window.OverlayLayoutComponent = this),
       (this.state = {
         loading: true,
         gen_data: null,
@@ -272,9 +272,9 @@ export default class Secondary extends React.PureComponent {
       return (
         <React.Fragment>
      
-            <div className={styles.secondary_body_component}> <__searchBar /> </div>
-            <div className={styles.secondary_body_component}> <__trendings data={this.state.trending_hashtag} /> </div>
-            <div className={styles.secondary_body_component}> <__suggestions /> </div>
+            <div className={styles.Overlay_body_component}> <__searchBar /> </div>
+            <div className={styles.Overlay_body_component}> <__trendings data={this.state.trending_hashtag} /> </div>
+            <div className={styles.Overlay_body_component}> <__suggestions /> </div>
       
         </React.Fragment>
       )
@@ -289,10 +289,10 @@ export default class Secondary extends React.PureComponent {
     if (!this.state.loading)
       return (
         <>
-          {isMobile ? null : <div className={styles.__secondary_colider}></div>}
+          {isMobile ? null : <div className={styles.__Overlay_colider}></div>}
           <div
-            id="secondary_layout__wrapper"
-            className={classnames(styles.secondary_wrapper, {
+            id="Overlay_layout__wrapper"
+            className={classnames(styles.Overlay_wrapper, {
               [styles.mobile]: isMobile,
               [styles.active]: this.isOpen()
             })}

src/components/Layout/Overlay/index.less

@@ -20,10 +20,10 @@
   }
 }
 
-.__secondary_colider{
+.__Overlay_colider{
   position: relative;
   float: right;
-  width: @__secondary_colider_width;
+  width: @__Overlay_colider_width;
   height: 100vh;
   background-color: @__Global_layout_backgroud;
 }
@@ -39,7 +39,7 @@
   }
 }
 
-.secondary_userholder {
+.Overlay_userholder {
   right: 20px;
   top: 25px;
   display: flex;
@@ -91,7 +91,7 @@
   }
 }
 
-.secondary_wrapper {
+.Overlay_wrapper {
   right: 0;
   top: 0;
 
@@ -113,8 +113,8 @@
   transition: all @__Global_SwapAnimDuration ease-in-out;
 }
 
-.secondary_container_1 {
-  width: @secondary_wrapper_hidden_width;
+.Overlay_container_1 {
+  width: @Overlay_wrapper_hidden_width;
   height: 100%;
   z-index: 50;
   position: absolute;
@@ -124,12 +124,12 @@
   right: 0;
   padding: 30px 30px 30px 35px;
   
-  color: @secondary_container_1_color;
+  color: @Overlay_container_1_color;
   background-color: #F8F6F8;
   
 
   &.full_open {
-    width: @secondary_wrapper_showFull_width;
+    width: @Overlay_wrapper_showFull_width;
     .pri_body{
       width: calc(100% - 25% - 5%);
       // margin: 30px 0 25px 0;
@@ -137,7 +137,7 @@
   }
 
   &.half {
-    width: calc(@secondary_wrapper_hidden_width + 150px);
+    width: calc(@Overlay_wrapper_hidden_width + 150px);
   }
 
   &.mobile {
@@ -176,14 +176,14 @@
 
   :global {
     .ant-btn {
-      color: @secondary_container_1_btn_color;
-      background-color: @secondary_container_1_btn_backgroud;
+      color: @Overlay_container_1_btn_color;
+      background-color: @Overlay_container_1_btn_backgroud;
       border-color: transparent;
       border-radius: 12px;
     }
 
     .ant-btn:hover {
-      box-shadow: @secondary_container_1_btn_shadow;
+      box-shadow: @Overlay_container_1_btn_shadow;
       transition: all @__Global_Components_transitions_dur linear;
     }
   }
@@ -210,13 +210,13 @@
 }
 
 
-.secondary_main{
+.Overlay_main{
   width: 100%;
 }
 
 
 
-.secondary_container_2 {
+.Overlay_container_2 {
     position: absolute;
     z-index: 51;
     height: 100vh;
@@ -225,8 +225,8 @@
     padding: @secondaty_container_2_padding;
     
     opacity: 0;
-    color: @secondary_container_2_color!important;
-    background-color: @secondary_container_2_backgroud;
+    color: @Overlay_container_2_color!important;
+    background-color: @Overlay_container_2_backgroud;
   
     border-radius: 32px 0 0 32px;
   
@@ -292,7 +292,7 @@
 
 
 
-  .secondary_body_component{
+  .Overlay_body_component{
     // Spacing between components
     margin-bottom: 35px;
   }

src/components/Layout/index.js

@@ -1,4 +1,4 @@
-import Sider from './Sider/index.js'
-import Control from './Control'
-import Secondary from './Secondary/index.js'
-export { Sider, Control, Secondary }
+import Sider from './Sider'
+import Control from './ControlBar'
+import Overlay from './Overlay'
+export { Sider, Control, Overlay }

src/components/MediaPlayer/plyr.js

@@ -1,134 +0,0 @@
-"use strict";
-
-function e(e) {
-  return e && "object" == typeof e && "default" in e ? e.default : e
-}
-Object.defineProperty(exports, "__esModule", {
-  value: !0
-});
-var t = e(require("react")),
-  n = e(require("plyr"));
-
-function o(e, t) {
-  if (!(e instanceof t)) throw new TypeError("Cannot call a class as a function")
-}
-
-function i(e, t) {
-  for (var n = 0; n < t.length; n++) {
-    var o = t[n];
-    o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, o.key, o)
-  }
-}
-
-function r(e) {
-  return (r = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (e) {
-    return typeof e
-  } : function (e) {
-    return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e
-  })(e)
-}
-
-function c(e) {
-  return (c = "function" == typeof Symbol && "symbol" === r(Symbol.iterator) ? function (e) {
-    return r(e)
-  } : function (e) {
-    return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : r(e)
-  })(e)
-}
-
-function s(e, t) {
-  return !t || "object" !== c(t) && "function" != typeof t ? function (e) {
-    if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-    return e
-  }(e) : t
-}
-
-function a(e) {
-  return (a = Object.setPrototypeOf ? Object.getPrototypeOf : function (e) {
-    return e.__proto__ || Object.getPrototypeOf(e)
-  })(e)
-}
-
-function l(e, t) {
-  return (l = Object.setPrototypeOf || function (e, t) {
-    return e.__proto__ = t, e
-  })(e, t)
-}
-require("plyr/dist/plyr.css");
-! function (e, t) {
-  void 0 === t && (t = {});
-  var n = t.insertAt;
-  if (e && "undefined" != typeof document) {
-    var o = document.head || document.getElementsByTagName("head")[0],
-      i = document.createElement("style");
-    i.type = "text/css", "top" === n && o.firstChild ? o.insertBefore(i, o.firstChild) : o.appendChild(i), i.styleSheet ? i.styleSheet.cssText = e : i.appendChild(document.createTextNode(e))
-  }
-}('.yjs-plyr{width: 100%!important;position:relative;background-color:#4caf50;border:none;font-size:28px;color:#fff;padding:20px;width:200px;text-align:center;-webkit-transition-duration:.4s;transition-duration:.4s;text-decoration:none;overflow:hidden;cursor:pointer;box-shadow:0 8px 16px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19)}.PlyrComponent:after{content:"";background:#f1f1f1;display:block;position:absolute;padding-top:300%;padding-left:350%;margin-left:-20px!important;margin-top:-120%;opacity:0;transition:all .8s}.PlyrComponent:active:after{padding:0;margin:0;opacity:1;transition:0s}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsZUFDRSxpQkFBa0IsQ0FDbEIsd0JBQXlCLENBQ3pCLFdBQVksQ0FDWixjQUFlLENBQ2YsVUFBYyxDQUNkLFlBQWEsQ0FDYixXQUFZLENBQ1osaUJBQWtCLENBQ2xCLCtCQUFpQyxDQUNqQyx1QkFBeUIsQ0FDekIsb0JBQXFCLENBQ3JCLGVBQWdCLENBQ2hCLGNBQWUsQ0FDZixtRUFDRixDQUVBLHFCQUNFLFVBQVcsQ0FDWCxrQkFBbUIsQ0FDbkIsYUFBYyxDQUNkLGlCQUFrQixDQUNsQixnQkFBaUIsQ0FDakIsaUJBQWtCLENBQ2xCLDJCQUE2QixDQUM3QixnQkFBaUIsQ0FDakIsU0FBVSxDQUNWLGtCQUNGLENBRUEsNEJBQ0UsU0FBVSxDQUNWLFFBQVMsQ0FDVCxTQUFVLENBQ1YsYUFDRiIsImZpbGUiOiJzdHlsZXMuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLlBseXJDb21wb25lbnQge1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIGJhY2tncm91bmQtY29sb3I6ICM0Q0FGNTA7XG4gIGJvcmRlcjogbm9uZTtcbiAgZm9udC1zaXplOiAyOHB4O1xuICBjb2xvcjogI0ZGRkZGRjtcbiAgcGFkZGluZzogMjBweDtcbiAgd2lkdGg6IDIwMHB4O1xuICB0ZXh0LWFsaWduOiBjZW50ZXI7XG4gIC13ZWJraXQtdHJhbnNpdGlvbi1kdXJhdGlvbjogMC40czsgLyogU2FmYXJpICovXG4gIHRyYW5zaXRpb24tZHVyYXRpb246IDAuNHM7XG4gIHRleHQtZGVjb3JhdGlvbjogbm9uZTtcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgY3Vyc29yOiBwb2ludGVyO1xuICBib3gtc2hhZG93OiAwIDhweCAxNnB4IDAgcmdiYSgwLDAsMCwwLjIpLCAwIDZweCAyMHB4IDAgcmdiYSgwLDAsMCwwLjE5KTtcbn1cblxuLlBseXJDb21wb25lbnQ6YWZ0ZXIge1xuICBjb250ZW50OiBcIlwiO1xuICBiYWNrZ3JvdW5kOiAjZjFmMWYxO1xuICBkaXNwbGF5OiBibG9jaztcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICBwYWRkaW5nLXRvcDogMzAwJTtcbiAgcGFkZGluZy1sZWZ0OiAzNTAlO1xuICBtYXJnaW4tbGVmdDogLTIwcHggIWltcG9ydGFudDtcbiAgbWFyZ2luLXRvcDogLTEyMCU7XG4gIG9wYWNpdHk6IDA7XG4gIHRyYW5zaXRpb246IGFsbCAwLjhzXG59XG5cbi5QbHlyQ29tcG9uZW50OmFjdGl2ZTphZnRlciB7XG4gIHBhZGRpbmc6IDA7XG4gIG1hcmdpbjogMDtcbiAgb3BhY2l0eTogMTtcbiAgdHJhbnNpdGlvbjogMHNcbn1cbiJdfQ== */');
-var u = function (e) {
-  function r() {
-    return o(this, r), s(this, a(r).apply(this, arguments))
-  }
-  var c, u, p;
-  return function (e, t) {
-    if ("function" != typeof t && null !== t) throw new TypeError("Super expression must either be null or a function");
-    e.prototype = Object.create(t && t.prototype, {
-      constructor: {
-        value: e,
-        writable: !0,
-        configurable: !0
-      }
-    }), t && l(e, t)
-  }(r, t.Component), c = r, (u = [{
-    key: "componentDidMount",
-    value: function () {
-      this.player = new n(".yjs-plyr", this.props.options), this.player.source = this.props.sources
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function () {
-      this.player.destroy()
-    }
-  }, {
-    key: "render",
-    value: function () {
-      return t.createElement("video", {
-        className: "yjs-plyr plyr"
-      })
-    }
-  }]) && i(c.prototype, u), p && i(c, p), r
-}();
-u.defaultProps = {
-  options: {
-    controls: ["rewind", "play", "fast-forward", "progress", "current-time", "duration", "mute", "volume", "settings", "fullscreen"],
-    i18n: {
-      restart: "Restart",
-      rewind: "Rewind {seektime}s",
-      play: "Play",
-      pause: "Pause",
-      fastForward: "Forward {seektime}s",
-      seek: "Seek",
-      seekLabel: "{currentTime} of {duration}",
-      played: "Played",
-      buffered: "Buffered",
-      currentTime: "Current time",
-      duration: "Duration",
-      volume: "Volume",
-      mute: "Mute",
-      unmute: "Unmute",
-      enableCaptions: "Enable captions",
-      disableCaptions: "Disable captions",
-      download: "Download",
-      enterFullscreen: "Enter fullscreen",
-      exitFullscreen: "Exit fullscreen",
-      frameTitle: "Player for {title}",
-      captions: "Captions",
-      settings: "Settings",
-      menuBack: "Go back to previous menu",
-      speed: "Speed",
-      normal: "Normal",
-      quality: "Quality",
-      loop: "Loop"
-    }
-  },
-
-}, exports.PlyrComponent = u;

src/components/ScrollBar/index.js

@@ -1,5 +0,0 @@
-import ScrollBar from 'react-perfect-scrollbar'
-import 'react-perfect-scrollbar/dist/css/styles.css'
-import './index.less'
-
-export default ScrollBar

src/components/ScrollBar/index.less

@@ -1,35 +0,0 @@
-@import '~themes/index.less';
-
-:global {
-
-  .ps--active-x>.ps__rail-x,
-  .ps--active-y>.ps__rail-y {
-    background-color: red;
-
-  }
-
-  .ps__rail-x:hover>.ps__thumb-x,
-  .ps__rail-x:focus>.ps__thumb-x {
-    height: 8px;
-  }
-
-  .ps__rail-y:hover>.ps__thumb-y,
-  .ps__rail-y:focus>.ps__thumb-y {
-    width: 8px;
-  }
-
-  .ps__rail-y,
-  .ps__rail-x {
-    z-index: 9;
-  }
-
-  .ps__thumb-y {
-    width: 4px;
-    right: 4px;
-  }
-
-  .ps__thumb-x {
-    height: 4px;
-    bottom: 4px;
-  }
-}

src/components/SearchCard/index.js

@@ -1,88 +0,0 @@
-import React from 'react'
-import * as antd from 'antd'
-import * as app from 'app'
-import styles from './index.less'
-import * as Icons from '@ant-design/icons'
-import Icon from '@ant-design/icons'
-import { CustomIcons } from 'components'
-
-const { Meta } = antd.Card
-
-class SearchCard extends React.PureComponent {
-  render() {
-    const { source } = this.props
-    const { username, avatar, about, id } = source
-    const DevInfo = `ID #${id} | Dev ${
-      app.booleanFix(source.dev) ? 'yes' : 'no'
-    } | `
-    const AdminInfo = `RID #${source.country_id} | IP ${source.ip_address} | `
-
-    const DataStrip = {
-      title: e => {
-        if (this.props.type == 'Users') {
-          return `@${username}`
-        }
-        if (this.props.type == 'Groups') {
-          return `${source.name}`
-        }
-        return null
-      },
-      description: e => {
-        if (this.props.type == 'Users') {
-          return `${DevInfo}${AdminInfo}`
-        }
-        if (this.props.type == 'Groups') {
-          return `GID #${source.group_id} | Created ${source.registered} | CAT ID #${source.category_id} / ${source.category} |`
-        }
-        return null
-      },
-      about: e => {
-        return about
-      },
-    }
-    return (
-      <div className={styles.cardWrapper}>
-        <antd.Card>
-          <Meta
-            avatar={
-              <div className={styles.postAvatar}>
-                <antd.Avatar shape="square" size={50} src={avatar} />
-              </div>
-            }
-            title={
-              <div className={styles.titleWrapper}>
-                <h4
-                  onClick={() => app.router.go(`@${username}`)}
-                  className={styles.titleUser}
-                >
-                  {DataStrip.title()}
-                </h4>
-                <antd.Tooltip title="User Verified">
-                  {app.booleanFix(source.verified) ? (
-                    <Icon
-                      style={{ color: 'blue', verticalAlign: 'top' }}
-                      component={CustomIcons.VerifiedBadge}
-                    />
-                  ) : null}{' '}
-                </antd.Tooltip>
-              </div>
-            }
-            description={
-              app.IsThisUser.dev() ? (
-                <span className={styles.textAgo}>
-                  {DataStrip.description()}
-                </span>
-              ) : null
-            }
-            bordered="false"
-          />
-          <div className={styles.postContent}>
-            {' '}
-            <h3 dangerouslySetInnerHTML={{ __html: DataStrip.about() }} />{' '}
-          </div>
-        </antd.Card>
-      </div>
-    )
-  }
-}
-export default SearchCard

src/components/SearchCard/index.less

@@ -1,105 +0,0 @@
-@import '~themes/index.less';
-
-.cardWrapper {
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
-  display: flex;
-  border-radius: 7px;
-  max-width: 510px;
-  min-width: 265px;
-  width: auto;
-  margin: 23px auto 50px auto;
-
-  :global {
-    .ant-card-meta-detail>div:not(:last-child) {
-      margin: 0
-    }
-
-    .ant-card {
-      border-radius: 7px;
-      border: 0;
-      border-top: 1px solid #4646460c;
-    }
-
-    .ant-card-body {
-      padding: 13px 0 5px 0;
-    }
-
-    .ant-card-actions {
-      border-top: 0;
-      background: #EBEBEB;
-      opacity: 0;
-      height: 30px;
-      position: relative;
-      transition: opacity 150ms linear, position 150ms linear, transform 150ms linear;
-      border-radius: 0 0 10px 10px;
-    }
-
-    .ant-card-actions:hover {
-      opacity: 1;
-      transform: translate(0, 15px);
-      transition: opacity 150ms linear, position 150ms linear, transform 150ms linear;
-    }
-
-    .ant-card-actions>li {
-      margin: -20px 0 0 0;
-      border-right: 0;
-
-      i {
-
-        vertical-align: middle;
-        height: 40px;
-        width: 40px;
-        background-color: #fff;
-        border-radius: 24px;
-      }
-
-      svg {
-        height: 20px;
-        width: 20px;
-        height: 100%;
-        vertical-align: middle;
-      }
-    }
-  }
-}
-
-.postAvatar {
-  position: absolute;
-  left: -8px;
-  top: -8px;
-  display: flex;
-}
-
-.titleUser {
-  display: flex;
-  font-family: 'Poppins', sans-serif;
-  margin: 0 0 0 50px;
-}
-
-.textAgo {
-  display: flex;
-  font-size: 10px;
-  margin: 0 0 0 53px;
-}
-
-.PostTags {
-  float: right;
-  color: rgb(249, 179, 64);
-  width: 100%;
-  z-index: 10;
-
-  i {
-    float: right;
-    margin: -0 6px 0 0;
-    ;
-    font-size: 17px;
-  }
-}
-
-.titleWrapper {
-  display: flex;
-
-  h4 {
-    cursor: pointer;
-  }
-}

src/components/UserProfile/styles.less

@@ -121,7 +121,7 @@
 
   .content {
     font-family: "Poppins", sans-serif;
-    color: @text-color-secondary;
+    color: @text-color-Overlay;
     width: 100%;
 
     .contentTitle {

src/components/YulioID/index.js

@@ -1,240 +0,0 @@
-import React, { Component } from 'react'
-import { connect } from 'dva'
-import { Form, Icon as LegacyIcon } from '@ant-design/compatible'
-
-import { Button, Input, Drawer } from 'antd'
-import * as app from 'app'
-import * as Icons from '@ant-design/icons'
-
-import styles from './index.less'
-
-const FormItem = Form.Item
-
-@connect(({ loading }) => ({ loading }))
-@Form.create()
-class YulioID extends Component {
-  constructor(props) {
-    super(props)
-    this.state = {
-      // Drawers Visibility (Default on False)
-      MainLoginVisible: true,
-      ShowLoading: false,
-      Answered: false,
-      transition: false,
-    }
-  }
-  // Handlers & others
-  handleUsername(text) {
-    this.setState({ RawUsername: text.target.value })
-  }
-  handlePassword(text) {
-    this.setState({ RawPassword: text.target.value })
-  }
-  handleRetry = () => {
-    this.setState({ ShowLoading: false, StateException: false, StateIcon: '' })
-  }
-  handleEnter = e => {
-    this.handleLogin()
-  }
-
-  handleLogin = () => {
-    var prefix = '[YID]: '
-    const { RawUsername, RawPassword } = this.state
-    var EncPassword = btoa(RawPassword)
-    var EncUsername = btoa(RawUsername)
-
-    if (!EncUsername || !EncPassword) {
-      var message = 'Incomplete information!'
-      app.yconsole.log(prefix, message)
-    }
-
-    if (EncUsername && EncPassword) {
-      this.setState({ ShowLoading: true, StateMessage: 'Wait a sec...' })
-      if (app.AppSettings.InfiniteLogin == true) {
-        app.yconsole.log(prefix, 'InfiniteLogin is enabled! Disabled getAuth')
-      } else {
-        app.yconsole.log(prefix, 'Initialising login process...')
-        const payload = { EncUsername, EncPassword }
-        app.app_session.login((err, res) => {
-          this.handleResponse(res)
-        }, payload)
-      }
-    }
-  }
-
-  handleResponse = response => {
-    if (response == '200') {
-      app.LoginPage.transitionToogle()
-      this.setState({
-        StateIcon: 'login',
-        StateMessage: 'Wait a sec...',
-        StateException: false,
-      })
-      
-    }
-    if (response == '400') {
-      this.setState({
-        StateIcon: 'exclamation-circle',
-        StateMessage: 'Invalid credentials',
-        StateException: true,
-      })
-    }
-    if (response == '404') {
-      this.setState({
-        StateIcon: 'exclamation-circle',
-        StateMessage: 'Invalid Data',
-        StateException: true,
-      })
-    }
-    if (response == '500') {
-      this.setState({
-        StateIcon: 'cluster',
-        StateMessage: 'Server Error',
-        StateException: true,
-      })
-    }
-  }
-
-  render() {
-    const { visible } = this.props
-    const { getFieldDecorator } = this.props.form
-    const { ShowLoading, StateIcon, StateMessage, StateException } = this.state
-
-    return (
-      <div className={styles.loginWrapper}>
-        <Drawer
-          width="100%"
-          mask={false}
-          getContainer={false}
-
-          closable={false}
-          visible={visible}
-          className={styles.loginWrapper}
-        >
-          <div className={styles.preheader}>
-            <h6>
-              <img src={'https://api.ragestudio.net/id.svg'} /> YulioID&trade;
-            </h6>
-          </div>
-          <main className={styles.mainlp}>
-            <form className={styles.formlogin}>
-              {ShowLoading ? (
-                <div style={{ height: '329px' }}>
-                  <div className={styles.spinner__wrapper} id="loadingspn">
-                    {StateIcon ? (
-                      <LegacyIcon
-                        type={StateIcon}
-                        className={
-                          StateException
-                            ? styles.StateIcon_exception
-                            : styles.StateIcon
-                        }
-                      />
-                    ) : (
-                      <LegacyIcon
-                        type="loading"
-                        style={{ fontSize: 24, margin: '13px' }}
-                        spin
-                      />
-                    )}
-                    <div>
-                      <br />
-                      <br />
-                      <br />
-                      <div className={styles.resultbox}>
-                        <h6> {StateMessage} </h6>
-                        {StateException ? (
-                          <div className={styles.retryBTN}>
-                            <Button
-                              style={{ width: '270px' }}
-                              type="dashed"
-                              onClick={() => this.handleRetry()}
-                            >
-                              Retry
-                            </Button>
-                          </div>
-                        ) : null}
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              ) : (
-                <div>
-                  <div className={styles.input__wrapper}>
-                    <label className={styles.labelform}>
-                      <LegacyIcon type="user" style={{ fontSize: '15px' }} />{' '}
-                      Username
-                    </label>
-                    <FormItem>
-                      {getFieldDecorator('Username', {
-                        rules: [{ required: true }],
-                      })(
-                        <Input
-                          onPressEnter={this.handleEnter}
-                          className={styles.inputform}
-                          type="text"
-                          placeholder="Username"
-                          onChange={text => {
-                            this.handleUsername(text)
-                          }}
-                        />
-                      )}
-                    </FormItem>
-                  </div>
-                  <div className={styles.input__wrapper}>
-                    <label className={styles.labelform}>
-                      <LegacyIcon type="unlock" style={{ fontSize: '15px' }} />{' '}
-                      Password
-                    </label>
-                    <FormItem>
-                      {getFieldDecorator('Password', {
-                        rules: [{ required: true }],
-                      })(
-                        <Input.Password
-                          onPressEnter={this.handleEnter}
-                          className={styles.inputform}
-                          placeholder="Password"
-                          onChange={text => {
-                            this.handlePassword(text)
-                          }}
-                        />
-                      )}
-                    </FormItem>
-                  </div>
-                  <div style={{ margin: 'auto' }}>
-                    <a
-                      className={styles.buttonlp}
-                      id="login"
-                      onClick={this.handleLogin}
-                    >
-                      Login
-                    </a>
-                  </div>
-                  <h2
-                    style={{
-                      textAlign: 'center',
-                      margin: '8px',
-                      color: '#666',
-                    }}
-                  >
-                    Or
-                  </h2>
-                  <div className={styles.moreActions}>
-                    <Button type="dashed">
-                      <Icons.QuestionCircleOutlined /> Forgotten password
-                    </Button>
-                    <Button type="dashed">
-                      <Icons.UserAddOutlined /> Create an account
-                    </Button>
-                  </div>
-                </div>
-              )}
-            </form>
-          </main>
-        </Drawer>
-      </div>
-    )
-  }
-}
-
-export default YulioID

src/components/YulioID/index.less

@@ -1,485 +0,0 @@
-  @import '~themes/index.less';
-
-  .loginWrapper {
-    :global {
-      .ant-drawer-right.ant-drawer-open.no-mask {
-        right: 1px;
-        -ms-transform: translateX(1px);
-        transform: translateX(1px);
-        width: 100%;
-      }
-
-      .ant-drawer-right.ant-drawer-open .ant-drawer-content-wrapper {
-        width: 100%;
-        border-radius: 20px 0 0 20px;
-      }
-
-      .ant-drawer-body {
-        height: 100%;
-      }
-
-      .ant-drawer {
-        box-shadow: none;
-        border-radius: 20px 0 0 20px;
-        max-width: 512px;
-        width: 100%;
-      }
-
-      .ant-drawer-content {
-        background: #ffffff9f;
-        border-radius: 20px 0 0 20px;
-      }
-    }
-  }
-
-  .StateIcon {
-    font-size: 24px;
-    margin: 13px;
-  }
-
-  .StateIcon_exception {
-    font-size: 24px;
-    margin: 13px;
-    color: red !important;
-
-    :global {
-      i {
-        color: red !important;
-
-      }
-    }
-  }
-
-  .mainlp {
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    display: flex;
-    width: 100%;
-    word-break: keep-all;
-
-    color: @foregroundColor;
-    text-align: left;
-  }
-
-  .mainlp .sectionlp {
-    border: 1px solid @accentColor;
-    position: relative;
-    padding: 40px 40px 50px;
-  }
-
-  .mainlp .sectionlp>h6 {
-    color: @accentColor;
-    background: @canvasColor;
-    position: absolute;
-    top: -10px;
-    left: 20px;
-    padding: 0 10px;
-  }
-
-  .mainlp .sectionlp .h6lp.subheader {
-    color: @grayColor;
-    margin-top: 20px;
-    margin-bottom: 20px;
-    width: 100%;
-  }
-
-  @media (max-width: 992px) {
-    section:not(:last-child) {
-      border-width: 0 0 1px;
-    }
-
-    section:last-child {
-      border-width: 0;
-    }
-  }
-
-
-
-
-  .buttons {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-  }
-
-  .buttons>* {
-    flex: 1 1 calc(50% - 20px);
-    margin-top: 20px;
-  }
-
-  .buttons>*:nth-child(odd) {
-    margin-right: 20px;
-  }
-
-  a.buttonlp,
-  input.buttonlp,
-  .buttonlp {
-    outline: none;
-    width: 100%;
-    text-align: center;
-    display: inline-block;
-    border: none;
-    font: 500 16px/1 "Poppins", sans-serif;
-    padding: 20px;
-    cursor: pointer;
-    border-radius: @borderRadius;
-    background: @primaryColor;
-    color: @backgroundColor;
-    position: relative;
-    top: 0;
-    transition: 0.2s ease;
-  }
-
-  a.buttonlp:hover,
-  a.buttonlp.hover,
-  input.buttonlp:hover,
-  input.buttonlp.hover,
-  .buttonlp:hover,
-  .buttonlp.hover {
-    top: -3px;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
-  }
-
-  a.buttonlp:active,
-  a.buttonlp.active,
-  input.buttonlp:active,
-  .input.buttonlp.active,
-  .buttonlp:active,
-  .buttonlp.active {
-    background: @primaryShade4;
-    outline: none;
-    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-    top: 0;
-  }
-
-  a.buttonlp.disabled,
-  input.buttonlp.disabled,
-  .buttonlp.disabled {
-    opacity: 0.4;
-    user-select: none;
-    pointer-events: none;
-  }
-
-  a.buttonlp.medium,
-  input.buttonlp.medium,
-  .buttonlp.medium {
-    padding: 15px 18px;
-    width: auto;
-  }
-
-  a.buttonlp.small,
-  input.buttonlp.small,
-  .buttonlp.small {
-    padding: 10px 12px;
-    width: auto;
-    font-size: 14px;
-    font-weight: 500;
-  }
-
-  a.buttonlp.secondary,
-  input.buttonlp.secondary,
-  .buttonlp.secondary {
-    background: @secondaryColor;
-  }
-
-  a.buttonlp.secondary:active,
-  a.buttonlp.secondary:focus,
-  a.buttonlp.secondary.active,
-  input.buttonlp.secondary:active,
-  input.buttonlp.secondary:focus,
-  input.buttonlp.secondary.active,
-  .buttonlp.secondary:active,
-  .buttonlp.secondary:focus,
-  .buttonlp.secondary.active {
-    background: @secondaryShade4;
-    outline: none;
-  }
-
-  a.buttonlp.accent,
-  input.buttonlp.accent,
-  .buttonlp.accent {
-    background: @accentColor;
-  }
-
-  a.buttonlp.accent:active,
-  a.buttonlp.accent:focus,
-  a.buttonlp.accent.active,
-  input.buttonlp.accent:active,
-  input.buttonlp.accent:focus,
-  input.buttonlp.accent.active,
-  .buttonlp.accent:active,
-  .buttonlp.accent:focus,
-  .buttonlp.accent.active {
-    background: @accentShade4;
-  }
-
-  a.buttonlp.accent2,
-  input.buttonlp.accent2,
-  .buttonlp.accent2 {
-    background: @accent2Color;
-  }
-
-  a.buttonlp.accent2:active,
-  a.buttonlp.accent2:focus,
-  a.buttonlp.accent2.active,
-  input.buttonlp.accent2:active,
-  input.buttonlp.accent2:focus,
-  input.buttonlp.accent2.active,
-  .buttonlp.accent2:active,
-  .buttonlp.accent2:focus,
-  .buttonlp.accent2.active {
-    background: @accent2Shade4;
-  }
-
-  a.buttonlp.accent3,
-  input.buttonlp.accent3,
-  .buttonlp.accent3 {
-    background: @accent3Color;
-  }
-
-  a.buttonlp.accent3:active,
-  a.buttonlp.accent3:focus,
-  a.buttonlp.accent3.active,
-  input.buttonlp.accent3:active,
-  input.buttonlp.accent3:focus,
-  input.buttonlp.accent3.active,
-  .buttonlp.accent3:active,
-  .buttonlp.accent3:focus,
-  .buttonlp.accent3.active {
-    background: @accent3Shade4;
-  }
-
-  /*inputs*/
-  .input__wrapper {
-    margin-bottom: 10px;
-
-    :global {
-      .ant-col {
-        width: 100%;
-      }
-    }
-  }
-
-  .inputRG__wrapper {
-    margin-bottom: 0px;
-  }
-
-  .labelform {
-    font-weight: 500;
-    display: block;
-    margin-bottom: 5px;
-  }
-
-  .inputform,
-  select,
-  textarea {
-    height: 50px;
-    font-size: 16px;
-    border: 2px solid @neutralShade3;
-    width: 100%;
-    padding: 12px;
-    font-family: "Poppins";
-    border-radius: @borderRadius;
-    color: @foregroundColor;
-    background: @backgroundColor;
-  }
-
-  .inputform:focus,
-  .inputform.active,
-  select:focus,
-  select.active,
-  textarea:focus,
-  textarea.active {
-    outline: none;
-    border-color: @primaryColor;
-  }
-
-  .inputform:disabled,
-  select:disabled,
-  textarea:disabled {
-    cursor: not-allowed;
-    background: @neutralShade1;
-    opacity: 0.6;
-  }
-
-  Input .inputPasswordform {
-    height: 50px;
-    font-size: 16px;
-    border: 2px solid @neutralShade3;
-    width: 100%;
-    padding: 12px;
-    font-family: "Poppins";
-    border-radius: @borderRadius;
-    color: @foregroundColor;
-    background: @backgroundColor;
-  }
-
-  Input .inputPasswordform:focus {
-    outline: none;
-    border-color: @primaryColor;
-  }
-
-  .inputform.input {
-    height: 56px;
-    font-size: 18px;
-    padding: 15px;
-  }
-
-
-  /*spinner*/
-  .spinner+.labellp {
-    font-size: 14px;
-    font-weight: 500;
-    margin-top: 8px;
-    display: inline-block;
-    text-transform: uppercase;
-    color: @primaryShade4;
-  }
-
-  .spinner1 .spinner {
-    max-width: 50px;
-    margin: auto;
-    height: 20px;
-    position: relative;
-  }
-
-  .spinner1 .spinner:after {
-    content: "";
-    position: absolute;
-    width: 20px;
-    height: 20px;
-    left: -10%;
-    background: @primaryColor;
-    animation: spinnerLeftRight 1s infinite;
-  }
-
-  .spinner1 .spinner:before {
-    content: "";
-    position: absolute;
-    width: 20px;
-    height: 20px;
-    left: -10%;
-    background: @primaryShade2;
-    opacity: 1;
-    animation: spinnerLeftRight 1s infinite 0.06s;
-  }
-
-  @keyframes spinnerLeftRight {
-    0% {
-      left: 85%;
-    }
-
-    50% {
-      left: -10%;
-    }
-
-    100% {
-      left: 85%;
-    }
-  }
-
-
-
-  .formlogin {
-    width: 95%;
-    height: auto;
-    border-radius: 10px;
-    padding: 30px;
-    box-shadow: 0 3px 15px rgba(51, 51, 51, 0.2);
-    background: #ffffff44;
-    margin: 20px 10px 20px 10px;
-    position: relative;
-    overflow: hidden;
-    vertical-align: middle;
-  }
-
-  .formlogin .checkbox {
-    margin-bottom: 30px;
-  }
-
-  .formlogin .spinner__wrapper {
-    place-items: center;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    left: 0;
-    top: 0;
-    background: rgba(255, 255, 255, 0.85);
-
-  }
-
-
-  .preheader {
-    position: relative;
-    top: 0;
-
-    h1 {
-      font: 700 48px "Nunito", sans-serif;
-      text-align: center;
-      margin-bottom: 10px;
-    }
-
-    h6 {
-      padding: 3em 0 0 0;
-      line-height: 1px;
-      display: flex;
-      font: 500 16px/1 "Poppins", sans-serif;
-      text-transform: uppercase;
-
-      img {
-        vertical-align: middle;
-        height: 17px;
-      }
-    }
-  }
-
-  .moreActions {
-    display: flex;
-    margin: auto;
-    align-content: center;
-    position: relative;
-    width: 100%;
-
-    :global {
-      .ant-btn {
-        margin: auto;
-      }
-    }
-  }
-
-  @media (max-width: 472px) {
-    .moreActions {
-      display: grid;
-      align-content: center;
-      position: relative;
-      width: 100%;
-
-      :global {
-        .ant-btn {
-          margin: 5px;
-        }
-      }
-    }
-  }
-
-  .resultbox {
-    h6 {
-      font-family: "Poppins", sans-serif;
-      text-align: center;
-      font-size: 16px;
-      margin: auto;
-      vertical-align: middle;
-    }
-
-    .retryBTN {
-      text-align: center;
-      width: 100%;
-      position: absolute;
-      bottom: 0;
-      margin: auto;
-      vertical-align: bottom;
-    }
-
-    margin: auto;
-  }

src/components/index.js

@@ -3,7 +3,6 @@
 // Helpers & Misc
 import CustomIcons from './CustomIcons'
 import Loader from './Loader/Loader.js'
-import ScrollBar from './ScrollBar'
 import App_about from './App_about'
 import * as Feather from 'feather-reactjs'
 
@@ -15,7 +14,6 @@ import PageTransition from './PageTransition'
 // User Components
 import UserBadges from './UserBadges'
 import UserProfile from './UserProfile'
-import SearchCard from './SearchCard'
 
 // Post Components
 import MediaPlayer from './MediaPlayer'
@@ -31,12 +29,10 @@ export {
   MediaPlayer,
   UserBadges,
   PageTransition,
-  SearchCard,
   HeaderSearch,
   UserProfile,
   MyLayout,
   Loader,
-  ScrollBar,
   PostCard,
   PostCreator,
   CustomIcons,

src/layouts/PrimaryLayout.js

@@ -15,12 +15,11 @@ import classnames from 'classnames'
 
 import * as app from 'app'
 import * as antd from 'antd'
-import * as Icons from '@ant-design/icons'
 
 import styles from './PrimaryLayout.less'
 
 const { Content } = antd.Layout
-const { Sider, Control, Secondary, WindowAppBar } = MyLayout
+const { Sider, Control, Overlay, WindowAppBar } = MyLayout
 
 @withRouter
 @connect(({ app, loading }) => ({ app, loading }))
@@ -82,7 +81,7 @@ class PrimaryLayout extends React.Component {
       },
     }
 
-    const SecondaryProps = {
+    const OverlayProps = {
       userData,
       isMobile,
     }
@@ -109,7 +108,7 @@ class PrimaryLayout extends React.Component {
               </PageTransition>
             </div>
 
-            <Secondary {...SecondaryProps} />
+            <Overlay {...OverlayProps} />
           </antd.Layout>
       </React.Fragment>
     )

src/pages/g/$group/index.js

@@ -1,99 +0,0 @@
-import React, { PureComponent } from 'react'
-import { pathMatchRegexp } from 'utils'
-import { SearchCard } from 'components'
-import styles from './styles.less'
-import * as app from 'app'
-import * as antd from 'antd'
-import * as Icons from '@ant-design/icons'
-import Icon from '@ant-design/icons'
-
-class GroupIndexer extends PureComponent {
-  constructor(props) {
-    super(props),
-      (this.state = {
-        SearchResult: '',
-        loading: true,
-      })
-  }
-  toogleLoading() {
-    this.setState({ loading: !this.state.loading })
-  }
-  componentDidMount() {
-    try {
-      const { location } = this.props
-      const matchSearch = pathMatchRegexp('/s/:id', location.pathname)
-      const parsed = matchSearch.shift()
-      const raw = parsed.toString()
-      const string = raw.replace('/s/', '')
-    } catch (err) {
-      app.notify.error(err)
-    }
-  }
-
-  EntryComponent = (t, source) => {
-    try {
-      return (
-        <div>
-          <antd.Typography.Title level={2}>
-            <Icons.TeamOutlined /> {t}{' '}
-          </antd.Typography.Title>
-          <div className={styles.searchEntry}>
-            <antd.List
-              grid={{
-                gutter: 16,
-                xs: 1,
-                sm: 2,
-                md: 4,
-                lg: 4,
-                xl: 6,
-                xxl: 3,
-              }}
-              dataSource={source}
-              renderItem={item => <SearchCard type={t} source={item} />}
-            />
-          </div>
-        </div>
-      )
-    } catch (error) {
-      return (
-        <center>
-          <h2>Render Error</h2>
-        </center>
-      )
-    }
-  }
-
-  render() {
-    const { location } = this.props
-    const matchSearch = pathMatchRegexp('/g/:id', location.pathname)
-
-    const parsed = matchSearch.shift()
-    const raw = parsed.toString()
-    const string = raw.replace('/g/', '')
-
-    if (matchSearch) {
-      return (
-        <div>
-          <h1 className={styles.searchHeader}>
-            <Icons.SearchOutlined /> Results of {string}{' '}
-          </h1>
-          <antd.Card>
-            <div className={styles.results}>
-              {this.state.loading
-                ? null
-                : this.renderResult(this.state.SearchResult)}
-            </div>
-          </antd.Card>
-        </div>
-      )
-    }
-
-    return (
-      <div>
-        <center> Render Error </center>
-      </div>
-    )
-  }
-}
-
-export default GroupIndexer

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

@@ -1,20 +0,0 @@
-@import '~themes/index.less';
-
-.searchHeader {
-  font-family: "Nunito", sans-serif;
-  font-size: 40px;
-  text-align: center;
-  margin-top: 7px;
-}
-
-.results {
-  padding: 10px;
-}
-
-.searchEntry {
-  :global {
-    .antd-card {
-      margin: auto;
-    }
-  }
-}

src/pages/p/$post/index.js

@@ -20,7 +20,7 @@ export default class Indexer_Post extends React.Component {
       if (err) {
         return false
       }
-      app.SecondarySwap.openPost(res)
+      app.OverlaySwap.openPost(res)
     }, payload)
   }
 

src/pages/s/$search/index.js

@@ -1,163 +0,0 @@
-import React, { PureComponent } from 'react'
-import { pathMatchRegexp } from 'utils'
-import { SearchCard } from 'components'
-import styles from './styles.less'
-import * as app from 'app'
-import * as antd from 'antd'
-import * as Icons from '@ant-design/icons'
-import Icon from '@ant-design/icons'
-
-class SearchPageIndexer extends PureComponent {
-  constructor(props) {
-    super(props),
-      (this.state = {
-        SearchResult: '',
-        loading: true,
-      })
-  }
-  toogleLoading() {
-    this.setState({ loading: !this.state.loading })
-  }
-  componentDidMount() {
-    try {
-      const { location } = this.props
-      const matchSearch = pathMatchRegexp('/s/:id', location.pathname)
-      const parsed = matchSearch.shift()
-      const raw = parsed.toString()
-      const string = raw.replace('/s/', '')
-
-      const payload = { key: string }
-      app.comty_search.keywords((err, res) => {
-        if (err) {
-          app.notify.error(err)
-        }
-        app.yconsole.log('Founded entries => ', JSON.parse(res))
-        this.setState({ SearchResult: res })
-        this.toogleLoading()
-      }, payload)
-    } catch (err) {
-      app.notify.error(err)
-    }
-  }
-
-  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) {
-          app.yconsole.log('Users => ', usersParsed)
-          return this.EntryComponent('Users', usersParsed)
-        }
-      }
-      const groups = () => {
-        if (groupsParsed.length >= 1) {
-          app.yconsole.log('Groups => ', groupsParsed)
-          return this.EntryComponent('Groups', groupsParsed)
-        }
-      }
-      const pages = () => {
-        if (pagesParsed.length >= 1) {
-          app.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 (
-        <div>
-          <antd.Typography.Title level={2}>
-            <Icons.TeamOutlined /> {t}{' '}
-          </antd.Typography.Title>
-          <div className={styles.searchEntry}>
-            <antd.List
-              grid={{
-                gutter: 16,
-                xs: 1,
-                sm: 2,
-                md: 4,
-                lg: 4,
-                xl: 6,
-                xxl: 3,
-              }}
-              dataSource={source}
-              renderItem={item => <SearchCard type={t} source={item} />}
-            />
-          </div>
-        </div>
-      )
-    } catch (error) {
-      return (
-        <center>
-          <h2>Render Error</h2>
-        </center>
-      )
-    }
-  }
-
-  render() {
-    const { location } = this.props
-    const matchSearch = pathMatchRegexp('/s/:id', location.pathname)
-
-    const parsed = matchSearch.shift()
-    const raw = parsed.toString()
-    const string = raw.replace('/s/', '')
-
-    if (matchSearch) {
-      app.yconsole.log(`Search matched!  ${location.pathname}`)
-      return (
-        <div>
-          <h1 className={styles.searchHeader}>
-            <Icons.SearchOutlined /> Results of {string}{' '}
-          </h1>
-          <antd.Card>
-            <div className={styles.results}>
-              {this.state.loading
-                ? null
-                : this.renderResult(this.state.SearchResult)}
-            </div>
-          </antd.Card>
-        </div>
-      )
-    }
-
-    return (
-      <div>
-        <center> Render Error </center>
-      </div>
-    )
-  }
-}
-
-export default SearchPageIndexer

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

@@ -1,20 +0,0 @@
-@import '~themes/index.less';
-
-.searchHeader {
-  font-family: "Nunito", sans-serif;
-  font-size: 40px;
-  text-align: center;
-  margin-top: 7px;
-}
-
-.results {
-  padding: 10px;
-}
-
-.searchEntry {
-  :global {
-    .antd-card {
-      margin: auto;
-    }
-  }
-}

src/themes/antd-design.less

@@ -38,14 +38,14 @@
   'Segoe UI Emoji', 'Segoe UI Symbol';
 @code-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
 @text-color: fade(@black, 65%);
-@text-color-secondary: fade(@black, 45%);
+@text-color-Overlay: fade(@black, 45%);
 @text-color-inverse: @white;
 @icon-color: inherit;
 @icon-color-hover: fade(@black, 75%);
 @heading-color: fade(#000, 85%);
 @heading-color-dark: fade(@white, 100%);
 @text-color-dark: fade(@white, 85%);
-@text-color-secondary-dark: fade(@white, 65%);
+@text-color-Overlay-dark: fade(@white, 65%);
 @text-selection-bg: @primary-color;
 @font-variant-base: tabular-nums;
 @font-feature-settings-base: 'tnum';
@@ -394,7 +394,7 @@
 @menu-highlight-color: @primary-color;
 @menu-item-active-bg: @item-active-bg;
 @menu-item-active-border-width: 3px;
-@menu-item-group-title-color: @text-color-secondary;
+@menu-item-group-title-color: @text-color-Overlay;
 @menu-icon-size: @font-size-base;
 @menu-icon-size-lg: @font-size-lg;
 
@@ -408,7 +408,7 @@
 @dark-menu-item-hover-bg: transparent;
 
 // dark theme
-@menu-dark-color: @text-color-secondary-dark;
+@menu-dark-color: @text-color-Overlay-dark;
 @menu-dark-bg: #2d2d2d;
 @menu-dark-arrow-color: #fff;
 @menu-dark-submenu-bg: #2d2d2d;
@@ -492,9 +492,9 @@
 @comment-nest-indent: 44px;
 @comment-font-size-base: @font-size-base;
 @comment-font-size-sm: @font-size-sm;
-@comment-author-name-color: @text-color-secondary;
+@comment-author-name-color: @text-color-Overlay;
 @comment-author-time-color: #ccc;
-@comment-action-color: @text-color-secondary;
+@comment-action-color: @text-color-Overlay;
 @comment-action-hover-color: #595959;
 
 // Tabs
@@ -523,7 +523,7 @@
 // BackTop
 // ---
 @back-top-color: #fff;
-@back-top-bg: @text-color-secondary;
+@back-top-bg: @text-color-Overlay;
 @back-top-hover-bg: @text-color;
 
 // Avatar
@@ -564,13 +564,13 @@
 
 // Breadcrumb
 // ---
-@breadcrumb-base-color: @text-color-secondary;
+@breadcrumb-base-color: @text-color-Overlay;
 @breadcrumb-last-item-color: @text-color;
 @breadcrumb-font-size: @font-size-base;
 @breadcrumb-icon-font-size: @font-size-base;
-@breadcrumb-link-color: @text-color-secondary;
+@breadcrumb-link-color: @text-color-Overlay;
 @breadcrumb-link-color-hover: @primary-5;
-@breadcrumb-separator-color: @text-color-secondary;
+@breadcrumb-separator-color: @text-color-Overlay;
 @breadcrumb-separator-margin: 0 @padding-xs;
 
 // Slider

src/themes/base/index.less

@@ -11,7 +11,7 @@
 @__Global_Components_transitions_dur: 150ms;
 
 @mamamia: #85858570;
-// FOR SECONDARY
+// FOR Overlay
 @__Global_SwapAnimDuration: 170ms;
 
 @transition-ease-in: all 0.3s ease-out;
@@ -87,7 +87,7 @@ body {
 
 
 // @media (min-width: 770px){
-//   >#secondary_layout{
+//   >#Overlay_layout{
 //     width: 0px!important;
 //   }
 // }
@@ -137,20 +137,20 @@ body {
 
 @primary_layout_content_padding: 35px 25px 15px 40px;
 
-// .secondary_*
-@__secondary_colider_width: 31.2vw;
-@secondary_wrapper_hidden_width: 22vw;
-@secondary_wrapper_showFull_width: 94.2%;
-@secondary_wrapper_showHalf_width: 35vw;
-@secondary_container_bg_background: #F8F6F8;
-@secondary_container_1_color: #201F23;
-@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);
+// .Overlay_*
+@__Overlay_colider_width: 31.2vw;
+@Overlay_wrapper_hidden_width: 22vw;
+@Overlay_wrapper_showFull_width: 94.2%;
+@Overlay_wrapper_showHalf_width: 35vw;
+@Overlay_container_bg_background: #F8F6F8;
+@Overlay_container_1_color: #201F23;
+@Overlay_container_2_color: #201F23;
+@Overlay_container_2_backgroud: #fff;
+@Overlay_container_1_btn_backgroud: #4c4c4c;
+@Overlay_container_1_btn_color: #fff;
+@Overlay_container_1_btn_shadow: 0px 0px 10px 0px rgba(255, 255, 255, 0.205);
 
-@secondary_container_1_padding: 30px 70px 30px 75px;
+@Overlay_container_1_padding: 30px 70px 30px 75px;
 @secondaty_container_2_padding: 20px 15px 15px 15px;
 
 // .left_sider*
@@ -189,12 +189,12 @@ body {
 @primaryShade3: #ffb184;
 @primaryShade4: #e88850;
 @primaryShade5: #d17a48;
-@secondaryColor: #ffcc67;
-@secondaryShade1: #fff1d5;
-@secondaryShade2: #ffde9e;
-@secondaryShade3: #ffd074;
-@secondaryShade4: #e8ba5e;
-@secondaryShade5: #ba954b;
+@OverlayColor: #ffcc67;
+@OverlayShade1: #fff1d5;
+@OverlayShade2: #ffde9e;
+@OverlayShade3: #ffd074;
+@OverlayShade4: #e8ba5e;
+@OverlayShade5: #ba954b;
 @accentColor: #4e5166;
 @accentShade1: #cecfd5;
 @accentShade2: #aeafb9;