refactor: update to CoreUI v4

src/App.js

@@ -9,7 +9,7 @@ const loading = (
 )
 
 // Containers
-const TheLayout = React.lazy(() => import('./containers/TheLayout'));
+const DefaultLayout = React.lazy(() => import('./layout/DefaultLayout'));
 
 // 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 => <TheLayout {...props}/>} />
+              <Route path="/" name="Home" render={props => <DefaultLayout {...props}/>} />
             </Switch>
           </React.Suspense>
       </HashRouter>

src/components/AppBreadcrumb.js

@@ -0,0 +1,52 @@
+import React from 'react'
+import { useLocation } from "react-router-dom";
+
+import routes from "../routes";
+
+import { CBreadcrumb, CBreadcrumbItem } from '@coreui/react-ts';
+
+const AppBreadcrumb = () => {
+  const currentLocation = useLocation().pathname
+
+  //array1.find(element => element > 10);
+  const getRouteName = (pathname, routes) => {
+    const currentRoute = routes.find(route => route.path === pathname)
+    return currentRoute.name
+  }
+
+  const getBreadcrumbs = (location) => {
+    const breadcrumbs = []
+    location.split('/').reduce((prev, curr, index, array) => {
+      const currentPathname = `${prev}/${curr}`
+      breadcrumbs.push({
+        'pathname': currentPathname,
+        'name': getRouteName(currentPathname, routes),
+        'active': index + 1 === array.length ? true : false
+      })
+      return currentPathname
+    })
+    return breadcrumbs
+  }
+
+  const breadcrumbs = getBreadcrumbs(currentLocation)
+
+  return (
+    <CBreadcrumb className="m-0">
+      <CBreadcrumbItem href="/">Home</CBreadcrumbItem>
+      {
+        breadcrumbs.map((breadcrumb, index) => {
+          return (
+            <CBreadcrumbItem
+              {...(breadcrumb.active ? { 'active': true } : { 'href': breadcrumb.pathname })}
+              key={index}
+            >
+              {breadcrumb.name}
+            </CBreadcrumbItem>
+          )
+        })
+      }
+    </CBreadcrumb>
+  )
+}
+
+export default React.memo(AppBreadcrumb)

src/components/AppFooter.js

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

src/components/AppHeader.js

@@ -1,29 +1,27 @@
 import React from "react";
 import { NavLink } from "react-router-dom";
 import { useSelector, useDispatch } from "react-redux";
-import { CToggler, CBreadcrumbRouter } from "@coreui/react";
 import {
   CContainer,
   CHeader,
   CHeaderBrand,
   CHeaderDivider,
   CHeaderNav,
+  CHeaderToggler,
   CNavLink,
   CNavItem,
 } from "@coreui/react-ts";
 import CIcon from "@coreui/icons-react";
 
-// routes config
-import routes from "../routes";
-
 import {
-  TheHeaderDropdown,
+  AppBreadcrumb,
-  TheHeaderDropdownMssg,
+  AppHeaderDropdown,
-  TheHeaderDropdownNotif,
+  AppHeaderDropdownMssg,
-  TheHeaderDropdownTasks,
+  AppHeaderDropdownNotif,
-} from "./index";
+  AppHeaderDropdownTasks,
+} from "../containers/index";
 
