refactor: rename containers from 'Default' to 'The', small fixes

src/App.js

@@ -9,7 +9,7 @@ const loading = (
 )
 
 // Containers
-const DefaultLayout = React.lazy(() => import('./containers/DefaultLayout'));
+const TheLayout = React.lazy(() => import('./containers/TheLayout'));
 
 // Pages
 const Login = React.lazy(() => import('./views/Pages/Login/Login'));
@@ -28,7 +28,7 @@ class App extends Component {
               <Route exact path="/register" name="Register Page" render={props => <Register {...props}/>} />
               <Route exact path="/404" name="Page 404" render={props => <Page404 {...props}/>} />
               <Route exact path="/500" name="Page 500" render={props => <Page500 {...props}/>} />
-              <Route path="/" name="Home" render={props => <DefaultLayout {...props}/>} />
+              <Route path="/" name="Home" render={props => <TheLayout {...props}/>} />
             </Switch>
           </React.Suspense>
       </HashRouter>

src/containers/DefaultAside.js → src/containers/TheAside.js

@@ -17,7 +17,7 @@ import {
 } from '@coreui/react'
 import { CIcon } from '@coreui/icons-react'
 
-const DefaultAside = () => {
+const TheAside = () => {
   const show = useSelector(state => state.asideShow)
   const dispatch = useDispatch()
   const setState = (state) => dispatch({type: 'set', asideShow: state})
@@ -239,4 +239,4 @@ const DefaultAside = () => {
   )
 }
 
-export default React.memo(DefaultAside)
+export default React.memo(TheAside)

src/containers/DefaultContent.js → src/containers/TheContent.js

@@ -15,7 +15,7 @@ const loading = (
   </div>
 )
 
-const DefaultContent = () => {
+const TheContent = () => {
   return (
     <main className="c-main">
       <CContainer fluid>
@@ -43,4 +43,4 @@ const DefaultContent = () => {
   )
 }
 
-export default React.memo(DefaultContent)
+export default React.memo(TheContent)

src/containers/DefaultFooter.js → src/containers/TheFooter.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { CFooter } from '@coreui/react'
 
-const DefaultFooter = () => {
+const TheFooter = () => {
   return (
     <CFooter fixed={false}>
       <div>
@@ -16,4 +16,4 @@ const DefaultFooter = () => {
   )
 }
 
-export default React.memo(DefaultFooter)
+export default React.memo(TheFooter)

src/containers/DefaultHeader.js → src/containers/TheHeader.js

@@ -17,14 +17,14 @@ import { CIcon } from '@coreui/icons-react'
 import routes from '../routes'
 
 import { 
-  DefaultHeaderDropdown,
-  DefaultHeaderDropdownMssg,
-  DefaultHeaderDropdownNotif,
-  DefaultHeaderDropdownTasks
+  TheHeaderDropdown,
+  TheHeaderDropdownMssg,
+  TheHeaderDropdownNotif,
+  TheHeaderDropdownTasks
 }  from './index'
 import logo from '../assets/img/brand/coreui-react-neg.svg'
 
-const DefaultHeader = () => {
+const TheHeader = () => {
   const dispatch = useDispatch()
   const asideShow = useSelector(state => state.asideShow)
   const sidebarShow = useSelector(state => state.sidebarShow)
@@ -68,10 +68,10 @@ const DefaultHeader = () => {
       </CHeaderNav>
 
       <CHeaderNav className="px-3">
-        <DefaultHeaderDropdownNotif/>
-        <DefaultHeaderDropdownTasks/>
-        <DefaultHeaderDropdownMssg/>
-        <DefaultHeaderDropdown/>
+        <TheHeaderDropdownNotif/>
+        <TheHeaderDropdownTasks/>
+        <TheHeaderDropdownMssg/>
+        <TheHeaderDropdown/>
         <CToggler
           inHeader
           className="d-md-down-none"
@@ -103,4 +103,4 @@ const DefaultHeader = () => {
   )
 }
 
-export default DefaultHeader
+export default TheHeader

src/containers/DefaultHeaderDropdown.js → src/containers/TheHeaderDropdown.js

@@ -9,7 +9,7 @@ import {
 } from '@coreui/react'
 import { CIcon } from '@coreui/icons-react'
 
-const DefaultHeaderDropdown = () => {
+const TheHeaderDropdown = () => {
   return (
     <CDropdown
       inNav
@@ -57,4 +57,4 @@ const DefaultHeaderDropdown = () => {
   )
 }
 
-export default DefaultHeaderDropdown
+export default TheHeaderDropdown

src/containers/DefaultHeaderDropdownMssg.js → src/containers/TheHeaderDropdownMssg.js

@@ -9,7 +9,7 @@ import {
 } from '@coreui/react'
 import { CIcon } from '@coreui/icons-react'
 
-const DefaultHeaderDropdownMssg = () => {
+const TheHeaderDropdownMssg = () => {
   const itemsCount = 4
   return (
     <CDropdown
@@ -124,4 +124,4 @@ const DefaultHeaderDropdownMssg = () => {
   )
 }
 
-export default DefaultHeaderDropdownMssg
+export default TheHeaderDropdownMssg

src/containers/DefaultHeaderDropdownNotif.js → src/containers/TheHeaderDropdownNotif.js

@@ -9,7 +9,7 @@ import {
 } from '@coreui/react'
 import { CIcon } from '@coreui/icons-react'
 
-const DefaultHeaderDropdownNotif = () => {
+const TheHeaderDropdownNotif = () => {
   const itemsCount = 5
   return (
     <CDropdown
@@ -67,4 +67,4 @@ const DefaultHeaderDropdownNotif = () => {
   )
 }
 
-export default DefaultHeaderDropdownNotif
+export default TheHeaderDropdownNotif

src/containers/DefaultHeaderDropdownTasks.js → src/containers/TheHeaderDropdownTasks.js

@@ -9,7 +9,7 @@ import {
 } from '@coreui/react'
 import { CIcon } from '@coreui/icons-react'
 
-const DefaultHeaderDropdownTasks = () => {
+const TheHeaderDropdownTasks = () => {
   const itemsCount = 5
   return (
     <CDropdown
@@ -56,4 +56,4 @@ const DefaultHeaderDropdownTasks = () => {
   )
 }
 
-export default DefaultHeaderDropdownTasks
+export default TheHeaderDropdownTasks

src/containers/TheLayout.js

@@ -0,0 +1,27 @@
+import React from 'react'
+import {
+  TheContent,
+  TheSidebar,
+  TheAside,
+  TheFooter,
+  TheHeader
+} from './index'
+
+const TheLayout = () => {
+
+  return (
+    <div className="c-app c-default-layout">
+      <TheSidebar/>
+      <TheAside/>
+      <div className="c-wrapper">
+        <TheHeader/>
+        <div className="c-body">
+          <TheContent/>
+        </div>
+        <TheFooter/>
+      </div>
+    </div>
+  )
+}
+
+export default TheLayout

src/containers/DefaultSidebar.js → src/containers/TheSidebar.js

@@ -21,7 +21,7 @@ import sygnet from '../assets/img/brand/coreui-signet-white.svg'
 // sidebar nav config
 import navigation from './_nav'
 
-const DefaultSidebar = () => {
+const TheSidebar = () => {
   const dispatch = useDispatch()
   const show = useSelector(state => state.sidebarShow)
 
@@ -59,4 +59,4 @@ const DefaultSidebar = () => {
   )
 }
 
-export default React.memo(DefaultSidebar)
+export default React.memo(TheSidebar)

src/containers/index.js

@@ -1,23 +1,23 @@
-import DefaultAside from './DefaultAside'
-import DefaultContent from './DefaultContent'
-import DefaultFooter from './DefaultFooter'
-import DefaultHeader from './DefaultHeader'
-import DefaultHeaderDropdown from './DefaultHeaderDropdown'
-import DefaultHeaderDropdownMssg from './DefaultHeaderDropdownMssg'
-import DefaultHeaderDropdownNotif from './DefaultHeaderDropdownNotif'
-import DefaultHeaderDropdownTasks from './DefaultHeaderDropdownTasks'
-import DefaultLayout from './DefaultLayout'
-import DefaultSidebar from './DefaultSidebar'
+import TheAside from './TheAside'
+import TheContent from './TheContent'
+import TheFooter from './TheFooter'
+import TheHeader from './TheHeader'
+import TheHeaderDropdown from './TheHeaderDropdown'
+import TheHeaderDropdownMssg from './TheHeaderDropdownMssg'
+import TheHeaderDropdownNotif from './TheHeaderDropdownNotif'
+import TheHeaderDropdownTasks from './TheHeaderDropdownTasks'
+import TheLayout from './TheLayout'
+import TheSidebar from './TheSidebar'
 
 export {
-  DefaultAside,
-  DefaultContent,
-  DefaultFooter,
-  DefaultHeader,
-  DefaultHeaderDropdown,
-  DefaultHeaderDropdownMssg,
-  DefaultHeaderDropdownNotif,
-  DefaultHeaderDropdownTasks,
-  DefaultLayout,
-  DefaultSidebar
+  TheAside,
+  TheContent,
+  TheFooter,
+  TheHeader,
+  TheHeaderDropdown,
+  TheHeaderDropdownMssg,
+  TheHeaderDropdownNotif,
+  TheHeaderDropdownTasks,
+  TheLayout,
+  TheSidebar
 }

src/index.js

@@ -3,11 +3,10 @@ import 'react-app-polyfill/stable';
 import './polyfill'
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
 
-import {freeSet, flagSet, brandSet} from '@coreui/icons';
+import { freeSet, flagSet, brandSet } from '@coreui/icons';
 import { logo } from './assets/icons/logo'
 
 import { Provider } from 'react-redux'

src/scss/style.scss

@@ -6,7 +6,3 @@
 
 // If you want to add something do it here
 @import "custom";
-
-// Spinkit
-$spinkit-spinner-color: $body-color;
-@import '~spinkit/scss/spinkit.scss';