styles: improve syntax using prettier

src/App.js

@@ -1,6 +1,6 @@
-import React, { Component } from 'react';
+import React, { Component } from 'react'
-import { HashRouter, Route, Switch } from 'react-router-dom';
+import { HashRouter, Route, Switch } from 'react-router-dom'
-import './scss/style.scss';
+import './scss/style.scss'
 
 const loading = (
   <div className="pt-3 text-center">
@@ -9,31 +9,35 @@ const loading = (
 )
 
 // Containers
-const DefaultLayout = React.lazy(() => import('./layout/DefaultLayout'));
+const DefaultLayout = React.lazy(() => import('./layout/DefaultLayout'))
 
 // Pages
-const Login = React.lazy(() => import('./views/pages/login/Login'));
+const Login = React.lazy(() => import('./views/pages/login/Login'))
-const Register = React.lazy(() => import('./views/pages/register/Register'));
+const Register = React.lazy(() => import('./views/pages/register/Register'))
-const Page404 = React.lazy(() => import('./views/pages/page404/Page404'));
+const Page404 = React.lazy(() => import('./views/pages/page404/Page404'))
-const Page500 = React.lazy(() => import('./views/pages/page500/Page500'));
+const Page500 = React.lazy(() => import('./views/pages/page500/Page500'))
 
 class App extends Component {
-
   render() {
     return (
       <HashRouter>
         <React.Suspense fallback={loading}>
           <Switch>
-              <Route exact path="/login" name="Login Page" render={props => <Login {...props}/>} />
+            <Route exact path="/login" name="Login Page" render={(props) => <Login {...props} />} />
-              <Route exact path="/register" name="Register Page" render={props => <Register {...props}/>} />
+            <Route
-              <Route exact path="/404" name="Page 404" render={props => <Page404 {...props}/>} />
+              exact
-              <Route exact path="/500" name="Page 500" render={props => <Page500 {...props}/>} />
+              path="/register"
-              <Route path="/" name="Home" render={props => <DefaultLayout {...props}/>} />
+              name="Register Page"
+              render={(props) => <Register {...props} />}
+            />
+            <Route exact path="/404" name="Page 404" render={(props) => <Page404 {...props} />} />
+            <Route exact path="/500" name="Page 500" render={(props) => <Page500 {...props} />} />
+            <Route path="/" name="Home" render={(props) => <DefaultLayout {...props} />} />
           </Switch>
         </React.Suspense>
       </HashRouter>
-    );
+    )
   }
 }
 
-export default App;
+export default App

src/App.test.js

@@ -4,18 +4,17 @@ import App from './App'
 import ChartLineSimple from './views/charts/ChartLineSimple'
 import Dashboard from './views/dashboard/Dashboard.js'
 
-
 it('mounts App without crashing', () => {
-  const wrapper = shallow(<App/>)
+  const wrapper = shallow(<App />)
   wrapper.unmount()
 })
 
 it('mounts Dashboard without crashing', () => {
-  const wrapper = shallow(<Dashboard/>)
+  const wrapper = shallow(<Dashboard />)
   wrapper.unmount()
 })
 
 it('mounts Charts without crashing', () => {
-  const wrapper = shallow(<ChartLineSimple/> )
+  const wrapper = shallow(<ChartLineSimple />)
   wrapper.unmount()
 })

src/assets/icons/index.js

@@ -26,16 +26,9 @@ import {
   cibStripe,
   cibPaypal,
   cibGooglePay,
-  cibCcAmex
+  cibCcAmex,
-} from '@coreui/icons'
-import {
-  cifUs,
-  cifBr,
-  cifIn,
-  cifFr,
-  cifEs,
-  cifPl
 } from '@coreui/icons'