-const TheHeader = () => {
+const AppHeader = () => {
   const dispatch = useDispatch();
   const sidebarShow = useSelector((state) => state.sidebarShow);
 
@@ -44,12 +42,12 @@ const TheHeader = () => {
   return (
     <CHeader position="sticky" className="mb-4">
       <CContainer fluid>
-        <CToggler
+        <CHeaderToggler
           inHeader
           className="ms-md-3 d-lg-none"
           onClick={toggleSidebarMobile}
         />
-        <CToggler
+        <CHeaderToggler
           inHeader
           className="ms-3 d-md-down-none"
           onClick={toggleSidebar}
@@ -79,38 +77,18 @@ const TheHeader = () => {
         </CHeaderNav>
 
         <CHeaderNav>
-          <TheHeaderDropdownNotif />
+          <AppHeaderDropdownNotif />
-          <TheHeaderDropdownTasks />
+          <AppHeaderDropdownTasks />
-          <TheHeaderDropdownMssg />
+          <AppHeaderDropdownMssg />
-          <TheHeaderDropdown />
+          <AppHeaderDropdown />
         </CHeaderNav>
       </CContainer>
       <CHeaderDivider />
       <CContainer fluid>
-        <CBreadcrumbRouter
+        <AppBreadcrumb/>
-          className="border-0 c-subheader-nav m-0 px-0 px-md-3"
-          routes={routes}
-        />
-        {/* <CHeaderNav>
-          <CNavItem>
-            <CNavLink href="#">
-              <CIcon name="cil-speech" alt="Settings" />
-            </CNavLink>
-          </CNavItem>
-          <CNavItem>
-            <CNavLink to="/users" component={NavLink} activeClassName="active">
-              <CIcon name="cil-graph" alt="Dashboard" />&nbsp;Dashboard
-            </CNavLink>
-          </CNavItem>
-          <CNavItem>
-            <CNavLink href="#">
-              <CIcon name="cil-settings" alt="Settings" />&nbsp;Settings
-            </CNavLink>
-          </CNavItem>
-        </CHeaderNav> */}
       </CContainer>
     </CHeader>
   );
 };
 
-export default TheHeader;
+export default AppHeader

src/components/AppSidebar.js

@@ -1,63 +1,52 @@
 import React from 'react'
 import { useSelector, useDispatch } from 'react-redux'
-import {
-  // CCreateElement,
-  // CSidebarNavDivider,
-  // CSidebarNavTitle,
-  CSidebarMinimizer,
-  // CSidebarNavDropdown,
-  // CSidebarNavItem,
-} from '@coreui/react'
 
 import {
   CSidebar,
   CSidebarBrand,
   CSidebarNav,
+  CSidebarToggler,
   CCreateNavItem,
 } from '@coreui/react-ts'
 
 import CIcon from '@coreui/icons-react'
 
 // sidebar nav config
-import navigation from './_nav'
+import navigation from '../containers/_nav'
 
-const TheSidebar = () => {
+const AppSidebar = () => {
   const dispatch = useDispatch()
-  const show = useSelector(state => state.sidebarShow)
+  const unfoldable = useSelector(state => state.sidebarUnfoldable)
+  // const visible = useSelector(state => state.sidebarUnfoldable)
 
   return (
     <CSidebar
       position="fixed"
       selfHiding="md"
+      unfoldable={unfoldable}
+      // show={show}
       // onShowChange={(val) => dispatch({type: 'set', sidebarShow: val })}
     >
       <CSidebarBrand className="d-md-down-none" to="/">
         <CIcon
-          className="c-sidebar-brand-full"
+          className="sidebar-brand-full"
           name="logo-negative"
           height={35}
         />
         <CIcon
-          className="c-sidebar-brand-minimized"
+          className="sidebar-brand-narrow"
           name="sygnet"
           height={35}
         />
       </CSidebarBrand>
       <CSidebarNav>
-
         <CCreateNavItem
           items={navigation}
-          // components={{
-          //   CSidebarNavDivider,
-          //   CSidebarNavDropdown,
-          //   CSidebarNavItem,
-          //   CSidebarNavTitle
-          // }}
         />
       </CSidebarNav>
-      <CSidebarMinimizer className="c-d-md-down-none"/>
+      <CSidebarToggler className="c-d-md-down-none" onClick={() => dispatch({ type: 'set', sidebarUnfoldable: !unfoldable })}/>
     </CSidebar>
   )
 }
 
-export default React.memo(TheSidebar)
+export default React.memo(AppSidebar)

src/components/header/AppHeaderDropdown.js

@@ -11,7 +11,7 @@ import {
 } from '@coreui/react-ts'
 import CIcon from '@coreui/icons-react'
 
-const TheHeaderDropdown = () => {
+const AppHeaderDropdown = () => {
   return (
     <CDropdown
       variant="nav-item"
@@ -73,4 +73,4 @@ const TheHeaderDropdown = () => {
   )
 }
 
-export default TheHeaderDropdown
+export default AppHeaderDropdown

src/components/header/AppHeaderDropdownMssg.js

@@ -1,17 +1,16 @@
 import React from 'react'
 import {
+  CAvatar,
   CBadge,
   CDropdown,
   CDropdownItem,
   CDropdownMenu,
   CDropdownToggle,
+  CImage
 } from '@coreui/react-ts'
-import {
-  CImg
-} from '@coreui/react'
 import CIcon from '@coreui/icons-react'
 
-const TheHeaderDropdownMssg = () => {
+const AppHeaderDropdownMssg = () => {
   const itemsCount = 4
   return (
     <CDropdown
@@ -32,14 +31,7 @@ const TheHeaderDropdownMssg = () => {
         <CDropdownItem href="#">
           <div className="message">
             <div className="pt-3 me-3 float-start">
-              <div className="c-avatar">
+              <CAvatar image={'avatars/7.jpg'} status="success" />
-                <CImg
-                  src={'avatars/7.jpg'}
-                  className="c-avatar-img"
-                  alt="admin@bootstrapmaster.com"
-                />
-                <span className="c-avatar-status bg-success"></span>
-              </div>
             </div>
             <div>
               <small className="text-muted">John Doe</small>
@@ -57,14 +49,7 @@ const TheHeaderDropdownMssg = () => {
         <CDropdownItem href="#">
           <div className="message">
             <div className="pt-3 me-3 float-start">
-              <div className="c-avatar">
+              <CAvatar image={'avatars/6.jpg'} status="warning" />
-                <CImg
-                  src={'avatars/6.jpg'}
-                  className="c-avatar-img"
-                  alt="admin@bootstrapmaster.com"
-                />
-                <span className="c-avatar-status bg-warning"></span>
-              </div>
             </div>
             <div>
               <small className="text-muted">Jane Dovve</small>
@@ -79,14 +64,7 @@ const TheHeaderDropdownMssg = () => {
         <CDropdownItem href="#">
           <div className="message">
             <div className="pt-3 me-3 float-start">
-              <div className="c-avatar">
+              <CAvatar image={'avatars/5.jpg'} status="danger" />
-                <CImg
-                  src={'avatars/5.jpg'}
-                  className="c-avatar-img"
-                  alt="admin@bootstrapmaster.com"
-                />
-                <span className="c-avatar-status bg-danger"></span>
-              </div>
             </div>
             <div>
               <small className="text-muted">Janet Doe</small>
@@ -101,14 +79,7 @@ const TheHeaderDropdownMssg = () => {
         <CDropdownItem href="#">
           <div className="message">
             <div className="pt-3 me-3 float-start">
-              <div className="c-avatar">
+              <CAvatar image={'avatars/4.jpg'} status="info" />
-                <CImg
-                  src={'avatars/4.jpg'}
-                  className="c-avatar-img"
-                  alt="admin@bootstrapmaster.com"
-                />
-                <span className="c-avatar-status bg-info"></span>
-              </div>
             </div>
             <div>
               <small className="text-muted">Joe Doe</small>
@@ -125,4 +96,4 @@ const TheHeaderDropdownMssg = () => {
   )
 }
 
-export default TheHeaderDropdownMssg
+export default AppHeaderDropdownMssg

src/components/header/AppHeaderDropdownNotif.js

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

src/components/header/AppHeaderDropdownTasks.js

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

src/containers/TheContent.js

@@ -4,8 +4,7 @@ import {
   Route,
   Switch
 } from 'react-router-dom'
-import { CFade } from '@coreui/react'
+import { CContainer, CFade } from '@coreui/react-ts'
-import { CContainer } from '@coreui/react-ts'
 
 // routes config
 import routes from '../routes'
@@ -19,7 +18,7 @@ const loading = (
 const TheContent = () => {
   return (
     <main className="c-main">
-      <CContainer fluid>
+      <CContainer>
         <Suspense fallback={loading}>
           <Switch>
             {routes.map((route, idx) => {

src/containers/_nav.js

@@ -115,12 +115,6 @@ const _nav =  [
         anchor: 'Progress',
         to: '/base/progress-bar',
       },
-      {
-        _component: 'CNavItem',
-        as: NavLink,
-        anchor: 'Switches',
-        to: '/base/switches',
-      },
       {
         _component: 'CNavItem',
         as: NavLink,

src/containers/index.js

@@ -1,21 +1,23 @@
+import AppBreadcrumb from '../components/AppBreadcrumb'
 import TheContent from './TheContent'
-import TheFooter from './TheFooter'
+import AppFooter from '../components/AppFooter'
-import TheHeader from './TheHeader'
+import AppHeader from '../components/AppHeader'
-import TheHeaderDropdown from './TheHeaderDropdown'
+import AppHeaderDropdown from '../components/header/AppHeaderDropdown'
-import TheHeaderDropdownMssg from './TheHeaderDropdownMssg'
+import AppHeaderDropdownMssg from '../components/header/AppHeaderDropdownMssg'
-import TheHeaderDropdownNotif from './TheHeaderDropdownNotif'
+import AppHeaderDropdownNotif from '../components/header/AppHeaderDropdownNotif'
-import TheHeaderDropdownTasks from './TheHeaderDropdownTasks'
+import AppHeaderDropdownTasks from '../components/header/AppHeaderDropdownTasks'
-import TheLayout from './TheLayout'
+import DefaultLayout from '../layout/DefaultLayout'
-import TheSidebar from './TheSidebar'
+import AppSidebar from '../components/AppSidebar'
 
 export {
+  AppBreadcrumb,
   TheContent,
-  TheFooter,
+  AppFooter,
-  TheHeader,
+  AppHeader,
-  TheHeaderDropdown,
+  AppHeaderDropdown,
-  TheHeaderDropdownMssg,
+  AppHeaderDropdownMssg,
-  TheHeaderDropdownNotif,
+  AppHeaderDropdownNotif,
-  TheHeaderDropdownTasks,
+  AppHeaderDropdownTasks,
-  TheLayout,
+  DefaultLayout,
-  TheSidebar
+  AppSidebar
 }

src/layout/DefaultLayout.js

@@ -1,25 +1,25 @@
 import React from 'react'
 import {
   TheContent,
-  TheSidebar,
+  AppSidebar,
-  TheFooter,
+  AppFooter,
-  TheHeader
+  AppHeader
-} from './index'
+} from '../containers/index'
 
-const TheLayout = () => {
+const DefaultLayout = () => {
 
   return (
     <div>
-      <TheSidebar/>
+      <AppSidebar/>
       <div className="wrapper d-flex flex-column min-vh-100 bg-light">
-        <TheHeader/>
+        <AppHeader/>
         <div className="body">
           <TheContent/>
         </div>
-        <TheFooter/>
+        <AppFooter/>
       </div>
     </div>
   )
 }
 
-export default TheLayout
+export default DefaultLayout

src/reusable/DocsLink.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { CLink } from '@coreui/react'
+import { CLink } from '@coreui/react-ts'
 
 const DocsLink = props => {
   const {

src/routes.js

@@ -16,7 +16,6 @@ const Navs = React.lazy(() => import('./views/base/navs/Navs'));
 const Paginations = React.lazy(() => import('./views/base/paginations/Pagnations'));
 const Popovers = React.lazy(() => import('./views/base/popovers/Popovers'));
 const ProgressBar = React.lazy(() => import('./views/base/progress-bar/ProgressBar'));
-const Switches = React.lazy(() => import('./views/base/switches/Switches'));
 
 const Tabs = React.lazy(() => import('./views/base/tabs/Tabs'));
 const Tooltips = React.lazy(() => import('./views/base/tooltips/Tooltips'));
@@ -60,7 +59,6 @@ const routes = [
   { path: '/base/paginations', name: 'Paginations', component: Paginations },
   { path: '/base/popovers', name: 'Popovers', component: Popovers },
   { path: '/base/progress-bar', name: 'Progress Bar', component: ProgressBar },
-  { path: '/base/switches', name: 'Switches', component: Switches },
   { path: '/base/tables', name: 'Tables', component: Tables },
   { path: '/base/tabs', name: 'Tabs', component: Tabs },
   { path: '/base/tooltips', name: 'Tooltips', component: Tooltips },

src/views/base/breadcrumbs/Breadcrumbs.js

@@ -9,9 +9,7 @@ import {
   CRow,
   CLink,
 } from "@coreui/react-ts";
-import { CBreadcrumbRouter } from '@coreui/react'
 import { DocsLink } from "src/reusable";
-import routes from "../../../routes";
 
 const Breadcrumbs = () => {
   return (
@@ -23,9 +21,6 @@ const Breadcrumbs = () => {
             <DocsLink name="CBreadcrumb" />
           </CCardHeader>
           <CCardBody>
-            <h6>CBreadcrumbRouter wrapper component</h6>
-            <CBreadcrumbRouter routes={routes} />
-            <h6>Manual</h6>
             <CBreadcrumb>
               <CBreadcrumbItem>
                 <CLink href="#">Home</CLink>

src/views/base/cards/Cards.js

@@ -6,11 +6,9 @@ import {
   CCardFooter,
   CCardHeader,
   CCol,
+  CFormCheck,
   CRow,
-  CCollapse,
-  CLink
 } from  '@coreui/react-ts'
-import { CFade, CSwitch } from '@coreui/react'
 import CIcon from '@coreui/icons-react'
 import { DocsLink } from 'src/reusable'
 
@@ -62,7 +60,7 @@ const Cards = () => {
           <CCard className="mb-4">
             <CCardHeader>
               Card with switch
-              <CSwitch className={'float-end mb-0'} color={'info'} defaultChecked size={'sm'} tabIndex="0" />
+              <CFormCheck switch className="float-end" id="formSwitchCheckDefault"/>
             </CCardHeader>
             <CCardBody>
               Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut

src/views/base/collapses/Collapses.js

@@ -7,11 +7,9 @@ import {
   CCardHeader,
   CCol,
   CCollapse,
+  CFade,
   CRow
 } from '@coreui/react-ts';
-import {
-  CFade,
-} from '@coreui/react';
 import { DocsLink } from 'src/reusable'
 
 const Collapses = () => {

src/views/base/forms/BasicForms.js

@@ -1,10 +1,4 @@
 import React from 'react'
-import {
-  CFade,
-  CValidFeedback,
-  CInvalidFeedback,
-  CSwitch
-} from '@coreui/react'
 import {
   CButton,
   CCard,
@@ -17,9 +11,11 @@ import {
   CDropdownItem,
   CDropdownMenu,
   CDropdownToggle,
+  CFade,
   CForm,
   CFormCheck,
   CFormControl,
+  CFormFeedback,
   CFormLabel,
   CFormText,
   CFormSelect,
@@ -181,7 +177,7 @@ const BasicForms = () => {
                   </CCol>
                   <CCol xs="12" md="9">
                     <CFormControl type="email" id="email-input" name="email-input" placeholder="Enter Email" autoComplete="email"/>
-                    <CFormText className="help-block">Please enter your email</CFormText>
+                    <CFormText>Please enter your email</CFormText>
                   </CCol>
                 </CRow>
                 <CRow className="mb-3">
@@ -190,7 +186,7 @@ const BasicForms = () => {
                   </CCol>
                   <CCol xs="12" md="9">
                     <CFormControl type="password" id="password-input" name="password-input" placeholder="Password" autoComplete="new-password" />
-                    <CFormText className="help-block">Please enter a complex password</CFormText>
+                    <CFormText>Please enter a complex password</CFormText>
                   </CCol>
                 </CRow>
                 <CRow className="mb-3">
@@ -288,43 +284,10 @@ const BasicForms = () => {
                     Switch checkboxes
                   </CCol>
                   <CCol sm="9">
-                    <CSwitch
+                    <CFormCheck switch label="Default switch checkbox input" id="formSwitchCheckDefault"/>
-                      className="me-1"
+                    <CFormCheck switch label="Checked switch checkbox input" id="formSwitchCheckChecked" defaultChecked/>
-                      color="primary"
+                    <CFormCheck switch label="Disabled switch checkbox input" id="formSwitchCheckDisabled" disabled/>
-                      defaultChecked
+                    <CFormCheck switch label="Disabled checked switch checkbox input" id="formSwitchCheckCheckedDisabled" defaultChecked disabled/>
-                    />
-                    <CSwitch
-                      className="me-1"
-                      color="success"
-                      defaultChecked
-                      variant="outline"
-                    />
-                    <CSwitch
-                      className="me-1"
-                      color="warning"
-                      defaultChecked
-                      variant="opposite"
-                    />
-                    <CSwitch
-                      className="me-1"
-                      color="danger"
-                      defaultChecked
-                      shape="rounded-pill"
-                    />
-                    <CSwitch
-                      className="me-1"
-                      color="info"
-                      defaultChecked
-                      shape="rounded-pill"
-                      variant="outline"
-                    />
-                    <CSwitch
-                      className="me-1"
-                      color="dark"
-                      defaultChecked
-                      shape="rounded-pill"
-                      variant="opposite"
-                    />
                   </CCol>
                 </CRow>
                 <CRow className="mb-3">
@@ -466,7 +429,7 @@ const BasicForms = () => {
                   </CCol>
                   <CCol xs="12" md="9">
                     <CFormControl type="email" id="hf-email" name="hf-email" placeholder="Enter Email..." autoComplete="email" />
-                    <CFormText className="help-block">Please enter your email</CFormText>
+                    <CFormText>Please enter your email</CFormText>
                   </CCol>
                 </CRow>
                 <CRow className="mb-3">
@@ -475,7 +438,7 @@ const BasicForms = () => {
                   </CCol>
                   <CCol xs="12" md="9">
                     <CFormControl type="password" id="hf-password" name="hf-password" placeholder="Enter Password..." autoComplete="current-password"/>
-                    <CFormText className="help-block">Please enter your password</CFormText>
+                    <CFormText>Please enter your password</CFormText>
                   </CCol>
                 </CRow>
               </CForm>
@@ -494,12 +457,12 @@ const BasicForms = () => {
                 <div className="mb-3">
                   <CFormLabel htmlFor="nf-email">Email</CFormLabel>
                   <CFormControl type="email" id="nf-email" name="nf-email" placeholder="Enter Email.." autoComplete="email"/>
-                  <CFormText className="help-block">Please enter your email</CFormText>
+                  <CFormText>Please enter your email</CFormText>
                 </div>
                 <div className="mb-3">
                   <CFormLabel htmlFor="nf-password">Password</CFormLabel>
                   <CFormControl type="password" id="nf-password" name="nf-password" placeholder="Enter Password.." autoComplete="current-password"/>
-                  <CFormText className="help-block">Please enter your password</CFormText>
+                  <CFormText>Please enter your password</CFormText>
                 </div>
               </CForm>
             </CCardBody>
@@ -615,12 +578,12 @@ const BasicForms = () => {
               <div className="mb-3">
                 <CFormLabel htmlFor="inputIsValid">Input is valid</CFormLabel>
                 <CFormControl valid id="inputIsValid" />
-                <CValidFeedback>Cool! Input is valid</CValidFeedback>
+                <CFormFeedback valid>Cool! Input is valid</CFormFeedback>
               </div>
               <div className="mb-3">
                 <CFormLabel htmlFor="inputIsInvalid">Input is invalid</CFormLabel>
                 <CFormControl invalid id="inputIsInvalid" />
-                <CInvalidFeedback>Houston, we have a problem...</CInvalidFeedback>
+                <CFormFeedback invalid>Houston, we have a problem...</CFormFeedback>
               </div>
             </CCardBody>
           </CCard>
@@ -634,16 +597,16 @@ const BasicForms = () => {
               <CForm className="was-validated">
                 <div className="mb-3">
                   <CFormLabel htmlFor="inputSuccess2i">Non-required input</CFormLabel>
-                  <CFormControl className="form-control-success" id="inputSuccess2i" />
+                  <CFormControl id="inputSuccess2i" />
-                  <CValidFeedback>Non-required</CValidFeedback>
+                  <CFormFeedback valid>Non-required</CFormFeedback>
                 </div>
                 <div className="mb-3">
                   <CFormLabel htmlFor="inputWarning2i">Required input</CFormLabel>
-                  <CFormControl className="form-control-warning" id="inputWarning2i" required />
+                  <CFormControl id="inputWarning2i" required />
-                  <CInvalidFeedback className="help-block">
+                  <CFormFeedback invalid>
                     Please provide a valid information
-                  </CInvalidFeedback>
+                  </CFormFeedback>
-                  <CValidFeedback className="help-block">Input provided</CValidFeedback>
+                  <CFormFeedback valid>Input provided</CFormFeedback>
                 </div>
               </CForm>
             </CCardBody>
@@ -1077,7 +1040,7 @@ const BasicForms = () => {
                           <CInputGroupText>@</CInputGroupText>
                           <CFormControl id="prependedInput" size="16" type="text" />
                         </CInputGroup>
-                        <p className="help-block">Here's some help text</p>
+                        <p>Here's some help text</p>
                       </div>
                     </div>
                     <div className="mb-3">
@@ -1087,7 +1050,7 @@ const BasicForms = () => {
                           <CFormControl id="appendedInput" size="16" type="text" />
                           <CInputGroupText>.00</CInputGroupText>
                         </CInputGroup>
-                        <span className="help-block">Here's more help text</span>
+                        <span>Here's more help text</span>
                       </div>
                     </div>
                     <div className="mb-3">

src/views/base/index.js

@@ -10,11 +10,10 @@ import Navs from './Navs';
 import Paginations from './Paginations';
 import Popovers from './Popovers';
 import ProgressBar from './ProgressBar';
-import Switches from './Switches';
 import Tabs from './Tabs';
 import Tooltips from './Tooltips';
 
 export {
-  Breadcrumbs, Cards, Carousels, Collapses, Dropdowns, Jumbotrons, ListGroups, Navbars, Navs, Popovers, ProgressBar, Switches, Tabs, Tooltips, Paginations,
+  Breadcrumbs, Cards, Carousels, Collapses, Dropdowns, Jumbotrons, ListGroups, Navbars, Navs, Popovers, ProgressBar, Tabs, Tooltips, Paginations,
 };
 

src/views/base/jumbotrons/Jumbotrons.js

@@ -1,9 +1,4 @@
 import React from 'react'
-import {
-  CJumbotron,
-  CEmbed,
-  CEmbedItem
-} from '@coreui/react'
 import {
   CButton,
   CCard,
@@ -19,58 +14,35 @@ const Jumbotrons = () => {
 
   return (
     <>
-      <CRow>
+      <CCard className="mb-4">
-        <CCol xs>
+        <CCardHeader>
-          <CCard className="mb-4">
+          Jumbotron
-            <CCardHeader>
+          <DocsLink name="CJumbotron"/>
-              Jumbotron
+        </CCardHeader>
-              <DocsLink name="CJumbotron"/>
+        <CCardBody>
-            </CCardHeader>
+          <CContainer className="py-5" fluid>
-            <CCardBody>
+            <h1 className="display-5 fw-bold">Custom jumbotron</h1>
-              <CJumbotron className="border">
+            <p className="col-md-8 fs-4">Using a series of utilities, you can create this jumbotron, just like the one in previous versions of Bootstrap. Check out the examples below for how you can remix and restyle it to your liking.</p>
-                <h1 className="display-3">Hello, world!</h1>
+            <CButton size="lg">Example button</CButton>
-                <p className="lead">This is a simple hero unit, a simple Jumbotron - style component for calling extra
+          </CContainer>
-                  attention to featured content or information.</p>
+          <CRow className="align-items-md-stretch">
-                <hr className="my-2" />
+            <CCol md="6">
-                <p>It uses utility classes for typgraphy and spacing to space content out within the larger container.</p>
+              <div className="h-100 p-5 text-white bg-dark rounded-3">
-                <p className="lead">
+                <h2>Change the background</h2>
-                  <CButton color="primary" size="lg">Learn More</CButton>
+                <p>Swap the background-color utility and add a `.text-*` color utility to mix up the jumbotron look. Then, mix and match with additional component themes and more.</p>
-                </p>
+                <CButton color="light" variant="outline">Example button</CButton>
-              </CJumbotron>
+              </div>
-            </CCardBody>
+            </CCol>
-          </CCard>
+            <CCol md="6">
-        </CCol>
+              <div className="h-100 p-5 bg-light border rounded-3">
-        <CCol xs>
+                <h2>Add borders</h2>
-          <CCard className="mb-4">
+                <p>Or, keep it light and add a border for some added definition to the boundaries of your content. Be sure to look under the hood at the source HTML here as we've adjusted the alignment and sizing of both column's content for equal-height.</p>
-            <CCardHeader>
+                <CButton color="secondary" variant="outline">Example button</CButton>
-              Jumbotron
+              </div>
-              <small> fluid</small>
+            </CCol>
-            </CCardHeader>
+          </CRow>
-            <CCardBody>
+        </CCardBody>
-              <CJumbotron fluid>
+      </CCard>
-                <CContainer fluid>
-                  <h1 className="display-3">Fluid jumbotron</h1>
-                  <p className="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
-                </CContainer>
-              </CJumbotron>
-            </CCardBody>
-          </CCard>
-        </CCol>
-      </CRow>
-      <CRow>
-        <CCol xs>
-          <CCard className="mb-4">
-            <CCardHeader>
-              Embed
-            </CCardHeader>
-            <CCardBody>
-              <CEmbed>
-                <CEmbedItem src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"/>
-              </CEmbed>
-            </CCardBody>
-          </CCard>
-        </CCol>
-      </CRow>
     </>
   )
 }

src/views/base/navbars/Navbars.js

@@ -1,8 +1,4 @@
 import React, { useState } from 'react'
-import {
-  CToggler,
-  CImg
-} from '@coreui/react'
 import {
   CCard,
   CCardBody,
@@ -13,10 +9,12 @@ import {
   CDropdownToggle,
   CForm,
   CFormControl,
+  CImage,
   CNavbar,
   CNavbarNav,
   CNavbarBrand,
   CNavbarText,
+  CNavbarToggler,
   CNavLink,
   CDropdown,
   CButton,
@@ -24,13 +22,12 @@ import {
 import { DocsLink } from 'src/reusable'
 
 const CNavbars = () => {
-  const [isOpen, setIsOpen] = useState(false)
+  const [visible, setVisible] = useState(false)
   const [isOpenDropdown, setIsOpenDropdown] = useState(false)
   const [navbarText, setNavbarText] = useState(false)
 
   return (
     <>
-
       <CCard className="mb-4">
         <CCardHeader>
           CNavbar
@@ -38,11 +35,11 @@ const CNavbars = () => {
         </CCardHeader>
         <CCardBody>
           <CNavbar expandable="sm" color="info" >
-            <CToggler inNavbar onClick={() => setIsOpen(!isOpen)}/>
+            <CNavbarToggler onClick={() => setVisible(!visible)} />
             <CNavbarBrand>
               NavbarBrand
             </CNavbarBrand>
-            <CCollapse show={isOpen} navbar>
+            <CCollapse show={visible} navbar>
               <CNavbarNav>
                 <CNavLink>Home</CNavLink>
                 <CNavLink>Link</CNavLink>
@@ -93,7 +90,7 @@ const CNavbars = () => {
         <CCardBody>
           <CNavbar color="faded" light>
             <CNavbarBrand>
-              <CImg
+              <CImage
                 src="https://placekitten.com/g/30/30"
                 className="d-inline-block align-top"
                 alt="CoreuiVue"
@@ -110,7 +107,7 @@ const CNavbars = () => {
         </CCardHeader>
         <CCardBody>
           <CNavbar toggleable="sm" light color="light">
-            <CToggler
+            <CNavbarToggler
               inNavbar
               onClick={()=>{ setNavbarText(!navbarText)}}
             />
@@ -130,7 +127,7 @@ const CNavbars = () => {
         </CCardHeader>
         <CCardBody>
           <CNavbar expandable="false" color="primary" >
-            <CToggler inNavbar onClick={()=>{setIsOpenDropdown(!isOpenDropdown)}} />
+            <CNavbarToggler inNavbar onClick={()=>{setIsOpenDropdown(!isOpenDropdown)}} />
             <CCollapse show={isOpenDropdown} navbar>
               <CNavbarNav>
                 <CNavLink>Home</CNavLink>

src/views/base/switches/Switches.js

@@ -1,485 +0,0 @@
-import React from 'react'
-import {
-  CCard,
-  CCardBody,
-  CCardHeader,
-  CCol,
-  CRow,
-  CSwitch
-} from '@coreui/react'
-import { DocsLink } from 'src/reusable'
-
-const Switches = () => {
-  return (
-    <CRow>
-      <CCol xs="12" md="12">
-        <CCard className="mb-4">
-          <CCardHeader>
-            3d Switch
-            <DocsLink name="CSwitch"/>
-          </CCardHeader>
-          <CCardBody>
-            <CSwitch className={'mx-1'} variant={'3d'} color={'primary'} defaultChecked onChange={(e)=>console.log(e.target.checked)}/>
-            <CSwitch className={'mx-1'} variant={'3d'} color={'secondary'} defaultChecked />
-            <CSwitch className={'mx-1'} variant={'3d'} color={'success'} defaultChecked />
-            <CSwitch className={'mx-1'} variant={'3d'} color={'warning'} defaultChecked />
-            <CSwitch className={'mx-1'} variant={'3d'} color={'info'} defaultChecked />
-            <CSwitch className={'mx-1'} variant={'3d'} color={'danger'} defaultChecked />
-            <CSwitch className={'mx-1'} variant={'3d'} color={'light'} defaultChecked />
-            <CSwitch className={'mx-1'} variant={'3d'} color={'dark'} defaultChecked />
-            <CSwitch className={'mx-1'} variant={'3d'} color={'primary'}  />
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs="12" md="6">
-        <CCard className="mb-4">
-          <CCardHeader>
-            Switch default
-          </CCardHeader>
-          <CCardBody>
-            <CSwitch className={'mx-1'} color={'primary'} defaultChecked />
-            <CSwitch className={'mx-1'} color={'secondary'} defaultChecked />
-            <CSwitch className={'mx-1'} color={'success'} defaultChecked />
-            <CSwitch className={'mx-1'} color={'warning'} defaultChecked />
-            <CSwitch className={'mx-1'} color={'info'} defaultChecked />
-            <CSwitch className={'mx-1'} color={'danger'} defaultChecked />
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs="12" md="6">
-        <CCard className="mb-4">
-          <CCardHeader>
-            Switch default - pills
-          </CCardHeader>
-          <CCardBody>
-            <CSwitch className={'mx-1'} shape={'pill'} color={'primary'} defaultChecked />
-            <CSwitch className={'mx-1'} shape={'pill'} color={'secondary'} defaultChecked />
-            <CSwitch className={'mx-1'} shape={'pill'} color={'success'} defaultChecked />
-            <CSwitch className={'mx-1'} shape={'pill'} color={'warning'} defaultChecked />
-            <CSwitch className={'mx-1'} shape={'pill'} color={'info'} defaultChecked />
-            <CSwitch className={'mx-1'} shape={'pill'} color={'danger'} defaultChecked />
-          </CCardBody>
-        </CCard>
-      </CCol>
-
-      <CCol md="12">
-        <h4>Outline</h4>
-      </CCol>
-
-      <CCol xs="12" md="6">
-        <CCard className="mb-4">
-          <CCardHeader>
-            Switch outline
-
-          </CCardHeader>
-          <CCardBody>
-            <CSwitch className={'mx-1'} color={'primary'} variant="outline" defaultChecked />
-            <CSwitch className={'mx-1'} color={'secondary'} variant="outline" defaultChecked />
-            <CSwitch className={'mx-1'} color={'success'} variant="outline" defaultChecked />
-            <CSwitch className={'mx-1'} color={'warning'} variant="outline" defaultChecked />
-            <CSwitch className={'mx-1'} color={'info'} variant="outline" defaultChecked />
-            <CSwitch className={'mx-1'} color={'danger'} variant="outline" defaultChecked />
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs="12" md="6">
-        <CCard className="mb-4">
-          <CCardHeader>
-            Switch outline pills
-
-          </CCardHeader>
-          <CCardBody>
-            <CSwitch className={'mx-1'} shape={'pill'} color={'primary'} variant="outline" defaultChecked />
-            <CSwitch className={'mx-1'} shape={'pill'} color={'secondary'} variant="outline" defaultChecked />
-            <CSwitch className={'mx-1'} shape={'pill'} color={'success'} variant="outline" defaultChecked />
-            <CSwitch className={'mx-1'} shape={'pill'} color={'warning'} variant="outline" defaultChecked />
-            <CSwitch className={'mx-1'} shape={'pill'} color={'info'} variant="outline" defaultChecked />
-            <CSwitch className={'mx-1'} shape={'pill'} color={'danger'} variant="outline" defaultChecked />
-          </CCardBody>
-        </CCard>
-      </CCol>
-
-      <CCol md="12">
-        <h4>Opposite</h4>
-      </CCol>
-
-      <CCol xs="12" md="6">
-        <CCard className="mb-4">
-          <CCardHeader>
-            Switch outline alternative
-
-          </CCardHeader>
-          <CCardBody>
-            <CSwitch className={'mx-1'} color={'primary'} variant="opposite" defaultChecked />
-            <CSwitch className={'mx-1'} color={'secondary'} variant="opposite" defaultChecked />
-            <CSwitch className={'mx-1'} color={'success'} variant="opposite" defaultChecked />
-            <CSwitch className={'mx-1'} color={'warning'} variant="opposite" defaultChecked />
-            <CSwitch className={'mx-1'} color={'info'} variant="opposite" defaultChecked />
-            <CSwitch className={'mx-1'} color={'danger'} variant="opposite" defaultChecked />
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs="12" md="6">
-        <CCard className="mb-4">
-          <CCardHeader>
-            Switch outline alternative - pills
-
-          </CCardHeader>
-          <CCardBody>
-            <CSwitch className={'mx-1'} shape={'pill'} color={'primary'} variant={'opposite'} defaultChecked />
-            <CSwitch className={'mx-1'} shape={'pill'} color={'secondary'} variant={'opposite'} defaultChecked />
-            <CSwitch className={'mx-1'} shape={'pill'} color={'success'} variant={'opposite'} defaultChecked />
-            <CSwitch className={'mx-1'} shape={'pill'} color={'warning'} variant={'opposite'} defaultChecked />
-            <CSwitch className={'mx-1'} shape={'pill'} color={'info'} variant={'opposite'} defaultChecked />
-            <CSwitch className={'mx-1'} shape={'pill'} color={'danger'} variant={'opposite'} defaultChecked />
-          </CCardBody>
-        </CCard>
-      </CCol>
-
-      <CCol md="12">
-        <h4>With text</h4>
-      </CCol>
-
-      <CCol xs="12" md="6">
-        <CCard className="mb-4">
-          <CCardHeader>
-            Switch with text
-
-          </CCardHeader>
-          <CCardBody>
-            <CSwitch className={'mx-1'} color={'primary'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-            <CSwitch className={'mx-1'} color={'secondary'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-            <CSwitch className={'mx-1'} color={'success'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-            <CSwitch className={'mx-1'} color={'warning'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-            <CSwitch className={'mx-1'} color={'info'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-            <CSwitch className={'mx-1'} color={'danger'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs="12" md="6">
-        <CCard className="mb-4">
-          <CCardHeader>
-            Switch with text pills
-
-          </CCardHeader>
-          <CCardBody>
-            <CSwitch className={'mx-1'} shape={'pill'} color={'primary'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-            <CSwitch className={'mx-1'} shape={'pill'} color={'secondary'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-            <CSwitch className={'mx-1'} shape={'pill'} color={'success'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-            <CSwitch className={'mx-1'} shape={'pill'} color={'warning'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-            <CSwitch className={'mx-1'} shape={'pill'} color={'info'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-            <CSwitch className={'mx-1'} shape={'pill'} color={'danger'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs="12" md="6">
-        <CCard className="mb-4">
-          <CCardHeader>
-            Switch with text outline
-
-          </CCardHeader>
-          <CCardBody>
-            <CSwitch className={'mx-1'} color={'primary'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-            <CSwitch className={'mx-1'} color={'secondary'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-            <CSwitch className={'mx-1'} color={'success'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-            <CSwitch className={'mx-1'} color={'warning'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-            <CSwitch className={'mx-1'} color={'info'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-            <CSwitch className={'mx-1'} color={'danger'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs="12" md="6">
-        <CCard className="mb-4">
-          <CCardHeader>
-            Switch with text outline pills
-
-          </CCardHeader>
-          <CCardBody>
-            <CSwitch className={'mx-1'} shape={'pill'} color={'primary'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-            <CSwitch className={'mx-1'} shape={'pill'} color={'secondary'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-            <CSwitch className={'mx-1'} shape={'pill'} color={'success'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-            <CSwitch className={'mx-1'} shape={'pill'} color={'warning'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-            <CSwitch className={'mx-1'} shape={'pill'} color={'info'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-            <CSwitch className={'mx-1'} shape={'pill'} color={'danger'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs="12" md="6">
-        <CCard className="mb-4">
-          <CCardHeader>
-            Switch with text outline alternative
-
-          </CCardHeader>
-          <CCardBody>
-            <CSwitch className={'mx-1'} color={'primary'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-            <CSwitch className={'mx-1'} color={'secondary'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-            <CSwitch className={'mx-1'} color={'success'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-            <CSwitch className={'mx-1'} color={'warning'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-            <CSwitch className={'mx-1'} color={'info'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-            <CSwitch className={'mx-1'} color={'danger'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs="12" md="6">
-        <CCard className="mb-4">
-          <CCardHeader>
-            Switch with text outline alternative pills
-
-          </CCardHeader>
-          <CCardBody>
-            <CSwitch className={'mx-1'} shape={'pill'} color={'primary'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-            <CSwitch className={'mx-1'} shape={'pill'} color={'secondary'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-            <CSwitch className={'mx-1'} shape={'pill'} color={'success'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-            <CSwitch className={'mx-1'} shape={'pill'} color={'warning'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-            <CSwitch className={'mx-1'} shape={'pill'} color={'info'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-            <CSwitch className={'mx-1'} shape={'pill'} color={'danger'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-          </CCardBody>
-        </CCard>
-      </CCol>
-
-      <CCol md="12">
-        <h4>With icon</h4>
-      </CCol>
-
-      <CCol xs="12" md="6">
-        <CCard className="mb-4">
-          <CCardHeader>
-            Switch with text
-
-          </CCardHeader>
-          <CCardBody>
-            <CSwitch className={'mx-1'} color={'primary'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-            <CSwitch className={'mx-1'} color={'secondary'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-            <CSwitch className={'mx-1'} color={'success'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-            <CSwitch className={'mx-1'} color={'warning'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-            <CSwitch className={'mx-1'} color={'info'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-            <CSwitch className={'mx-1'} color={'danger'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs="12" md="6">
-        <CCard className="mb-4">
-          <CCardHeader>
-            Switch with text pills
-
-          </CCardHeader>
-          <CCardBody>
-            <CSwitch className={'mx-1'} shape={'pill'} color={'primary'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-            <CSwitch className={'mx-1'} shape={'pill'} color={'secondary'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-            <CSwitch className={'mx-1'} shape={'pill'} color={'success'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-            <CSwitch className={'mx-1'} shape={'pill'} color={'warning'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-            <CSwitch className={'mx-1'} shape={'pill'} color={'info'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-            <CSwitch className={'mx-1'} shape={'pill'} color={'danger'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs="12" md="6">
-        <CCard className="mb-4">
-          <CCardHeader>
-            Switch with text outline
-
-          </CCardHeader>
-          <CCardBody>
-            <CSwitch className={'mx-1'} color={'primary'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-            <CSwitch className={'mx-1'} color={'secondary'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-            <CSwitch className={'mx-1'} color={'success'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-            <CSwitch className={'mx-1'} color={'warning'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-            <CSwitch className={'mx-1'} color={'info'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-            <CSwitch className={'mx-1'} color={'danger'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs="12" md="6">
-        <CCard className="mb-4">
-          <CCardHeader>
-            Switch with text outline pills
-
-          </CCardHeader>
-          <CCardBody>
-            <CSwitch className={'mx-1'} shape={'pill'} color={'primary'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-            <CSwitch className={'mx-1'} shape={'pill'} color={'secondary'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-            <CSwitch className={'mx-1'} shape={'pill'} color={'success'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-            <CSwitch className={'mx-1'} shape={'pill'} color={'warning'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-            <CSwitch className={'mx-1'} shape={'pill'} color={'info'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-            <CSwitch className={'mx-1'} shape={'pill'} color={'danger'} variant="outline" labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs="12" md="6">
-        <CCard className="mb-4">
-          <CCardHeader>
-            Switch with text outline alternative
-
-          </CCardHeader>
-          <CCardBody>
-            <CSwitch className={'mx-1'} color={'primary'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-            <CSwitch className={'mx-1'} color={'secondary'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-            <CSwitch className={'mx-1'} color={'success'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-            <CSwitch className={'mx-1'} color={'warning'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-            <CSwitch className={'mx-1'} color={'info'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-            <CSwitch className={'mx-1'} color={'danger'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs="12" md="6">
-        <CCard className="mb-4">
-          <CCardHeader>
-            Switch with text outline alternative pills
-
-          </CCardHeader>
-          <CCardBody>
-            <CSwitch className={'mx-1'} shape={'pill'} color={'primary'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-            <CSwitch className={'mx-1'} shape={'pill'} color={'secondary'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-            <CSwitch className={'mx-1'} shape={'pill'} color={'success'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-            <CSwitch className={'mx-1'} shape={'pill'} color={'warning'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-            <CSwitch className={'mx-1'} shape={'pill'} color={'info'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-            <CSwitch className={'mx-1'} shape={'pill'} color={'danger'} variant={'opposite'} labelOn={'\u2713'} labelOff={'\u2715'} defaultChecked />
-          </CCardBody>
-        </CCard>
-      </CCol>
-
-      <CCol md="12">
-        <h4>Disabled</h4>
-      </CCol>
-
-      <CCol xs="12" md="6">
-        <CCard className="mb-4">
-          <CCardHeader>
-            3d Switch
-          </CCardHeader>
-          <CCardBody>
-            <CSwitch className={'mx-1'} variant={'3d'} color={'primary'} defaultChecked disabled />
-            <CSwitch className={'mx-1'} variant={'3d'} color={'secondary'} defaultChecked disabled />
-            <CSwitch className={'mx-1'} variant={'3d'} color={'success'} defaultChecked disabled />
-            <CSwitch className={'mx-1'} variant={'3d'} color={'warning'} defaultChecked disabled />
-            <CSwitch className={'mx-1'} variant={'3d'} color={'info'} defaultChecked disabled />
-            <CSwitch className={'mx-1'} variant={'3d'} color={'danger'} defaultChecked disabled />
-            <CSwitch className={'mx-1'} variant={'3d'} color={'light'} defaultChecked disabled />
-            <CSwitch className={'mx-1'} variant={'3d'} color={'dark'} defaultChecked disabled />
-            <CSwitch className={'mx-1'} variant={'3d'} color={'primary'} disabled />
-          </CCardBody>
-        </CCard>
-      </CCol>
-
-      <CCol xs="12" md="6">
-        <CCard className="mb-4">
-          <CCardHeader>
-            3d Switch
-          </CCardHeader>
-          <CCardBody>
-            <CSwitch className={'mx-1'} color={'primary'} defaultChecked variant="opposite" />
-            <CSwitch className={'mx-1'} color={'secondary'} defaultChecked variant="opposite" />
-            <CSwitch className={'mx-1'} color={'success'} defaultChecked variant="opposite" />
-            <CSwitch className={'mx-1'} color={'warning'} defaultChecked variant="opposite" />
-            <CSwitch className={'mx-1'} color={'info'} defaultChecked variant="opposite" />
-            <CSwitch className={'mx-1'} color={'danger'} defaultChecked variant="opposite" />
-            <CSwitch className={'mx-1'} color={'light'} defaultChecked variant="opposite" />
-            <CSwitch className={'mx-1'} color={'dark'} defaultChecked variant="opposite" />
-            <CSwitch className={'mx-1'} color={'primary'} variant="opposite" disabled />
-          </CCardBody>
-        </CCard>
-      </CCol>
-
-      <CCol md="12">
-        <h4>3D</h4>
-      </CCol>
-
-      <CCol xs="12" md="6">
-        <CCard className="mb-4">
-          <CCardHeader>
-            3d Switch
-          </CCardHeader>
-          <CCardBody>
-            <CSwitch className={'mx-1'} variant={'3d'} color={'primary'} defaultChecked />
-            <CSwitch className={'mx-1'} variant={'3d'} color={'secondary'} defaultChecked />
-            <CSwitch className={'mx-1'} variant={'3d'} color={'success'} defaultChecked />
-            <CSwitch className={'mx-1'} variant={'3d'} color={'warning'} defaultChecked />
-            <CSwitch className={'mx-1'} variant={'3d'} color={'info'} defaultChecked />
-            <CSwitch className={'mx-1'} variant={'3d'} color={'danger'} defaultChecked />
-            <CSwitch className={'mx-1'} variant={'3d'} color={'light'} defaultChecked />
-            <CSwitch className={'mx-1'} variant={'3d'} color={'dark'} defaultChecked />
-            <CSwitch className={'mx-1'} variant={'3d'} color={'primary'} />
-          </CCardBody>
-        </CCard>
-      </CCol>
-      <CCol xs="12" md="6">
-        <CCard className="mb-4">
-          <CCardHeader>
-            3d Switch
-          </CCardHeader>
-          <CCardBody>
-            <CSwitch className={'mx-1'} variant={'3d'} color={'primary'} defaultChecked labelOn={'\u2713'} labelOff={'\u2715'} />
-            <CSwitch className={'mx-1'} variant={'3d'} color={'secondary'} defaultChecked labelOn={'\u2713'} labelOff={'\u2715'}/>
-            <CSwitch className={'mx-1'} variant={'3d'} color={'success'} defaultChecked labelOn={'\u2713'} labelOff={'\u2715'}/>
-            <CSwitch className={'mx-1'} variant={'3d'} color={'warning'} defaultChecked labelOn={'\u2713'} labelOff={'\u2715'}/>
-            <CSwitch className={'mx-1'} variant={'3d'} color={'info'} defaultChecked labelOn={'\u2713'} labelOff={'\u2715'}/>
-            <CSwitch className={'mx-1'} variant={'3d'} color={'danger'} defaultChecked labelOn={'\u2713'} labelOff={'\u2715'}/>
-            <CSwitch className={'mx-1'} variant={'3d'} color={'light'} defaultChecked labelOn={'\u2713'} labelOff={'\u2715'}/>
-            <CSwitch className={'mx-1'} variant={'3d'} color={'dark'} defaultChecked labelOn={'\u2713'} labelOff={'\u2715'}/>
-            <CSwitch className={'mx-1'} variant={'3d'} color={'primary'} labelOn={'\u2713'} labelOff={'\u2715'}/>
-          </CCardBody>
-        </CCard>
-      </CCol>
-
-      <CCol md="12">
-        <h4>Sizes</h4>
-      </CCol>
-
-      <CCol xs="12">
-        <CCard className="mb-4">
-          <CCardHeader>
-            Sizes
-          </CCardHeader>
-          <CCardBody className="p-0">
-            <table className="table table-hover table-striped table-align-middle mb-0">
-              <thead>
-              <tr>
-                <th>Size</th>
-                <th>Example</th>
-                <th>Props</th>
-              </tr>
-              </thead>
-              <tbody>
-              <tr>
-                <td>
-                  Large
-                </td>
-                <td>
-                  <CSwitch className={'mx-1'} variant={'3d'} color={'primary'} defaultChecked size={'lg'} />
-                </td>
-                <td>
-                  Add <code>size={'lg'}</code>
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  Normal
-                </td>
-                <td>
-                  <CSwitch className={'mx-1'} variant={'3d'} color={'primary'} defaultChecked  />
-                </td>
-                <td>
-                  -
-                </td>
-              </tr>
-              <tr>
-                <td>
-                  Small
-                </td>
-                <td>
-                  <CSwitch className={'mx-1'} variant={'3d'} color={'primary'} defaultChecked size={'sm'} />
-                </td>
-                <td>
-                  Add <code>size={'sm'}</code>
-                </td>
-              </tr>
-              </tbody>
-            </table>
-          </CCardBody>
-        </CCard>
-      </CCol>
-    </CRow>
-  )
-}
-
-export default Switches

src/views/base/tables/Tables.js

@@ -1,30 +1,20 @@
 import React from 'react'
-import {
-  CDataTable,
-} from '@coreui/react'
 import {
   CBadge,
   CCard,
   CCardBody,
   CCardHeader,
   CCol,
-  CRow
+  CRow,
+  CTable,
+  CTableBody,
+  CTableDataCell,
+  CTableHead,
+  CTableHeaderCell,
+  CTableRow,
 } from '@coreui/react-ts'
 import { DocsLink } from 'src/reusable'
 
-import usersData from '../../users/UsersData'
-
-const getBadge = status => {
-  switch (status) {
-    case 'Active': return 'success'
-    case 'Inactive': return 'secondary'
-    case 'Pending': return 'warning'
-    case 'Banned': return 'danger'
-    default: return 'primary'
-  }
-}
-const fields = ['name','registered', 'role', 'status']
-
 const Tables = () => {
   return (
     <>
@@ -36,23 +26,48 @@ const Tables = () => {
               <DocsLink name="CModal"/>
             </CCardHeader>
             <CCardBody>
-            <CDataTable
+              <CTable responsive="sm">
-              items={usersData}
+                <CTableHead>
-              fields={fields}
+                  <CTableRow>
-              itemsPerPage={5}
+                    <CTableHeaderCell>Username</CTableHeaderCell>
-              pagination
+                    <CTableHeaderCell>Date registered</CTableHeaderCell>
-              scopedSlots = {{
+                    <CTableHeaderCell>Role</CTableHeaderCell>
-                'status':
+                    <CTableHeaderCell>Status</CTableHeaderCell>
-                  (item)=>(
+                  </CTableRow>
-                    <td>
+                </CTableHead>
-                      <CBadge color={getBadge(item.status)}>
+                <CTableBody>
-                        {item.status}
+                  <CTableRow>
-                      </CBadge>
+                    <CTableDataCell>Samppa Nori</CTableDataCell>
-                    </td>
+                    <CTableDataCell>2012/01/01</CTableDataCell>
-                  )
+                    <CTableDataCell>Member</CTableDataCell>
-
+                    <CTableDataCell><CBadge color="success">Active</CBadge></CTableDataCell>
-              }}
+                  </CTableRow>
-            />
+                  <CTableRow>
+                    <CTableDataCell>Estavan Lykos</CTableDataCell>
+                    <CTableDataCell>2012/02/01</CTableDataCell>
+                    <CTableDataCell>Staff</CTableDataCell>
+                    <CTableDataCell><CBadge color="danger">Banned</CBadge></CTableDataCell>
+                  </CTableRow>
+                  <CTableRow>
+                    <CTableDataCell>Chetan Mohamed</CTableDataCell>
+                    <CTableDataCell>2012/02/01</CTableDataCell>
+                    <CTableDataCell>Admin</CTableDataCell>
+                    <CTableDataCell><CBadge color="secondary">Inactive</CBadge></CTableDataCell>
+                  </CTableRow>
+                  <CTableRow>
+                    <CTableDataCell>Derick Maximinus</CTableDataCell>
+                    <CTableDataCell>2012/03/01</CTableDataCell>
+                    <CTableDataCell>Member</CTableDataCell>
+                    <CTableDataCell><CBadge color="warning">Pending</CBadge></CTableDataCell>
+                  </CTableRow>
+                  <CTableRow>
+                    <CTableDataCell>Friderik Dávid</CTableDataCell>
+                    <CTableDataCell>2012/01/21</CTableDataCell>
+                    <CTableDataCell>Staff</CTableDataCell>
+                    <CTableDataCell><CBadge color="success">Active</CBadge></CTableDataCell>
+                  </CTableRow>
+                </CTableBody>
+              </CTable>
             </CCardBody>
           </CCard>
         </CCol>
@@ -63,24 +78,48 @@ const Tables = () => {
               Striped Table
             </CCardHeader>
             <CCardBody>
-            <CDataTable
+              <CTable responsive="sm" striped>
-              items={usersData}
+                <CTableHead>
-              fields={fields}
+                  <CTableRow>
-              striped
+                    <CTableHeaderCell>Username</CTableHeaderCell>
-              itemsPerPage={5}
+                    <CTableHeaderCell>Date registered</CTableHeaderCell>
-              pagination
+                    <CTableHeaderCell>Role</CTableHeaderCell>
-              scopedSlots = {{
+                    <CTableHeaderCell>Status</CTableHeaderCell>
-                'status':
+                  </CTableRow>
-                  (item)=>(
+                </CTableHead>
-                    <td>
+                <CTableBody>
-                      <CBadge color={getBadge(item.status)}>
+                  <CTableRow>
-                        {item.status}
+                    <CTableDataCell>Yiorgos Avraamu</CTableDataCell>
-                      </CBadge>
+                    <CTableDataCell>2012/01/01</CTableDataCell>
-                    </td>
+                    <CTableDataCell>Member</CTableDataCell>
-                  )
+                    <CTableDataCell><CBadge color="success">Active</CBadge></CTableDataCell>
-
+                  </CTableRow>
-              }}
+                  <CTableRow>
-            />
+                    <CTableDataCell>Avram Tarasios</CTableDataCell>
+                    <CTableDataCell>2012/02/01</CTableDataCell>
+                    <CTableDataCell>Staff</CTableDataCell>
+                    <CTableDataCell><CBadge color="danger">Banned</CBadge></CTableDataCell>
+                  </CTableRow>
+                  <CTableRow>
+                    <CTableDataCell>Quintin Ed</CTableDataCell>
+                    <CTableDataCell>2012/02/01</CTableDataCell>
+                    <CTableDataCell>Admin</CTableDataCell>
+                    <CTableDataCell><CBadge color="secondary">Inactive</CBadge></CTableDataCell>
+                  </CTableRow>
+                  <CTableRow>
+                    <CTableDataCell>Enéas Kwadwo</CTableDataCell>
+                    <CTableDataCell>2012/03/01</CTableDataCell>
+                    <CTableDataCell>Member</CTableDataCell>
+                    <CTableDataCell><CBadge color="warning">Pending</CBadge></CTableDataCell>
+                  </CTableRow>
+                  <CTableRow>
+                    <CTableDataCell>Agapetus Tadeáš</CTableDataCell>
+                    <CTableDataCell>2012/01/21</CTableDataCell>
+                    <CTableDataCell>Staff</CTableDataCell>
+                    <CTableDataCell><CBadge color="success">Active</CBadge></CTableDataCell>
+                  </CTableRow>
+                </CTableBody>
+              </CTable>
             </CCardBody>
           </CCard>
         </CCol>
@@ -94,24 +133,48 @@ const Tables = () => {
               Condensed Table
             </CCardHeader>
             <CCardBody>
-            <CDataTable
+              <CTable responsive="sm" small>
-              items={usersData}
+                <CTableHead>
-              fields={fields}
+                  <CTableRow>
-              size="sm"
+                    <CTableHeaderCell>Username</CTableHeaderCell>
-              itemsPerPage={5}
+                    <CTableHeaderCell>Date registered</CTableHeaderCell>
-              pagination
+                    <CTableHeaderCell>Role</CTableHeaderCell>
-              scopedSlots = {{
+                    <CTableHeaderCell>Status</CTableHeaderCell>
-                'status':
+                  </CTableRow>
-                  (item)=>(
+                </CTableHead>
-                    <td>
+                <CTableBody>
-                      <CBadge color={getBadge(item.status)}>
+                  <CTableRow>
-                        {item.status}
+                    <CTableDataCell>Carwyn Fachtna</CTableDataCell>
-                      </CBadge>
+                    <CTableDataCell>2012/01/01</CTableDataCell>
-                    </td>
+                    <CTableDataCell>Member</CTableDataCell>
-                  )
+                    <CTableDataCell><CBadge color="success">Active</CBadge></CTableDataCell>
-
+                  </CTableRow>
-              }}
+                  <CTableRow>
-            />
+                    <CTableDataCell>Nehemiah Tatius</CTableDataCell>
+                    <CTableDataCell>2012/02/01</CTableDataCell>
+                    <CTableDataCell>Staff</CTableDataCell>
+                    <CTableDataCell><CBadge color="danger">Banned</CBadge></CTableDataCell>
+                  </CTableRow>
+                  <CTableRow>
+                    <CTableDataCell>Ebbe Gemariah</CTableDataCell>
+                    <CTableDataCell>2012/02/01</CTableDataCell>
+                    <CTableDataCell>Admin</CTableDataCell>
+                    <CTableDataCell><CBadge color="secondary">Inactive</CBadge></CTableDataCell>
+                  </CTableRow>
+                  <CTableRow>
+                    <CTableDataCell>Eustorgios Amulius</CTableDataCell>
+                    <CTableDataCell>2012/03/01</CTableDataCell>
+                    <CTableDataCell>Member</CTableDataCell>
+                    <CTableDataCell><CBadge color="warning">Pending</CBadge></CTableDataCell>
+                  </CTableRow>
+                  <CTableRow>
+                    <CTableDataCell>Leopold Gáspár</CTableDataCell>
+                    <CTableDataCell>2012/01/21</CTableDataCell>
+                    <CTableDataCell>Staff</CTableDataCell>
+                    <CTableDataCell><CBadge color="success">Active</CBadge></CTableDataCell>
+                  </CTableRow>
+                </CTableBody>
+              </CTable>
             </CCardBody>
           </CCard>
         </CCol>
@@ -122,24 +185,48 @@ const Tables = () => {
               Bordered Table
             </CCardHeader>
             <CCardBody>
-            <CDataTable
+              <CTable responsive="sm" bordered>
-              items={usersData}
+                <CTableHead>
-              fields={fields}
+                  <CTableRow>
-              bordered
+                    <CTableHeaderCell>Username</CTableHeaderCell>
-              itemsPerPage={5}
+                    <CTableHeaderCell>Date registered</CTableHeaderCell>
-              pagination
+                    <CTableHeaderCell>Role</CTableHeaderCell>
-              scopedSlots = {{
+                    <CTableHeaderCell>Status</CTableHeaderCell>
-                'status':
+                  </CTableRow>
-                  (item)=>(
+                </CTableHead>
-                    <td>
+                <CTableBody>
-                      <CBadge color={getBadge(item.status)}>
+                  <CTableRow>
-                        {item.status}
+                    <CTableDataCell>Pompeius René</CTableDataCell>
-                      </CBadge>
+                    <CTableDataCell>2012/01/01</CTableDataCell>
-                    </td>
+                    <CTableDataCell>Member</CTableDataCell>
-                  )
+                    <CTableDataCell><CBadge color="success">Active</CBadge></CTableDataCell>
-
+                  </CTableRow>
-              }}
+                  <CTableRow>
-            />
+                    <CTableDataCell>Paĉjo Jadon</CTableDataCell>
+                    <CTableDataCell>2012/02/01</CTableDataCell>
+                    <CTableDataCell>Staff</CTableDataCell>
+                    <CTableDataCell><CBadge color="danger">Banned</CBadge></CTableDataCell>
+                  </CTableRow>
+                  <CTableRow>
+                    <CTableDataCell>Micheal Mercurius</CTableDataCell>
+                    <CTableDataCell>2012/02/01</CTableDataCell>
+                    <CTableDataCell>Admin</CTableDataCell>
+                    <CTableDataCell><CBadge color="secondary">Inactive</CBadge></CTableDataCell>
+                  </CTableRow>
+                  <CTableRow>
+                    <CTableDataCell>Ganesha Dubhghall</CTableDataCell>
+                    <CTableDataCell>2012/03/01</CTableDataCell>
+                    <CTableDataCell>Member</CTableDataCell>
+                    <CTableDataCell><CBadge color="warning">Pending</CBadge></CTableDataCell>
+                  </CTableRow>
+                  <CTableRow>
+                    <CTableDataCell>Hiroto Šimun</CTableDataCell>
+                    <CTableDataCell>2012/01/21</CTableDataCell>
+                    <CTableDataCell>Staff</CTableDataCell>
+                    <CTableDataCell><CBadge color="success">Active</CBadge></CTableDataCell>
+                  </CTableRow>
+                </CTableBody>
+              </CTable>
             </CCardBody>
           </CCard>
         </CCol>
@@ -153,58 +240,48 @@ const Tables = () => {
               Combined All Table
             </CCardHeader>
             <CCardBody>
-            <CDataTable
+              <CTable responsive="sm" bordered striped small>
-              items={usersData}
+                <CTableHead>
-              fields={fields}
+                  <CTableRow>
-              hover
+                    <CTableHeaderCell>Username</CTableHeaderCell>
-              striped
+                    <CTableHeaderCell>Date registered</CTableHeaderCell>
-              bordered
+                    <CTableHeaderCell>Role</CTableHeaderCell>
-              size="sm"
+                    <CTableHeaderCell>Status</CTableHeaderCell>
-              itemsPerPage={10}
+                  </CTableRow>
-              pagination
+                </CTableHead>
-              scopedSlots = {{
+                <CTableBody>
-                'status':
+                  <CTableRow>
-                  (item)=>(
+                    <CTableDataCell>Vishnu Serghei</CTableDataCell>
-                    <td>
+                    <CTableDataCell>2012/01/01</CTableDataCell>
-                      <CBadge color={getBadge(item.status)}>
+                    <CTableDataCell>Member</CTableDataCell>
-                        {item.status}
+                    <CTableDataCell><CBadge color="success">Active</CBadge></CTableDataCell>
-                      </CBadge>
+                  </CTableRow>
-                    </td>
+                  <CTableRow>
-                  )
+                    <CTableDataCell>Zbyněk Phoibos</CTableDataCell>
-              }}
+                    <CTableDataCell>2012/02/01</CTableDataCell>
-            />
+                    <CTableDataCell>Staff</CTableDataCell>
-            </CCardBody>
+                    <CTableDataCell><CBadge color="danger">Banned</CBadge></CTableDataCell>
-          </CCard>
+                  </CTableRow>
-        </CCol>
+                  <CTableRow>
-      </CRow>
+                    <CTableDataCell>Einar Randall</CTableDataCell>
-        <CRow>
+                    <CTableDataCell>2012/02/01</CTableDataCell>
-        <CCol xs>
+                    <CTableDataCell>Admin</CTableDataCell>
-          <CCard className="mb-4">
+                    <CTableDataCell><CBadge color="secondary">Inactive</CBadge></CTableDataCell>
-            <CCardHeader>
+                  </CTableRow>
-              Combined All dark Table
+                  <CTableRow>
-            </CCardHeader>
+                    <CTableDataCell>Félix Troels</CTableDataCell>
-            <CCardBody>
+                    <CTableDataCell>2012/03/01</CTableDataCell>
-            <CDataTable
+                    <CTableDataCell>Member</CTableDataCell>
-              items={usersData}
+                    <CTableDataCell><CBadge color="warning">Pending</CBadge></CTableDataCell>
-              fields={fields}
+                  </CTableRow>
-              dark
+                  <CTableRow>
-              hover
+                    <CTableDataCell>Aulus Agmundr</CTableDataCell>
-              striped
+                    <CTableDataCell>2012/01/21</CTableDataCell>
-              bordered
+                    <CTableDataCell>Staff</CTableDataCell>
-              size="sm"
+                    <CTableDataCell><CBadge color="success">Active</CBadge></CTableDataCell>
-              itemsPerPage={10}
+                  </CTableRow>
-              pagination
+                </CTableBody>
-              scopedSlots = {{
+              </CTable>
-                'status':
-                  (item)=>(
-                    <td>
-                      <CBadge color={getBadge(item.status)}>
-                        {item.status}
-                      </CBadge>
-                    </td>
-                  )
-              }}
-            />
             </CCardBody>
           </CCard>
         </CCol>

src/views/dashboard/Dashboard.js

@@ -142,7 +142,7 @@ const Dashboard = () => {
 
                   <div className="progress-group mb-4">
                     <div className="progress-group-prepend">
-                      <span className="progress-group-text">
+                      <span className="text-medium-emphasis small">
                         Monday
                       </span>
                     </div>
@@ -153,7 +153,7 @@ const Dashboard = () => {
                   </div>
                   <div className="progress-group mb-4">
                     <div className="progress-group-prepend">
-                      <span className="progress-group-text">
+                      <span className="text-medium-emphasis small">
                       Tuesday
                       </span>
                     </div>
@@ -164,7 +164,7 @@ const Dashboard = () => {
                   </div>
                   <div className="progress-group mb-4">
                     <div className="progress-group-prepend">
-                      <span className="progress-group-text">
+                      <span className="text-medium-emphasis small">
                       Wednesday
                       </span>
                     </div>
@@ -175,7 +175,7 @@ const Dashboard = () => {
                   </div>
                   <div className="progress-group mb-4">
                     <div className="progress-group-prepend">
-                      <span className="progress-group-text">
+                      <span className="text-medium-emphasis small">
                       Thursday
                       </span>
                     </div>
@@ -186,7 +186,7 @@ const Dashboard = () => {
                   </div>
                   <div className="progress-group mb-4">
                     <div className="progress-group-prepend">
-                      <span className="progress-group-text">
+                      <span className="text-medium-emphasis small">
                       Friday
                       </span>
                     </div>
@@ -197,7 +197,7 @@ const Dashboard = () => {
                   </div>
                   <div className="progress-group mb-4">
                     <div className="progress-group-prepend">
-                      <span className="progress-group-text">
+                      <span className="text-medium-emphasis small">
                       Saturday
                       </span>
                     </div>
@@ -208,7 +208,7 @@ const Dashboard = () => {
                   </div>
                   <div className="progress-group mb-4">
                     <div className="progress-group-prepend">
-                      <span className="progress-group-text">
+                      <span className="text-medium-emphasis small">
                       Sunday
                       </span>
                     </div>
@@ -217,15 +217,6 @@ const Dashboard = () => {
                       <CProgress className="progress-xs" color="danger" value="69" />
                     </div>
                   </div>
-                  <div className="legend text-center">
-                    <small>
-                      <sup className="px-1"><CBadge shape="rounded-pill" color="info">&nbsp;</CBadge></sup>
-                      New clients
-                      &nbsp;
-                      <sup className="px-1"><CBadge shape="rounded-pill" color="danger">&nbsp;</CBadge></sup>
-                      Recurring clients
-                    </small>
-                  </div>
                 </CCol>
 
                 <CCol xs="12" md="6" xl="6">
@@ -251,9 +242,9 @@ const Dashboard = () => {
 
                   <div className="progress-group mb-4">
                     <div className="progress-group-header">
-                      <CIcon className="progress-group-icon" name="cil-user" />
+                      <CIcon className="icon icon-lg me-2" name="cil-user" />
-                      <span className="title">Male</span>
+                      <span>Male</span>
-                      <span className="ms-auto font-weight-bold">43%</span>
+                      <span className="ms-auto font-semibold">43%</span>
                     </div>
                     <div className="progress-group-bars">
                       <CProgress className="progress-xs" color="warning" value="43" />
@@ -261,31 +252,30 @@ const Dashboard = () => {
                   </div>
                   <div className="progress-group mb-5">
                     <div className="progress-group-header">
-                      <CIcon className="progress-group-icon" name="cil-user-female" />
+                      <CIcon className="icon icon-lg me-2" name="cil-user-female" />
-                      <span className="title">Female</span>
+                      <span>Female</span>
-                      <span className="ms-auto font-weight-bold">37%</span>
+                      <span className="ms-auto font-semibold">37%</span>
                     </div>
                     <div className="progress-group-bars">
                       <CProgress className="progress-xs" color="warning" value="37" />
                     </div>
                   </div>
+
                   <div className="progress-group">
                     <div className="progress-group-header">
-                      <CIcon className="progress-group-icon" name="cil-globe-alt" />
+                      <CIcon className="icon icon-lg me-2" name="cib-google" />
-                      <span className="title">Organic Search</span>
+                      <span>Organic Search</span>
-                      <span className="ms-auto font-weight-bold">191,235 <span className="text-muted small">(56%)</span></span>
+                      <span className="ms-auto font-semibold">191,235 <span className="text-muted small">(56%)</span></span>
                     </div>
                     <div className="progress-group-bars">
                       <CProgress className="progress-xs" color="success" value="56" />
                     </div>
                   </div>
-
-
                   <div className="progress-group">
                     <div className="progress-group-header">
-                      <CIcon name="cib-facebook" className="progress-group-icon" />
+                      <CIcon name="cib-facebook" className="icon icon-lg me-2" />
-                      <span className="title">Facebook</span>
+                      <span>Facebook</span>
-                      <span className="ms-auto font-weight-bold">51,223 <span className="text-muted small">(15%)</span></span>
+                      <span className="ms-auto font-semibold">51,223 <span className="text-muted small">(15%)</span></span>
                     </div>
                     <div className="progress-group-bars">
                       <CProgress className="progress-xs" color="success" value="15" />
@@ -293,9 +283,9 @@ const Dashboard = () => {
                   </div>
                   <div className="progress-group">
                     <div className="progress-group-header">
-                      <CIcon name="cib-twitter" className="progress-group-icon" />
+                      <CIcon name="cib-twitter" className="icon icon-lg me-2" />
-                      <span className="title">Twitter</span>
+                      <span>Twitter</span>
-                      <span className="ms-auto font-weight-bold">37,564 <span className="text-muted small">(11%)</span></span>
+                      <span className="ms-auto font-semibold">37,564 <span className="text-muted small">(11%)</span></span>
                     </div>
                     <div className="progress-group-bars">
                       <CProgress className="progress-xs" color="success" value="11" />
@@ -303,20 +293,14 @@ const Dashboard = () => {
                   </div>
                   <div className="progress-group">
                     <div className="progress-group-header">
-                      <CIcon name="cib-linkedin" className="progress-group-icon" />
+                      <CIcon name="cib-linkedin" className="icon icon-lg me-2" />
-                      <span className="title">LinkedIn</span>
+                      <span>LinkedIn</span>
-                      <span className="ms-auto font-weight-bold">27,319 <span className="text-muted small">(8%)</span></span>
+                      <span className="ms-auto font-semibold">27,319 <span className="text-muted small">(8%)</span></span>
                     </div>
                     <div className="progress-group-bars">
                       <CProgress className="progress-xs" color="success" value="8" />
                     </div>
                   </div>
-                  <div className="divider text-center">
-                    <CButton color="link" size="sm" className="text-muted">
-                      <CIcon name="cil-options" />
-                    </CButton>
-                  </div>
-
                 </CCol>
               </CRow>
 

src/views/notifications/toaster/Toaster.js

@@ -3,43 +3,43 @@ import {
   CCard,
   CCardHeader,
   CCardBody,
-  CToast,
-  CToastBody,
-  CToastHeader,
-  CToaster,
   CForm,
-  CInput,
+  CFormControl,
-  CInputCheckbox,
+  CFormCheck,
+  CFormSelect,
   CButton,
   CContainer,
   CRow,
   CCol,
-  CFormGroup,
+  CFormLabel,
-  CLabel
+  CToast,
-} from '@coreui/react'
+  CToastBody,
+  CToastHeader,
+  CToaster
+} from '@coreui/react-ts'
 import { DocsLink } from 'src/reusable'
 
 const Toaster = () => {
 
-  const positions = [
+  const placements = [
-    'static',
+    'top-start',
-    'top-left',
     'top-center',
-    'top-right',
+    'top-end',
-    'top-full',
+    'middle-start',
-    'bottom-left',
+    'middle-center',
+    'middle-end',
+    'bottom-start',
     'bottom-center',
-    'bottom-right',
+    'bottom-end'
-    'bottom-full'
   ]
 
   const [toasts, setToasts] = useState([
-    { position: 'static'},
+    { placement: 'static'},
-    { position: 'static'},
+    { placement: 'static'},
-    { position: 'top-right', autohide: 3000 }
+    { placement: 'top-right', autohide: 3000 }
   ])
 
-  const [position, setPosition] = useState('top-right')
+  const [placement, setPlacement] = useState('top-right')
   const [autohide, setAutohide] = useState(true)
   const [autohideValue, setAutohideValue] = useState(5000)
   const [closeButton, setCloseButton] = useState(true)
@@ -48,15 +48,15 @@ const Toaster = () => {
   const addToast = () => {
     setToasts([
       ...toasts,
-      { position, autohide: autohide && autohideValue, closeButton, fade }
+      { placement, autohide: autohide && autohideValue, closeButton, fade }
     ])
   }
 
 
   const toasters = (()=>{
     return toasts.reduce((toasters, toast) => {
-      toasters[toast.position] = toasters[toast.position] || []
+      toasters[toast.placement] = toasters[toast.placement] || []
-      toasters[toast.position].push(toast)
+      toasters[toast.placement].push(toast)
       return toasters
     }, {})
   })()
@@ -75,67 +75,67 @@ const Toaster = () => {
               <CForm>
                 <h5>Add toast with following props:</h5>
 
-                <CFormGroup variant="custom-checkbox" className="my-2 mt-4">
+                <div variant="custom-checkbox" className="my-2 mt-4">
-                  <CInputCheckbox
+                  <CFormCheck
                     id="autohide"
                     checked={autohide}
                     onChange={e => { setAutohide(e.target.checked) }}
                     custom
                   />
-                  <CLabel variant="custom-checkbox" htmlFor="autohide">
+                  <CFormLabel variant="custom-checkbox" htmlFor="autohide">
                     Autohide of the toast
-                  </CLabel>
+                  </CFormLabel>
-                </CFormGroup>
+                </div>
                 {
                   autohide &&
-                  <CFormGroup className="my-2">
+                  <div className="my-2">
-                    <CLabel htmlFor="ccyear">Time to autohide</CLabel>
+                    <CFormLabel htmlFor="ccyear">Time to autohide</CFormLabel>
-                    <CInput
+                    <CFormControl
                       type="number"
                       value={autohideValue}
                       onChange={e => {
                         setAutohideValue(Number(e.target.value))
                       }}
                     />
-                  </CFormGroup>
+                  </div>
                 }
 
-                <CFormGroup className="my-2">
+                <div className="my-2">
-                  <CLabel htmlFor="ccyear">Position</CLabel>
+                  <CFormLabel htmlFor="ccyear">Placement</CFormLabel>
-                  <select
+                  <CFormSelect
                     className="form-control"
-                    value={position}
+                    value={placement}
-                    onChange={e => {setPosition(e.target.value)}}
+                    onChange={e => {setPlacement(e.target.value)}}
                   >
                     {
-                      positions.map((position, i)=>(
+                      placements.map((placement, i)=>(
-                        <option key={i}>{position}</option>
+                        <option key={i}>{placement}</option>
                       ))
                     }
-                  </select>
+                  </CFormSelect>
-                </CFormGroup>
+                </div>
 
-                <CFormGroup variant="custom-checkbox" className="my-2">
+                <div variant="custom-checkbox" className="my-2">
-                  <CInputCheckbox
+                  <CFormCheck
                     id="fade"
                     checked={fade}
                     onChange={e => { setFade(e.target.checked) }}
                     custom
                   />
-                  <CLabel variant="custom-checkbox" htmlFor="fade">fade</CLabel>
+                  <CFormLabel variant="custom-checkbox" htmlFor="fade">fade</CFormLabel>
-                </CFormGroup>
+                </div>
 
-                <CFormGroup variant="custom-checkbox" className="my-2">
+                <div variant="custom-checkbox" className="my-2">
-                  <CInputCheckbox
+                  <CFormCheck
                     id="close"
                     custom
                     checked={closeButton}
                     onChange={e=> { setCloseButton(e.target.checked) }}
                   />
-                  <CLabel variant="custom-checkbox" htmlFor="close">
+                  <CFormLabel variant="custom-checkbox" htmlFor="close">
                     closeButton
-                  </CLabel>
+                  </CFormLabel>
-                </CFormGroup>
+                </div>
 
                 <CButton
                   className="me-1 w-25"
@@ -150,7 +150,7 @@ const Toaster = () => {
             <CCol sm="12" lg="6">
               {Object.keys(toasters).map((toasterKey) => (
                 <CToaster
-                  position={toasterKey}
+                  placement={toasterKey}
                   key={'toaster' + toasterKey}
                 >
                   {
@@ -158,17 +158,38 @@ const Toaster = () => {
                     return(
                       <CToast
                         key={'toast' + key}
-                        show={true}
+                        icon={
+                          <svg
+                            className="rounded me-2"
+                            width="20"
+                            height="20"
+                            xmlns="http://www.w3.org/2000/svg"
+                            preserveAspectRatio="xMidYMid slice"
+                            focusable="false"
+                            role="img"
+                          >
+                            <rect width="100%" height="100%" fill="#007aff"></rect>
+                          </svg>
+                        }
+                        title="CoreUI for React.js"
+                        time="7 min ago"
                         autohide={toast.autohide}
-                        fade={toast.fade}
                       >
-                        <CToastHeader closeButton={toast.closeButton}>
+                        {`Hello, ${toasterKey} world! This is a toast ${toasterKey} message.`}
-                          Toast title
-                        </CToastHeader>
-                        <CToastBody>
-                          {`This is a toast in ${toasterKey} positioned toaster number ${key + 1}.`}
-                        </CToastBody>
                       </CToast>
+                      // <CToast
+                      //   key={'toast' + key}
+                      //   show={true}
+                      //   autohide={toast.autohide}
+                      //   fade={toast.fade}
+                      // >
+                      //   <CToastHeader closeButton={toast.closeButton}>
+                      //     Toast title
+                      //   </CToastHeader>
+                      //   <CToastBody>
+                      //     {`This is a toast in ${toasterKey} positioned toaster number ${key + 1}.`}
+                      //   </CToastBody>
+                      // </CToast>
                     )
                   })
                   }

src/views/widgets/Widgets.js

@@ -1,19 +1,15 @@
 import React from 'react'
 import {
-  CCardFooter,
   CCardGroup,
   CCol,
   CLink,
   CRow,
-  CProgress
-} from '@coreui/react-ts'
-
-import {
-  CWidgetProgress,
   CWidgetIcon,
+  CWidgetProgress,
   CWidgetProgressIcon,
   CWidgetSimple
-} from '@coreui/react'
+} from '@coreui/react-ts'
+
 import WidgetsBrand from './WidgetsBrand'
 import WidgetsDropdown from './WidgetsDropdown'
 
@@ -28,337 +24,298 @@ const Widgets = () => {
       <WidgetsDropdown />
       <CRow>
         <CCol xs="12" sm="6" lg="3">
-          <CWidgetProgress className="mb-4" color="success" header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."/>
+          <CWidgetProgress className="mb-4" value="89.9%" title="Widget title" progressColor="success" progressValue={89.9} text="Lorem ipsum dolor sit amet enim."/>
         </CCol>
         <CCol xs="12" sm="6" lg="3">
-          <CWidgetProgress className="mb-4" color="info" header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."/>
+          <CWidgetProgress className="mb-4" value="12.124" title="Widget title" progressColor="info" progressValue={89.9} text="Lorem ipsum dolor sit amet enim."/>
         </CCol>
         <CCol xs="12" sm="6" lg="3">
-          <CWidgetProgress className="mb-4" color="warning" header="$98.111,00" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."/>
+          <CWidgetProgress className="mb-4" value="$98.111,00" title="Widget title" progressColor="warning" progressValue={89.9} text="Lorem ipsum dolor sit amet enim."/>
         </CCol>
         <CCol xs="12" sm="6" lg="3">
-          <CWidgetProgress className="mb-4" header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim." />
+          <CWidgetProgress className="mb-4" value="2 TB" title="Widget title" progressValue={89.9} text="Lorem ipsum dolor sit amet enim." />
         </CCol>
 
         <CCol xs="12" sm="6" lg="3">
-          <CWidgetProgress className="mb-4" inverse color="success" variant="inverse" header="89.9%" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."/>
+          <CWidgetProgress className="mb-4" color="success" textColor="white" value="89.9%" title="Widget title" progressWhite progressValue={89.9} text="Lorem ipsum dolor sit amet enim."/>
         </CCol>
         <CCol xs="12" sm="6" lg="3">
-          <CWidgetProgress className="mb-4" inverse color="info" variant="inverse" header="12.124" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."/>
+          <CWidgetProgress className="mb-4" color="info" textColor="white" value="12.124" title="Widget title" progressWhite progressValue={89.9} text="Lorem ipsum dolor sit amet enim."/>
         </CCol>
         <CCol xs="12" sm="6" lg="3">
-          <CWidgetProgress className="mb-4" inverse color="warning" variant="inverse" header="$98.111,00" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."/>
+          <CWidgetProgress className="mb-4" color="warning" textColor="white" value="$98.111,00" title="Widget title" progressWhite progressValue={89.9} text="Lorem ipsum dolor sit amet enim."/>
         </CCol>
         <CCol xs="12" sm="6" lg="3">
-          <CWidgetProgress className="mb-4" inverse color="danger" variant="inverse" value={95} header="2 TB" text="Lorem ipsum..." footer="Lorem ipsum dolor sit amet enim."/>
+          <CWidgetProgress className="mb-4" color="primary" textColor="white" value="2 TB" title="Widget title" progressWhite progressValue={89.9} text="Lorem ipsum dolor sit amet enim." />
         </CCol>
       </CRow>
 
       <CRow>
         <CCol xs="12" sm="6" lg="3">
-          <CWidgetIcon text="income" header="$1.999,50" color="primary">
+          <CWidgetIcon className="mb-3" icon={<CIcon width={24} name="cil-settings" className="icon icon-xl"/>} iconPadding={3} title="income" value="$1.999,50" color="primary" />
-            <CIcon width={24} name="cil-settings"/>
-          </CWidgetIcon>
         </CCol>
         <CCol xs="12" sm="6" lg="3">
-          <CWidgetIcon text="income" header="$1.999,50" color="info">
+          <CWidgetIcon className="mb-3" icon={<CIcon width={24} name="cil-user" className="icon icon-xl"/>} iconPadding={3} title="income" value="$1.999,50" color="info"/>
-            <CIcon width={24} name="cil-user"/>
-          </CWidgetIcon>
         </CCol>
         <CCol xs="12" sm="6" lg="3">
-          <CWidgetIcon text="income" header="$1.999,50" color="warning">
+          <CWidgetIcon className="mb-3" icon={<CIcon width={24} name="cil-moon" className="icon icon-xl"/>} iconPadding={3}  title="income" value="$1.999,50" color="warning"/>
-            <CIcon width={24} name="cil-moon"/>
-          </CWidgetIcon>
         </CCol>
         <CCol xs="12" sm="6" lg="3">
-          <CWidgetIcon text="income" header="$1.999,50" color="danger">
+          <CWidgetIcon className="mb-3" icon={<CIcon width={24} name="cil-bell" className="icon icon-xl"/>} iconPadding={3} title="income" value="$1.999,50" color="danger"/>
-            <CIcon width={24} name="cil-bell"/>
-          </CWidgetIcon>
         </CCol>
         <CCol xs="12" sm="6" lg="3">
-          <CWidgetIcon text="income" header="$1.999,50" color="primary" iconPadding={false}>
+          <CWidgetIcon className="mb-3" icon={<CIcon width={24} name="cil-settings" className="icon icon-xl"/>} iconPadding={3}  title="income" value="$1.999,50" color="primary" footer={
-            <CIcon width={24} name="cil-settings"/>
+            <CLink
-          </CWidgetIcon>
+              className="font-weight-bold font-xs btn-block text-muted"
-        </CCol>
+              href="https://coreui.io/"
-        <CCol xs="12" sm="6" lg="3">
+              rel="noopener norefferer"
-          <CWidgetIcon text="income" header="$1.999,50" color="info" iconPadding={false}>
+              target="_blank"
-            <CIcon width={24} name="cil-laptop"/>
+            >
-          </CWidgetIcon>
+              View more
-        </CCol>
+              <CIcon name="cil-arrow-right" className="float-end" width="16"/>
-        <CCol xs="12" sm="6" lg="3">
+            </CLink>
-          <CWidgetIcon text="income" header="$1.999,50" color="warning" iconPadding={false}>
-            <CIcon width={24} name="cil-moon"/>
-          </CWidgetIcon>
-        </CCol>
-        <CCol xs="12" sm="6" lg="3">
-          <CWidgetIcon text="income" header="$1.999,50" color="danger" iconPadding={false}>
-            <CIcon width={24} name="cil-bell"/>
-          </CWidgetIcon>
-
-        </CCol>
-        <CCol xs="12" sm="6" lg="4">
-          <CWidgetIcon text="income" header="$1.999,50" color="primary" iconPadding={false}>
-            <CIcon width={24} name="cil-settings" className="mx-5"/>
-          </CWidgetIcon>
-        </CCol>
-        <CCol xs="12" sm="6" lg="4">
-          <CWidgetIcon text="income" header="$1.999,50" color="info" iconPadding={false}>
-            <CIcon width={24} name="cil-laptop" className="mx-5"/>
-          </CWidgetIcon>
-        </CCol>
-        <CCol xs="12" sm="6" lg="4">
-          <CWidgetIcon
-            text="income"
-            header="$1.999,50"
-            color="warning"
-            iconPadding={false}
-            footerSlot={
-              <CCardFooter className="card-footer px-3 py-2">
-                <CLink
-                 className="font-weight-bold font-xs btn-block text-muted"
-                  href="https://coreui.io/"
-                  rel="noopener norefferer"
-                  target="_blank"
-                >
-                  View more
-                  <CIcon name="cil-arrow-right" className="float-end" width="16"/>
-                </CLink>
-              </CCardFooter>
             }
-          >
+          />
-            <CIcon width={24} name="cil-moon" className="mx-5"/>
+        </CCol>
-          </CWidgetIcon>
+        <CCol xs="12" sm="6" lg="3">
+          <CWidgetIcon className="mb-3" icon={<CIcon width={24} name="cil-laptop" className="icon icon-xl"/>} iconPadding={3} title="income" value="$1.999,50" color="info" footer={
+            <CLink
+              className="font-weight-bold font-xs btn-block text-muted"
+              href="https://coreui.io/"
+              rel="noopener norefferer"
+              target="_blank"
+            >
+              View more
+              <CIcon name="cil-arrow-right" className="float-end" width="16"/>
+            </CLink>
+            }
+          />
+        </CCol>
+        <CCol xs="12" sm="6" lg="3">
+          <CWidgetIcon className="mb-3" icon={<CIcon width={24} name="cil-moon" className="icon icon-xl"/>} iconPadding={3} title="income" value="$1.999,50" color="warning" footer={
+            <CLink
+              className="font-weight-bold font-xs btn-block text-muted"
+              href="https://coreui.io/"
+              rel="noopener norefferer"
+              target="_blank"
+            >
+              View more
+              <CIcon name="cil-arrow-right" className="float-end" width="16"/>
+            </CLink>
+            }
+          />
+        </CCol>
+        <CCol xs="12" sm="6" lg="3">
+          <CWidgetIcon className="mb-3" icon={<CIcon width={24} name="cil-bell" className="icon icon-xl"/>} iconPadding={3} title="income" value="$1.999,50" color="danger" footer={
+            <CLink
+              className="font-weight-bold font-xs btn-block text-muted"
+              href="https://coreui.io/"
+              rel="noopener norefferer"
+              target="_blank"
+            >
+              View more
+              <CIcon name="cil-arrow-right" className="float-end" width="16"/>
+            </CLink>
+            }
+          />
+        </CCol>
+        <CCol xs="12" sm="6" lg="3">
+          <CWidgetIcon className="mb-3" padding={0} icon={<CIcon width={24} name="cil-settings" className="icon icon-xl"/>} iconPadding={4} title="income" value="$1.999,50" color="primary" />
+        </CCol>
+        <CCol xs="12" sm="6" lg="3">
+          <CWidgetIcon className="mb-3" padding={0} icon={<CIcon width={24} name="cil-user" className="icon icon-xl"/>} iconPadding={4} title="income" value="$1.999,50" color="info"/>
+        </CCol>
+        <CCol xs="12" sm="6" lg="3">
+          <CWidgetIcon className="mb-3" padding={0} icon={<CIcon width={24} name="cil-moon" className="icon icon-xl"/>} iconPadding={4}  title="income" value="$1.999,50" color="warning"/>
+        </CCol>
+        <CCol xs="12" sm="6" lg="3">
+          <CWidgetIcon className="mb-3" padding={0} icon={<CIcon width={24} name="cil-bell" className="icon icon-xl"/>} iconPadding={4} title="income" value="$1.999,50" color="danger"/>
         </CCol>
       </CRow>
       <WidgetsBrand/>
       <WidgetsBrand withCharts/>
       <CCardGroup className="mb-4">
         <CWidgetProgressIcon
-          header="87.500"
+          icon={<CIcon name="cil-people" className="icon icon-2xl"/>}
-          text="Visitors"
+          value="87.500"
-          color="info"
+          title="Visitors"
-        >
+          progressColor="info"
-          <CIcon name="cil-people" height="36"/>
+          progressValue={75}
-        </CWidgetProgressIcon>
+        />
         <CWidgetProgressIcon
-          header="385"
+          icon={<CIcon name="cil-userFollow" className="icon icon-2xl"/>}
-          text="New Clients"
+          value="385"
-          color="success"
+          title="New Clients"
-        >
+          progressColor="success"
-          <CIcon name="cil-userFollow" height="36"/>
+          progressValue={75}
-        </CWidgetProgressIcon>
+        />
         <CWidgetProgressIcon
-          header="1238"
+          icon={<CIcon name="cil-basket" className="icon icon-2xl"/>}
-          text="Products sold"
+          value="1238"
-          color="warning"
+          title="Products sold"
-        >
+          progressColor="warning"
-          <CIcon name="cil-basket" height="36"/>
+          progressValue={75}
-        </CWidgetProgressIcon>
+        />
         <CWidgetProgressIcon
-          header="28%"
+          icon={<CIcon name="cil-chartPie" className="icon icon-2xl"/>}
-          text="Returning Visitors"
+          value="28%"
-        >
+          title="Returning Visitors"
-          <CIcon name="cil-chartPie" height="36"/>
+          progressValue={75}
-        </CWidgetProgressIcon>
+        />
         <CWidgetProgressIcon
-          header="5:34:11"
+          icon={<CIcon name="cil-speedometer" className="icon icon-2xl"/>}
-          text="Avg. Time"
+          value="5:34:11"
-          color="danger"
+          title="Avg. Time"
-          progressSlot={
+          progressColor="danger"
-            <CProgress color="danger" size="xs" value={75} animated className="my-3"
+          progressValue={75}
-          />}
+        />
-        >
-          <CIcon name="cil-speedometer" height="36"/>
-        </CWidgetProgressIcon>
-      </CCardGroup>
-      <CCardGroup className="mb-4">
-        <CWidgetProgressIcon
-          header="87.500"
-          text="Visitors"
-          color="info"
-          inverse
-        >
-          <CIcon name="cil-people" height="36"/>
-        </CWidgetProgressIcon>
-        <CWidgetProgressIcon
-          header="385"
-          text="New Clients"
-          color="success"
-          inverse
-        >
-          <CIcon name="cil-userFollow" height="36"/>
-        </CWidgetProgressIcon>
-        <CWidgetProgressIcon
-          header="1238"
-          text="Products sold"
-          color="warning"
-          inverse
-        >
-          <CIcon name="cil-basket" height="36"/>
-        </CWidgetProgressIcon>
-        <CWidgetProgressIcon
-          header="28%"
-          text="Returning Visitors"
-          color="primary"
-          inverse
-        >
-          <CIcon name="cil-chartPie" height="36"/>
-        </CWidgetProgressIcon>
-        <CWidgetProgressIcon
-          header="5:34:11"
-          text="Avg. Time"
-          color="danger"
-          inverse
-        >
-          <CIcon name="cil-speedometer" height="36"/>
-        </CWidgetProgressIcon>
       </CCardGroup>
       <CRow>
         <CCol sm="6" md="2">
           <CWidgetProgressIcon
-            header="87.500"
+            icon={<CIcon name="cil-people" height="36"/>}
-            text="Visitors"
+            value="87.500"
-            color="info"
+            title="Visitors"
-          >
+            progressColor="info"
-            <CIcon name="cil-people" height="36"/>
+            progressValue={75}
-          </CWidgetProgressIcon>
+          />
         </CCol>
         <CCol sm="6" md="2">
           <CWidgetProgressIcon
-            header="385"
+            icon={<CIcon name="cil-userFollow" height="36"/>}
-            text="New Clients"
+            value="385"
-            color="success"
+            title="New Clients"
-          >
+            progressColor="success"
-            <CIcon name="cil-userFollow" height="36"/>
+            progressValue={75}
-          </CWidgetProgressIcon>
+          />
         </CCol>
         <CCol sm="6" md="2">
           <CWidgetProgressIcon
-            header="1238"
+            icon={<CIcon name="cil-basket" height="36"/>}
-            text="Products sold"
+            value="1238"
-            color="warning"
+            title="Products sold"
-          >
+            progressColor="warning"
-            <CIcon name="cil-basket" height="36"/>
+            progressValue={75}
-          </CWidgetProgressIcon>
+          />
         </CCol>
         <CCol sm="6" md="2">
           <CWidgetProgressIcon
-            header="28%"
+            icon={<CIcon name="cil-chartPie" height="36"/>}
-            text="Returning Visitors"
+            value="28%"
-            color="primary"
+            title="Returning Visitors"
-          >
+            progressColor="primary"
-            <CIcon name="cil-chartPie" height="36"/>
+            progressValue={75}
-          </CWidgetProgressIcon>
+          />
         </CCol>
         <CCol sm="6" md="2">
           <CWidgetProgressIcon
-            header="5:34:11"
+            icon={<CIcon name="cil-speedometer" height="36"/>}
-            text="Avg. Time"
+            value="5:34:11"
-            color="danger"
+            title="Avg. Time"
-          >
+            progressColor="danger"
-            <CIcon name="cil-speedometer" height="36"/>
+            progressValue={75}
-          </CWidgetProgressIcon>
+          />
         </CCol>
         <CCol sm="6" md="2">
           <CWidgetProgressIcon
-            header="972"
+            icon={<CIcon name="cil-speech" height="36"/>}
-            text="comments"
+            value="972"
-            color="info"
+            title="comments"
-          >
+            progressColor="info"
-            <CIcon name="cil-speech" height="36"/>
+            progressValue={75}
-          </CWidgetProgressIcon>
+          />
         </CCol>
       </CRow>
       <CRow>
         <CCol sm="6" md="2">
           <CWidgetProgressIcon
-            header="87.500"
-            text="Visitors"
             color="info"
-            inverse
+            icon={<CIcon name="cil-people" height="36"/>}
-          >
+            value="87.500"
-            <CIcon name="cil-people" height="36"/>
+            title="Visitors"
-          </CWidgetProgressIcon>
+            progressValue={75}
+            progressWhite
+          />
         </CCol>
         <CCol sm="6" md="2">
           <CWidgetProgressIcon
-            header="385"
-            text="New Clients"
             color="success"
-            inverse
+            icon={<CIcon name="cil-userFollow" height="36"/>}
-          >
+            value="385"
-            <CIcon name="cil-userFollow" height="36"/>
+            title="New Clients"
-          </CWidgetProgressIcon>
+            progressValue={75}
+            progressWhite
+          />
         </CCol>
         <CCol sm="6" md="2">
           <CWidgetProgressIcon
-            header="1238"
-            text="Products sold"
             color="warning"
-            inverse
+            icon={<CIcon name="cil-basket" height="36"/>}
-          >
+            value="1238"
-            <CIcon name="cil-basket" height="36"/>
+            title="Products sold"
-          </CWidgetProgressIcon>
+            progressValue={75}
+            progressWhite
+          />
         </CCol>
         <CCol sm="6" md="2">
           <CWidgetProgressIcon
-            header="28%"
-            text="Returning Visitors"
             color="primary"
-            inverse
+            icon={<CIcon name="cil-chartPie" height="36"/>}
-          >
+            value="28%"
-            <CIcon name="cil-chartPie" height="36"/>
+            title="Returning Visitors"
-          </CWidgetProgressIcon>
+            progressValue={75}
+            progressWhite
+          />
         </CCol>
         <CCol sm="6" md="2">
           <CWidgetProgressIcon
-            header="5:34:11"
-            text="Avg. Time"
             color="danger"
-            inverse
+            icon={<CIcon name="cil-speedometer" height="36"/>}
-          >
+            value="5:34:11"
-            <CIcon name="cil-speedometer" height="36"/>
+            title="Avg. Time"
-          </CWidgetProgressIcon>
+            progressValue={75}
+            progressWhite
+          />
         </CCol>
         <CCol sm="6" md="2">
           <CWidgetProgressIcon
-            header="972"
-            text="comments"
             color="info"
-            inverse
+            icon={<CIcon name="cil-speech" height="36"/>}
-          >
+            value="972"
-            <CIcon name="cil-speech" height="36"/>
+            title="comments"
-          </CWidgetProgressIcon>
+            progressValue={75}
+            progressWhite
+          />
         </CCol>
       </CRow>
       <CRow>
         <CCol sm="4" lg="2">
-          <CWidgetSimple header="title" text="1,123">
+          <CWidgetSimple title="title" value="1,123">
             <ChartLineSimple style={{ height: '40px' }} borderColor="danger"/>
           </CWidgetSimple>
         </CCol>
         <CCol sm="4" lg="2">
-          <CWidgetSimple header="title" text="1,123">
+          <CWidgetSimple title="title" value="1,123">
             <ChartLineSimple style={{ height: '40px' }} borderColor="primary"/>
           </CWidgetSimple>
         </CCol>
         <CCol sm="4" lg="2">
-          <CWidgetSimple header="title" text="1,123">
+          <CWidgetSimple title="title" value="1,123">
             <ChartLineSimple style={{ height: '40px' }} borderColor="success"/>
           </CWidgetSimple>
         </CCol>
         <CCol sm="4" lg="2">
-          <CWidgetSimple header="title" text="1,123">
+          <CWidgetSimple title="title" value="1,123">
             <ChartBarSimple style={{ height: '40px' }} backgroundColor="danger"/>
           </CWidgetSimple>
         </CCol>
         <CCol sm="4" lg="2">
-          <CWidgetSimple header="title" text="1,123">
+          <CWidgetSimple title="title" value="1,123">
             <ChartBarSimple style={{ height: '40px' }} backgroundColor="primary"/>
           </CWidgetSimple>
         </CCol>
         <CCol sm="4" lg="2">
-          <CWidgetSimple header="title" text="1,123">
+          <CWidgetSimple title="title" value="1,123">
             <ChartBarSimple style={{ height: '40px' }} backgroundColor="success"/>
           </CWidgetSimple>
         </CCol>

src/views/widgets/WidgetsBrand.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { CWidgetBrand, CRow, CCol } from '@coreui/react';
+import { CWidgetBrand, CRow, CCol } from '@coreui/react-ts';
 import CIcon from '@coreui/icons-react';
 import ChartLineSimple from '../charts/ChartLineSimple';
 
@@ -13,179 +13,169 @@ const WidgetsBrand = ({withCharts})=>{
     <CCol sm="6" lg="3">
       <CWidgetBrand
         className="mb-4"
-        rightHeader="89k"
+        headerChildren={
-        rightFooter="friends"
+          <>
-        leftHeader="459"
+            <CIcon
-        leftFooter="feeds"
+             name="cib-facebook"
+             height="52"
+             className="my-4 text-white"
+            />
+            <ChartLineSimple
+              className="position-absolute w-100 h-100"
+              backgroundColor="rgba(255,255,255,.1)"
+              dataPoints={[65, 59, 84, 84, 51, 55, 40]}
+              label="Friends"
+              labels="months"
+            />
+          </>
+        }
+        values={[['89k', 'friends'], ['459', 'feeds']]}
         style={{
           "--cui-card-cap-bg": "#3b5998"
         }}
-      >
+      />
-        <CIcon
-          name="cib-facebook"
-          height="52"
-          className="my-4"
-        />
-        <ChartLineSimple
-          className="position-absolute w-100 h-100"
-          backgroundColor="rgba(255,255,255,.1)"
-          dataPoints={[65, 59, 84, 84, 51, 55, 40]}
-          label="Friends"
-          labels="months"
-        />
-      </CWidgetBrand>
     </CCol>
 
     <CCol sm="6" lg="3">
       <CWidgetBrand
         className="mb-4"
-        rightHeader="973k"
+        headerChildren={
-        rightFooter="followers"
+          <>
-        leftHeader="1.792"
+            <CIcon
-        leftFooter="tweets"
+              name="cib-twitter"
+              height="52"
+              className="my-4 text-white"
+            />
+            <ChartLineSimple
+              className="position-absolute w-100 h-100"
+              backgroundColor="rgba(255,255,255,.1)"
+              dataPoints={[1, 13, 9, 17, 34, 41, 38]}
+              label="Followers"
+              labels="months"
+            />
+          </>
+        }
+        values={[['973k', 'followers'], ['1.792', 'tweets']]}
         style={{
           "--cui-card-cap-bg": "#00aced"
         }}
-      >
+      />
-        <CIcon
-          name="cib-twitter"
-          height="52"
-          className="my-4"
-        />
-        <ChartLineSimple
-          className="position-absolute w-100 h-100"
-          backgroundColor="rgba(255,255,255,.1)"
-          dataPoints={[1, 13, 9, 17, 34, 41, 38]}
-          label="Followers"
-          labels="months"
-        />
-      </CWidgetBrand>
     </CCol>
 
     <CCol sm="6" lg="3">
       <CWidgetBrand
         className="mb-4"
-        rightHeader="500+"
+        headerChildren={
-        rightFooter="contracts"
+          <>
-        leftHeader="292"
+            <CIcon
-        leftFooter="feeds"
+              name="cib-linkedin"
+              height="52"
+              className="my-4 text-white"
+            />
+            <ChartLineSimple
+              className="position-absolute w-100 h-100"
+              backgroundColor="rgba(255,255,255,.1)"
+              dataPoints={[78, 81, 80, 45, 34, 12, 40]}
+              label="Contacts"
+              labels="months"
+            />
+          </>
+        }
+        values={[['500+', 'contacts'], ['292', 'feeds']]}
         style={{
           "--cui-card-cap-bg": "#4875b4"
         }}
-      >
+      />
-        <CIcon
-          name="cib-linkedin"
-          height="52"
-          className="my-4"
-        />
-        <ChartLineSimple
-          className="position-absolute w-100 h-100"
-          backgroundColor="rgba(255,255,255,.1)"
-          dataPoints={[78, 81, 80, 45, 34, 12, 40]}
-          label="Contracts"
-          labels="months"
-        />
-      </CWidgetBrand>
     </CCol>
 
     <CCol sm="6" lg="3">
       <CWidgetBrand
         className="mb-4"
-        rightHeader="12"
-        rightFooter="events"
-        leftHeader="4"
-        leftFooter="meetings"
         color="warning"
-      >
+        headerChildren={
-        <CIcon
+          <>
-          name="cil-calendar"
+            <CIcon
-          height="52"
+              name="cil-calendar"
-          className="my-4"
+              height="52"
-        />
+              className="my-4 text-white"
-        <ChartLineSimple
+            />
-          className="position-absolute w-100 h-100"
+            <ChartLineSimple
-          backgroundColor="rgba(255,255,255,.1)"
+              className="position-absolute w-100 h-100"
-          dataPoints={[35, 23, 56, 22, 97, 23, 64]}
+              backgroundColor="rgba(255,255,255,.1)"
-          label="Followers"
+              dataPoints={[35, 23, 56, 22, 97, 23, 64]}
-          labels="months"
+              label="Followers"
-        />
+              labels="months"
-      </CWidgetBrand>
+            />
+          </>
+        }
+        values={[['12+', 'events'], ['4', 'meetings']]}
+      />
     </CCol>
-  </CRow> :
+  </CRow> : <CRow>
-
-  <CRow>
     <CCol sm="6" lg="3">
       <CWidgetBrand
         className="mb-4"
-        rightHeader="89k"
+        headerChildren={
-        rightFooter="friends"
+          <CIcon
-        leftHeader="459"
+            name="cib-twitter"
-        leftFooter="feeds"
+            height="52"
+            className="my-4 text-white"
+          />
+        }
+        values={[['89k', 'friends'], ['459', 'feeds']]}
         style={{
           "--cui-card-cap-bg": "#3b5998"
         }}
-      >
+      />
-        <CIcon
-          name="cib-facebook"
-          height="56"
-          className="my-4"
-        />
-      </CWidgetBrand>
     </CCol>
 
     <CCol sm="6" lg="3">
       <CWidgetBrand
         className="mb-4"
-        rightHeader="973k"
+        headerChildren={
-        rightFooter="followers"
+          <CIcon
-        leftHeader="1.792"
+            name="cib-twitter"
-        leftFooter="tweets"
+            height="52"
+            className="my-4 text-white"
+          />
+        }
+        values={[['973k', 'followers'], ['1.792', 'tweets']]}
         style={{
           "--cui-card-cap-bg": "#00aced"
         }}
-      >
+      />
-        <CIcon
-          name="cib-twitter"
-          height="56"
-          className="my-4"
-        />
-      </CWidgetBrand>
     </CCol>
 
     <CCol sm="6" lg="3">
       <CWidgetBrand
         className="mb-4"
-        rightHeader="500+"
+        headerChildren={
-        rightFooter="contracts"
+          <CIcon
-        leftHeader="292"
+            name="cib-linkedin"
-        leftFooter="feeds"
+            height="52"
+            className="my-4 text-white"
+          />
+        }
+        values={[['500+', 'contacts'], ['292', 'feeds']]}
         style={{
           "--cui-card-cap-bg": "#4875b4"
         }}
-      >
+      />
-        <CIcon
-          name="cib-linkedin"
-          height="56"
-          className="my-4"
-        />
-      </CWidgetBrand>
     </CCol>
 
     <CCol sm="6" lg="3">
       <CWidgetBrand
         className="mb-4"
-        rightHeader="12"
-        rightFooter="events"
-        leftHeader="4"
-        leftFooter="meetings"
         color="warning"
-      >
+        headerChildren={
-        <CIcon
+          <CIcon
-          name="cil-calendar"
+            name="cil-calendar"
-          height="56"
+            height="52"
-          className="my-4"
+            className="my-4 text-white"
-        />
+          />
-      </CWidgetBrand>
+        }
+        values={[['12+', 'events'], ['4', 'meetings']]}
+      />
     </CCol>
   </CRow>
 }

src/views/widgets/WidgetsDropdown.js

@@ -1,12 +1,12 @@
 import React from 'react'
-import { CWidgetDropdown } from '@coreui/react'
 import {
   CRow,
   CCol,
   CDropdown,
   CDropdownMenu,
   CDropdownItem,
-  CDropdownToggle
+  CDropdownToggle,
+  CWidgetDropdown
 } from '@coreui/react-ts'
 import CIcon from '@coreui/icons-react'
 import ChartLineSimple from '../charts/ChartLineSimple'
@@ -19,12 +19,26 @@ const WidgetsDropdown = () => {
       <CCol sm="6" lg="3">
         <CWidgetDropdown className="mb-4"
           color="primary"
-          header="9.823"
+          value="9.823"
-          text="Members online"
+          title="Members online"
-          footerSlot={
+          action={
+            <CDropdown>
+              <CDropdownToggle color="transparent" caret={false}>
+                <CIcon name="cil-options" className="text-high-emphasis-inverse"/>
+              </CDropdownToggle>
+              {/* TODO: placement doesn't work */}
+              <CDropdownMenu placement="bottom-end">
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownItem>Another action</CDropdownItem>
+                <CDropdownItem>Something else here...</CDropdownItem>
+                <CDropdownItem disabled>Disabled action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+          }
+          chart={
             <ChartLineSimple
               pointed
-              className="c-chart-wrapper mt-3 mx-3"
+              className="chart-wrapper mt-3 mx-3"
               style={{height: '70px'}}
               dataPoints={[65, 59, 84, 84, 51, 55, 40]}
               pointHoverBackgroundColor="primary"
@@ -32,27 +46,28 @@ const WidgetsDropdown = () => {
               labels="months"
             />
           }
-        >
+        />
-          <CDropdown>
-            <CDropdownToggle color="transparent">
-              <CIcon name="cil-settings"/>
-            </CDropdownToggle>
-            <CDropdownMenu placement="bottom-end">
-              <CDropdownItem>Action</CDropdownItem>
-              <CDropdownItem>Another action</CDropdownItem>
-              <CDropdownItem>Something else here...</CDropdownItem>
-              <CDropdownItem disabled>Disabled action</CDropdownItem>
-            </CDropdownMenu>
-          </CDropdown>
-        </CWidgetDropdown>
       </CCol>
 
       <CCol sm="6" lg="3">
         <CWidgetDropdown className="mb-4"
           color="info"
-          header="9.823"
+          value="9.823"
-          text="Members online"
+          title="Members online"
-          footerSlot={
+          action={
+            <CDropdown>
+              <CDropdownToggle color="transparent" caret={false}>
+                <CIcon name="cil-options" className="text-high-emphasis-inverse"/>
+              </CDropdownToggle>
+              <CDropdownMenu placement="bottom-end">
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownItem>Another action</CDropdownItem>
+                <CDropdownItem>Something else here...</CDropdownItem>
+                <CDropdownItem disabled>Disabled action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+          }
+          chart={
             <ChartLineSimple
               pointed
               className="mt-3 mx-3"
@@ -64,27 +79,28 @@ const WidgetsDropdown = () => {
               labels="months"
             />
           }
-        >
+        />
-          <CDropdown>
-            <CDropdownToggle caret={false} color="transparent">
-              <CIcon name="cil-location-pin"/>
-            </CDropdownToggle>
-            <CDropdownMenu placement="bottom-end">
-              <CDropdownItem>Action</CDropdownItem>
-              <CDropdownItem>Another action</CDropdownItem>
-              <CDropdownItem>Something else here...</CDropdownItem>
-              <CDropdownItem disabled>Disabled action</CDropdownItem>
-            </CDropdownMenu>
-          </CDropdown>
-        </CWidgetDropdown>
       </CCol>
 
       <CCol sm="6" lg="3">
         <CWidgetDropdown className="mb-4"
           color="warning"
-          header="9.823"
+          value="9.823"
-          text="Members online"
+          title="Members online"
-          footerSlot={
+          action={
+            <CDropdown>
+              <CDropdownToggle color="transparent" caret={false}>
+                <CIcon name="cil-options" className="text-high-emphasis-inverse"/>
+              </CDropdownToggle>
+              <CDropdownMenu placement="bottom-end">
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownItem>Another action</CDropdownItem>
+                <CDropdownItem>Something else here...</CDropdownItem>
+                <CDropdownItem disabled>Disabled action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+          }
+          chart={
             <ChartLineSimple
               className="mt-3"
               style={{height: '70px'}}
@@ -96,27 +112,28 @@ const WidgetsDropdown = () => {
               labels="months"
             />
           }
-        >
+        />
-          <CDropdown>
-            <CDropdownToggle color="transparent">
-              <CIcon name="cil-settings"/>
-            </CDropdownToggle>
-            <CDropdownMenu placement="bottom-end">
-              <CDropdownItem>Action</CDropdownItem>
-              <CDropdownItem>Another action</CDropdownItem>
-              <CDropdownItem>Something else here...</CDropdownItem>
-              <CDropdownItem disabled>Disabled action</CDropdownItem>
-            </CDropdownMenu>
-          </CDropdown>
-        </CWidgetDropdown>
       </CCol>
 
       <CCol sm="6" lg="3">
         <CWidgetDropdown className="mb-4"
           color="danger"
-          header="9.823"
+          value="9.823"
-          text="Members online"
+          title="Members online"
-          footerSlot={
+          action={
+            <CDropdown>
+              <CDropdownToggle color="transparent" caret={false}>
+                <CIcon name="cil-options" className="text-high-emphasis-inverse"/>
+              </CDropdownToggle>
+              <CDropdownMenu placement="bottom-end">
+                <CDropdownItem>Action</CDropdownItem>
+                <CDropdownItem>Another action</CDropdownItem>
+                <CDropdownItem>Something else here...</CDropdownItem>
+                <CDropdownItem disabled>Disabled action</CDropdownItem>
+              </CDropdownMenu>
+            </CDropdown>
+          }
+          chart={
             <ChartBarSimple
               className="mt-3 mx-3"
               style={{height: '70px'}}
@@ -125,19 +142,7 @@ const WidgetsDropdown = () => {
               labels="months"
             />
           }
-        >
+        />
-          <CDropdown>
-            <CDropdownToggle caret className="text-white" color="transparent">
-              <CIcon name="cil-settings"/>
-            </CDropdownToggle>
-            <CDropdownMenu placement="bottom-end">
-              <CDropdownItem>Action</CDropdownItem>
-              <CDropdownItem>Another action</CDropdownItem>
-              <CDropdownItem>Something else here...</CDropdownItem>
-              <CDropdownItem disabled>Disabled action</CDropdownItem>
-            </CDropdownMenu>
-          </CDropdown>
-        </CWidgetDropdown>
       </CCol>
     </CRow>
   )