+import { cifUs, cifBr, cifIn, cifFr, cifEs, cifPl } from '@coreui/icons'
 import {
   cilAlignCenter,
   cilAlignLeft,
@@ -127,14 +120,17 @@ import {
   cilUserUnfollow,
   cilX,
   cilXCircle,
-  cilWarning
+  cilWarning,
 } from '@coreui/icons'
 
-export const icons = Object.assign({}, {
+export const icons = Object.assign(
+  {},
+  {
     sygnet,
     logo,
-  logoNegative
+    logoNegative,
-}, {
+  },
+  {
     cilAlignCenter,
     cilAlignLeft,
     cilAlignRight,
@@ -225,15 +221,17 @@ export const icons = Object.assign({}, {
     cilUserUnfollow,
     cilX,
     cilXCircle,
-  cilWarning
+    cilWarning,
-}, {
+  },
+  {
     cifUs,
     cifBr,
     cifIn,
     cifFr,
     cifEs,
-  cifPl
+    cifPl,
-}, {
+  },
+  {
     cibSkype,
     cibFacebook,
     cibTwitter,
@@ -257,5 +255,6 @@ export const icons = Object.assign({}, {
     cibStripe,
     cibPaypal,
     cibGooglePay,
-  cibCcAmex
+    cibCcAmex,
-})
+  },
+)

src/assets/icons/logo-negative.js

@@ -1,4 +1,6 @@
-export const logoNegative = ['608 134', `
+export const logoNegative = [
+  '608 134',
+  `
   <title>coreui react pro logo</title>
   <g>
     <g style="fill:#80d0ff;">
@@ -27,4 +29,5 @@ export const logoNegative = ['608 134', `
       </g>
     </g>
   </g>
-`]
+`,
+]

src/assets/icons/logo.js

@@ -1,4 +1,6 @@
-export const logo = ['608 134', `
+export const logo = [
+  '608 134',
+  `
   <title>coreui react pro</title>
   <g>
     <g style="fill:#00a1ff">
@@ -26,4 +28,5 @@ export const logo = ['608 134', `
       </g>
     </g>
   </g>
-`]
+`,
+]

src/assets/icons/sygnet.js

@@ -1,4 +1,6 @@
-export const sygnet = ['160 160', `
+export const sygnet = [
+  '160 160',
+  `
   <title>coreui logo</title>
   <g>
     <g style="fill:#fff;">
@@ -6,4 +8,5 @@ export const sygnet = ['160 160', `
       <path d="M103.0216,93.0379h-2.866a4,4,0,0,0-1.9246.4935L80.95,103.0167,61,91.4981V68.5206L80.95,57.002l17.2894,9.455a4,4,0,0,0,1.9192.4905h2.8632a2,2,0,0,0,2-2V62.2357a2,2,0,0,0-1.04-1.7547L84.793,49.9854a8.0391,8.0391,0,0,0-7.8428.09L57,61.5929A8.0243,8.0243,0,0,0,53,68.5216v22.976a8,8,0,0,0,4,6.9283l19.95,11.5185a8.0422,8.0422,0,0,0,7.8433.0879l19.19-10.5311a2,2,0,0,0,1.0378-1.7534v-2.71A2,2,0,0,0,103.0216,93.0379Z"/>
     </g>
   </g>
-`]
+`,
+]

src/components/AppBreadcrumb.js

@@ -1,16 +1,16 @@
 import React from 'react'
-import { useLocation } from "react-router-dom";
+import { useLocation } from 'react-router-dom'
 
-import routes from "../routes";
+import routes from '../routes'
 
-import { CBreadcrumb, CBreadcrumbItem } from '@coreui/react-ts';
+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)
+    const currentRoute = routes.find((route) => route.path === pathname)
     return currentRoute.name
   }
 
@@ -19,9 +19,9 @@ const AppBreadcrumb = () => {
     location.split('/').reduce((prev, curr, index, array) => {
       const currentPathname = `${prev}/${curr}`
       breadcrumbs.push({
-        'pathname': currentPathname,
+        pathname: currentPathname,
-        'name': getRouteName(currentPathname, routes),
+        name: getRouteName(currentPathname, routes),
-        'active': index + 1 === array.length ? true : false
+        active: index + 1 === array.length ? true : false,
       })
       return currentPathname
     })
@@ -33,18 +33,16 @@ const AppBreadcrumb = () => {
   return (
     <CBreadcrumb className="m-0">
       <CBreadcrumbItem href="/">Home</CBreadcrumbItem>
-      {
+      {breadcrumbs.map((breadcrumb, index) => {
-        breadcrumbs.map((breadcrumb, index) => {
         return (
           <CBreadcrumbItem
-              {...(breadcrumb.active ? { 'active': true } : { 'href': breadcrumb.pathname })}
+            {...(breadcrumb.active ? { active: true } : { href: breadcrumb.pathname })}
             key={index}
           >
             {breadcrumb.name}
           </CBreadcrumbItem>
         )
-        })
+      })}
-      }
     </CBreadcrumb>
   )
 }

src/components/AppFooter.js

@@ -5,12 +5,16 @@ const AppFooter = () => {
   return (
     <CFooter>
       <div>
-        <a href="https://coreui.io" target="_blank" rel="noopener noreferrer">CoreUI</a>
+        <a href="https://coreui.io" target="_blank" rel="noopener noreferrer">
+          CoreUI
+        </a>
         <span className="ms-1">&copy; 2020 creativeLabs.</span>
       </div>
       <div className="ms-auto">
         <span className="me-1">Powered by</span>
-        <a href="https://coreui.io/react" target="_blank" rel="noopener noreferrer">CoreUI for React</a>
+        <a href="https://coreui.io/react" target="_blank" rel="noopener noreferrer">
+          CoreUI for React
+        </a>
       </div>
     </CFooter>
   )

src/components/AppHeader.js

@@ -1,6 +1,6 @@
-import React from "react";
+import React from 'react'
-import { NavLink } from "react-router-dom";
+import { NavLink } from 'react-router-dom'
-import { useSelector, useDispatch } from "react-redux";
+import { useSelector, useDispatch } from 'react-redux'
 import {
   CContainer,
   CHeader,
@@ -10,8 +10,8 @@ import {
   CHeaderToggler,
   CNavLink,
   CNavItem,
-} from "@coreui/react-ts";
+} from '@coreui/react-ts'
-import CIcon from "@coreui/icons-react";
+import CIcon from '@coreui/icons-react'
 
 import {
   AppBreadcrumb,
@@ -19,57 +19,39 @@ import {
   AppHeaderDropdownMssg,
   AppHeaderDropdownNotif,
   AppHeaderDropdownTasks,
-} from "../containers/index";
+} from '../containers/index'
 
 const AppHeader = () => {
-  const dispatch = useDispatch();
+  const dispatch = useDispatch()
-  const sidebarShow = useSelector((state) => state.sidebarShow);
+  const sidebarShow = useSelector((state) => state.sidebarShow)
 
   const toggleSidebar = () => {
-    const val = [true, "responsive"].includes(sidebarShow)
+    const val = [true, 'responsive'].includes(sidebarShow) ? false : 'responsive'
-      ? false
+    dispatch({ type: 'set', sidebarShow: val })
-      : "responsive";
+  }
-    dispatch({ type: "set", sidebarShow: val });
-  };
 
   const toggleSidebarMobile = () => {
-    const val = [false, "responsive"].includes(sidebarShow)
+    const val = [false, 'responsive'].includes(sidebarShow) ? true : 'responsive'
-      ? true
+    dispatch({ type: 'set', sidebarShow: val })
-      : "responsive";
+  }
-    dispatch({ type: "set", sidebarShow: val });
-  };
 
   return (
     <CHeader position="sticky" className="mb-4">
       <CContainer fluid>
-        <CHeaderToggler
+        <CHeaderToggler inHeader className="ms-md-3 d-lg-none" onClick={toggleSidebarMobile} />
-          inHeader
+        <CHeaderToggler inHeader className="ms-3 d-md-down-none" onClick={toggleSidebar} />
-          className="ms-md-3 d-lg-none"
-          onClick={toggleSidebarMobile}
-        />
-        <CHeaderToggler
-          inHeader
-          className="ms-3 d-md-down-none"
-          onClick={toggleSidebar}
-        />
         <CHeaderBrand className="mx-auto d-lg-none" to="/">
           <CIcon name="logo" height="48" alt="Logo" />
         </CHeaderBrand>
 
         <CHeaderNav className="d-md-down-none me-auto">
           <CNavItem>
-            <CNavLink
+            <CNavLink to="/dashboard" component={NavLink} activeClassName="active">
-              to="/dashboard"
-              component={NavLink}
-              activeClassName="active"
-            >
               Dashboard
             </CNavLink>
           </CNavItem>
           <CNavItem>
-            <CNavLink to="/users" component={NavLink} activeClassName="active">
+            <CNavLink>Users</CNavLink>
-              Users
-            </CNavLink>
           </CNavItem>
           <CNavItem>
             <CNavLink>Settings</CNavLink>
@@ -85,10 +67,10 @@ const AppHeader = () => {
       </CContainer>
       <CHeaderDivider />
       <CContainer fluid>
-        <AppBreadcrumb/>
+        <AppBreadcrumb />
       </CContainer>
     </CHeader>
-  );
+  )
-};
+}
 
 export default AppHeader

src/components/AppSidebar.js

@@ -16,7 +16,7 @@ import navigation from '../containers/_nav'
 
 const AppSidebar = () => {
   const dispatch = useDispatch()
-  const unfoldable = useSelector(state => state.sidebarUnfoldable)
+  const unfoldable = useSelector((state) => state.sidebarUnfoldable)
   // const visible = useSelector(state => state.sidebarUnfoldable)
 
   return (
@@ -28,23 +28,16 @@ const AppSidebar = () => {
       // onShowChange={(val) => dispatch({type: 'set', sidebarShow: val })}
     >
       <CSidebarBrand className="d-md-down-none" to="/">
-        <CIcon
+        <CIcon className="sidebar-brand-full" name="logo-negative" height={35} />
-          className="sidebar-brand-full"
+        <CIcon className="sidebar-brand-narrow" name="sygnet" height={35} />
-          name="logo-negative"
-          height={35}
-        />
-        <CIcon
-          className="sidebar-brand-narrow"
-          name="sygnet"
-          height={35}
-        />
       </CSidebarBrand>
       <CSidebarNav>
-        <CCreateNavItem
+        <CCreateNavItem items={navigation} />
-          items={navigation}
-        />
       </CSidebarNav>
-      <CSidebarToggler className="c-d-md-down-none" onClick={() => dispatch({ type: 'set', sidebarUnfoldable: !unfoldable })}/>
+      <CSidebarToggler
+        className="c-d-md-down-none"
+        onClick={() => dispatch({ type: 'set', sidebarUnfoldable: !unfoldable })}
+      />
     </CSidebar>
   )
 }

src/components/header/AppHeaderDropdown.js

@@ -13,41 +13,44 @@ import CIcon from '@coreui/icons-react'
 
 const AppHeaderDropdown = () => {
   return (
-    <CDropdown
+    <CDropdown variant="nav-item">
-      variant="nav-item"
-    >
       <CDropdownToggle placement="bottom-end">
         <CAvatar image="avatars/6.jpg" />
       </CDropdownToggle>
       <CDropdownMenu className="pt-0" placement="bottom-end">
-        <CDropdownHeader className="bg-light fw-semibold py-2">
+        <CDropdownHeader className="bg-light fw-semibold py-2">Account</CDropdownHeader>
-          Account
-        </CDropdownHeader>
         <CDropdownItem>
           <CIcon name="cil-bell" className="me-2" />
           Updates
-          <CBadge color="info" className="ms-auto">42</CBadge>
+          <CBadge color="info" className="ms-auto">
+            42
+          </CBadge>
         </CDropdownItem>
         <CDropdownItem>
           <CIcon name="cil-envelope-open" className="me-2" />
           Messages
-          <CBadge color="success" className="ms-auto">42</CBadge>
+          <CBadge color="success" className="ms-auto">
+            42
+          </CBadge>
         </CDropdownItem>
         <CDropdownItem>
           <CIcon name="cil-task" className="me-2" />
           Tasks
-          <CBadge color="danger" className="ms-auto">42</CBadge>
+          <CBadge color="danger" className="ms-auto">
+            42
+          </CBadge>
         </CDropdownItem>
         <CDropdownItem>
           <CIcon name="cil-comment-square" className="me-2" />
           Comments
-          <CBadge color="warning" className="ms-auto">42</CBadge>
+          <CBadge color="warning" className="ms-auto">
+            42
+          </CBadge>
         </CDropdownItem>
-        <CDropdownHeader className="bg-light fw-semibold py-2">
+        <CDropdownHeader className="bg-light fw-semibold py-2">Settings</CDropdownHeader>
-          Settings
-        </CDropdownHeader>
         <CDropdownItem>
-          <CIcon name="cil-user" className="me-2" />Profile
+          <CIcon name="cil-user" className="me-2" />
+          Profile
         </CDropdownItem>
         <CDropdownItem>
           <CIcon name="cil-settings" className="me-2" />
@@ -56,12 +59,16 @@ const AppHeaderDropdown = () => {
         <CDropdownItem>
           <CIcon name="cil-credit-card" className="me-2" />
           Payments
-          <CBadge color="secondary" className="ms-auto">42</CBadge>
+          <CBadge color="secondary" className="ms-auto">
+            42
+          </CBadge>
         </CDropdownItem>
         <CDropdownItem>
           <CIcon name="cil-file" className="me-2" />
           Projects
-          <CBadge color="primary" className="ms-auto">42</CBadge>
+          <CBadge color="primary" className="ms-auto">
+            42
+          </CBadge>
         </CDropdownItem>
         <CDropdownDivider />
         <CDropdownItem>

src/components/header/AppHeaderDropdownMssg.js

@@ -6,26 +6,22 @@ import {
   CDropdownItem,
   CDropdownMenu,
   CDropdownToggle,
-  CImage
+  CImage,
 } from '@coreui/react-ts'
 import CIcon from '@coreui/icons-react'
 
 const AppHeaderDropdownMssg = () => {
   const itemsCount = 4
   return (
-    <CDropdown
+    <CDropdown variant="nav-item" direction="down">
-      variant="nav-item"
-      direction="down"
-    >
       <CDropdownToggle className="c-header-nav-link" caret={false}>
-        <CIcon name="cil-envelope-open" /><CBadge shape="rounded-pill" color="info">{itemsCount}</CBadge>
+        <CIcon name="cil-envelope-open" />
+        <CBadge shape="rounded-pill" color="info">
+          {itemsCount}
+        </CBadge>
       </CDropdownToggle>
       <CDropdownMenu className="pt-0" placement="bottom-end">
-        <CDropdownItem
+        <CDropdownItem header tag="div" color="light">
-          header
-          tag="div"
-          color="light"
-        >
           <strong>You have {itemsCount} messages</strong>
         </CDropdownItem>
         <CDropdownItem href="#">
@@ -41,7 +37,8 @@ const AppHeaderDropdownMssg = () => {
               <span className="fa fa-exclamation text-danger"></span> Important message
             </div>
             <div className="small text-muted text-truncate">
-              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+              incididunt...
             </div>
           </div>
         </CDropdownItem>
@@ -56,7 +53,9 @@ const AppHeaderDropdownMssg = () => {
               <small className="text-muted float-end mt-1">5 minutes ago</small>
             </div>
             <div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
-            <div className="small text-muted text-truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...
+            <div className="small text-muted text-truncate">
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+              incididunt...
             </div>
           </div>
         </CDropdownItem>
@@ -71,7 +70,9 @@ const AppHeaderDropdownMssg = () => {
               <small className="text-muted float-end mt-1">1:52 PM</small>
             </div>
             <div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
-            <div className="small text-muted text-truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...
+            <div className="small text-muted text-truncate">
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+              incididunt...
             </div>
           </div>
         </CDropdownItem>
@@ -86,11 +87,15 @@ const AppHeaderDropdownMssg = () => {
               <small className="text-muted float-end mt-1">4:03 AM</small>
             </div>
             <div className="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
-            <div className="small text-muted text-truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...
+            <div className="small text-muted text-truncate">
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
+              incididunt...
             </div>
           </div>
         </CDropdownItem>
-        <CDropdownItem href="#" className="text-center border-top"><strong>View all messages</strong></CDropdownItem>
+        <CDropdownItem href="#" className="text-center border-top">
+          <strong>View all messages</strong>
+        </CDropdownItem>
       </CDropdownMenu>
     </CDropdown>
   )

src/components/header/AppHeaderDropdownNotif.js

@@ -5,58 +5,65 @@ import {
   CDropdownItem,
   CDropdownMenu,
   CDropdownToggle,
-  CProgress
+  CProgress,
 } from '@coreui/react-ts'
 import CIcon from '@coreui/icons-react'
 
 const AppHeaderDropdownNotif = () => {
   const itemsCount = 5
   return (
-    <CDropdown
+    <CDropdown variant="nav-item">
-      variant="nav-item"
-    >
       <CDropdownToggle className="c-header-nav-link" caret={false}>
-        <CIcon name="cil-bell"/>
+        <CIcon name="cil-bell" />
-        <CBadge shape="rounded-pill" color="danger">{itemsCount}</CBadge>
+        <CBadge shape="rounded-pill" color="danger">
+          {itemsCount}
+        </CBadge>
       </CDropdownToggle>
       <CDropdownMenu placement="bottom-end" className="pt-0">
-        <CDropdownItem
+        <CDropdownItem header tag="div" className="text-center" color="light">
-          header
-          tag="div"
-          className="text-center"
-          color="light"
-        >
           <strong>You have {itemsCount} notifications</strong>
         </CDropdownItem>
-        <CDropdownItem><CIcon name="cil-user-follow" className="me-2 text-success" /> New user registered</CDropdownItem>
+        <CDropdownItem>
-        <CDropdownItem><CIcon name="cil-user-unfollow" className="me-2 text-danger" /> User deleted</CDropdownItem>
+          <CIcon name="cil-user-follow" className="me-2 text-success" /> New user registered
-        <CDropdownItem><CIcon name="cil-chart-pie" className="me-2 text-info" /> Sales report is ready</CDropdownItem>
+        </CDropdownItem>
-        <CDropdownItem><CIcon name="cil-basket" className="me-2 text-primary" /> New client</CDropdownItem>
+        <CDropdownItem>
-        <CDropdownItem><CIcon name="cil-speedometer" className="me-2 text-warning" /> Server overloaded</CDropdownItem>
+          <CIcon name="cil-user-unfollow" className="me-2 text-danger" /> User deleted
-        <CDropdownItem
+        </CDropdownItem>
-          header
+        <CDropdownItem>
-          tag="div"
+          <CIcon name="cil-chart-pie" className="me-2 text-info" /> Sales report is ready
-          color="light"
+        </CDropdownItem>
-        >
+        <CDropdownItem>
+          <CIcon name="cil-basket" className="me-2 text-primary" /> New client
+        </CDropdownItem>
+        <CDropdownItem>
+          <CIcon name="cil-speedometer" className="me-2 text-warning" /> Server overloaded
+        </CDropdownItem>
+        <CDropdownItem header tag="div" color="light">
           <strong>Server</strong>
         </CDropdownItem>
         <CDropdownItem className="d-block">
           <div className="text-uppercase mb-1">
-            <small><b>CPU Usage</b></small>
+            <small>
+              <b>CPU Usage</b>
+            </small>
           </div>
           <CProgress size="xs" color="info" value={25} />
           <small className="text-muted">348 Processes. 1/4 Cores.</small>
         </CDropdownItem>
         <CDropdownItem className="d-block">
           <div className="text-uppercase mb-1">
-            <small><b>Memory Usage</b></small>
+            <small>
+              <b>Memory Usage</b>
+            </small>
           </div>
           <CProgress size="xs" color="warning" value={70} />
           <small className="text-muted">11444GB/16384MB</small>
         </CDropdownItem>
         <CDropdownItem className="d-block">
           <div className="text-uppercase mb-1">
-            <small><b>SSD 1 Usage</b></small>
+            <small>
+              <b>SSD 1 Usage</b>
+            </small>
           </div>
           <CProgress size="xs" color="danger" value={90} />
           <small className="text-muted">243GB/256GB</small>

src/components/header/AppHeaderDropdownTasks.js

@@ -5,51 +5,72 @@ import {
   CDropdownItem,
   CDropdownMenu,
   CDropdownToggle,
-  CProgress
+  CProgress,
 } from '@coreui/react-ts'
 import CIcon from '@coreui/icons-react'
 
 const AppHeaderDropdownTasks = () => {
   const itemsCount = 5
   return (
-    <CDropdown
+    <CDropdown variant="nav-item">
-      variant="nav-item"
-    >
       <CDropdownToggle>
         <CIcon name="cil-list" />
-        <CBadge shape="rounded-pill" color="warning">{itemsCount}</CBadge>
+        <CBadge shape="rounded-pill" color="warning">
+          {itemsCount}
+        </CBadge>
       </CDropdownToggle>
       <CDropdownMenu placement="bottom-end" className="pt-0">
-        <CDropdownItem
+        <CDropdownItem header tag="div" className="text-center" color="light">
-          header
-          tag="div"
-          className="text-center"
-          color="light"
-        >
           <strong>You have {itemsCount} pending tasks</strong>
         </CDropdownItem>
         <CDropdownItem className="d-block">
-          <div className="small mb-1">Upgrade NPM &amp; Bower <span
+          <div className="small mb-1">
-            className="float-end"><strong>0%</strong></span></div>
+            Upgrade NPM &amp; Bower{' '}
+            <span className="float-end">
+              <strong>0%</strong>
+            </span>
+          </div>
           <CProgress size="xs" color="info" value={0} />
         </CDropdownItem>
         <CDropdownItem className="d-block">
-          <div className="small mb-1">ReactJS Version <span className="float-end"><strong>25%</strong></span></div>
+          <div className="small mb-1">
+            ReactJS Version{' '}
+            <span className="float-end">
+              <strong>25%</strong>
+            </span>
+          </div>
           <CProgress size="xs" color="danger" value={25} />
         </CDropdownItem>
         <CDropdownItem className="d-block">
-          <div className="small mb-1">VueJS Version <span className="float-end"><strong>50%</strong></span></div>
+          <div className="small mb-1">
+            VueJS Version{' '}
+            <span className="float-end">
+              <strong>50%</strong>
+            </span>
+          </div>
           <CProgress size="xs" color="warning" value={50} />
         </CDropdownItem>
         <CDropdownItem className="d-block">
-          <div className="small mb-1">Add new layouts <span className="float-end"><strong>75%</strong></span></div>
+          <div className="small mb-1">
+            Add new layouts{' '}
+            <span className="float-end">
+              <strong>75%</strong>
+            </span>
+          </div>
           <CProgress size="xs" color="info" value={75} />
         </CDropdownItem>
         <CDropdownItem className="d-block">
-          <div className="small mb-1">Angular 2 Cli Version <span className="float-end"><strong>100%</strong></span></div>
+          <div className="small mb-1">
+            Angular 2 Cli Version{' '}
+            <span className="float-end">
+              <strong>100%</strong>
+            </span>
+          </div>
           <CProgress size="xs" color="success" value={100} />
         </CDropdownItem>
-        <CDropdownItem className="text-center border-top"><strong>View all tasks</strong></CDropdownItem>
+        <CDropdownItem className="text-center border-top">
+          <strong>View all tasks</strong>
+        </CDropdownItem>
       </CDropdownMenu>
     </CDropdown>
   )

src/containers/TheContent.js

@@ -1,9 +1,5 @@
 import React, { Suspense } from 'react'
-import {
+import { Redirect, Route, Switch } from 'react-router-dom'
-  Redirect,
-  Route,
-  Switch
-} from 'react-router-dom'
 import { CContainer, CFade } from '@coreui/react-ts'
 
 // routes config
@@ -22,17 +18,20 @@ const TheContent = () => {
         <Suspense fallback={loading}>
           <Switch>
             {routes.map((route, idx) => {
-              return route.component && (
+              return (
+                route.component && (
                   <Route
                     key={idx}
                     path={route.path}
                     exact={route.exact}
                     name={route.name}
-                  render={props => (
+                    render={(props) => (
                       <CFade>
                         <route.component {...props} />
                       </CFade>
-                  )} />
+                    )}
+                  />
+                )
               )
             })}
             <Redirect from="/" to="/dashboard" />

src/containers/_nav.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import CIcon from '@coreui/icons-react'
-import { NavLink } from "react-router-dom"
+import { NavLink } from 'react-router-dom'
 
 const _nav = [
   {
@@ -8,40 +8,40 @@ const _nav =  [
     as: NavLink,
     anchor: 'Dashboard',
     to: '/dashboard',
-    icon: <CIcon name="cil-speedometer" customClasses="nav-icon"/>,
+    icon: <CIcon name="cil-speedometer" customClasses="nav-icon" />,
     badge: {
       color: 'info',
       text: 'NEW',
-    }
+    },
   },
   {
     _component: 'CNavTitle',
-    anchor: 'Theme'
+    anchor: 'Theme',
   },
   {
     _component: 'CNavItem',
     as: NavLink,
     anchor: 'Colors',
     to: '/theme/colors',
-    icon: <CIcon name="cil-drop" customClasses="nav-icon"/>,
+    icon: <CIcon name="cil-drop" customClasses="nav-icon" />,
   },
   {
     _component: 'CNavItem',
     as: NavLink,
     anchor: 'Typography',
     to: '/theme/typography',
-    icon: <CIcon name="cil-pencil" customClasses="nav-icon"/>,
+    icon: <CIcon name="cil-pencil" customClasses="nav-icon" />,
   },
   {
     _component: 'CNavTitle',
-    anchor: 'Components'
+    anchor: 'Components',
   },
   {
     _component: 'CNavGroup',
     as: NavLink,
     anchor: 'Base',
     to: '/to',
-    icon: <CIcon name="cil-puzzle" customClasses="nav-icon"/>,
+    icon: <CIcon name="cil-puzzle" customClasses="nav-icon" />,
     items: [
       {
         _component: 'CNavItem',
@@ -139,7 +139,7 @@ const _nav =  [
     _component: 'CNavGroup',
     anchor: 'Buttons',
     // route: '/buttons',
-    icon: <CIcon name="cil-cursor" customClasses="nav-icon"/>,
+    icon: <CIcon name="cil-cursor" customClasses="nav-icon" />,
     items: [
       {
         _component: 'CNavItem',
@@ -164,7 +164,7 @@ const _nav =  [
         as: NavLink,
         anchor: 'Dropdowns',
         to: '/buttons/button-dropdowns',
-      }
+      },
     ],
   },
   {
@@ -172,13 +172,13 @@ const _nav =  [
     as: NavLink,
     anchor: 'Charts',
     to: '/charts',
-    icon: <CIcon name="cil-chart-pie" customClasses="nav-icon"/>
+    icon: <CIcon name="cil-chart-pie" customClasses="nav-icon" />,
   },
   {
     _component: 'CNavGroup',
     anchor: 'Icons',
     // route: '/icons',
-    icon: <CIcon name="cil-star" customClasses="nav-icon"/>,
+    icon: <CIcon name="cil-star" customClasses="nav-icon" />,
     items: [
       {
         _component: 'CNavItem',
@@ -208,7 +208,7 @@ const _nav =  [
     _component: 'CNavGroup',
     anchor: 'Notifications',
     // route: '/notifications',
-    icon: <CIcon name="cil-bell" customClasses="nav-icon"/>,
+    icon: <CIcon name="cil-bell" customClasses="nav-icon" />,
     items: [
       {
         _component: 'CNavItem',
@@ -232,16 +232,16 @@ const _nav =  [
         _component: 'CNavItem',
         as: NavLink,
         anchor: 'Toaster',
-        to: '/notifications/toaster'
+        to: '/notifications/toaster',
-      }
+      },
-    ]
+    ],
   },
   {
     _component: 'CNavItem',
     as: NavLink,
     anchor: 'Widgets',
     to: '/widgets',
-    icon: <CIcon name="cil-calculator" customClasses="nav-icon"/>,
+    icon: <CIcon name="cil-calculator" customClasses="nav-icon" />,
     badge: {
       color: 'info',
       text: 'NEW',
@@ -257,7 +257,7 @@ const _nav =  [
   {
     _component: 'CNavGroup',
     anchor: 'Pages',
-    icon: <CIcon name="cil-star" customClasses="nav-icon"/>,
+    icon: <CIcon name="cil-star" customClasses="nav-icon" />,
     items: [
       {
         _component: 'CNavItem',

src/containers/index.js

@@ -19,5 +19,5 @@ export {
   AppHeaderDropdownNotif,
   AppHeaderDropdownTasks,
   DefaultLayout,
-  AppSidebar
+  AppSidebar,
 }

src/index.js

@@ -1,11 +1,11 @@
-import 'react-app-polyfill/ie11'; // For IE 11 support
+import 'react-app-polyfill/ie11' // For IE 11 support
-import 'react-app-polyfill/stable';
+import 'react-app-polyfill/stable'
-import 'core-js';
+import 'core-js'
 import './polyfill'
-import React from 'react';
+import React from 'react'
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom'
-import App from './App';
+import App from './App'
-import * as serviceWorker from './serviceWorker';
+import * as serviceWorker from './serviceWorker'
 
 import { icons } from './assets/icons'
 
@@ -16,12 +16,12 @@ React.icons = icons
 
 ReactDOM.render(
   <Provider store={store}>
-    <App/>
+    <App />
   </Provider>,
-  document.getElementById('root')
+  document.getElementById('root'),
-);
+)
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: http://bit.ly/CRA-PWA
-serviceWorker.unregister();
+serviceWorker.unregister()

src/layout/DefaultLayout.js

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

src/polyfill.js

@@ -1,6 +1,6 @@
 /*
-* required polyfills
+ * required polyfills
-*/
+ */
 
 /** IE9, IE10 and IE11 requires all of the following polyfills. **/
 // import "core-js";
@@ -28,14 +28,13 @@
 // import 'core-js/features/reflect'
 
 // CustomEvent() constructor functionality in IE9, IE10, IE11
-(function () {
+;(function () {
+  if (typeof window.CustomEvent === 'function') return false
 
-  if ( typeof window.CustomEvent === "function" ) return false
+  function CustomEvent(event, params) {
-
-  function CustomEvent ( event, params ) {
     params = params || { bubbles: false, cancelable: false, detail: undefined }
-    var evt = document.createEvent( 'CustomEvent' )
+    var evt = document.createEvent('CustomEvent')
-    evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail )
+    evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail)
     return evt
   }
 
@@ -46,18 +45,17 @@
 
 if (!Element.prototype.matches) {
   Element.prototype.matches =
-    Element.prototype.msMatchesSelector ||
+    Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector
-    Element.prototype.webkitMatchesSelector;
 }
 
 if (!Element.prototype.closest) {
-  Element.prototype.closest = function(s) {
+  Element.prototype.closest = function (s) {
-    var el = this;
+    var el = this
 
     do {
-      if (Element.prototype.matches.call(el, s)) return el;
+      if (Element.prototype.matches.call(el, s)) return el
-      el = el.parentElement || el.parentNode;
+      el = el.parentElement || el.parentNode
-    } while (el !== null && el.nodeType === 1);
+    } while (el !== null && el.nodeType === 1)
-    return null;
+    return null
-  };
+  }
 }

src/reusable/DocsLink.js

@@ -1,12 +1,8 @@
 import React from 'react'
 import { CLink } from '@coreui/react-ts'
 
-const DocsLink = props => {
+const DocsLink = (props) => {
-  const {
+  const { name, text, ...rest } = props
-    name,
-    text,
-    ...rest
-  } = props
 
   const href = name ? `https://coreui.io/react/docs/components/${name}` : props.href
 
@@ -19,7 +15,7 @@ const DocsLink = props => {
         target="_blank"
         className="card-header-action"
       >
-        <small className="text-muted">{ text || 'docs' }</small>
+        <small className="text-muted">{text || 'docs'}</small>
       </CLink>
     </div>
   )

src/reusable/index.js

@@ -1,5 +1,3 @@
 import DocsLink from './DocsLink'
 
-export {
+export { DocsLink }
-  DocsLink
-}

src/routes.js

@@ -1,44 +1,42 @@
-import React from 'react';
+import React from 'react'
 
-const Toaster = React.lazy(() => import('./views/notifications/toaster/Toaster'));
+const Toaster = React.lazy(() => import('./views/notifications/toaster/Toaster'))
-const Tables = React.lazy(() => import('./views/base/tables/Tables'));
+const Tables = React.lazy(() => import('./views/base/tables/Tables'))
 
-const Breadcrumbs = React.lazy(() => import('./views/base/breadcrumbs/Breadcrumbs'));
+const Breadcrumbs = React.lazy(() => import('./views/base/breadcrumbs/Breadcrumbs'))
-const Cards = React.lazy(() => import('./views/base/cards/Cards'));
+const Cards = React.lazy(() => import('./views/base/cards/Cards'))
-const Carousels = React.lazy(() => import('./views/base/carousels/Carousels'));
+const Carousels = React.lazy(() => import('./views/base/carousels/Carousels'))
-const Collapses = React.lazy(() => import('./views/base/collapses/Collapses'));
+const Collapses = React.lazy(() => import('./views/base/collapses/Collapses'))
-const BasicForms = React.lazy(() => import('./views/base/forms/BasicForms'));
+const BasicForms = React.lazy(() => import('./views/base/forms/BasicForms'))
 
-const Jumbotrons = React.lazy(() => import('./views/base/jumbotrons/Jumbotrons'));
+const Jumbotrons = React.lazy(() => import('./views/base/jumbotrons/Jumbotrons'))
-const ListGroups = React.lazy(() => import('./views/base/list-groups/ListGroups'));
+const ListGroups = React.lazy(() => import('./views/base/list-groups/ListGroups'))
-const Navbars = React.lazy(() => import('./views/base/navbars/Navbars'));
+const Navbars = React.lazy(() => import('./views/base/navbars/Navbars'))
-const Navs = React.lazy(() => import('./views/base/navs/Navs'));
+const Navs = React.lazy(() => import('./views/base/navs/Navs'))
-const Paginations = React.lazy(() => import('./views/base/paginations/Pagnations'));
+const Paginations = React.lazy(() => import('./views/base/paginations/Pagnations'))
-const Popovers = React.lazy(() => import('./views/base/popovers/Popovers'));
+const Popovers = React.lazy(() => import('./views/base/popovers/Popovers'))
-const ProgressBar = React.lazy(() => import('./views/base/progress-bar/ProgressBar'));
+const ProgressBar = React.lazy(() => import('./views/base/progress-bar/ProgressBar'))
 
-const Tabs = React.lazy(() => import('./views/base/tabs/Tabs'));
+const Tabs = React.lazy(() => import('./views/base/tabs/Tabs'))
-const Tooltips = React.lazy(() => import('./views/base/tooltips/Tooltips'));
+const Tooltips = React.lazy(() => import('./views/base/tooltips/Tooltips'))
-const BrandButtons = React.lazy(() => import('./views/buttons/brand-buttons/BrandButtons'));
+const BrandButtons = React.lazy(() => import('./views/buttons/brand-buttons/BrandButtons'))
-const ButtonDropdowns = React.lazy(() => import('./views/buttons/button-dropdowns/ButtonDropdowns'));
+const ButtonDropdowns = React.lazy(() => import('./views/buttons/button-dropdowns/ButtonDropdowns'))
-const ButtonGroups = React.lazy(() => import('./views/buttons/button-groups/ButtonGroups'));
+const ButtonGroups = React.lazy(() => import('./views/buttons/button-groups/ButtonGroups'))
-const Buttons = React.lazy(() => import('./views/buttons/buttons/Buttons'));
+const Buttons = React.lazy(() => import('./views/buttons/buttons/Buttons'))
-const Charts = React.lazy(() => import('./views/charts/Charts'));
+const Charts = React.lazy(() => import('./views/charts/Charts'))
-const Dashboard = React.lazy(() => import('./views/dashboard/Dashboard'));
+const Dashboard = React.lazy(() => import('./views/dashboard/Dashboard'))
-const CoreUIIcons = React.lazy(() => import('./views/icons/coreui-icons/CoreUIIcons'));
+const CoreUIIcons = React.lazy(() => import('./views/icons/coreui-icons/CoreUIIcons'))
-const Flags = React.lazy(() => import('./views/icons/flags/Flags'));
+const Flags = React.lazy(() => import('./views/icons/flags/Flags'))
-const Brands = React.lazy(() => import('./views/icons/brands/Brands'));
+const Brands = React.lazy(() => import('./views/icons/brands/Brands'))
-const Alerts = React.lazy(() => import('./views/notifications/alerts/Alerts'));
+const Alerts = React.lazy(() => import('./views/notifications/alerts/Alerts'))
-const Badges = React.lazy(() => import('./views/notifications/badges/Badges'));
+const Badges = React.lazy(() => import('./views/notifications/badges/Badges'))
-const Modals = React.lazy(() => import('./views/notifications/modals/Modals'));
+const Modals = React.lazy(() => import('./views/notifications/modals/Modals'))
-const Colors = React.lazy(() => import('./views/theme/colors/Colors'));
+const Colors = React.lazy(() => import('./views/theme/colors/Colors'))
-const Typography = React.lazy(() => import('./views/theme/typography/Typography'));
+const Typography = React.lazy(() => import('./views/theme/typography/Typography'))
-const Widgets = React.lazy(() => import('./views/widgets/Widgets'));
+const Widgets = React.lazy(() => import('./views/widgets/Widgets'))
-const Users = React.lazy(() => import('./views/users/Users'));
-const User = React.lazy(() => import('./views/users/User'));
 
-const Login = React.lazy(() => import('./views/pages/login/Login'));
+const Login = React.lazy(() => import('./views/pages/login/Login'))
-const Register = React.lazy(() => import('./views/pages/register/Register'));
+const Register = React.lazy(() => import('./views/pages/register/Register'))
 
 const routes = [
   { path: '/', exact: true, name: 'Home' },
@@ -80,8 +78,6 @@ const routes = [
   { path: '/pages/login', name: 'Login', component: Login },
   { path: '/pages/register', name: 'Register', component: Register },
   { path: '/widgets', name: 'Widgets', component: Widgets },
-  { path: '/users', exact: true,  name: 'Users', component: Users },
+]
-  { path: '/users/:id', exact: true, name: 'User Details', component: User }
-];
 
-export default routes;
+export default routes

src/serviceWorker.js

@@ -13,51 +13,49 @@ const isLocalhost = Boolean(
     // [::1] is the IPv6 localhost address.
     window.location.hostname === '[::1]' ||
     // 127.0.0.1/8 is considered localhost for IPv4.
-    window.location.hostname.match(
+    window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/),
-      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
+)
-    )
-);
 
 export function register(config) {
   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
     // The URL constructor is available in all browsers that support SW.
-    const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
+    const publicUrl = new URL(process.env.PUBLIC_URL, window.location)
     if (publicUrl.origin !== window.location.origin) {
       // Our service worker won't work if PUBLIC_URL is on a different origin
       // from what our page is served on. This might happen if a CDN is used to
       // serve assets; see https://github.com/facebook/create-react-app/issues/2374
-      return;
+      return
     }
 
     window.addEventListener('load', () => {
-      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`
 
       if (isLocalhost) {
         // This is running on localhost. Let's check if a service worker still exists or not.
-        checkValidServiceWorker(swUrl, config);
+        checkValidServiceWorker(swUrl, config)
 
         // Add some additional logging to localhost, pointing developers to the
         // service worker/PWA documentation.
         navigator.serviceWorker.ready.then(() => {
           console.log(
             'This web app is being served cache-first by a service ' +
-              'worker. To learn more, visit https://goo.gl/SC7cgQ'
+              'worker. To learn more, visit https://goo.gl/SC7cgQ',
-          );
+          )
-        });
+        })
       } else {
         // Is not local host. Just register service worker
-        registerValidSW(swUrl, config);
+        registerValidSW(swUrl, config)
       }
-    });
+    })
   }
 }
 
 function registerValidSW(swUrl, config) {
   navigator.serviceWorker
     .register(swUrl)
-    .then(registration => {
+    .then((registration) => {
       registration.onupdatefound = () => {
-        const installingWorker = registration.installing;
+        const installingWorker = registration.installing
         installingWorker.onstatechange = () => {
           if (installingWorker.state === 'installed') {
             if (navigator.serviceWorker.controller) {
@@ -65,63 +63,61 @@ function registerValidSW(swUrl, config) {
               // the fresh content will have been added to the cache.
               // It's the perfect time to display a "New content is
               // available; please refresh." message in your web app.
-              console.log('New content is available; please refresh.');
+              console.log('New content is available; please refresh.')
 
               // Execute callback
               if (config.onUpdate) {
-                config.onUpdate(registration);
+                config.onUpdate(registration)
               }
             } else {
               // At this point, everything has been precached.
               // It's the perfect time to display a
               // "Content is cached for offline use." message.
-              console.log('Content is cached for offline use.');
+              console.log('Content is cached for offline use.')
 
               // Execute callback
               if (config.onSuccess) {
-                config.onSuccess(registration);
+                config.onSuccess(registration)
+              }
+            }
           }
         }
       }
-        };
-      };
     })
-    .catch(error => {
+    .catch((error) => {
-      console.error('Error during service worker registration:', error);
+      console.error('Error during service worker registration:', error)
-    });
+    })
 }
 
 function checkValidServiceWorker(swUrl, config) {
   // Check if the service worker can be found. If it can't reload the page.
   fetch(swUrl)
-    .then(response => {
+    .then((response) => {
       // Ensure service worker exists, and that we really are getting a JS file.
       if (
         response.status === 404 ||
         response.headers.get('content-type').indexOf('javascript') === -1
       ) {
         // No service worker found. Probably a different app. Reload the page.
-        navigator.serviceWorker.ready.then(registration => {
+        navigator.serviceWorker.ready.then((registration) => {
           registration.unregister().then(() => {
-            window.location.reload();
+            window.location.reload()
-          });
+          })
-        });
+        })
       } else {
         // Service worker found. Proceed as normal.
-        registerValidSW(swUrl, config);
+        registerValidSW(swUrl, config)
       }
     })
     .catch(() => {
-      console.log(
+      console.log('No internet connection found. App is running in offline mode.')
-        'No internet connection found. App is running in offline mode.'
+    })
-      );
-    });
 }
 
 export function unregister() {
   if ('serviceWorker' in navigator) {
-    navigator.serviceWorker.ready.then(registration => {
+    navigator.serviceWorker.ready.then((registration) => {
-      registration.unregister();
+      registration.unregister()
-    });
+    })
   }
 }

src/setupTests.js

@@ -1,7 +1,7 @@
-import {configure} from 'enzyme';
+import { configure } from 'enzyme'
-import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
 
-configure({adapter: new Adapter()});
+configure({ adapter: new Adapter() })
 
 if (global.document) {
   document.createRange = () => ({
@@ -11,5 +11,5 @@ if (global.document) {
       nodeName: 'BODY',
       ownerDocument: document,
     },
-  });
+  })
 }

src/store.js

@@ -1,13 +1,13 @@
 import { createStore } from 'redux'
 
 const initialState = {
-  sidebarShow: 'responsive'
+  sidebarShow: 'responsive',
 }
 
 const changeState = (state = initialState, { type, ...rest }) => {
   switch (type) {
     case 'set':
-      return {...state, ...rest }
+      return { ...state, ...rest }
     default:
       return state
   }

src/views/base/breadcrumbs/Breadcrumbs.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React from 'react'
 import {
   CBreadcrumb,
   CBreadcrumbItem,
@@ -8,8 +8,8 @@ import {
   CCol,
   CRow,
   CLink,
-} from "@coreui/react-ts";
+} from '@coreui/react-ts'
-import { DocsLink } from "src/reusable";
+import { DocsLink } from 'src/reusable'
 
 const Breadcrumbs = () => {
   return (
@@ -52,7 +52,7 @@ const Breadcrumbs = () => {
         </CCard>
       </CCol>
     </CRow>
-  );
+  )
-};
+}
 
-export default Breadcrumbs;
+export default Breadcrumbs

src/views/base/cards/Cards.js

@@ -12,7 +12,6 @@ import {
 import CIcon from '@coreui/icons-react'
 import { DocsLink } from 'src/reusable'
 
-
 const Cards = () => {
   const [collapsed, setCollapsed] = React.useState(true)
   const [showCard, setShowCard] = React.useState(true)
@@ -24,21 +23,23 @@ const Cards = () => {
           <CCard className="mb-4">
             <CCardHeader>
               Card title
-              <DocsLink name="CCard"/>
+              <DocsLink name="CCard" />
             </CCardHeader>
             <CCardBody>
-              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
-              laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+              euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
-              ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+              veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
+              commodo consequat.
             </CCardBody>
           </CCard>
         </CCol>
         <CCol xs="12" sm="6" md="4">
           <CCard className="mb-4">
             <CCardBody>
-              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
-              laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+              euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
-              ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+              veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
+              commodo consequat.
             </CCardBody>
             <CCardFooter>Card footer</CCardFooter>
           </CCard>
@@ -47,12 +48,13 @@ const Cards = () => {
           <CCard className="mb-4">
             <CCardHeader>
               Card with icon
-              <CIcon name="cil-check" className="float-end"/>
+              <CIcon name="cil-check" className="float-end" />
             </CCardHeader>
             <CCardBody>
-              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
-              laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam, quis nostrud exerci tation
+              euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim
-              ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+              veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
+              commodo consequat.
             </CCardBody>
           </CCard>
         </CCol>
@@ -60,12 +62,13 @@ const Cards = () => {
           <CCard className="mb-4">
             <CCardHeader>
               Card with switch
-              <CFormCheck switch className="float-end" id="formSwitchCheckDefault"/>
+              <CFormCheck switch className="float-end" id="formSwitchCheckDefault" />
             </CCardHeader>
             <CCardBody>
-              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
-              laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+              euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
-              ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+              veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
+              commodo consequat.
             </CCardBody>
           </CCard>
         </CCol>
@@ -73,12 +76,15 @@ const Cards = () => {
           <CCard className="mb-4">
             <CCardHeader>
               Card with label
-              <CBadge color="success" className="float-end">Success</CBadge>
+              <CBadge color="success" className="float-end">
+                Success
+              </CBadge>
             </CCardHeader>
             <CCardBody>
-              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
-              laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+              euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
-              ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+              veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
+              commodo consequat.
             </CCardBody>
           </CCard>
         </CCol>
@@ -86,12 +92,15 @@ const Cards = () => {
           <CCard className="mb-4">
             <CCardHeader>
               Card with label
-              <CBadge shape="rounded-pill" color="danger" className="float-end">42</CBadge>
+              <CBadge shape="rounded-pill" color="danger" className="float-end">
+                42
+              </CBadge>
             </CCardHeader>
             <CCardBody>
-              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
-              laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+              euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
-              ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+              veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
+              commodo consequat.
             </CCardBody>
           </CCard>
         </CCol>
@@ -99,73 +108,67 @@ const Cards = () => {
       <CRow>
         <CCol xs="12" sm="6" md="4">
           <CCard className="mb-4 border-primary">
-            <CCardHeader>
+            <CCardHeader>Card outline primary</CCardHeader>
-              Card outline primary
-            </CCardHeader>
             <CCardBody>
-              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
-              laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam, quis nostrud exerci tation
+              euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim
-              ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+              veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
+              commodo consequat.
             </CCardBody>
           </CCard>
         </CCol>
         <CCol xs="12" sm="6" md="4">
           <CCard className="mb-4 border-secondary">
-            <CCardHeader>
+            <CCardHeader>Card outline secondary</CCardHeader>
-              Card outline secondary
-            </CCardHeader>
             <CCardBody>
-              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
-              laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam, quis nostrud exerci tation
+              euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim
-              ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+              veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
+              commodo consequat.
             </CCardBody>
           </CCard>
         </CCol>
         <CCol xs="12" sm="6" md="4">
           <CCard className="mb-4 border-success">
-            <CCardHeader>
+            <CCardHeader>Card outline success</CCardHeader>
-              Card outline success
-            </CCardHeader>
             <CCardBody>
-              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
-              laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam, quis nostrud exerci tation
+              euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim
-              ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+              veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
+              commodo consequat.
             </CCardBody>
           </CCard>
         </CCol>
         <CCol xs="12" sm="6" md="4">
           <CCard className="mb-4 border-info">
-            <CCardHeader>
+            <CCardHeader>Card outline info</CCardHeader>
-              Card outline info
-            </CCardHeader>
             <CCardBody>
-              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
-              laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+              euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
-              ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+              veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
+              commodo consequat.
             </CCardBody>
           </CCard>
         </CCol>
         <CCol xs="12" sm="6" md="4">
           <CCard className="mb-4 border-warning">
-            <CCardHeader>
+            <CCardHeader>Card outline warning</CCardHeader>
-              Card outline warning
-            </CCardHeader>
             <CCardBody>
-              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
-              laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+              euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
-              ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+              veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
+              commodo consequat.
             </CCardBody>
           </CCard>
         </CCol>
         <CCol xs="12" sm="6" md="4">
           <CCard className="mb-4 border-danger">
-            <CCardHeader>
+            <CCardHeader>Card outline danger</CCardHeader>
-              Card outline danger
-            </CCardHeader>
             <CCardBody>
-              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
-              laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+              euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
-              ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+              veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
+              commodo consequat.
             </CCardBody>
           </CCard>
         </CCol>
@@ -174,73 +177,67 @@ const Cards = () => {
       <CRow>
         <CCol xs="12" sm="6" md="4">
           <CCard className="border-top-primary border-top-3 mb-4">
-            <CCardHeader>
+            <CCardHeader>Card with accent</CCardHeader>
-              Card with accent
-            </CCardHeader>
             <CCardBody>
-              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
-              laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+              euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
-              ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+              veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
+              commodo consequat.
             </CCardBody>
           </CCard>
         </CCol>
         <CCol xs="12" sm="6" md="4">
           <CCard className="border-top-secondary border-top-3 mb-4">
-            <CCardHeader>
+            <CCardHeader>Card with accent</CCardHeader>
-              Card with accent
-            </CCardHeader>
             <CCardBody>
-              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
-              laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+              euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
-              ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+              veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
+              commodo consequat.
             </CCardBody>
           </CCard>
         </CCol>
         <CCol xs="12" sm="6" md="4">
           <CCard className="border-top-success border-top-3 mb-4">
-            <CCardHeader>
+            <CCardHeader>Card with accent</CCardHeader>
-              Card with accent
-            </CCardHeader>
             <CCardBody>
-              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
-              laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+              euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
-              ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+              veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
+              commodo consequat.
             </CCardBody>
           </CCard>
         </CCol>
         <CCol xs="12" sm="6" md="4">
           <CCard className="border-top-info border-top-3 mb-4">
-            <CCardHeader>
+            <CCardHeader>Card with accent</CCardHeader>
-              Card with accent
-            </CCardHeader>
             <CCardBody>
-              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
-              laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+              euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
-              ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+              veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
+              commodo consequat.
             </CCardBody>
           </CCard>
         </CCol>
         <CCol xs="12" sm="6" md="4">
           <CCard className="border-top-warning border-top-3 mb-4">
-            <CCardHeader>
+            <CCardHeader>Card with accent</CCardHeader>
-              Card with accent
-            </CCardHeader>
             <CCardBody>
-              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
-              laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+              euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
-              ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+              veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
+              commodo consequat.
             </CCardBody>
           </CCard>
         </CCol>
         <CCol xs="12" sm="6" md="4">
           <CCard className="border-top-danger border-top-3 mb-4">
-            <CCardHeader>
+            <CCardHeader>Card with accent</CCardHeader>
-              Card with accent
-            </CCardHeader>
             <CCardBody>
-              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
-              laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+              euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
-              ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+              veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
+              commodo consequat.
             </CCardBody>
           </CCard>
         </CCol>
@@ -250,8 +247,13 @@ const Cards = () => {
           <CCard color="primary" className="text-white text-center mb-4">
             <CCardBody>
               <blockquote className="card-bodyquote">
-                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+                <p>
-                <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
+                  ante.
+                </p>
+                <footer>
+                  Someone famous in <cite title="Source Title">Source Title</cite>
+                </footer>
               </blockquote>
             </CCardBody>
           </CCard>
@@ -260,8 +262,13 @@ const Cards = () => {
           <CCard color="success" className="text-white text-center mb-4">
             <CCardBody>
               <blockquote className="card-bodyquote">
-                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+                <p>
-                <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
+                  ante.
+                </p>
+                <footer>
+                  Someone famous in <cite title="Source Title">Source Title</cite>
+                </footer>
               </blockquote>
             </CCardBody>
           </CCard>
@@ -270,8 +277,13 @@ const Cards = () => {
           <CCard color="info" className="text-white text-center mb-4">
             <CCardBody>
               <blockquote className="card-bodyquote">
-                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+                <p>
-                <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
+                  ante.
+                </p>
+                <footer>
+                  Someone famous in <cite title="Source Title">Source Title</cite>
+                </footer>
               </blockquote>
             </CCardBody>
           </CCard>
@@ -280,8 +292,13 @@ const Cards = () => {
           <CCard color="warning" className="text-white text-center mb-4">
             <CCardBody>
               <blockquote className="card-bodyquote">
-                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+                <p>
-                <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
+                  ante.
+                </p>
+                <footer>
+                  Someone famous in <cite title="Source Title">Source Title</cite>
+                </footer>
               </blockquote>
             </CCardBody>
           </CCard>
@@ -290,8 +307,13 @@ const Cards = () => {
           <CCard color="danger" className="text-white text-center mb-4">
             <CCardBody>
               <blockquote className="card-bodyquote">
-                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+                <p>
-                <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
+                  ante.
+                </p>
+                <footer>
+                  Someone famous in <cite title="Source Title">Source Title</cite>
+                </footer>
               </blockquote>
             </CCardBody>
           </CCard>
@@ -300,8 +322,13 @@ const Cards = () => {
           <CCard color="primary" className="text-white text-center mb-4">
             <CCardBody>
               <blockquote className="card-bodyquote">
-                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+                <p>
-                <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
+                  ante.
+                </p>
+                <footer>
+                  Someone famous in <cite title="Source Title">Source Title</cite>
+                </footer>
               </blockquote>
             </CCardBody>
           </CCard>
@@ -310,49 +337,45 @@ const Cards = () => {
       <CRow>
         <CCol xs="12" sm="6" md="4">
           <CCard color="primary" className="text-white mb-4">
-            <CCardHeader>
+            <CCardHeader>Card title</CCardHeader>
-              Card title
-            </CCardHeader>
             <CCardBody>
-              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
-              laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+              euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
-              ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+              veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
+              commodo consequat.
             </CCardBody>
           </CCard>
         </CCol>
         <CCol xs="12" sm="6" md="4">
           <CCard color="success" className="text-white mb-4">
-            <CCardHeader>
+            <CCardHeader>Card title</CCardHeader>
-              Card title
-            </CCardHeader>
             <CCardBody>
-              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
-              laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+              euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
-              ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+              veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
+              commodo consequat.
             </CCardBody>
           </CCard>
         </CCol>
         <CCol xs="12" sm="6" md="4">
           <CCard color="info" className="text-white mb-4">
-            <CCardHeader>
+            <CCardHeader>Card title</CCardHeader>
-              Card title
-            </CCardHeader>
             <CCardBody>
-              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
-              laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+              euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
-              ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+              veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
+              commodo consequat.
             </CCardBody>
           </CCard>
         </CCol>
         <CCol xs="12" sm="6" md="4">
           <CCard color="warning" className="text-white mb-4">
-            <CCardHeader>
+            <CCardHeader>Card title</CCardHeader>
-              Card title
-            </CCardHeader>
             <CCardBody>
-              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
-              laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
+              euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
-              ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+              veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
+              commodo consequat.
             </CCardBody>
           </CCard>
         </CCol>

src/views/base/carousels/Carousels.js

@@ -10,7 +10,7 @@ import {
   CCarouselInner,
   CCarouselItem,
   CCol,
-  CRow
+  CRow,
 } from '@coreui/react-ts'
 import { DocsLink } from 'src/reusable'
 
@@ -29,107 +29,128 @@ const Carousels = () => {
         <CCard className="mb-4">
           <CCardHeader>
             Carousel with controls
-            <DocsLink name="CCarousel"/>
+            <DocsLink name="CCarousel" />
           </CCardHeader>
           <CCardBody>
             <CCarousel>
               <CCarouselInner>
                 <CCarouselItem>
-                  <img className="d-block w-100" src={slides[0]} alt="slide 1"/>
+                  <img className="d-block w-100" src={slides[0]} alt="slide 1" />
                 </CCarouselItem>
                 <CCarouselItem>
-                  <img className="d-block w-100" src={slides[1]} alt="slide 2"/>
+                  <img className="d-block w-100" src={slides[1]} alt="slide 2" />
                 </CCarouselItem>
                 <CCarouselItem>
-                  <img className="d-block w-100" src={slides[2]} alt="slide 3"/>
+                  <img className="d-block w-100" src={slides[2]} alt="slide 3" />
                 </CCarouselItem>
               </CCarouselInner>
-              <CCarouselControl direction="prev"/>
+              <CCarouselControl direction="prev" />
-              <CCarouselControl direction="next"/>
+              <CCarouselControl direction="next" />
             </CCarousel>
           </CCardBody>
         </CCard>
       </CCol>
       <CCol xs="12" xl="6">
         <CCard className="mb-4">
-          <CCardHeader>
+          <CCardHeader>Carousel with controls, indicators and caption</CCardHeader>
-            Carousel with controls, indicators and caption
-          </CCardHeader>
           <CCardBody>
             <CCarousel activeIndex={activeIndex}>
-              <CCarouselIndicators/>
+              <CCarouselIndicators />
               <CCarouselInner>
                 <CCarouselItem>
-                  <img className="d-block w-100" src={slides[0]} alt="slide 1"/>
+                  <img className="d-block w-100" src={slides[0]} alt="slide 1" />
-                  <CCarouselCaption><h3>Slide 1</h3><p>Slide 1</p></CCarouselCaption>
+                  <CCarouselCaption>
+                    <h3>Slide 1</h3>
+                    <p>Slide 1</p>
+                  </CCarouselCaption>
                 </CCarouselItem>
                 <CCarouselItem>
-                  <img className="d-block w-100" src={slides[1]} alt="slide 2"/>
+                  <img className="d-block w-100" src={slides[1]} alt="slide 2" />
-                  <CCarouselCaption><h3>Slide 2</h3><p>Slide 2</p></CCarouselCaption>
+                  <CCarouselCaption>
+                    <h3>Slide 2</h3>
+                    <p>Slide 2</p>
+                  </CCarouselCaption>
                 </CCarouselItem>
                 <CCarouselItem>
-                  <img className="d-block w-100" src={slides[2]} alt="slide 3"/>
+                  <img className="d-block w-100" src={slides[2]} alt="slide 3" />
-                  <CCarouselCaption><h3>Slide 3</h3><p>Slide 3</p></CCarouselCaption>
+                  <CCarouselCaption>
+                    <h3>Slide 3</h3>
+                    <p>Slide 3</p>
+                  </CCarouselCaption>
                 </CCarouselItem>
               </CCarouselInner>
-              <CCarouselControl direction="prev"/>
+              <CCarouselControl direction="prev" />
-              <CCarouselControl direction="next"/>
+              <CCarouselControl direction="next" />
             </CCarousel>
           </CCardBody>
         </CCard>
       </CCol>
       <CCol xs="12" xl="6">
         <CCard className="mb-4">
-          <CCardHeader>
+          <CCardHeader>Carousel animation</CCardHeader>
-            Carousel animation
-          </CCardHeader>
           <CCardBody>
             <CCarousel animate>
-              <CCarouselIndicators/>
+              <CCarouselIndicators />
               <CCarouselInner>
                 <CCarouselItem>
-                  <img className="d-block w-100" src={slides[0]} alt="slide 1"/>
+                  <img className="d-block w-100" src={slides[0]} alt="slide 1" />
-                  <CCarouselCaption><h3>Slide 1</h3><p>Slide 1</p></CCarouselCaption>
+                  <CCarouselCaption>
+                    <h3>Slide 1</h3>
+                    <p>Slide 1</p>
+                  </CCarouselCaption>
                 </CCarouselItem>
                 <CCarouselItem>
-                  <img className="d-block w-100" src={slides[1]} alt="slide 2"/>
+                  <img className="d-block w-100" src={slides[1]} alt="slide 2" />
-                  <CCarouselCaption><h3>Slide 2</h3><p>Slide 2</p></CCarouselCaption>
+                  <CCarouselCaption>
+                    <h3>Slide 2</h3>
+                    <p>Slide 2</p>
+                  </CCarouselCaption>
                 </CCarouselItem>
                 <CCarouselItem>
-                  <img className="d-block w-100" src={slides[2]} alt="slide 3"/>
+                  <img className="d-block w-100" src={slides[2]} alt="slide 3" />
-                  <CCarouselCaption><h3>Slide 3</h3><p>Slide 3</p></CCarouselCaption>
+                  <CCarouselCaption>
+                    <h3>Slide 3</h3>
+                    <p>Slide 3</p>
+                  </CCarouselCaption>
                 </CCarouselItem>
               </CCarouselInner>
-              <CCarouselControl direction="prev"/>
+              <CCarouselControl direction="prev" />
-              <CCarouselControl direction="next"/>
+              <CCarouselControl direction="next" />
             </CCarousel>
           </CCardBody>
         </CCard>
       </CCol>
       <CCol xs="12" xl="6">
         <CCard className="mb-4">
-          <CCardHeader>
+          <CCardHeader>Carousel animation with autoSlide</CCardHeader>
-            Carousel animation with autoSlide
-          </CCardHeader>
           <CCardBody>
             <CCarousel animate autoSlide={3000}>
-              <CCarouselIndicators/>
+              <CCarouselIndicators />
               <CCarouselInner>
                 <CCarouselItem>
-                  <img className="d-block w-100" src={slides[0]} alt="slide 1"/>
+                  <img className="d-block w-100" src={slides[0]} alt="slide 1" />
-                  <CCarouselCaption><h3>Slide 1</h3><p>Slide 1</p></CCarouselCaption>
+                  <CCarouselCaption>
+                    <h3>Slide 1</h3>
+                    <p>Slide 1</p>
+                  </CCarouselCaption>
                 </CCarouselItem>
                 <CCarouselItem>
-                  <img className="d-block w-100" src={slides[1]} alt="slide 2"/>
+                  <img className="d-block w-100" src={slides[1]} alt="slide 2" />
-                  <CCarouselCaption><h3>Slide 2</h3><p>Slide 2</p></CCarouselCaption>
+                  <CCarouselCaption>
+                    <h3>Slide 2</h3>
+                    <p>Slide 2</p>
+                  </CCarouselCaption>
                 </CCarouselItem>
                 <CCarouselItem>
-                  <img className="d-block w-100" src={slides[2]} alt="slide 3"/>
+                  <img className="d-block w-100" src={slides[2]} alt="slide 3" />
-                  <CCarouselCaption><h3>Slide 3</h3><p>Slide 3</p></CCarouselCaption>
+                  <CCarouselCaption>
+                    <h3>Slide 3</h3>
+                    <p>Slide 3</p>
+                  </CCarouselCaption>
                 </CCarouselItem>
               </CCarouselInner>
-              <CCarouselControl direction="prev"/>
+              <CCarouselControl direction="prev" />
-              <CCarouselControl direction="next"/>
+              <CCarouselControl direction="next" />
             </CCarousel>
           </CCardBody>
         </CCard>

src/views/base/collapses/Collapses.js

@@ -8,12 +8,11 @@ import {
   CCol,
   CCollapse,
   CFade,
-  CRow
+  CRow,
-} from '@coreui/react-ts';
+} from '@coreui/react-ts'
 import { DocsLink } from 'src/reusable'
 
 const Collapses = () => {
-
   const [collapse, setCollapse] = useState(false)
   const [collapseMulti, setCollapseMulti] = useState([false, false])
   const [accordion, setAccordion] = useState(1)
@@ -27,16 +26,16 @@ const Collapses = () => {
   const toggleMulti = (type) => {
     let newCollapse = collapseMulti.slice()
     switch (type) {
-      case "left":
+      case 'left':
-        newCollapse[0] = !collapseMulti[0];
+        newCollapse[0] = !collapseMulti[0]
-        break;
+        break
-      case "right":
+      case 'right':
-        newCollapse[1] = !collapseMulti[1];
+        newCollapse[1] = !collapseMulti[1]
-        break;
+        break
-      case "both":
+      case 'both':
-        newCollapse[0] = !collapseMulti[0];
+        newCollapse[0] = !collapseMulti[0]
-        newCollapse[1] = !collapseMulti[1];
+        newCollapse[1] = !collapseMulti[1]
-        break;
+        break
       default:
     }
     setCollapseMulti(newCollapse)
@@ -52,35 +51,34 @@ const Collapses = () => {
         <CCard className="mb-4">
           <CCardHeader>
             Collapse
-            <DocsLink name="CCollapse"/>
+            <DocsLink name="CCollapse" />
           </CCardHeader>
           <CCollapse show={collapse}>
             <CCardBody>
               <p>
-                Anim pariatur cliche reprehenderit,
+                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
-                enim eiusmod high life accusamus terry richardson ad squid. Nihil
+                richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
-                anim keffiyeh helvetica, craft beer labore wes anderson cred
+                cred nesciunt sapiente ea proident.
-                nesciunt sapiente ea proident.
               </p>
               <p>
-                Donec molestie odio id nisi malesuada, mattis tincidunt velit egestas. Sed non pulvinar risus. Aenean
+                Donec molestie odio id nisi malesuada, mattis tincidunt velit egestas. Sed non
-                elementum eleifend nunc, pellentesque dapibus arcu hendrerit fringilla. Aliquam in nibh massa. Cras
+                pulvinar risus. Aenean elementum eleifend nunc, pellentesque dapibus arcu hendrerit
-                ultricies lorem non enim volutpat, a eleifend urna placerat. Fusce id luctus urna. In sed leo tellus.
+                fringilla. Aliquam in nibh massa. Cras ultricies lorem non enim volutpat, a eleifend
-                Mauris tristique leo a nisl feugiat, eget vehicula leo venenatis. Quisque magna metus, luctus quis
+                urna placerat. Fusce id luctus urna. In sed leo tellus. Mauris tristique leo a nisl
-                sollicitudin vel, vehicula nec ipsum. Donec rutrum commodo lacus ut condimentum. Integer vel turpis
+                feugiat, eget vehicula leo venenatis. Quisque magna metus, luctus quis sollicitudin
-                purus. Etiam vehicula, nulla non fringilla blandit, massa purus faucibus tellus, a luctus enim orci non
+                vel, vehicula nec ipsum. Donec rutrum commodo lacus ut condimentum. Integer vel
-                augue. Aenean ullamcorper nisl urna, non feugiat tortor volutpat in. Vivamus lobortis massa dolor, eget
+                turpis purus. Etiam vehicula, nulla non fringilla blandit, massa purus faucibus
-                faucibus ipsum varius eget. Pellentesque imperdiet, turpis sed sagittis lobortis, leo elit laoreet arcu,
+                tellus, a luctus enim orci non augue. Aenean ullamcorper nisl urna, non feugiat
+                tortor volutpat in. Vivamus lobortis massa dolor, eget faucibus ipsum varius eget.
+                Pellentesque imperdiet, turpis sed sagittis lobortis, leo elit laoreet arcu,
                 vehicula sagittis elit leo id nisi.
               </p>
             </CCardBody>
           </CCollapse>
           <CCardFooter>
-            <CButton
+            <CButton color="primary" onClick={toggle} className={'mb-1'}>
-              color="primary"
+              Toggling button
-              onClick={toggle}
+            </CButton>
-              className={'mb-1'}
-            >Toggling button</CButton>
           </CCardFooter>
         </CCard>
 
@@ -91,19 +89,39 @@ const Collapses = () => {
           </CCardHeader>
           <CCardBody>
             <p>
-                <CButton color="primary" onClick={()=>{toggleMulti('left')}}>
+              <CButton
-                  Left</CButton>{' '}
+                color="primary"
-                <CButton color="primary" onClick={()=>{toggleMulti('right')}}>
+                onClick={() => {
-                  Right</CButton>{' '}
+                  toggleMulti('left')
-                <CButton color="primary" onClick={()=>{toggleMulti('both')}}>
+                }}
-                  Both</CButton>{' '}
+              >
+                Left
+              </CButton>{' '}
+              <CButton
+                color="primary"
+                onClick={() => {
+                  toggleMulti('right')
+                }}
+              >
+                Right
+              </CButton>{' '}
+              <CButton
+                color="primary"
+                onClick={() => {
+                  toggleMulti('both')
+                }}
+              >
+                Both
+              </CButton>{' '}
             </p>
             <CRow>
               <CCol xs>
                 <CCollapse show={collapseMulti[0]}>
                   <CCard className="mb-4">
                     <CCardBody>
-                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
+                      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
+                      richardson ad squid.Nihil anim keffiyeh helvetica, craft beer labore wes
+                      anderson cred nesciunt sapiente ea proident.
                     </CCardBody>
                   </CCard>
                 </CCollapse>
@@ -112,7 +130,9 @@ const Collapses = () => {
                 <CCollapse show={collapseMulti[1]}>
                   <CCard className="mb-4">
                     <CCardBody>
-                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
+                      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
+                      richardson ad squid.Nihil anim keffiyeh helvetica, craft beer labore wes
+                      anderson cred nesciunt sapiente ea proident.
                     </CCardBody>
                   </CCard>
                 </CCollapse>
@@ -121,12 +141,12 @@ const Collapses = () => {
           </CCardBody>
         </CCard>
 
-        <hr/>
+        <hr />
 
         <CCard className="mb-4">
           <CCardHeader>
             Fade
-            <DocsLink name="CFade"/>
+            <DocsLink name="CFade" />
           </CCardHeader>
           <CCardBody>
             <CFade timeout={300} in={fade} tag="h5" className="mt-3">
@@ -134,7 +154,9 @@ const Collapses = () => {
             </CFade>
           </CCardBody>
           <CCardFooter>
-            <CButton color="primary" onClick={toggleFade}>Toggle Fade</CButton>
+            <CButton color="primary" onClick={toggleFade}>
+              Toggle Fade
+            </CButton>
           </CCardFooter>
         </CCard>
       </CCol>
@@ -159,11 +181,14 @@ const Collapses = () => {
                 </CCardHeader>
                 <CCollapse show={accordion === 0}>
                   <CCardBody>
-                    1. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non
+                    1. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
-                    cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
+                    richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
-                    on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
+                    brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
-                    nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
+                    sunt aliqua put a bird on it squid single-origin coffee nulla assumenda
-                    beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven''t heard of them accusamus labore sustainable VHS.
+                    shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
+                    cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
+                    Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
+                    you probably haven''t heard of them accusamus labore sustainable VHS.
                   </CCardBody>
                 </CCollapse>
               </CCard>
@@ -180,11 +205,14 @@ const Collapses = () => {
                 </CCardHeader>
                 <CCollapse show={accordion === 1}>
                   <CCardBody>
-                    2. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non
+                    2. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
-                    cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
+                    richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
-                    on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
+                    brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
-                    nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
+                    sunt aliqua put a bird on it squid single-origin coffee nulla assumenda
-                    beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven''t heard of them accusamus labore sustainable VHS.
+                    shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
+                    cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
+                    Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
+                    you probably haven''t heard of them accusamus labore sustainable VHS.
                   </CCardBody>
                 </CCollapse>
               </CCard>
@@ -201,11 +229,14 @@ const Collapses = () => {
                 </CCardHeader>
                 <CCollapse show={accordion === 2}>
                   <CCardBody>
-                    3. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non
+                    3. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
-                    cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
+                    richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
-                    on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
+                    brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
-                    nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
+                    sunt aliqua put a bird on it squid single-origin coffee nulla assumenda
-                    beer farm-to-table, raw denim aesthetic synth nesciunt you probably havent heard of them accusamus labore sustainable VHS.
+                    shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
+                    cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
+                    Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
+                    you probably havent heard of them accusamus labore sustainable VHS.
                   </CCardBody>
                 </CCollapse>
               </CCard>

src/views/base/forms/BasicForms.js

@@ -38,7 +38,7 @@ const BasicForms = () => {
             <CCardHeader>
               Credit Card
               <small> Form</small>
-              <DocsLink name="-Input"/>
+              <DocsLink name="-Input" />
             </CCardHeader>
             <CCardBody>
               <CRow>
@@ -97,7 +97,7 @@ const BasicForms = () => {
                 <CCol xs="4">
                   <div className="mb-3">
                     <CFormLabel htmlFor="cvv">CVV/CVC</CFormLabel>
-                    <CFormControl id="cvv" placeholder="123" required/>
+                    <CFormControl id="cvv" placeholder="123" required />
                   </div>
                 </CCol>
               </CRow>
@@ -153,7 +153,12 @@ const BasicForms = () => {
               <small> Elements</small>
             </CCardHeader>
             <CCardBody>
-              <CForm action="" method="post" encType="multipart/form-data" className="form-horizontal">
+              <CForm
+                action=""
+                method="post"
+                encType="multipart/form-data"
+                className="form-horizontal"
+              >
                 <CRow className="mb-3">
                   <CCol md="3">
                     <CFormLabel>Static</CFormLabel>
@@ -176,7 +181,13 @@ const BasicForms = () => {
                     <CFormLabel htmlFor="email-input">Email Input</CFormLabel>
                   </CCol>
                   <CCol xs="12" md="9">
-                    <CFormControl type="email" id="email-input" name="email-input" placeholder="Enter Email" autoComplete="email"/>
+                    <CFormControl
+                      type="email"
+                      id="email-input"
+                      name="email-input"
+                      placeholder="Enter Email"
+                      autoComplete="email"
+                    />
                     <CFormText>Please enter your email</CFormText>
                   </CCol>
                 </CRow>
@@ -185,7 +196,13 @@ const BasicForms = () => {
                     <CFormLabel htmlFor="password-input">Password</CFormLabel>
                   </CCol>
                   <CCol xs="12" md="9">
-                    <CFormControl type="password" id="password-input" name="password-input" placeholder="Password" autoComplete="new-password" />
+                    <CFormControl
+                      type="password"
+                      id="password-input"
+                      name="password-input"
+                      placeholder="Password"
+                      autoComplete="new-password"
+                    />
                     <CFormText>Please enter a complex password</CFormText>
                   </CCol>
                 </CRow>
@@ -194,7 +211,12 @@ const BasicForms = () => {
                     <CFormLabel htmlFor="date-input">Date Input</CFormLabel>
                   </CCol>
                   <CCol xs="12" md="9">
-                    <CFormControl type="date" id="date-input" name="date-input" placeholder="date" />
+                    <CFormControl
+                      type="date"
+                      id="date-input"
+                      name="date-input"
+                      placeholder="date"
+                    />
                   </CCol>
                 </CRow>
                 <CRow className="mb-3">
@@ -202,7 +224,12 @@ const BasicForms = () => {
                     <CFormLabel htmlFor="disabled-input">Disabled Input</CFormLabel>
                   </CCol>
                   <CCol xs="12" md="9">
-                    <CFormControl id="disabled-input" name="disabled-input" placeholder="Disabled" disabled />
+                    <CFormControl
+                      id="disabled-input"
+                      name="disabled-input"
+                      placeholder="Disabled"
+                      disabled
+                    />
                   </CCol>
                 </CRow>
                 <CRow className="mb-3">
@@ -284,10 +311,30 @@ const BasicForms = () => {
                     Switch checkboxes
                   </CCol>
                   <CCol sm="9">
-                    <CFormCheck switch label="Default switch checkbox input" id="formSwitchCheckDefault"/>
+                    <CFormCheck
-                    <CFormCheck switch label="Checked switch checkbox input" id="formSwitchCheckChecked" defaultChecked/>
+                      switch
-                    <CFormCheck switch label="Disabled switch checkbox input" id="formSwitchCheckDisabled" disabled/>
+                      label="Default switch checkbox input"
-                    <CFormCheck switch label="Disabled checked switch checkbox input" id="formSwitchCheckCheckedDisabled" defaultChecked disabled/>
+                      id="formSwitchCheckDefault"
+                    />
+                    <CFormCheck
+                      switch
+                      label="Checked switch checkbox input"
+                      id="formSwitchCheckChecked"
+                      defaultChecked
+                    />
+                    <CFormCheck
+                      switch
+                      label="Disabled switch checkbox input"
+                      id="formSwitchCheckDisabled"
+                      disabled
+                    />
+                    <CFormCheck
+                      switch
+                      label="Disabled checked switch checkbox input"
+                      id="formSwitchCheckCheckedDisabled"
+                      defaultChecked
+                      disabled
+                    />
                   </CCol>
                 </CRow>
                 <CRow className="mb-3">
@@ -296,13 +343,31 @@ const BasicForms = () => {
                   </CCol>
                   <CCol md="9">
                     <div className="mb-3">
-                      <CFormCheck type="radio" id="radio1" name="radios" value="option1" label="Option 1"/>
+                      <CFormCheck
+                        type="radio"
+                        id="radio1"
+                        name="radios"
+                        value="option1"
+                        label="Option 1"
+                      />
                     </div>
                     <div className="mb-3">
-                      <CFormCheck type="radio" id="radio2" name="radios" value="option2" label="Option 2"/>
+                      <CFormCheck
+                        type="radio"
+                        id="radio2"
+                        name="radios"
+                        value="option2"
+                        label="Option 2"
+                      />
                     </div>
                     <div className="mb-3">
-                      <CFormCheck type="radio" id="radio3" name="radios" value="option3" label="Option 3"/>
+                      <CFormCheck
+                        type="radio"
+                        id="radio3"
+                        name="radios"
+                        value="option3"
+                        label="Option 3"
+                      />
                     </div>
                   </CCol>
                 </CRow>
@@ -312,28 +377,56 @@ const BasicForms = () => {
                   </CCol>
                   <CCol md="9">
                     <div className="mb-3">
-                      <CFormCheck type="radio" inline id="inline-radio1" name="inline-radios" value="option1" label="One"/>
+                      <CFormCheck
-                      <CFormCheck type="radio" inline id="inline-radio2" name="inline-radios" value="option2" label="Two"/>
+                        type="radio"
-                      <CFormCheck type="radio" inline id="inline-radio3" name="inline-radios" value="option3" label="Three"/>
+                        inline
+                        id="inline-radio1"
+                        name="inline-radios"
+                        value="option1"
+                        label="One"
+                      />
+                      <CFormCheck
+                        type="radio"
+                        inline
+                        id="inline-radio2"
+                        name="inline-radios"
+                        value="option2"
+                        label="Two"
+                      />
+                      <CFormCheck
+                        type="radio"
+                        inline
+                        id="inline-radio3"
+                        name="inline-radios"
+                        value="option3"
+                        label="Three"
+                      />
                     </div>
                   </CCol>
                 </CRow>
                 <CRow className="mb-3">
-                  <CCol md="3"><CFormLabel>Checkboxes</CFormLabel></CCol>
+                  <CCol md="3">
+                    <CFormLabel>Checkboxes</CFormLabel>
+                  </CCol>
                   <CCol md="9">
+                    <div className="mb-3">
+                      <CFormCheck id="checkbox1" name="checkbox1" value="option1" label="Option" />
+                    </div>
                     <div className="mb-3">
                       <CFormCheck
-                        id="checkbox1"
+                        id="checkbox2"
-                        name="checkbox1"
+                        name="checkbox2"
-                        value="option1"
+                        value="option2"
-                        label="Option"
+                        label="Option 2"
                       />
                     </div>
                     <div className="mb-3">
-                      <CFormCheck id="checkbox2" name="checkbox2" value="option2" label="Option 2"/>
+                      <CFormCheck
-                    </div>
+                        id="checkbox3"
-                    <div className="mb-3">
+                        name="checkbox3"
-                      <CFormCheck id="checkbox3" name="checkbox3" value="option3" label="Option 3"/>
+                        value="option3"
+                        label="Option 3"
+                      />
                     </div>
                   </CCol>
                 </CRow>
@@ -350,15 +443,29 @@ const BasicForms = () => {
                         value="option1"
                         label="One"
                       />
-                      <CFormCheck inline id="inline-checkbox2" name="inline-checkbox2" value="option2" label="Two"/>
+                      <CFormCheck
-                      <CFormCheck inline id="inline-checkbox3" name="inline-checkbox3" value="option3" label="Three"/>
+                        inline
+                        id="inline-checkbox2"
+                        name="inline-checkbox2"
+                        value="option2"
+                        label="Two"
+                      />
+                      <CFormCheck
+                        inline
+                        id="inline-checkbox3"
+                        name="inline-checkbox3"
+                        value="option3"
+                        label="Three"
+                      />
                     </div>
                   </CCol>
                 </CRow>
                 <CRow className="mb-3">
-                  <CFormLabel col md="3" htmlFor="file-input">File input</CFormLabel>
+                  <CFormLabel col md="3" htmlFor="file-input">
+                    File input
+                  </CFormLabel>
                   <CCol xs="12" md="9">
-                    <CFormControl type="file" id="file-input" name="file-input"/>
+                    <CFormControl type="file" id="file-input" name="file-input" />
                   </CCol>
                 </CRow>
                 <CRow className="mb-3">
@@ -366,7 +473,8 @@ const BasicForms = () => {
                     <CFormLabel>Multiple File input</CFormLabel>
                   </CCol>
                   <CCol xs="12" md="9">
-                  <CFormControl type="file"
+                    <CFormControl
+                      type="file"
                       id="file-multiple-input"
                       name="file-multiple-input"
                       multiple
@@ -377,9 +485,11 @@ const BasicForms = () => {
                   </CCol>
                 </CRow>
                 <CRow className="mb-3">
-                  <CFormLabel col md={3}>Custom file input</CFormLabel>
+                  <CFormLabel col md={3}>
+                    Custom file input
+                  </CFormLabel>
                   <CCol xs="12" md="9">
-                    <CFormControl type="file" id="custom-file-input"/>
+                    <CFormControl type="file" id="custom-file-input" />
                     <CFormLabel htmlFor="custom-file-input" variant="custom-file">
                       Choose file...
                     </CFormLabel>
@@ -388,8 +498,12 @@ const BasicForms = () => {
               </CForm>
             </CCardBody>
             <CCardFooter>
-              <CButton type="submit" size="sm" color="primary"><CIcon name="cil-scrubber" /> Submit</CButton>
+              <CButton type="submit" size="sm" color="primary">
-              <CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban" /> Reset</CButton>
+                <CIcon name="cil-scrubber" /> Submit
+              </CButton>
+              <CButton type="reset" size="sm" color="danger">
+                <CIcon name="cil-ban" /> Reset
+              </CButton>
             </CCardFooter>
           </CCard>
           <CCard className="mb-4">
@@ -400,18 +514,31 @@ const BasicForms = () => {
             <CCardBody>
               <CForm action="" method="post" inline>
                 <div className="pe-1">
-                  <CFormLabel htmlFor="exampleInputName2" className="pe-1">Name</CFormLabel>
+                  <CFormLabel htmlFor="exampleInputName2" className="pe-1">
+                    Name
+                  </CFormLabel>
                   <CFormControl id="exampleInputName2" placeholder="Jane Doe" required />
                 </div>
                 <div className="pe-1">
-                  <CFormLabel htmlFor="exampleInputEmail2" className="pe-1">Email</CFormLabel>
+                  <CFormLabel htmlFor="exampleInputEmail2" className="pe-1">
-                  <CFormControl type="email" id="exampleInputEmail2" placeholder="jane.doe@example.com" required />
+                    Email
+                  </CFormLabel>
+                  <CFormControl
+                    type="email"
+                    id="exampleInputEmail2"
+                    placeholder="jane.doe@example.com"
+                    required
+                  />
                 </div>
               </CForm>
             </CCardBody>
             <CCardFooter>
-              <CButton type="submit" size="sm" color="primary"><CIcon name="cil-scrubber" /> Submit</CButton>
+              <CButton type="submit" size="sm" color="primary">
-              <CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban" /> Reset</CButton>
+                <CIcon name="cil-scrubber" /> Submit
+              </CButton>
+              <CButton type="reset" size="sm" color="danger">
+                <CIcon name="cil-ban" /> Reset
+              </CButton>
             </CCardFooter>
           </CCard>
         </CCol>
@@ -428,7 +555,13 @@ const BasicForms = () => {
                     <CFormLabel htmlFor="hf-email">Email</CFormLabel>
                   </CCol>
                   <CCol xs="12" md="9">
-                    <CFormControl type="email" id="hf-email" name="hf-email" placeholder="Enter Email..." autoComplete="email" />
+                    <CFormControl
+                      type="email"
+                      id="hf-email"
+                      name="hf-email"
+                      placeholder="Enter Email..."
+                      autoComplete="email"
+                    />
                     <CFormText>Please enter your email</CFormText>
                   </CCol>
                 </CRow>
@@ -437,14 +570,25 @@ const BasicForms = () => {
                     <CFormLabel htmlFor="hf-password">Password</CFormLabel>
                   </CCol>
                   <CCol xs="12" md="9">
-                    <CFormControl type="password" id="hf-password" name="hf-password" placeholder="Enter Password..." autoComplete="current-password"/>
+                    <CFormControl
+                      type="password"
+                      id="hf-password"
+                      name="hf-password"
+                      placeholder="Enter Password..."
+                      autoComplete="current-password"
+                    />
                     <CFormText>Please enter your password</CFormText>
                   </CCol>
                 </CRow>
               </CForm>
             </CCardBody>
             <CCardFooter>
-              <CButton type="submit" size="sm" color="primary"><CIcon name="cil-scrubber" /> Submit</CButton> <CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban" /> Reset</CButton>
+              <CButton type="submit" size="sm" color="primary">
+                <CIcon name="cil-scrubber" /> Submit
+              </CButton>{' '}
+              <CButton type="reset" size="sm" color="danger">
+                <CIcon name="cil-ban" /> Reset
+              </CButton>
             </CCardFooter>
           </CCard>
           <CCard className="mb-4">
@@ -456,18 +600,35 @@ const BasicForms = () => {
               <CForm action="" method="post">
                 <div className="mb-3">
                   <CFormLabel htmlFor="nf-email">Email</CFormLabel>
-                  <CFormControl type="email" id="nf-email" name="nf-email" placeholder="Enter Email.." autoComplete="email"/>
+                  <CFormControl
+                    type="email"
+                    id="nf-email"
+                    name="nf-email"
+                    placeholder="Enter Email.."
+                    autoComplete="email"
+                  />
                   <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"/>
+                  <CFormControl
+                    type="password"
+                    id="nf-password"
+                    name="nf-password"
+                    placeholder="Enter Password.."
+                    autoComplete="current-password"
+                  />
                   <CFormText>Please enter your password</CFormText>
                 </div>
               </CForm>
             </CCardBody>
             <CCardFooter>
-              <CButton type="submit" size="sm" color="primary"><CIcon name="cil-scrubber" /> Submit</CButton> <CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban" /> Reset</CButton>
+              <CButton type="submit" size="sm" color="primary">
+                <CIcon name="cil-scrubber" /> Submit
+              </CButton>{' '}
+              <CButton type="reset" size="sm" color="danger">
+                <CIcon name="cil-ban" /> Reset
+              </CButton>
             </CCardFooter>
           </CCard>
           <CCard className="mb-4">
@@ -530,7 +691,12 @@ const BasicForms = () => {
               </CForm>
             </CCardBody>
             <CCardFooter>
-              <CButton type="submit" size="sm" color="primary"><CIcon name="cil-user" /> Login</CButton> <CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban" /> Reset</CButton>
+              <CButton type="submit" size="sm" color="primary">
+                <CIcon name="cil-user" /> Login
+              </CButton>{' '}
+              <CButton type="reset" size="sm" color="danger">
+                <CIcon name="cil-ban" /> Reset
+              </CButton>
             </CCardFooter>
           </CCard>
           <CCard className="mb-4">
@@ -541,28 +707,52 @@ const BasicForms = () => {
             <CCardBody>
               <CForm action="" method="post" className="form-horizontal">
                 <CRow className="mb-3">
-                  <CFormLabel sm="5" col="sm" htmlFor="input-small">Small Input</CFormLabel>
+                  <CFormLabel sm="5" col="sm" htmlFor="input-small">
+                    Small Input
+                  </CFormLabel>
                   <CCol sm="6">
-                    <CFormControl size="sm" type="text" id="input-small" name="input-small" className="input-sm" placeholder=".form-control-sm" />
+                    <CFormControl
+                      size="sm"
+                      type="text"
+                      id="input-small"
+                      name="input-small"
+                      className="input-sm"
+                      placeholder=".form-control-sm"
+                    />
                   </CCol>
                 </CRow>
                 <CRow className="mb-3">
-                  <CFormLabel sm="5" col htmlFor="input-normal">Normal Input</CFormLabel>
+                  <CFormLabel sm="5" col htmlFor="input-normal">
+                    Normal Input
+                  </CFormLabel>
                   <CCol sm="6">
                     <CFormControl id="input-normal" name="input-normal" placeholder="Normal" />
                   </CCol>
                 </CRow>
                 <CRow className="mb-3">
-                  <CFormLabel sm="5" col="lg" htmlFor="input-large">Large Input</CFormLabel>
+                  <CFormLabel sm="5" col="lg" htmlFor="input-large">
+                    Large Input
+                  </CFormLabel>
                   <CCol sm="6">
-                    <CFormControl size="lg" type="text" id="input-large" name="input-large" className="input-lg" placeholder=".form-control-lg" />
+                    <CFormControl
+                      size="lg"
+                      type="text"
+                      id="input-large"
+                      name="input-large"
+                      className="input-lg"
+                      placeholder=".form-control-lg"
+                    />
                   </CCol>
                 </CRow>
               </CForm>
             </CCardBody>
             <CCardFooter>
-              <CButton type="submit" size="sm" color="primary"><CIcon name="cil-scrubber" /> Submit</CButton>
+              <CButton type="submit" size="sm" color="primary">
-              <CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban" /> Reset</CButton>
+                <CIcon name="cil-scrubber" /> Submit
+              </CButton>
+              <CButton type="reset" size="sm" color="danger">
+                <CIcon name="cil-ban" /> Reset
+              </CButton>
             </CCardFooter>
           </CCard>
         </CCol>
@@ -590,9 +780,7 @@ const BasicForms = () => {
         </CCol>
         <CCol xs="12" sm="6">
           <CCard className="mb-4">
-            <CCardHeader>
+            <CCardHeader>Validation feedback Form</CCardHeader>
-              Validation feedback Form
-            </CCardHeader>
             <CCardBody>
               <CForm className="was-validated">
                 <div className="mb-3">
@@ -603,9 +791,7 @@ const BasicForms = () => {
                 <div className="mb-3">
                   <CFormLabel htmlFor="inputWarning2i">Required input</CFormLabel>
                   <CFormControl id="inputWarning2i" required />
-                  <CFormFeedback invalid>
+                  <CFormFeedback invalid>Please provide a valid information</CFormFeedback>
-                    Please provide a valid information
-                  </CFormFeedback>
                   <CFormFeedback valid>Input provided</CFormFeedback>
                 </div>
               </CForm>
@@ -616,9 +802,7 @@ const BasicForms = () => {
       <CRow>
         <CCol xs="12" md="4">
           <CCard className="mb-4">
-            <CCardHeader>
+            <CCardHeader>Icon/Text Groups</CCardHeader>
-              Icon/Text Groups
-            </CCardHeader>
             <CCardBody>
               <CForm action="" method="post" className="form-horizontal">
                 <CRow className="mb-3">
@@ -627,14 +811,23 @@ const BasicForms = () => {
                       <CInputGroupText>
                         <CIcon name="cil-user" />
                       </CInputGroupText>
-                      <CFormControl id="input1-group1" name="input1-group1" placeholder="Username" />
+                      <CFormControl
+                        id="input1-group1"
+                        name="input1-group1"
+                        placeholder="Username"
+                      />
                     </CInputGroup>
                   </CCol>
                 </CRow>
                 <CRow className="mb-3">
                   <CCol md="12">
                     <CInputGroup className="mb-3">
-                      <CFormControl type="email" id="input2-group1" name="input2-group1" placeholder="Email" />
+                      <CFormControl
+                        type="email"
+                        id="input2-group1"
+                        name="input2-group1"
+                        placeholder="Email"
+                      />
                       <CInputGroupText>
                         <CIcon name="cil-envelope-closed" />
                       </CInputGroupText>
@@ -655,56 +848,77 @@ const BasicForms = () => {
               </CForm>
             </CCardBody>
             <CCardFooter>
-              <CButton type="submit" size="sm" color="success"><CIcon name="cil-scrubber" /> Submit</CButton>
+              <CButton type="submit" size="sm" color="success">
-              <CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban" /> Reset</CButton>
+                <CIcon name="cil-scrubber" /> Submit
+              </CButton>
+              <CButton type="reset" size="sm" color="danger">
+                <CIcon name="cil-ban" /> Reset
+              </CButton>
             </CCardFooter>
           </CCard>
         </CCol>
         <CCol xs="12" md="4">
           <CCard className="mb-4">
-            <CCardHeader>
+            <CCardHeader>Button Groups</CCardHeader>
-              Button Groups
-            </CCardHeader>
             <CCardBody>
               <CForm action="" method="post" className="form-horizontal">
                 <CRow className="mb-3">
                   <CCol md="12">
                     <CInputGroup className="mb-3">
-                      <CButton type="button" color="primary"><CIcon name="cil-magnifying-glass" /> Search</CButton>
+                      <CButton type="button" color="primary">
-                      <CFormControl id="input1-group2" name="input1-group2" placeholder="Username" />
+                        <CIcon name="cil-magnifying-glass" /> Search
+                      </CButton>
+                      <CFormControl
+                        id="input1-group2"
+                        name="input1-group2"
+                        placeholder="Username"
+                      />
                     </CInputGroup>
                   </CCol>
                 </CRow>
                 <CRow className="mb-3">
                   <CCol md="12">
                     <CInputGroup className="mb-3">
-                      <CFormControl type="email" id="input2-group2" name="input2-group2" placeholder="Email" />
+                      <CFormControl
-                      <CButton type="button" color="primary">Submit</CButton>
+                        type="email"
+                        id="input2-group2"
+                        name="input2-group2"
+                        placeholder="Email"
+                      />
+                      <CButton type="button" color="primary">
+                        Submit
+                      </CButton>
                     </CInputGroup>
                   </CCol>
                 </CRow>
                 <CRow className="mb-3">
                   <CCol md="12">
                     <CInputGroup className="mb-3">
-                      <CButton type="button" color="primary"><CIcon name="cib-facebook" /></CButton>
+                      <CButton type="button" color="primary">
+                        <CIcon name="cib-facebook" />
+                      </CButton>
                       <CFormControl id="input3-group2" name="input3-group2" placeholder="Search" />
-                      <CButton type="button" color="primary"><CIcon name="cib-twitter" /></CButton>
+                      <CButton type="button" color="primary">
+                        <CIcon name="cib-twitter" />
+                      </CButton>
                     </CInputGroup>
                   </CCol>
                 </CRow>
               </CForm>
             </CCardBody>
             <CCardFooter>
-              <CButton type="submit" size="sm" color="success"><CIcon name="cil-scrubber" /> Submit</CButton>
+              <CButton type="submit" size="sm" color="success">
-              <CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban" /> Reset</CButton>
+                <CIcon name="cil-scrubber" /> Submit
+              </CButton>
+              <CButton type="reset" size="sm" color="danger">
+                <CIcon name="cil-ban" /> Reset
+              </CButton>
             </CCardFooter>
           </CCard>
         </CCol>
         <CCol xs="12" md="4">
           <CCard className="mb-4">
-            <CCardHeader>
+            <CCardHeader>Dropdowns Groups</CCardHeader>
-              Dropdowns Groups
-            </CCardHeader>
             <CCardBody>
               <CForm className="form-horizontal">
                 <CRow className="mb-3">
@@ -722,18 +936,25 @@ const BasicForms = () => {
                           <CDropdownItem>Separated link</CDropdownItem>
                         </CDropdownMenu>
                       </CDropdown>
-                      <CFormControl id="input1-group3" name="input1-group3" placeholder="Username" />
+                      <CFormControl
+                        id="input1-group3"
+                        name="input1-group3"
+                        placeholder="Username"
+                      />
                     </CInputGroup>
                   </CCol>
                 </CRow>
                 <CRow className="mb-3">
                   <CCol md="12">
                     <CInputGroup className="mb-3">
-                      <CFormControl type="email" id="input2-group3" name="input2-group3" placeholder="Email" />
+                      <CFormControl
+                        type="email"
+                        id="input2-group3"
+                        name="input2-group3"
+                        placeholder="Email"
+                      />
                       <CDropdown className="input-group-append">
-                        <CDropdownToggle color="primary">
+                        <CDropdownToggle color="primary">Dropdown</CDropdownToggle>
-                          Dropdown
-                        </CDropdownToggle>
                         <CDropdownMenu>
                           <CDropdownItem>Action</CDropdownItem>
                           <CDropdownItem>Another Action</CDropdownItem>
@@ -777,8 +998,12 @@ const BasicForms = () => {
               </CForm>
             </CCardBody>
             <CCardFooter>
-              <CButton type="submit" size="sm" color="success"><CIcon name="cil-scrubber" /> Submit</CButton>
+              <CButton type="submit" size="sm" color="success">
-              <CButton type="reset" size="sm" color="danger"><CIcon name="cil-ban" /> Reset</CButton>
+                <CIcon name="cil-scrubber" /> Submit
+              </CButton>
+              <CButton type="reset" size="sm" color="danger">
+                <CIcon name="cil-ban" /> Reset
+              </CButton>
             </CCardFooter>
           </CCard>
         </CCol>
@@ -788,7 +1013,10 @@ const BasicForms = () => {
           <CCard className="mb-4">
             <CCardHeader>
               Use the grid for big devices!
-              <small> <code>.col-lg-*</code> <code>.col-md-*</code> <code>.col-sm-*</code></small>
+              <small>
+                {' '}
+                <code>.col-lg-*</code> <code>.col-md-*</code> <code>.col-sm-*</code>
+              </small>
             </CCardHeader>
             <CCardBody>
               <CForm action="" method="post" className="form-horizontal">
@@ -835,11 +1063,21 @@ const BasicForms = () => {
               </CForm>
             </CCardBody>
             <CCardFooter>
-              <CButton type="submit" size="sm" color="primary">Action</CButton>
+              <CButton type="submit" size="sm" color="primary">
-              <CButton size="sm" color="danger">Action</CButton>
+                Action
-              <CButton size="sm" color="warning">Action</CButton>
+              </CButton>
-              <CButton size="sm" color="info">Action</CButton>
+              <CButton size="sm" color="danger">
-              <CButton size="sm" color="success">Action</CButton>
+                Action
+              </CButton>
+              <CButton size="sm" color="warning">
+                Action
+              </CButton>
+              <CButton size="sm" color="info">
+                Action
+              </CButton>
+              <CButton size="sm" color="success">
+                Action
+              </CButton>
             </CCardFooter>
           </CCard>
         </CCol>
@@ -847,7 +1085,10 @@ const BasicForms = () => {
           <CCard className="mb-4">
             <CCardHeader>
               Input Grid for small devices!
-              <small> <code>.col-*</code></small>
+              <small>
+                {' '}
+                <code>.col-*</code>
+              </small>
             </CCardHeader>
             <CCardBody>
               <CForm action="" method="post" className="form-horizontal">
@@ -894,11 +1135,21 @@ const BasicForms = () => {
               </CForm>
             </CCardBody>
             <CCardFooter>
-              <CButton type="submit" size="sm" color="primary">Action</CButton>
+              <CButton type="submit" size="sm" color="primary">
-              <CButton size="sm" color="danger">Action</CButton>
+                Action
-              <CButton size="sm" color="warning">Action</CButton>
+              </CButton>
-              <CButton size="sm" color="info">Action</CButton>
+              <CButton size="sm" color="danger">
-              <CButton size="sm" color="success">Action</CButton>
+                Action
+              </CButton>
+              <CButton size="sm" color="warning">
+                Action
+              </CButton>
+              <CButton size="sm" color="info">
+                Action
+              </CButton>
+              <CButton size="sm" color="success">
+                Action
+              </CButton>
             </CCardFooter>
           </CCard>
         </CCol>
@@ -906,34 +1157,50 @@ const BasicForms = () => {
       <CRow>
         <CCol xs="12" sm="4">
           <CCard className="mb-4">
-            <CCardHeader>
+            <CCardHeader>Example Form</CCardHeader>
-              Example Form
-            </CCardHeader>
             <CCardBody>
               <CForm action="" method="post">
                 <div className="mb-3">
                   <CInputGroup className="mb-3">
                     <CInputGroupText>Username</CInputGroupText>
-                    <CFormControl type="email" id="username3" name="username3" autoComplete="name"/>
+                    <CFormControl
-                    <CInputGroupText><CIcon name="cil-user" /></CInputGroupText>
+                      type="email"
+                      id="username3"
+                      name="username3"
+                      autoComplete="name"
+                    />
+                    <CInputGroupText>
+                      <CIcon name="cil-user" />
+                    </CInputGroupText>
                   </CInputGroup>
                 </div>
                 <div className="mb-3">
                   <CInputGroup className="mb-3">
                     <CInputGroupText>Email</CInputGroupText>
-                    <CFormControl type="email" id="email3" name="email3" autoComplete="username"/>
+                    <CFormControl type="email" id="email3" name="email3" autoComplete="username" />
-                    <CInputGroupText><CIcon name="cil-envelope-closed" /></CInputGroupText>
+                    <CInputGroupText>
+                      <CIcon name="cil-envelope-closed" />
+                    </CInputGroupText>
                   </CInputGroup>
                 </div>
                 <div className="mb-3">
                   <CInputGroup className="mb-3">
                     <CInputGroupText>Password</CInputGroupText>
-                    <CFormControl type="password" id="password3" name="password3" autoComplete="current-password"/>
+                    <CFormControl
-                    <CInputGroupText><CIcon name="cil-asterisk" /></CInputGroupText>
+                      type="password"
+                      id="password3"
+                      name="password3"
+                      autoComplete="current-password"
+                    />
+                    <CInputGroupText>
+                      <CIcon name="cil-asterisk" />
+                    </CInputGroupText>
                   </CInputGroup>
                 </div>
                 <div className="form-actions">
-                  <CButton type="submit" size="sm" color="primary">Submit</CButton>
+                  <CButton type="submit" size="sm" color="primary">
+                    Submit
+                  </CButton>
                 </div>
               </CForm>
             </CCardBody>
@@ -941,31 +1208,54 @@ const BasicForms = () => {
         </CCol>
         <CCol xs="12" sm="4">
           <CCard className="mb-4">
-            <CCardHeader>
+            <CCardHeader>Example Form</CCardHeader>
-              Example Form
-            </CCardHeader>
             <CCardBody>
               <CForm action="" method="post">
                 <div className="mb-3">
                   <CInputGroup className="mb-3">
-                    <CFormControl id="username2" name="username2" placeholder="Username" autoComplete="name"/>
+                    <CFormControl
-                    <CInputGroupText><CIcon name="cil-user" /></CInputGroupText>
+                      id="username2"
+                      name="username2"
+                      placeholder="Username"
+                      autoComplete="name"
+                    />
+                    <CInputGroupText>
+                      <CIcon name="cil-user" />
+                    </CInputGroupText>
                   </CInputGroup>
                 </div>
                 <div className="mb-3">
                   <CInputGroup className="mb-3">
-                    <CFormControl type="email" id="email2" name="email2" placeholder="Email" autoComplete="username"/>
+                    <CFormControl
-                    <CInputGroupText><CIcon name="cil-envelope-closed" /></CInputGroupText>
+                      type="email"
+                      id="email2"
+                      name="email2"
+                      placeholder="Email"
+                      autoComplete="username"
+                    />
+                    <CInputGroupText>
+                      <CIcon name="cil-envelope-closed" />
+                    </CInputGroupText>
                   </CInputGroup>
                 </div>
                 <div className="mb-3">
                   <CInputGroup className="mb-3">
-                    <CFormControl type="password" id="password2" name="password2" placeholder="Password" autoComplete="current-password"/>
+                    <CFormControl
-                    <CInputGroupText><CIcon name="cil-asterisk" /></CInputGroupText>
+                      type="password"
+                      id="password2"
+                      name="password2"
+                      placeholder="Password"
+                      autoComplete="current-password"
+                    />
+                    <CInputGroupText>
+                      <CIcon name="cil-asterisk" />
+                    </CInputGroupText>
                   </CInputGroup>
                 </div>
                 <div className="form-actions">
-                  <CButton type="submit" size="sm" color="secondary">Submit</CButton>
+                  <CButton type="submit" size="sm" color="secondary">
+                    Submit
+                  </CButton>
                 </div>
               </CForm>
             </CCardBody>
@@ -973,31 +1263,54 @@ const BasicForms = () => {
         </CCol>
         <CCol xs="12" sm="4">
           <CCard className="mb-4">
-            <CCardHeader>
+            <CCardHeader>Example Form</CCardHeader>
-              Example Form
-            </CCardHeader>
             <CCardBody>
               <CForm action="" method="post">
                 <div className="mb-3">
                   <CInputGroup className="mb-3">
-                    <CInputGroupText><CIcon name="cil-user" /></CInputGroupText>
+                    <CInputGroupText>
-                    <CFormControl id="username1" name="username1" placeholder="Username" autoComplete="name"/>
+                      <CIcon name="cil-user" />
+                    </CInputGroupText>
+                    <CFormControl
+                      id="username1"
+                      name="username1"
+                      placeholder="Username"
+                      autoComplete="name"
+                    />
                   </CInputGroup>
                 </div>
                 <div className="mb-3">
                   <CInputGroup className="mb-3">
-                    <CInputGroupText><CIcon name="cil-envelope-closed" /></CInputGroupText>
+                    <CInputGroupText>
-                    <CFormControl type="email" id="email1" name="email1" placeholder="Email" autoComplete="username"/>
+                      <CIcon name="cil-envelope-closed" />
+                    </CInputGroupText>
+                    <CFormControl
+                      type="email"
+                      id="email1"
+                      name="email1"
+                      placeholder="Email"
+                      autoComplete="username"
+                    />
                   </CInputGroup>
                 </div>
                 <div className="mb-3">
                   <CInputGroup className="mb-3">
-                    <CInputGroupText><CIcon name="cil-asterisk" /></CInputGroupText>
+                    <CInputGroupText>
-                    <CFormControl type="password" id="password1" name="password1" placeholder="Password" autoComplete="current-password"/>
+                      <CIcon name="cil-asterisk" />
+                    </CInputGroupText>
+                    <CFormControl
+                      type="password"
+                      id="password1"
+                      name="password1"
+                      placeholder="Password"
+                      autoComplete="current-password"
+                    />
                   </CInputGroup>
                 </div>
                 <div className="form-actions">
-                  <CButton type="submit" size="sm" color="success">Submit</CButton>
+                  <CButton type="submit" size="sm" color="success">
+                    Submit
+                  </CButton>
                 </div>
               </CForm>
             </CCardBody>
@@ -1019,7 +1332,7 @@ const BasicForms = () => {
                     className="card-header-action btn-minimize"
                     onClick={() => setCollapsed(!collapsed)}
                   >
-                    <CIcon name={ collapsed ? "cil-arrow-top" : "cil-arrow-bottom"} />
+                    <CIcon name={collapsed ? 'cil-arrow-top' : 'cil-arrow-bottom'} />
                   </CButton>
                   <CButton
                     color="link"
@@ -1083,7 +1396,9 @@ const BasicForms = () => {
                       </div>
                     </div>
                     <div className="form-actions">
-                      <CButton type="submit" color="primary">Save changes</CButton>
+                      <CButton type="submit" color="primary">
+                        Save changes
+                      </CButton>
                       <CButton color="secondary">Cancel</CButton>
                     </div>
                   </CForm>

src/views/base/index.js

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

src/views/base/jumbotrons/Jumbotrons.js

@@ -1,43 +1,49 @@
 import React from 'react'
-import {
+import { CButton, CCard, CCardBody, CCardHeader, CCol, CContainer, CRow } from '@coreui/react-ts'
-  CButton,
-  CCard,
-  CCardBody,
-  CCardHeader,
-  CCol,
-  CContainer,
-  CRow,
-} from '@coreui/react-ts'
 import { DocsLink } from 'src/reusable'
 
 const Jumbotrons = () => {
-
   return (
     <>
       <CCard className="mb-4">
         <CCardHeader>
           Jumbotron
-          <DocsLink name="CJumbotron"/>
+          <DocsLink name="CJumbotron" />
         </CCardHeader>
         <CCardBody>
           <CContainer className="py-5" fluid>
             <h1 className="display-5 fw-bold">Custom jumbotron</h1>
-            <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>
+            <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>
             <CButton size="lg">Example button</CButton>
           </CContainer>
           <CRow className="align-items-md-stretch">
             <CCol md="6">
               <div className="h-100 p-5 text-white bg-dark rounded-3">
                 <h2>Change the background</h2>
-                <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>
+                  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>
+                <CButton color="light" variant="outline">
+                  Example button
+                </CButton>
               </div>
             </CCol>
             <CCol md="6">
               <div className="h-100 p-5 bg-light border rounded-3">
                 <h2>Add borders</h2>
-                <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>
+                <p>
-                <CButton color="secondary" variant="outline">Example button</CButton>
+                  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>
+                <CButton color="secondary" variant="outline">
+                  Example button
+                </CButton>
               </div>
             </CCol>
           </CRow>

src/views/base/list-groups/ListGroups.js

@@ -9,11 +9,10 @@ import {
   CListGroupItem,
   CRow,
   CTabContent,
-  CTabPane
+  CTabPane,
 } from '@coreui/react-ts'
 import { DocsLink } from 'src/reusable'
 
-
 const ListGroups = () => {
   const [activeTab, setActiveTab] = useState(1)
 
@@ -21,11 +20,10 @@ const ListGroups = () => {
     <>
       <CRow>
         <CCol sm="12" xl="6">
-
           <CCard className="mb-4">
             <CCardHeader>
               List group
-              <DocsLink name="CListGroup"/>
+              <DocsLink name="CListGroup" />
             </CCardHeader>
             <CCardBody>
               <CListGroup>
@@ -37,7 +35,6 @@ const ListGroups = () => {
               </CListGroup>
             </CCardBody>
           </CCard>
-
         </CCol>
         <CCol sm="12" xl="6">
           <CCard className="mb-4">
@@ -47,11 +44,15 @@ const ListGroups = () => {
             </CCardHeader>
             <CCardBody>
               <CListGroup>
-                <CListGroupItem href="#" active>Cras justo odio</CListGroupItem>
+                <CListGroupItem href="#" active>
+                  Cras justo odio
+                </CListGroupItem>
                 <CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
                 <CListGroupItem href="#">Morbi leo risus</CListGroupItem>
                 <CListGroupItem href="#">Porta ac consectetur ac</CListGroupItem>
-                <CListGroupItem href="#" disabled>Vestibulum at eros</CListGroupItem>
+                <CListGroupItem href="#" disabled>
+                  Vestibulum at eros
+                </CListGroupItem>
               </CListGroup>
             </CCardBody>
           </CCard>
@@ -60,7 +61,6 @@ const ListGroups = () => {
 
       <CRow>
         <CCol sm="12" xl="6">
-
           <CCard className="mb-4">
             <CCardHeader>
               List group
@@ -70,7 +70,9 @@ const ListGroups = () => {
               <CListGroup>
                 <CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
                 <CListGroupItem color="primary">This is a primary list group item</CListGroupItem>
-                <CListGroupItem color="secondary">This is a secondary list group item</CListGroupItem>
+                <CListGroupItem color="secondary">
+                  This is a secondary list group item
+                </CListGroupItem>
                 <CListGroupItem color="success">This is a success list group item</CListGroupItem>
                 <CListGroupItem color="danger">This is a danger list group item</CListGroupItem>
                 <CListGroupItem color="warning">This is a warning list group item</CListGroupItem>
@@ -80,10 +82,8 @@ const ListGroups = () => {
               </CListGroup>
             </CCardBody>
           </CCard>
-
         </CCol>
         <CCol sm="12" xl="6">
-
           <CCard className="mb-4">
             <CCardHeader>
               List group
@@ -92,18 +92,33 @@ const ListGroups = () => {
             <CCardBody>
               <CListGroup>
                 <CListGroupItem component="button">Dapibus ac facilisis in</CListGroupItem>
-                <CListGroupItem component="button" color="primary">This is a primary list group item</CListGroupItem>
+                <CListGroupItem component="button" color="primary">
-                <CListGroupItem component="button" color="secondary">This is a secondary list group item</CListGroupItem>
+                  This is a primary list group item
-                <CListGroupItem component="button" color="success">This is a success list group item</CListGroupItem>
+                </CListGroupItem>
-                <CListGroupItem component="button" color="danger">This is a danger list group item</CListGroupItem>
+                <CListGroupItem component="button" color="secondary">
-                <CListGroupItem component="button" color="warning">This is a warning list group item</CListGroupItem>
+                  This is a secondary list group item
-                <CListGroupItem component="button" color="info">This is a info list group item</CListGroupItem>
+                </CListGroupItem>
-                <CListGroupItem component="button" color="light">This is a light list group item</CListGroupItem>
+                <CListGroupItem component="button" color="success">
-                <CListGroupItem component="button" color="dark">This is a dark list group item</CListGroupItem>
+                  This is a success list group item
+                </CListGroupItem>
+                <CListGroupItem component="button" color="danger">
+                  This is a danger list group item
+                </CListGroupItem>
+                <CListGroupItem component="button" color="warning">
+                  This is a warning list group item
+                </CListGroupItem>
+                <CListGroupItem component="button" color="info">
+                  This is a info list group item
+                </CListGroupItem>
+                <CListGroupItem component="button" color="light">
+                  This is a light list group item
+                </CListGroupItem>
+                <CListGroupItem component="button" color="dark">
+                  This is a dark list group item
+                </CListGroupItem>
               </CListGroup>
             </CCardBody>
           </CCard>
-
         </CCol>
       </CRow>
       <CRow>
@@ -116,7 +131,9 @@ const ListGroups = () => {
             <CCardBody>
               <CListGroup accent>
                 <CListGroupItem accent="primary">This is a primary list group item</CListGroupItem>
-                <CListGroupItem accent="secondary">This is a secondary list group item</CListGroupItem>
+                <CListGroupItem accent="secondary">
+                  This is a secondary list group item
+                </CListGroupItem>
                 <CListGroupItem accent="success">This is a success list group item</CListGroupItem>
                 <CListGroupItem accent="danger">This is a danger list group item</CListGroupItem>
                 <CListGroupItem accent="warning">This is a warning list group item</CListGroupItem>
@@ -135,14 +152,30 @@ const ListGroups = () => {
             </CCardHeader>
             <CCardBody>
               <CListGroup accent>
-                <CListGroupItem accent="primary" color="primary">This is a primary list group item</CListGroupItem>
+                <CListGroupItem accent="primary" color="primary">
-                <CListGroupItem accent="secondary" color="secondary">This is a secondary list group item</CListGroupItem>
+                  This is a primary list group item
-                <CListGroupItem accent="success" color="success">This is a success list group item</CListGroupItem>
+                </CListGroupItem>
-                <CListGroupItem accent="danger" color="danger">This is a danger list group item</CListGroupItem>
+                <CListGroupItem accent="secondary" color="secondary">
-                <CListGroupItem accent="warning" color="warning">This is a warning list group item</CListGroupItem>
+                  This is a secondary list group item
-                <CListGroupItem accent="info" color="info">This is a info list group item</CListGroupItem>
+                </CListGroupItem>
-                <CListGroupItem accent="light" color="light">This is a light list group item</CListGroupItem>
+                <CListGroupItem accent="success" color="success">
-                <CListGroupItem accent="dark" color="dark">This is a dark list group item</CListGroupItem>
+                  This is a success list group item
+                </CListGroupItem>
+                <CListGroupItem accent="danger" color="danger">
+                  This is a danger list group item
+                </CListGroupItem>
+                <CListGroupItem accent="warning" color="warning">
+                  This is a warning list group item
+                </CListGroupItem>
+                <CListGroupItem accent="info" color="info">
+                  This is a info list group item
+                </CListGroupItem>
+                <CListGroupItem accent="light" color="light">
+                  This is a light list group item
+                </CListGroupItem>
+                <CListGroupItem accent="dark" color="dark">
+                  This is a dark list group item
+                </CListGroupItem>
               </CListGroup>
             </CCardBody>
           </CCard>
@@ -159,30 +192,33 @@ const ListGroups = () => {
               <CListGroup>
                 <CListGroupItem className="justify-content-between">
                   Cras justo odio
-                  <CBadge className="float-end" shape="rounded-pill" color="primary">14</CBadge>
+                  <CBadge className="float-end" shape="rounded-pill" color="primary">
+                    14
+                  </CBadge>
                 </CListGroupItem>
                 <CListGroupItem className="justify-content-between">
                   Dapibus ac facilisis in
-                  <CBadge className="float-end" shape="rounded-pill" color="primary">2</CBadge>
+                  <CBadge className="float-end" shape="rounded-pill" color="primary">
+                    2
+                  </CBadge>
                 </CListGroupItem>
                 <CListGroupItem className="justify-content-between">
                   Morbi leo risus
-                  <CBadge className="float-end" shape="rounded-pill" color="primary">1</CBadge>
+                  <CBadge className="float-end" shape="rounded-pill" color="primary">
+                    1
+                  </CBadge>
                 </CListGroupItem>
               </CListGroup>
             </CCardBody>
           </CCard>
-
         </CCol>
         <CCol sm="12" xl="6">
-
           <CCard className="mb-4">
             <CCardHeader>
               List group
               <small> custom content</small>
             </CCardHeader>
             <CCardBody>
-
               <CListGroup>
                 <CListGroupItem component="a" active>
                   <h5 className="d-flex w-100 justify-content-between">
@@ -190,26 +226,28 @@ const ListGroups = () => {
                     <small>3 days ago</small>
                   </h5>
                   <div className="mb-1">
-                    Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
+                    Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus
+                    varius blandit.
                     <small>Donec id elit non mi porta.</small>
                   </div>
                 </CListGroupItem>
                 <CListGroupItem component="a">
                   <h5>List group item heading</h5>
                   <div>
-                    Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
+                    Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus
+                    varius blandit.
                   </div>
                   <small>Small.</small>
                 </CListGroupItem>
                 <CListGroupItem component="a">
                   <h5>List group item heading</h5>
                   <div>
-                    Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
+                    Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus
+                    varius blandit.
                   </div>
                   <small>Small.</small>
                 </CListGroupItem>
               </CListGroup>
-
             </CCardBody>
           </CCard>
         </CCol>
@@ -225,39 +263,81 @@ const ListGroups = () => {
               <CRow>
                 <CCol xs="4">
                   <CListGroup id="list-tab" role="tablist">
-                    <CListGroupItem onClick={() => setActiveTab(0)} component="button" active={activeTab === 0} >Home</CListGroupItem>
+                    <CListGroupItem
-                    <CListGroupItem onClick={() => setActiveTab(1)} component="button" active={activeTab === 1} >Profile</CListGroupItem>
+                      onClick={() => setActiveTab(0)}
-                    <CListGroupItem onClick={() => setActiveTab(2)} component="button" active={activeTab === 2} >Messages</CListGroupItem>
+                      component="button"
-                    <CListGroupItem onClick={() => setActiveTab(3)} component="button" active={activeTab === 3} >Settings</CListGroupItem>
+                      active={activeTab === 0}
+                    >
+                      Home
+                    </CListGroupItem>
+                    <CListGroupItem
+                      onClick={() => setActiveTab(1)}
+                      component="button"
+                      active={activeTab === 1}
+                    >
+                      Profile
+                    </CListGroupItem>
+                    <CListGroupItem
+                      onClick={() => setActiveTab(2)}
+                      component="button"
+                      active={activeTab === 2}
+                    >
+                      Messages
+                    </CListGroupItem>
+                    <CListGroupItem
+                      onClick={() => setActiveTab(3)}
+                      component="button"
+                      active={activeTab === 3}
+                    >
+                      Settings
+                    </CListGroupItem>
                   </CListGroup>
                 </CCol>
                 <CCol xs="8">
                   <CTabContent>
-                    <CTabPane visible={activeTab === 0} >
+                    <CTabPane visible={activeTab === 0}>
-                      <p>Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt
+                      <p>
-                        nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim
+                        Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing
-                        tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip
+                        exercitation fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat
-                        eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim.</p>
+                        proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim
+                        tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat
+                        aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor.
+                        Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam
+                        minim.
+                      </p>
                     </CTabPane>
                     <CTabPane visible={activeTab === 1}>
-                      <p>Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia
+                      <p>
-                        dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt
+                        Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur
-                        anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum
+                        consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia dolore
-                        reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.</p>
+                        sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt
+                        laboris deserunt anim aute dolor incididunt veniam aute dolore do
+                        exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris
+                        ipsum reprehenderit irure non commodo enim culpa commodo veniam incididunt
+                        veniam ad.
+                      </p>
                     </CTabPane>
                     <CTabPane visible={activeTab === 2}>
-                      <p>Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris
+                      <p>
-                        nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur
+                        Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo
-                        est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et
+                        reprehenderit aute ipsum voluptate. Irure Lorem et laboris nostrud amet
-                        deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla
+                        cupidatat cupidatat anim do ut velit mollit consequat enim tempor.
-                        laborum elit adipisicing pariatur cillum.</p>
+                        Consectetur est minim nostrud nostrud consectetur irure labore voluptate
+                        irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et
+                        deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod
+                        aliquip nulla laborum elit adipisicing pariatur cillum.
+                      </p>
                     </CTabPane>
                     <CTabPane visible={activeTab === 3}>
-                      <p>Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna
+                      <p>
-                        sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore
+                        Irure enim occaecat labore sit qui aliquip reprehenderit amet velit.
-                        aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco
+                        Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat
-                        nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor
+                        laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua
-                        eiusmod eu pariatur culpa mollit in irure.</p>
+                        labore aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation
+                        irure commodo non amet consectetur quis amet culpa. Quis ullamco nisi amet
+                        qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt
+                        dolor eiusmod eu pariatur culpa mollit in irure.
+                      </p>
                     </CTabPane>
                   </CTabContent>
                 </CCol>

src/views/base/navbars/Navbars.js

@@ -31,14 +31,12 @@ const CNavbars = () => {
       <CCard className="mb-4">
         <CCardHeader>
           CNavbar
-          <DocsLink name="CNavbar"/>
+          <DocsLink name="CNavbar" />
         </CCardHeader>
         <CCardBody>
-          <CNavbar expandable="sm" color="info" >
+          <CNavbar expandable="sm" color="info">
             <CNavbarToggler onClick={() => setVisible(!visible)} />
-            <CNavbarBrand>
+            <CNavbarBrand>NavbarBrand</CNavbarBrand>
-              NavbarBrand
-            </CNavbarBrand>
             <CCollapse show={visible} navbar>
               <CNavbarNav>
                 <CNavLink>Home</CNavLink>
@@ -46,19 +44,13 @@ const CNavbars = () => {
               </CNavbarNav>
               <CNavbarNav className="ms-auto">
                 <CForm className="d-flex">
-                  <CFormControl
+                  <CFormControl className="me-sm-2" placeholder="Search" size="sm" />
-                    className="me-sm-2"
+                  <CButton color="light" className="my-2 my-sm-0" type="submit">
-                    placeholder="Search"
+                    Search
-                    size="sm"
+                  </CButton>
-                  />
-                  <CButton color="light" className="my-2 my-sm-0" type="submit">Search</CButton>
                 </CForm>
-                <CDropdown
+                <CDropdown inNav>
-                  inNav
+                  <CDropdownToggle color="primary">Lang</CDropdownToggle>
-                >
-                  <CDropdownToggle color="primary">
-                    Lang
-                  </CDropdownToggle>
                   <CDropdownMenu>
                     <CDropdownItem>EN</CDropdownItem>
                     <CDropdownItem>ES</CDropdownItem>
@@ -66,12 +58,8 @@ const CNavbars = () => {
                     <CDropdownItem>FA</CDropdownItem>
                   </CDropdownMenu>
                 </CDropdown>
-                <CDropdown
+                <CDropdown inNav>
-                  inNav
+                  <CDropdownToggle color="primary">User</CDropdownToggle>
-                >
-                  <CDropdownToggle color="primary">
-                    User
-                  </CDropdownToggle>
                   <CDropdownMenu>
                     <CDropdownItem>Account</CDropdownItem>
                     <CDropdownItem>Settings</CDropdownItem>
@@ -84,9 +72,7 @@ const CNavbars = () => {
       </CCard>
 
       <CCard className="mb-4">
-        <CCardHeader>
+        <CCardHeader>CNavbar brand</CCardHeader>
-          CNavbar brand
-        </CCardHeader>
         <CCardBody>
           <CNavbar color="faded" light>
             <CNavbarBrand>
@@ -102,14 +88,14 @@ const CNavbars = () => {
       </CCard>
 
       <CCard className="mb-4">
-        <CCardHeader>
+        <CCardHeader>CNavbar text</CCardHeader>
-          CNavbar text
-        </CCardHeader>
         <CCardBody>
           <CNavbar toggleable="sm" light color="light">
             <CNavbarToggler
               inNavbar
-              onClick={()=>{ setNavbarText(!navbarText)}}
+              onClick={() => {
+                setNavbarText(!navbarText)
+              }}
             />
             <CNavbarBrand>NavbarBrand</CNavbarBrand>
             <CCollapse show={navbarText}>
@@ -122,22 +108,21 @@ const CNavbars = () => {
       </CCard>
 
       <CCard className="mb-4">
-        <CCardHeader>
+        <CCardHeader>CNavbar dropdown</CCardHeader>
-          CNavbar dropdown
-        </CCardHeader>
         <CCardBody>
-          <CNavbar expandable="false" color="primary" >
+          <CNavbar expandable="false" color="primary">
-            <CNavbarToggler inNavbar onClick={()=>{setIsOpenDropdown(!isOpenDropdown)}} />
+            <CNavbarToggler
+              inNavbar
+              onClick={() => {
+                setIsOpenDropdown(!isOpenDropdown)
+              }}
+            />
             <CCollapse show={isOpenDropdown} navbar>
               <CNavbarNav>
                 <CNavLink>Home</CNavLink>
                 <CNavLink>Link</CNavLink>
-                <CDropdown
+                <CDropdown inNav>
-                  inNav
+                  <CDropdownToggle color="primary">Lang</CDropdownToggle>
-                >
-                  <CDropdownToggle color="primary">
-                    Lang
-                  </CDropdownToggle>
                   <CDropdownMenu>
                     <CDropdownItem>EN</CDropdownItem>
                     <CDropdownItem>ES</CDropdownItem>
@@ -145,12 +130,8 @@ const CNavbars = () => {
                     <CDropdownItem>FA</CDropdownItem>
                   </CDropdownMenu>
                 </CDropdown>
-                <CDropdown
+                <CDropdown inNav>
-                  inNav
+                  <CDropdownToggle color="primary">User</CDropdownToggle>
-                >
-                  <CDropdownToggle color="primary">
-                    User
-                  </CDropdownToggle>
                   <CDropdownMenu>
                     <CDropdownItem>Account</CDropdownItem>
                     <CDropdownItem>Settings</CDropdownItem>
@@ -163,34 +144,25 @@ const CNavbars = () => {
       </CCard>
 
       <CCard className="mb-4">
-        <CCardHeader>
+        <CCardHeader>CNavbar form</CCardHeader>
-          CNavbar form
-        </CCardHeader>
         <CCardBody>
           <CNavbar light color="light">
             <CForm className="d-flex">
-              <CFormControl
+              <CFormControl className="me-sm-2" placeholder="Search" size="sm" />
-                className="me-sm-2"
+              <CButton color="outline-success" className="my-2 my-sm-0" type="submit">
-                placeholder="Search"
+                Search
-                size="sm"
+              </CButton>
-              />
-              <CButton color="outline-success" className="my-2 my-sm-0" type="submit">Search</CButton>
             </CForm>
           </CNavbar>
         </CCardBody>
       </CCard>
 
       <CCard className="mb-4">
-        <CCardHeader>
+        <CCardHeader>CNavbar input group</CCardHeader>
-          CNavbar input group
-        </CCardHeader>
         <CCardBody>
           <CNavbar light color="light">
             <CForm className="d-flex">
-              <CFormControl
+              <CFormControl className="me-sm-2" placeholder="Username" />
-                className="me-sm-2"
-                placeholder="Username"
-              />
             </CForm>
           </CNavbar>
         </CCardBody>

src/views/base/navs/Navs.js

@@ -11,7 +11,7 @@ import {
   CDropdownToggle,
   CNav,
   CNavItem,
-  CNavLink
+  CNavLink,
 } from '@coreui/react-ts'
 import { DocsLink } from 'src/reusable'
 
@@ -23,7 +23,7 @@ const Navs = () => {
           <CCard className="mb-4">
             <CCardHeader>
               Navs
-              <DocsLink name="CNav"/>
+              <DocsLink name="CNav" />
             </CCardHeader>
             <CCardBody>
               <small>List Based</small>
@@ -175,10 +175,14 @@ const Navs = () => {
               <hr />
 
               <CNav fill variant="pills">
-                <CNavLink active className="nav-item">Active</CNavLink>
+                <CNavLink active className="nav-item">
+                  Active
+                </CNavLink>
                 <CNavLink className="nav-item">Link</CNavLink>
                 <CNavLink className="nav-item">Link</CNavLink>
-                <CNavLink className="nav-item" disabled>Disabled</CNavLink>
+                <CNavLink className="nav-item" disabled>
+                  Disabled
+                </CNavLink>
               </CNav>
 
               <hr />
@@ -201,12 +205,15 @@ const Navs = () => {
               <hr />
 
               <CNav justified variant="pills">
-                <CNavLink className="nav-item" active>Active</CNavLink>
+                <CNavLink className="nav-item" active>
+                  Active
+                </CNavLink>
                 <CNavLink className="nav-item">Link</CNavLink>
                 <CNavLink className="nav-item">Link</CNavLink>
-                <CNavLink className="nav-item" disabled>Disabled</CNavLink>
+                <CNavLink className="nav-item" disabled>
+                  Disabled
+                </CNavLink>
               </CNav>
-
             </CCardBody>
           </CCard>
         </CCol>
@@ -221,10 +228,14 @@ const Navs = () => {
             </CCardHeader>
             <CCardBody>
               <CNav variant="pills" className="flex-sm-row">
-                  <CNavLink className="flex-sm-fill text-sm-center" active>Active</CNavLink>
+                <CNavLink className="flex-sm-fill text-sm-center" active>
+                  Active
+                </CNavLink>
                 <CNavLink className="flex-sm-fill text-sm-center">Link</CNavLink>
                 <CNavLink className="flex-sm-fill text-sm-center">Link</CNavLink>
-                  <CNavLink className="flex-sm-fill text-sm-center" disabled>Disabled</CNavLink>
+                <CNavLink className="flex-sm-fill text-sm-center" disabled>
+                  Disabled
+                </CNavLink>
               </CNav>
             </CCardBody>
           </CCard>
@@ -232,7 +243,6 @@ const Navs = () => {
       </CRow>
 
       <CRow>
-
         <CCol xs="6">
           <CCard className="mb-4">
             <CCardHeader>
@@ -245,9 +255,7 @@ const Navs = () => {
                   <CNavLink active>Link</CNavLink>
                 </CNavItem>
                 <CDropdown variant="nav-item">
-                  <CDropdownToggle>
+                  <CDropdownToggle>Dropdown</CDropdownToggle>
-                    Dropdown
-                  </CDropdownToggle>
                   <CDropdownMenu>
                     <CDropdownItem>Action</CDropdownItem>
                     <CDropdownItem>Another action</CDropdownItem>
@@ -279,9 +287,7 @@ const Navs = () => {
                   <CNavLink active>Link</CNavLink>
                 </CNavItem>
                 <CDropdown variant="nav-item">
-                  <CDropdownToggle>
+                  <CDropdownToggle>Dropdown</CDropdownToggle>
-                    Dropdown
-                  </CDropdownToggle>
                   <CDropdownMenu>
                     <CDropdownItem>Action</CDropdownItem>
                     <CDropdownItem>Another action</CDropdownItem>

src/views/base/paginations/Pagnations.js

@@ -1,14 +1,7 @@
 import React, { useState } from 'react'
-import {
+import { CCard, CCardBody, CCardHeader, CPagination, CPaginationItem } from '@coreui/react-ts'
-  CCard,
-  CCardBody,
-  CCardHeader,
-  CPagination,
-  CPaginationItem
-} from '@coreui/react-ts'
 import { DocsLink } from 'src/reusable'
 
-
 const Paginations = () => {
   const [currentPage, setCurrentPage] = useState(2)
 
@@ -17,7 +10,7 @@ const Paginations = () => {
       <CCard className="mb-4">
         <CCardHeader>
           Pagination
-          <DocsLink name="CPagination"/>
+          <DocsLink name="CPagination" />
         </CCardHeader>
         <CCardBody>
           <h6>Default</h6>
@@ -60,11 +53,7 @@ const Paginations = () => {
         </CCardHeader>
         <CCardBody>
           <h6>Left alignment (default)</h6>
-          <CPagination
+          <CPagination activePage={currentPage} pages={10} onActivePageChange={setCurrentPage} />
-            activePage={currentPage}
-            pages={10}
-            onActivePageChange={setCurrentPage}
-          />
           <br></br>
 
           <h6>Center alignment</h6>

src/views/base/popovers/Popovers.js

@@ -13,10 +13,18 @@ import { DocsLink } from 'src/reusable'
 
 const Popovers = () => {
   const placements = [
-    'top-start', 'top', 'top-end',
+    'top-start',
-    'bottom-start', 'bottom', 'bottom-end',
+    'top',
-    'right-start', 'right', 'right-end',
+    'top-end',
-    'left-start', 'left', 'left-end'
+    'bottom-start',
+    'bottom',
+    'bottom-end',
+    'right-start',
+    'right',
+    'right-end',
+    'left-start',
+    'left',
+    'left-end',
   ]
 
   return (
@@ -24,31 +32,27 @@ const Popovers = () => {
       <CCard className="mb-4">
         <CCardHeader>
           Popovers
-          <DocsLink name="CPopover"/>
+          <DocsLink name="CPopover" />
         </CCardHeader>
         <CCardBody>
           {/*eslint-disable-next-line*/}
 
-          <p className="text-muted">
+          <p className="text-muted">Hover over the links below to see popover:</p>
-            Hover over the links below to see popover:
-          </p>
 
           <p className="muted">
             Tight pants next level keffiyeh
             <CPopover title="Popover header" content="Popover text">
               <CLink> you probably </CLink>
             </CPopover>
-              haven't heard of them.
+            haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag
-            Photo booth beard raw denim letterpress vegan messenger
+            stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american
-            bag stumptown. Farm-to-table seitan, mcsweeney's fixie
+            apparel
-            sustainable quinoa 8-bit american apparel
             <CPopover title="Popover header" content="Popover text">
               <CLink> have a </CLink>
             </CPopover>
-            terry richardson vinyl chambray. Beard stumptown,
+            terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats.
-            cardigans banh mi lomo thundercats. Tofu biodiesel
+            Tofu biodiesel williamsburg marfa, four loko mcsweeney''s cleanse vegan chambray. A
-            williamsburg marfa, four loko mcsweeney''s cleanse
+            really ironic artisan
-            vegan chambray. A really ironic artisan
             <CPopover title="Popover header" content="Popover text">
               <CLink> whatever keytar </CLink>
             </CPopover>
@@ -56,13 +60,12 @@ const Popovers = () => {
             <CPopover title="Popover header" content="Popover text">
               <CLink> twitter handle </CLink>
             </CPopover>
-
             freegan cred raw denim single-origin coffee viral.
           </p>
         </CCardBody>
       </CCard>
 
-      <hr/>
+      <hr />
 
       <CCard className="mb-4">
         <CCardHeader>
@@ -72,22 +75,19 @@ const Popovers = () => {
         <CCardBody>
           <div className="my-3">
             <CRow>
-              {placements.map(placement => {
+              {placements.map((placement) => {
-                return (<CCol
+                return (
-                  md="4"
+                  <CCol md="4" className="py-4 text-center" key={placement}>
-                  className="py-4 text-center"
+                    <CPopover
-                  key={placement}
+                      title="Popover header"
-                >
-                  <CPopover title="Popover header"
                       content={`Popover with placement: ${placement}`}
                       placement={placement}
                       trigger="click"
                     >
-                    <CButton color="primary">
+                      <CButton color="primary">{placement}</CButton>
-                      { placement }
-                    </CButton>
                     </CPopover>
-                </CCol>)
+                  </CCol>
+                )
               })}
             </CRow>
           </div>

src/views/base/progress-bar/ProgressBar.js

@@ -1,11 +1,5 @@
 import React from 'react'
-import {
+import { CCard, CCardBody, CCardHeader, CProgress, CProgressBar } from '@coreui/react-ts'
-  CCard,
-  CCardBody,
-  CCardHeader,
-  CProgress,
-  CProgressBar
-} from '@coreui/react-ts'
 import { DocsLink } from 'src/reusable'
 
 const ProgressBar = () => {
@@ -14,7 +8,7 @@ const ProgressBar = () => {
       <CCard className="mb-4">
         <CCardHeader>
           Progress
-          <DocsLink name="CProgressBar"/>
+          <DocsLink name="CProgressBar" />
         </CCardHeader>
         <CCardBody>
           <CProgress className="mb-3" />
@@ -30,9 +24,9 @@ const ProgressBar = () => {
           <small> labels</small>
         </CCardHeader>
         <CCardBody>
-          <CProgress value={25.3746472} className="mb-3"/>
+          <CProgress value={25.3746472} className="mb-3" />
-          <CProgress value={50.45} className="mb-3"/>
+          <CProgress value={50.45} className="mb-3" />
-          <CProgress value={15} max={20} className="mb-3"/>
+          <CProgress value={15} max={20} className="mb-3" />
         </CCardBody>
       </CCard>
       <CCard className="mb-4">
@@ -41,8 +35,8 @@ const ProgressBar = () => {
           <small> heights</small>
         </CCardHeader>
         <CCardBody>
-          <CProgress value={25} className="mb-3" height="3"/>
+          <CProgress value={25} className="mb-3" height="3" />
-          <CProgress value={25} className="mb-3" height="30"/>
+          <CProgress value={25} className="mb-3" height="30" />
         </CCardBody>
       </CCard>
       <CCard className="mb-4">
@@ -64,9 +58,9 @@ const ProgressBar = () => {
         </CCardHeader>
         <CCardBody>
           <CProgress size="xs">
-            <CProgressBar value={10}/>
+            <CProgressBar value={10} />
-            <CProgressBar color="success" value={30}/>
+            <CProgressBar color="success" value={30} />
-            <CProgressBar color="danger" value={20}/>
+            <CProgressBar color="danger" value={20} />
           </CProgress>
         </CCardBody>
       </CCard>

src/views/base/tables/Tables.js

@@ -23,7 +23,7 @@ const Tables = () => {
           <CCard className="mb-4">
             <CCardHeader>
               Simple Table
-              <DocsLink name="CModal"/>
+              <DocsLink name="CModal" />
             </CCardHeader>
             <CCardBody>
               <CTable responsive="sm">
@@ -40,31 +40,41 @@ const Tables = () => {
                     <CTableDataCell>Samppa Nori</CTableDataCell>
                     <CTableDataCell>2012/01/01</CTableDataCell>
                     <CTableDataCell>Member</CTableDataCell>
-                    <CTableDataCell><CBadge color="success">Active</CBadge></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>
+                    <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>
+                    <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>
+                    <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>
+                    <CTableDataCell>
+                      <CBadge color="success">Active</CBadge>
+                    </CTableDataCell>
                   </CTableRow>
                 </CTableBody>
               </CTable>
@@ -74,9 +84,7 @@ const Tables = () => {
 
         <CCol xs="12" lg="6">
           <CCard className="mb-4">
-            <CCardHeader>
+            <CCardHeader>Striped Table</CCardHeader>
-              Striped Table
-            </CCardHeader>
             <CCardBody>
               <CTable responsive="sm" striped>
                 <CTableHead>
@@ -92,31 +100,41 @@ const Tables = () => {
                     <CTableDataCell>Yiorgos Avraamu</CTableDataCell>
                     <CTableDataCell>2012/01/01</CTableDataCell>
                     <CTableDataCell>Member</CTableDataCell>
-                    <CTableDataCell><CBadge color="success">Active</CBadge></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>
+                    <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>
+                    <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>
+                    <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>
+                    <CTableDataCell>
+                      <CBadge color="success">Active</CBadge>
+                    </CTableDataCell>
                   </CTableRow>
                 </CTableBody>
               </CTable>
@@ -126,12 +144,9 @@ const Tables = () => {
       </CRow>
 
       <CRow>
-
         <CCol xs="12" lg="6">
           <CCard className="mb-4">
-            <CCardHeader>
+            <CCardHeader>Condensed Table</CCardHeader>
-              Condensed Table
-            </CCardHeader>
             <CCardBody>
               <CTable responsive="sm" small>
                 <CTableHead>
@@ -147,31 +162,41 @@ const Tables = () => {
                     <CTableDataCell>Carwyn Fachtna</CTableDataCell>
                     <CTableDataCell>2012/01/01</CTableDataCell>
                     <CTableDataCell>Member</CTableDataCell>
-                    <CTableDataCell><CBadge color="success">Active</CBadge></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>
+                    <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>
+                    <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>
+                    <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>
+                    <CTableDataCell>
+                      <CBadge color="success">Active</CBadge>
+                    </CTableDataCell>
                   </CTableRow>
                 </CTableBody>
               </CTable>
@@ -181,9 +206,7 @@ const Tables = () => {
 
         <CCol xs="12" lg="6">
           <CCard className="mb-4">
-            <CCardHeader>
+            <CCardHeader>Bordered Table</CCardHeader>
-              Bordered Table
-            </CCardHeader>
             <CCardBody>
               <CTable responsive="sm" bordered>
                 <CTableHead>
@@ -199,46 +222,53 @@ const Tables = () => {
                     <CTableDataCell>Pompeius René</CTableDataCell>
                     <CTableDataCell>2012/01/01</CTableDataCell>
                     <CTableDataCell>Member</CTableDataCell>
-                    <CTableDataCell><CBadge color="success">Active</CBadge></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>
+                    <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>
+                    <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>
+                    <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>
+                    <CTableDataCell>
+                      <CBadge color="success">Active</CBadge>
+                    </CTableDataCell>
                   </CTableRow>
                 </CTableBody>
               </CTable>
             </CCardBody>
           </CCard>
         </CCol>
-
       </CRow>
 
       <CRow>
         <CCol xs>
           <CCard className="mb-4">
-            <CCardHeader>
+            <CCardHeader>Combined All Table</CCardHeader>
-              Combined All Table
-            </CCardHeader>
             <CCardBody>
               <CTable responsive="sm" bordered striped small>
                 <CTableHead>
@@ -254,31 +284,41 @@ const Tables = () => {
                     <CTableDataCell>Vishnu Serghei</CTableDataCell>
                     <CTableDataCell>2012/01/01</CTableDataCell>
                     <CTableDataCell>Member</CTableDataCell>
-                    <CTableDataCell><CBadge color="success">Active</CBadge></CTableDataCell>
+                    <CTableDataCell>
+                      <CBadge color="success">Active</CBadge>
+                    </CTableDataCell>
                   </CTableRow>
                   <CTableRow>
                     <CTableDataCell>Zbyněk Phoibos</CTableDataCell>
                     <CTableDataCell>2012/02/01</CTableDataCell>
                     <CTableDataCell>Staff</CTableDataCell>
-                    <CTableDataCell><CBadge color="danger">Banned</CBadge></CTableDataCell>
+                    <CTableDataCell>
+                      <CBadge color="danger">Banned</CBadge>
+                    </CTableDataCell>
                   </CTableRow>
                   <CTableRow>
                     <CTableDataCell>Einar Randall</CTableDataCell>
                     <CTableDataCell>2012/02/01</CTableDataCell>
                     <CTableDataCell>Admin</CTableDataCell>
-                    <CTableDataCell><CBadge color="secondary">Inactive</CBadge></CTableDataCell>
+                    <CTableDataCell>
+                      <CBadge color="secondary">Inactive</CBadge>
+                    </CTableDataCell>
                   </CTableRow>
                   <CTableRow>
                     <CTableDataCell>Félix Troels</CTableDataCell>
                     <CTableDataCell>2012/03/01</CTableDataCell>
                     <CTableDataCell>Member</CTableDataCell>
-                    <CTableDataCell><CBadge color="warning">Pending</CBadge></CTableDataCell>
+                    <CTableDataCell>
+                      <CBadge color="warning">Pending</CBadge>
+                    </CTableDataCell>
                   </CTableRow>
                   <CTableRow>
                     <CTableDataCell>Aulus Agmundr</CTableDataCell>
                     <CTableDataCell>2012/01/21</CTableDataCell>
                     <CTableDataCell>Staff</CTableDataCell>
-                    <CTableDataCell><CBadge color="success">Active</CBadge></CTableDataCell>
+                    <CTableDataCell>
+                      <CBadge color="success">Active</CBadge>
+                    </CTableDataCell>
                   </CTableRow>
                 </CTableBody>
               </CTable>

src/views/base/tabs/Tabs.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState } from 'react'
 import {
   CCol,
   CNav,
@@ -10,15 +10,13 @@ import {
   CCard,
   CCardBody,
   CCardHeader,
-} from "@coreui/react-ts";
+} from '@coreui/react-ts'
-import CIcon from "@coreui/icons-react";
+import { DocsLink } from 'src/reusable'
-import { DocsLink } from "src/reusable";
 
 const Tabs = () => {
   const [activeKey, setActiveKey] = useState(1)
-  const [active, setActive] = useState(1);
   const lorem =
-    "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.";
+    'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.'
 
   return (
     <CRow>
@@ -31,13 +29,19 @@ const Tabs = () => {
           <CCardBody>
             <CNav variant="tabs">
               <CNavItem>
-                <CNavLink active={activeKey === 1} onClick={() => setActiveKey(1)}>Home</CNavLink>
+                <CNavLink active={activeKey === 1} onClick={() => setActiveKey(1)}>
+                  Home
+                </CNavLink>
               </CNavItem>
               <CNavItem>
-                <CNavLink active={activeKey === 2} onClick={() => setActiveKey(2)}>Profile</CNavLink>
+                <CNavLink active={activeKey === 2} onClick={() => setActiveKey(2)}>
+                  Profile
+                </CNavLink>
               </CNavItem>
               <CNavItem>
-                <CNavLink active={activeKey === 3} onClick={() => setActiveKey(3)}>Messages</CNavLink>
+                <CNavLink active={activeKey === 3} onClick={() => setActiveKey(3)}>
+                  Messages
+                </CNavLink>
               </CNavItem>
             </CNav>
             <CTabContent>
@@ -144,7 +148,7 @@ const Tabs = () => {
         </CCard>
       </CCol> */}
     </CRow>
-  );
+  )
-};
+}
 
-export default Tabs;
+export default Tabs

src/views/base/tooltips/Tooltips.js

@@ -13,10 +13,18 @@ import { DocsLink } from 'src/reusable'
 
 const Tooltips = () => {
   const placements = [
-    'top-start', 'top', 'top-end',
+    'top-start',
-    'bottom-start', 'bottom', 'bottom-end',
+    'top',
-    'right-start', 'right', 'right-end',
+    'top-end',
-    'left-start', 'left', 'left-end'
+    'bottom-start',
+    'bottom',
+    'bottom-end',
+    'right-start',
+    'right',
+    'right-end',
+    'left-start',
+    'left',
+    'left-end',
   ]
 
   return (
@@ -24,31 +32,24 @@ const Tooltips = () => {
       <CCard className="mb-4">
         <CCardHeader>
           Tooltips
-          <DocsLink name="CTooltip"/>
+          <DocsLink name="CTooltip" />
         </CCardHeader>
         <CCardBody>
-          {/*eslint-disable-next-line*/}
+          <p className="text-muted">Hover over the links below to see tooltips:</p>
-
-          <p className="text-muted">
-            Hover over the links below to see tooltips:
-          </p>
-
           <p className="muted">
             Tight pants next level keffiyeh
             <CTooltip content="Tooltip text">
               <CLink> you probably </CLink>
             </CTooltip>
-              haven't heard of them.
+            haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag
-            Photo booth beard raw denim letterpress vegan messenger
+            stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american
-            bag stumptown. Farm-to-table seitan, mcsweeney's fixie
+            apparel
-            sustainable quinoa 8-bit american apparel
             <CTooltip content="Tooltip text">
               <CLink> have a </CLink>
             </CTooltip>
-            terry richardson vinyl chambray. Beard stumptown,
+            terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats.
-            cardigans banh mi lomo thundercats. Tofu biodiesel
+            Tofu biodiesel williamsburg marfa, four loko mcsweeney''s cleanse vegan chambray. A
-            williamsburg marfa, four loko mcsweeney''s cleanse
+            really ironic artisan
-            vegan chambray. A really ironic artisan
             <CTooltip content="Tooltip text">
               <CLink> whatever keytar </CLink>
             </CTooltip>
@@ -56,13 +57,12 @@ const Tooltips = () => {
             <CTooltip content="Tooltip text">
               <CLink> twitter handle </CLink>
             </CTooltip>
-
             freegan cred raw denim single-origin coffee viral.
           </p>
         </CCardBody>
       </CCard>
 
-      <hr/>
+      <hr />
 
       <CCard className="mb-4">
         <CCardHeader>
@@ -72,21 +72,17 @@ const Tooltips = () => {
         <CCardBody>
           <div className="my-3">
             <CRow>
-              {placements.map(placement => {
+              {placements.map((placement) => {
-                return (<CCol
+                return (
-                  md="4"
+                  <CCol md="4" className="py-4 text-center" key={placement}>
-                  className="py-4 text-center"
-                  key={placement}
-                >
                     <CTooltip
                       content={`Tooltip with placement: ${placement}`}
                       placement={placement}
                     >
-                    <CButton color="primary">
+                      <CButton color="primary">{placement}</CButton>
-                      { placement }
-                    </CButton>
                     </CTooltip>
-                </CCol>)
+                  </CCol>
+                )
               })}
             </CRow>
           </div>
@@ -96,4 +92,4 @@ const Tooltips = () => {
   )
 }
 
-export default Tooltips;
+export default Tooltips

src/views/buttons/brand-buttons/BrandButtons.js

@@ -1,12 +1,5 @@
 import React from 'react'
-import {
+import { CButton, CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react-ts'
-  CButton,
-  CCard,
-  CCardBody,
-  CCardHeader,
-  CCol,
-  CRow
-} from '@coreui/react-ts'
 import CIcon from '@coreui/icons-react'
 
 const BrandButtons = () => {
@@ -14,73 +7,232 @@ const BrandButtons = () => {
     <CRow>
       <CCol xs="12">
         <CCard className="mb-4">
-          <CCardHeader>
+          <CCardHeader>Brand button</CCardHeader>
-            Brand button
-          </CCardHeader>
           <CCardBody>
-            <h6>Size Small
+            <h6>
-              <small> <code>size="sm"</code></small>
+              Size Small
+              <small>
+                {' '}
+                <code>size="sm"</code>
+              </small>
             </h6>
             <p>
-              <CButton size="sm" className="btn-facebook btn-brand me-1 mb-1"><CIcon size="sm" name="cib-facebook" /><span className="ms-2">Facebook</span></CButton>
+              <CButton size="sm" className="btn-facebook btn-brand me-1 mb-1">
-              <CButton size="sm" className="btn-twitter btn-brand me-1 mb-1"><CIcon size="sm" name="cib-twitter" /><span className="ms-2">Twitter</span></CButton>
+                <CIcon size="sm" name="cib-facebook" />
-              <CButton size="sm" className="btn-linkedin btn-brand me-1 mb-1"><CIcon size="sm" name="cib-linkedin" /><span className="ms-2">LinkedIn</span></CButton>
+                <span className="ms-2">Facebook</span>
-              <CButton size="sm" className="btn-flickr btn-brand me-1 mb-1"><CIcon size="sm" name="cib-flickr" /><span className="ms-2">Flickr</span></CButton>
+              </CButton>
-              <CButton size="sm" className="btn-tumblr btn-brand me-1 mb-1"><CIcon size="sm" name="cib-tumblr" /><span className="ms-2">Tumblr</span></CButton>
+              <CButton size="sm" className="btn-twitter btn-brand me-1 mb-1">
-              <CButton size="sm" className="btn-xing btn-brand me-1 mb-1"><CIcon size="sm" name="cib-xing" /><span className="ms-2">Xing</span></CButton>
+                <CIcon size="sm" name="cib-twitter" />
-              <CButton size="sm" className="btn-github btn-brand me-1 mb-1"><CIcon size="sm" name="cib-github" /><span className="ms-2">Github</span></CButton>
+                <span className="ms-2">Twitter</span>
-              <CButton size="sm" className="btn-stack-overflow btn-brand me-1 mb-1"><CIcon size="sm" name="cib-stackoverflow" /><span className="ms-2">StackOverflow</span></CButton>
+              </CButton>
-              <CButton size="sm" className="btn-youtube btn-brand me-1 mb-1"><CIcon size="sm" name="cib-youtube" /><span className="ms-2">YouTube</span></CButton>
+              <CButton size="sm" className="btn-linkedin btn-brand me-1 mb-1">
-              <CButton size="sm" className="btn-dribbble btn-brand me-1 mb-1"><CIcon size="sm" name="cib-dribbble" /><span className="ms-2">Dribbble</span></CButton>
+                <CIcon size="sm" name="cib-linkedin" />
-              <CButton size="sm" className="btn-instagram btn-brand me-1 mb-1"><CIcon size="sm" name="cib-instagram" /><span className="ms-2">Instagram</span></CButton>
+                <span className="ms-2">LinkedIn</span>
-              <CButton size="sm" className="btn-pinterest btn-brand me-1 mb-1"><CIcon size="sm" name="cib-pinterest" /><span className="ms-2">Pinterest</span></CButton>
+              </CButton>
-              <CButton size="sm" className="btn-vk btn-brand me-1 mb-1"><CIcon size="sm" name="cib-vk" /><span className="ms-2">VK</span></CButton>
+              <CButton size="sm" className="btn-flickr btn-brand me-1 mb-1">
-              <CButton size="sm" className="btn-yahoo btn-brand me-1 mb-1"><CIcon size="sm" name="cib-yahoo" /><span className="ms-2">Yahoo</span></CButton>
+                <CIcon size="sm" name="cib-flickr" />
-              <CButton size="sm" className="btn-behance btn-brand me-1 mb-1"><CIcon size="sm" name="cib-behance" /><span className="ms-2">Behance</span></CButton>
+                <span className="ms-2">Flickr</span>
-              <CButton size="sm" className="btn-reddit btn-brand me-1 mb-1"><CIcon size="sm" name="cib-reddit" /><span className="ms-2">Reddit</span></CButton>
+              </CButton>
-              <CButton size="sm" className="btn-vimeo btn-brand me-1 mb-1"><CIcon size="sm" name="cib-vimeo" /><span className="ms-2">Vimeo</span></CButton>
+              <CButton size="sm" className="btn-tumblr btn-brand me-1 mb-1">
+                <CIcon size="sm" name="cib-tumblr" />
+                <span className="ms-2">Tumblr</span>
+              </CButton>
+              <CButton size="sm" className="btn-xing btn-brand me-1 mb-1">
+                <CIcon size="sm" name="cib-xing" />
+                <span className="ms-2">Xing</span>
+              </CButton>
+              <CButton size="sm" className="btn-github btn-brand me-1 mb-1">
+                <CIcon size="sm" name="cib-github" />
+                <span className="ms-2">Github</span>
+              </CButton>
+              <CButton size="sm" className="btn-stack-overflow btn-brand me-1 mb-1">
+                <CIcon size="sm" name="cib-stackoverflow" />
+                <span className="ms-2">StackOverflow</span>
+              </CButton>
+              <CButton size="sm" className="btn-youtube btn-brand me-1 mb-1">
+                <CIcon size="sm" name="cib-youtube" />
+                <span className="ms-2">YouTube</span>
+              </CButton>
+              <CButton size="sm" className="btn-dribbble btn-brand me-1 mb-1">
+                <CIcon size="sm" name="cib-dribbble" />
+                <span className="ms-2">Dribbble</span>
+              </CButton>
+              <CButton size="sm" className="btn-instagram btn-brand me-1 mb-1">
+                <CIcon size="sm" name="cib-instagram" />
+                <span className="ms-2">Instagram</span>
+              </CButton>
+              <CButton size="sm" className="btn-pinterest btn-brand me-1 mb-1">
+                <CIcon size="sm" name="cib-pinterest" />
+                <span className="ms-2">Pinterest</span>
+              </CButton>
+              <CButton size="sm" className="btn-vk btn-brand me-1 mb-1">
+                <CIcon size="sm" name="cib-vk" />
+                <span className="ms-2">VK</span>
+              </CButton>
+              <CButton size="sm" className="btn-yahoo btn-brand me-1 mb-1">
+                <CIcon size="sm" name="cib-yahoo" />
+                <span className="ms-2">Yahoo</span>
+              </CButton>
+              <CButton size="sm" className="btn-behance btn-brand me-1 mb-1">
+                <CIcon size="sm" name="cib-behance" />
+                <span className="ms-2">Behance</span>
+              </CButton>
+              <CButton size="sm" className="btn-reddit btn-brand me-1 mb-1">
+                <CIcon size="sm" name="cib-reddit" />
+                <span className="ms-2">Reddit</span>
+              </CButton>
+              <CButton size="sm" className="btn-vimeo btn-brand me-1 mb-1">
+                <CIcon size="sm" name="cib-vimeo" />
+                <span className="ms-2">Vimeo</span>
+              </CButton>
             </p>
             <h6>Size Normal</h6>
             <p>
-              <CButton className="btn-facebook btn-brand me-1 mb-1"><CIcon name="cib-facebook" /><span className="ms-2">Facebook</span></CButton>
+              <CButton className="btn-facebook btn-brand me-1 mb-1">
-              <CButton className="btn-twitter btn-brand me-1 mb-1"><CIcon name="cib-twitter" /><span className="ms-2">Twitter</span></CButton>
+                <CIcon name="cib-facebook" />
-              <CButton className="btn-linkedin btn-brand me-1 mb-1"><CIcon name="cib-linkedin" /><span className="ms-2">LinkedIn</span></CButton>
+                <span className="ms-2">Facebook</span>
-              <CButton className="btn-flickr btn-brand me-1 mb-1"><CIcon name="cib-flickr" /><span className="ms-2">Flickr</span></CButton>
+              </CButton>
-              <CButton className="btn-tumblr btn-brand me-1 mb-1"><CIcon name="cib-tumblr" /><span className="ms-2">Tumblr</span></CButton>
+              <CButton className="btn-twitter btn-brand me-1 mb-1">
-              <CButton className="btn-xing btn-brand me-1 mb-1"><CIcon name="cib-xing" /><span className="ms-2">Xing</span></CButton>
+                <CIcon name="cib-twitter" />
-              <CButton className="btn-github btn-brand me-1 mb-1"><CIcon name="cib-github" /><span className="ms-2">Github</span></CButton>
+                <span className="ms-2">Twitter</span>
-              <CButton className="btn-stack-overflow btn-brand me-1 mb-1"><CIcon name="cib-stackoverflow" /><span className="ms-2">StackOverflow</span></CButton>
+              </CButton>
-              <CButton className="btn-youtube btn-brand me-1 mb-1"><CIcon name="cib-youtube" /><span className="ms-2">YouTube</span></CButton>
+              <CButton className="btn-linkedin btn-brand me-1 mb-1">
-              <CButton className="btn-dribbble btn-brand me-1 mb-1"><CIcon name="cib-dribbble" /><span className="ms-2">Dribbble</span></CButton>
+                <CIcon name="cib-linkedin" />
-              <CButton className="btn-instagram btn-brand me-1 mb-1"><CIcon name="cib-instagram" /><span className="ms-2">Instagram</span></CButton>
+                <span className="ms-2">LinkedIn</span>
-              <CButton className="btn-pinterest btn-brand me-1 mb-1"><CIcon name="cib-pinterest" /><span className="ms-2">Pinterest</span></CButton>
+              </CButton>
-              <CButton className="btn-vk btn-brand me-1 mb-1"><CIcon name="cib-vk" /><span className="ms-2">VK</span></CButton>
+              <CButton className="btn-flickr btn-brand me-1 mb-1">
-              <CButton className="btn-yahoo btn-brand me-1 mb-1"><CIcon name="cib-yahoo" /><span className="ms-2">Yahoo</span></CButton>
+                <CIcon name="cib-flickr" />
-              <CButton className="btn-behance btn-brand me-1 mb-1"><CIcon name="cib-behance" /><span className="ms-2">Behance</span></CButton>
+                <span className="ms-2">Flickr</span>
-              <CButton className="btn-reddit btn-brand me-1 mb-1"><CIcon name="cib-reddit" /><span className="ms-2">Reddit</span></CButton>
+              </CButton>
-              <CButton className="btn-vimeo btn-brand me-1 mb-1"><CIcon name="cib-vimeo" /><span className="ms-2">Vimeo</span></CButton>
+              <CButton className="btn-tumblr btn-brand me-1 mb-1">
+                <CIcon name="cib-tumblr" />
+                <span className="ms-2">Tumblr</span>
+              </CButton>
+              <CButton className="btn-xing btn-brand me-1 mb-1">
+                <CIcon name="cib-xing" />
+                <span className="ms-2">Xing</span>
+              </CButton>
+              <CButton className="btn-github btn-brand me-1 mb-1">
+                <CIcon name="cib-github" />
+                <span className="ms-2">Github</span>
+              </CButton>
+              <CButton className="btn-stack-overflow btn-brand me-1 mb-1">
+                <CIcon name="cib-stackoverflow" />
+                <span className="ms-2">StackOverflow</span>
+              </CButton>
+              <CButton className="btn-youtube btn-brand me-1 mb-1">
+                <CIcon name="cib-youtube" />
+                <span className="ms-2">YouTube</span>
+              </CButton>
+              <CButton className="btn-dribbble btn-brand me-1 mb-1">
+                <CIcon name="cib-dribbble" />
+                <span className="ms-2">Dribbble</span>
+              </CButton>
+              <CButton className="btn-instagram btn-brand me-1 mb-1">
+                <CIcon name="cib-instagram" />
+                <span className="ms-2">Instagram</span>
+              </CButton>
+              <CButton className="btn-pinterest btn-brand me-1 mb-1">
+                <CIcon name="cib-pinterest" />
+                <span className="ms-2">Pinterest</span>
+              </CButton>
+              <CButton className="btn-vk btn-brand me-1 mb-1">
+                <CIcon name="cib-vk" />
+                <span className="ms-2">VK</span>
+              </CButton>
+              <CButton className="btn-yahoo btn-brand me-1 mb-1">
+                <CIcon name="cib-yahoo" />
+                <span className="ms-2">Yahoo</span>
+              </CButton>
+              <CButton className="btn-behance btn-brand me-1 mb-1">
+                <CIcon name="cib-behance" />
+                <span className="ms-2">Behance</span>
+              </CButton>
+              <CButton className="btn-reddit btn-brand me-1 mb-1">
+                <CIcon name="cib-reddit" />
+                <span className="ms-2">Reddit</span>
+              </CButton>
+              <CButton className="btn-vimeo btn-brand me-1 mb-1">
+                <CIcon name="cib-vimeo" />
+                <span className="ms-2">Vimeo</span>
+              </CButton>
             </p>
-            <h6>Size Large
+            <h6>
-              <small> <code>size="lg"</code></small>
+              Size Large
+              <small>
+                {' '}
+                <code>size="lg"</code>
+              </small>
             </h6>
             <p>
-              <CButton size="lg" className="btn-facebook btn-brand me-1 mb-1"><CIcon size="lg" name="cib-facebook" /><span className="ms-2">Facebook</span></CButton>
+              <CButton size="lg" className="btn-facebook btn-brand me-1 mb-1">
-              <CButton size="lg" className="btn-twitter btn-brand me-1 mb-1"><CIcon size="lg" name="cib-twitter" /><span className="ms-2">Twitter</span></CButton>
+                <CIcon size="lg" name="cib-facebook" />
-              <CButton size="lg" className="btn-linkedin btn-brand me-1 mb-1"><CIcon size="lg" name="cib-linkedin" /><span className="ms-2">LinkedIn</span></CButton>
+                <span className="ms-2">Facebook</span>
-              <CButton size="lg" className="btn-flickr btn-brand me-1 mb-1"><CIcon size="lg" name="cib-flickr" /><span className="ms-2">Flickr</span></CButton>
+              </CButton>
-              <CButton size="lg" className="btn-tumblr btn-brand me-1 mb-1"><CIcon size="lg" name="cib-tumblr" /><span className="ms-2">Tumblr</span></CButton>
+              <CButton size="lg" className="btn-twitter btn-brand me-1 mb-1">
-              <CButton size="lg" className="btn-xing btn-brand me-1 mb-1"><CIcon size="lg" name="cib-xing" /><span className="ms-2">Xing</span></CButton>
+                <CIcon size="lg" name="cib-twitter" />
-              <CButton size="lg" className="btn-github btn-brand me-1 mb-1"><CIcon size="lg" name="cib-github" /><span className="ms-2">Github</span></CButton>
+                <span className="ms-2">Twitter</span>
-              <CButton size="lg" className="btn-stack-overflow btn-brand me-1 mb-1"><CIcon size="lg" name="cib-stackoverflow" /><span className="ms-2">StackOverflow</span></CButton>
+              </CButton>
-              <CButton size="lg" className="btn-youtube btn-brand me-1 mb-1"><CIcon size="lg" name="cib-youtube" /><span className="ms-2">YouTube</span></CButton>
+              <CButton size="lg" className="btn-linkedin btn-brand me-1 mb-1">
-              <CButton size="lg" className="btn-dribbble btn-brand me-1 mb-1"><CIcon size="lg" name="cib-dribbble" /><span className="ms-2">Dribbble</span></CButton>
+                <CIcon size="lg" name="cib-linkedin" />
-              <CButton size="lg" className="btn-instagram btn-brand me-1 mb-1"><CIcon size="lg" name="cib-instagram" /><span className="ms-2">Instagram</span></CButton>
+                <span className="ms-2">LinkedIn</span>
-              <CButton size="lg" className="btn-pinterest btn-brand me-1 mb-1"><CIcon size="lg" name="cib-pinterest" /><span className="ms-2">Pinterest</span></CButton>
+              </CButton>
-              <CButton size="lg" className="btn-vk btn-brand me-1 mb-1"><CIcon size="lg" name="cib-vk" /><span className="ms-2">VK</span></CButton>
+              <CButton size="lg" className="btn-flickr btn-brand me-1 mb-1">
-              <CButton size="lg" className="btn-yahoo btn-brand me-1 mb-1"><CIcon size="lg" name="cib-yahoo" /><span className="ms-2">Yahoo</span></CButton>
+                <CIcon size="lg" name="cib-flickr" />
-              <CButton size="lg" className="btn-behance btn-brand me-1 mb-1"><CIcon size="lg" name="cib-behance" /><span className="ms-2">Behance</span></CButton>
+                <span className="ms-2">Flickr</span>
-              <CButton size="lg" className="btn-reddit btn-brand me-1 mb-1"><CIcon size="lg" name="cib-reddit" /><span className="ms-2">Reddit</span></CButton>
+              </CButton>
-              <CButton size="lg" className="btn-vimeo btn-brand me-1 mb-1"><CIcon size="lg" name="cib-vimeo" /><span className="ms-2">Vimeo</span></CButton>
+              <CButton size="lg" className="btn-tumblr btn-brand me-1 mb-1">
+                <CIcon size="lg" name="cib-tumblr" />
+                <span className="ms-2">Tumblr</span>
+              </CButton>
+              <CButton size="lg" className="btn-xing btn-brand me-1 mb-1">
+                <CIcon size="lg" name="cib-xing" />
+                <span className="ms-2">Xing</span>
+              </CButton>
+              <CButton size="lg" className="btn-github btn-brand me-1 mb-1">
+                <CIcon size="lg" name="cib-github" />
+                <span className="ms-2">Github</span>
+              </CButton>
+              <CButton size="lg" className="btn-stack-overflow btn-brand me-1 mb-1">
+                <CIcon size="lg" name="cib-stackoverflow" />
+                <span className="ms-2">StackOverflow</span>
+              </CButton>
+              <CButton size="lg" className="btn-youtube btn-brand me-1 mb-1">
+                <CIcon size="lg" name="cib-youtube" />
+                <span className="ms-2">YouTube</span>
+              </CButton>
+              <CButton size="lg" className="btn-dribbble btn-brand me-1 mb-1">
+                <CIcon size="lg" name="cib-dribbble" />
+                <span className="ms-2">Dribbble</span>
+              </CButton>
+              <CButton size="lg" className="btn-instagram btn-brand me-1 mb-1">
+                <CIcon size="lg" name="cib-instagram" />
+                <span className="ms-2">Instagram</span>
+              </CButton>
+              <CButton size="lg" className="btn-pinterest btn-brand me-1 mb-1">
+                <CIcon size="lg" name="cib-pinterest" />
+                <span className="ms-2">Pinterest</span>
+              </CButton>
+              <CButton size="lg" className="btn-vk btn-brand me-1 mb-1">
+                <CIcon size="lg" name="cib-vk" />
+                <span className="ms-2">VK</span>
+              </CButton>
+              <CButton size="lg" className="btn-yahoo btn-brand me-1 mb-1">
+                <CIcon size="lg" name="cib-yahoo" />
+                <span className="ms-2">Yahoo</span>
+              </CButton>
+              <CButton size="lg" className="btn-behance btn-brand me-1 mb-1">
+                <CIcon size="lg" name="cib-behance" />
+                <span className="ms-2">Behance</span>
+              </CButton>
+              <CButton size="lg" className="btn-reddit btn-brand me-1 mb-1">
+                <CIcon size="lg" name="cib-reddit" />
+                <span className="ms-2">Reddit</span>
+              </CButton>
+              <CButton size="lg" className="btn-vimeo btn-brand me-1 mb-1">
+                <CIcon size="lg" name="cib-vimeo" />
+                <span className="ms-2">Vimeo</span>
+              </CButton>
             </p>
           </CCardBody>
         </CCard>
@@ -93,69 +245,179 @@ const BrandButtons = () => {
             <small> only icons</small>
           </CCardHeader>
           <CCardBody>
-            <h6>Size Small
+            <h6>
-              <small> <code>size="sm"</code></small>
+              Size Small
+              <small>
+                {' '}
+                <code>size="sm"</code>
+              </small>
             </h6>
             <p>
-              <CButton size="sm" className="btn-facebook btn-brand me-1 mb-1"><CIcon size="sm" name="cib-facebook" /></CButton>
+              <CButton size="sm" className="btn-facebook btn-brand me-1 mb-1">
-              <CButton size="sm" className="btn-twitter btn-brand me-1 mb-1"><CIcon size="sm" name="cib-twitter" /></CButton>
+                <CIcon size="sm" name="cib-facebook" />
-              <CButton size="sm" className="btn-linkedin btn-brand me-1 mb-1"><CIcon size="sm" name="cib-linkedin" /></CButton>
+              </CButton>
-              <CButton size="sm" className="btn-flickr btn-brand me-1 mb-1"><CIcon size="sm" name="cib-flickr" /></CButton>
+              <CButton size="sm" className="btn-twitter btn-brand me-1 mb-1">
-              <CButton size="sm" className="btn-tumblr btn-brand me-1 mb-1"><CIcon size="sm" name="cib-tumblr" /></CButton>
+                <CIcon size="sm" name="cib-twitter" />
-              <CButton size="sm" className="btn-xing btn-brand me-1 mb-1"><CIcon size="sm" name="cib-xing" /></CButton>
+              </CButton>
-              <CButton size="sm" className="btn-github btn-brand me-1 mb-1"><CIcon size="sm" name="cib-github" /></CButton>
+              <CButton size="sm" className="btn-linkedin btn-brand me-1 mb-1">
-              <CButton size="sm" className="btn-stack-overflow btn-brand me-1 mb-1"><CIcon size="sm" name="cib-stackoverflow" /></CButton>
+                <CIcon size="sm" name="cib-linkedin" />
-              <CButton size="sm" className="btn-youtube btn-brand me-1 mb-1"><CIcon size="sm" name="cib-youtube" /></CButton>
+              </CButton>
-              <CButton size="sm" className="btn-dribbble btn-brand me-1 mb-1"><CIcon size="sm" name="cib-dribbble" /></CButton>
+              <CButton size="sm" className="btn-flickr btn-brand me-1 mb-1">
-              <CButton size="sm" className="btn-instagram btn-brand me-1 mb-1"><CIcon size="sm" name="cib-instagram" /></CButton>
+                <CIcon size="sm" name="cib-flickr" />
-              <CButton size="sm" className="btn-pinterest btn-brand me-1 mb-1"><CIcon size="sm" name="cib-pinterest" /></CButton>
+              </CButton>
-              <CButton size="sm" className="btn-vk btn-brand me-1 mb-1"><CIcon size="sm" name="cib-vk" /></CButton>
+              <CButton size="sm" className="btn-tumblr btn-brand me-1 mb-1">
-              <CButton size="sm" className="btn-yahoo btn-brand me-1 mb-1"><CIcon size="sm" name="cib-yahoo" /></CButton>
+                <CIcon size="sm" name="cib-tumblr" />
-              <CButton size="sm" className="btn-behance btn-brand me-1 mb-1"><CIcon size="sm" name="cib-behance" /></CButton>
+              </CButton>
-              <CButton size="sm" className="btn-reddit btn-brand me-1 mb-1"><CIcon size="sm" name="cib-reddit" /></CButton>
+              <CButton size="sm" className="btn-xing btn-brand me-1 mb-1">
-              <CButton size="sm" className="btn-vimeo btn-brand me-1 mb-1"><CIcon size="sm" name="cib-vimeo" /></CButton>
+                <CIcon size="sm" name="cib-xing" />
+              </CButton>
+              <CButton size="sm" className="btn-github btn-brand me-1 mb-1">
+                <CIcon size="sm" name="cib-github" />
+              </CButton>
+              <CButton size="sm" className="btn-stack-overflow btn-brand me-1 mb-1">
+                <CIcon size="sm" name="cib-stackoverflow" />
+              </CButton>
+              <CButton size="sm" className="btn-youtube btn-brand me-1 mb-1">
+                <CIcon size="sm" name="cib-youtube" />
+              </CButton>
+              <CButton size="sm" className="btn-dribbble btn-brand me-1 mb-1">
+                <CIcon size="sm" name="cib-dribbble" />
+              </CButton>
+              <CButton size="sm" className="btn-instagram btn-brand me-1 mb-1">
+                <CIcon size="sm" name="cib-instagram" />
+              </CButton>
+              <CButton size="sm" className="btn-pinterest btn-brand me-1 mb-1">
+                <CIcon size="sm" name="cib-pinterest" />
+              </CButton>
+              <CButton size="sm" className="btn-vk btn-brand me-1 mb-1">
+                <CIcon size="sm" name="cib-vk" />
+              </CButton>
+              <CButton size="sm" className="btn-yahoo btn-brand me-1 mb-1">
+                <CIcon size="sm" name="cib-yahoo" />
+              </CButton>
+              <CButton size="sm" className="btn-behance btn-brand me-1 mb-1">
+                <CIcon size="sm" name="cib-behance" />
+              </CButton>
+              <CButton size="sm" className="btn-reddit btn-brand me-1 mb-1">
+                <CIcon size="sm" name="cib-reddit" />
+              </CButton>
+              <CButton size="sm" className="btn-vimeo btn-brand me-1 mb-1">
+                <CIcon size="sm" name="cib-vimeo" />
+              </CButton>
             </p>
             <h6>Size Normal</h6>
             <p>
-              <CButton className="btn-facebook btn-brand me-1 mb-1"><CIcon name="cib-facebook" /></CButton>
+              <CButton className="btn-facebook btn-brand me-1 mb-1">
-              <CButton className="btn-twitter btn-brand me-1 mb-1"><CIcon name="cib-twitter" /></CButton>
+                <CIcon name="cib-facebook" />
-              <CButton className="btn-linkedin btn-brand me-1 mb-1"><CIcon name="cib-linkedin" /></CButton>
+              </CButton>
-              <CButton className="btn-flickr btn-brand me-1 mb-1"><CIcon name="cib-flickr" /></CButton>
+              <CButton className="btn-twitter btn-brand me-1 mb-1">
-              <CButton className="btn-tumblr btn-brand me-1 mb-1"><CIcon name="cib-tumblr" /></CButton>
+                <CIcon name="cib-twitter" />
-              <CButton className="btn-xing btn-brand me-1 mb-1"><CIcon name="cib-xing" /></CButton>
+              </CButton>
-              <CButton className="btn-github btn-brand me-1 mb-1"><CIcon name="cib-github" /></CButton>
+              <CButton className="btn-linkedin btn-brand me-1 mb-1">
-              <CButton className="btn-stack-overflow btn-brand me-1 mb-1"><CIcon name="cib-stackoverflow" /></CButton>
+                <CIcon name="cib-linkedin" />
-              <CButton className="btn-youtube btn-brand me-1 mb-1"><CIcon name="cib-youtube" /></CButton>
+              </CButton>
-              <CButton className="btn-dribbble btn-brand me-1 mb-1"><CIcon name="cib-dribbble" /></CButton>
+              <CButton className="btn-flickr btn-brand me-1 mb-1">
-              <CButton className="btn-instagram btn-brand me-1 mb-1"><CIcon name="cib-instagram" /></CButton>
+                <CIcon name="cib-flickr" />
-              <CButton className="btn-pinterest btn-brand me-1 mb-1"><CIcon name="cib-pinterest" /></CButton>
+              </CButton>
-              <CButton className="btn-vk btn-brand me-1 mb-1"><CIcon name="cib-vk" /></CButton>
+              <CButton className="btn-tumblr btn-brand me-1 mb-1">
-              <CButton className="btn-yahoo btn-brand me-1 mb-1"><CIcon name="cib-yahoo" /></CButton>
+                <CIcon name="cib-tumblr" />
-              <CButton className="btn-behance btn-brand me-1 mb-1"><CIcon name="cib-behance" /></CButton>
+              </CButton>
-              <CButton className="btn-reddit btn-brand me-1 mb-1"><CIcon name="cib-reddit" /></CButton>
+              <CButton className="btn-xing btn-brand me-1 mb-1">
-              <CButton className="btn-vimeo btn-brand me-1 mb-1"><CIcon name="cib-vimeo" /></CButton>
+                <CIcon name="cib-xing" />
+              </CButton>
+              <CButton className="btn-github btn-brand me-1 mb-1">
+                <CIcon name="cib-github" />
+              </CButton>
+              <CButton className="btn-stack-overflow btn-brand me-1 mb-1">
+                <CIcon name="cib-stackoverflow" />
+              </CButton>
+              <CButton className="btn-youtube btn-brand me-1 mb-1">
+                <CIcon name="cib-youtube" />
+              </CButton>
+              <CButton className="btn-dribbble btn-brand me-1 mb-1">
+                <CIcon name="cib-dribbble" />
+              </CButton>
+              <CButton className="btn-instagram btn-brand me-1 mb-1">
+                <CIcon name="cib-instagram" />
+              </CButton>
+              <CButton className="btn-pinterest btn-brand me-1 mb-1">
+                <CIcon name="cib-pinterest" />
+              </CButton>
+              <CButton className="btn-vk btn-brand me-1 mb-1">
+                <CIcon name="cib-vk" />
+              </CButton>
+              <CButton className="btn-yahoo btn-brand me-1 mb-1">
+                <CIcon name="cib-yahoo" />
+              </CButton>
+              <CButton className="btn-behance btn-brand me-1 mb-1">
+                <CIcon name="cib-behance" />
+              </CButton>
+              <CButton className="btn-reddit btn-brand me-1 mb-1">
+                <CIcon name="cib-reddit" />
+              </CButton>
+              <CButton className="btn-vimeo btn-brand me-1 mb-1">
+                <CIcon name="cib-vimeo" />
+              </CButton>
             </p>
-            <h6>Size Large
+            <h6>
-              <small> <code>size="lg"</code></small>
+              Size Large
+              <small>
+                {' '}
+                <code>size="lg"</code>
+              </small>
             </h6>
             <p>
-              <CButton size="lg" className="btn-facebook btn-brand me-1 mb-1"><CIcon size="lg" name="cib-facebook" /></CButton>
+              <CButton size="lg" className="btn-facebook btn-brand me-1 mb-1">
-              <CButton size="lg" className="btn-twitter btn-brand me-1 mb-1"><CIcon size="lg" name="cib-twitter" /></CButton>
+                <CIcon size="lg" name="cib-facebook" />
-              <CButton size="lg" className="btn-linkedin btn-brand me-1 mb-1"><CIcon size="lg" name="cib-linkedin" /></CButton>
+              </CButton>
-              <CButton size="lg" className="btn-flickr btn-brand me-1 mb-1"><CIcon size="lg" name="cib-flickr" /></CButton>
+              <CButton size="lg" className="btn-twitter btn-brand me-1 mb-1">
-              <CButton size="lg" className="btn-tumblr btn-brand me-1 mb-1"><CIcon size="lg" name="cib-tumblr" /></CButton>
+                <CIcon size="lg" name="cib-twitter" />
-              <CButton size="lg" className="btn-xing btn-brand me-1 mb-1"><CIcon size="lg" name="cib-xing" /></CButton>
+              </CButton>
-              <CButton size="lg" className="btn-github btn-brand me-1 mb-1"><CIcon size="lg" name="cib-github" /></CButton>
+              <CButton size="lg" className="btn-linkedin btn-brand me-1 mb-1">
-              <CButton size="lg" className="btn-stack-overflow btn-brand me-1 mb-1"><CIcon size="lg" name="cib-stackoverflow" /></CButton>
+                <CIcon size="lg" name="cib-linkedin" />
-              <CButton size="lg" className="btn-youtube btn-brand me-1 mb-1"><CIcon size="lg" name="cib-youtube" /></CButton>
+              </CButton>
-              <CButton size="lg" className="btn-dribbble btn-brand me-1 mb-1"><CIcon size="lg" name="cib-dribbble" /></CButton>
+              <CButton size="lg" className="btn-flickr btn-brand me-1 mb-1">
-              <CButton size="lg" className="btn-instagram btn-brand me-1 mb-1"><CIcon size="lg" name="cib-instagram" /></CButton>
+                <CIcon size="lg" name="cib-flickr" />
-              <CButton size="lg" className="btn-pinterest btn-brand me-1 mb-1"><CIcon size="lg" name="cib-pinterest" /></CButton>
+              </CButton>
-              <CButton size="lg" className="btn-vk btn-brand me-1 mb-1"><CIcon size="lg" name="cib-vk" /></CButton>
+              <CButton size="lg" className="btn-tumblr btn-brand me-1 mb-1">
-              <CButton size="lg" className="btn-yahoo btn-brand me-1 mb-1"><CIcon size="lg" name="cib-yahoo" /></CButton>
+                <CIcon size="lg" name="cib-tumblr" />
-              <CButton size="lg" className="btn-behance btn-brand me-1 mb-1"><CIcon size="lg" name="cib-behance" /></CButton>
+              </CButton>
-              <CButton size="lg" className="btn-reddit btn-brand me-1 mb-1"><CIcon size="lg" name="cib-reddit" /></CButton>
+              <CButton size="lg" className="btn-xing btn-brand me-1 mb-1">
-              <CButton size="lg" className="btn-vimeo btn-brand me-1 mb-1"><CIcon size="lg" name="cib-vimeo" /></CButton>
+                <CIcon size="lg" name="cib-xing" />
+              </CButton>
+              <CButton size="lg" className="btn-github btn-brand me-1 mb-1">
+                <CIcon size="lg" name="cib-github" />
+              </CButton>
+              <CButton size="lg" className="btn-stack-overflow btn-brand me-1 mb-1">
+                <CIcon size="lg" name="cib-stackoverflow" />
+              </CButton>
+              <CButton size="lg" className="btn-youtube btn-brand me-1 mb-1">
+                <CIcon size="lg" name="cib-youtube" />
+              </CButton>
+              <CButton size="lg" className="btn-dribbble btn-brand me-1 mb-1">
+                <CIcon size="lg" name="cib-dribbble" />
+              </CButton>
+              <CButton size="lg" className="btn-instagram btn-brand me-1 mb-1">
+                <CIcon size="lg" name="cib-instagram" />
+              </CButton>
+              <CButton size="lg" className="btn-pinterest btn-brand me-1 mb-1">
+                <CIcon size="lg" name="cib-pinterest" />
+              </CButton>
+              <CButton size="lg" className="btn-vk btn-brand me-1 mb-1">
+                <CIcon size="lg" name="cib-vk" />
+              </CButton>
+              <CButton size="lg" className="btn-yahoo btn-brand me-1 mb-1">
+                <CIcon size="lg" name="cib-yahoo" />
+              </CButton>
+              <CButton size="lg" className="btn-behance btn-brand me-1 mb-1">
+                <CIcon size="lg" name="cib-behance" />
+              </CButton>
+              <CButton size="lg" className="btn-reddit btn-brand me-1 mb-1">
+                <CIcon size="lg" name="cib-reddit" />
+              </CButton>
+              <CButton size="lg" className="btn-vimeo btn-brand me-1 mb-1">
+                <CIcon size="lg" name="cib-vimeo" />
+              </CButton>
             </p>
           </CCardBody>
         </CCard>

src/views/buttons/button-dropdowns/ButtonDropdowns.js

@@ -15,7 +15,7 @@ import {
   CRow,
   CFormLabel,
   CFormControl,
-  CFormCheck
+  CFormCheck,
 } from '@coreui/react-ts'
 import { DocsLink } from 'src/reusable'
 
@@ -26,14 +26,11 @@ const ButtonDropdowns = () => {
         <CCard className="mb-4">
           <CCardHeader>
             Dropdowns
-            <DocsLink name="CDropdown"/>
+            <DocsLink name="CDropdown" />
           </CCardHeader>
           <CCardBody>
-
             <CDropdown className="m-1">
-              <CDropdownToggle>
+              <CDropdownToggle>Dropdown button</CDropdownToggle>
-                Dropdown button
-              </CDropdownToggle>
               <CDropdownMenu>
                 <CDropdownItem header>Header</CDropdownItem>
                 <CDropdownItem disabled>Action Disabled</CDropdownItem>
@@ -42,13 +39,9 @@ const ButtonDropdowns = () => {
                 <CDropdownItem>Another Action</CDropdownItem>
               </CDropdownMenu>
             </CDropdown>
-
+            <hr />
-            <hr/>
-
             <CDropdown className="m-1 btn-group">
-              <CDropdownToggle color="primary">
+              <CDropdownToggle color="primary">Primary</CDropdownToggle>
-                Primary
-              </CDropdownToggle>
               <CDropdownMenu>
                 <CDropdownItem header>Header</CDropdownItem>
                 <CDropdownItem disabled>Action Disabled</CDropdownItem>
@@ -58,9 +51,7 @@ const ButtonDropdowns = () => {
               </CDropdownMenu>
             </CDropdown>
             <CDropdown className="m-1 btn-group">
-              <CDropdownToggle color="secondary">
+              <CDropdownToggle color="secondary">Secondary</CDropdownToggle>
-                Secondary
-              </CDropdownToggle>
               <CDropdownMenu>
                 <CDropdownItem header>Header</CDropdownItem>
                 <CDropdownItem disabled>Action Disabled</CDropdownItem>
@@ -70,9 +61,7 @@ const ButtonDropdowns = () => {
               </CDropdownMenu>
             </CDropdown>
             <CDropdown className="m-1 btn-group">
-              <CDropdownToggle color="success">
+              <CDropdownToggle color="success">Success</CDropdownToggle>
-                Success
-              </CDropdownToggle>
               <CDropdownMenu>
                 <CDropdownItem header>Header</CDropdownItem>
                 <CDropdownItem disabled>Action Disabled</CDropdownItem>
@@ -82,9 +71,7 @@ const ButtonDropdowns = () => {
               </CDropdownMenu>
             </CDropdown>
             <CDropdown className="m-1 btn-group">
-              <CDropdownToggle color="info">
+              <CDropdownToggle color="info">Info</CDropdownToggle>
-                Info
-              </CDropdownToggle>
               <CDropdownMenu>
                 <CDropdownItem header>Header</CDropdownItem>
                 <CDropdownItem disabled>Action Disabled</CDropdownItem>
@@ -94,9 +81,7 @@ const ButtonDropdowns = () => {
               </CDropdownMenu>
             </CDropdown>
             <CDropdown className="m-1 btn-group">
-              <CDropdownToggle color="warning">
+              <CDropdownToggle color="warning">Warning</CDropdownToggle>
-                Warning
-              </CDropdownToggle>
               <CDropdownMenu>
                 <CDropdownItem header>Header</CDropdownItem>
                 <CDropdownItem disabled>Action Disabled</CDropdownItem>
@@ -106,9 +91,7 @@ const ButtonDropdowns = () => {
               </CDropdownMenu>
             </CDropdown>
             <CDropdown className="m-1 btn-group">
-              <CDropdownToggle color="danger">
+              <CDropdownToggle color="danger">Danger</CDropdownToggle>
-                Danger
-              </CDropdownToggle>
               <CDropdownMenu>
                 <CDropdownItem header>Header</CDropdownItem>
                 <CDropdownItem disabled>Action Disabled</CDropdownItem>
@@ -117,8 +100,7 @@ const ButtonDropdowns = () => {
                 <CDropdownItem>Another Action</CDropdownItem>
               </CDropdownMenu>
             </CDropdown>
-
+            <hr />
-            <hr/>
             <CDropdown className="m-1">
               <CDropdownToggle split color="primary">
                 Primary
@@ -191,13 +173,9 @@ const ButtonDropdowns = () => {
                 <CDropdownItem>Another Action</CDropdownItem>
               </CDropdownMenu>
             </CDropdown>
-
+            <hr />
-            <hr/>
-
             <CDropdown className="m-1" size="lg">
-              <CDropdownToggle color="secondary">
+              <CDropdownToggle color="secondary">Large button</CDropdownToggle>
-                Large button
-              </CDropdownToggle>
               <CDropdownMenu>
                 <CDropdownItem header>Header</CDropdownItem>
                 <CDropdownItem disabled>Action Disabled</CDropdownItem>
@@ -205,8 +183,7 @@ const ButtonDropdowns = () => {
                 <CDropdownDivider />
                 <CDropdownItem>Another Action</CDropdownItem>
               </CDropdownMenu>
-            </CDropdown>
+            </CDropdown>{' '}
-            {' '}
             <CDropdown className="m-1">
               <CDropdownToggle split color="secondary" size="lg">
                 Large split button
@@ -219,9 +196,7 @@ const ButtonDropdowns = () => {
                 <CDropdownItem>Another Action</CDropdownItem>
               </CDropdownMenu>
             </CDropdown>
-
+            <hr />
-            <hr/>
-
             <CDropdown className="m-1">
               <CDropdownToggle color="secondary" size="sm">
                 Small button
@@ -233,8 +208,7 @@ const ButtonDropdowns = () => {
                 <CDropdownDivider />
                 <CDropdownItem>Another Action</CDropdownItem>
               </CDropdownMenu>
-            </CDropdown>
+            </CDropdown>{' '}
-            {' '}
             <CDropdown className="m-1">
               <CDropdownToggle color="secondary" size="sm" split>
                 Small split button
@@ -247,13 +221,9 @@ const ButtonDropdowns = () => {
                 <CDropdownItem>Another Action</CDropdownItem>
               </CDropdownMenu>
             </CDropdown>
-
+            <hr />
-            <hr/>
-
             <CDropdown className="m-1">
-              <CDropdownToggle color="secondary">
+              <CDropdownToggle color="secondary">Dropup button</CDropdownToggle>
-                Dropup button
-              </CDropdownToggle>
               <CDropdownMenu placement="top">
                 <CDropdownItem header>Header</CDropdownItem>
                 <CDropdownItem disabled>Action Disabled</CDropdownItem>
@@ -272,19 +242,13 @@ const ButtonDropdowns = () => {
                 <CDropdownItem>Another Action</CDropdownItem>
               </CDropdownMenu>
             </CDropdown>
-
           </CCardBody>
         </CCard>
         <CCard className="mb-4">
-          <CCardHeader>
+          <CCardHeader>Menus</CCardHeader>
-            Menus
-          </CCardHeader>
           <CCardBody>
-
             <CDropdown className="m-1 d-inline-block">
-              <CDropdownToggle color="secondary">
+              <CDropdownToggle color="secondary">Direction Up</CDropdownToggle>
-                Direction Up
-              </CDropdownToggle>
               <CDropdownMenu placement="top">
                 <CDropdownItem header>Header</CDropdownItem>
                 <CDropdownItem disabled>Action Disabled</CDropdownItem>
@@ -294,9 +258,7 @@ const ButtonDropdowns = () => {
             </CDropdown>
 
             <CDropdown className="m-1 d-inline-block">
-              <CDropdownToggle color="secondary">
+              <CDropdownToggle color="secondary">Direction Left</CDropdownToggle>
-                Direction Left
-              </CDropdownToggle>
               <CDropdownMenu placement="left">
                 <CDropdownItem header>Header</CDropdownItem>
                 <CDropdownItem disabled>Action Disabled</CDropdownItem>
@@ -306,9 +268,7 @@ const ButtonDropdowns = () => {
             </CDropdown>
 
             <CDropdown className="m-1 d-inline-block">
-              <CDropdownToggle color="secondary">
+              <CDropdownToggle color="secondary">Direction Right</CDropdownToggle>
-                Direction Right
-              </CDropdownToggle>
               <CDropdownMenu placement="right">
                 <CDropdownHeader>Header</CDropdownHeader>
                 <CDropdownItem disabled>Action Disabled</CDropdownItem>
@@ -318,13 +278,8 @@ const ButtonDropdowns = () => {
             </CDropdown>
 
             <CDropdown className="m-1 d-inline-block">
-              <CDropdownToggle color="secondary">
+              <CDropdownToggle color="secondary">Default Down</CDropdownToggle>
-                Default Down
+              <CDropdownMenu placement="bottom" modifiers={[{ name: 'flip', enabled: false }]}>
-              </CDropdownToggle>
-              <CDropdownMenu
-                placement="bottom"
-                modifiers={[{name: 'flip', enabled: false }]}
-              >
                 <CDropdownItem header>Header</CDropdownItem>
                 <CDropdownItem disabled>Action Disabled</CDropdownItem>
                 <CDropdownItem>Action</CDropdownItem>
@@ -336,7 +291,7 @@ const ButtonDropdowns = () => {
 
             <CDropdown className="m-1">
               <CDropdownToggle color="secondary">
-                This dropdown{'\''}s menu is right-aligned
+                This dropdown{"'"}s menu is right-aligned
               </CDropdownToggle>
               <CDropdownMenu placement="right">
                 <CDropdownItem header>Header</CDropdownItem>
@@ -349,9 +304,7 @@ const ButtonDropdowns = () => {
             <hr />
 
             <CDropdown className="m-1">
-              <CDropdownToggle color="secondary">
+              <CDropdownToggle color="secondary">Dropdown with header</CDropdownToggle>
-                Dropdown with header
-              </CDropdownToggle>
               <CDropdownMenu>
                 <CDropdownItem header>Header</CDropdownItem>
                 <CDropdownItem>Action</CDropdownItem>
@@ -362,9 +315,7 @@ const ButtonDropdowns = () => {
             <hr />
 
             <CDropdown className="m-1">
-              <CDropdownToggle color="secondary">
+              <CDropdownToggle color="secondary">Dropdown with divider</CDropdownToggle>
-                Dropdown with divider
-              </CDropdownToggle>
               <CDropdownMenu>
                 <CDropdownItem>Action</CDropdownItem>
                 <CDropdownDivider />
@@ -375,9 +326,7 @@ const ButtonDropdowns = () => {
             <hr />
 
             <CDropdown className="m-1">
-              <CDropdownToggle color="secondary">
+              <CDropdownToggle color="secondary">Dropdown with disabled item</CDropdownToggle>
-                Dropdown with disabled item
-              </CDropdownToggle>
               <CDropdownMenu>
                 <CDropdownItem>Action</CDropdownItem>
                 <CDropdownItem disabled>Disabled Action</CDropdownItem>
@@ -387,32 +336,41 @@ const ButtonDropdowns = () => {
             <hr />
 
             <CDropdown className="m-1">
-              <CDropdownToggle color="info">
+              <CDropdownToggle color="info">Dropdown with form</CDropdownToggle>
-                Dropdown with form
-              </CDropdownToggle>
               <CDropdownMenu>
-                <CForm className="px-4 py-3" >
+                <CForm className="px-4 py-3">
                   <div className="mb-3">
                     <CFormLabel htmlFor="exampleDropdownFormEmail1">Email address</CFormLabel>
-                    <CFormControl id="exampleDropdownFormEmail1" type="email" placeholder="email@example.com" autoComplete="email"/>
+                    <CFormControl
+                      id="exampleDropdownFormEmail1"
+                      type="email"
+                      placeholder="email@example.com"
+                      autoComplete="email"
+                    />
                   </div>
                   <div className="mb-3">
                     <CFormLabel htmlFor="exampleDropdownFormPassword1">Password</CFormLabel>
-                    <CFormControl id="exampleDropdownFormPassword1" type="password" placeholder="Password" autoComplete="current-password"/>
+                    <CFormControl
+                      id="exampleDropdownFormPassword1"
+                      type="password"
+                      placeholder="Password"
+                      autoComplete="current-password"
+                    />
                   </div>
                   <div className="mb-3">
-                    <CFormCheck custom id="exampleDropdownFormCheckbox1" label="Remember me"/>
+                    <CFormCheck custom id="exampleDropdownFormCheckbox1" label="Remember me" />
                   </div>
                   <div className="mb-3">
-                    <CButton color="primary" type="submit">Sign in</CButton>
+                    <CButton color="primary" type="submit">
+                      Sign in
+                    </CButton>
                   </div>
                 </CForm>
-                <CDropdownDivider/>
+                <CDropdownDivider />
-                <CDropdownItem href="#/pages/register" >Register</CDropdownItem>
+                <CDropdownItem href="#/pages/register">Register</CDropdownItem>
                 <CDropdownItem>Forgot password?</CDropdownItem>
               </CDropdownMenu>
             </CDropdown>
-
           </CCardBody>
         </CCard>
       </CCol>

src/views/buttons/button-groups/ButtonGroups.js

@@ -26,19 +26,17 @@ const ButtonGroups = () => {
         <CCard className="mb-4">
           <CCardHeader>
             Callout
-            <DocsLink name="CCallout"/>
+            <DocsLink name="CCallout" />
           </CCardHeader>
           <CCardBody>
-            <CCallout color="primary">
+            <CCallout color="primary">Callout</CCallout>
-              Callout
-            </CCallout>
           </CCardBody>
         </CCard>
 
         <CCard className="mb-4">
           <CCardHeader>
             Button Group
-            <DocsLink name="-Button/#CButtonGroup"/>
+            <DocsLink name="-Button/#CButtonGroup" />
           </CCardHeader>
           <CCardBody>
             <CButtonGroup>
@@ -111,10 +109,8 @@ const ButtonGroups = () => {
             </CButtonGroup>
           </CCardBody>
         </CCard>
-
       </CCol>
       <CCol md={6}>
-
         <CCard className="mb-4">
           <CCardHeader>
             Button Group
@@ -126,13 +122,15 @@ const ButtonGroups = () => {
               <CButton color="secondary">Middle</CButton>
               <CButton color="secondary">Right</CButton>
             </CButtonGroup>
-            <br /><br />
+            <br />
+            <br />
             <CButtonGroup>
               <CButton color="secondary">Left</CButton>
               <CButton color="secondary">Middle</CButton>
               <CButton color="secondary">Right</CButton>
             </CButtonGroup>
-            <br /><br />
+            <br />
+            <br />
             <CButtonGroup size="sm">
               <CButton color="secondary">Left</CButton>
               <CButton color="secondary">Middle</CButton>

src/views/buttons/index.js

@@ -3,6 +3,4 @@ import ButtonGroups from './ButtonGroups'
 import Buttons from './Buttons'
 import BrandButtons from './BrandButtons'
 
-export {
+export { ButtonDropdowns, ButtonGroups, Buttons, BrandButtons }
-  ButtonDropdowns, ButtonGroups, Buttons, BrandButtons
-}

src/views/charts/ChartBarSimple.js

@@ -3,8 +3,7 @@ import PropTypes from 'prop-types'
 import { getColor } from '@coreui/utils'
 import { CChartBar } from '@coreui/react-chartjs'
 
-const ChartBarSimple = props => {
+const ChartBarSimple = (props) => {
-
   const {
     backgroundColor,
     pointHoverBackgroundColor,
@@ -14,7 +13,7 @@ const ChartBarSimple = props => {
     ...attributes
   } = props
 
-  const defaultDatasets = (()=>{
+  const defaultDatasets = (() => {
     return [
       {
         data: dataPoints,
@@ -22,36 +21,35 @@ const ChartBarSimple = props => {
         pointHoverBackgroundColor: getColor(pointHoverBackgroundColor),
         label: label,
         barPercentage: 0.5,
-        categoryPercentage: 1
+        categoryPercentage: 1,
-      }
+      },
     ]
   })()
 
-  const defaultOptions = (()=>{
+  const defaultOptions = (() => {
     return {
       maintainAspectRatio: false,
       legend: {
-        display: false
+        display: false,
       },
       scales: {
-        xAxes: [{
+        xAxes: [
-          display: false
+          {
-        }],
+            display: false,
-        yAxes: [{
+          },
-          display: false
+        ],
-        }]
+        yAxes: [
-      }
+          {
+            display: false,
+          },
+        ],
+      },
     }
   })()
 
   // render
   return (
-    <CChartBar
+    <CChartBar {...attributes} datasets={defaultDatasets} options={defaultOptions} labels={label} />
-      {...attributes}
-      datasets={defaultDatasets}
-      options={defaultOptions}
-      labels={label}
-    />
   )
 }
 
@@ -63,13 +61,13 @@ ChartBarSimple.propTypes = {
   pointHoverBackgroundColor: PropTypes.string,
   dataPoints: PropTypes.array,
   label: PropTypes.string,
-  pointed: PropTypes.bool
+  pointed: PropTypes.bool,
-};
+}
 
 ChartBarSimple.defaultProps = {
   backgroundColor: 'rgba(0,0,0,.2)',
   dataPoints: [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12],
-  label: 'Sales'
+  label: 'Sales',
-};
+}
 
 export default ChartBarSimple

src/views/charts/ChartLineSimple.js

@@ -3,8 +3,7 @@ import PropTypes from 'prop-types'
 import { getColor, deepObjectsMerge } from '@coreui/utils'
 import { CChartLine } from '@coreui/react-chartjs'
 
-const ChartLineSimple = props => {
+const ChartLineSimple = (props) => {
-
   const {
     borderColor,
     backgroundColor,
@@ -15,7 +14,7 @@ const ChartLineSimple = props => {
     ...attributes
   } = props
 
-  const pointHoverColor = (()=>{
+  const pointHoverColor = (() => {
     if (pointHoverBackgroundColor) {
       return pointHoverBackgroundColor
     } else if (backgroundColor !== 'transparent') {
@@ -24,7 +23,7 @@ const ChartLineSimple = props => {
     return borderColor
   })()
 
-  const defaultDatasets = (()=>{
+  const defaultDatasets = (() => {
     return [
       {
         data: dataPoints,
@@ -32,12 +31,12 @@ const ChartLineSimple = props => {
         backgroundColor: getColor(backgroundColor),
         pointBackgroundColor: getColor(pointHoverColor),
         pointHoverBackgroundColor: getColor(pointHoverColor),
-        label
+        label,
-      }
+      },
     ]
   })()
 
-  const pointedOptions = (()=>{
+  const pointedOptions = (() => {
     return {
       scales: {
         xAxes: [
@@ -45,13 +44,13 @@ const ChartLineSimple = props => {
             offset: true,
             gridLines: {
               color: 'transparent',
-              zeroLineColor: 'transparent'
+              zeroLineColor: 'transparent',
             },
             ticks: {
               fontSize: 2,
-              fontColor: 'transparent'
+              fontColor: 'transparent',
-            }
+            },
-          }
+          },
         ],
         yAxes: [
           {
@@ -59,54 +58,58 @@ const ChartLineSimple = props => {
             ticks: {
               display: false,
               min: Math.min.apply(Math, dataPoints) - 5,
-              max: Math.max.apply(Math, dataPoints) + 5
+              max: Math.max.apply(Math, dataPoints) + 5,
-            }
+            },
-          }
+          },
-        ]
+        ],
       },
       elements: {
         line: {
-          borderWidth: 1
+          borderWidth: 1,
         },
         point: {
           radius: 4,
           hitRadius: 10,
-          hoverRadius: 4
+          hoverRadius: 4,
-        }
+        },
-      }
+      },
     }
   })()
 
-  const straightOptions = (()=>{
+  const straightOptions = (() => {
     return {
       scales: {
-        xAxes: [{
+        xAxes: [
-          display: false
+          {
-        }],
+            display: false,
-        yAxes: [{
+          },
-          display: false
+        ],
-        }]
+        yAxes: [
+          {
+            display: false,
+          },
+        ],
       },
       elements: {
         line: {
-          borderWidth: 2
+          borderWidth: 2,
         },
         point: {
           radius: 0,
           hitRadius: 10,
-          hoverRadius: 4
+          hoverRadius: 4,
-        }
+        },
-      }
+      },
     }
   })()
 
-  const defaultOptions = (()=>{
+  const defaultOptions = (() => {
     const options = pointed ? pointedOptions : straightOptions
     return Object.assign({}, options, {
       maintainAspectRatio: false,
       legend: {
-          display: false
+        display: false,
-        }
+      },
     })
   })()
 
@@ -139,14 +142,14 @@ ChartLineSimple.propTypes = {
   pointHoverBackgroundColor: PropTypes.string,
   dataPoints: PropTypes.array,
   label: PropTypes.string,
-  pointed: PropTypes.bool
+  pointed: PropTypes.bool,
-};
+}
 
 ChartLineSimple.defaultProps = {
   borderColor: 'rgba(255,255,255,.55)',
   backgroundColor: 'transparent',
   dataPoints: [10, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12],
-  label: 'Sales'
+  label: 'Sales',
-};
+}
 
 export default ChartLineSimple

src/views/charts/Charts.js

@@ -1,28 +1,22 @@
 import React from 'react'
-import {
+import { CCard, CCardBody, CCardGroup, CCardHeader } from '@coreui/react-ts'
-  CCard,
-  CCardBody,
-  CCardGroup,
-  CCardHeader
-} from '@coreui/react-ts'
 import {
   CChartBar,
   CChartLine,
   CChartDoughnut,
   CChartRadar,
   CChartPie,
-  CChartPolarArea
+  CChartPolarArea,
 } from '@coreui/react-chartjs'
 import { DocsLink } from 'src/reusable'
 
 const Charts = () => {
-
   return (
-    <CCardGroup columns className = "cols-2" >
+    <CCardGroup columns className="cols-2">
       <CCard className="mb-4">
         <CCardHeader>
           Bar Chart
-          <DocsLink href="http://www.chartjs.org"/>
+          <DocsLink href="http://www.chartjs.org" />
         </CCardHeader>
         <CCardBody>
           <CChartBar
@@ -30,68 +24,59 @@ const Charts = () => {
               {
                 label: 'GitHub Commits',
                 backgroundColor: '#f87979',
-                data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
+                data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11],
-              }
+              },
             ]}
             labels="months"
             options={{
               tooltips: {
-                enabled: true
+                enabled: true,
-              }
+              },
             }}
           />
         </CCardBody>
       </CCard>
 
       <CCard className="mb-4">
-        <CCardHeader>
+        <CCardHeader>Doughnut Chart</CCardHeader>
-          Doughnut Chart
-        </CCardHeader>
         <CCardBody>
           <CChartDoughnut
             datasets={[
               {
-                backgroundColor: [
+                backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
-                  '#41B883',
+                data: [40, 20, 80, 10],
-                  '#E46651',
+              },
-                  '#00D8FF',
-                  '#DD1B16'
-                ],
-                data: [40, 20, 80, 10]
-              }
             ]}
             labels={['VueJs', 'EmberJs', 'ReactJs', 'AngularJs']}
             options={{
               tooltips: {
-                enabled: true
+                enabled: true,
-              }
+              },
             }}
           />
         </CCardBody>
       </CCard>
 
       <CCard className="mb-4">
-        <CCardHeader>
+        <CCardHeader>Line Chart</CCardHeader>
-          Line Chart
-        </CCardHeader>
         <CCardBody>
           <CChartLine
             datasets={[
               {
                 label: 'Data One',
                 backgroundColor: 'rgb(228,102,81,0.9)',
-                data: [30, 39, 10, 50, 30, 70, 35]
+                data: [30, 39, 10, 50, 30, 70, 35],
               },
               {
                 label: 'Data Two',
                 backgroundColor: 'rgb(0,216,255,0.9)',
-                data: [39, 80, 40, 35, 40, 20, 45]
+                data: [39, 80, 40, 35, 40, 20, 45],
-              }
+              },
             ]}
             options={{
               tooltips: {
-                enabled: true
+                enabled: true,
-              }
+              },
             }}
             labels="months"
           />
@@ -99,36 +84,27 @@ const Charts = () => {
       </CCard>
 
       <CCard className="mb-4">
-        <CCardHeader>
+        <CCardHeader>Pie Chart</CCardHeader>
-          Pie Chart
-        </CCardHeader>
         <CCardBody>
           <CChartPie
             datasets={[
               {
-                backgroundColor: [
+                backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
-                  '#41B883',
+                data: [40, 20, 80, 10],
-                  '#E46651',
+              },
-                  '#00D8FF',
-                  '#DD1B16'
-                ],
-                data: [40, 20, 80, 10]
-              }
             ]}
             labels={['VueJs', 'EmberJs', 'ReactJs', 'AngularJs']}
             options={{
               tooltips: {
-                enabled: true
+                enabled: true,
-              }
+              },
             }}
           />
         </CCardBody>
       </CCard>
 
       <CCard className="mb-4">
-        <CCardHeader>
+        <CCardHeader>Polar Area Chart</CCardHeader>
-          Polar Area Chart
-        </CCardHeader>
         <CCardBody>
           <CChartPolarArea
             datasets={[
@@ -139,7 +115,7 @@ const Charts = () => {
                 pointBorderColor: '#fff',
                 pointHoverBackgroundColor: 'rgba(179,181,198,1)',
                 pointHoverBorderColor: 'rgba(179,181,198,1)',
-                data: [65, 59, 90, 81, 56, 55, 40]
+                data: [65, 59, 90, 81, 56, 55, 40],
               },
               {
                 label: 'My Second dataset',
@@ -148,27 +124,22 @@ const Charts = () => {
                 pointBorderColor: '#fff',
                 pointHoverBackgroundColor: 'rgba(255,99,132,1)',
                 pointHoverBorderColor: 'rgba(255,99,132,1)',
-                data: [28, 48, 40, 19, 96, 27, 100]
+                data: [28, 48, 40, 19, 96, 27, 100],
-              }
+              },
             ]}
             options={{
               aspectRatio: 1.5,
               tooltips: {
-                enabled: true
+                enabled: true,
-              }
+              },
             }}
-            labels={[
+            labels={['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running']}
-              'Eating', 'Drinking', 'Sleeping', 'Designing',
-              'Coding', 'Cycling', 'Running'
-            ]}
           />
         </CCardBody>
       </CCard>
 
       <CCard className="mb-4">
-        <CCardHeader>
+        <CCardHeader>Radar Chart</CCardHeader>
-          Radar Chart
-        </CCardHeader>
         <CCardBody>
           <CChartRadar
             datasets={[
@@ -181,7 +152,7 @@ const Charts = () => {
                 pointHoverBackgroundColor: '#fff',
                 pointHoverBorderColor: 'rgba(179,181,198,1)',
                 tooltipLabelColor: 'rgba(179,181,198,1)',
-                data: [65, 59, 90, 81, 56, 55, 40]
+                data: [65, 59, 90, 81, 56, 55, 40],
               },
               {
                 label: '2020',
@@ -192,19 +163,16 @@ const Charts = () => {
                 pointHoverBackgroundColor: '#fff',
                 pointHoverBorderColor: 'rgba(255,99,132,1)',
                 tooltipLabelColor: 'rgba(255,99,132,1)',
-                data: [28, 48, 40, 19, 96, 27, 100]
+                data: [28, 48, 40, 19, 96, 27, 100],
-              }
+              },
             ]}
             options={{
               aspectRatio: 1.5,
               tooltips: {
-                enabled: true
+                enabled: true,
-              }
+              },
             }}
-            labels={[
+            labels={['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running']}
-              'Eating', 'Drinking', 'Sleeping', 'Designing',
-              'Coding', 'Cycling', 'Running'
-            ]}
           />
         </CCardBody>
       </CCard>

src/views/charts/MainChartExample.js

@@ -6,12 +6,12 @@ const brandSuccess = getStyle('success') || '#4dbd74'
 const brandInfo = getStyle('info') || '#20a8d8'
 const brandDanger = getStyle('danger') || '#f86c6b'
 
-const MainChartExample = attributes => {
+const MainChartExample = (attributes) => {
-  const random = (min, max)=>{
+  const random = (min, max) => {
     return Math.floor(Math.random() * (max - min + 1) + min)
   }
 
-  const defaultDatasets = (()=>{
+  const defaultDatasets = (() => {
     let elements = 27
     const data1 = []
     const data2 = []
@@ -28,7 +28,7 @@ const MainChartExample = attributes => {
         borderColor: brandInfo,
         pointHoverBackgroundColor: brandInfo,
         borderWidth: 2,
-        data: data1
+        data: data1,
       },
       {
         label: 'My Second dataset',
@@ -36,7 +36,7 @@ const MainChartExample = attributes => {
         borderColor: brandSuccess,
         pointHoverBackgroundColor: brandSuccess,
         borderWidth: 2,
-        data: data2
+        data: data2,
       },
       {
         label: 'My Third dataset',
@@ -45,46 +45,49 @@ const MainChartExample = attributes => {
         pointHoverBackgroundColor: brandDanger,
         borderWidth: 1,
         borderDash: [8, 5],
-        data: data3
+        data: data3,
-      }
+      },
     ]
   })()
 
-  const defaultOptions = (()=>{
+  const defaultOptions = (() => {
     return {
       maintainAspectRatio: false,
       legend: {
-          display: false
+        display: false,
       },
       scales: {
-          xAxes: [{
+        xAxes: [
+          {
             gridLines: {
-              drawOnChartArea: false
+              drawOnChartArea: false,
-            }
+            },
-          }],
+          },
-          yAxes: [{
+        ],
+        yAxes: [
+          {
             ticks: {
               beginAtZero: true,
               maxTicksLimit: 5,
               stepSize: Math.ceil(250 / 5),
-              max: 250
+              max: 250,
             },
             gridLines: {
-              display: true
+              display: true,
-            }
+            },
-          }]
+          },
+        ],
       },
       elements: {
         point: {
           radius: 0,
           hitRadius: 10,
           hoverRadius: 4,
-            hoverBorderWidth: 3
+          hoverBorderWidth: 3,
+        },
+      },
     }
-        }
+  })()
-      }
-    }
-  )()
 
   // render
   return (
@@ -92,10 +95,38 @@ const MainChartExample = attributes => {
       {...attributes}
       datasets={defaultDatasets}
       options={defaultOptions}
-      labels={['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']}
+      labels={[
+        'Mo',
+        'Tu',
+        'We',
+        'Th',
+        'Fr',
+        'Sa',
+        'Su',
+        'Mo',
+        'Tu',
+        'We',
+        'Th',
+        'Fr',
+        'Sa',
+        'Su',
+        'Mo',
+        'Tu',
+        'We',
+        'Th',
+        'Fr',
+        'Sa',
+        'Su',
+        'Mo',
+        'Tu',
+        'We',
+        'Th',
+        'Fr',
+        'Sa',
+        'Su',
+      ]}
     />
   )
 }
 
-
 export default MainChartExample

src/views/dashboard/Dashboard.js

@@ -29,16 +29,17 @@ const Dashboard = () => {
         <CCardBody>
           <CRow>
             <CCol sm="5">
-              <h4 id="traffic" className="card-title mb-0">Traffic</h4>
+              <h4 id="traffic" className="card-title mb-0">
+                Traffic
+              </h4>
               <div className="small text-muted">November 2017</div>
             </CCol>
             <CCol sm="7" className="d-none d-md-block">
               <CButton color="primary" className="float-end">
-                <CIcon name="cil-cloud-download"/>
+                <CIcon name="cil-cloud-download" />
               </CButton>
               <CButtonGroup className="float-end me-3">
-                {
+                {['Day', 'Month', 'Year'].map((value) => (
-                  ['Day', 'Month', 'Year'].map(value => (
                   <CButton
                     color="outline-secondary"
                     key={value}
@@ -47,80 +48,52 @@ const Dashboard = () => {
                   >
                     {value}
                   </CButton>
-                  ))
+                ))}
-                }
               </CButtonGroup>
             </CCol>
           </CRow>
-          <MainChartExample style={{height: '300px', marginTop: '40px'}}/>
+          <MainChartExample style={{ height: '300px', marginTop: '40px' }} />
         </CCardBody>
         <CCardFooter>
           <CRow className="text-center">
             <CCol md sm="12" className="mb-sm-2 mb-0">
               <div className="text-muted">Visits</div>
               <strong>29.703 Users (40%)</strong>
-              <CProgress
+              <CProgress className="progress-xs mt-2" precision={1} color="success" value={40} />
-                className="progress-xs mt-2"
-                precision={1}
-                color="success"
-                value={40}
-              />
             </CCol>
             <CCol md sm="12" className="mb-sm-2 mb-0 d-md-down-none">
               <div className="text-muted">Unique</div>
               <strong>24.093 Users (20%)</strong>
-              <CProgress
+              <CProgress className="progress-xs mt-2" precision={1} color="info" value={40} />
-                className="progress-xs mt-2"
-                precision={1}
-                color="info"
-                value={40}
-              />
             </CCol>
             <CCol md sm="12" className="mb-sm-2 mb-0">
               <div className="text-muted">Pageviews</div>
               <strong>78.706 Views (60%)</strong>
-              <CProgress
+              <CProgress className="progress-xs mt-2" precision={1} color="warning" value={40} />
-                className="progress-xs mt-2"
-                precision={1}
-                color="warning"
-                value={40}
-              />
             </CCol>
             <CCol md sm="12" className="mb-sm-2 mb-0">
               <div className="text-muted">New Users</div>
               <strong>22.123 Users (80%)</strong>
-              <CProgress
+              <CProgress className="progress-xs mt-2" precision={1} color="danger" value={40} />
-                className="progress-xs mt-2"
-                precision={1}
-                color="danger"
-                value={40}
-              />
             </CCol>
             <CCol md sm="12" className="mb-sm-2 mb-0 d-md-down-none">
               <div className="text-muted">Bounce Rate</div>
               <strong>Average Rate (40.15%)</strong>
-              <CProgress
+              <CProgress className="progress-xs mt-2" precision={1} value={40} />
-                className="progress-xs mt-2"
-                precision={1}
-                value={40}
-              />
             </CCol>
           </CRow>
         </CCardFooter>
       </CCard>
 
-      <WidgetsBrand withCharts/>
+      <WidgetsBrand withCharts />
 
       <CRow>
         <CCol xs>
           <CCard className="mb-4">
-            <CCardHeader>
+            <CCardHeader>Traffic {' & '} Sales</CCardHeader>
-              Traffic {' & '} Sales
-            </CCardHeader>
             <CCardBody>
               <CRow>
                 <CCol xs="12" md="6" xl="6">
-
                   <CRow>
                     <CCol sm="6">
                       <CCallout color="info">
@@ -142,9 +115,7 @@ const Dashboard = () => {
 
                   <div className="progress-group mb-4">
                     <div className="progress-group-prepend">
-                      <span className="text-medium-emphasis small">
+                      <span className="text-medium-emphasis small">Monday</span>
-                        Monday
-                      </span>
                     </div>
                     <div className="progress-group-bars">
                       <CProgress className="progress-xs" color="info" value="34" />
@@ -153,9 +124,7 @@ const Dashboard = () => {
                   </div>
                   <div className="progress-group mb-4">
                     <div className="progress-group-prepend">
-                      <span className="text-medium-emphasis small">
+                      <span className="text-medium-emphasis small">Tuesday</span>
-                      Tuesday
-                      </span>
                     </div>
                     <div className="progress-group-bars">
                       <CProgress className="progress-xs" color="info" value="56" />
@@ -164,9 +133,7 @@ const Dashboard = () => {
                   </div>
                   <div className="progress-group mb-4">
                     <div className="progress-group-prepend">
-                      <span className="text-medium-emphasis small">
+                      <span className="text-medium-emphasis small">Wednesday</span>
-                      Wednesday
-                      </span>
                     </div>
                     <div className="progress-group-bars">
                       <CProgress className="progress-xs" color="info" value="12" />
@@ -175,9 +142,7 @@ const Dashboard = () => {
                   </div>
                   <div className="progress-group mb-4">
                     <div className="progress-group-prepend">
-                      <span className="text-medium-emphasis small">
+                      <span className="text-medium-emphasis small">Thursday</span>
-                      Thursday
-                      </span>
                     </div>
                     <div className="progress-group-bars">
                       <CProgress className="progress-xs" color="info" value="43" />
@@ -186,9 +151,7 @@ const Dashboard = () => {
                   </div>
                   <div className="progress-group mb-4">
                     <div className="progress-group-prepend">
-                      <span className="text-medium-emphasis small">
+                      <span className="text-medium-emphasis small">Friday</span>
-                      Friday
-                      </span>
                     </div>
                     <div className="progress-group-bars">
                       <CProgress className="progress-xs" color="info" value="22" />
@@ -197,9 +160,7 @@ const Dashboard = () => {
                   </div>
                   <div className="progress-group mb-4">
                     <div className="progress-group-prepend">
-                      <span className="text-medium-emphasis small">
+                      <span className="text-medium-emphasis small">Saturday</span>
-                      Saturday
-                      </span>
                     </div>
                     <div className="progress-group-bars">
                       <CProgress className="progress-xs" color="info" value="53" />
@@ -208,9 +169,7 @@ const Dashboard = () => {
                   </div>
                   <div className="progress-group mb-4">
                     <div className="progress-group-prepend">
-                      <span className="text-medium-emphasis small">
+                      <span className="text-medium-emphasis small">Sunday</span>
-                      Sunday
-                      </span>
                     </div>
                     <div className="progress-group-bars">
                       <CProgress className="progress-xs" color="info" value="9" />
@@ -220,7 +179,6 @@ const Dashboard = () => {
                 </CCol>
 
                 <CCol xs="12" md="6" xl="6">
-
                   <CRow>
                     <CCol sm="6">
                       <CCallout color="warning">
@@ -265,7 +223,9 @@ const Dashboard = () => {
                     <div className="progress-group-header">
                       <CIcon className="icon icon-lg me-2" name="cib-google" />
                       <span>Organic Search</span>
-                      <span className="ms-auto font-semibold">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" />
@@ -275,7 +235,9 @@ const Dashboard = () => {
                     <div className="progress-group-header">
                       <CIcon name="cib-facebook" className="icon icon-lg me-2" />
                       <span>Facebook</span>
-                      <span className="ms-auto font-semibold">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" />
@@ -285,7 +247,9 @@ const Dashboard = () => {
                     <div className="progress-group-header">
                       <CIcon name="cib-twitter" className="icon icon-lg me-2" />
                       <span>Twitter</span>
-                      <span className="ms-auto font-semibold">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" />
@@ -295,7 +259,9 @@ const Dashboard = () => {
                     <div className="progress-group-header">
                       <CIcon name="cib-linkedin" className="icon icon-lg me-2" />
                       <span>LinkedIn</span>
-                      <span className="ms-auto font-semibold">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" />
@@ -309,7 +275,9 @@ const Dashboard = () => {
               <table className="table table-hover table-outline mb-0 d-none d-sm-table">
                 <thead className="thead-light">
                   <tr>
-                    <th className="text-center"><CIcon name="cil-people" /></th>
+                    <th className="text-center">
+                      <CIcon name="cil-people" />
+                    </th>
                     <th>User</th>
                     <th className="text-center">Country</th>
                     <th>Usage</th>
@@ -320,7 +288,7 @@ const Dashboard = () => {
                 <tbody>
                   <tr>
                     <td className="text-center">
-                      <CAvatar image="avatars/1.jpg" status="success"/>
+                      <CAvatar image="avatars/1.jpg" status="success" />
                     </td>
                     <td>
                       <div>Yiorgos Avraamu</div>
@@ -352,12 +320,11 @@ const Dashboard = () => {
                   </tr>
                   <tr>
                     <td className="text-center">
-                      <CAvatar image="avatars/2.jpg" status="danger"/>
+                      <CAvatar image="avatars/2.jpg" status="danger" />
                     </td>
                     <td>
                       <div>Avram Tarasios</div>
                       <div className="small text-muted">
-
                         <span>Recurring</span> | Registered: Jan 1, 2015
                       </div>
                     </td>
@@ -385,7 +352,7 @@ const Dashboard = () => {
                   </tr>
                   <tr>
                     <td className="text-center">
-                      <CAvatar image="avatars/3.jpg" status="warning"/>
+                      <CAvatar image="avatars/3.jpg" status="warning" />
                     </td>
                     <td>
                       <div>Quintin Ed</div>
@@ -417,7 +384,7 @@ const Dashboard = () => {
                   </tr>
                   <tr>
                     <td className="text-center">
-                      <CAvatar image="avatars/4.jpg" status="secondary"/>
+                      <CAvatar image="avatars/4.jpg" status="secondary" />
                     </td>
                     <td>
                       <div>Enéas Kwadwo</div>
@@ -449,7 +416,7 @@ const Dashboard = () => {
                   </tr>
                   <tr>
                     <td className="text-center">
-                      <CAvatar image="avatars/5.jpg" status="success"/>
+                      <CAvatar image="avatars/5.jpg" status="success" />
                     </td>
                     <td>
                       <div>Agapetus Tadeáš</div>
@@ -472,7 +439,7 @@ const Dashboard = () => {
                       <CProgress className="progress-xs" color="info" value="22" />
                     </td>
                     <td className="text-center">
-                      <CIcon height={25} name="cib-google-pay"/>
+                      <CIcon height={25} name="cib-google-pay" />
                     </td>
                     <td>
                       <div className="small text-muted">Last login</div>
@@ -481,7 +448,7 @@ const Dashboard = () => {
                   </tr>
                   <tr>
                     <td className="text-center">
-                      <CAvatar image="avatars/6.jpg" status="danger"/>
+                      <CAvatar image="avatars/6.jpg" status="danger" />
                     </td>
                     <td>
                       <div>Friderik Dávid</div>
@@ -513,7 +480,6 @@ const Dashboard = () => {
                   </tr>
                 </tbody>
               </table>
-
             </CCardBody>
           </CCard>
         </CCol>

src/views/icons/brands/Brands.js

@@ -8,10 +8,10 @@ const toKebabCase = (str) => {
   return str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase()
 }
 
-export const getIconsView = iconset => {
+export const getIconsView = (iconset) => {
   return Object.entries(iconset).map(([name, value]) => (
     <CCol className="mb-5" xs="6" sm="4" md="3" xl="2" key={name}>
-      <CIcon content={value} size="2xl"/>
+      <CIcon content={value} size="2xl" />
       <div>{toKebabCase(name)}</div>
     </CCol>
   ))
@@ -22,12 +22,10 @@ const CoreUIIcons = () => {
     <CCard className="mb-4">
       <CCardHeader>
         Brand Icons
-        <DocsLink href="https://github.com/coreui/coreui-icons" text="GitHub"/>
+        <DocsLink href="https://github.com/coreui/coreui-icons" text="GitHub" />
       </CCardHeader>
       <CCardBody>
-        <CRow className="text-center">
+        <CRow className="text-center">{getIconsView(brandSet)}</CRow>
-          {getIconsView(brandSet)}
-        </CRow>
       </CCardBody>
     </CCard>
   )

src/views/icons/coreui-icons/CoreUIIcons.js

@@ -9,12 +9,10 @@ const CoreUIIcons = () => {
     <CCard className="mb-4">
       <CCardHeader>
         Free Icons / as CIcon{' '}
-        <DocsLink href="https://github.com/coreui/coreui-icons" text="GitHub"/>
+        <DocsLink href="https://github.com/coreui/coreui-icons" text="GitHub" />
       </CCardHeader>
       <CCardBody>
-        <CRow className="text-center">
+        <CRow className="text-center">{getIconsView(freeSet)}</CRow>
-          {getIconsView(freeSet)}
-        </CRow>
       </CCardBody>
     </CCard>
   )

src/views/icons/flags/Flags.js

@@ -9,12 +9,10 @@ const CoreUIIcons = () => {
     <CCard className="mb-4">
       <CCardHeader>
         Flag Icons
-        <DocsLink href="https://github.com/coreui/coreui-icons" text="GitHub"/>
+        <DocsLink href="https://github.com/coreui/coreui-icons" text="GitHub" />
       </CCardHeader>
       <CCardBody>
-        <CRow className="text-center">
+        <CRow className="text-center">{getIconsView(flagSet)}</CRow>
-          {getIconsView(flagSet)}
-        </CRow>
       </CCardBody>
     </CCard>
   )

src/views/icons/index.js

@@ -1,7 +1,5 @@
-import CoreUIIcons from './coreui-icons';
+import CoreUIIcons from './coreui-icons'
-import Flags from './flags';
+import Flags from './flags'
-import Brands from './brands';
+import Brands from './brands'
 
-export {
+export { CoreUIIcons, Flags, Brands }
-  CoreUIIcons, Flags, Brands
-};

src/views/notifications/alerts/Alerts.js

@@ -23,33 +23,17 @@ const Alerts = () => {
           <CCard className="mb-4">
             <CCardHeader>
               Alerts
-              <DocsLink name="CAlert"/>
+              <DocsLink name="CAlert" />
             </CCardHeader>
             <CCardBody>
-              <CAlert color="primary">
+              <CAlert color="primary">This is a primary alert — check it out!</CAlert>
-                This is a primary alert — check it out!
+              <CAlert color="secondary">This is a secondary alert — check it out!</CAlert>
-              </CAlert>
+              <CAlert color="success">This is a success alert — check it out!</CAlert>
-              <CAlert color="secondary">
+              <CAlert color="danger">This is a danger alert — check it out!</CAlert>
-                This is a secondary alert — check it out!
+              <CAlert color="warning">This is a warning alert — check it out!</CAlert>
-              </CAlert>
+              <CAlert color="info">This is a info alert — check it out!</CAlert>
-              <CAlert color="success">
+              <CAlert color="light">This is a light alert — check it out!</CAlert>
-                This is a success alert — check it out!
+              <CAlert color="dark">This is a dark alert — check it out!</CAlert>
-              </CAlert>
-              <CAlert color="danger">
-                This is a danger alert — check it out!
-              </CAlert>
-              <CAlert color="warning">
-                This is a warning alert — check it out!
-              </CAlert>
-              <CAlert color="info">
-                This is a info alert — check it out!
-              </CAlert>
-              <CAlert color="light">
-                This is a light alert — check it out!
-              </CAlert>
-              <CAlert color="dark">
-                This is a dark alert — check it out!
-              </CAlert>
             </CCardBody>
           </CCard>
         </CCol>
@@ -57,56 +41,51 @@ const Alerts = () => {
           <CCard className="mb-4">
             <CCardHeader>
               Alerts
-              <small> use <code>.alert-link</code> to provide links</small>
+              <small>
+                {' '}
+                use <code>.alert-link</code> to provide links
+              </small>
             </CCardHeader>
             <CCardBody>
               <CAlert color="primary">
                 {/*eslint-disable-next-line*/}
                 This is a primary alert with&nbsp;
-                <CLink className="alert-link">an example link</CLink>.
+                <CLink className="alert-link">an example link</CLink>. Give it a click if you like.
-                Give it a click if you like.
               </CAlert>
               <CAlert color="secondary">
                 {/*eslint-disable-next-line*/}
                 This is a secondary alert with&nbsp;
-                <CLink className="alert-link">an example link</CLink>.
+                <CLink className="alert-link">an example link</CLink>. Give it a click if you like.
-                Give it a click if you like.
               </CAlert>
               <CAlert color="success">
                 {/*eslint-disable-next-line*/}
                 This is a success alert with&nbsp;
-                <CLink className="alert-link">an example link</CLink>.
+                <CLink className="alert-link">an example link</CLink>. Give it a click if you like.
-                Give it a click if you like.
               </CAlert>
               <CAlert color="danger">
                 {/*eslint-disable-next-line*/}
                 This is a danger alert with&nbsp;
-                <CLink className="alert-link">an example link</CLink>.
+                <CLink className="alert-link">an example link</CLink>. Give it a click if you like.
-                Give it a click if you like.
               </CAlert>
               <CAlert color="warning">
                 {/*eslint-disable-next-line*/}
                 This is a warning alert with&nbsp;
-                <CLink className="alert-link">an example link</CLink>.
+                <CLink className="alert-link">an example link</CLink>. Give it a click if you like.
-                Give it a click if you like.
               </CAlert>
               <CAlert color="info">
                 {/*eslint-disable-next-line*/}
                 This is a info alert with&nbsp;
-                <CLink className="alert-link">an example link</CLink>.
+                <CLink className="alert-link">an example link</CLink>. Give it a click if you like.
-                Give it a click if you like.
               </CAlert>
               <CAlert color="light">
                 {/*eslint-disable-next-line*/}
                 This is a light alert with&nbsp;
-                <CLink className="alert-link">an example link</CLink>.
+                <CLink className="alert-link">an example link</CLink>. Give it a click if you like.
-                Give it a click if you like.
               </CAlert>
               <CAlert color="dark">
                 {/*eslint-disable-next-line*/}
                 This is a dark alert with&nbsp;
-                <CLink className="alert-link">an example link</CLink>.
+                <CLink className="alert-link">an example link</CLink>. Give it a click if you like.
-                Give it a click if you like.
               </CAlert>
             </CCardBody>
           </CCard>
@@ -123,13 +102,14 @@ const Alerts = () => {
               <CAlert color="success">
                 <CAlertHeading>Well done!</CAlertHeading>
                 <p>
-                  Aww yeah, you successfully read this important alert message. This example text is going
+                  Aww yeah, you successfully read this important alert message. This example text is
-                  to run a bit longer so that you can see how spacing within an alert works with this kind
+                  going to run a bit longer so that you can see how spacing within an alert works
-                  of content.
+                  with this kind of content.
                 </p>
                 <hr />
                 <p className="mb-0">
-                  Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
+                  Whenever you need to, be sure to use margin utilities to keep things nice and
+                  tidy.
                 </p>
               </CAlert>
             </CCardBody>
@@ -142,18 +122,10 @@ const Alerts = () => {
               <small> dismissing</small>
             </CCardHeader>
             <CCardBody>
-              <CAlert
+              <CAlert color="info" dismissible>
-                color="info"
-                dismissible
-              >
                 I am an dismissible alert!
               </CAlert>
-              <CAlert
+              <CAlert color="warning" show={visible} closeButton visible={setVisible}>
-                color="warning"
-                show={visible}
-                closeButton
-                visible={setVisible}
-              >
                 I will be closed in {visible} seconds!
                 <CProgress
                   striped

src/views/notifications/badges/Badges.js

@@ -7,7 +7,7 @@ import {
   CCardHeader,
   CCol,
   CBadge,
-  CRow
+  CRow,
 } from '@coreui/react-ts'
 import { DocsLink } from 'src/reusable'
 
@@ -18,19 +18,34 @@ const Badges = () => {
         <CCard className="mb-4">
           <CCardHeader>
             Badges
-            <DocsLink name="CBadge"/>
+            <DocsLink name="CBadge" />
           </CCardHeader>
           <CCardBody>
-            <h1>Example heading <CBadge color="secondary">New</CBadge></h1>
+            <h1>
-            <h2>Example heading <CBadge color="secondary">New</CBadge></h2>
+              Example heading <CBadge color="secondary">New</CBadge>
-            <h3>Example heading <CBadge color="secondary">New</CBadge></h3>
+            </h1>
-            <h4>Example heading <CBadge color="secondary">New</CBadge></h4>
+            <h2>
-            <h5>Example heading <CBadge color="secondary">New</CBadge></h5>
+              Example heading <CBadge color="secondary">New</CBadge>
-            <h6>Example heading <CBadge color="secondary">New</CBadge></h6>
+            </h2>
+            <h3>
+              Example heading <CBadge color="secondary">New</CBadge>
+            </h3>
+            <h4>
+              Example heading <CBadge color="secondary">New</CBadge>
+            </h4>
+            <h5>
+              Example heading <CBadge color="secondary">New</CBadge>
+            </h5>
+            <h6>
+              Example heading <CBadge color="secondary">New</CBadge>
+            </h6>
           </CCardBody>
           <CCardFooter>
             <CButton color="secondary">
-              Notifications <CBadge color="primary" shape="rounded-pill" style={{ position: 'static' }}>9</CBadge>
+              Notifications{' '}
+              <CBadge color="primary" shape="rounded-pill" style={{ position: 'static' }}>
+                9
+              </CBadge>
             </CButton>
           </CCardFooter>
         </CCard>
@@ -42,14 +57,30 @@ const Badges = () => {
             <small> contextual variations</small>
           </CCardHeader>
           <CCardBody>
-            <CBadge className="me-1" color="primary">Primary</CBadge>
+            <CBadge className="me-1" color="primary">
-            <CBadge className="me-1" color="secondary">Secondary</CBadge>
+              Primary
-            <CBadge className="me-1" color="success">Success</CBadge>
+            </CBadge>
-            <CBadge className="me-1" color="danger">Danger</CBadge>
+            <CBadge className="me-1" color="secondary">
-            <CBadge className="me-1" color="warning">Warning</CBadge>
+              Secondary
-            <CBadge className="me-1" color="info">Info</CBadge>
+            </CBadge>
-            <CBadge className="me-1" color="light">Light</CBadge>
+            <CBadge className="me-1" color="success">
-            <CBadge className="me-1" color="dark">Dark</CBadge>
+              Success
+            </CBadge>
+            <CBadge className="me-1" color="danger">
+              Danger
+            </CBadge>
+            <CBadge className="me-1" color="warning">
+              Warning
+            </CBadge>
+            <CBadge className="me-1" color="info">
+              Info
+            </CBadge>
+            <CBadge className="me-1" color="light">
+              Light
+            </CBadge>
+            <CBadge className="me-1" color="dark">
+              Dark
+            </CBadge>
           </CCardBody>
         </CCard>
         <CCard className="mb-4">
@@ -58,14 +89,30 @@ const Badges = () => {
             <small> pill badges</small>
           </CCardHeader>
           <CCardBody>
-            <CBadge className="me-1" color="primary" shape="rounded-pill">Primary</CBadge>
+            <CBadge className="me-1" color="primary" shape="rounded-pill">
-            <CBadge className="me-1" color="secondary" shape="rounded-pill">Secondary</CBadge>
+              Primary
-            <CBadge className="me-1" color="success" shape="rounded-pill">Success</CBadge>
+            </CBadge>
-            <CBadge className="me-1" color="danger" shape="rounded-pill">Danger</CBadge>
+            <CBadge className="me-1" color="secondary" shape="rounded-pill">
-            <CBadge className="me-1" color="warning" shape="rounded-pill">Warning</CBadge>
+              Secondary
-            <CBadge className="me-1" color="info" shape="rounded-pill">Info</CBadge>
+            </CBadge>
-            <CBadge className="me-1" color="light" shape="rounded-pill">Light</CBadge>
+            <CBadge className="me-1" color="success" shape="rounded-pill">
-            <CBadge className="me-1" color="dark" shape="rounded-pill">Dark</CBadge>
+              Success
+            </CBadge>
+            <CBadge className="me-1" color="danger" shape="rounded-pill">
+              Danger
+            </CBadge>
+            <CBadge className="me-1" color="warning" shape="rounded-pill">
+              Warning
+            </CBadge>
+            <CBadge className="me-1" color="info" shape="rounded-pill">
+              Info
+            </CBadge>
+            <CBadge className="me-1" color="light" shape="rounded-pill">
+              Light
+            </CBadge>
+            <CBadge className="me-1" color="dark" shape="rounded-pill">
+              Dark
+            </CBadge>
           </CCardBody>
         </CCard>
         <CCard className="mb-4">
@@ -74,14 +121,30 @@ const Badges = () => {
             <small> square badges</small>
           </CCardHeader>
           <CCardBody>
-            <CBadge className="me-1" color="primary" shape="rounded-0">Primary</CBadge>
+            <CBadge className="me-1" color="primary" shape="rounded-0">
-            <CBadge className="me-1" color="secondary" shape="rounded-0">Secondary</CBadge>
+              Primary
-            <CBadge className="me-1" color="success" shape="rounded-0">Success</CBadge>
+            </CBadge>
-            <CBadge className="me-1" color="danger" shape="rounded-0">Danger</CBadge>
+            <CBadge className="me-1" color="secondary" shape="rounded-0">
-            <CBadge className="me-1" color="warning" shape="rounded-0">Warning</CBadge>
+              Secondary
-            <CBadge className="me-1" color="info" shape="rounded-0">Info</CBadge>
+            </CBadge>
-            <CBadge className="me-1" color="light" shape="rounded-0">Light</CBadge>
+            <CBadge className="me-1" color="success" shape="rounded-0">
-            <CBadge className="me-1" color="dark" shape="rounded-0">Dark</CBadge>
+              Success
+            </CBadge>
+            <CBadge className="me-1" color="danger" shape="rounded-0">
+              Danger
+            </CBadge>
+            <CBadge className="me-1" color="warning" shape="rounded-0">
+              Warning
+            </CBadge>
+            <CBadge className="me-1" color="info" shape="rounded-0">
+              Info
+            </CBadge>
+            <CBadge className="me-1" color="light" shape="rounded-0">
+              Light
+            </CBadge>
+            <CBadge className="me-1" color="dark" shape="rounded-0">
+              Dark
+            </CBadge>
           </CCardBody>
         </CCard>
       </CCol>

src/views/notifications/index.js

@@ -1,8 +1,6 @@
-import Alerts from './Alerts';
+import Alerts from './Alerts'
-import Badges from './Badges';
+import Badges from './Badges'
-import Modals from './Modals';
+import Modals from './Modals'
-import Toaster from './Toaster';
+import Toaster from './Toaster'
 
-export {
+export { Alerts, Badges, Modals, Toaster }
-  Alerts, Badges, Modals, Toaster
-};

src/views/notifications/modals/Modals.js

@@ -10,12 +10,11 @@ import {
   CModalFooter,
   CModalHeader,
   CModalTitle,
-  CRow
+  CRow,
 } from '@coreui/react-ts'
 import { DocsLink } from 'src/reusable'
 
 const Modals = () => {
-
   const [modal, setModal] = useState(true)
   const [large, setLarge] = useState(false)
   const [small, setSmall] = useState(false)
@@ -31,82 +30,79 @@ const Modals = () => {
         <CCard className="mb-4">
           <CCardHeader>
             Bootstrap Modals
-            <DocsLink name="CModal"/>
+            <DocsLink name="CModal" />
           </CCardHeader>
           <CCardBody>
-            <CButton
+            <CButton onClick={() => setModal(!modal)} className="me-1">
-              onClick={() => setModal(!modal)}
+              Launch demo modal
-              className="me-1"
+            </CButton>
-            >Launch demo modal</CButton>
             <CButton onClick={() => setLarge(!large)} className="me-1">
               Launch large modal
             </CButton>
             <CButton onClick={() => setSmall(!large)} className="me-1">
               Launch small modal
             </CButton>
-            <CModal
+            <CModal visible={modal} onClose={setModal}>
-              visible={modal}
-              onClose={setModal}
-            >
               <CModalHeader closeButton>
                 <CModalTitle>Modal title</CModalTitle>
               </CModalHeader>
               <CModalBody>
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
-                et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
-                aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+                exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
-                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+                irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-                culpa qui officia deserunt mollit anim id est laborum.
+                pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
+                deserunt mollit anim id est laborum.
               </CModalBody>
               <CModalFooter>
                 <CButton color="primary">Do Something</CButton>{' '}
-                <CButton
+                <CButton color="secondary" onClick={() => setModal(false)}>
-                  color="secondary"
+                  Cancel
-                  onClick={() => setModal(false)}
+                </CButton>
-                >Cancel</CButton>
               </CModalFooter>
             </CModal>
 
-
+            <CModal visible={large} onClose={() => setLarge(!large)} size="lg">
-            <CModal
-              visible={large}
-              onClose={() => setLarge(!large)}
-              size="lg"
-            >
               <CModalHeader closeButton>
                 <CModalTitle>Modal title</CModalTitle>
               </CModalHeader>
               <CModalBody>
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
-                et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
-                aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+                exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
-                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+                irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-                culpa qui officia deserunt mollit anim id est laborum.
+                pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
+                deserunt mollit anim id est laborum.
               </CModalBody>
               <CModalFooter>
-                <CButton color="primary" onClick={() => setLarge(!large)}>Do Something</CButton>{' '}
+                <CButton color="primary" onClick={() => setLarge(!large)}>
-                <CButton color="secondary" onClick={() => setLarge(!large)}>Cancel</CButton>
+                  Do Something
+                </CButton>{' '}
+                <CButton color="secondary" onClick={() => setLarge(!large)}>
+                  Cancel
+                </CButton>
               </CModalFooter>
             </CModal>
 
-            <CModal
+            <CModal visible={small} onClose={() => setSmall(!small)} size="sm">
-              visible={small}
-              onClose={() => setSmall(!small)}
-              size="sm"
-            >
               <CModalHeader closeButton>
                 <CModalTitle>Modal title</CModalTitle>
               </CModalHeader>
               <CModalBody>
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
-                et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
-                aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+                exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
-                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+                irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-                culpa qui officia deserunt mollit anim id est laborum.
+                pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
+                deserunt mollit anim id est laborum.
               </CModalBody>
               <CModalFooter>
-                <CButton color="primary" onClick={() => setSmall(!small)}>Do Something</CButton>{' '}
+                <CButton color="primary" onClick={() => setSmall(!small)}>
-                <CButton color="secondary" onClick={() => setSmall(!small)}>Cancel</CButton>
+                  Do Something
+                </CButton>{' '}
+                <CButton color="secondary" onClick={() => setSmall(!small)}>
+                  Cancel
+                </CButton>
               </CModalFooter>
             </CModal>
 
@@ -115,25 +111,30 @@ const Modals = () => {
             <CButton color="primary" onClick={() => setPrimary(!primary)} className="me-1">
               Primary modal
             </CButton>
-            <CButton color="success" onClick={() => setSuccess(!success)} className="me-1">Success modal</CButton>
+            <CButton color="success" onClick={() => setSuccess(!success)} className="me-1">
-            <CButton color="warning" onClick={() => setWarning(!warning)} className="me-1">Warning modal</CButton>
+              Success modal
-            <CButton color="danger" onClick={() => setDanger(!danger)} className="me-1">Danger modal</CButton>
+            </CButton>
-            <CButton color="info" onClick={() => setInfo(!info)} className="me-1">Info modal</CButton>
+            <CButton color="warning" onClick={() => setWarning(!warning)} className="me-1">
+              Warning modal
+            </CButton>
+            <CButton color="danger" onClick={() => setDanger(!danger)} className="me-1">
+              Danger modal
+            </CButton>
+            <CButton color="info" onClick={() => setInfo(!info)} className="me-1">
+              Info modal
+            </CButton>
 
-            <CModal
+            <CModal visible={primary} onClose={() => setPrimary(!primary)} color="primary">
-              visible={primary}
-              onClose={() => setPrimary(!primary)}
-              color="primary"
-            >
               <CModalHeader closeButton>
                 <CModalTitle>Modal title</CModalTitle>
               </CModalHeader>
               <CModalBody>
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
-                et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
-                aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+                exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
-                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+                irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-                culpa qui officia deserunt mollit anim id est laborum.
+                pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
+                deserunt mollit anim id est laborum.
               </CModalBody>
               <CModalFooter>
                 <CButton color="primary" onClick={() => setPrimary(!primary)}>
@@ -145,90 +146,93 @@ const Modals = () => {
               </CModalFooter>
             </CModal>
 
-            <CModal
+            <CModal visible={success} onClose={() => setSuccess(!success)} color="success">
-              visible={success}
-              onClose={() => setSuccess(!success)}
-              color="success"
-            >
               <CModalHeader closeButton>
                 <CModalTitle>Modal title</CModalTitle>
               </CModalHeader>
               <CModalBody>
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
-                et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
-                aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+                exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
-                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+                irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-                culpa qui officia deserunt mollit anim id est laborum.
+                pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
+                deserunt mollit anim id est laborum.
               </CModalBody>
               <CModalFooter>
-                <CButton color="success" onClick={() => setSuccess(!success)}>Do Something</CButton>{' '}
+                <CButton color="success" onClick={() => setSuccess(!success)}>
-                <CButton color="secondary" onClick={() => setSuccess(!success)}>Cancel</CButton>
+                  Do Something
+                </CButton>{' '}
+                <CButton color="secondary" onClick={() => setSuccess(!success)}>
+                  Cancel
+                </CButton>
               </CModalFooter>
             </CModal>
 
-            <CModal
+            <CModal visible={warning} onClose={() => setWarning(!warning)} color="warning">
-              visible={warning}
-              onClose={() => setWarning(!warning)}
-              color="warning"
-            >
               <CModalHeader closeButton>
                 <CModalTitle>Modal title</CModalTitle>
               </CModalHeader>
               <CModalBody>
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
-                et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
-                aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+                exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
-                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+                irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-                culpa qui officia deserunt mollit anim id est laborum.
+                pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
+                deserunt mollit anim id est laborum.
               </CModalBody>
               <CModalFooter>
-                <CButton color="warning" onClick={() => setWarning(!warning)}>Do Something</CButton>{' '}
+                <CButton color="warning" onClick={() => setWarning(!warning)}>
-                <CButton color="secondary" onClick={() => setWarning(!warning)}>Cancel</CButton>
+                  Do Something
+                </CButton>{' '}
+                <CButton color="secondary" onClick={() => setWarning(!warning)}>
+                  Cancel
+                </CButton>
               </CModalFooter>
             </CModal>
 
-            <CModal
+            <CModal visible={danger} onClose={() => setDanger(!danger)} color="danger">
-              visible={danger}
-              onClose={() => setDanger(!danger)}
-              color="danger"
-            >
               <CModalHeader closeButton>
                 <CModalTitle>Modal title</CModalTitle>
               </CModalHeader>
               <CModalBody>
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
-                et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
-                aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+                exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
-                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+                irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-                culpa qui officia deserunt mollit anim id est laborum.
+                pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
+                deserunt mollit anim id est laborum.
               </CModalBody>
               <CModalFooter>
-                <CButton color="danger" onClick={() => setDanger(!danger)}>Do Something</CButton>{' '}
+                <CButton color="danger" onClick={() => setDanger(!danger)}>
-                <CButton color="secondary" onClick={() => setDanger(!danger)}>Cancel</CButton>
+                  Do Something
+                </CButton>{' '}
+                <CButton color="secondary" onClick={() => setDanger(!danger)}>
+                  Cancel
+                </CButton>
               </CModalFooter>
             </CModal>
 
-            <CModal
+            <CModal visible={info} onClose={() => setInfo(!info)} color="info">
-              visible={info}
-              onClose={() => setInfo(!info)}
-              color="info"
-            >
               <CModalHeader closeButton>
                 <CModalTitle>Modal title</CModalTitle>
               </CModalHeader>
               <CModalBody>
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
-                et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
-                aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+                exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
-                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+                irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-                culpa qui officia deserunt mollit anim id est laborum.
+                pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
+                deserunt mollit anim id est laborum.
               </CModalBody>
               <CModalFooter>
-                <CButton color="secondary" onClick={() => setInfo(!info)}>Cancel</CButton>
+                <CButton color="secondary" onClick={() => setInfo(!info)}>
-                <CButton color="info" onClick={() => setInfo(!info)}>Do Something</CButton>{' '}
+                  Cancel
+                </CButton>
+                <CButton color="info" onClick={() => setInfo(!info)}>
+                  Do Something
+                </CButton>{' '}
               </CModalFooter>
             </CModal>
-
           </CCardBody>
         </CCard>
       </CCol>

src/views/notifications/toaster/Toaster.js

@@ -15,12 +15,11 @@ import {
   CToast,
   CToastBody,
   CToastHeader,
-  CToaster
+  CToaster,
 } from '@coreui/react-ts'
 import { DocsLink } from 'src/reusable'
 
 const Toaster = () => {
-
   const placements = [
     'top-start',
     'top-center',
@@ -30,13 +29,13 @@ const Toaster = () => {
     'middle-end',
     'bottom-start',
     'bottom-center',
-    'bottom-end'
+    'bottom-end',
   ]
 
   const [toasts, setToasts] = useState([
-    { placement: 'static'},
+    { placement: 'static' },
-    { placement: 'static'},
+    { placement: 'static' },
-    { placement: 'top-right', autohide: 3000 }
+    { placement: 'top-right', autohide: 3000 },
   ])
 
   const [placement, setPlacement] = useState('top-right')
@@ -46,14 +45,10 @@ const Toaster = () => {
   const [fade, setFade] = useState(true)
 
   const addToast = () => {
-    setToasts([
+    setToasts([...toasts, { placement, autohide: autohide && autohideValue, closeButton, fade }])
-      ...toasts,
-      { placement, autohide: autohide && autohideValue, closeButton, fade }
-    ])
   }
 
-
+  const toasters = (() => {
-  const toasters = (()=>{
     return toasts.reduce((toasters, toast) => {
       toasters[toast.placement] = toasters[toast.placement] || []
       toasters[toast.placement].push(toast)
@@ -61,12 +56,11 @@ const Toaster = () => {
     }, {})
   })()
 
-
   return (
     <CCard className="mb-4">
       <CCardHeader>
         Toasts.
-        <DocsLink name="-Toast"/>
+        <DocsLink name="-Toast" />
       </CCardHeader>
       <CCardBody>
         <CContainer>
@@ -79,39 +73,40 @@ const Toaster = () => {
                   <CFormCheck
                     id="autohide"
                     checked={autohide}
-                    onChange={e => { setAutohide(e.target.checked) }}
+                    onChange={(e) => {
+                      setAutohide(e.target.checked)
+                    }}
                     custom
                   />
                   <CFormLabel variant="custom-checkbox" htmlFor="autohide">
                     Autohide of the toast
                   </CFormLabel>
                 </div>
-                {
+                {autohide && (
-                  autohide &&
                   <div className="my-2">
                     <CFormLabel htmlFor="ccyear">Time to autohide</CFormLabel>
                     <CFormControl
                       type="number"
                       value={autohideValue}
-                      onChange={e => {
+                      onChange={(e) => {
                         setAutohideValue(Number(e.target.value))
                       }}
                     />
                   </div>
-                }
+                )}
 
                 <div className="my-2">
                   <CFormLabel htmlFor="ccyear">Placement</CFormLabel>
                   <CFormSelect
                     className="form-control"
                     value={placement}
-                    onChange={e => {setPlacement(e.target.value)}}
+                    onChange={(e) => {
+                      setPlacement(e.target.value)
+                    }}
                   >
-                    {
+                    {placements.map((placement, i) => (
-                      placements.map((placement, i)=>(
                       <option key={i}>{placement}</option>
-                      ))
+                    ))}
-                    }
                   </CFormSelect>
                 </div>
 
@@ -119,10 +114,14 @@ const Toaster = () => {
                   <CFormCheck
                     id="fade"
                     checked={fade}
-                    onChange={e => { setFade(e.target.checked) }}
+                    onChange={(e) => {
+                      setFade(e.target.checked)
+                    }}
                     custom
                   />
-                  <CFormLabel variant="custom-checkbox" htmlFor="fade">fade</CFormLabel>
+                  <CFormLabel variant="custom-checkbox" htmlFor="fade">
+                    fade
+                  </CFormLabel>
                 </div>
 
                 <div variant="custom-checkbox" className="my-2">
@@ -130,32 +129,25 @@ const Toaster = () => {
                     id="close"
                     custom
                     checked={closeButton}
-                    onChange={e=> { setCloseButton(e.target.checked) }}
+                    onChange={(e) => {
+                      setCloseButton(e.target.checked)
+                    }}
                   />
                   <CFormLabel variant="custom-checkbox" htmlFor="close">
                     closeButton
                   </CFormLabel>
                 </div>
 
-                <CButton
+                <CButton className="me-1 w-25" color="success" onClick={addToast}>
-                  className="me-1 w-25"
-                  color="success"
-                  onClick={addToast}
-                >
                   Add toast
                 </CButton>
-
               </CForm>
             </CCol>
             <CCol sm="12" lg="6">
               {Object.keys(toasters).map((toasterKey) => (
-                <CToaster
+                <CToaster placement={toasterKey} key={'toaster' + toasterKey}>
-                  placement={toasterKey}
+                  {toasters[toasterKey].map((toast, key) => {
-                  key={'toaster' + toasterKey}
+                    return (
-                >
-                  {
-                    toasters[toasterKey].map((toast, key)=>{
-                    return(
                       <CToast
                         key={'toast' + key}
                         icon={
@@ -177,22 +169,8 @@ const Toaster = () => {
                       >
                         {`Hello, ${toasterKey} world! This is a toast ${toasterKey} message.`}
                       </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>
                     )
-                  })
+                  })}
-                  }
                 </CToaster>
               ))}
             </CCol>

src/views/pages/login/Login.js

@@ -11,7 +11,7 @@ import {
   CFormControl,
   CInputGroup,
   CInputGroupText,
-  CRow
+  CRow,
 } from '@coreui/react-ts'
 import CIcon from '@coreui/icons-react'
 
@@ -37,14 +37,22 @@ const Login = () => {
                       <CInputGroupText>
                         <CIcon name="cil-lock-locked" />
                       </CInputGroupText>
-                      <CFormControl type="password" placeholder="Password" autoComplete="current-password" />
+                      <CFormControl
+                        type="password"
+                        placeholder="Password"
+                        autoComplete="current-password"
+                      />
                     </CInputGroup>
                     <CRow>
                       <CCol xs="6">
-                        <CButton color="primary" className="px-4">Login</CButton>
+                        <CButton color="primary" className="px-4">
+                          Login
+                        </CButton>
                       </CCol>
                       <CCol xs="6" className="text-right">
-                        <CButton color="link" className="px-0">Forgot password?</CButton>
+                        <CButton color="link" className="px-0">
+                          Forgot password?
+                        </CButton>
                       </CCol>
                     </CRow>
                   </CForm>
@@ -54,10 +62,14 @@ const Login = () => {
                 <CCardBody className="text-center">
                   <div>
                     <h2>Sign up</h2>
-                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
+                    <p>
-                      labore et dolore magna aliqua.</p>
+                      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+                      tempor incididunt ut labore et dolore magna aliqua.
+                    </p>
                     <Link to="/register">
-                      <CButton color="primary" className="mt-3" active tabIndex={-1}>Register Now!</CButton>
+                      <CButton color="primary" className="mt-3" active tabIndex={-1}>
+                        Register Now!
+                      </CButton>
                     </Link>
                   </div>
                 </CCardBody>

src/views/pages/page404/Page404.js

@@ -18,7 +18,7 @@ const Page404 = () => {
           <CCol md="6">
             <div className="clearfix">
               <h1 className="float-start display-3 me-4">404</h1>
-              <h4 className="pt-3">Oops! You{'\''}re lost.</h4>
+              <h4 className="pt-3">Oops! You{"'"}re lost.</h4>
               <p className="text-muted float-start">The page you are looking for was not found.</p>
             </div>
             <CInputGroup className="input-prepend">

src/views/pages/page500/Page500.js

@@ -6,7 +6,7 @@ import {
   CFormControl,
   CInputGroup,
   CInputGroupText,
-  CRow
+  CRow,
 } from '@coreui/react-ts'
 import CIcon from '@coreui/icons-react'
 
@@ -19,7 +19,9 @@ const Page500 = () => {
             <span className="clearfix">
               <h1 className="float-start display-3 me-4">500</h1>
               <h4 className="pt-3">Houston, we have a problem!</h4>
-              <p className="text-muted float-start">The page you are looking for is temporarily unavailable.</p>
+              <p className="text-muted float-start">
+                The page you are looking for is temporarily unavailable.
+              </p>
             </span>
             <CInputGroup className="input-prepend">
               <CInputGroupText>

src/views/pages/register/Register.js

@@ -10,7 +10,7 @@ import {
   CFormControl,
   CInputGroup,
   CInputGroupText,
-  CRow
+  CRow,
 } from '@coreui/react-ts'
 import CIcon from '@coreui/icons-react'
 
@@ -39,24 +39,38 @@ const Register = () => {
                     <CInputGroupText>
                       <CIcon name="cil-lock-locked" />
                     </CInputGroupText>
-                    <CFormControl type="password" placeholder="Password" autoComplete="new-password" />
+                    <CFormControl
+                      type="password"
+                      placeholder="Password"
+                      autoComplete="new-password"
+                    />
                   </CInputGroup>
                   <CInputGroup className="mb-4">
                     <CInputGroupText>
                       <CIcon name="cil-lock-locked" />
                     </CInputGroupText>
-                    <CFormControl type="password" placeholder="Repeat password" autoComplete="new-password" />
+                    <CFormControl
+                      type="password"
+                      placeholder="Repeat password"
+                      autoComplete="new-password"
+                    />
                   </CInputGroup>
-                  <CButton color="success" block>Create Account</CButton>
+                  <CButton color="success" block>
+                    Create Account
+                  </CButton>
                 </CForm>
               </CCardBody>
               <CCardFooter className="p-4">
                 <CRow>
                   <CCol xs="12" sm="6">
-                    <CButton className="btn-facebook mb-1" block><span>facebook</span></CButton>
+                    <CButton className="btn-facebook mb-1" block>
+                      <span>facebook</span>
+                    </CButton>
                   </CCol>
                   <CCol xs="12" sm="6">
-                    <CButton className="btn-twitter mb-1" block><span>twitter</span></CButton>
+                    <CButton className="btn-twitter mb-1" block>
+                      <span>twitter</span>
+                    </CButton>
                   </CCol>
                 </CRow>
               </CCardFooter>

src/views/theme/colors/Colors.js

@@ -1,16 +1,9 @@
 import React, { useEffect, useState, createRef } from 'react'
 import classNames from 'classnames'
-import {
+import { CRow, CCol, CCard, CCardHeader, CCardBody } from '@coreui/react-ts'
-  CRow,
-  CCol,
-  CCard,
-  CCardHeader,
-  CCardBody
-} from '@coreui/react-ts'
 import { rgbToHex } from '@coreui/utils'
 import { DocsLink } from 'src/reusable'
 
-
 const ThemeView = () => {
   const [color, setColor] = useState('rgb(255, 255, 255)')
   const ref = createRef()
@@ -26,24 +19,24 @@ const ThemeView = () => {
       <tbody>
         <tr>
           <td className="text-muted">HEX:</td>
-        <td className="font-weight-bold">{ rgbToHex(color) }</td>
+          <td className="font-weight-bold">{rgbToHex(color)}</td>
         </tr>
         <tr>
           <td className="text-muted">RGB:</td>
-        <td className="font-weight-bold">{ color }</td>
+          <td className="font-weight-bold">{color}</td>
         </tr>
       </tbody>
     </table>
   )
 }
 
-const ThemeColor = ({className, children}) => {
+const ThemeColor = ({ className, children }) => {
   const classes = classNames(className, 'theme-color w-75 rounded mb-3')
   return (
     <CCol xl="2" md="4" sm="6" xs="12" className="mb-4">
-      <div className={classes} style={{paddingTop: '75%'}}></div>
+      <div className={classes} style={{ paddingTop: '75%' }}></div>
       {children}
-      <ThemeView/>
+      <ThemeView />
     </CCol>
   )
 }
@@ -54,7 +47,7 @@ const Colors = () => {
       <CCard className="mb-4">
         <CCardHeader>
           Theme colors
-          <DocsLink href="https://coreui.io/docs/utilities/colors/"/>
+          <DocsLink href="https://coreui.io/docs/utilities/colors/" />
         </CCardHeader>
         <CCardBody>
           <CRow>
@@ -86,9 +79,7 @@ const Colors = () => {
         </CCardBody>
       </CCard>
       <CCard className="mb-4">
-        <CCardHeader>
+        <CCardHeader>Grays</CCardHeader>
-          Grays
-        </CCardHeader>
         <CCardBody>
           <CRow className="mb-3">
             <ThemeColor className="bg-gray-100">

src/views/theme/typography/Typography.js

@@ -1,9 +1,5 @@
 import React from 'react'
-import {
+import { CCard, CCardHeader, CCardBody } from '@coreui/react-ts'
-  CCard,
-  CCardHeader,
-  CCardBody
-} from '@coreui/react-ts'
 import { DocsLink } from 'src/reusable'
 
 const Typography = () => {
@@ -12,10 +8,13 @@ const Typography = () => {
       <CCard className="mb-4">
         <CCardHeader>
           Headings
-          <DocsLink href="https://coreui.io/docs/content/typography/"/>
+          <DocsLink href="https://coreui.io/docs/content/typography/" />
         </CCardHeader>
         <CCardBody>
-          <p>Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.</p>
+          <p>
+            Documentation and examples for Bootstrap typography, including global settings,
+            headings, body text, lists, and more.
+          </p>
           <table className="table">
             <thead>
               <tr>
@@ -26,54 +25,77 @@ const Typography = () => {
             <tbody>
               <tr>
                 <td>
-                <p><code className="highlighter-rouge">&lt;h1&gt;&lt;/h1&gt;</code></p>
+                  <p>
+                    <code className="highlighter-rouge">&lt;h1&gt;&lt;/h1&gt;</code>
+                  </p>
+                </td>
+                <td>
+                  <span className="h1">h1. Bootstrap heading</span>
                 </td>
-              <td><span className="h1">h1. Bootstrap heading</span></td>
               </tr>
               <tr>
                 <td>
-                <p><code className="highlighter-rouge">&lt;h2&gt;&lt;/h2&gt;</code></p>
+                  <p>
+                    <code className="highlighter-rouge">&lt;h2&gt;&lt;/h2&gt;</code>
+                  </p>
+                </td>
+                <td>
+                  <span className="h2">h2. Bootstrap heading</span>
                 </td>
-              <td><span className="h2">h2. Bootstrap heading</span></td>
               </tr>
               <tr>
                 <td>
-                <p><code className="highlighter-rouge">&lt;h3&gt;&lt;/h3&gt;</code></p>
+                  <p>
+                    <code className="highlighter-rouge">&lt;h3&gt;&lt;/h3&gt;</code>
+                  </p>
+                </td>
+                <td>
+                  <span className="h3">h3. Bootstrap heading</span>
                 </td>
-              <td><span className="h3">h3. Bootstrap heading</span></td>
               </tr>
               <tr>
                 <td>
-                <p><code className="highlighter-rouge">&lt;h4&gt;&lt;/h4&gt;</code></p>
+                  <p>
+                    <code className="highlighter-rouge">&lt;h4&gt;&lt;/h4&gt;</code>
+                  </p>
+                </td>
+                <td>
+                  <span className="h4">h4. Bootstrap heading</span>
                 </td>
-              <td><span className="h4">h4. Bootstrap heading</span></td>
               </tr>
               <tr>
                 <td>
-                <p><code className="highlighter-rouge">&lt;h5&gt;&lt;/h5&gt;</code></p>
+                  <p>
+                    <code className="highlighter-rouge">&lt;h5&gt;&lt;/h5&gt;</code>
+                  </p>
+                </td>
+                <td>
+                  <span className="h5">h5. Bootstrap heading</span>
                 </td>
-              <td><span className="h5">h5. Bootstrap heading</span></td>
               </tr>
               <tr>
                 <td>
-                <p><code className="highlighter-rouge">&lt;h6&gt;&lt;/h6&gt;</code></p>
+                  <p>
+                    <code className="highlighter-rouge">&lt;h6&gt;&lt;/h6&gt;</code>
+                  </p>
+                </td>
+                <td>
+                  <span className="h6">h6. Bootstrap heading</span>
                 </td>
-              <td><span className="h6">h6. Bootstrap heading</span></td>
               </tr>
             </tbody>
           </table>
         </CCardBody>
       </CCard>
       <CCard className="mb-4">
-        <CCardHeader>
+        <CCardHeader>Headings</CCardHeader>
-          Headings
-        </CCardHeader>
         <CCardBody>
-          <p><code className="highlighter-rouge">.h1</code> through
+          <p>
+            <code className="highlighter-rouge">.h1</code> through
             <code className="highlighter-rouge">.h6</code>
-          classes are also available, for when you
+            classes are also available, for when you want to match the font styling of a heading but
-          want to match the font styling of a heading but cannot use the
+            cannot use the associated HTML element.
-          associated HTML element.</p>
+          </p>
           <div className="bd-example">
             <p className="h1">h1. Bootstrap heading</p>
             <p className="h2">h2. Bootstrap heading</p>
@@ -85,26 +107,35 @@ const Typography = () => {
         </CCardBody>
       </CCard>
       <CCard className="mb-4">
-        <div className="card-header">
+        <div className="card-header">Display headings</div>
-          Display headings
-        </div>
         <div className="card-body">
-          <p>Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using
+          <p>
-            a <strong>display heading</strong>—a larger, slightly more opinionated heading style.</p>
+            Traditional heading elements are designed to work best in the meat of your page content.
+            When you need a heading to stand out, consider using a <strong>display heading</strong>
+            —a larger, slightly more opinionated heading style.
+          </p>
           <div className="bd-example bd-example-type">
             <table className="table">
               <tbody>
                 <tr>
-                <td><span className="display-1">Display 1</span></td>
+                  <td>
+                    <span className="display-1">Display 1</span>
+                  </td>
                 </tr>
                 <tr>
-                <td><span className="display-2">Display 2</span></td>
+                  <td>
+                    <span className="display-2">Display 2</span>
+                  </td>
                 </tr>
                 <tr>
-                <td><span className="display-3">Display 3</span></td>
+                  <td>
+                    <span className="display-3">Display 3</span>
+                  </td>
                 </tr>
                 <tr>
-                <td><span className="display-4">Display 4</span></td>
+                  <td>
+                    <span className="display-4">Display 4</span>
+                  </td>
                 </tr>
               </tbody>
             </table>
@@ -112,37 +143,50 @@ const Typography = () => {
         </div>
       </CCard>
       <CCard className="mb-4">
-        <CCardHeader>
+        <CCardHeader>Inline text elements</CCardHeader>
-          Inline text elements
-        </CCardHeader>
         <CCardBody>
-          <p>Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using
+          <p>
-            a <strong>display heading</strong>—a larger, slightly more opinionated heading style.</p>
+            Traditional heading elements are designed to work best in the meat of your page content.
+            When you need a heading to stand out, consider using a <strong>display heading</strong>
+            —a larger, slightly more opinionated heading style.
+          </p>
           <div className="bd-example">
-            <p>You can use the mark tag to <mark>highlight</mark> text.</p>
+            <p>
+              You can use the mark tag to <mark>highlight</mark> text.
+            </p>
             <p>
               <del>This line of text is meant to be treated as deleted text.</del>
             </p>
-            <p><s>This line of text is meant to be treated as no longer accurate.</s></p>
+            <p>
+              <s>This line of text is meant to be treated as no longer accurate.</s>
+            </p>
             <p>
               <ins>This line of text is meant to be treated as an addition to the document.</ins>
             </p>
-            <p><u>This line of text will render as underlined</u></p>
+            <p>
+              <u>This line of text will render as underlined</u>
+            </p>
             <p>
               <small>This line of text is meant to be treated as fine print.</small>
             </p>
-            <p><strong>This line rendered as bold text.</strong></p>
+            <p>
-            <p><em>This line rendered as italicized text.</em></p>
+              <strong>This line rendered as bold text.</strong>
+            </p>
+            <p>
+              <em>This line rendered as italicized text.</em>
+            </p>
           </div>
         </CCardBody>
       </CCard>
       <CCard className="mb-4">
-        <CCardHeader>
+        <CCardHeader>Description list alignment</CCardHeader>
-          Description list alignment
-        </CCardHeader>
         <CCardBody>
-          <p>Align terms and descriptions horizontally by using our grid system’s predefined classes (or semantic mixins). For longer terms, you can
+          <p>
-            optionally add a <code className="highlighter-rouge">.text-truncate</code> class to truncate the text with an ellipsis.</p>
+            Align terms and descriptions horizontally by using our grid system’s predefined classes
+            (or semantic mixins). For longer terms, you can optionally add a{' '}
+            <code className="highlighter-rouge">.text-truncate</code> class to truncate the text
+            with an ellipsis.
+          </p>
           <div className="bd-example">
             <dl className="row">
               <dt className="col-sm-3">Description lists</dt>
@@ -150,7 +194,9 @@ const Typography = () => {
 
               <dt className="col-sm-3">Euismod</dt>
               <dd className="col-sm-9">
-                <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
+                <p>
+                  Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
+                </p>
                 <p>Donec id elit non mi porta gravida at eget metus.</p>
               </dd>
 
@@ -158,13 +204,18 @@ const Typography = () => {
               <dd className="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
 
               <dt className="col-sm-3 text-truncate">Truncated term is truncated</dt>
-              <dd className="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
+              <dd className="col-sm-9">
+                Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut
+                fermentum massa justo sit amet risus.
+              </dd>
 
               <dt className="col-sm-3">Nesting</dt>
               <dd className="col-sm-9">
                 <dl className="row">
                   <dt className="col-sm-4">Nested definition list</dt>
-                  <dd className="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
+                  <dd className="col-sm-8">
+                    Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
+                  </dd>
                 </dl>
               </dd>
             </dl>

src/views/users/User.js

@@ -1,41 +0,0 @@
-import React from 'react'
-import { CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react-ts'
-import CIcon from '@coreui/icons-react'
-
-import usersData from './UsersData'
-
-const User = ({match}) => {
-  const user = usersData.find( user => user.id.toString() === match.params.id)
-  const userDetails = user ? Object.entries(user) :
-    [['id', (<span><CIcon className="text-muted" name="cui-icon-ban" /> Not found</span>)]]
-
-  return (
-    <CRow>
-      <CCol lg={6}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            User id: {match.params.id}
-          </CCardHeader>
-          <CCardBody>
-              <table className="table table-striped table-hover">
-                <tbody>
-                  {
-                    userDetails.map(([key, value], index) => {
-                      return (
-                        <tr key={index.toString()}>
-                          <td>{`${key}:`}</td>
-                          <td><strong>{value}</strong></td>
-                        </tr>
-                      )
-                    })
-                  }
-                </tbody>
-              </table>
-          </CCardBody>
-        </CCard>
-      </CCol>
-    </CRow>
-  )
-}
-
-export default User

src/views/users/Users.js

@@ -1,86 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import { useHistory, useLocation } from 'react-router-dom'
-import {
-  CBadge,
-  CCard,
-  CCardBody,
-  CCardHeader,
-  CCol,
-  CDataTable,
-  CRow,
-  CPagination
-} from '@coreui/react'
-
-import usersData from './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 Users = () => {
-  const history = useHistory()
-  const queryPage = useLocation().search.match(/page=([0-9]+)/, '')
-  const currentPage = Number(queryPage && queryPage[1] ? queryPage[1] : 1)
-  const [page, setPage] = useState(currentPage)
-
-  const pageChange = newPage => {
-    currentPage !== newPage && history.push(`/users?page=${newPage}`)
-  }
-
-  useEffect(() => {
-    currentPage !== page && setPage(currentPage)
-  }, [currentPage, page])
-
-  return (
-    <CRow>
-      <CCol xl={6}>
-        <CCard className="mb-4">
-          <CCardHeader>
-            Users
-            <small className="text-muted"> example</small>
-          </CCardHeader>
-          <CCardBody>
-          <CDataTable
-            items={usersData}
-            fields={[
-              { key: 'name', _classes: 'font-weight-bold' },
-              'registered', 'role', 'status'
-            ]}
-            hover
-            striped
-            itemsPerPage={5}
-            activePage={page}
-            clickableRows
-            onRowClick={(item) => history.push(`/users/${item.id}`)}
-            scopedSlots = {{
-              'status':
-                (item)=>(
-                  <td>
-                    <CBadge color={getBadge(item.status)}>
-                      {item.status}
-                    </CBadge>
-                  </td>
-                )
-            }}
-          />
-          <CPagination
-            activePage={page}
-            onActivePageChange={pageChange}
-            pages={5}
-            doubleArrows={false}
-            align="center"
-          />
-          </CCardBody>
-        </CCard>
-      </CCol>
-    </CRow>
-  )
-}
-
-export default Users

src/views/users/UsersData.js

@@ -1,29 +0,0 @@
-const usersData = [
-  {id: 0, name: 'John Doe', registered: '2018/01/01', role: 'Guest', status: 'Pending'},
-  {id: 1, name: 'Samppa Nori', registered: '2018/01/01', role: 'Member', status: 'Active'},
-  {id: 2, name: 'Estavan Lykos', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
-  {id: 3, name: 'Chetan Mohamed', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
-  {id: 4, name: 'Derick Maximinus', registered: '2018/03/01', role: 'Member', status: 'Pending'},
-  {id: 5, name: 'Friderik Dávid', registered: '2018/01/21', role: 'Staff', status: 'Active'},
-  {id: 6, name: 'Yiorgos Avraamu', registered: '2018/01/01', role: 'Member', status: 'Active'},
-  {id: 7, name: 'Avram Tarasios', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
-  {id: 8, name: 'Quintin Ed', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
-  {id: 9, name: 'Enéas Kwadwo', registered: '2018/03/01', role: 'Member', status: 'Pending'},
-  {id: 10, name: 'Agapetus Tadeáš', registered: '2018/01/21', role: 'Staff', status: 'Active'},
-  {id: 11, name: 'Carwyn Fachtna', registered: '2018/01/01', role: 'Member', status: 'Active'},
-  {id: 12, name: 'Nehemiah Tatius', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
-  {id: 13, name: 'Ebbe Gemariah', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
-  {id: 14, name: 'Eustorgios Amulius', registered: '2018/03/01', role: 'Member', status: 'Pending'},
-  {id: 15, name: 'Leopold Gáspár', registered: '2018/01/21', role: 'Staff', status: 'Active'},
-  {id: 16, name: 'Pompeius René', registered: '2018/01/01', role: 'Member', status: 'Active'},
-  {id: 17, name: 'Paĉjo Jadon', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
-  {id: 18, name: 'Micheal Mercurius', registered: '2018/02/01', role: 'Admin', status: 'Inactive'},
-  {id: 19, name: 'Ganesha Dubhghall', registered: '2018/03/01', role: 'Member', status: 'Pending'},
-  {id: 20, name: 'Hiroto Šimun', registered: '2018/01/21', role: 'Staff', status: 'Active'},
-  {id: 21, name: 'Vishnu Serghei', registered: '2018/01/01', role: 'Member', status: 'Active'},
-  {id: 22, name: 'Zbyněk Phoibos', registered: '2018/02/01', role: 'Staff', status: 'Banned'},
-  {id: 23, name: 'Aulus Agmundr', registered: '2018/01/01', role: 'Member', status: 'Pending'},
-  {id: 42, name: 'Ford Prefect', registered: '2001/05/25', role: 'Alien', status: 'Don\'t panic!'}
-]
-
-export default usersData

src/views/widgets/Widgets.js

@@ -7,7 +7,7 @@ import {
   CWidgetIcon,
   CWidgetProgress,
   CWidgetProgressIcon,
-  CWidgetSimple
+  CWidgetSimple,
 } from '@coreui/react-ts'
 
 import WidgetsBrand from './WidgetsBrand'
@@ -24,47 +24,145 @@ const Widgets = () => {
       <WidgetsDropdown />
       <CRow>
         <CCol xs="12" sm="6" lg="3">
-          <CWidgetProgress className="mb-4" value="89.9%" title="Widget title" progressColor="success" progressValue={89.9} text="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" value="12.124" title="Widget title" progressColor="info" progressValue={89.9} text="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" value="$98.111,00" title="Widget title" progressColor="warning" progressValue={89.9} text="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" value="2 TB" title="Widget title" progressValue={89.9} text="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" color="success" textColor="white" value="89.9%" title="Widget title" progressWhite progressValue={89.9} text="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" color="info" textColor="white" value="12.124" title="Widget title" progressWhite progressValue={89.9} text="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" color="warning" textColor="white" value="$98.111,00" title="Widget title" progressWhite progressValue={89.9} text="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" color="primary" textColor="white" value="2 TB" title="Widget title" progressWhite progressValue={89.9} text="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 className="mb-3" icon={<CIcon width={24} name="cil-settings" className="icon icon-xl"/>} iconPadding={3} title="income" value="$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"
+          />
         </CCol>
         <CCol xs="12" sm="6" lg="3">
-          <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"/>
+          <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"
+          />
         </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"/>
+          <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"
+          />
         </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"/>
+          <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"
+          />
         </CCol>
         <CCol xs="12" sm="6" lg="3">
-          <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={
+          <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={
               <CLink
                 className="font-weight-bold font-xs btn-block text-muted"
                 href="https://coreui.io/"
@@ -72,13 +170,20 @@ const Widgets = () => {
                 target="_blank"
               >
                 View more
-              <CIcon name="cil-arrow-right" className="float-end" width="16"/>
+                <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-laptop" className="icon icon-xl"/>} iconPadding={3} title="income" value="$1.999,50" color="info" footer={
+          <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/"
@@ -86,13 +191,20 @@ const Widgets = () => {
                 target="_blank"
               >
                 View more
-              <CIcon name="cil-arrow-right" className="float-end" width="16"/>
+                <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={
+          <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/"
@@ -100,13 +212,20 @@ const Widgets = () => {
                 target="_blank"
               >
                 View more
-              <CIcon name="cil-arrow-right" className="float-end" width="16"/>
+                <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={
+          <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/"
@@ -114,56 +233,88 @@ const Widgets = () => {
                 target="_blank"
               >
                 View more
-              <CIcon name="cil-arrow-right" className="float-end" width="16"/>
+                <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" />
+          <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"/>
+          <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"/>
+          <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"/>
+          <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 />
-      <WidgetsBrand withCharts/>
+      <WidgetsBrand withCharts />
       <CCardGroup className="mb-4">
         <CWidgetProgressIcon
-          icon={<CIcon name="cil-people" className="icon icon-2xl"/>}
+          icon={<CIcon name="cil-people" className="icon icon-2xl" />}
           value="87.500"
           title="Visitors"
           progressColor="info"
           progressValue={75}
         />
         <CWidgetProgressIcon
-          icon={<CIcon name="cil-userFollow" className="icon icon-2xl"/>}
+          icon={<CIcon name="cil-userFollow" className="icon icon-2xl" />}
           value="385"
           title="New Clients"
           progressColor="success"
           progressValue={75}
         />
         <CWidgetProgressIcon
-          icon={<CIcon name="cil-basket" className="icon icon-2xl"/>}
+          icon={<CIcon name="cil-basket" className="icon icon-2xl" />}
           value="1238"
           title="Products sold"
           progressColor="warning"
           progressValue={75}
         />
         <CWidgetProgressIcon
-          icon={<CIcon name="cil-chartPie" className="icon icon-2xl"/>}
+          icon={<CIcon name="cil-chartPie" className="icon icon-2xl" />}
           value="28%"
           title="Returning Visitors"
           progressValue={75}
         />
         <CWidgetProgressIcon
-          icon={<CIcon name="cil-speedometer" className="icon icon-2xl"/>}
+          icon={<CIcon name="cil-speedometer" className="icon icon-2xl" />}
           value="5:34:11"
           title="Avg. Time"
           progressColor="danger"
@@ -173,7 +324,7 @@ const Widgets = () => {
       <CRow>
         <CCol sm="6" md="2">
           <CWidgetProgressIcon
-            icon={<CIcon name="cil-people" height="36"/>}
+            icon={<CIcon name="cil-people" height="36" />}
             value="87.500"
             title="Visitors"
             progressColor="info"
@@ -182,7 +333,7 @@ const Widgets = () => {
         </CCol>
         <CCol sm="6" md="2">
           <CWidgetProgressIcon
-            icon={<CIcon name="cil-userFollow" height="36"/>}
+            icon={<CIcon name="cil-userFollow" height="36" />}
             value="385"
             title="New Clients"
             progressColor="success"
@@ -191,7 +342,7 @@ const Widgets = () => {
         </CCol>
         <CCol sm="6" md="2">
           <CWidgetProgressIcon
-            icon={<CIcon name="cil-basket" height="36"/>}
+            icon={<CIcon name="cil-basket" height="36" />}
             value="1238"
             title="Products sold"
             progressColor="warning"
@@ -200,7 +351,7 @@ const Widgets = () => {
         </CCol>
         <CCol sm="6" md="2">
           <CWidgetProgressIcon
-            icon={<CIcon name="cil-chartPie" height="36"/>}
+            icon={<CIcon name="cil-chartPie" height="36" />}
             value="28%"
             title="Returning Visitors"
             progressColor="primary"
@@ -209,7 +360,7 @@ const Widgets = () => {
         </CCol>
         <CCol sm="6" md="2">
           <CWidgetProgressIcon
-            icon={<CIcon name="cil-speedometer" height="36"/>}
+            icon={<CIcon name="cil-speedometer" height="36" />}
             value="5:34:11"
             title="Avg. Time"
             progressColor="danger"
@@ -218,7 +369,7 @@ const Widgets = () => {
         </CCol>
         <CCol sm="6" md="2">
           <CWidgetProgressIcon
-            icon={<CIcon name="cil-speech" height="36"/>}
+            icon={<CIcon name="cil-speech" height="36" />}
             value="972"
             title="comments"
             progressColor="info"
@@ -230,7 +381,7 @@ const Widgets = () => {
         <CCol sm="6" md="2">
           <CWidgetProgressIcon
             color="info"
-            icon={<CIcon name="cil-people" height="36"/>}
+            icon={<CIcon name="cil-people" height="36" />}
             value="87.500"
             title="Visitors"
             progressValue={75}
@@ -240,7 +391,7 @@ const Widgets = () => {
         <CCol sm="6" md="2">
           <CWidgetProgressIcon
             color="success"
-            icon={<CIcon name="cil-userFollow" height="36"/>}
+            icon={<CIcon name="cil-userFollow" height="36" />}
             value="385"
             title="New Clients"
             progressValue={75}
@@ -250,7 +401,7 @@ const Widgets = () => {
         <CCol sm="6" md="2">
           <CWidgetProgressIcon
             color="warning"
-            icon={<CIcon name="cil-basket" height="36"/>}
+            icon={<CIcon name="cil-basket" height="36" />}
             value="1238"
             title="Products sold"
             progressValue={75}
@@ -260,7 +411,7 @@ const Widgets = () => {
         <CCol sm="6" md="2">
           <CWidgetProgressIcon
             color="primary"
-            icon={<CIcon name="cil-chartPie" height="36"/>}
+            icon={<CIcon name="cil-chartPie" height="36" />}
             value="28%"
             title="Returning Visitors"
             progressValue={75}
@@ -270,7 +421,7 @@ const Widgets = () => {
         <CCol sm="6" md="2">
           <CWidgetProgressIcon
             color="danger"
-            icon={<CIcon name="cil-speedometer" height="36"/>}
+            icon={<CIcon name="cil-speedometer" height="36" />}
             value="5:34:11"
             title="Avg. Time"
             progressValue={75}
@@ -280,7 +431,7 @@ const Widgets = () => {
         <CCol sm="6" md="2">
           <CWidgetProgressIcon
             color="info"
-            icon={<CIcon name="cil-speech" height="36"/>}
+            icon={<CIcon name="cil-speech" height="36" />}
             value="972"
             title="comments"
             progressValue={75}
@@ -291,32 +442,32 @@ const Widgets = () => {
       <CRow>
         <CCol sm="4" lg="2">
           <CWidgetSimple title="title" value="1,123">
-            <ChartLineSimple style={{ height: '40px' }} borderColor="danger"/>
+            <ChartLineSimple style={{ height: '40px' }} borderColor="danger" />
           </CWidgetSimple>
         </CCol>
         <CCol sm="4" lg="2">
           <CWidgetSimple title="title" value="1,123">
-            <ChartLineSimple style={{ height: '40px' }} borderColor="primary"/>
+            <ChartLineSimple style={{ height: '40px' }} borderColor="primary" />
           </CWidgetSimple>
         </CCol>
         <CCol sm="4" lg="2">
           <CWidgetSimple title="title" value="1,123">
-            <ChartLineSimple style={{ height: '40px' }} borderColor="success"/>
+            <ChartLineSimple style={{ height: '40px' }} borderColor="success" />
           </CWidgetSimple>
         </CCol>
         <CCol sm="4" lg="2">
           <CWidgetSimple title="title" value="1,123">
-            <ChartBarSimple style={{ height: '40px' }} backgroundColor="danger"/>
+            <ChartBarSimple style={{ height: '40px' }} backgroundColor="danger" />
           </CWidgetSimple>
         </CCol>
         <CCol sm="4" lg="2">
           <CWidgetSimple title="title" value="1,123">
-            <ChartBarSimple style={{ height: '40px' }} backgroundColor="primary"/>
+            <ChartBarSimple style={{ height: '40px' }} backgroundColor="primary" />
           </CWidgetSimple>
         </CCol>
         <CCol sm="4" lg="2">
           <CWidgetSimple title="title" value="1,123">
-            <ChartBarSimple style={{ height: '40px' }} backgroundColor="success"/>
+            <ChartBarSimple style={{ height: '40px' }} backgroundColor="success" />
           </CWidgetSimple>
         </CCol>
       </CRow>

src/views/widgets/WidgetsBrand.js

@@ -1,25 +1,20 @@
-import React from 'react';
+import React from 'react'
-import PropTypes from 'prop-types';
+import PropTypes from 'prop-types'
-import { CWidgetBrand, CRow, CCol } from '@coreui/react-ts';
+import { CWidgetBrand, CRow, CCol } from '@coreui/react-ts'
-import CIcon from '@coreui/icons-react';
+import CIcon from '@coreui/icons-react'
-import ChartLineSimple from '../charts/ChartLineSimple';
+import ChartLineSimple from '../charts/ChartLineSimple'
-
-const WidgetsBrand = ({withCharts})=>{
 
+const WidgetsBrand = ({ withCharts }) => {
   // render
 
-  return withCharts ?
+  return withCharts ? (
     <CRow>
       <CCol sm="6" lg="3">
         <CWidgetBrand
           className="mb-4"
           headerChildren={
             <>
-            <CIcon
+              <CIcon name="cib-facebook" height="52" className="my-4 text-white" />
-             name="cib-facebook"
-             height="52"
-             className="my-4 text-white"
-            />
               <ChartLineSimple
                 className="position-absolute w-100 h-100"
                 backgroundColor="rgba(255,255,255,.1)"
@@ -29,9 +24,12 @@ const WidgetsBrand = ({withCharts})=>{
               />
             </>
           }
-        values={[['89k', 'friends'], ['459', 'feeds']]}
+          values={[
+            ['89k', 'friends'],
+            ['459', 'feeds'],
+          ]}
           style={{
-          "--cui-card-cap-bg": "#3b5998"
+            '--cui-card-cap-bg': '#3b5998',
           }}
         />
       </CCol>
@@ -41,11 +39,7 @@ const WidgetsBrand = ({withCharts})=>{
           className="mb-4"
           headerChildren={
             <>
-            <CIcon
+              <CIcon name="cib-twitter" height="52" className="my-4 text-white" />
-              name="cib-twitter"
-              height="52"
-              className="my-4 text-white"
-            />
               <ChartLineSimple
                 className="position-absolute w-100 h-100"
                 backgroundColor="rgba(255,255,255,.1)"
@@ -55,9 +49,12 @@ const WidgetsBrand = ({withCharts})=>{
               />
             </>
           }
-        values={[['973k', 'followers'], ['1.792', 'tweets']]}
+          values={[
+            ['973k', 'followers'],
+            ['1.792', 'tweets'],
+          ]}
           style={{
-          "--cui-card-cap-bg": "#00aced"
+            '--cui-card-cap-bg': '#00aced',
           }}
         />
       </CCol>
@@ -67,11 +64,7 @@ const WidgetsBrand = ({withCharts})=>{
           className="mb-4"
           headerChildren={
             <>
-            <CIcon
+              <CIcon name="cib-linkedin" height="52" className="my-4 text-white" />
-              name="cib-linkedin"
-              height="52"
-              className="my-4 text-white"
-            />
               <ChartLineSimple
                 className="position-absolute w-100 h-100"
                 backgroundColor="rgba(255,255,255,.1)"
@@ -81,9 +74,12 @@ const WidgetsBrand = ({withCharts})=>{
               />
             </>
           }
-        values={[['500+', 'contacts'], ['292', 'feeds']]}
+          values={[
+            ['500+', 'contacts'],
+            ['292', 'feeds'],
+          ]}
           style={{
-          "--cui-card-cap-bg": "#4875b4"
+            '--cui-card-cap-bg': '#4875b4',
           }}
         />
       </CCol>
@@ -94,11 +90,7 @@ const WidgetsBrand = ({withCharts})=>{
           color="warning"
           headerChildren={
             <>
-            <CIcon
+              <CIcon name="cil-calendar" height="52" className="my-4 text-white" />
-              name="cil-calendar"
-              height="52"
-              className="my-4 text-white"
-            />
               <ChartLineSimple
                 className="position-absolute w-100 h-100"
                 backgroundColor="rgba(255,255,255,.1)"
@@ -108,23 +100,25 @@ const WidgetsBrand = ({withCharts})=>{
               />
             </>
           }
-        values={[['12+', 'events'], ['4', 'meetings']]}
+          values={[
+            ['12+', 'events'],
+            ['4', 'meetings'],
+          ]}
         />
       </CCol>
-  </CRow> : <CRow>
+    </CRow>
+  ) : (
+    <CRow>
       <CCol sm="6" lg="3">
         <CWidgetBrand
           className="mb-4"
-        headerChildren={
+          headerChildren={<CIcon name="cib-twitter" height="52" className="my-4 text-white" />}
-          <CIcon
+          values={[
-            name="cib-twitter"
+            ['89k', 'friends'],
-            height="52"
+            ['459', 'feeds'],
-            className="my-4 text-white"
+          ]}
-          />
-        }
-        values={[['89k', 'friends'], ['459', 'feeds']]}
           style={{
-          "--cui-card-cap-bg": "#3b5998"
+            '--cui-card-cap-bg': '#3b5998',
           }}
         />
       </CCol>
@@ -132,16 +126,13 @@ const WidgetsBrand = ({withCharts})=>{
       <CCol sm="6" lg="3">
         <CWidgetBrand
           className="mb-4"
-        headerChildren={
+          headerChildren={<CIcon name="cib-twitter" height="52" className="my-4 text-white" />}
-          <CIcon
+          values={[
-            name="cib-twitter"
+            ['973k', 'followers'],
-            height="52"
+            ['1.792', 'tweets'],
-            className="my-4 text-white"
+          ]}
-          />
-        }
-        values={[['973k', 'followers'], ['1.792', 'tweets']]}
           style={{
-          "--cui-card-cap-bg": "#00aced"
+            '--cui-card-cap-bg': '#00aced',
           }}
         />
       </CCol>
@@ -149,16 +140,13 @@ const WidgetsBrand = ({withCharts})=>{
       <CCol sm="6" lg="3">
         <CWidgetBrand
           className="mb-4"
-        headerChildren={
+          headerChildren={<CIcon name="cib-linkedin" height="52" className="my-4 text-white" />}
-          <CIcon
+          values={[
-            name="cib-linkedin"
+            ['500+', 'contacts'],
-            height="52"
+            ['292', 'feeds'],
-            className="my-4 text-white"
+          ]}
-          />
-        }
-        values={[['500+', 'contacts'], ['292', 'feeds']]}
           style={{
-          "--cui-card-cap-bg": "#4875b4"
+            '--cui-card-cap-bg': '#4875b4',
           }}
         />
       </CCol>
@@ -167,21 +155,19 @@ const WidgetsBrand = ({withCharts})=>{
         <CWidgetBrand
           className="mb-4"
           color="warning"
-        headerChildren={
+          headerChildren={<CIcon name="cil-calendar" height="52" className="my-4 text-white" />}
-          <CIcon
+          values={[
-            name="cil-calendar"
+            ['12+', 'events'],
-            height="52"
+            ['4', 'meetings'],
-            className="my-4 text-white"
+          ]}
-          />
-        }
-        values={[['12+', 'events'], ['4', 'meetings']]}
         />
       </CCol>
     </CRow>
+  )
 }
 
 WidgetsBrand.propTypes = {
-  withCharts: PropTypes.bool
+  withCharts: PropTypes.bool,
 }
 
 export default WidgetsBrand

src/views/widgets/WidgetsDropdown.js

@@ -6,7 +6,7 @@ import {
   CDropdownMenu,
   CDropdownItem,
   CDropdownToggle,
-  CWidgetDropdown
+  CWidgetDropdown,
 } from '@coreui/react-ts'
 import CIcon from '@coreui/icons-react'
 import ChartLineSimple from '../charts/ChartLineSimple'
@@ -17,14 +17,15 @@ const WidgetsDropdown = () => {
   return (
     <CRow>
       <CCol sm="6" lg="3">
-        <CWidgetDropdown className="mb-4"
+        <CWidgetDropdown
+          className="mb-4"
           color="primary"
           value="9.823"
           title="Members online"
           action={
             <CDropdown>
               <CDropdownToggle color="transparent" caret={false}>
-                <CIcon name="cil-options" className="text-high-emphasis-inverse"/>
+                <CIcon name="cil-options" className="text-high-emphasis-inverse" />
               </CDropdownToggle>
               {/* TODO: placement doesn't work */}
               <CDropdownMenu placement="bottom-end">
@@ -39,7 +40,7 @@ const WidgetsDropdown = () => {
             <ChartLineSimple
               pointed
               className="chart-wrapper mt-3 mx-3"
-              style={{height: '70px'}}
+              style={{ height: '70px' }}
               dataPoints={[65, 59, 84, 84, 51, 55, 40]}
               pointHoverBackgroundColor="primary"
               label="Members"
@@ -50,14 +51,15 @@ const WidgetsDropdown = () => {
       </CCol>
 
       <CCol sm="6" lg="3">
-        <CWidgetDropdown className="mb-4"
+        <CWidgetDropdown
+          className="mb-4"
           color="info"
           value="9.823"
           title="Members online"
           action={
             <CDropdown>
               <CDropdownToggle color="transparent" caret={false}>
-                <CIcon name="cil-options" className="text-high-emphasis-inverse"/>
+                <CIcon name="cil-options" className="text-high-emphasis-inverse" />
               </CDropdownToggle>
               <CDropdownMenu placement="bottom-end">
                 <CDropdownItem>Action</CDropdownItem>
@@ -71,10 +73,10 @@ const WidgetsDropdown = () => {
             <ChartLineSimple
               pointed
               className="mt-3 mx-3"
-              style={{height: '70px'}}
+              style={{ height: '70px' }}
               dataPoints={[1, 18, 9, 17, 34, 22, 11]}
               pointHoverBackgroundColor="info"
-              options={{ elements: { line: { tension: 0.00001 }}}}
+              options={{ elements: { line: { tension: 0.00001 } } }}
               label="Members"
               labels="months"
             />
@@ -83,14 +85,15 @@ const WidgetsDropdown = () => {
       </CCol>
 
       <CCol sm="6" lg="3">
-        <CWidgetDropdown className="mb-4"
+        <CWidgetDropdown
+          className="mb-4"
           color="warning"
           value="9.823"
           title="Members online"
           action={
             <CDropdown>
               <CDropdownToggle color="transparent" caret={false}>
-                <CIcon name="cil-options" className="text-high-emphasis-inverse"/>
+                <CIcon name="cil-options" className="text-high-emphasis-inverse" />
               </CDropdownToggle>
               <CDropdownMenu placement="bottom-end">
                 <CDropdownItem>Action</CDropdownItem>
@@ -103,10 +106,10 @@ const WidgetsDropdown = () => {
           chart={
             <ChartLineSimple
               className="mt-3"
-              style={{height: '70px'}}
+              style={{ height: '70px' }}
               backgroundColor="rgba(255,255,255,.2)"
               dataPoints={[78, 81, 80, 45, 34, 12, 40]}
-              options={{ elements: { line: { borderWidth: 2.5 }}}}
+              options={{ elements: { line: { borderWidth: 2.5 } } }}
               pointHoverBackgroundColor="warning"
               label="Members"
               labels="months"
@@ -116,14 +119,15 @@ const WidgetsDropdown = () => {
       </CCol>
 
       <CCol sm="6" lg="3">
-        <CWidgetDropdown className="mb-4"
+        <CWidgetDropdown
+          className="mb-4"
           color="danger"
           value="9.823"
           title="Members online"
           action={
             <CDropdown>
               <CDropdownToggle color="transparent" caret={false}>
-                <CIcon name="cil-options" className="text-high-emphasis-inverse"/>
+                <CIcon name="cil-options" className="text-high-emphasis-inverse" />
               </CDropdownToggle>
               <CDropdownMenu placement="bottom-end">
                 <CDropdownItem>Action</CDropdownItem>
@@ -136,7 +140,7 @@ const WidgetsDropdown = () => {
           chart={
             <ChartBarSimple
               className="mt-3 mx-3"
-              style={{height: '70px'}}
+              style={{ height: '70px' }}
               backgroundColor="rgb(250, 152, 152)"
               label="Members"
               labels="months"