From fa93c9a2fba719fe4424cfbf509f6914612e832d Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 9 May 2023 20:03:07 +0200
Subject: [PATCH 01/68] feat: add dark mode support

---
 package.json                               |    2 +-
 src/App.js                                 |   63 +-
 src/components/AppHeader.js                |   61 +-
 src/components/header/AppHeaderDropdown.js |    4 +-
 src/layout/DefaultLayout.js                |    2 +-
 src/scss/_example.scss                     |   41 +-
 src/scss/_variables.scss                   | 1792 +-------------------
 src/store.js                               |    6 +
 src/views/charts/MainChart.js              |  107 ++
 src/views/dashboard/Dashboard.js           |   90 +-
 src/views/pages/login/Login.js             |    2 +-
 src/views/pages/page404/Page404.js         |    2 +-
 src/views/pages/page500/Page500.js         |    2 +-
 src/views/pages/register/Register.js       |    2 +-
 14 files changed, 255 insertions(+), 1921 deletions(-)
 create mode 100644 src/views/charts/MainChart.js

diff --git a/package.json b/package.json
index da08efaab..accecf866 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
   },
   "dependencies": {
     "@coreui/chartjs": "^3.1.1",
-    "@coreui/coreui": "^4.2.6",
+    "@coreui/coreui": "4.3.0-alpha.0",
     "@coreui/icons": "^3.0.1",
     "@coreui/icons-react": "^2.1.0",
     "@coreui/react": "^4.6.0",
diff --git a/src/App.js b/src/App.js
index 7c2488188..dd068fe6f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,13 +1,29 @@
-import React, { Component, Suspense } from 'react'
+import React, { Suspense, useEffect } from 'react'
 import { HashRouter, Route, Routes } from 'react-router-dom'
+import { useSelector } from 'react-redux'
+
+import { CSpinner } from '@coreui/react'
 import './scss/style.scss'
 
 const loading = (
   <div className="pt-3 text-center">
-    <div className="sk-spinner sk-spinner-pulse"></div>
+    <CSpinner color="primary" variant="grow" />
   </div>
 )
 
+const getPreferredTheme = (storedTheme) => {
+  if (storedTheme) {
+    return storedTheme
+  }
+
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+}
+
+const setTheme = (theme) => {
+  document.documentElement.dataset.coreuiTheme =
+    theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : theme
+}
+
 // Containers
 const DefaultLayout = React.lazy(() => import('./layout/DefaultLayout'))
 
@@ -17,22 +33,35 @@ const Register = React.lazy(() => import('./views/pages/register/Register'))
 const Page404 = React.lazy(() => import('./views/pages/page404/Page404'))
 const Page500 = React.lazy(() => import('./views/pages/page500/Page500'))
 
-class App extends Component {
-  render() {
-    return (
-      <HashRouter>
-        <Suspense fallback={loading}>
-          <Routes>
-            <Route exact path="/login" name="Login Page" element={<Login />} />
-            <Route exact path="/register" name="Register Page" element={<Register />} />
-            <Route exact path="/404" name="Page 404" element={<Page404 />} />
-            <Route exact path="/500" name="Page 500" element={<Page500 />} />
-            <Route path="*" name="Home" element={<DefaultLayout />} />
-          </Routes>
-        </Suspense>
-      </HashRouter>
-    )
+const App = () => {
+  const theme = useSelector((state) => state.theme)
+
+  if (theme) {
+    document.documentElement.dataset.coreuiTheme =
+      theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : theme
   }
+
+  useEffect(() => {
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+      if (theme !== 'light' || theme !== 'dark') {
+        setTheme(getPreferredTheme(theme))
+      }
+    })
+  }, [])
+
+  return (
+    <HashRouter>
+      <Suspense fallback={loading}>
+        <Routes>
+          <Route exact path="/login" name="Login Page" element={<Login />} />
+          <Route exact path="/register" name="Register Page" element={<Register />} />
+          <Route exact path="/404" name="Page 404" element={<Page404 />} />
+          <Route exact path="/500" name="Page 500" element={<Page500 />} />
+          <Route path="*" name="Home" element={<DefaultLayout />} />
+        </Routes>
+      </Suspense>
+    </HashRouter>
+  )
 }
 
 export default App
diff --git a/src/components/AppHeader.js b/src/components/AppHeader.js
index dd5f544e3..25443a13d 100644
--- a/src/components/AppHeader.js
+++ b/src/components/AppHeader.js
@@ -3,6 +3,10 @@ import { NavLink } from 'react-router-dom'
 import { useSelector, useDispatch } from 'react-redux'
 import {
   CContainer,
+  CDropdown,
+  CDropdownItem,
+  CDropdownMenu,
+  CDropdownToggle,
   CHeader,
   CHeaderBrand,
   CHeaderDivider,
@@ -12,7 +16,15 @@ import {
   CNavItem,
 } from '@coreui/react'
 import CIcon from '@coreui/icons-react'
-import { cilBell, cilEnvelopeOpen, cilList, cilMenu } from '@coreui/icons'
+import {
+  cilBell,
+  cilContrast,
+  cilEnvelopeOpen,
+  cilList,
+  cilMenu,
+  cilMoon,
+  cilSun,
+} from '@coreui/icons'
 
 import { AppBreadcrumb } from './index'
 import { AppHeaderDropdown } from './header/index'
@@ -21,6 +33,7 @@ import { logo } from 'src/assets/brand/logo'
 const AppHeader = () => {
   const dispatch = useDispatch()
   const sidebarShow = useSelector((state) => state.sidebarShow)
+  const theme = useSelector((state) => state.theme)
 
   return (
     <CHeader position="sticky" className="mb-4">
@@ -63,6 +76,52 @@ const AppHeader = () => {
               <CIcon icon={cilEnvelopeOpen} size="lg" />
             </CNavLink>
           </CNavItem>
+          <li className="nav-item py-2 py-lg-1">
+            <div className="vr h-100 mx-2 text-body text-opacity-75"></div>
+          </li>
+          <CDropdown variant="nav-item" placement="bottom-end">
+            <CDropdownToggle caret={false}>
+              {theme === 'dark' ? (
+                <CIcon icon={cilMoon} size="xl" />
+              ) : theme === 'auto' ? (
+                <CIcon icon={cilContrast} size="xl" />
+              ) : (
+                <CIcon icon={cilSun} size="xl" />
+              )}
+            </CDropdownToggle>
+            <CDropdownMenu>
+              <CDropdownItem
+                active={theme === 'light'}
+                className="d-flex align-items-center"
+                component="button"
+                type="button"
+                onClick={() => dispatch({ type: 'setTheme', theme: 'light' })}
+              >
+                <CIcon className="me-2" icon={cilSun} size="lg" /> Light
+              </CDropdownItem>
+              <CDropdownItem
+                active={theme === 'dark'}
+                className="d-flex align-items-center"
+                component="button"
+                type="button"
+                onClick={() => dispatch({ type: 'setTheme', theme: 'dark' })}
+              >
+                <CIcon className="me-2" icon={cilMoon} size="lg" /> Dark
+              </CDropdownItem>
+              <CDropdownItem
+                active={theme === 'auto'}
+                className="d-flex align-items-center"
+                component="button"
+                type="button"
+                onClick={() => dispatch({ type: 'setTheme', theme: 'auto' })}
+              >
+                <CIcon className="me-2" icon={cilContrast} size="lg" /> Auto
+              </CDropdownItem>
+            </CDropdownMenu>
+          </CDropdown>
+          <li className="nav-item py-2 py-lg-1">
+            <div className="vr h-100 mx-2 text-body text-opacity-75"></div>
+          </li>
         </CHeaderNav>
         <CHeaderNav className="ms-3">
           <AppHeaderDropdown />
diff --git a/src/components/header/AppHeaderDropdown.js b/src/components/header/AppHeaderDropdown.js
index 5be919ee9..4332d8e52 100644
--- a/src/components/header/AppHeaderDropdown.js
+++ b/src/components/header/AppHeaderDropdown.js
@@ -31,7 +31,7 @@ const AppHeaderDropdown = () => {
         <CAvatar src={avatar8} size="md" />
       </CDropdownToggle>
       <CDropdownMenu className="pt-0" placement="bottom-end">
-        <CDropdownHeader className="bg-light fw-semibold py-2">Account</CDropdownHeader>
+        <CDropdownHeader className="bg-body-secondary fw-semibold py-2">Account</CDropdownHeader>
         <CDropdownItem href="#">
           <CIcon icon={cilBell} className="me-2" />
           Updates
@@ -60,7 +60,7 @@ const AppHeaderDropdown = () => {
             42
           </CBadge>
         </CDropdownItem>
-        <CDropdownHeader className="bg-light fw-semibold py-2">Settings</CDropdownHeader>
+        <CDropdownHeader className="bg-body-secondary fw-semibold py-2">Settings</CDropdownHeader>
         <CDropdownItem href="#">
           <CIcon icon={cilUser} className="me-2" />
           Profile
diff --git a/src/layout/DefaultLayout.js b/src/layout/DefaultLayout.js
index 43bd64432..0b6311774 100644
--- a/src/layout/DefaultLayout.js
+++ b/src/layout/DefaultLayout.js
@@ -5,7 +5,7 @@ const DefaultLayout = () => {
   return (
     <div>
       <AppSidebar />
-      <div className="wrapper d-flex flex-column min-vh-100 bg-light">
+      <div className="wrapper d-flex flex-column min-vh-100 bg-body-tertiary">
         <AppHeader />
         <div className="body flex-grow-1 px-3">
           <AppContent />
diff --git a/src/scss/_example.scss b/src/scss/_example.scss
index f8791fb21..fdf64254b 100644
--- a/src/scss/_example.scss
+++ b/src/scss/_example.scss
@@ -1,33 +1,23 @@
+/* stylelint-disable declaration-no-important, scss/selector-no-redundant-nesting-selector */
+@import "@coreui/coreui/scss/functions";
+@import "@coreui/coreui/scss/variables";
+@import "@coreui/coreui/scss/mixins";
+
 .example {
   &:not(:first-child) {
     margin-top: 1.5rem;
   }
 
   .tab-content {
-    background-color: $light-50 !important;
-
-    @at-root .dark-theme & {
-      background-color: rgba(255, 255, 255, .1) !important;
-    }
-  }
-
-  code[class*="language-"],
-  pre[class*="language-"] {
-    font-size: .875rem !important;
-  }
-
-  :not(pre) > code[class*="language-"],
-  pre[class*="language-"] {
-    background: transparent;
+    background-color: var(--#{$prefix}tertiary-bg) !important;
   }
 
   & + p {
-    margin-top: 1.5rem
+    margin-top: 1.5rem;
   }
 
   // Components examples
-  .preview,
-  .preview .col {
+  .preview {
     + p {
       margin-top: 2rem;
     }
@@ -105,5 +95,20 @@
       margin-top: .5rem;
       margin-bottom: .5rem;
     }
+
+    .docs-example-modal {
+      .modal {
+        position: static;
+        display: block;
+      }
+    }
   }
 }
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    .example .tab-content {
+      background-color: var(--#{$prefix}secondary-bg) !important;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index 373dbeec2..697b08ade 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -1,1791 +1,3 @@
-// Variables
+// Variable overrides
 //
-// If you want to customize your project please uncomment and update one of the following variables.
-
-// Color system
-
-// scss-docs-start gray-color-variables
-// $white:     #fff !default;
-// $gray-base: #3c4b64 !default;
-// $gray-100:  #ebedef !default;
-// $gray-200:  #d8dbe0 !default;
-// $gray-300:  #c4c9d0 !default;
-// $gray-400:  #b1b7c1 !default;
-// $gray-500:  #9da5b1 !default;
-// $gray-600:  #8a93a2 !default;
-// $gray-700:  #768192 !default;
-// $gray-800:  #636f83 !default;
-// $gray-900:  #4f5d73 !default;
-// $black:     #000015 !default;
-// scss-docs-end gray-color-variables
-
-// fusv-disable
-// scss-docs-start gray-colors-map
-// $grays: (
-//   "100": $gray-100,
-//   "200": $gray-200,
-//   "300": $gray-300,
-//   "400": $gray-400,
-//   "500": $gray-500,
-//   "600": $gray-600,
-//   "700": $gray-700,
-//   "800": $gray-800,
-//   "900": $gray-900
-// ) !default;
-// scss-docs-end gray-colors-map
-// fusv-enable
-
-// $high-emphasis:            rgba(shift-color($gray-base, +26), .95) !default;
-// $medium-emphasis:          rgba(shift-color($gray-base, +26), .681) !default;
-// $disabled:                 rgba(shift-color($gray-base, +26), .38) !default;
-
-// $high-emphasis-inverse:    rgba($white, .87) !default;
-// $medium-emphasis-inverse:  rgba($white, .6) !default;
-// $disabled-inverse:         rgba($white, .38) !default;
-
-// scss-docs-start color-variables
-// $blue:    #0d6efd !default;
-// $indigo:  #6610f2 !default;
-// $purple:  #6f42c1 !default;
-// $pink:    #d63384 !default;
-// $red:     #dc3545 !default;
-// $orange:  #fd7e14 !default;
-// $yellow:  #ffc107 !default;
-// $green:   #198754 !default;
-// $teal:    #20c997 !default;
-// $cyan:    #0dcaf0 !default;
-// scss-docs-end color-variables
-
-// scss-docs-start colors-map
-// $colors: (
-//   "blue":       $blue,
-//   "indigo":     $indigo,
-//   "purple":     $purple,
-//   "pink":       $pink,
-//   "red":        $red,
-//   "orange":     $orange,
-//   "yellow":     $yellow,
-//   "green":      $green,
-//   "teal":       $teal,
-//   "cyan":       $cyan,
-//   "white":      $white,
-//   "gray":       $gray-600,
-//   "gray-dark":  $gray-800
-// ) !default;
-// scss-docs-end colors-map
-
-// fusv-disable
-// $primary-dark:  #1f1498 !default;
-// $primary-base:  #321fdb !default;
-// $primary-50:    #988fed !default;
-// $primary-25:    #ccc7f6 !default;
-
-// $secondary-dark:  #212233 !default;
-// $secondary-base:  #9da5b1 !default;
-// $secondary-50:    #9da5b1 !default;
-// $secondary-25:    #ced2d8 !default;
-
-// $success-dark:  #1b9e3e !default;
-// $success-base:  #2eb85c !default;
-// $success-50:    #96dbad !default;
-// $success-25:    #cbedd6 !default;
-
-// $info-dark:  #2982cc !default;
-// $info-base:  #39f !default;
-// $info-50:    #80c6ff !default;
-// $info-25:    #c0e6ff !default;
-
-// $warning-dark:  #f6960b !default;
-// $warning-base:  #f9b115 !default;
-// $warning-50:    #fcd88a !default;
-// $warning-25:    #feecc5 !default;
-
-// $danger-dark:  #d93737 !default;
-// $danger-base:  #e55353 !default;
-// $danger-50:    #f2a9a9 !default;
-// $danger-25:    #f9d4d4 !default;
-
-// $light-dark:     $gray-100 !default;
-// $light-base:     $gray-100 !default;
-// $light-50:       shift-color($light-base, -70) !default;
-// $light-25:       shift-color($light-base, -80) !default;
-
-// $dark-dark:      $gray-900 !default;
-// $dark-base:      $gray-900 !default;
-// $dark-50:        shift-color($dark-base, -70) !default;
-// $dark-25:        shift-color($dark-base, -80) !default;
-// fusv-enable
-
-// scss-docs-start theme-color-variables
-// $primary:       $primary-base !default;
-// $secondary:     $secondary-base !default;
-// $success:       $success-base !default;
-// $info:          $info-base !default;
-// $warning:       $warning-base !default;
-// $danger:        $danger-base !default;
-// $light:         $light-base !default;
-// $dark:          $dark-base !default;
-// scss-docs-end theme-color-variables
-
-// scss-docs-start theme-colors-map
-// $theme-colors: (
-//   "primary":    $primary,
-//   "secondary":  $secondary,
-//   "success":    $success,
-//   "info":       $info,
-//   "warning":    $warning,
-//   "danger":     $danger,
-//   "light":      $light,
-//   "dark":       $dark
-// ) !default;
-// scss-docs-end theme-colors-map
-
-// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
-// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
-// $min-contrast-ratio:   4.5 !default;
-
-// Customize the light and dark text colors for use in our color contrast function.
-// $color-contrast-dark:      $high-emphasis-inverse !default;
-// $color-contrast-light:     $high-emphasis !default;
-
-// fusv-disable
-// $blue-100: tint-color($blue, 80%) !default;
-// $blue-200: tint-color($blue, 60%) !default;
-// $blue-300: tint-color($blue, 40%) !default;
-// $blue-400: tint-color($blue, 20%) !default;
-// $blue-500: $blue !default;
-// $blue-600: shade-color($blue, 20%) !default;
-// $blue-700: shade-color($blue, 40%) !default;
-// $blue-800: shade-color($blue, 60%) !default;
-// $blue-900: shade-color($blue, 80%) !default;
-
-// $indigo-100: tint-color($indigo, 80%) !default;
-// $indigo-200: tint-color($indigo, 60%) !default;
-// $indigo-300: tint-color($indigo, 40%) !default;
-// $indigo-400: tint-color($indigo, 20%) !default;
-// $indigo-500: $indigo !default;
-// $indigo-600: shade-color($indigo, 20%) !default;
-// $indigo-700: shade-color($indigo, 40%) !default;
-// $indigo-800: shade-color($indigo, 60%) !default;
-// $indigo-900: shade-color($indigo, 80%) !default;
-
-// $purple-100: tint-color($purple, 80%) !default;
-// $purple-200: tint-color($purple, 60%) !default;
-// $purple-300: tint-color($purple, 40%) !default;
-// $purple-400: tint-color($purple, 20%) !default;
-// $purple-500: $purple !default;
-// $purple-600: shade-color($purple, 20%) !default;
-// $purple-700: shade-color($purple, 40%) !default;
-// $purple-800: shade-color($purple, 60%) !default;
-// $purple-900: shade-color($purple, 80%) !default;
-
-// $pink-100: tint-color($pink, 80%) !default;
-// $pink-200: tint-color($pink, 60%) !default;
-// $pink-300: tint-color($pink, 40%) !default;
-// $pink-400: tint-color($pink, 20%) !default;
-// $pink-500: $pink !default;
-// $pink-600: shade-color($pink, 20%) !default;
-// $pink-700: shade-color($pink, 40%) !default;
-// $pink-800: shade-color($pink, 60%) !default;
-// $pink-900: shade-color($pink, 80%) !default;
-
-// $red-100: tint-color($red, 80%) !default;
-// $red-200: tint-color($red, 60%) !default;
-// $red-300: tint-color($red, 40%) !default;
-// $red-400: tint-color($red, 20%) !default;
-// $red-500: $red !default;
-// $red-600: shade-color($red, 20%) !default;
-// $red-700: shade-color($red, 40%) !default;
-// $red-800: shade-color($red, 60%) !default;
-// $red-900: shade-color($red, 80%) !default;
-
-// $orange-100: tint-color($orange, 80%) !default;
-// $orange-200: tint-color($orange, 60%) !default;
-// $orange-300: tint-color($orange, 40%) !default;
-// $orange-400: tint-color($orange, 20%) !default;
-// $orange-500: $orange !default;
-// $orange-600: shade-color($orange, 20%) !default;
-// $orange-700: shade-color($orange, 40%) !default;
-// $orange-800: shade-color($orange, 60%) !default;
-// $orange-900: shade-color($orange, 80%) !default;
-
-// $yellow-100: tint-color($yellow, 80%) !default;
-// $yellow-200: tint-color($yellow, 60%) !default;
-// $yellow-300: tint-color($yellow, 40%) !default;
-// $yellow-400: tint-color($yellow, 20%) !default;
-// $yellow-500: $yellow !default;
-// $yellow-600: shade-color($yellow, 20%) !default;
-// $yellow-700: shade-color($yellow, 40%) !default;
-// $yellow-800: shade-color($yellow, 60%) !default;
-// $yellow-900: shade-color($yellow, 80%) !default;
-
-// $green-100: tint-color($green, 80%) !default;
-// $green-200: tint-color($green, 60%) !default;
-// $green-300: tint-color($green, 40%) !default;
-// $green-400: tint-color($green, 20%) !default;
-// $green-500: $green !default;
-// $green-600: shade-color($green, 20%) !default;
-// $green-700: shade-color($green, 40%) !default;
-// $green-800: shade-color($green, 60%) !default;
-// $green-900: shade-color($green, 80%) !default;
-
-// $teal-100: tint-color($teal, 80%) !default;
-// $teal-200: tint-color($teal, 60%) !default;
-// $teal-300: tint-color($teal, 40%) !default;
-// $teal-400: tint-color($teal, 20%) !default;
-// $teal-500: $teal !default;
-// $teal-600: shade-color($teal, 20%) !default;
-// $teal-700: shade-color($teal, 40%) !default;
-// $teal-800: shade-color($teal, 60%) !default;
-// $teal-900: shade-color($teal, 80%) !default;
-
-// $cyan-100: tint-color($cyan, 80%) !default;
-// $cyan-200: tint-color($cyan, 60%) !default;
-// $cyan-300: tint-color($cyan, 40%) !default;
-// $cyan-400: tint-color($cyan, 20%) !default;
-// $cyan-500: $cyan !default;
-// $cyan-600: shade-color($cyan, 20%) !default;
-// $cyan-700: shade-color($cyan, 40%) !default;
-// $cyan-800: shade-color($cyan, 60%) !default;
-// $cyan-900: shade-color($cyan, 80%) !default;
-// fusv-enable
-
-// Characters which are escaped by the escape-svg function
-// $escaped-characters: (
-//   ("<", "%3c"),
-//   (">", "%3e"),
-//   ("#", "%23"),
-//   ("(", "%28"),
-//   (")", "%29"),
-// ) !default;
-
-// Options
-//
-// Quickly modify global styling by enabling or disabling optional features.
-
-// $enable-caret:                      true !default;
-// $enable-rounded:                    true !default;
-// $enable-shadows:                    false !default;
-// $enable-gradients:                  false !default;
-// $enable-transitions:                true !default;
-// $enable-reduced-motion:             true !default;
-// $enable-smooth-scroll:              true !default;
-// $enable-grid-classes:               true !default;
-// $enable-button-pointers:            true !default;
-// $enable-rfs:                        true !default;
-// $enable-validation-icons:           true !default;
-// $enable-negative-margins:           false !default;
-// $enable-deprecation-messages:       true !default;
-// $enable-important-utilities:        true !default;
-// $enable-contrast-ratio-correction:  true !default;
-// $enable-contrast-ratio-warnings:    false !default;
-// $enable-ltr:                        true !default;
-// $enable-rtl:                        false !default;
-
-// Set mobile breakpoint
-
-// $mobile-breakpoint:           md !default;
-
-// Prefix for :root CSS variables
-
-// $variable-prefix:             cui- !default;
-
-// Gradient
-//
-// The gradient which is added to components if `$enable-gradients` is `true`
-// This gradient is also added to elements with `.bg-gradient`
-// scss-docs-start variable-gradient
-// $gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0)) !default;
-// scss-docs-end variable-gradient
-
-// Spacing
-//
-// Control the default styling of most Bootstrap elements by modifying these
-// variables. Mostly focused on spacing.
-// You can add more entries to the $spacers map, should you need more variation.
-
-// scss-docs-start spacer-variables-maps
-// $spacer: 1rem !default;
-// $spacers: (
-//   0: 0,
-//   1: $spacer / 4,
-//   2: $spacer / 2,
-//   3: $spacer,
-//   4: $spacer * 1.5,
-//   5: $spacer * 3,
-// ) !default;
-
-// $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
-// scss-docs-end spacer-variables-maps
-
-// Position
-//
-// Define the edge positioning anchors of the position utilities.
-
-// scss-docs-start position-map
-// $position-values: (
-//   0: 0,
-//   50: 50%,
-//   100: 100%
-// ) !default;
-// scss-docs-end position-map
-
-// Body
-//
-// Settings for the `<body>` element.
-
-// $body-bg:                   $white !default;
-// $body-color:                $high-emphasis !default;
-// $body-text-align:           null !default;
-
-
-// Links
-//
-// Style anchor elements.
-
-// $link-color:                              $primary !default;
-// $link-decoration:                         underline !default;
-// $link-shade-percentage:                   20% !default;
-// $link-hover-color:                        shift-color($link-color, $link-shade-percentage) !default;
-// $link-hover-decoration:                   null !default;
-
-// $stretched-link-pseudo-element:           after !default;
-// $stretched-link-z-index:                  1 !default;
-
-// Paragraphs
-//
-// Style p element.
-
-// $paragraph-margin-bottom:   1rem !default;
-
-
-// Grid breakpoints
-//
-// Define the minimum dimensions at which your layout will change,
-// adapting to different screen sizes, for use in media queries.
-
-// scss-docs-start grid-breakpoints
-// $grid-breakpoints: (
-//   xs: 0,
-//   sm: 576px,
-//   md: 768px,
-//   lg: 992px,
-//   xl: 1200px,
-//   xxl: 1400px
-// ) !default;
-// scss-docs-end grid-breakpoints
-
-// @include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
-// @include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
-
-
-// Grid containers
-//
-// Define the maximum width of `.container` for different screen sizes.
-
-// scss-docs-start container-max-widths
-// $container-max-widths: (
-//   sm: 540px,
-//   md: 720px,
-//   lg: 960px,
-//   xl: 1140px,
-//   xxl: 1320px
-// ) !default;
-// scss-docs-end container-max-widths
-
-// @include _assert-ascending($container-max-widths, "$container-max-widths");
-
-
-// Grid columns
-//
-// Set the number of columns and specify the width of the gutters.
-
-// $grid-columns:                12 !default;
-// $grid-gutter-width:           1.5rem !default;
-// $grid-row-columns:            6 !default;
-
-// $gutters: $spacers !default;
-
-// Container padding
-
-// $container-padding-x: $grid-gutter-width / 2 !default;
-
-
-// Components
-//
-// Define common padding and border radius sizes and more.
-
-// scss-docs-start border-variables
-// $border-width:                1px !default;
-// $border-widths: (
-//   1: 1px,
-//   2: 2px,
-//   3: 3px,
-//   4: 4px,
-//   5: 5px
-// ) !default;
-
-// $border-color:                $gray-200 !default;
-// scss-docs-end border-variables
-
-// scss-docs-start border-radius-variables
-// $border-radius:               .25rem !default;
-// $border-radius-sm:            .2rem !default;
-// $border-radius-lg:            .3rem !default;
-// $border-radius-pill:          50rem !default;
-// scss-docs-end border-radius-variables
-
-// scss-docs-start box-shadow-variables
-// $box-shadow:                  0 .5rem 1rem rgba($black, .15) !default;
-// $box-shadow-sm:               0 .125rem .25rem rgba($black, .075) !default;
-// $box-shadow-lg:               0 1rem 3rem rgba($black, .175) !default;
-// $box-shadow-inset:            inset 0 1px 2px rgba($black, .075) !default;
-// scss-docs-end box-shadow-variables
-
-// $component-active-color:      $high-emphasis-inverse !default;
-// $component-active-bg:         $primary !default;
-
-// scss-docs-start caret-variables
-// $caret-width:                 .3em !default;
-// $caret-vertical-align:        $caret-width * .85 !default;
-// $caret-spacing:               $caret-width * .85 !default;
-// scss-docs-end caret-variables
-
-// $transition-base:             all .2s ease-in-out !default;
-// $transition-fade:             opacity .15s linear !default;
-// scss-docs-start collapse-transition
-// $transition-collapse:         height .35s ease !default;
-// scss-docs-end collapse-transition
-
-// stylelint-disable function-disallowed-list
-// scss-docs-start aspect-ratios
-// $aspect-ratios: (
-//   "1x1": 100%,
-//   "4x3": calc(3 / 4 * 100%),
-//   "16x9": calc(9 / 16 * 100%),
-//   "21x9": calc(9 / 21 * 100%)
-// ) !default;
-// scss-docs-end aspect-ratios
-// stylelint-enable function-disallowed-list
-
-// Typography
-//
-// Font, line-height, and color for body text, headings, and more.
-
-// scss-docs-start font-variables
-// stylelint-disable value-keyword-case
-// $font-family-sans-serif:      system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
-// $font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
-// stylelint-enable value-keyword-case
-// $font-family-base:            var(--#{$variable-prefix}font-sans-serif) !default;
-// $font-family-code:            var(--#{$variable-prefix}font-monospace) !default;
-
-// $font-size-root effects the value of `rem`, which is used for as well font sizes, paddings and margins
-// $font-size-base effects the font size of the body text
-// $font-size-root:              null !default;
-// $font-size-base:              1rem !default; // Assumes the browser default, typically `16px`
-// $font-size-sm:                $font-size-base * .875 !default;
-// $font-size-lg:                $font-size-base * 1.25 !default;
-
-// $font-weight-lighter:         lighter !default;
-// $font-weight-light:           300 !default;
-// $font-weight-normal:          400 !default;
-// $font-weight-medium:          500 !default;
-// $font-weight-semibold:        600 !default;
-// $font-weight-bold:            700 !default;
-// $font-weight-bolder:          bolder !default;
-
-// $font-weight-base:            $font-weight-normal !default;
-
-// $line-height-base:            1.5 !default;
-// $line-height-sm:              1.25 !default;
-// $line-height-lg:              2 !default;
-
-// $h1-font-size:                $font-size-base * 2.5 !default;
-// $h2-font-size:                $font-size-base * 2 !default;
-// $h3-font-size:                $font-size-base * 1.75 !default;
-// $h4-font-size:                $font-size-base * 1.5 !default;
-// $h5-font-size:                $font-size-base * 1.25 !default;
-// $h6-font-size:                $font-size-base !default;
-// scss-docs-end font-variables
-
-// scss-docs-start font-sizes
-// $font-sizes: (
-//   1: $h1-font-size,
-//   2: $h2-font-size,
-//   3: $h3-font-size,
-//   4: $h4-font-size,
-//   5: $h5-font-size,
-//   6: $h6-font-size
-// ) !default;
-// scss-docs-end font-sizes
-
-// scss-docs-start headings-variables
-// $headings-margin-bottom:      $spacer / 2 !default;
-// $headings-font-family:        null !default;
-// $headings-font-style:         null !default;
-// $headings-font-weight:        500 !default;
-// $headings-line-height:        1.2 !default;
-// $headings-color:              unset !default;
-// scss-docs-end headings-variables
-
-// scss-docs-start display-headings
-// $display-font-sizes: (
-//   1: 5rem,
-//   2: 4.5rem,
-//   3: 4rem,
-//   4: 3.5rem,
-//   5: 3rem,
-//   6: 2.5rem
-// ) !default;
-
-// $display-font-weight: 300 !default;
-// $display-line-height: $headings-line-height !default;
-// scss-docs-end display-headings
-
-// scss-docs-start type-variables
-// $lead-font-size:                $font-size-base * 1.25 !default;
-// $lead-font-weight:              300 !default;
-
-// $small-font-size:               .875em !default;
-
-// $sub-sup-font-size:             .75em !default;
-
-// $text-high-emphasis:            $high-emphasis !default;
-// $text-medium-emphasis:          $medium-emphasis !default;
-// $text-disabled:                 $disabled !default;
-// $text-muted:                    $disabled !default;
-
-// $text-high-emphasis-inverse:    $high-emphasis-inverse !default;
-// $text-medium-emphasis-inverse:  $medium-emphasis-inverse !default;
-// $text-disabled-inverse:         $disabled-inverse !default;
-
-// $initialism-font-size:          $small-font-size !default;
-
-// $blockquote-margin-y:           $spacer !default;
-// $blockquote-font-size:          $font-size-base * 1.25 !default;
-// $blockquote-footer-color:       $gray-600 !default;
-// $blockquote-footer-font-size:   $small-font-size !default;
-
-// $hr-margin-y:                   $spacer !default;
-// $hr-color:                      inherit !default;
-// $hr-height:                     $border-width !default;
-// $hr-opacity:                    .25 !default;
-
-// $vr-color:                      inherit !default;
-// $vr-width:                      $border-width !default;
-// $vr-opacity:                    .25 !default;
-
-// $legend-margin-bottom:          .5rem !default;
-// $legend-font-size:              1.5rem !default;
-// $legend-font-weight:            null !default;
-
-// $mark-padding:                  .2em !default;
-
-// $dt-font-weight:                $font-weight-bold !default;
-
-// $nested-kbd-font-weight:        $font-weight-bold !default;
-
-// $list-inline-padding:           .5rem !default;
-
-// $mark-bg:                      #fcf8e3 !default;
-// scss-docs-end type-variables
-
-// Icons
-// $icon-size-base:  1rem !default;
-// $icon-size-sm:    $icon-size-base * .875 !default;
-// $icon-size-lg:    $icon-size-base * 1.25 !default;
-// $icon-size-xl:    $icon-size-base * 1.5 !default;
-
-
-// Tables
-//
-// Customizes the `.table` component with basic values, each used across all table variations.
-
-// scss-docs-start table-variables
-// $table-cell-padding-y:        .5rem !default;
-// $table-cell-padding-x:        .5rem !default;
-// $table-cell-padding-y-sm:     .25rem !default;
-// $table-cell-padding-x-sm:     .25rem !default;
-
-// $table-cell-vertical-align:   top !default;
-
-// $table-color:                 $body-color !default;
-// $table-bg:                    transparent !default;
-
-// $table-th-font-weight:        600 !default;
-
-// $table-striped-color:         $table-color !default;
-// $table-striped-bg-factor:     .05 !default;
-// $table-striped-bg:            rgba($black, $table-striped-bg-factor) !default;
-
-// $table-active-color:          $table-color !default;
-// $table-active-bg-factor:      .1 !default;
-// $table-active-bg:             rgba($black, $table-active-bg-factor) !default;
-
-// $table-hover-color:           $table-color !default;
-// $table-hover-bg-factor:       .075 !default;
-// $table-hover-bg:              rgba($black, $table-hover-bg-factor) !default;
-
-// $table-border-factor:         .1 !default;
-// $table-border-width:          $border-width !default;
-// $table-border-color:          $border-color !default;
-
-// $table-striped-order:         odd !default;
-
-// $table-group-separator-color: currentColor !default;
-
-// $table-caption-color:         $text-muted !default;
-
-// $table-bg-scale:              -80% !default;
-// scss-docs-end table-variables
-
-// scss-docs-start table-loop
-// $table-variants: (
-//   "primary":    table-color-map(shift-color($primary, $table-bg-scale)),
-//   "secondary":  table-color-map(shift-color($secondary, $table-bg-scale)),
-//   "success":    table-color-map(shift-color($success, $table-bg-scale)),
-//   "danger":     table-color-map(shift-color($danger, $table-bg-scale)),
-//   "warning":    table-color-map(shift-color($warning, $table-bg-scale)),
-//   "info":       table-color-map(shift-color($info, $table-bg-scale)),
-//   "light":      table-color-map(shift-color($light, $table-bg-scale)),
-//   "dark":       table-color-map(shift-color($dark, $table-bg-scale))
-// ) !default;
-// scss-docs-end table-loop
-
-
-// Buttons + Forms
-//
-// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
-
-// scss-docs-start input-btn-variables
-// $input-btn-padding-y:         .375rem !default;
-// $input-btn-padding-x:         .75rem !default;
-// $input-btn-font-family:       null !default;
-// $input-btn-font-size:         $font-size-base !default;
-// $input-btn-line-height:       $line-height-base !default;
-
-// $input-btn-focus-width:         .25rem !default;
-// $input-btn-focus-color-opacity: .25 !default;
-// $input-btn-focus-color:         rgba($component-active-bg, $input-btn-focus-color-opacity) !default;
-// $input-btn-focus-blur:          0 !default;
-// $input-btn-focus-box-shadow:    0 0 $input-btn-focus-blur $input-btn-focus-width $input-btn-focus-color !default;
-
-// $input-btn-padding-y-sm:      .25rem !default;
-// $input-btn-padding-x-sm:      .5rem !default;
-// $input-btn-font-size-sm:      $font-size-sm !default;
-
-// $input-btn-padding-y-lg:      .5rem !default;
-// $input-btn-padding-x-lg:      1rem !default;
-// $input-btn-font-size-lg:      $font-size-lg !default;
-
-// $input-btn-border-width:      $border-width !default;
-// scss-docs-end input-btn-variables
-
-
-// Buttons
-//
-// For each of Bootstrap's buttons, define text, background, and border color.
-
-// scss-docs-start btn-variables
-// $btn-padding-y:               $input-btn-padding-y !default;
-// $btn-padding-x:               $input-btn-padding-x !default;
-// $btn-font-family:             $input-btn-font-family !default;
-// $btn-font-size:               $input-btn-font-size !default;
-// $btn-line-height:             $input-btn-line-height !default;
-// $btn-white-space:             null !default; // Set to `nowrap` to prevent text wrapping
-
-// $btn-padding-y-sm:            $input-btn-padding-y-sm !default;
-// $btn-padding-x-sm:            $input-btn-padding-x-sm !default;
-// $btn-font-size-sm:            $input-btn-font-size-sm !default;
-
-// $btn-padding-y-lg:            $input-btn-padding-y-lg !default;
-// $btn-padding-x-lg:            $input-btn-padding-x-lg !default;
-// $btn-font-size-lg:            $input-btn-font-size-lg !default;
-
-// $btn-border-width:            $input-btn-border-width !default;
-
-// $btn-font-weight:             $font-weight-normal !default;
-// $btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;
-// $btn-focus-width:             $input-btn-focus-width !default;
-// $btn-focus-box-shadow:        $input-btn-focus-box-shadow !default;
-// $btn-disabled-opacity:        .65 !default;
-// $btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125) !default;
-
-// $btn-link-color:              $link-color !default;
-// $btn-link-hover-color:        $link-hover-color !default;
-// $btn-link-disabled-color:     $gray-600 !default;
-
-// Allows for customizing button radius independently from global border radius
-// $btn-border-radius:           $border-radius !default;
-// $btn-border-radius-sm:        $border-radius-sm !default;
-// $btn-border-radius-lg:        $border-radius-lg !default;
-
-// $btn-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
-
-// $btn-hover-bg-shade-amount:       15% !default;
-// $btn-hover-bg-tint-amount:        15% !default;
-// $btn-hover-border-shade-amount:   20% !default;
-// $btn-hover-border-tint-amount:    10% !default;
-// $btn-active-bg-shade-amount:      20% !default;
-// $btn-active-bg-tint-amount:       20% !default;
-// $btn-active-border-shade-amount:  25% !default;
-// $btn-active-border-tint-amount:   10% !default;
-
-// $button-variants: (
-//   "primary": btn-color-map($primary, $primary),
-//   "secondary": btn-color-map($secondary, $secondary),
-//   "success": btn-color-map($success, $success),
-//   "danger": btn-color-map($danger, $danger),
-//   "warning": btn-color-map($warning, $warning),
-//   "info": btn-color-map($info, $info),
-//   "light": btn-color-map($light, $light),
-//   "dark": btn-color-map($dark, $dark)
-// ) !default;
-
-// $button-outline-ghost-variants: (
-//   "primary": btn-outline-color-map($primary),
-//   "secondary": btn-outline-color-map($secondary),
-//   "success": btn-outline-color-map($success),
-//   "danger": btn-outline-color-map($danger),
-//   "warning": btn-outline-color-map($warning),
-//   "info": btn-outline-color-map($info),
-//   "light": btn-outline-color-map($light),
-//   "dark": btn-outline-color-map($dark)
-// ) !default;
-// scss-docs-end btn-variables
-
-
-// Forms
-// scss-docs-start form-variables
-// scss-docs-start form-text-variables
-// $form-text-margin-top:                  .25rem !default;
-// $form-text-font-size:                   $small-font-size !default;
-// $form-text-font-style:                  null !default;
-// $form-text-font-weight:                 null !default;
-// $form-text-color:                       $text-muted !default;
-// scss-docs-end form-text-variables
-
-// scss-docs-start form-label-variables
-// $form-label-margin-bottom:              .5rem !default;
-// $form-label-font-size:                  null !default;
-// $form-label-font-style:                 null !default;
-// $form-label-font-weight:                null !default;
-// $form-label-color:                      null !default;
-// scss-docs-end form-label-variables
-
-// scss-docs-start form-input-variables
-// $input-padding-y:                       $input-btn-padding-y !default;
-// $input-padding-x:                       $input-btn-padding-x !default;
-// $input-font-family:                     $input-btn-font-family !default;
-// $input-font-size:                       $input-btn-font-size !default;
-// $input-font-weight:                     $font-weight-base !default;
-// $input-line-height:                     $input-btn-line-height !default;
-
-// $input-padding-y-sm:                    $input-btn-padding-y-sm !default;
-// $input-padding-x-sm:                    $input-btn-padding-x-sm !default;
-// $input-font-size-sm:                    $input-btn-font-size-sm !default;
-
-// $input-padding-y-lg:                    $input-btn-padding-y-lg !default;
-// $input-padding-x-lg:                    $input-btn-padding-x-lg !default;
-// $input-font-size-lg:                    $input-btn-font-size-lg !default;
-
-// $input-bg:                              $white !default;
-// $input-disabled-bg:                     $gray-200 !default;
-// $input-disabled-border-color:           $gray-400 !default;
-
-// $input-color:                           $body-color !default;
-// $input-border-color:                    $gray-400 !default;
-// $input-border-width:                    $input-btn-border-width !default;
-// $input-box-shadow:                      $box-shadow-inset !default;
-
-// $input-border-radius:                   $border-radius !default;
-// $input-border-radius-sm:                $border-radius-sm !default;
-// $input-border-radius-lg:                $border-radius-lg !default;
-
-// $input-focus-bg:                        $input-bg !default;
-// $input-focus-border-color:              tint-color($component-active-bg, 50%) !default;
-// $input-focus-color:                     $input-color !default;
-// $input-focus-width:                     $input-btn-focus-width !default;
-// $input-focus-box-shadow:                $input-btn-focus-box-shadow !default;
-
-// $input-placeholder-color:               $gray-600 !default;
-// $input-plaintext-color:                 $body-color !default;
-
-// $input-height-border:                   $input-border-width * 2 !default;
-
-// $input-height-inner:                    add($input-line-height * 1em, $input-padding-y * 2) !default;
-// $input-height-inner-half:               add($input-line-height * .5em, $input-padding-y) !default;
-// $input-height-inner-quarter:            add($input-line-height * .25em, $input-padding-y / 2) !default;
-
-// $input-height:                          add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;
-// $input-height-sm:                       add($input-line-height * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;
-// $input-height-lg:                       add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default;
-
-// $input-transition:                      border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
-// scss-docs-end form-input-variables
-
-// scss-docs-start form-check-variables
-// $form-check-input-width:                  1em !default;
-// $form-check-min-height:                   $font-size-base * $line-height-base !default;
-// $form-check-padding-start:                $form-check-input-width + .5em !default;
-// $form-check-margin-bottom:                .125rem !default;
-// $form-check-label-color:                  unset !default;
-// $form-check-label-cursor:                 null !default;
-// $form-check-transition:                   null !default;
-
-// $form-check-input-active-filter:          brightness(90%) !default;
-
-// $form-check-input-bg:                     $input-bg !default;
-// $form-check-input-border:                 1px solid rgba($black, .25) !default;
-// $form-check-input-border-radius:          .25em !default;
-// $form-check-radio-border-radius:          50% !default;
-// $form-check-input-focus-border:           $input-focus-border-color !default;
-// $form-check-input-focus-box-shadow:       $input-btn-focus-box-shadow !default;
-
-// $form-check-input-checked-color:          $component-active-color !default;
-// $form-check-input-checked-bg-color:       $component-active-bg !default;
-// $form-check-input-checked-border-color:   $form-check-input-checked-bg-color !default;
-// $form-check-input-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></svg>") !default;
-// $form-check-radio-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>") !default;
-
-// $form-check-input-indeterminate-color:          $component-active-color !default;
-// $form-check-input-indeterminate-bg-color:       $component-active-bg !default;
-// $form-check-input-indeterminate-border-color:   $form-check-input-indeterminate-bg-color !default;
-// $form-check-input-indeterminate-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>") !default;
-
-// $form-check-input-disabled-opacity:        .5 !default;
-// $form-check-label-disabled-opacity:        $form-check-input-disabled-opacity !default;
-// $form-check-btn-check-disabled-opacity:    $btn-disabled-opacity !default;
-
-// $form-check-inline-margin-end:    1rem !default;
-// scss-docs-end form-check-variables
-
-// scss-docs-start form-switch-variables
-// $form-switch-color:               rgba(0, 0, 0, .25) !default;
-// $form-switch-width:               1.5em !default;
-// $form-switch-padding-start:       $form-switch-width + .5em !default;
-// $form-switch-bg-image:            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color}'/></svg>") !default;
-// $form-switch-border-radius:       $form-switch-width !default;
-// $form-switch-transition:          background-position .15s ease-in-out !default;
-
-// $form-switch-focus-color:         $input-focus-border-color !default;
-// $form-switch-focus-bg-image:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-focus-color}'/></svg>") !default;
-
-// $form-switch-checked-color:       $component-active-color !default;
-// $form-switch-checked-bg-image:    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-checked-color}'/></svg>") !default;
-// $form-switch-checked-bg-position: right center !default;
-
-// $form-switch-widths: (
-//   lg: (
-//     width: 1.75em,
-//     height: 1.25em
-//   ),
-//   xl: (
-//     width: 2em,
-//     height: 1.5em
-//   )
-// ) !default;
-// scss-docs-end form-switch-variables
-
-// $form-check-inline-margin-end:    1rem !default;
-
-// scss-docs-start input-group-variables
-// $input-group-addon-padding-y:           $input-padding-y !default;
-// $input-group-addon-padding-x:           $input-padding-x !default;
-// $input-group-addon-font-weight:         $input-font-weight !default;
-// $input-group-addon-color:               $input-color !default;
-// $input-group-addon-bg:                  $gray-200 !default;
-// $input-group-addon-border-color:        $input-border-color !default;
-// scss-docs-end input-group-variables
-
-// scss-docs-start form-select-variables
-// $form-select-padding-y:             $input-padding-y !default;
-// $form-select-padding-x:             $input-padding-x !default;
-// $form-select-font-family:           $input-font-family !default;
-// $form-select-font-size:             $input-font-size !default;
-// $form-select-indicator-padding:     $form-select-padding-x * 3 !default; // Extra padding for background-image
-// $form-select-font-weight:           $input-font-weight !default;
-// $form-select-line-height:           $input-line-height !default;
-// $form-select-color:                 $input-color !default;
-// $form-select-bg:                    $input-bg !default;
-// $form-select-disabled-color:        null !default;
-// $form-select-disabled-bg:           $gray-200 !default;
-// $form-select-disabled-border-color: $input-disabled-border-color !default;
-// $form-select-bg-position:           right $form-select-padding-x center !default;
-// $form-select-bg-size:               16px 12px !default; // In pixels because image dimensions
-// $form-select-indicator-color:       $gray-800 !default;
-// $form-select-indicator:             url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>") !default;
-
-// $form-select-feedback-icon-padding-end: $form-select-padding-x * 2.5 + $form-select-indicator-padding !default;
-// $form-select-feedback-icon-position:    center right $form-select-indicator-padding !default;
-// $form-select-feedback-icon-size:        $input-height-inner-half $input-height-inner-half !default;
-
-// $form-select-border-width:        $input-border-width !default;
-// $form-select-border-color:        $input-border-color !default;
-// $form-select-border-radius:       $border-radius !default;
-// $form-select-box-shadow:          $box-shadow-inset !default;
-
-// $form-select-focus-border-color:  $input-focus-border-color !default;
-// $form-select-focus-width:         $input-focus-width !default;
-// $form-select-focus-box-shadow:    0 0 0 $form-select-focus-width $input-btn-focus-color !default;
-
-// $form-select-padding-y-sm:        $input-padding-y-sm !default;
-// $form-select-padding-x-sm:        $input-padding-x-sm !default;
-// $form-select-font-size-sm:        $input-font-size-sm !default;
-
-// $form-select-padding-y-lg:        $input-padding-y-lg !default;
-// $form-select-padding-x-lg:        $input-padding-x-lg !default;
-// $form-select-font-size-lg:        $input-font-size-lg !default;
-// scss-docs-end form-select-variables
-
-// scss-docs-start form-range-variables
-// $form-range-track-width:          100% !default;
-// $form-range-track-height:         .5rem !default;
-// $form-range-track-cursor:         pointer !default;
-// $form-range-track-bg:             $gray-300 !default;
-// $form-range-track-border-radius:  1rem !default;
-// $form-range-track-box-shadow:     $box-shadow-inset !default;
-
-// $form-range-thumb-width:                   1rem !default;
-// $form-range-thumb-height:                  $form-range-thumb-width !default;
-// $form-range-thumb-bg:                      $component-active-bg !default;
-// $form-range-thumb-border:                  0 !default;
-// $form-range-thumb-border-radius:           1rem !default;
-// $form-range-thumb-box-shadow:              0 .1rem .25rem rgba($black, .1) !default;
-// $form-range-thumb-focus-box-shadow:        0 0 0 1px $body-bg, $input-focus-box-shadow !default;
-// $form-range-thumb-focus-box-shadow-width:  $input-focus-width !default; // For focus box shadow issue in Edge
-// $form-range-thumb-active-bg:               tint-color($component-active-bg, 70%) !default;
-// $form-range-thumb-disabled-bg:             $gray-500 !default;
-// $form-range-thumb-transition:              background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
-// scss-docs-end form-range-variables
-
-// scss-docs-start form-file-variables
-// $form-file-button-color:          $input-color !default;
-// $form-file-button-bg:             $input-group-addon-bg !default;
-// $form-file-button-hover-bg:       shade-color($form-file-button-bg, 5%) !default;
-// scss-docs-end form-file-variables
-
-// scss-docs-start form-floating-variables
-// $form-floating-height:            add(3.5rem, $input-height-border) !default;
-// $form-floating-padding-x:         $input-padding-x !default;
-// $form-floating-padding-y:         1rem !default;
-// $form-floating-input-padding-t:   1.625rem !default;
-// $form-floating-input-padding-b:   .625rem !default;
-// $form-floating-label-opacity:     .65 !default;
-// $form-floating-label-transform:   scale(.85) translateY(-.5rem) translateX(.15rem) !default;
-// $form-floating-transition:        opacity .1s ease-in-out, transform .1s ease-in-out !default;
-// scss-docs-end form-floating-variables
-
-// Form validation
-
-// scss-docs-start form-feedback-variables
-// $form-feedback-margin-top:          $form-text-margin-top !default;
-// $form-feedback-font-size:           $form-text-font-size !default;
-// $form-feedback-font-style:          $form-text-font-style !default;
-// $form-feedback-valid-color:         $success !default;
-// $form-feedback-invalid-color:       $danger !default;
-
-// $form-feedback-icon-valid-color:    $form-feedback-valid-color !default;
-// $form-feedback-icon-valid:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>") !default;
-// $form-feedback-icon-invalid-color:  $form-feedback-invalid-color !default;
-// $form-feedback-icon-invalid:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !default;
-// scss-docs-end form-feedback-variables
-
-// scss-docs-start form-validation-states
-// $form-validation-states: (
-//   "valid": (
-//     "color": $form-feedback-valid-color,
-//     "icon": $form-feedback-icon-valid
-//   ),
-//   "invalid": (
-//     "color": $form-feedback-invalid-color,
-//     "icon": $form-feedback-icon-invalid
-//   )
-// ) !default;
-// scss-docs-end form-validation-states
-// scss-docs-end form-variables
-// Z-index master list
-//
-// Warning: Avoid customizing these values. They're used for a bird's eye view
-// of components dependent on the z-axis and are designed to all work together.
-
-// scss-docs-start zindex-stack
-// $zindex-dropdown:                   1000 !default;
-// $zindex-sticky:                     1020 !default;
-// $zindex-fixed:                      1030 !default;
-// $zindex-modal-backdrop:             1040 !default;
-// $zindex-offcanvas:                  1050 !default;
-// $zindex-modal:                      1060 !default;
-// $zindex-popover:                    1070 !default;
-// $zindex-tooltip:                    1080 !default;
-// $zindex-toaster:                    1090 !default;
-// scss-docs-end zindex-stack
-
-
-// Navs
-// scss-docs-start nav-variables
-// $nav-link-padding-y:                .5rem !default;
-// $nav-link-padding-x:                1rem !default;
-// $nav-link-font-size:                null !default;
-// $nav-link-font-weight:              null !default;
-// $nav-link-color:                    $link-color !default;
-// $nav-link-hover-color:              $link-hover-color !default;
-// $nav-link-transition:               color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out !default;
-// $nav-link-disabled-color:           $gray-600 !default;
-
-// $nav-tabs-border-color:             $gray-300 !default;
-// $nav-tabs-border-width:             $border-width !default;
-// $nav-tabs-border-radius:            $border-radius !default;
-// $nav-tabs-link-hover-border-color:  $gray-200 $gray-200 $nav-tabs-border-color !default;
-// $nav-tabs-link-active-color:        $gray-700 !default;
-// $nav-tabs-link-active-bg:           $body-bg !default;
-// $nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;
-
-// $nav-pills-border-radius:           $border-radius !default;
-// $nav-pills-link-active-color:       $component-active-color !default;
-// $nav-pills-link-active-bg:          $component-active-bg !default;
-// scss-docs-end nav-variables
-
-
-// Navbar
-
-// scss-docs-start navbar-variables
-// $navbar-padding-y:                  $spacer / 2 !default;
-// $navbar-padding-x:                  null !default;
-
-// $navbar-nav-link-padding-x:         .5rem !default;
-
-// $navbar-brand-font-size:            $font-size-lg !default;
-// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
-// $nav-link-height:                   $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
-// $navbar-brand-height:               $navbar-brand-font-size * $line-height-base !default;
-// $navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) / 2 !default;
-// $navbar-brand-margin-end:           1rem !default;
-
-// $navbar-toggler-padding-y:          .25rem !default;
-// $navbar-toggler-padding-x:          .75rem !default;
-// $navbar-toggler-font-size:          $font-size-lg !default;
-// $navbar-toggler-border-radius:      $btn-border-radius !default;
-// $navbar-toggler-focus-width:        $btn-focus-width !default;
-// $navbar-toggler-transition:         box-shadow .15s ease-in-out !default;
-// scss-docs-end navbar-variables
-
-// scss-docs-start navbar-theme-variables
-// $navbar-dark-color:                 $medium-emphasis-inverse !default;
-// $navbar-dark-hover-color:           $high-emphasis-inverse !default;
-// $navbar-dark-active-color:          $high-emphasis-inverse !default;
-// $navbar-dark-disabled-color:        $disabled-inverse !default;
-// $navbar-dark-toggler-icon-bg:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
-// $navbar-dark-toggler-border-color:  rgba($white, .1) !default;
-
-// $navbar-light-color:                $medium-emphasis !default;
-// $navbar-light-hover-color:          $high-emphasis !default;
-// $navbar-light-active-color:         $high-emphasis !default;
-// $navbar-light-disabled-color:       $disabled !default;
-// $navbar-light-toggler-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
-// $navbar-light-toggler-border-color: rgba($black, .1) !default;
-
-// $navbar-light-brand-color:                $navbar-light-active-color !default;
-// $navbar-light-brand-hover-color:          $navbar-light-active-color !default;
-// $navbar-dark-brand-color:                 $navbar-dark-active-color !default;
-// $navbar-dark-brand-hover-color:           $navbar-dark-active-color !default;
-// scss-docs-end navbar-theme-variables
-
-
-// Dropdowns
-//
-// Dropdown menu container and contents.
-// scss-docs-start dropdown-variables
-// $dropdown-min-width:                10rem !default;
-// $dropdown-padding-x:                0 !default;
-// $dropdown-padding-y:                .5rem !default;
-// $dropdown-spacer:                   .125rem !default;
-// $dropdown-font-size:                $font-size-base !default;
-// $dropdown-color:                    $body-color !default;
-// $dropdown-bg:                       $white !default;
-// $dropdown-border-color:             rgba($black, .15) !default;
-// $dropdown-border-radius:            $border-radius !default;
-// $dropdown-border-width:             $border-width !default;
-// $dropdown-inner-border-radius:      subtract($dropdown-border-radius, $dropdown-border-width) !default;
-// $dropdown-divider-bg:               $dropdown-border-color !default;
-// $dropdown-divider-margin-y:         $spacer / 2 !default;
-// $dropdown-box-shadow:               $box-shadow !default;
-
-// $dropdown-link-color:               $gray-900 !default;
-// $dropdown-link-hover-color:         shade-color($gray-900, 10%) !default;
-// $dropdown-link-hover-bg:            $gray-200 !default;
-
-// $dropdown-link-active-color:        $component-active-color !default;
-// $dropdown-link-active-bg:           $component-active-bg !default;
-
-// $dropdown-link-disabled-color:      $gray-500 !default;
-
-// $dropdown-item-padding-y:           $spacer / 4 !default;
-// $dropdown-item-padding-x:           $spacer !default;
-
-// $dropdown-header-color:             $gray-600 !default;
-// $dropdown-header-padding:           $dropdown-padding-y $dropdown-item-padding-x !default;
-// scss-docs-end dropdown-variables
-
-// scss-docs-start dropdown-dark-variables
-// $dropdown-dark-color:               $gray-300 !default;
-// $dropdown-dark-bg:                  $gray-800 !default;
-// $dropdown-dark-border-color:        $dropdown-border-color !default;
-// $dropdown-dark-divider-bg:          $dropdown-divider-bg !default;
-// $dropdown-dark-box-shadow:          null !default;
-// $dropdown-dark-link-color:          $dropdown-dark-color !default;
-// $dropdown-dark-link-hover-color:    $high-emphasis-inverse !default;
-// $dropdown-dark-link-hover-bg:       rgba($white, .15) !default;
-// $dropdown-dark-link-active-color:   $dropdown-link-active-color !default;
-// $dropdown-dark-link-active-bg:      $dropdown-link-active-bg !default;
-// $dropdown-dark-link-disabled-color: $gray-500 !default;
-// $dropdown-dark-header-color:        $gray-500 !default;
-// scss-docs-end dropdown-dark-variables
-
-
-// Pagination
-
-// scss-docs-start pagination-variables
-// $pagination-padding-y:              .375rem !default;
-// $pagination-padding-x:              .75rem !default;
-// $pagination-padding-y-sm:           .25rem !default;
-// $pagination-padding-x-sm:           .5rem !default;
-// $pagination-padding-y-lg:           .75rem !default;
-// $pagination-padding-x-lg:           1.5rem !default;
-
-// $pagination-color:                  $link-color !default;
-// $pagination-bg:                     $white !default;
-// $pagination-border-width:           $border-width !default;
-// $pagination-border-radius:          $border-radius !default;
-// $pagination-margin-start:           -$pagination-border-width !default;
-// $pagination-border-color:           $gray-300 !default;
-
-// $pagination-focus-color:            $link-hover-color !default;
-// $pagination-focus-bg:               $gray-200 !default;
-// $pagination-focus-box-shadow:       $input-btn-focus-box-shadow !default;
-// $pagination-focus-outline:          0 !default;
-
-// $pagination-hover-color:            $link-hover-color !default;
-// $pagination-hover-bg:               $gray-200 !default;
-// $pagination-hover-border-color:     $gray-300 !default;
-
-// $pagination-active-color:           $component-active-color !default;
-// $pagination-active-bg:              $component-active-bg !default;
-// $pagination-active-border-color:    $pagination-active-bg !default;
-
-// $pagination-disabled-color:         $gray-600 !default;
-// $pagination-disabled-bg:            $white !default;
-// $pagination-disabled-border-color:  $gray-300 !default;
-
-// $pagination-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
-// scss-docs-end pagination-variables
-
-// $pagination-border-radius-sm:       $border-radius-sm !default;
-// $pagination-border-radius-lg:       $border-radius-lg !default;
-// scss-docs-end pagination-variables
-
-
-// Cards
-// scss-docs-start card-variables
-// $card-spacer-y:                     $spacer !default;
-// $card-spacer-x:                     $spacer !default;
-// $card-title-spacer-y:               $spacer / 2 !default;
-// $card-border-width:                 $border-width !default;
-// $card-border-radius:                $border-radius !default;
-// $card-border-color:                 rgba($black, .125) !default;
-// $card-inner-border-radius:          subtract($card-border-radius, $card-border-width) !default;
-// $card-cap-padding-y:                $card-spacer-y / 2 !default;
-// $card-cap-padding-x:                $card-spacer-x !default;
-// $card-cap-bg:                       rgba($black, .03) !default;
-// $card-cap-color:                    unset !default;
-// $card-height:                       null !default;
-// $card-color:                        unset !default;
-// $card-bg:                           $white !default;
-// $card-img-overlay-padding:          $spacer !default;
-// $card-group-margin:                 $grid-gutter-width / 2 !default;
-// scss-docs-end card-variables
-
-// Accordion
-// scss-docs-start accordion-variables
-// $accordion-padding-y:                     1rem !default;
-// $accordion-padding-x:                     1.25rem !default;
-// $accordion-color:                         $body-color !default;
-// $accordion-bg:                            $body-bg !default;
-// $accordion-border-width:                  $border-width !default;
-// $accordion-border-color:                  rgba($black, .125) !default;
-// $accordion-border-radius:                 $border-radius !default;
-// $accordion-inner-border-radius:           subtract($accordion-border-radius, $accordion-border-width) !default;
-
-// $accordion-body-padding-y:                $accordion-padding-y !default;
-// $accordion-body-padding-x:                $accordion-padding-x !default;
-
-// $accordion-button-padding-y:              $accordion-padding-y !default;
-// $accordion-button-padding-x:              $accordion-padding-x !default;
-// $accordion-button-color:                  $accordion-color !default;
-// $accordion-button-bg:                     $accordion-bg !default;
-// $accordion-transition:                    $btn-transition, border-radius .15s ease !default;
-// $accordion-button-active-bg:              tint-color($component-active-bg, 90%) !default;
-// $accordion-button-active-color:           shade-color($primary, 10%) !default;
-
-// $accordion-button-focus-border-color:     $input-focus-border-color !default;
-// $accordion-button-focus-box-shadow:       $btn-focus-box-shadow !default;
-
-// $accordion-icon-width:                    1.25rem !default;
-// $accordion-icon-color:                    $accordion-color !default;
-// $accordion-icon-active-color:             $accordion-button-active-color !default;
-// $accordion-icon-transition:               transform .2s ease-in-out !default;
-// $accordion-icon-transform:                rotate(-180deg) !default;
-
-// $accordion-button-icon:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
-// $accordion-button-active-icon:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
-// scss-docs-end accordion-variables
-
-// Tooltips
-
-// scss-docs-start tooltip-variables
-// $tooltip-font-size:                 $font-size-sm !default;
-// $tooltip-max-width:                 200px !default;
-// $tooltip-color:                     $high-emphasis-inverse !default;
-// $tooltip-bg:                        $black !default;
-// $tooltip-border-radius:             $border-radius !default;
-// $tooltip-opacity:                   .9 !default;
-// $tooltip-padding-y:                 $spacer / 4 !default;
-// $tooltip-padding-x:                 $spacer / 2 !default;
-// $tooltip-margin:                    0 !default;
-
-// $tooltip-arrow-width:               .8rem !default;
-// $tooltip-arrow-height:              .4rem !default;
-// $tooltip-arrow-color:               $tooltip-bg !default;
-// scss-docs-end tooltip-variables
-
-// Form tooltips must come after regular tooltips
-// scss-docs-start tooltip-feedback-variables
-// $form-feedback-tooltip-padding-y:     $tooltip-padding-y !default;
-// $form-feedback-tooltip-padding-x:     $tooltip-padding-x !default;
-// $form-feedback-tooltip-font-size:     $tooltip-font-size !default;
-// $form-feedback-tooltip-line-height:   null !default;
-// $form-feedback-tooltip-opacity:       $tooltip-opacity !default;
-// $form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
-// scss-docs-end tooltip-feedback-variables
-
-
-// Popovers
-// scss-docs-start popover-variables
-// $popover-font-size:                 $font-size-sm !default;
-// $popover-bg:                        $white !default;
-// $popover-max-width:                 276px !default;
-// $popover-border-width:              $border-width !default;
-// $popover-border-color:              rgba($black, .2) !default;
-// $popover-border-radius:             $border-radius-lg !default;
-// $popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width) !default;
-// $popover-box-shadow:                $box-shadow !default;
-
-// $popover-header-bg:                 shade-color($popover-bg, 6%) !default;
-// $popover-header-color:              $headings-color !default;
-// $popover-header-padding-y:          .5rem !default;
-// $popover-header-padding-x:          $spacer !default;
-
-// $popover-body-color:                $body-color !default;
-// $popover-body-padding-y:            $spacer !default;
-// $popover-body-padding-x:            $spacer !default;
-
-// $popover-arrow-width:               1rem !default;
-// $popover-arrow-height:              .5rem !default;
-// $popover-arrow-color:               $popover-bg !default;
-
-// $popover-arrow-outer-color:         fade-in($popover-border-color, .05) !default;
-// scss-docs-end popover-variables
-
-
-// Toasts
-// scss-docs-start toast-variables
-// $toast-max-width:                   350px !default;
-// $toast-padding-x:                   .75rem !default;
-// $toast-padding-y:                   .5rem !default;
-// $toast-font-size:                   .875rem !default;
-// $toast-color:                       unset !default;
-// $toast-background-color:            rgba($white, .85) !default;
-// $toast-border-width:                1px !default;
-// $toast-border-color:                rgba(0, 0, 0, .1) !default;
-// $toast-border-radius:               $border-radius !default;
-// $toast-box-shadow:                  $box-shadow !default;
-// $toast-spacing:                     $container-padding-x !default;
-
-// $toast-header-color:                $gray-600 !default;
-// $toast-header-background-color:     rgba($white, .85) !default;
-// $toast-header-border-color:         rgba(0, 0, 0, .05) !default;
-// scss-docs-end toast-variables
-
-
-// Badges
-// scss-docs-start badge-variables
-// $badge-font-size:                   .75em !default;
-// $badge-font-weight:                 $font-weight-bold !default;
-// $badge-color:                       $high-emphasis-inverse !default;
-// $badge-padding-y:                   .35em !default;
-// $badge-padding-x:                   .65em !default;
-// $badge-border-radius:               $border-radius !default;
-// scss-docs-end badge-variables
-
-// $badge-font-size-sm:                .65em !default;
-// $badge-padding-y-sm:                .3em !default;
-// $badge-padding-x-sm:                .5em !default;
-// scss-docs-end badge-variables
-
-
-// Modals
-
-// scss-docs-start modal-variables
-// $modal-inner-padding:               $spacer !default;
-
-// $modal-footer-margin-between:       .5rem !default;
-
-// $modal-dialog-margin:               .5rem !default;
-// $modal-dialog-margin-y-sm-up:       1.75rem !default;
-
-// $modal-title-line-height:           $line-height-base !default;
-
-// $modal-content-color:               unset !default;
-// $modal-content-bg:                  $white !default;
-// $modal-content-border-color:        rgba($black, .2) !default;
-// $modal-content-border-width:        $border-width !default;
-// $modal-content-border-radius:       $border-radius-lg !default;
-// $modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
-// $modal-content-box-shadow-xs:       $box-shadow-sm !default;
-// $modal-content-box-shadow-sm-up:    $box-shadow !default;
-
-// $modal-backdrop-bg:                 $black !default;
-// $modal-backdrop-opacity:            .5 !default;
-// $modal-header-border-color:         $border-color !default;
-// $modal-footer-border-color:         $modal-header-border-color !default;
-// $modal-header-border-width:         $modal-content-border-width !default;
-// $modal-footer-border-width:         $modal-header-border-width !default;
-// $modal-header-padding-y:            $modal-inner-padding !default;
-// $modal-header-padding-x:            $modal-inner-padding !default;
-// $modal-header-padding:              $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility
-
-// $modal-sm:                          300px !default;
-// $modal-md:                          500px !default;
-// $modal-lg:                          800px !default;
-// $modal-xl:                          1140px !default;
-
-// $modal-fade-transform:              translate(0, -50px) !default;
-// $modal-show-transform:              none !default;
-// $modal-transition:                  transform .3s ease-out !default;
-// $modal-scale-transform:             scale(1.02) !default;
-// scss-docs-end modal-variables
-
-
-// Avatars
-// scss-docs-start avatar-variables
-// $avatar-width:  2rem !default;
-
-// $avatar-widths: (
-//   sm: 1.5rem,
-//   md: 2.5rem,
-//   lg: 3rem,
-//   xl: 4rem
-// ) !default;
-
-// $avatar-transition: margin .15s !default;
-// scss-docs-end avatar-variables
-
-// Alerts
-//
-// Define alert colors, border radius, and padding.
-
-// scss-docs-start alert-variables
-// $alert-padding-y:               $spacer !default;
-// $alert-padding-x:               $spacer !default;
-// $alert-margin-bottom:           1rem !default;
-// $alert-border-radius:           $border-radius !default;
-// $alert-link-font-weight:        $font-weight-bold !default;
-// $alert-border-width:            $border-width !default;
-// $alert-bg-scale:                -80% !default;
-// $alert-border-scale:            -70% !default;
-// $alert-color-scale:             40% !default;
-// $alert-dismissible-padding-r:   $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
-// scss-docs-end alert-variables
-
-// $alert-variants: (
-//   "primary": alert-color-map($primary),
-//   "secondary": alert-color-map($secondary),
-//   "success": alert-color-map($success),
-//   "danger": alert-color-map($danger),
-//   "warning": alert-color-map($warning),
-//   "info": alert-color-map($info),
-//   "light": alert-color-map($light),
-//   "dark": alert-color-map($dark)
-// ) !default;
-// scss-docs-end alert-variables
-
-// Callouts
-// scss-docs-start callout-variables
-// $callout-padding-y:                 $spacer !default;
-// $callout-padding-x:                 $spacer !default;
-// $callout-margin-y:                  $spacer !default;
-// $callout-margin-x:                  0 !default;
-// $callout-border-radius:             $border-radius !default;
-// $callout-border-width:              $border-width !default;
-// $callout-border-color:              $border-color !default;
-// $callout-border-left-width:         (4 * $callout-border-width) !default;
-
-// $callout-variants: (
-//   "primary":    $primary,
-//   "secondary":  $secondary,
-//   "success":    $success,
-//   "danger":     $danger,
-//   "warning":    $warning,
-//   "info":       $info,
-//   "light":      $light,
-//   "dark":       $dark
-// ) !default;
-// scss-docs-end callout-variables
-
-
-// Progress bars
-
-// scss-docs-start progress-variables
-// $progress-height:                   1rem !default;
-// $progress-font-size:                $font-size-base * .75 !default;
-// $progress-bg:                       $gray-200 !default;
-// $progress-border-radius:            $border-radius !default;
-// $progress-box-shadow:               $box-shadow-inset !default;
-// $progress-bar-color:                $high-emphasis-inverse !default;
-// $progress-bar-bg:                   $primary !default;
-// $progress-bar-animation-timing:     1s linear infinite !default;
-// $progress-bar-transition:           width .6s ease !default;
-// scss-docs-end progress-variables
-
-// List group
-// scss-docs-start list-group-variables
-// $list-group-color:                  unset !default;
-// $list-group-bg:                     $white !default;
-// $list-group-border-color:           rgba($black, .125) !default;
-// $list-group-border-width:           $border-width !default;
-// $list-group-border-radius:          $border-radius !default;
-
-// $list-group-item-padding-y:         $spacer / 2 !default;
-// $list-group-item-padding-x:         $spacer !default;
-// $list-group-item-bg-scale:          -80% !default;
-// $list-group-item-color-scale:       40% !default;
-
-// $list-group-hover-bg:               $gray-100 !default;
-// $list-group-active-color:           $component-active-color !default;
-// $list-group-active-bg:              $component-active-bg !default;
-// $list-group-active-border-color:    $list-group-active-bg !default;
-
-// $list-group-disabled-color:         $gray-600 !default;
-// $list-group-disabled-bg:            $list-group-bg !default;
-
-// $list-group-action-color:           $gray-700 !default;
-// $list-group-action-hover-color:     $list-group-action-color !default;
-
-// $list-group-action-active-color:    $body-color !default;
-// $list-group-action-active-bg:       $gray-200 !default;
-// scss-docs-end list-group-variables
-
-// $list-group-variants: (
-//   "primary": list-group-color-map($primary),
-//   "secondary": list-group-color-map($secondary),
-//   "success": list-group-color-map($success),
-//   "danger": list-group-color-map($danger),
-//   "warning": list-group-color-map($warning),
-//   "info": list-group-color-map($info),
-//   "light": list-group-color-map($light),
-//   "dark": list-group-color-map($dark)
-// ) !default;
-// scss-docs-end list-group-variables
-
-
-// Header
-// scss-docs-start header-variables
-// $header-min-height:             4rem !default;
-// $header-padding-y:              $spacer / 2 !default;
-// $header-padding-x:              $spacer / 2 !default;
-// $header-brand-font-size:        $font-size-lg !default;
-// $header-color:                  $medium-emphasis !default;
-// $header-bg:                     $white !default;
-// $header-border-color:           $border-color !default;
-// $header-border-width:           1px !default;
-// $header-hover-color:            $high-emphasis !default;
-// $header-active-color:           $high-emphasis !default;
-// $header-disabled-color:         $disabled !default;
-
-// Compute the header-brand padding-y so the header-brand will have the same height as header-text and nav-link
-// $nav-link-height:               $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
-// $header-brand-height:           $header-brand-font-size * $line-height-base !default;
-// $header-brand-padding-y:        ($nav-link-height - $header-brand-height) / 2 !default;
-// $header-brand-margin-end:       1rem !default;
-// $header-brand-font-size:        $font-size-lg !default;
-// $header-brand-color:            $gray-900 !default;
-// $header-brand-hover-color:      shade-color($gray-900, 10%) !default;
-
-// $header-toggler-padding-y:      .25rem !default;
-// $header-toggler-padding-x:      .75rem !default;
-// $header-toggler-font-size:      $font-size-lg !default;
-// $header-toggler-bg:             transparent !default;
-// $header-toggler-border:         0 !default;
-// $header-toggler-border-radius:  $btn-border-radius !default;
-
-// $header-toggler-icon-bg:        url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$header-color}' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !default;
-// $header-toggler-hover-icon-bg:  url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$header-hover-color}' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !default;
-// $header-toggler-border-color:   rgba($black, .1) !default;
-
-// $header-nav-link-padding-x:     .5rem !default;
-
-// $header-divider-border-width:   1px !default;
-// $header-divider-border-color:   $header-border-color !default;
-// scss-docs-end header-variables
-
-// Subheader
-// scss-docs-start subheader-variables
-// $subheader-min-height:           3rem !default;
-// $subheader-padding-y:            $spacer / 2 !default;
-// $subheader-padding-x:            $spacer !default;
-// $subheader-border-color:         $border-color !default;
-// $subheader-border-width:         1px !default;
-
-// $subheader-nav-link-padding-x:  .5rem !default;
-// scss-docs-end subheader-variables
-
-// Default theme
-// scss-docs-start subheader-default-themes
-// $subheader-bg:                     $white !default;
-// $subheader-color:                  $medium-emphasis !default;
-// $subheader-hover-color:            $high-emphasis !default;
-// $subheader-active-color:           $high-emphasis !default;
-// $subheader-disabled-color:         $disabled !default;
-// scss-docs-end subheader-default-themes
-
-
-// Image thumbnails
-
-// scss-docs-start thumbnail-variables
-// $thumbnail-padding:                 .25rem !default;
-// $thumbnail-bg:                      $body-bg !default;
-// $thumbnail-border-width:            $border-width !default;
-// $thumbnail-border-color:            $gray-300 !default;
-// $thumbnail-border-radius:           $border-radius !default;
-// $thumbnail-box-shadow:              $box-shadow-sm !default;
-// scss-docs-end thumbnail-variables
-
-
-// Figures
-
-// scss-docs-start figure-variables
-// $figure-caption-font-size:          $small-font-size !default;
-// $figure-caption-color:              $gray-600 !default;
-// scss-docs-end figure-variables
-
-
-// Breadcrumbs
-// scss-docs-start breadcrumb-variables
-// $breadcrumb-font-size:              null !default;
-// $breadcrumb-padding-y:              0 !default;
-// $breadcrumb-padding-x:              0 !default;
-// $breadcrumb-item-padding-x:         .5rem !default;
-// $breadcrumb-margin-bottom:          1rem !default;
-// $breadcrumb-bg:                     unset !default;
-// $breadcrumb-divider-color:          $gray-600 !default;
-// $breadcrumb-active-color:           $gray-600 !default;
-// $breadcrumb-divider:                quote("/") !default;
-// $breadcrumb-divider-flipped:        $breadcrumb-divider !default;
-// $breadcrumb-border-radius:          null !default;
-// scss-docs-end breadcrumb-variables
-
-// Carousel
-// scss-docs-start carousel-variables
-// $carousel-control-color:             $high-emphasis-inverse !default;
-// $carousel-control-width:             15% !default;
-// $carousel-control-opacity:           .5 !default;
-// $carousel-control-hover-opacity:     .9 !default;
-// $carousel-control-transition:        opacity .15s ease !default;
-
-// $carousel-indicator-width:           30px !default;
-// $carousel-indicator-height:          3px !default;
-// $carousel-indicator-hit-area-height: 10px !default;
-// $carousel-indicator-spacer:          3px !default;
-// $carousel-indicator-opacity:         .5 !default;
-// $carousel-indicator-active-bg:       $white !default;
-// $carousel-indicator-active-opacity:  1 !default;
-// $carousel-indicator-transition:      opacity .6s ease !default;
-
-// $carousel-caption-width:             70% !default;
-// $carousel-caption-color:             $high-emphasis-inverse !default;
-// $carousel-caption-padding-y:         1.25rem !default;
-// $carousel-caption-spacer:            1.25rem !default;
-
-// $carousel-control-icon-width:        2rem !default;
-
-// $carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>") !default;
-// $carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>") !default;
-
-// $carousel-transition-duration:       .6s !default;
-// $carousel-transition:                transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
-
-// $carousel-dark-indicator-active-bg:  $black !default;
-// $carousel-dark-caption-color:        $high-emphasis !default;
-// $carousel-dark-control-icon-filter:  invert(1) grayscale(100) !default;
-// scss-docs-end carousel-variables
-
-// scss-docs-start sidebar-variables
-// $sidebar-width:                            16rem !default;
-// $sidebar-widths: (
-//   sm: 12rem,
-//   lg: 20rem,
-//   xl: 24rem
-// ) !default;
-// $sidebar-padding-y:                        0 !default;
-// $sidebar-padding-x:                        0 !default;
-// $sidebar-color:                            $high-emphasis-inverse !default;
-// $sidebar-bg:                               $gray-base !default;
-// $sidebar-border-width:                     0 !default;
-// $sidebar-border-color:                     transparent !default;
-// $sidebar-transition:                       margin-left .15s, margin-right .15s, box-shadow .075s, transform .15s, width .15s, z-index 0s ease .15s !default;
-
-// $sidebar-brand-height:                     4rem !default;
-// $sidebar-brand-color:                      $high-emphasis-inverse !default;
-// $sidebar-brand-bg:                         rgba($black, .2) !default;
-
-// $sidebar-header-height:                    4rem !default;
-// $sidebar-header-padding-y:                 .75rem !default;
-// $sidebar-header-padding-x:                 1rem !default;
-// $sidebar-header-bg:                        rgba($black, .2) !default;
-// $sidebar-header-height-transition:         height .15s, padding .15s !default;
-
-// $sidebar-narrow-width:                     4rem !default;
-
-// $sidebar-backdrop-bg:                      $black !default;
-// $sidebar-backdrop-opacity:                 .5 !default;
-// $sidebar-backdrop-transition:              opacity .15s linear !default;
-
-// $sidebar-nav-title-padding-y:              .75rem !default;
-// $sidebar-nav-title-padding-x:              1rem !default;
-// $sidebar-nav-title-margin-top:             1rem !default;
-// $sidebar-nav-title-color:                  $medium-emphasis-inverse !default;
-// $sidebar-nav-title-transition:             height .15s, margin .15s !default;
-
-// $sidebar-nav-link-padding-y:               .8445rem !default;
-// $sidebar-nav-link-padding-x:               1rem !default;
-// $sidebar-nav-link-color:                   $medium-emphasis-inverse !default;
-// $sidebar-nav-link-bg:                      transparent !default;
-// $sidebar-nav-link-transition:              background .15s ease, color .15s ease !default;
-// $sidebar-nav-link-icon-color:              $medium-emphasis-inverse !default;
-
-// $sidebar-nav-link-hover-color:             $high-emphasis-inverse !default;
-// $sidebar-nav-link-hover-bg:                rgba($white, .05) !default;
-// $sidebar-nav-link-hover-icon-color:        $high-emphasis-inverse !default;
-
-// $sidebar-nav-link-active-color:            $high-emphasis-inverse !default;
-// $sidebar-nav-link-active-bg:               rgba($white, .05) !default;
-// $sidebar-nav-link-active-icon-color:       $high-emphasis-inverse !default;
-
-// $sidebar-nav-link-disabled-color:          $disabled-inverse !default;
-// $sidebar-nav-link-disabled-icon-color:     $sidebar-nav-link-icon-color !default;
-
-// $sidebar-nav-icon-width:                   4rem !default;
-// $sidebar-nav-icon-height:                  1.25rem !default;
-// $sidebar-nav-icon-font-size:               $sidebar-nav-icon-height !default;
-
-// $sidebar-nav-group-bg:                     rgba(0, 0, 0, .2) !default;
-// $sidebar-nav-group-transition:             background .15s ease-in-out !default;
-// $sidebar-nav-group-items-transition:       height .15s ease !default;
-// $sidebar-nav-group-toggle-show-color:      $sidebar-nav-link-color !default;
-
-// $sidebar-nav-group-indicator-color:        $medium-emphasis-inverse !default;
-// $sidebar-nav-group-indicator-icon:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$sidebar-nav-group-indicator-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
-// $sidebar-nav-group-indicator-hover-color:  $sidebar-nav-link-hover-color !default;
-// $sidebar-nav-group-indicator-hover-icon:   url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$sidebar-nav-group-indicator-hover-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
-// $sidebar-nav-group-indicator-transition:   transform .15s !default;
-
-// $sidebar-footer-height:                    auto !default;
-// $sidebar-footer-padding-y:                 .75rem !default;
-// $sidebar-footer-padding-x:                 1rem !default;
-// $sidebar-footer-bg:                        rgba($black, .2) !default;
-// $sidebar-footer-height-transition:         height .15s, padding .15s !default;
-
-// $sidebar-toggler-height:                   3rem !default;
-// $sidebar-toggler-bg:                       rgba($black, .2) !default;
-// $sidebar-toggler-transition:               transform .15s !default;
-
-// $sidebar-toggler-indicator-width:          4rem !default;
-// $sidebar-toggler-indicator-height:         3rem !default;
-// $sidebar-toggler-indicator-color:          $gray-600 !default;
-// $sidebar-toggler-indicator-icon:           url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-toggler-indicator-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E") !default;
-// $sidebar-toggler-hover-bg:                 rgba(0, 0, 0, .3) !default;
-// $sidebar-toggler-indicator-hover-color:    $sidebar-nav-link-hover-color !default;
-// $sidebar-toggler-indicator-hover-icon:     url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-toggler-indicator-hover-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E") !default;
-// scss-docs-end sidebar-variables
-
-// Footer
-// scss-docs-start footer-variables
-// $footer-min-height:    3rem !default;
-// $footer-padding-y:     $spacer / 2 !default;
-// $footer-padding-x:     $spacer !default;
-// $footer-bg:            $gray-100 !default;
-// $footer-color:         $body-color !default;
-// $footer-border-width:  1px !default;
-// $footer-border-color:  $border-color !default;
-// scss-docs-end footer-variables
-
-// Spinners
-// scss-docs-start spinner-variables
-// $spinner-width:           2rem !default;
-// $spinner-height:          $spinner-width !default;
-// $spinner-vertical-align:  -.125em !default;
-// $spinner-border-width:    .25em !default;
-// $spinner-animation-speed: .75s !default;
-
-// $spinner-width-sm:        1rem !default;
-// $spinner-height-sm:       $spinner-width-sm !default;
-// $spinner-border-width-sm: .2em !default;
-// scss-docs-end spinner-variables
-
-
-// Close
-// scss-docs-start close-variables
-// $btn-close-width:            1em !default;
-// $btn-close-height:           $btn-close-width !default;
-// $btn-close-padding-x:        .25em !default;
-// $btn-close-padding-y:        $btn-close-padding-x !default;
-// $btn-close-color:            $high-emphasis !default;
-// $btn-close-bg:               url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>") !default;
-// $btn-close-focus-shadow:     $input-btn-focus-box-shadow !default;
-// $btn-close-opacity:          .5 !default;
-// $btn-close-hover-opacity:    .75 !default;
-// $btn-close-focus-opacity:    1 !default;
-// $btn-close-disabled-opacity: .25 !default;
-// $btn-close-white-filter:     invert(1) grayscale(100%) brightness(200%) !default;
-// scss-docs-end close-variables
-
-
-// Offcanvas
-
-// scss-docs-start offcanvas-variables
-// $offcanvas-padding-y:               $modal-inner-padding !default;
-// $offcanvas-padding-x:               $modal-inner-padding !default;
-// $offcanvas-horizontal-width:        400px !default;
-// $offcanvas-vertical-height:         30vh !default;
-// $offcanvas-transition-duration:     .3s !default;
-// $offcanvas-border-color:            $modal-content-border-color !default;
-// $offcanvas-border-width:            $modal-content-border-width !default;
-// $offcanvas-title-line-height:       $modal-title-line-height !default;
-// $offcanvas-bg-color:                $modal-content-bg !default;
-// $offcanvas-color:                   $modal-content-color !default;
-// $offcanvas-box-shadow:              $modal-content-box-shadow-xs !default;
-// scss-docs-end offcanvas-variables
-
-// Code
-
-// $code-font-size:                    $small-font-size !default;
-// $code-color:                        $pink !default;
-
-// $kbd-padding-y:                     .2rem !default;
-// $kbd-padding-x:                     .4rem !default;
-// $kbd-font-size:                     $code-font-size !default;
-// $kbd-color:                         $high-emphasis-inverse !default;
-// $kbd-bg:                            $gray-900 !default;
-
-// $pre-color:                         unset !default;
+// If you want to customize your project please add your variables below.
diff --git a/src/store.js b/src/store.js
index ab446364c..d0d7df485 100644
--- a/src/store.js
+++ b/src/store.js
@@ -2,10 +2,16 @@ import { createStore } from 'redux'
 
 const initialState = {
   sidebarShow: true,
+  theme: localStorage.getItem('coreui-free-react-admin-template-theme') ?? 'light',
 }
 
 const changeState = (state = initialState, { type, ...rest }) => {
   switch (type) {
+    case 'setTheme':
+      const event = new Event('ColorSchemeChange')
+      document.documentElement.dispatchEvent(event)
+      localStorage.setItem('coreui-free-react-admin-template-theme', rest.theme)
+      return { ...state, ...rest }
     case 'set':
       return { ...state, ...rest }
     default:
diff --git a/src/views/charts/MainChart.js b/src/views/charts/MainChart.js
new file mode 100644
index 000000000..de6c5ff3c
--- /dev/null
+++ b/src/views/charts/MainChart.js
@@ -0,0 +1,107 @@
+import React from 'react'
+import { CChartLine } from '@coreui/react-chartjs'
+import { getStyle } from '@coreui/utils'
+
+const MainChart = () => {
+  const random = () => Math.round(Math.random() * 100)
+
+  return (
+    <CChartLine
+      style={{ height: '300px', marginTop: '40px' }}
+      data={{
+        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+        datasets: [
+          {
+            label: 'My First dataset',
+            backgroundColor: `rgba(${getStyle('--cui-info-rgb')}, .1)`,
+            borderColor: getStyle('--cui-info'),
+            pointHoverBackgroundColor: getStyle('--cui-info'),
+            borderWidth: 2,
+            data: [
+              random(50, 200),
+              random(50, 200),
+              random(50, 200),
+              random(50, 200),
+              random(50, 200),
+              random(50, 200),
+              random(50, 200),
+            ],
+            fill: true,
+          },
+          {
+            label: 'My Second dataset',
+            backgroundColor: 'transparent',
+            borderColor: getStyle('--cui-success'),
+            pointHoverBackgroundColor: getStyle('--cui-success'),
+            borderWidth: 2,
+            data: [
+              random(50, 200),
+              random(50, 200),
+              random(50, 200),
+              random(50, 200),
+              random(50, 200),
+              random(50, 200),
+              random(50, 200),
+            ],
+          },
+          {
+            label: 'My Third dataset',
+            backgroundColor: 'transparent',
+            borderColor: getStyle('--cui-danger'),
+            pointHoverBackgroundColor: getStyle('--cui-danger'),
+            borderWidth: 1,
+            borderDash: [8, 5],
+            data: [65, 65, 65, 65, 65, 65, 65],
+          },
+        ],
+      }}
+      options={{
+        maintainAspectRatio: false,
+        plugins: {
+          legend: {
+            display: false,
+          },
+        },
+        scales: {
+          x: {
+            grid: {
+              color: getStyle('--cui-border-color-translucent'),
+              drawOnChartArea: false,
+            },
+            ticks: {
+              color: getStyle('--cui-body-color'),
+            },
+          },
+          y: {
+            border: {
+              color: getStyle('--cui-border-color-translucent'),
+            },
+            grid: {
+              color: getStyle('--cui-border-color-translucent'),
+            },
+            ticks: {
+              beginAtZero: true,
+              color: getStyle('--cui-body-color'),
+              max: 250,
+              maxTicksLimit: 5,
+              stepSize: Math.ceil(250 / 5),
+            },
+          },
+        },
+        elements: {
+          line: {
+            tension: 0.4,
+          },
+          point: {
+            radius: 0,
+            hitRadius: 10,
+            hoverRadius: 4,
+            hoverBorderWidth: 3,
+          },
+        },
+      }}
+    />
+  )
+}
+
+export default MainChart
diff --git a/src/views/dashboard/Dashboard.js b/src/views/dashboard/Dashboard.js
index e979a0c16..e69957c7d 100644
--- a/src/views/dashboard/Dashboard.js
+++ b/src/views/dashboard/Dashboard.js
@@ -18,8 +18,6 @@ import {
   CTableHeaderCell,
   CTableRow,
 } from '@coreui/react'
-import { CChartLine } from '@coreui/react-chartjs'
-import { getStyle, hexToRgba } from '@coreui/utils'
 import CIcon from '@coreui/icons-react'
 import {
   cibCcAmex,
@@ -53,6 +51,7 @@ import avatar6 from 'src/assets/images/avatars/6.jpg'
 
 import WidgetsBrand from '../widgets/WidgetsBrand'
 import WidgetsDropdown from '../widgets/WidgetsDropdown'
+import MainChart from '../charts/MainChart'
 
 const Dashboard = () => {
   const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min)
@@ -208,90 +207,7 @@ const Dashboard = () => {
               </CButtonGroup>
             </CCol>
           </CRow>
-          <CChartLine
-            style={{ height: '300px', marginTop: '40px' }}
-            data={{
-              labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-              datasets: [
-                {
-                  label: 'My First dataset',
-                  backgroundColor: hexToRgba(getStyle('--cui-info'), 10),
-                  borderColor: getStyle('--cui-info'),
-                  pointHoverBackgroundColor: getStyle('--cui-info'),
-                  borderWidth: 2,
-                  data: [
-                    random(50, 200),
-                    random(50, 200),
-                    random(50, 200),
-                    random(50, 200),
-                    random(50, 200),
-                    random(50, 200),
-                    random(50, 200),
-                  ],
-                  fill: true,
-                },
-                {
-                  label: 'My Second dataset',
-                  backgroundColor: 'transparent',
-                  borderColor: getStyle('--cui-success'),
-                  pointHoverBackgroundColor: getStyle('--cui-success'),
-                  borderWidth: 2,
-                  data: [
-                    random(50, 200),
-                    random(50, 200),
-                    random(50, 200),
-                    random(50, 200),
-                    random(50, 200),
-                    random(50, 200),
-                    random(50, 200),
-                  ],
-                },
-                {
-                  label: 'My Third dataset',
-                  backgroundColor: 'transparent',
-                  borderColor: getStyle('--cui-danger'),
-                  pointHoverBackgroundColor: getStyle('--cui-danger'),
-                  borderWidth: 1,
-                  borderDash: [8, 5],
-                  data: [65, 65, 65, 65, 65, 65, 65],
-                },
-              ],
-            }}
-            options={{
-              maintainAspectRatio: false,
-              plugins: {
-                legend: {
-                  display: false,
-                },
-              },
-              scales: {
-                x: {
-                  grid: {
-                    drawOnChartArea: false,
-                  },
-                },
-                y: {
-                  ticks: {
-                    beginAtZero: true,
-                    maxTicksLimit: 5,
-                    stepSize: Math.ceil(250 / 5),
-                    max: 250,
-                  },
-                },
-              },
-              elements: {
-                line: {
-                  tension: 0.4,
-                },
-                point: {
-                  radius: 0,
-                  hitRadius: 10,
-                  hoverRadius: 4,
-                  hoverBorderWidth: 3,
-                },
-              },
-            }}
-          />
+          <MainChart />
         </CCardBody>
         <CCardFooter>
           <CRow xs={{ cols: 1 }} md={{ cols: 5 }} className="text-center">
@@ -400,7 +316,7 @@ const Dashboard = () => {
               <br />
 
               <CTable align="middle" className="mb-0 border" hover responsive>
-                <CTableHead color="light">
+                <CTableHead className="bg-body-secondary">
                   <CTableRow>
                     <CTableHeaderCell className="text-center">
                       <CIcon icon={cilPeople} />
diff --git a/src/views/pages/login/Login.js b/src/views/pages/login/Login.js
index 6b889d530..320cacd4d 100644
--- a/src/views/pages/login/Login.js
+++ b/src/views/pages/login/Login.js
@@ -18,7 +18,7 @@ import { cilLockLocked, cilUser } from '@coreui/icons'
 
 const Login = () => {
   return (
-    <div className="bg-light min-vh-100 d-flex flex-row align-items-center">
+    <div className="bg-body-tertiary min-vh-100 d-flex flex-row align-items-center">
       <CContainer>
         <CRow className="justify-content-center">
           <CCol md={8}>
diff --git a/src/views/pages/page404/Page404.js b/src/views/pages/page404/Page404.js
index 09e2cf4b2..c14e859fc 100644
--- a/src/views/pages/page404/Page404.js
+++ b/src/views/pages/page404/Page404.js
@@ -13,7 +13,7 @@ import { cilMagnifyingGlass } from '@coreui/icons'
 
 const Page404 = () => {
   return (
-    <div className="bg-light min-vh-100 d-flex flex-row align-items-center">
+    <div className="bg-body-tertiary min-vh-100 d-flex flex-row align-items-center">
       <CContainer>
         <CRow className="justify-content-center">
           <CCol md={6}>
diff --git a/src/views/pages/page500/Page500.js b/src/views/pages/page500/Page500.js
index d7f6db305..11d867b89 100644
--- a/src/views/pages/page500/Page500.js
+++ b/src/views/pages/page500/Page500.js
@@ -13,7 +13,7 @@ import { cilMagnifyingGlass } from '@coreui/icons'
 
 const Page500 = () => {
   return (
-    <div className="bg-light min-vh-100 d-flex flex-row align-items-center">
+    <div className="bg-body-tertiary min-vh-100 d-flex flex-row align-items-center">
       <CContainer>
         <CRow className="justify-content-center">
           <CCol md={6}>
diff --git a/src/views/pages/register/Register.js b/src/views/pages/register/Register.js
index ee8afffb8..4dc5b7ae7 100644
--- a/src/views/pages/register/Register.js
+++ b/src/views/pages/register/Register.js
@@ -16,7 +16,7 @@ import { cilLockLocked, cilUser } from '@coreui/icons'
 
 const Register = () => {
   return (
-    <div className="bg-light min-vh-100 d-flex flex-row align-items-center">
+    <div className="bg-body-tertiary min-vh-100 d-flex flex-row align-items-center">
       <CContainer>
         <CRow className="justify-content-center">
           <CCol md={9} lg={7} xl={6}>

From 0613a3acb2e900a667eac1d659cd3129287561a2 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 9 May 2023 23:15:33 +0200
Subject: [PATCH 02/68] docs: update comments

---
 public/index.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/public/index.html b/public/index.html
index b25132580..21d293335 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2,9 +2,9 @@
 <!--
 * CoreUI Free React.js Admin Template
 * @version v4.5.0
-* @link https://coreui.io/react/
+* @link https://coreui.io/product/free-react-admin-template/
 * Copyright (c) 2023 creativeLabs Łukasz Holeczek
-* License MIT
+* Licensed under MIT (https://github.com/coreui/coreui-free-react-admin-template/blob/main/LICENSE)
 -->
 <html lang="en">
   <head>

From ef6012e658eef26ac97500be90e98575a6511360 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 9 May 2023 23:15:44 +0200
Subject: [PATCH 03/68] chore: clean-up

---
 src/views/dashboard/Dashboard.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/views/dashboard/Dashboard.js b/src/views/dashboard/Dashboard.js
index e69957c7d..73341242e 100644
--- a/src/views/dashboard/Dashboard.js
+++ b/src/views/dashboard/Dashboard.js
@@ -54,8 +54,6 @@ import WidgetsDropdown from '../widgets/WidgetsDropdown'
 import MainChart from '../charts/MainChart'
 
 const Dashboard = () => {
-  const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min)
-
   const progressExample = [
     { title: 'Visits', value: '29.703 Users', percent: 40, color: 'success' },
     { title: 'Unique', value: '24.093 Users', percent: 20, color: 'info' },

From b4541954369519ca1a259ab28df846600319b30b Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Wed, 10 May 2023 10:04:45 +0200
Subject: [PATCH 04/68] refactor: update main chart

---
 src/views/dashboard/Dashboard.js             | 2 +-
 src/views/{charts => dashboard}/MainChart.js | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename src/views/{charts => dashboard}/MainChart.js (100%)

diff --git a/src/views/dashboard/Dashboard.js b/src/views/dashboard/Dashboard.js
index 73341242e..2bb1922a6 100644
--- a/src/views/dashboard/Dashboard.js
+++ b/src/views/dashboard/Dashboard.js
@@ -51,7 +51,7 @@ import avatar6 from 'src/assets/images/avatars/6.jpg'
 
 import WidgetsBrand from '../widgets/WidgetsBrand'
 import WidgetsDropdown from '../widgets/WidgetsDropdown'
-import MainChart from '../charts/MainChart'
+import MainChart from './MainChart'
 
 const Dashboard = () => {
   const progressExample = [
diff --git a/src/views/charts/MainChart.js b/src/views/dashboard/MainChart.js
similarity index 100%
rename from src/views/charts/MainChart.js
rename to src/views/dashboard/MainChart.js

From 88df73ad723ed03387b996808985ef627b586a37 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Fri, 12 May 2023 18:40:29 +0200
Subject: [PATCH 05/68] refactor: improve theme switch

---
 src/App.js | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/App.js b/src/App.js
index dd068fe6f..b2ada6a90 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,6 +1,6 @@
 import React, { Suspense, useEffect } from 'react'
 import { HashRouter, Route, Routes } from 'react-router-dom'
-import { useSelector } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 
 import { CSpinner } from '@coreui/react'
 import './scss/style.scss'
@@ -34,14 +34,15 @@ const Page404 = React.lazy(() => import('./views/pages/page404/Page404'))
 const Page500 = React.lazy(() => import('./views/pages/page500/Page500'))
 
 const App = () => {
+  const dispatch = useDispatch()
   const theme = useSelector((state) => state.theme)
-
-  if (theme) {
-    document.documentElement.dataset.coreuiTheme =
-      theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : theme
-  }
+  const urlParams = new URLSearchParams(window.location.href.split('?')[1])
 
   useEffect(() => {
+    if (urlParams.get('theme')) {
+      dispatch({ type: 'setTheme', theme: urlParams.get('theme') })
+    }
+
     window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
       if (theme !== 'light' || theme !== 'dark') {
         setTheme(getPreferredTheme(theme))
@@ -49,6 +50,10 @@ const App = () => {
     })
   }, [])
 
+  useEffect(() => {
+    setTheme(getPreferredTheme(theme))
+  }, [theme])
+
   return (
     <HashRouter>
       <Suspense fallback={loading}>

From ccd3674280fdb5357b27384e8489107188cb6fd8 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Fri, 12 May 2023 18:41:17 +0200
Subject: [PATCH 06/68] chore: update dependencies

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index accecf866..e783eb289 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
     "@coreui/coreui": "4.3.0-alpha.0",
     "@coreui/icons": "^3.0.1",
     "@coreui/icons-react": "^2.1.0",
-    "@coreui/react": "^4.6.0",
+    "@coreui/react": "^4.9.0-alpha.1",
     "@coreui/react-chartjs": "^2.1.2",
     "@coreui/utils": "^2.0.1",
     "chart.js": "^3.9.1",

From 307e9f5554cc5b9f594bc41b3b6f7bab1924d7fc Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Mon, 12 Jun 2023 15:14:59 +0200
Subject: [PATCH 07/68] chore: update dependencies and devDependencies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

@coreui/chartjs                 ^3.1.1  →         ^3.1.2
@coreui/coreui           4.3.0-alpha.0  →   4.3.0-beta.0
@coreui/react            4.9.0-alpha.0  →   4.9.0-beta.0
@coreui/react-chartjs           ^2.1.2  →         ^2.1.3
@coreui/utils                   ^2.0.1  →         ^2.0.2
chart.js                        ^3.9.1  →         ^4.3.0
core-js                        ^3.29.0  →        ^3.31.0
eslint-config-prettier          ^8.7.0  →         ^8.8.0
prettier                         2.8.4  →          2.8.8
react-redux                     ^8.0.5  →         ^8.0.7
react-router-dom                ^6.8.2  →        ^6.12.1
sass                           ^1.58.3  →        ^1.63.3
simplebar-react                 ^2.4.3  →         ^3.2.4
web-vitals                      ^3.1.1  →         ^3.3.2
---
 package.json | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index e783eb289..b4ec91f04 100644
--- a/package.json
+++ b/package.json
@@ -22,35 +22,35 @@
     "test:debug": "react-scripts --inspect-brk test --runInBand"
   },
   "dependencies": {
-    "@coreui/chartjs": "^3.1.1",
-    "@coreui/coreui": "4.3.0-alpha.0",
+    "@coreui/chartjs": "^3.1.2",
+    "@coreui/coreui": "4.3.0-beta.0",
     "@coreui/icons": "^3.0.1",
     "@coreui/icons-react": "^2.1.0",
-    "@coreui/react": "^4.9.0-alpha.1",
-    "@coreui/react-chartjs": "^2.1.2",
-    "@coreui/utils": "^2.0.1",
+    "@coreui/react": "^4.9.0-beta.0",
+    "@coreui/react-chartjs": "^2.1.3",
+    "@coreui/utils": "^2.0.2",
     "chart.js": "^3.9.1",
     "classnames": "^2.3.2",
-    "core-js": "^3.29.0",
+    "core-js": "^3.31.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-app-polyfill": "^3.0.0",
     "react-dom": "^18.2.0",
-    "react-redux": "^8.0.5",
-    "react-router-dom": "^6.8.2",
+    "react-redux": "^8.0.7",
+    "react-router-dom": "^6.12.1",
     "redux": "4.2.1",
-    "simplebar-react": "^2.4.3"
+    "simplebar-react": "^3.2.4"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
-    "eslint-config-prettier": "^8.7.0",
+    "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "prettier": "2.8.4",
+    "prettier": "2.8.8",
     "react-scripts": "5.0.1",
-    "sass": "^1.58.3",
-    "web-vitals": "^3.1.1"
+    "sass": "^1.63.3",
+    "web-vitals": "^3.3.2"
   },
   "engines": {
     "node": ">=10",

From 3504643bce5e17f227fa7179f063934e34bccb89 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Mon, 12 Jun 2023 15:54:42 +0200
Subject: [PATCH 08/68] refactor: move useColorModes

---
 src/App.js                  | 45 +++++++++----------------------------
 src/components/AppHeader.js | 21 +++++++++--------
 src/store.js                |  6 -----
 3 files changed, 22 insertions(+), 50 deletions(-)

diff --git a/src/App.js b/src/App.js
index b2ada6a90..b1af84d3d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,29 +1,9 @@
 import React, { Suspense, useEffect } from 'react'
 import { HashRouter, Route, Routes } from 'react-router-dom'
-import { useDispatch, useSelector } from 'react-redux'
 
-import { CSpinner } from '@coreui/react'
+import { CSpinner, useColorModes } from '@coreui/react'
 import './scss/style.scss'
 
-const loading = (
-  <div className="pt-3 text-center">
-    <CSpinner color="primary" variant="grow" />
-  </div>
-)
-
-const getPreferredTheme = (storedTheme) => {
-  if (storedTheme) {
-    return storedTheme
-  }
-
-  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
-}
-
-const setTheme = (theme) => {
-  document.documentElement.dataset.coreuiTheme =
-    theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : theme
-}
-
 // Containers
 const DefaultLayout = React.lazy(() => import('./layout/DefaultLayout'))
 
@@ -34,29 +14,24 @@ const Page404 = React.lazy(() => import('./views/pages/page404/Page404'))
 const Page500 = React.lazy(() => import('./views/pages/page500/Page500'))
 
 const App = () => {
-  const dispatch = useDispatch()
-  const theme = useSelector((state) => state.theme)
+  const { setColorMode } = useColorModes('coreui-free-react-admin-template-theme')
   const urlParams = new URLSearchParams(window.location.href.split('?')[1])
 
   useEffect(() => {
     if (urlParams.get('theme')) {
-      dispatch({ type: 'setTheme', theme: urlParams.get('theme') })
+      setColorMode(urlParams.get('theme'))
     }
-
-    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
-      if (theme !== 'light' || theme !== 'dark') {
-        setTheme(getPreferredTheme(theme))
-      }
-    })
   }, [])
 
-  useEffect(() => {
-    setTheme(getPreferredTheme(theme))
-  }, [theme])
-
   return (
     <HashRouter>
-      <Suspense fallback={loading}>
+      <Suspense
+        fallback={
+          <div className="pt-3 text-center">
+            <CSpinner color="primary" variant="grow" />
+          </div>
+        }
+      >
         <Routes>
           <Route exact path="/login" name="Login Page" element={<Login />} />
           <Route exact path="/register" name="Register Page" element={<Register />} />
diff --git a/src/components/AppHeader.js b/src/components/AppHeader.js
index 25443a13d..8d49845c0 100644
--- a/src/components/AppHeader.js
+++ b/src/components/AppHeader.js
@@ -14,6 +14,7 @@ import {
   CHeaderToggler,
   CNavLink,
   CNavItem,
+  useColorModes,
 } from '@coreui/react'
 import CIcon from '@coreui/icons-react'
 import {
@@ -31,9 +32,11 @@ import { AppHeaderDropdown } from './header/index'
 import { logo } from 'src/assets/brand/logo'
 
 const AppHeader = () => {
+  const { getColorMode, setColorMode } = useColorModes('coreui-free-react-admin-template-theme')
+  const colorMode = getColorMode()
+
   const dispatch = useDispatch()
   const sidebarShow = useSelector((state) => state.sidebarShow)
-  const theme = useSelector((state) => state.theme)
 
   return (
     <CHeader position="sticky" className="mb-4">
@@ -81,9 +84,9 @@ const AppHeader = () => {
           </li>
           <CDropdown variant="nav-item" placement="bottom-end">
             <CDropdownToggle caret={false}>
-              {theme === 'dark' ? (
+              {colorMode === 'dark' ? (
                 <CIcon icon={cilMoon} size="xl" />
-              ) : theme === 'auto' ? (
+              ) : colorMode === 'auto' ? (
                 <CIcon icon={cilContrast} size="xl" />
               ) : (
                 <CIcon icon={cilSun} size="xl" />
@@ -91,29 +94,29 @@ const AppHeader = () => {
             </CDropdownToggle>
             <CDropdownMenu>
               <CDropdownItem
-                active={theme === 'light'}
+                active={colorMode === 'light'}
                 className="d-flex align-items-center"
                 component="button"
                 type="button"
-                onClick={() => dispatch({ type: 'setTheme', theme: 'light' })}
+                onClick={() => setColorMode('light')}
               >
                 <CIcon className="me-2" icon={cilSun} size="lg" /> Light
               </CDropdownItem>
               <CDropdownItem
-                active={theme === 'dark'}
+                active={colorMode === 'dark'}
                 className="d-flex align-items-center"
                 component="button"
                 type="button"
-                onClick={() => dispatch({ type: 'setTheme', theme: 'dark' })}
+                onClick={() => setColorMode('dark')}
               >
                 <CIcon className="me-2" icon={cilMoon} size="lg" /> Dark
               </CDropdownItem>
               <CDropdownItem
-                active={theme === 'auto'}
+                active={colorMode === 'auto'}
                 className="d-flex align-items-center"
                 component="button"
                 type="button"
-                onClick={() => dispatch({ type: 'setTheme', theme: 'auto' })}
+                onClick={() => setColorMode('auto')}
               >
                 <CIcon className="me-2" icon={cilContrast} size="lg" /> Auto
               </CDropdownItem>
diff --git a/src/store.js b/src/store.js
index d0d7df485..ab446364c 100644
--- a/src/store.js
+++ b/src/store.js
@@ -2,16 +2,10 @@ import { createStore } from 'redux'
 
 const initialState = {
   sidebarShow: true,
-  theme: localStorage.getItem('coreui-free-react-admin-template-theme') ?? 'light',
 }
 
 const changeState = (state = initialState, { type, ...rest }) => {
   switch (type) {
-    case 'setTheme':
-      const event = new Event('ColorSchemeChange')
-      document.documentElement.dispatchEvent(event)
-      localStorage.setItem('coreui-free-react-admin-template-theme', rest.theme)
-      return { ...state, ...rest }
     case 'set':
       return { ...state, ...rest }
     default:

From c5533162749f98da06b86294e7ce82d88a8642ba Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Mon, 12 Jun 2023 15:54:57 +0200
Subject: [PATCH 09/68] refactor: add color modes support

---
 src/views/dashboard/MainChart.js     | 204 +++++++++++++++------------
 src/views/widgets/WidgetsDropdown.js |  25 +++-
 2 files changed, 139 insertions(+), 90 deletions(-)

diff --git a/src/views/dashboard/MainChart.js b/src/views/dashboard/MainChart.js
index de6c5ff3c..b017c23ee 100644
--- a/src/views/dashboard/MainChart.js
+++ b/src/views/dashboard/MainChart.js
@@ -1,106 +1,132 @@
-import React from 'react'
+import React, { useEffect, useRef } from 'react'
+
 import { CChartLine } from '@coreui/react-chartjs'
 import { getStyle } from '@coreui/utils'
 
 const MainChart = () => {
+  const chartRef = useRef(null)
+
+  useEffect(() => {
+    document.documentElement.addEventListener('ColorSchemeChange', () => {
+      if (chartRef.current) {
+        setTimeout(() => {
+          chartRef.current.options.scales.x.grid.borderColor = getStyle(
+            '--cui-border-color-translucent',
+          )
+          chartRef.current.options.scales.x.grid.color = getStyle('--cui-border-color-translucent')
+          chartRef.current.options.scales.x.ticks.color = getStyle('--cui-body-color')
+          chartRef.current.options.scales.y.grid.borderColor = getStyle(
+            '--cui-border-color-translucent',
+          )
+          chartRef.current.options.scales.y.grid.color = getStyle('--cui-border-color-translucent')
+          chartRef.current.options.scales.y.ticks.color = getStyle('--cui-body-color')
+          chartRef.current.update()
+        })
+      }
+    })
+  }, [chartRef])
+
   const random = () => Math.round(Math.random() * 100)
 
   return (
-    <CChartLine
-      style={{ height: '300px', marginTop: '40px' }}
-      data={{
-        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-        datasets: [
-          {
-            label: 'My First dataset',
-            backgroundColor: `rgba(${getStyle('--cui-info-rgb')}, .1)`,
-            borderColor: getStyle('--cui-info'),
-            pointHoverBackgroundColor: getStyle('--cui-info'),
-            borderWidth: 2,
-            data: [
-              random(50, 200),
-              random(50, 200),
-              random(50, 200),
-              random(50, 200),
-              random(50, 200),
-              random(50, 200),
-              random(50, 200),
-            ],
-            fill: true,
-          },
-          {
-            label: 'My Second dataset',
-            backgroundColor: 'transparent',
-            borderColor: getStyle('--cui-success'),
-            pointHoverBackgroundColor: getStyle('--cui-success'),
-            borderWidth: 2,
-            data: [
-              random(50, 200),
-              random(50, 200),
-              random(50, 200),
-              random(50, 200),
-              random(50, 200),
-              random(50, 200),
-              random(50, 200),
-            ],
-          },
-          {
-            label: 'My Third dataset',
-            backgroundColor: 'transparent',
-            borderColor: getStyle('--cui-danger'),
-            pointHoverBackgroundColor: getStyle('--cui-danger'),
-            borderWidth: 1,
-            borderDash: [8, 5],
-            data: [65, 65, 65, 65, 65, 65, 65],
-          },
-        ],
-      }}
-      options={{
-        maintainAspectRatio: false,
-        plugins: {
-          legend: {
-            display: false,
-          },
-        },
-        scales: {
-          x: {
-            grid: {
-              color: getStyle('--cui-border-color-translucent'),
-              drawOnChartArea: false,
+    <>
+      <CChartLine
+        ref={chartRef}
+        style={{ height: '300px', marginTop: '40px' }}
+        data={{
+          labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+          datasets: [
+            {
+              label: 'My First dataset',
+              backgroundColor: `rgba(${getStyle('--cui-info-rgb')}, .1)`,
+              borderColor: getStyle('--cui-info'),
+              pointHoverBackgroundColor: getStyle('--cui-info'),
+              borderWidth: 2,
+              data: [
+                random(50, 200),
+                random(50, 200),
+                random(50, 200),
+                random(50, 200),
+                random(50, 200),
+                random(50, 200),
+                random(50, 200),
+              ],
+              fill: true,
             },
-            ticks: {
-              color: getStyle('--cui-body-color'),
+            {
+              label: 'My Second dataset',
+              backgroundColor: 'transparent',
+              borderColor: getStyle('--cui-success'),
+              pointHoverBackgroundColor: getStyle('--cui-success'),
+              borderWidth: 2,
+              data: [
+                random(50, 200),
+                random(50, 200),
+                random(50, 200),
+                random(50, 200),
+                random(50, 200),
+                random(50, 200),
+                random(50, 200),
+              ],
             },
-          },
-          y: {
-            border: {
-              color: getStyle('--cui-border-color-translucent'),
-            },
-            grid: {
-              color: getStyle('--cui-border-color-translucent'),
+            {
+              label: 'My Third dataset',
+              backgroundColor: 'transparent',
+              borderColor: getStyle('--cui-danger'),
+              pointHoverBackgroundColor: getStyle('--cui-danger'),
+              borderWidth: 1,
+              borderDash: [8, 5],
+              data: [65, 65, 65, 65, 65, 65, 65],
             },
-            ticks: {
-              beginAtZero: true,
-              color: getStyle('--cui-body-color'),
-              max: 250,
-              maxTicksLimit: 5,
-              stepSize: Math.ceil(250 / 5),
+          ],
+        }}
+        options={{
+          maintainAspectRatio: false,
+          plugins: {
+            legend: {
+              display: false,
             },
           },
-        },
-        elements: {
-          line: {
-            tension: 0.4,
+          scales: {
+            x: {
+              grid: {
+                color: getStyle('--cui-border-color-translucent'),
+                drawOnChartArea: false,
+              },
+              ticks: {
+                color: getStyle('--cui-body-color'),
+              },
+            },
+            y: {
+              border: {
+                color: getStyle('--cui-border-color-translucent'),
+              },
+              grid: {
+                color: getStyle('--cui-border-color-translucent'),
+              },
+              ticks: {
+                beginAtZero: true,
+                color: getStyle('--cui-body-color'),
+                max: 250,
+                maxTicksLimit: 5,
+                stepSize: Math.ceil(250 / 5),
+              },
+            },
           },
-          point: {
-            radius: 0,
-            hitRadius: 10,
-            hoverRadius: 4,
-            hoverBorderWidth: 3,
+          elements: {
+            line: {
+              tension: 0.4,
+            },
+            point: {
+              radius: 0,
+              hitRadius: 10,
+              hoverRadius: 4,
+              hoverBorderWidth: 3,
+            },
           },
-        },
-      }}
-    />
+        }}
+      />
+    </>
   )
 }
 
diff --git a/src/views/widgets/WidgetsDropdown.js b/src/views/widgets/WidgetsDropdown.js
index 94bbb6f90..478661ebb 100644
--- a/src/views/widgets/WidgetsDropdown.js
+++ b/src/views/widgets/WidgetsDropdown.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect, useRef } from 'react'
 import {
   CRow,
   CCol,
@@ -14,6 +14,27 @@ import CIcon from '@coreui/icons-react'
 import { cilArrowBottom, cilArrowTop, cilOptions } from '@coreui/icons'
 
 const WidgetsDropdown = () => {
+  const widgetChartRef1 = useRef(null)
+  const widgetChartRef2 = useRef(null)
+
+  useEffect(() => {
+    document.documentElement.addEventListener('ColorSchemeChange', () => {
+      if (widgetChartRef1.current) {
+        setTimeout(() => {
+          widgetChartRef1.current.data.datasets[0].pointBackgroundColor = getStyle('--cui-primary')
+          widgetChartRef1.current.update()
+        })
+      }
+
+      if (widgetChartRef2.current) {
+        setTimeout(() => {
+          widgetChartRef2.current.data.datasets[0].pointBackgroundColor = getStyle('--cui-info')
+          widgetChartRef2.current.update()
+        })
+      }
+    })
+  }, [widgetChartRef1, widgetChartRef2])
+
   return (
     <CRow>
       <CCol sm={6} lg={3}>
@@ -44,6 +65,7 @@ const WidgetsDropdown = () => {
           }
           chart={
             <CChartLine
+              ref={widgetChartRef1}
               className="mt-3 mx-3"
               style={{ height: '70px' }}
               data={{
@@ -131,6 +153,7 @@ const WidgetsDropdown = () => {
           }
           chart={
             <CChartLine
+              ref={widgetChartRef2}
               className="mt-3 mx-3"
               style={{ height: '70px' }}
               data={{

From 63978da54fb5fce542dd43bdb074f171274d35ee Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Mon, 12 Jun 2023 15:56:42 +0200
Subject: [PATCH 10/68] refactor: update SimpleBar to v3

---
 src/components/AppSidebar.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/AppSidebar.js b/src/components/AppSidebar.js
index a75bf6523..4d81c268e 100644
--- a/src/components/AppSidebar.js
+++ b/src/components/AppSidebar.js
@@ -10,7 +10,7 @@ import { logoNegative } from 'src/assets/brand/logo-negative'
 import { sygnet } from 'src/assets/brand/sygnet'
 
 import SimpleBar from 'simplebar-react'
-import 'simplebar/dist/simplebar.min.css'
+import 'simplebar-react/dist/simplebar.min.css';
 
 // sidebar nav config
 import navigation from '../_nav'

From 3411c2fffa3eb2d28c76354f5bbee18df7025e8c Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Mon, 12 Jun 2023 15:56:42 +0200
Subject: [PATCH 11/68] refactor: update SimpleBar to v3

---
 src/components/AppSidebar.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/AppSidebar.js b/src/components/AppSidebar.js
index a75bf6523..d279a1101 100644
--- a/src/components/AppSidebar.js
+++ b/src/components/AppSidebar.js
@@ -10,7 +10,7 @@ import { logoNegative } from 'src/assets/brand/logo-negative'
 import { sygnet } from 'src/assets/brand/sygnet'
 
 import SimpleBar from 'simplebar-react'
-import 'simplebar/dist/simplebar.min.css'
+import 'simplebar-react/dist/simplebar.min.css'
 
 // sidebar nav config
 import navigation from '../_nav'

From efec57820b90a5e094bae41cc22a570773d79837 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 13 Jun 2023 16:01:54 +0200
Subject: [PATCH 12/68] chore: update dependencies and devDependencies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

@coreui/react     ^4.9.0-beta.0  →  ^4.9.0-beta.1
react-redux              ^8.0.7  →         ^8.1.0
---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index b4ec91f04..32f972953 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
     "@coreui/coreui": "4.3.0-beta.0",
     "@coreui/icons": "^3.0.1",
     "@coreui/icons-react": "^2.1.0",
-    "@coreui/react": "^4.9.0-beta.0",
+    "@coreui/react": "^4.9.0-beta.1",
     "@coreui/react-chartjs": "^2.1.3",
     "@coreui/utils": "^2.0.2",
     "chart.js": "^3.9.1",
@@ -36,7 +36,7 @@
     "react": "^18.2.0",
     "react-app-polyfill": "^3.0.0",
     "react-dom": "^18.2.0",
-    "react-redux": "^8.0.7",
+    "react-redux": "^8.1.0",
     "react-router-dom": "^6.12.1",
     "redux": "4.2.1",
     "simplebar-react": "^3.2.4"

From 615f93333c23dbacd4884d3bcdb534db5725d026 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 13 Jun 2023 16:03:40 +0200
Subject: [PATCH 13/68] refactor: improve color modes handling

---
 src/App.js   | 14 +++++++++++---
 src/store.js |  1 +
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/App.js b/src/App.js
index b1af84d3d..9d50b99c1 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,5 +1,6 @@
 import React, { Suspense, useEffect } from 'react'
 import { HashRouter, Route, Routes } from 'react-router-dom'
+import { useSelector } from 'react-redux'
 
 import { CSpinner, useColorModes } from '@coreui/react'
 import './scss/style.scss'
@@ -14,14 +15,21 @@ const Page404 = React.lazy(() => import('./views/pages/page404/Page404'))
 const Page500 = React.lazy(() => import('./views/pages/page500/Page500'))
 
 const App = () => {
-  const { setColorMode } = useColorModes('coreui-free-react-admin-template-theme')
-  const urlParams = new URLSearchParams(window.location.href.split('?')[1])
+  const { isColorModeSet, setColorMode } = useColorModes('coreui-free-react-admin-template-theme')
+  const theme = useSelector((state) => state.theme)
 
   useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.href.split('?')[1])
     if (urlParams.get('theme')) {
       setColorMode(urlParams.get('theme'))
     }
-  }, [])
+
+    if (isColorModeSet()) {
+      return
+    }
+
+    setColorMode(theme)
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
     <HashRouter>
diff --git a/src/store.js b/src/store.js
index ab446364c..559c5983e 100644
--- a/src/store.js
+++ b/src/store.js
@@ -2,6 +2,7 @@ import { createStore } from 'redux'
 
 const initialState = {
   sidebarShow: true,
+  theme: 'light',
 }
 
 const changeState = (state = initialState, { type, ...rest }) => {

From f399a308d0988986ddc204873903e315dc2701d8 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Wed, 14 Jun 2023 15:27:16 +0200
Subject: [PATCH 14/68] refactor: update main view

---
 src/views/dashboard/Dashboard.js | 32 +++++++++++++++++---------------
 1 file changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/views/dashboard/Dashboard.js b/src/views/dashboard/Dashboard.js
index 2bb1922a6..c03b691c1 100644
--- a/src/views/dashboard/Dashboard.js
+++ b/src/views/dashboard/Dashboard.js
@@ -314,16 +314,20 @@ const Dashboard = () => {
               <br />
 
               <CTable align="middle" className="mb-0 border" hover responsive>
-                <CTableHead className="bg-body-secondary">
+                <CTableHead>
                   <CTableRow>
-                    <CTableHeaderCell className="text-center">
+                    <CTableHeaderCell className="bg-body-tertiary text-center">
                       <CIcon icon={cilPeople} />
                     </CTableHeaderCell>
-                    <CTableHeaderCell>User</CTableHeaderCell>
-                    <CTableHeaderCell className="text-center">Country</CTableHeaderCell>
-                    <CTableHeaderCell>Usage</CTableHeaderCell>
-                    <CTableHeaderCell className="text-center">Payment Method</CTableHeaderCell>
-                    <CTableHeaderCell>Activity</CTableHeaderCell>
+                    <CTableHeaderCell className="bg-body-tertiary">User</CTableHeaderCell>
+                    <CTableHeaderCell className="bg-body-tertiary text-center">
+                      Country
+                    </CTableHeaderCell>
+                    <CTableHeaderCell className="bg-body-tertiary">Usage</CTableHeaderCell>
+                    <CTableHeaderCell className="bg-body-tertiary text-center">
+                      Payment Method
+                    </CTableHeaderCell>
+                    <CTableHeaderCell className="bg-body-tertiary">Activity</CTableHeaderCell>
                   </CTableRow>
                 </CTableHead>
                 <CTableBody>
@@ -334,7 +338,7 @@ const Dashboard = () => {
                       </CTableDataCell>
                       <CTableDataCell>
                         <div>{item.user.name}</div>
-                        <div className="small text-medium-emphasis">
+                        <div className="small text-medium-emphasis text-nowrap">
                           <span>{item.user.new ? 'New' : 'Recurring'}</span> | Registered:{' '}
                           {item.user.registered}
                         </div>
@@ -343,11 +347,9 @@ const Dashboard = () => {
                         <CIcon size="xl" icon={item.country.flag} title={item.country.name} />
                       </CTableDataCell>
                       <CTableDataCell>
-                        <div className="clearfix">
-                          <div className="float-start">
-                            <strong>{item.usage.value}%</strong>
-                          </div>
-                          <div className="float-end">
+                        <div className="d-flex justify-content-between text-nowrap">
+                          <div className="fw-semibold">{item.usage.value}%</div>
+                          <div className="ms-3">
                             <small className="text-medium-emphasis">{item.usage.period}</small>
                           </div>
                         </div>
@@ -357,8 +359,8 @@ const Dashboard = () => {
                         <CIcon size="xl" icon={item.payment.icon} />
                       </CTableDataCell>
                       <CTableDataCell>
-                        <div className="small text-medium-emphasis">Last login</div>
-                        <strong>{item.activity}</strong>
+                        <div className="small text-medium-emphasis text-nowrap">Last login</div>
+                        <div className="fw-semibold text-nowrap">{item.activity}</div>
                       </CTableDataCell>
                     </CTableRow>
                   ))}

From cfe2ebd5a5eac60b235724a3ecf56ef2f0855e29 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Fri, 16 Jun 2023 14:36:35 +0200
Subject: [PATCH 15/68] refactor: improve color modes handling

---
 src/App.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/App.js b/src/App.js
index 9d50b99c1..05aa83455 100644
--- a/src/App.js
+++ b/src/App.js
@@ -16,19 +16,20 @@ const Page500 = React.lazy(() => import('./views/pages/page500/Page500'))
 
 const App = () => {
   const { isColorModeSet, setColorMode } = useColorModes('coreui-free-react-admin-template-theme')
-  const theme = useSelector((state) => state.theme)
+  const storedTheme = useSelector((state) => state.theme)
 
   useEffect(() => {
     const urlParams = new URLSearchParams(window.location.href.split('?')[1])
-    if (urlParams.get('theme')) {
-      setColorMode(urlParams.get('theme'))
+    const theme = urlParams.get('theme').match(/^[A-Za-z0-9\s]+/)[0]
+    if (theme) {
+      setColorMode(theme)
     }
 
     if (isColorModeSet()) {
       return
     }
 
-    setColorMode(theme)
+    setColorMode(storedTheme)
   }, []) // eslint-disable-line react-hooks/exhaustive-deps
 
   return (

From a1f20124664fea8b8b63171e4147c980b199a7f4 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Wed, 28 Jun 2023 11:27:53 +0200
Subject: [PATCH 16/68] refactor: update color modes support

---
 src/App.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/App.js b/src/App.js
index 05aa83455..7f8e6d7ea 100644
--- a/src/App.js
+++ b/src/App.js
@@ -20,7 +20,7 @@ const App = () => {
 
   useEffect(() => {
     const urlParams = new URLSearchParams(window.location.href.split('?')[1])
-    const theme = urlParams.get('theme').match(/^[A-Za-z0-9\s]+/)[0]
+    const theme = urlParams.get('theme') && urlParams.get('theme').match(/^[A-Za-z0-9\s]+/)[0]
     if (theme) {
       setColorMode(theme)
     }

From f4f57434047b85fa7e0b6a3addf5f1ef8a930b4b Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Wed, 28 Jun 2023 12:54:24 +0200
Subject: [PATCH 17/68] chore: update dependencies and devDependencies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

react-redux        ^8.1.0  →   ^8.1.1
react-router-dom  ^6.12.1  →  ^6.14.0
sass              ^1.63.3  →  ^1.63.6
---
 package.json | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 32f972953..a9b35bf24 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
     "@coreui/coreui": "4.3.0-beta.0",
     "@coreui/icons": "^3.0.1",
     "@coreui/icons-react": "^2.1.0",
-    "@coreui/react": "^4.9.0-beta.1",
+    "@coreui/react": "^4.9.0-beta.2",
     "@coreui/react-chartjs": "^2.1.3",
     "@coreui/utils": "^2.0.2",
     "chart.js": "^3.9.1",
@@ -36,8 +36,8 @@
     "react": "^18.2.0",
     "react-app-polyfill": "^3.0.0",
     "react-dom": "^18.2.0",
-    "react-redux": "^8.1.0",
-    "react-router-dom": "^6.12.1",
+    "react-redux": "^8.1.1",
+    "react-router-dom": "^6.14.0",
     "redux": "4.2.1",
     "simplebar-react": "^3.2.4"
   },
@@ -49,7 +49,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "prettier": "2.8.8",
     "react-scripts": "5.0.1",
-    "sass": "^1.63.3",
+    "sass": "^1.63.6",
     "web-vitals": "^3.3.2"
   },
   "engines": {

From 00fffd18d2272f413f0589a9434f8f8f84dbafd0 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Wed, 28 Jun 2023 12:55:45 +0200
Subject: [PATCH 18/68] refactor: update color modeshandling

---
 src/components/AppHeader.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/AppHeader.js b/src/components/AppHeader.js
index 8d49845c0..80bb87dc8 100644
--- a/src/components/AppHeader.js
+++ b/src/components/AppHeader.js
@@ -32,8 +32,7 @@ import { AppHeaderDropdown } from './header/index'
 import { logo } from 'src/assets/brand/logo'
 
 const AppHeader = () => {
-  const { getColorMode, setColorMode } = useColorModes('coreui-free-react-admin-template-theme')
-  const colorMode = getColorMode()
+  const { colorMode, setColorMode } = useColorModes('coreui-free-react-admin-template-theme')
 
   const dispatch = useDispatch()
   const sidebarShow = useSelector((state) => state.sidebarShow)

From 746e0613ca0bce36053f37c5c43685ba0920283b Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Wed, 28 Jun 2023 12:56:09 +0200
Subject: [PATCH 19/68] refactor: update examples

---
 src/components/DocsExample.js  | 5 +++--
 src/scss/_example.scss         | 2 +-
 src/views/forms/range/Range.js | 8 ++++----
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/DocsExample.js b/src/components/DocsExample.js
index 3340cbc80..5fb2a0569 100644
--- a/src/components/DocsExample.js
+++ b/src/components/DocsExample.js
@@ -5,7 +5,7 @@ import CIcon from '@coreui/icons-react'
 import { cilCode, cilMediaPlay } from '@coreui/icons'
 
 const DocsExample = (props) => {
-  const { children, href } = props
+  const { children, href, tabContentClassName } = props
 
   const _href = `https://coreui.io/react/docs/${href}`
 
@@ -25,7 +25,7 @@ const DocsExample = (props) => {
           </CNavLink>
         </CNavItem>
       </CNav>
-      <CTabContent className="rounded-bottom">
+      <CTabContent className={`rounded-bottom ${tabContentClassName ? tabContentClassName : ''}`}>
         <CTabPane className="p-3 preview" visible>
           {children}
         </CTabPane>
@@ -37,6 +37,7 @@ const DocsExample = (props) => {
 DocsExample.propTypes = {
   children: PropTypes.node,
   href: PropTypes.string,
+  tabContentClassName: PropTypes.string,
 }
 
 export default React.memo(DocsExample)
diff --git a/src/scss/_example.scss b/src/scss/_example.scss
index fdf64254b..2ce6eb7f4 100644
--- a/src/scss/_example.scss
+++ b/src/scss/_example.scss
@@ -9,7 +9,7 @@
   }
 
   .tab-content {
-    background-color: var(--#{$prefix}tertiary-bg) !important;
+    background-color: rgba(var(--#{$prefix}tertiary-bg-rgb), var(--#{$prefix}bg-opacity, 1)) !important;
   }
 
   & + p {
diff --git a/src/views/forms/range/Range.js b/src/views/forms/range/Range.js
index 905c3134d..1423f7b73 100644
--- a/src/views/forms/range/Range.js
+++ b/src/views/forms/range/Range.js
@@ -15,7 +15,7 @@ const Range = () => {
               Create custom <code>&lt;input type=&#34;range&#34;&gt;</code> controls with{' '}
               <code>&lt;CFormRange&gt;</code>.
             </p>
-            <DocsExample href="forms/range">
+            <DocsExample href="forms/range" tabContentClassName="bg-opacity-10">
               <CFormLabel htmlFor="customRange1">Example range</CFormLabel>
               <CFormRange id="customRange1" />
             </DocsExample>
@@ -32,7 +32,7 @@ const Range = () => {
               Add the <code>disabled</code> boolean attribute on an input to give it a grayed out
               appearance and remove pointer events.
             </p>
-            <DocsExample href="forms/range#disabled">
+            <DocsExample href="forms/range#disabled" tabContentClassName="bg-opacity-10">
               <CFormLabel htmlFor="disabledRange">Disabled range</CFormLabel>
               <CFormRange id="disabledRange" disabled />
             </DocsExample>
@@ -50,7 +50,7 @@ const Range = () => {
               <code>0</code> and <code>100</code>, respectively. You may specify new values for
               those using the <code>min</code> and <code>max</code> attributes.
             </p>
-            <DocsExample href="forms/range#min-and-max">
+            <DocsExample href="forms/range#min-and-max" tabContentClassName="bg-opacity-10">
               <CFormLabel htmlFor="customRange2">Example range</CFormLabel>
               <CFormRange min="0" max="5" defaultValue="3" id="customRange2" />
             </DocsExample>
@@ -68,7 +68,7 @@ const Range = () => {
               specify a <code>step</code> value. In the example below, we double the number of steps
               by using <code>step=&#34;0.5&#34;</code>.
             </p>
-            <DocsExample href="forms/range#steps">
+            <DocsExample href="forms/range#steps" tabContentClassName="bg-opacity-10">
               <CFormLabel htmlFor="customRange3">Example range</CFormLabel>
               <CFormRange min="0" max="5" step="0.5" defaultValue="3" id="customRange3" />
             </DocsExample>

From a1e9db0b0b137eb621c5ee3ca973df6c41290ff0 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Wed, 28 Jun 2023 12:58:22 +0200
Subject: [PATCH 20/68] release: v4.6.0-beta.0

---
 package.json      | 2 +-
 public/index.html | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index a9b35bf24..9f5d8f34b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coreui/coreui-free-react-admin-template",
-  "version": "4.5.0",
+  "version": "4.6.0-beta.0",
   "description": "CoreUI Free React Admin Template",
   "homepage": ".",
   "bugs": {
diff --git a/public/index.html b/public/index.html
index 21d293335..5d2e83841 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <!--
 * CoreUI Free React.js Admin Template
-* @version v4.5.0
+* @version v4.6.0-beta.0
 * @link https://coreui.io/product/free-react-admin-template/
 * Copyright (c) 2023 creativeLabs Łukasz Holeczek
 * Licensed under MIT (https://github.com/coreui/coreui-free-react-admin-template/blob/main/LICENSE)

From 26982f8e58a6b2ece389918cc59af8f8ee7046e1 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Fri, 15 Sep 2023 16:32:17 +0200
Subject: [PATCH 21/68] chore: update dependencies and devDependencies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

@coreui/coreui                4.3.0-beta.0  →  ^5.0.0-alpha.2
@coreui/icons-react                 ^2.1.0  →          ^2.2.1
@coreui/react                ^4.9.0-beta.2  →  ^5.0.0-alpha.1
@testing-library/jest-dom          ^5.16.5  →         ^5.17.0
@testing-library/user-event        ^14.4.3  →         ^14.5.0
core-js                            ^3.31.0  →         ^3.32.2
eslint-config-prettier              ^8.8.0  →         ^8.10.0
react-redux                         ^8.1.1  →          ^8.1.2
react-router-dom                   ^6.14.0  →         ^6.16.0
sass                               ^1.63.6  →         ^1.67.0
web-vitals                          ^3.3.2  →          ^3.4.0
---
 package.json | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index 9f5d8f34b..5ae06afad 100644
--- a/package.json
+++ b/package.json
@@ -23,34 +23,34 @@
   },
   "dependencies": {
     "@coreui/chartjs": "^3.1.2",
-    "@coreui/coreui": "4.3.0-beta.0",
+    "@coreui/coreui": "^5.0.0-alpha.2",
     "@coreui/icons": "^3.0.1",
-    "@coreui/icons-react": "^2.1.0",
-    "@coreui/react": "^4.9.0-beta.2",
+    "@coreui/icons-react": "^2.2.1",
+    "@coreui/react": "^5.0.0-alpha.1",
     "@coreui/react-chartjs": "^2.1.3",
     "@coreui/utils": "^2.0.2",
     "chart.js": "^3.9.1",
     "classnames": "^2.3.2",
-    "core-js": "^3.31.0",
+    "core-js": "^3.32.2",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-app-polyfill": "^3.0.0",
     "react-dom": "^18.2.0",
-    "react-redux": "^8.1.1",
-    "react-router-dom": "^6.14.0",
+    "react-redux": "^8.1.2",
+    "react-router-dom": "^6.16.0",
     "redux": "4.2.1",
     "simplebar-react": "^3.2.4"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.4.3",
-    "eslint-config-prettier": "^8.8.0",
+    "@testing-library/user-event": "^14.5.0",
+    "eslint-config-prettier": "^8.10.0",
     "eslint-plugin-prettier": "^4.2.1",
     "prettier": "2.8.8",
     "react-scripts": "5.0.1",
-    "sass": "^1.63.6",
-    "web-vitals": "^3.3.2"
+    "sass": "^1.67.0",
+    "web-vitals": "^3.4.0"
   },
   "engines": {
     "node": ">=10",

From cd8ee8740c05e12fa838ac83a5aa5bb65a950f8a Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Fri, 15 Sep 2023 17:05:52 +0200
Subject: [PATCH 22/68] refactor: change `.text-medium-emphasis` to
 `.text-body-secondary`

---
 src/components/DocsLink.js                    |  2 +-
 src/views/base/accordion/Accordion.js         |  6 +-
 src/views/base/breadcrumbs/Breadcrumbs.js     |  2 +-
 src/views/base/cards/Cards.js                 | 86 +++++++++----------
 src/views/base/carousels/Carousels.js         | 12 +--
 src/views/base/collapses/Collapses.js         |  6 +-
 src/views/base/list-groups/ListGroups.js      | 30 +++----
 src/views/base/navs/Navs.js                   | 22 ++---
 src/views/base/paginations/Paginations.js     | 14 +--
 src/views/base/placeholders/Placeholders.js   | 12 +--
 src/views/base/popovers/Popovers.js           |  2 +-
 src/views/base/progress/Progress.js           | 14 +--
 src/views/base/spinners/Spinners.js           | 12 +--
 src/views/base/tables/Tables.js               | 28 +++---
 src/views/base/tooltips/Tooltips.js           |  8 +-
 .../buttons/button-groups/ButtonGroups.js     |  4 +-
 src/views/buttons/buttons/Buttons.js          | 28 +++---
 src/views/buttons/dropdowns/Dropdowns.js      | 20 ++---
 src/views/dashboard/Dashboard.js              | 22 ++---
 src/views/forms/checks-radios/ChecksRadios.js | 16 ++--
 .../forms/floating-labels/FloatingLabels.js   | 12 +--
 src/views/forms/form-control/FormControl.js   |  8 +-
 src/views/forms/input-group/InputGroup.js     | 16 ++--
 src/views/forms/layout/Layout.js              | 20 ++---
 src/views/forms/range/Range.js                |  8 +-
 src/views/forms/select/Select.js              |  8 +-
 src/views/forms/validation/Validation.js      | 16 ++--
 src/views/notifications/alerts/Alerts.js      |  8 +-
 src/views/notifications/badges/Badges.js      | 12 +--
 src/views/notifications/modals/Modals.js      | 20 ++---
 src/views/notifications/toasts/Toasts.js      | 12 +--
 src/views/pages/login/Login.js                |  2 +-
 src/views/pages/page404/Page404.js            |  2 +-
 src/views/pages/page500/Page500.js            |  2 +-
 src/views/pages/register/Register.js          |  2 +-
 src/views/theme/colors/Colors.js              |  4 +-
 src/views/widgets/Widgets.js                  |  8 +-
 src/views/widgets/WidgetsDropdown.js          |  8 +-
 38 files changed, 256 insertions(+), 258 deletions(-)

diff --git a/src/components/DocsLink.js b/src/components/DocsLink.js
index b5cdb97e1..7c72aa128 100644
--- a/src/components/DocsLink.js
+++ b/src/components/DocsLink.js
@@ -16,7 +16,7 @@ const DocsLink = (props) => {
         target="_blank"
         className="card-header-action"
       >
-        <small className="text-medium-emphasis">{text || 'docs'}</small>
+        <small className="text-body-secondary">{text || 'docs'}</small>
       </CLink>
     </div>
   )
diff --git a/src/views/base/accordion/Accordion.js b/src/views/base/accordion/Accordion.js
index 21e88215b..5d6644a46 100644
--- a/src/views/base/accordion/Accordion.js
+++ b/src/views/base/accordion/Accordion.js
@@ -21,7 +21,7 @@ const Accordion = () => {
             <strong>React Accordion</strong>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Click the accordions below to expand/collapse the accordion content.
             </p>
             <DocsExample href="components/accordion">
@@ -71,7 +71,7 @@ const Accordion = () => {
             <strong>React Accordion</strong> <small>Flush</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Add <code>flush</code> to remove the default <code>background-color</code>, some
               borders, and some rounded corners to render accordions edge-to-edge with their parent
               container.
@@ -123,7 +123,7 @@ const Accordion = () => {
             <strong>React Accordion</strong> <small>Always open</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Add <code>alwaysOpen</code> property to make accordion items stay open when another
               item is opened.
             </p>
diff --git a/src/views/base/breadcrumbs/Breadcrumbs.js b/src/views/base/breadcrumbs/Breadcrumbs.js
index 8ddd0cc0e..f5c9b39e2 100644
--- a/src/views/base/breadcrumbs/Breadcrumbs.js
+++ b/src/views/base/breadcrumbs/Breadcrumbs.js
@@ -20,7 +20,7 @@ const Breadcrumbs = () => {
             <strong>React Breadcrumb</strong>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               The breadcrumb navigation provides links back to each previous page the user navigated
               through and shows the current location in a website or an application. You don’t have
               to add separators, because they automatically added in CSS through{' '}
diff --git a/src/views/base/cards/Cards.js b/src/views/base/cards/Cards.js
index b9bdfffcd..c9a8ddb40 100644
--- a/src/views/base/cards/Cards.js
+++ b/src/views/base/cards/Cards.js
@@ -32,7 +32,7 @@ const Cards = () => {
             <strong>Card</strong> <small>Example</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Cards are built with as little markup and styles as possible but still manage to
               deliver a bunch of control and customization. Built with flexbox, they offer easy
               alignment and mix well with other CoreUI components. Cards have no top, left, and
@@ -40,7 +40,7 @@ const Cards = () => {
               <a href="https://coreui.io/docs/utilities/spacing">spacing utilities</a> as needed.
               They have no fixed width to start, so they&#39;ll fill the full width of its parent.
             </p>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Below is an example of a basic card with mixed content and a fixed width. Cards have
               no fixed width to start, so they&#39;ll naturally fill the full width of its parent
               element.
@@ -67,7 +67,7 @@ const Cards = () => {
             <strong>Card</strong> <small>Body</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               The main block of a card is the <code>&lt;CCardBody&gt;</code>. Use it whenever you
               need a padded section within a card.
             </p>
@@ -85,12 +85,12 @@ const Cards = () => {
             <strong>Card</strong> <small>Titles, text, and links</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Card titles are managed by <code>&lt;CCardTitle&gt;</code> component. Identically,
               links are attached and collected next to each other by <code>&lt;CCardLink&gt;</code>{' '}
               component.
             </p>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Subtitles are managed by <code>&lt;CCardSubtitle&gt;</code> component. If the{' '}
               <code>&lt;CCardTitle&gt;</code> also, the <code>&lt;CCardSubtitle&gt;</code> items are
               stored in a <code>&lt;CCardBody&gt;</code> item, the card title, and subtitle are
@@ -100,7 +100,7 @@ const Cards = () => {
               <CCard style={{ width: '18rem' }}>
                 <CCardBody>
                   <CCardTitle>Card title</CCardTitle>
-                  <CCardSubtitle className="mb-2 text-medium-emphasis">Card subtitle</CCardSubtitle>
+                  <CCardSubtitle className="mb-2 text-body-secondary">Card subtitle</CCardSubtitle>
                   <CCardText>
                     Some quick example text to build on the card title and make up the bulk of the
                     card&#39;s content.
@@ -119,7 +119,7 @@ const Cards = () => {
             <strong>Card</strong> <small>Images</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               <code>.card-img-top</code> places a picture to the top of the card. With{' '}
               <code>.card-text</code>, text can be added to the card. Text within{' '}
               <code>.card-text</code> can additionally be styled with the regular HTML tags.
@@ -144,7 +144,7 @@ const Cards = () => {
             <strong>Card</strong> <small>List groups</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Create lists of content in a card with a flush list group.
             </p>
             <DocsExample href="components/card/#list-groups">
@@ -189,7 +189,7 @@ const Cards = () => {
             <strong>Card</strong> <small>Kitchen sink</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Combine and match many content types to build the card you need, or throw everything
               in there. Shown below are image styles, blocks, text styles, and a list group—all
               wrapped in a fixed-width card.
@@ -224,7 +224,7 @@ const Cards = () => {
             <strong>Card</strong> <small>Header and footer</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Add an optional header and/or footer within a card.
             </p>
             <DocsExample href="components/card/#header-and-footer">
@@ -239,7 +239,7 @@ const Cards = () => {
                 </CCardBody>
               </CCard>
             </DocsExample>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Card headers can be styled by adding ex. <code>component=&#34;h5&#34;</code>.
             </p>
             <DocsExample href="components/card/#header-and-footer">
@@ -280,7 +280,7 @@ const Cards = () => {
                   </CCardText>
                   <CButton href="#">Go somewhere</CButton>
                 </CCardBody>
-                <CCardFooter className="text-medium-emphasis">2 days ago</CCardFooter>
+                <CCardFooter className="text-body-secondary">2 days ago</CCardFooter>
               </CCard>
             </DocsExample>
           </CCardBody>
@@ -292,13 +292,13 @@ const Cards = () => {
             <strong>Card</strong> <small>Body</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Cards assume no specific <code>width</code> to start, so they&#39;ll be 100% wide
               unless otherwise stated. You can adjust this as required with custom CSS, grid
               classes, grid Sass mixins, or services.
             </p>
             <h3>Using grid markup</h3>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Using the grid, wrap cards in columns and rows as needed.
             </p>
             <DocsExample href="components/card/#sizing">
@@ -328,7 +328,7 @@ const Cards = () => {
               </CRow>
             </DocsExample>
             <h3>Using utilities</h3>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Use some of{' '}
               <a href="https://coreui.io/docs/utilities/sizing/">available sizing utilities</a> to
               rapidly set a card&#39;s width.
@@ -354,7 +354,7 @@ const Cards = () => {
               </CCard>
             </DocsExample>
             <strong>Using custom CSS</strong>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Use custom CSS in your stylesheets or as inline styles to set a width.
             </p>
             <DocsExample href="components/card/#sizing">
@@ -377,7 +377,7 @@ const Cards = () => {
             <strong>Card</strong> <small>Text alignment</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               You can instantly change the text arrangement of any card—in its whole or specific
               parts—with{' '}
               <a href="https://coreui.io/docs/utilities/text/#text-alignment">text align classes</a>
@@ -421,7 +421,7 @@ const Cards = () => {
             <strong>Card</strong> <small>Navigation</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Add some navigation to a <code>&lt;CCardHeader&gt;</code> with our{' '}
               <code>&lt;CNav&gt;</code> component.
             </p>
@@ -490,7 +490,7 @@ const Cards = () => {
             <strong>Card</strong> <small>Image caps</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Similar to headers and footers, cards can include top and bottom &#34;image
               caps&#34;—images at the top or bottom of a card.
             </p>
@@ -506,7 +506,7 @@ const Cards = () => {
                         additional content. This content is a little bit longer.
                       </CCardText>
                       <CCardText>
-                        <small className="text-medium-emphasis">Last updated 3 mins ago</small>
+                        <small className="text-body-secondary">Last updated 3 mins ago</small>
                       </CCardText>
                     </CCardBody>
                   </CCard>
@@ -520,7 +520,7 @@ const Cards = () => {
                         additional content. This content is a little bit longer.
                       </CCardText>
                       <CCardText>
-                        <small className="text-medium-emphasis">Last updated 3 mins ago</small>
+                        <small className="text-body-secondary">Last updated 3 mins ago</small>
                       </CCardText>
                     </CCardBody>
                     <CCardImage orientation="bottom" src={ReactImg} />
@@ -537,11 +537,11 @@ const Cards = () => {
             <strong>Card</strong> <small>Card styles</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Cards include various options for customizing their backgrounds, borders, and color.
             </p>
             <h3>Background and color</h3>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Use <code>color</code> property to change the appearance of a card.
             </p>
             <DocsExample href="components/card/#background-and-color">
@@ -572,7 +572,7 @@ const Cards = () => {
               </CRow>
             </DocsExample>
             <h3>Border</h3>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Use <a href="https://coreui.io/docs/utilities/borders/">border utilities</a> to change
               just the <code>border-color</code> of a card. Note that you can set{' '}
               <code>textColor</code> property on the <code>&lt;CCard&gt;</code> or a subset of the
@@ -606,7 +606,7 @@ const Cards = () => {
               </CRow>
             </DocsExample>
             <h3>Top border</h3>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Use <a href="https://coreui.io/docs/utilities/borders/">border utilities</a> to change
               just the <code>border-color</code> of a card. Note that you can set{' '}
               <code>textColor</code> property on the <code>&lt;CCard&gt;</code> or a subset of the
@@ -651,7 +651,7 @@ const Cards = () => {
             <strong>Card</strong> <small>Card groups</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Use card groups to render cards as a single, attached element with equal width and
               height columns. Card groups start off stacked and use <code>display: flex;</code> to
               become attached with uniform dimensions starting at the <code>sm</code> breakpoint.
@@ -667,7 +667,7 @@ const Cards = () => {
                       additional content. This content is a little bit longer.
                     </CCardText>
                     <CCardText>
-                      <small className="text-medium-emphasis">Last updated 3 mins ago</small>
+                      <small className="text-body-secondary">Last updated 3 mins ago</small>
                     </CCardText>
                   </CCardBody>
                 </CCard>
@@ -680,7 +680,7 @@ const Cards = () => {
                       content.
                     </CCardText>
                     <CCardText>
-                      <small className="text-medium-emphasis">Last updated 3 mins ago</small>
+                      <small className="text-body-secondary">Last updated 3 mins ago</small>
                     </CCardText>
                   </CCardBody>
                 </CCard>
@@ -694,13 +694,13 @@ const Cards = () => {
                       that equal height action.
                     </CCardText>
                     <CCardText>
-                      <small className="text-medium-emphasis">Last updated 3 mins ago</small>
+                      <small className="text-body-secondary">Last updated 3 mins ago</small>
                     </CCardText>
                   </CCardBody>
                 </CCard>
               </CCardGroup>
             </DocsExample>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               When using card groups with footers, their content will automatically line up.
             </p>
             <DocsExample href="components/card/#card-groups">
@@ -715,7 +715,7 @@ const Cards = () => {
                     </CCardText>
                   </CCardBody>
                   <CCardFooter>
-                    <small className="text-medium-emphasis">Last updated 3 mins ago</small>
+                    <small className="text-body-secondary">Last updated 3 mins ago</small>
                   </CCardFooter>
                 </CCard>
                 <CCard>
@@ -728,7 +728,7 @@ const Cards = () => {
                     </CCardText>
                   </CCardBody>
                   <CCardFooter>
-                    <small className="text-medium-emphasis">Last updated 3 mins ago</small>
+                    <small className="text-body-secondary">Last updated 3 mins ago</small>
                   </CCardFooter>
                 </CCard>
                 <CCard>
@@ -742,7 +742,7 @@ const Cards = () => {
                     </CCardText>
                   </CCardBody>
                   <CCardFooter>
-                    <small className="text-medium-emphasis">Last updated 3 mins ago</small>
+                    <small className="text-body-secondary">Last updated 3 mins ago</small>
                   </CCardFooter>
                 </CCard>
               </CCardGroup>
@@ -756,7 +756,7 @@ const Cards = () => {
             <strong>Card</strong> <small>Grid cards</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Use the <code>CRow</code> component and set{' '}
               <code>&#123;xs|sm|md|lg|xl|xxl&#125;=&#123;&#123; cols: * &#125;&#125;</code> property
               to control how many grid columns (wrapped around your cards) you show per row. For
@@ -777,7 +777,7 @@ const Cards = () => {
                       </CCardText>
                     </CCardBody>
                     <CCardFooter>
-                      <small className="text-medium-emphasis">Last updated 3 mins ago</small>
+                      <small className="text-body-secondary">Last updated 3 mins ago</small>
                     </CCardFooter>
                   </CCard>
                 </CCol>
@@ -792,7 +792,7 @@ const Cards = () => {
                       </CCardText>
                     </CCardBody>
                     <CCardFooter>
-                      <small className="text-medium-emphasis">Last updated 3 mins ago</small>
+                      <small className="text-body-secondary">Last updated 3 mins ago</small>
                     </CCardFooter>
                   </CCard>
                 </CCol>
@@ -807,7 +807,7 @@ const Cards = () => {
                       </CCardText>
                     </CCardBody>
                     <CCardFooter>
-                      <small className="text-medium-emphasis">Last updated 3 mins ago</small>
+                      <small className="text-body-secondary">Last updated 3 mins ago</small>
                     </CCardFooter>
                   </CCard>
                 </CCol>
@@ -822,13 +822,13 @@ const Cards = () => {
                       </CCardText>
                     </CCardBody>
                     <CCardFooter>
-                      <small className="text-medium-emphasis">Last updated 3 mins ago</small>
+                      <small className="text-body-secondary">Last updated 3 mins ago</small>
                     </CCardFooter>
                   </CCard>
                 </CCol>
               </CRow>
             </DocsExample>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Change it to <code>md=&#123;&#123; cols: 3&#125;&#125;</code> and you&#39;ll see the
               fourth card wrap.
             </p>
@@ -845,7 +845,7 @@ const Cards = () => {
                       </CCardText>
                     </CCardBody>
                     <CCardFooter>
-                      <small className="text-medium-emphasis">Last updated 3 mins ago</small>
+                      <small className="text-body-secondary">Last updated 3 mins ago</small>
                     </CCardFooter>
                   </CCard>
                 </CCol>
@@ -860,7 +860,7 @@ const Cards = () => {
                       </CCardText>
                     </CCardBody>
                     <CCardFooter>
-                      <small className="text-medium-emphasis">Last updated 3 mins ago</small>
+                      <small className="text-body-secondary">Last updated 3 mins ago</small>
                     </CCardFooter>
                   </CCard>
                 </CCol>
@@ -875,7 +875,7 @@ const Cards = () => {
                       </CCardText>
                     </CCardBody>
                     <CCardFooter>
-                      <small className="text-medium-emphasis">Last updated 3 mins ago</small>
+                      <small className="text-body-secondary">Last updated 3 mins ago</small>
                     </CCardFooter>
                   </CCard>
                 </CCol>
@@ -890,7 +890,7 @@ const Cards = () => {
                       </CCardText>
                     </CCardBody>
                     <CCardFooter>
-                      <small className="text-medium-emphasis">Last updated 3 mins ago</small>
+                      <small className="text-body-secondary">Last updated 3 mins ago</small>
                     </CCardFooter>
                   </CCard>
                 </CCol>
diff --git a/src/views/base/carousels/Carousels.js b/src/views/base/carousels/Carousels.js
index 3f09b3b3e..d3eac83a7 100644
--- a/src/views/base/carousels/Carousels.js
+++ b/src/views/base/carousels/Carousels.js
@@ -30,7 +30,7 @@ const Carousels = () => {
             <strong>Carousel</strong> <small>Slide only</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">Here’s a carousel with slides</p>
+            <p className="text-body-secondary small">Here’s a carousel with slides</p>
             <DocsExample href="components/carousel">
               <CCarousel>
                 <CCarouselItem>
@@ -53,7 +53,7 @@ const Carousels = () => {
             <strong>Carousel</strong> <small>With controls</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Adding in the previous and next controls by <code>controls</code> property.
             </p>
             <DocsExample href="components/carousel/#with-controls">
@@ -78,7 +78,7 @@ const Carousels = () => {
             <strong>Carousel</strong> <small>With indicators</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               You can attach the indicators to the carousel, lengthwise the controls, too.
             </p>
             <DocsExample href="components/carousel/#with-indicators">
@@ -103,7 +103,7 @@ const Carousels = () => {
             <strong>Carousel</strong> <small>With captions</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               You can add captions to slides with the <code>&lt;CCarouselCaption&gt;</code> element
               within any <code>&lt;CCarouselItem&gt;</code>. They can be immediately hidden on
               smaller viewports, as shown below, with optional{' '}
@@ -145,7 +145,7 @@ const Carousels = () => {
             <strong>Carousel</strong> <small>Crossfade</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Add <code>transition=&#34;crossfade&#34;</code> to your carousel to animate slides
               with a fade transition instead of a slide.
             </p>
@@ -171,7 +171,7 @@ const Carousels = () => {
             <strong>Carousel</strong> <small>Dark variant</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Add <code>dark</code> property to the <code>CCarousel</code> for darker controls,
               indicators, and captions. Controls have been inverted from their default white fill
               with the <code>filter</code> CSS property. Captions and controls have additional Sass
diff --git a/src/views/base/collapses/Collapses.js b/src/views/base/collapses/Collapses.js
index 37e608e08..6f98a69cd 100644
--- a/src/views/base/collapses/Collapses.js
+++ b/src/views/base/collapses/Collapses.js
@@ -16,7 +16,7 @@ const Collapses = () => {
             <strong>React Collapse</strong>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">You can use a link or a button component.</p>
+            <p className="text-body-secondary small">You can use a link or a button component.</p>
             <DocsExample href="components/collapse">
               <CButton
                 href="#"
@@ -47,7 +47,7 @@ const Collapses = () => {
             <strong>React Collapse</strong> <small> Horizontal</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">You can use a link or a button component.</p>
+            <p className="text-body-secondary small">You can use a link or a button component.</p>
             <DocsExample href="components/collapse#horizontal">
               <CButton
                 className="mb-3"
@@ -77,7 +77,7 @@ const Collapses = () => {
             <strong>React Collapse</strong> <small> multi target</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               A <code>&lt;CButton&gt;</code> can show and hide multiple elements.
             </p>
             <DocsExample href="components/collapse#multiple-targets">
diff --git a/src/views/base/list-groups/ListGroups.js b/src/views/base/list-groups/ListGroups.js
index 91cfbf1eb..bcadf474d 100644
--- a/src/views/base/list-groups/ListGroups.js
+++ b/src/views/base/list-groups/ListGroups.js
@@ -21,7 +21,7 @@ const ListGroups = () => {
             <strong>React List Group</strong> <small>Basic example</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               The default list group is an unordered list with items and the proper CSS classes.
               Build upon it with the options that follow, or with your CSS as required.
             </p>
@@ -43,7 +43,7 @@ const ListGroups = () => {
             <strong>React List Group</strong> <small>Active items</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Add <code>active</code> boolean property to a <code>&lt;CListGroupItem&gt;</code> to
               show the current active selection.
             </p>
@@ -65,7 +65,7 @@ const ListGroups = () => {
             <strong>React List Group</strong> <small>Disabled items</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Add <code>disabled</code> boolean property to a <code>&lt;CListGroupItem&gt;</code> to
               make it appear disabled.
             </p>
@@ -87,7 +87,7 @@ const ListGroups = () => {
             <strong>React List Group</strong> <small>Links and buttons</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Use <code>&lt;a&gt;</code>s or <code>&lt;button&gt;</code>s to create{' '}
               <em>actionable</em> list group items with hover, disabled, and active states by adding{' '}
               <code>component=&#34;a|button&#34;</code>. We separate these pseudo-classes to ensure
@@ -123,7 +123,7 @@ const ListGroups = () => {
             <strong>React List Group</strong> <small>Flush</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Add <code>flush</code> boolean property to remove some borders and rounded corners to
               render list group items edge-to-edge in a parent container (e.g., cards).
             </p>
@@ -145,7 +145,7 @@ const ListGroups = () => {
             <strong>React List Group</strong> <small>Horizontal</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Add <code>layout=&#34;horizontal&#34;</code> to change the layout of list group items
               from vertical to horizontal across all breakpoints. Alternatively, choose a responsive
               variant <code>.layout=&#34;horizontal-&#123;sm | md | lg | xl | xxl&#125;&#34;</code>{' '}
@@ -171,7 +171,7 @@ const ListGroups = () => {
             <strong>React List Group</strong> <small>Contextual classes</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Use contextual classes to style list items with a stateful background and color.
             </p>
             <DocsExample href="components/list-group/#contextual-classes">
@@ -193,7 +193,7 @@ const ListGroups = () => {
                 ))}
               </CListGroup>
             </DocsExample>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Contextual classes also work with <code>&lt;a&gt;</code>s or{' '}
               <code>&lt;button&gt;</code>s. Note the addition of the hover styles here not present
               in the previous example. Also supported is the <code>active</code> state; apply it to
@@ -229,7 +229,7 @@ const ListGroups = () => {
             <strong>React List Group</strong> <small>With badges</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Add badges to any list group item to show unread counts, activity, and more.
             </p>
             <DocsExample href="components/list-group/#with-badges">
@@ -263,7 +263,7 @@ const ListGroups = () => {
             <strong>React List Group</strong> <small>Custom content</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Add nearly any HTML within, even for linked list groups like the one below, with the
               help of <a href="https://coreui.io/docs/utilities/flex/">flexbox utilities</a>.
             </p>
@@ -283,24 +283,24 @@ const ListGroups = () => {
                 <CListGroupItem component="a" href="#">
                   <div className="d-flex w-100 justify-content-between">
                     <h5 className="mb-1">List group item heading</h5>
-                    <small className="text-medium-emphasis">3 days ago</small>
+                    <small className="text-body-secondary">3 days ago</small>
                   </div>
                   <p className="mb-1">
                     Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus
                     varius blandit.
                   </p>
-                  <small className="text-medium-emphasis">Donec id elit non mi porta.</small>
+                  <small className="text-body-secondary">Donec id elit non mi porta.</small>
                 </CListGroupItem>
                 <CListGroupItem component="a" href="#">
                   <div className="d-flex w-100 justify-content-between">
                     <h5 className="mb-1">List group item heading</h5>
-                    <small className="text-medium-emphasis">3 days ago</small>
+                    <small className="text-body-secondary">3 days ago</small>
                   </div>
                   <p className="mb-1">
                     Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus
                     varius blandit.
                   </p>
-                  <small className="text-medium-emphasis">Donec id elit non mi porta.</small>
+                  <small className="text-body-secondary">Donec id elit non mi porta.</small>
                 </CListGroupItem>
               </CListGroup>
             </DocsExample>
@@ -313,7 +313,7 @@ const ListGroups = () => {
             <strong>React List Group</strong> <small>Checkboxes and radios</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Place CoreUI&#39;s checkboxes and radios within list group items and customize as
               needed.
             </p>
diff --git a/src/views/base/navs/Navs.js b/src/views/base/navs/Navs.js
index 89310faf2..15319461b 100644
--- a/src/views/base/navs/Navs.js
+++ b/src/views/base/navs/Navs.js
@@ -24,7 +24,7 @@ const Navs = () => {
             <strong>React Navs</strong> <small>Base navs</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               The base <code>.nav</code> component is built with flexbox and provide a strong
               foundation for building all types of navigation components. It includes some style
               overrides (for working with lists), some link padding for larger hit areas, and basic
@@ -50,7 +50,7 @@ const Navs = () => {
                 </CNavItem>
               </CNav>
             </DocsExample>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Classes are used throughout, so your markup can be super flexible. Use{' '}
               <code>&lt;ul&gt;</code>s like above, <code>&lt;ol&gt;</code> if the order of your
               items is important, or roll your own with a <code>&lt;nav&gt;</code> element. Because
@@ -78,7 +78,7 @@ const Navs = () => {
             <strong>React Navs</strong> <small>Horizontal alignment</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Change the horizontal alignment of your nav with{' '}
               <a href="https://coreui.io/docs/layout/grid/#horizontal-alignment">
                 flexbox utilities
@@ -86,7 +86,7 @@ const Navs = () => {
               . By default, navs are left-aligned, but you can easily change them to center or right
               aligned.
             </p>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Centered with <code>.justify-content-center</code>:
             </p>
             <DocsExample href="components/nav#horizontal-alignment">
@@ -109,7 +109,7 @@ const Navs = () => {
                 </CNavItem>
               </CNav>
             </DocsExample>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Right-aligned with <code>.justify-content-end</code>:
             </p>
             <DocsExample href="components/nav#base-nav">
@@ -141,7 +141,7 @@ const Navs = () => {
             <strong>React Navs</strong> <small>Vertical</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Stack your navigation by changing the flex item direction with the{' '}
               <code>.flex-column</code> utility. Need to stack them on some viewports but not
               others? Use the responsive versions (e.g., <code>.flex-sm-column</code>).
@@ -175,7 +175,7 @@ const Navs = () => {
             <strong>React Navs</strong> <small>Tabs</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Takes the basic nav from above and adds the <code>variant=&#34;tabs&#34;</code> class
               to generate a tabbed interface
             </p>
@@ -208,7 +208,7 @@ const Navs = () => {
             <strong>React Navs</strong> <small>Pills</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Take that same HTML, but use <code>variant=&#34;pills&#34;</code> instead:
             </p>
             <DocsExample href="components/nav#pills">
@@ -240,7 +240,7 @@ const Navs = () => {
             <strong>React Navs</strong> <small>Fill and justify</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Force your <code>.nav</code>&#39;s contents to extend the full available width one of
               two modifier classes. To proportionately fill all available space with your{' '}
               <code>.nav-item</code>s, use <code>layout=&#34;fill&#34;</code>. Notice that all
@@ -266,7 +266,7 @@ const Navs = () => {
                 </CNavItem>
               </CNav>
             </DocsExample>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               For equal-width elements, use <code>layout=&#34;justified&#34;</code>. All horizontal
               space will be occupied by nav links, but unlike the .nav-fill above, every nav item
               will be the same width.
@@ -300,7 +300,7 @@ const Navs = () => {
             <strong>React Navs</strong> <small>Working with flex utilities</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               If you need responsive nav variations, consider using a series of{' '}
               <a href="https://coreui.io/docs/utilities/flex">flexbox utilities</a>. While more
               verbose, these utilities offer greater customization across responsive breakpoints. In
diff --git a/src/views/base/paginations/Paginations.js b/src/views/base/paginations/Paginations.js
index f85961504..ce8b9dba4 100644
--- a/src/views/base/paginations/Paginations.js
+++ b/src/views/base/paginations/Paginations.js
@@ -19,14 +19,14 @@ const Paginations = () => {
             <strong>React Pagination</strong>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               We use a large block of connected links for our pagination, making links hard to miss
               and easily scalable—all while providing large hit areas. Pagination is built with list
               HTML elements so screen readers can announce the number of available links. Use a
               wrapping <code>&lt;nav&gt;</code> element to identify it as a navigation section to
               screen readers and other assistive technologies.
             </p>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               In addition, as pages likely have more than one such navigation section, it&#39;s
               advisable to provide a descriptive <code>aria-label</code> for the{' '}
               <code>&lt;nav&gt;</code> to reflect its purpose. For example, if the pagination
@@ -51,7 +51,7 @@ const Paginations = () => {
             <strong>React Pagination</strong> <small>Working with icons</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Looking to use an icon or symbol in place of text for some pagination links? Be sure
               to provide proper screen reader support with <code>aria</code> attributes.
             </p>
@@ -77,12 +77,12 @@ const Paginations = () => {
             <strong>React Pagination</strong> <small>Disabled and active states</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Pagination links are customizable for different circumstances. Use{' '}
               <code>disabled</code> for links that appear un-clickable and <code>.active</code> to
               indicate the current page.
             </p>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               While the <code>disabled</code> prop uses <code>pointer-events: none</code> to{' '}
               <em>try</em> to disable the link functionality of <code>&lt;a&gt;</code>s, that CSS
               property is not yet standardized and doesn&#39;taccount for keyboard navigation. As
@@ -111,7 +111,7 @@ const Paginations = () => {
             <strong>React Pagination</strong> <small>Sizing</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Fancy larger or smaller pagination? Add <code>size=&#34;lg&#34;</code> or{' '}
               <code>size=&#34;sm&#34;</code> for additional sizes.
             </p>
@@ -142,7 +142,7 @@ const Paginations = () => {
             <strong>React Pagination</strong> <small>Alignment</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Change the alignment of pagination components with{' '}
               <a href="https://coreui.io/docs/utilities/flex/">flexbox utilities</a>.
             </p>
diff --git a/src/views/base/placeholders/Placeholders.js b/src/views/base/placeholders/Placeholders.js
index 5342f2214..9639b168b 100644
--- a/src/views/base/placeholders/Placeholders.js
+++ b/src/views/base/placeholders/Placeholders.js
@@ -24,7 +24,7 @@ const Placeholders = () => {
             <strong>React Placeholder</strong>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               In the example below, we take a typical card component and recreate it with
               placeholders applied to create a &#34;loading card&#34;. Size and proportions are the
               same between the two.
@@ -86,7 +86,7 @@ const Placeholders = () => {
             <strong>React Placeholder</strong>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Create placeholders with the <code>&lt;CPlaceholder&gt;</code> component and a grid
               column propx (e.g., <code>xs={6}</code>) to set the <code>width</code>. They can
               replace the text inside an element or be added as a modifier class to an existing
@@ -112,7 +112,7 @@ const Placeholders = () => {
             <strong>React Placeholder</strong> <small> Width</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               You can change the <code>width</code> through grid column classes, width utilities, or
               inline styles.
             </p>
@@ -128,7 +128,7 @@ const Placeholders = () => {
             <strong>React Placeholder</strong> <small> Color</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               By default, the <code>&lt;CPlaceholder&gt;</code> uses <code>currentColor</code>. This
               can be overridden with a custom color or utility class.
             </p>
@@ -151,7 +151,7 @@ const Placeholders = () => {
             <strong>React Placeholder</strong> <small> Sizing</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               The size of <code>&lt;CPlaceholder&gt;</code>s are based on the typographic style of
               the parent element. Customize them with <code>size</code> prop: <code>lg</code>,{' '}
               <code>sm</code>, or <code>xs</code>.
@@ -169,7 +169,7 @@ const Placeholders = () => {
             <strong>React Placeholder</strong> <small> Animation</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Animate placeholders with <code>animation=&#34;glow&#34;</code> or{' '}
               <code>animation=&#34;wave&#34;</code> to better convey the perception of something
               being <em>actively</em> loaded.
diff --git a/src/views/base/popovers/Popovers.js b/src/views/base/popovers/Popovers.js
index 8d98e0def..e633c97df 100644
--- a/src/views/base/popovers/Popovers.js
+++ b/src/views/base/popovers/Popovers.js
@@ -31,7 +31,7 @@ const Popovers = () => {
             <strong>React Popover</strong> <small>Four directions</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Four options are available: top, right, bottom, and left aligned. Directions are
               mirrored when using CoreUI for React in RTL.
             </p>
diff --git a/src/views/base/progress/Progress.js b/src/views/base/progress/Progress.js
index 42b9819f3..d4542200c 100644
--- a/src/views/base/progress/Progress.js
+++ b/src/views/base/progress/Progress.js
@@ -11,7 +11,7 @@ const Progress = () => {
             <strong>React Progress</strong> <small>Basic example</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Progress components are built with two HTML elements, some CSS to set the width, and a
               few attributes. We don&#39;tuse{' '}
               <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress">
@@ -45,7 +45,7 @@ const Progress = () => {
             <strong>React Progress</strong> <small>Labels</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Add labels to your progress bars by placing text within the{' '}
               <code>&lt;CProgressBar&gt;</code>.
             </p>
@@ -63,7 +63,7 @@ const Progress = () => {
             <strong>React Progress</strong> <small>Height</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               We only set a <code>height</code> value on the <code>&lt;CProgress&gt;</code>, so if
               you change that value the inner <code>&lt;CProgressBar&gt;</code> will automatically
               resize accordingly.
@@ -85,7 +85,7 @@ const Progress = () => {
             <strong>React Progress</strong> <small>Backgrounds</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Use <code>color</code> prop to change the appearance of individual progress bars.
             </p>
             <DocsExample href="components/progress#backgrounds">
@@ -111,7 +111,7 @@ const Progress = () => {
             <strong>React Progress</strong> <small>Multiple bars</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Include multiple progress bars in a progress component if you need.
             </p>
             <DocsExample href="components/progress#multiple-bars">
@@ -130,7 +130,7 @@ const Progress = () => {
             <strong>React Progress</strong> <small>Striped</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Add <code>variant=&#34;striped&#34;</code> to any <code>&lt;CProgressBar&gt;</code> to
               apply a stripe via CSS gradient over the progress bar&#39;s background color.
             </p>
@@ -157,7 +157,7 @@ const Progress = () => {
             <strong>React Progress</strong> <small>Animated stripes</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               The striped gradient can also be animated. Add <code>animated</code> property to{' '}
               <code>&lt;CProgressBar&gt;</code> to animate the stripes right to left via CSS3
               animations.
diff --git a/src/views/base/spinners/Spinners.js b/src/views/base/spinners/Spinners.js
index 918c2713a..7347cf0c1 100644
--- a/src/views/base/spinners/Spinners.js
+++ b/src/views/base/spinners/Spinners.js
@@ -11,13 +11,13 @@ const Accordion = () => {
             <strong>React Spinner</strong> <small>Border</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Use the border spinners for a lightweight loading indicator.
             </p>
             <DocsExample href="components/spinner">
               <CSpinner />
             </DocsExample>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               The border spinner uses <code>currentColor</code> for its <code>border-color</code>.
               You can use any of our text color utilities on the standard spinner.
             </p>
@@ -40,14 +40,14 @@ const Accordion = () => {
             <strong>React Spinner</strong> <small>Growing</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               If you don&#39;tfancy a border spinner, switch to the grow spinner. While it
               doesn&#39;t technically spin, it does repeatedly grow!
             </p>
             <DocsExample href="components/spinner#growing-spinner">
               <CSpinner variant="grow" />
             </DocsExample>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Once again, this spinner is built with <code>currentColor</code>, so you can easily
               change its appearance. Here it is in blue, along with the supported variants.
             </p>
@@ -70,7 +70,7 @@ const Accordion = () => {
             <strong>React Spinner</strong> <small>Size</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Add <code>size=&#34;sm&#34;</code> property to make a smaller spinner that can quickly
               be used within other components.
             </p>
@@ -87,7 +87,7 @@ const Accordion = () => {
             <strong>React Spinner</strong> <small>Buttons</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Use spinners within buttons to indicate an action is currently processing or taking
               place. You may also swap the text out of the spinner element and utilize button text
               as needed.
diff --git a/src/views/base/tables/Tables.js b/src/views/base/tables/Tables.js
index f06843d0b..781af6eba 100644
--- a/src/views/base/tables/Tables.js
+++ b/src/views/base/tables/Tables.js
@@ -24,7 +24,7 @@ const Tables = () => {
             <strong>React Table</strong> <small>Basic example</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Using the most basic table CoreUI, here&#39;s how <code>&lt;CTable&gt;</code>-based
               tables look in CoreUI.
             </p>
@@ -68,7 +68,7 @@ const Tables = () => {
             <strong>React Table</strong> <small>Variants</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Use contextual classes to color tables, table rows or individual cells.
             </p>
             <DocsExample href="components/table#variants">
@@ -138,7 +138,7 @@ const Tables = () => {
             <strong>React Table</strong> <small>Striped rows</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Use <code>striped</code> property to add zebra-striping to any table row within the{' '}
               <code>&lt;CTableBody&gt;</code>.
             </p>
@@ -173,7 +173,7 @@ const Tables = () => {
                 </CTableBody>
               </CTable>
             </DocsExample>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               These classes can also be added to table variants:
             </p>
             <DocsExample href="components/table#striped-rows">
@@ -247,7 +247,7 @@ const Tables = () => {
             <strong>React Table</strong> <small>Hoverable rows</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Use <code>hover</code> property to enable a hover state on table rows within a{' '}
               <code>&lt;CTableBody&gt;</code>.
             </p>
@@ -428,7 +428,7 @@ const Tables = () => {
             <strong>React Table</strong> <small>Bordered tables</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Add <code>bordered</code> property for borders on all sides of the table and cells.
             </p>
             <DocsExample href="components/table#bordered-tables">
@@ -462,7 +462,7 @@ const Tables = () => {
                 </CTableBody>
               </CTable>
             </DocsExample>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               <a href="https://coreui.io/docs/4.0/utilities/borders#border-color">
                 Border color utilities
               </a>{' '}
@@ -508,7 +508,7 @@ const Tables = () => {
             <strong>React Table</strong> <small>Tables without borders</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Add <code>borderless</code> property for a table without borders.
             </p>
             <DocsExample href="components/table#tables-without-borders">
@@ -582,7 +582,7 @@ const Tables = () => {
             <strong>React Table</strong> <small>Small tables</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Add <code>small</code> property to make any <code>&lt;CTable&gt;</code> more compact
               by cutting all cell <code>padding</code> in half.
             </p>
@@ -626,7 +626,7 @@ const Tables = () => {
             <strong>React Table</strong> <small>Vertical alignment</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Table cells of <code>&lt;CTableHead&gt;</code> are always vertical aligned to the
               bottom. Table cells in <code>&lt;CTableBody&gt;</code> inherit their alignment from{' '}
               <code>&lt;CTable&gt;</code> and are aligned to the the top by default. Use the align
@@ -709,7 +709,7 @@ const Tables = () => {
             <strong>React Table</strong> <small>Nesting</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Border styles, active styles, and table variants are not inherited by nested tables.
             </p>
             <DocsExample href="components/table#nesting">
@@ -776,7 +776,7 @@ const Tables = () => {
             <strong>React Table</strong> <small>Table head</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Similar to tables and dark tables, use the modifier prop{' '}
               <code>color=&#34;light&#34;</code> or <code>color=&#34;dark&#34;</code> to make{' '}
               <code>&lt;CTableHead&gt;</code>s appear light or dark gray.
@@ -901,7 +901,7 @@ const Tables = () => {
             <strong>React Table</strong> <small>Captions</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               A <code>&lt;CTableCaption&gt;</code> functions like a heading for a table. It helps
               users with screen readers to find a table and understand what it&#39;s about and
               decide if they want to read it.
@@ -939,7 +939,7 @@ const Tables = () => {
                 </CTableBody>
               </CTable>
             </DocsExample>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               You can also put the <code>&lt;CTableCaption&gt;</code> on the top of the table with{' '}
               <code>caption=&#34;top&#34;</code>.
             </p>
diff --git a/src/views/base/tooltips/Tooltips.js b/src/views/base/tooltips/Tooltips.js
index bdb4d9aac..4ee81cbc2 100644
--- a/src/views/base/tooltips/Tooltips.js
+++ b/src/views/base/tooltips/Tooltips.js
@@ -11,11 +11,9 @@ const Tooltips = () => {
             <strong>React Tooltip</strong> <small>Basic example</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
-              Hover over the links below to see tooltips:
-            </p>
+            <p className="text-body-secondary small">Hover over the links below to see tooltips:</p>
             <DocsExample href="components/tooltip">
-              <p className="text-medium-emphasis">
+              <p className="text-body-secondary">
                 Tight pants next level keffiyeh
                 <CTooltip content="Tooltip text">
                   <CLink> you probably </CLink>
@@ -39,7 +37,7 @@ const Tooltips = () => {
                 freegan cred raw denim single-origin coffee viral.
               </p>
             </DocsExample>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Hover over the buttons below to see the four tooltips directions: top, right, bottom,
               and left. Directions are mirrored when using CoreUI in RTL.
             </p>
diff --git a/src/views/buttons/button-groups/ButtonGroups.js b/src/views/buttons/button-groups/ButtonGroups.js
index d48eb0071..1b8d49c5a 100644
--- a/src/views/buttons/button-groups/ButtonGroups.js
+++ b/src/views/buttons/button-groups/ButtonGroups.js
@@ -307,7 +307,7 @@ const ButtonGroups = () => {
             <strong>React Button Group</strong> <span>Nesting</span>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Put a <code>&lt;CButtonGroup&gt;</code> inside another{' '}
               <code>&lt;CButtonGroup&gt;</code> when you need dropdown menus combined with a series
               of buttons.
@@ -337,7 +337,7 @@ const ButtonGroups = () => {
             <strong>React Button Group</strong> <span>Vertical variation</span>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Create a set of buttons that appear vertically stacked rather than horizontally.{' '}
               <strong>Split button dropdowns are not supported here.</strong>
             </p>
diff --git a/src/views/buttons/buttons/Buttons.js b/src/views/buttons/buttons/Buttons.js
index 48f6fcf75..8f593a3b7 100644
--- a/src/views/buttons/buttons/Buttons.js
+++ b/src/views/buttons/buttons/Buttons.js
@@ -13,7 +13,7 @@ const Buttons = () => {
             <strong>React Button</strong>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               CoreUI includes a bunch of predefined buttons components, each serving its own
               semantic purpose. Buttons show what action will happen when the user clicks or touches
               it. CoreUI buttons are used to initialize operations, both in the background or
@@ -59,7 +59,7 @@ const Buttons = () => {
             <strong>React Button</strong> <small>with icons</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               You can combine button with our <a href="https://icons.coreui.io/">CoreUI Icons</a>.
             </p>
             <DocsExample href="components/buttons">
@@ -106,12 +106,12 @@ const Buttons = () => {
             <strong>React Button</strong> <small>Button components</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               The <code>&lt;CButton&gt;</code> component are designed for{' '}
               <code>&lt;button&gt;</code> , <code>&lt;a&gt;</code> or <code>&lt;input&gt;</code>{' '}
               elements (though some browsers may apply a slightly different rendering).
             </p>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               If you&#39;re using <code>&lt;CButton&gt;</code> component as <code>&lt;a&gt;</code>{' '}
               elements that are used to trigger functionality ex. collapsing content, these links
               should be given a <code>role=&#34;button&#34;</code> to adequately communicate their
@@ -137,7 +137,7 @@ const Buttons = () => {
             <strong>React Button</strong> <small>outline</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               If you need a button, but without the strong background colors. Set{' '}
               <code>variant=&#34;outline&#34;</code> prop to remove all background colors.
             </p>
@@ -181,7 +181,7 @@ const Buttons = () => {
             <strong>React Button</strong> <small>ghost</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               If you need a ghost variant of button, set <code>variant=&#34;ghost&#34;</code> prop
               to remove all background colors.
             </p>
@@ -225,7 +225,7 @@ const Buttons = () => {
             <strong>React Button</strong> <small>Sizes</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Larger or smaller buttons? Add <code>size=&#34;lg&#34;</code> or{' '}
               <code>size=&#34;sm&#34;</code> for additional sizes.
             </p>
@@ -304,7 +304,7 @@ const Buttons = () => {
             <strong>React Button</strong> <small>Disabled state</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Add the <code>disabled</code> boolean prop to any <code>&lt;CButton&gt;</code>{' '}
               component to make buttons look inactive. Disabled button has{' '}
               <code>pointer-events: none</code> applied to, disabling hover and active states from
@@ -318,10 +318,10 @@ const Buttons = () => {
                 Button
               </CButton>
             </DocsExample>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Disabled buttons using the <code>&lt;a&gt;</code> component act a little different:
             </p>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               <code>&lt;a&gt;</code>s don&#39;tsupport the <code>disabled</code> attribute, so
               CoreUI has to add <code>.disabled</code> className to make buttons look inactive.
               CoreUI also has to add to the disabled button component{' '}
@@ -345,7 +345,7 @@ const Buttons = () => {
             <strong>React Button</strong> <small>Block buttons</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Create buttons that span the full width of a parent—by using utilities.
             </p>
             <DocsExample href="components/buttons#block-buttons">
@@ -354,7 +354,7 @@ const Buttons = () => {
                 <CButton color="primary">Button</CButton>
               </div>
             </DocsExample>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Here we create a responsive variation, starting with vertically stacked buttons until
               the <code>md</code> breakpoint, where <code>.d-md-block</code> replaces the{' '}
               <code>.d-grid</code> class, thus nullifying the <code>gap-2</code> utility. Resize
@@ -366,7 +366,7 @@ const Buttons = () => {
                 <CButton color="primary">Button</CButton>
               </div>
             </DocsExample>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               You can adjust the width of your block buttons with grid column width classes. For
               example, for a half-width &#34;block button&#34;, use <code>.col-6</code>. Center it
               horizontally with <code>.mx-auto</code>, too.
@@ -377,7 +377,7 @@ const Buttons = () => {
                 <CButton color="primary">Button</CButton>
               </div>
             </DocsExample>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Additional utilities can be used to adjust the alignment of buttons when horizontal.
               Here we&#39;ve taken our previous responsive example and added some flex utilities and
               a margin utility on the button to right align the buttons when they&#39;re no longer
diff --git a/src/views/buttons/dropdowns/Dropdowns.js b/src/views/buttons/dropdowns/Dropdowns.js
index 414f651fc..506f76ab2 100644
--- a/src/views/buttons/dropdowns/Dropdowns.js
+++ b/src/views/buttons/dropdowns/Dropdowns.js
@@ -24,7 +24,7 @@ const Dropdowns = () => {
             <strong>React Dropdown</strong> <small>Single button</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Here&#39;s how you can put them to work with either <code>&lt;button&gt;</code>{' '}
               elements:
             </p>
@@ -38,7 +38,7 @@ const Dropdowns = () => {
                 </CDropdownMenu>
               </CDropdown>
             </DocsExample>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               The best part is you can do this with any button variant, too:
             </p>
             <DocsExample href="components/dropdown#single-button">
@@ -68,12 +68,12 @@ const Dropdowns = () => {
             <strong>React Dropdown</strong> <small>Split button</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Similarly, create split button dropdowns with virtually the same markup as single
               button dropdowns, but with the addition of boolean prop <code>split</code> for proper
               spacing around the dropdown caret.
             </p>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               We use this extra class to reduce the horizontal <code>padding</code> on either side
               of the caret by 25% and remove the <code>margin-left</code> that&#39;s attached for
               normal button dropdowns. Those additional changes hold the caret centered in the split
@@ -107,7 +107,7 @@ const Dropdowns = () => {
             <strong>React Dropdown</strong> <small>Sizing</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Button dropdowns work with buttons of all sizes, including default and split dropdown
               buttons.
             </p>
@@ -174,7 +174,7 @@ const Dropdowns = () => {
             <strong>React Dropdown</strong> <small>Single button</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Opt into darker dropdowns to match a dark navbar or custom style by set{' '}
               <code>dark</code> property. No changes are required to the dropdown items.
             </p>
@@ -190,7 +190,7 @@ const Dropdowns = () => {
                 </CDropdownMenu>
               </CDropdown>
             </DocsExample>
-            <p className="text-medium-emphasis small">And putting it to use in a navbar:</p>
+            <p className="text-body-secondary small">And putting it to use in a navbar:</p>
             <DocsExample href="components/dropdown#dark-dropdowns">
               <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
                 <div className="container-fluid">
@@ -234,7 +234,7 @@ const Dropdowns = () => {
             <strong>React Dropdown</strong> <small>Dropup</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Trigger dropdown menus above elements by adding{' '}
               <code>direction=&#34;dropup&#34;</code> to the <code>&lt;CDropdown&gt;</code>{' '}
               component.
@@ -271,7 +271,7 @@ const Dropdowns = () => {
             <strong>React Dropdown</strong> <small>Dropright</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Trigger dropdown menus at the right of the elements by adding{' '}
               <code>direction=&#34;dropend&#34;</code> to the <code>&lt;CDropdown&gt;</code>{' '}
               component.
@@ -308,7 +308,7 @@ const Dropdowns = () => {
             <strong>React Dropdown</strong> <small>Dropleft</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Trigger dropdown menus at the left of the elements by adding{' '}
               <code>direction=&#34;dropstart&#34;</code> to the <code>&lt;CDropdown&gt;</code>{' '}
               component.
diff --git a/src/views/dashboard/Dashboard.js b/src/views/dashboard/Dashboard.js
index c03b691c1..da59f7818 100644
--- a/src/views/dashboard/Dashboard.js
+++ b/src/views/dashboard/Dashboard.js
@@ -185,7 +185,7 @@ const Dashboard = () => {
               <h4 id="traffic" className="card-title mb-0">
                 Traffic
               </h4>
-              <div className="small text-medium-emphasis">January - July 2021</div>
+              <div className="small text-body-secondary">January - July 2021</div>
             </CCol>
             <CCol sm={7} className="d-none d-md-block">
               <CButton color="primary" className="float-end">
@@ -211,7 +211,7 @@ const Dashboard = () => {
           <CRow xs={{ cols: 1 }} md={{ cols: 5 }} className="text-center">
             {progressExample.map((item, index) => (
               <CCol className="mb-sm-2 mb-0" key={index}>
-                <div className="text-medium-emphasis">{item.title}</div>
+                <div className="text-body-secondary">{item.title}</div>
                 <strong>
                   {item.value} ({item.percent}%)
                 </strong>
@@ -234,13 +234,13 @@ const Dashboard = () => {
                   <CRow>
                     <CCol sm={6}>
                       <div className="border-start border-start-4 border-start-info py-1 px-3">
-                        <div className="text-medium-emphasis small">New Clients</div>
+                        <div className="text-body-secondary small">New Clients</div>
                         <div className="fs-5 fw-semibold">9,123</div>
                       </div>
                     </CCol>
                     <CCol sm={6}>
                       <div className="border-start border-start-4 border-start-danger py-1 px-3 mb-3">
-                        <div className="text-medium-emphasis small">Recurring Clients</div>
+                        <div className="text-body-secondary small">Recurring Clients</div>
                         <div className="fs-5 fw-semibold">22,643</div>
                       </div>
                     </CCol>
@@ -250,7 +250,7 @@ const Dashboard = () => {
                   {progressGroupExample1.map((item, index) => (
                     <div className="progress-group mb-4" key={index}>
                       <div className="progress-group-prepend">
-                        <span className="text-medium-emphasis small">{item.title}</span>
+                        <span className="text-body-secondary small">{item.title}</span>
                       </div>
                       <div className="progress-group-bars">
                         <CProgress thin color="info" value={item.value1} />
@@ -264,13 +264,13 @@ const Dashboard = () => {
                   <CRow>
                     <CCol sm={6}>
                       <div className="border-start border-start-4 border-start-warning py-1 px-3 mb-3">
-                        <div className="text-medium-emphasis small">Pageviews</div>
+                        <div className="text-body-secondary small">Pageviews</div>
                         <div className="fs-5 fw-semibold">78,623</div>
                       </div>
                     </CCol>
                     <CCol sm={6}>
                       <div className="border-start border-start-4 border-start-success py-1 px-3 mb-3">
-                        <div className="text-medium-emphasis small">Organic</div>
+                        <div className="text-body-secondary small">Organic</div>
                         <div className="fs-5 fw-semibold">49,123</div>
                       </div>
                     </CCol>
@@ -300,7 +300,7 @@ const Dashboard = () => {
                         <span>{item.title}</span>
                         <span className="ms-auto fw-semibold">
                           {item.value}{' '}
-                          <span className="text-medium-emphasis small">({item.percent}%)</span>
+                          <span className="text-body-secondary small">({item.percent}%)</span>
                         </span>
                       </div>
                       <div className="progress-group-bars">
@@ -338,7 +338,7 @@ const Dashboard = () => {
                       </CTableDataCell>
                       <CTableDataCell>
                         <div>{item.user.name}</div>
-                        <div className="small text-medium-emphasis text-nowrap">
+                        <div className="small text-body-secondary text-nowrap">
                           <span>{item.user.new ? 'New' : 'Recurring'}</span> | Registered:{' '}
                           {item.user.registered}
                         </div>
@@ -350,7 +350,7 @@ const Dashboard = () => {
                         <div className="d-flex justify-content-between text-nowrap">
                           <div className="fw-semibold">{item.usage.value}%</div>
                           <div className="ms-3">
-                            <small className="text-medium-emphasis">{item.usage.period}</small>
+                            <small className="text-body-secondary">{item.usage.period}</small>
                           </div>
                         </div>
                         <CProgress thin color={item.usage.color} value={item.usage.value} />
@@ -359,7 +359,7 @@ const Dashboard = () => {
                         <CIcon size="xl" icon={item.payment.icon} />
                       </CTableDataCell>
                       <CTableDataCell>
-                        <div className="small text-medium-emphasis text-nowrap">Last login</div>
+                        <div className="small text-body-secondary text-nowrap">Last login</div>
                         <div className="fw-semibold text-nowrap">{item.activity}</div>
                       </CTableDataCell>
                     </CTableRow>
diff --git a/src/views/forms/checks-radios/ChecksRadios.js b/src/views/forms/checks-radios/ChecksRadios.js
index f35862ec1..ace4aafbd 100644
--- a/src/views/forms/checks-radios/ChecksRadios.js
+++ b/src/views/forms/checks-radios/ChecksRadios.js
@@ -24,7 +24,7 @@ const ChecksRadios = () => {
             <strong>React Checkbox</strong> <small>Disabled</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Add the <code>disabled</code> attribute and the associated <code>&lt;label&gt;</code>s
               are automatically styled to match with a lighter color to help indicate the
               input&#39;s state.
@@ -42,7 +42,7 @@ const ChecksRadios = () => {
             <strong>React Radio</strong>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Add the <code>disabled</code> attribute and the associated <code>&lt;label&gt;</code>s
               are automatically styled to match with a lighter color to help indicate the
               input&#39;s state.
@@ -97,7 +97,7 @@ const ChecksRadios = () => {
             <strong>React Switches</strong>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               A switch has the markup of a custom checkbox but uses the <code>switch</code> boolean
               properly to render a toggle switch. Switches also support the <code>disabled</code>{' '}
               attribute.
@@ -152,7 +152,7 @@ const ChecksRadios = () => {
             <strong>React Checks and Radios</strong> <small>Default layout (stacked)</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               By default, any number of checkboxes and radios that are immediate sibling will be
               vertically stacked and appropriately spaced.
             </p>
@@ -194,7 +194,7 @@ const ChecksRadios = () => {
             <strong>React Checks and Radios</strong> <small>Inline</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Group checkboxes or radios on the same horizontal row by adding <code>inline</code>{' '}
               boolean property to any <code>&lt;CFormCheck&gt;</code>.
             </p>
@@ -245,7 +245,7 @@ const ChecksRadios = () => {
             <strong>React Checks and Radios</strong> <small>Without labels</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Remember to still provide some form of accessible name for assistive technologies (for
               instance, using <code>aria-label</code>).
             </p>
@@ -272,7 +272,7 @@ const ChecksRadios = () => {
             <strong>Toggle buttons</strong>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Create button-like checkboxes and radio buttons by using <code>button</code> boolean
               property on the <code>&lt;CFormCheck&gt;</code> component. These toggle buttons can
               further be grouped in a button group if needed.
@@ -341,7 +341,7 @@ const ChecksRadios = () => {
               />
             </DocsExample>
             <h3>Outlined styles</h3>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Different variants of button, such at the various outlined styles, are supported.
             </p>
             <DocsExample href="forms/checks-radios#toggle-buttons">
diff --git a/src/views/forms/floating-labels/FloatingLabels.js b/src/views/forms/floating-labels/FloatingLabels.js
index d40f5b35c..a84e685a7 100644
--- a/src/views/forms/floating-labels/FloatingLabels.js
+++ b/src/views/forms/floating-labels/FloatingLabels.js
@@ -22,7 +22,7 @@ const FloatingLabels = () => {
             <strong>React Floating labels</strong>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Wrap a pair of <code>&lt;CFormInput&gt;</code> and <code>&lt;CFormLabel&gt;</code>{' '}
               elements in <code>CFormFloating</code> to enable floating labels with textual form
               fields. A <code>placeholder</code> is required on each <code>&lt;CFormInput&gt;</code>{' '}
@@ -40,7 +40,7 @@ const FloatingLabels = () => {
                 <CFormLabel htmlFor="floatingPassword">Password</CFormLabel>
               </CFormFloating>
             </DocsExample>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               When there&#39;s a <code>value</code> already defined, <code>&lt;CFormLabel&gt;</code>
               s will automatically adjust to their floated position.
             </p>
@@ -64,7 +64,7 @@ const FloatingLabels = () => {
             <strong>React Floating labels</strong> <small>Textareas</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               By default, <code>&lt;CFormTextarea&gt;</code>s will be the same height as{' '}
               <code>&lt;CFormInput&gt;</code>s.
             </p>
@@ -77,7 +77,7 @@ const FloatingLabels = () => {
                 <CFormLabel htmlFor="floatingTextarea">Comments</CFormLabel>
               </CFormFloating>
             </DocsExample>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               To set a custom height on your <code>&lt;CFormTextarea;&gt;</code>, do not use the{' '}
               <code>rows</code> attribute. Instead, set an explicit <code>height</code> (either
               inline or via custom CSS).
@@ -101,7 +101,7 @@ const FloatingLabels = () => {
             <strong>React Floating labels</strong> <small>Selects</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Other than <code>&lt;CFormInput&gt;</code>, floating labels are only available on{' '}
               <code>&lt;CFormSelect&gt;</code>s. They work in the same way, but unlike{' '}
               <code>&lt;CFormInput&gt;</code>s, they&#39;ll always show the{' '}
@@ -130,7 +130,7 @@ const FloatingLabels = () => {
             <strong>React Floating labels</strong> <small>Layout</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               When working with the CoreUI for Bootstrap grid system, be sure to place form elements
               within column classes.
             </p>
diff --git a/src/views/forms/form-control/FormControl.js b/src/views/forms/form-control/FormControl.js
index 9bdb1076a..5949a79ce 100644
--- a/src/views/forms/form-control/FormControl.js
+++ b/src/views/forms/form-control/FormControl.js
@@ -47,7 +47,7 @@ const FormControl = () => {
             <strong>React Form Control</strong> <small>Sizing</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Set heights using <code>size</code> property like <code>size=&#34;lg&#34;</code> and{' '}
               <code>size=&#34;sm&#34;</code>.
             </p>
@@ -81,7 +81,7 @@ const FormControl = () => {
             <strong>React Form Control</strong> <small>Disabled</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Add the <code>disabled</code> boolean attribute on an input to give it a grayed out
               appearance and remove pointer events.
             </p>
@@ -111,7 +111,7 @@ const FormControl = () => {
             <strong>React Form Control</strong> <small>Readonly</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Add the <code>readOnly</code> boolean attribute on an input to prevent modification of
               the input&#39;s value. Read-only inputs appear lighter (just like disabled inputs),
               but retain the standard cursor.
@@ -133,7 +133,7 @@ const FormControl = () => {
             <strong>React Form Control</strong> <small>Readonly plain text</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               If you want to have <code>&lt;input readonly&gt;</code> elements in your form styled
               as plain text, use the <code>plainText</code> boolean property to remove the default
               form field styling and preserve the correct margin and padding.
diff --git a/src/views/forms/input-group/InputGroup.js b/src/views/forms/input-group/InputGroup.js
index 4b9da78db..3bc7237e1 100644
--- a/src/views/forms/input-group/InputGroup.js
+++ b/src/views/forms/input-group/InputGroup.js
@@ -30,7 +30,7 @@ const Select = () => {
             <strong>React Input group</strong> <small>Basic example</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Place one add-on or button on either side of an input. You may also place one on both
               sides of an input. Remember to place <code>&lt;CFormLabel&gt;</code>s outside the
               input group.
@@ -81,7 +81,7 @@ const Select = () => {
             <strong>React Input group</strong> <small>Wrapping</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Input groups wrap by default via <code>flex-wrap: wrap</code> in order to accommodate
               custom form field validation within an input group. You may disable this with{' '}
               <code>.flex-nowrap</code>.
@@ -105,12 +105,12 @@ const Select = () => {
             <strong>React Input group</strong> <small>Sizing</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Add the relative form sizing classes to the <code>&lt;CInputGroup&gt;</code> itself
               and contents within will automatically resize—no need for repeating the form control
               size classes on each element.
             </p>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               <strong>Sizing on the individual input group elements isn&#39;tsupported.</strong>
             </p>
             <DocsExample href="forms/input-group#sizing">
@@ -145,7 +145,7 @@ const Select = () => {
             <strong>React Input group</strong> <small>Checkboxes and radios</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Place any checkbox or radio option within an input group&#39;s addon instead of text.
             </p>
             <DocsExample href="forms/input-group#checkboxes-and-radios">
@@ -179,7 +179,7 @@ const Select = () => {
             <strong>React Input group</strong> <small>Multiple inputs</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               While multiple <code>&lt;CFormInput&gt;</code>s are supported visually, validation
               styles are only available for input groups with a single{' '}
               <code>&lt;CFormInput&gt;</code>.
@@ -200,7 +200,7 @@ const Select = () => {
             <strong>React Input group</strong> <small>Multiple addons</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Multiple add-ons are supported and can be mixed with checkbox and radio input
               versions..
             </p>
@@ -225,7 +225,7 @@ const Select = () => {
             <strong>React Input group</strong> <small>Button addons</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Multiple add-ons are supported and can be mixed with checkbox and radio input
               versions..
             </p>
diff --git a/src/views/forms/layout/Layout.js b/src/views/forms/layout/Layout.js
index 27bae1961..9d2b21fd2 100644
--- a/src/views/forms/layout/Layout.js
+++ b/src/views/forms/layout/Layout.js
@@ -25,7 +25,7 @@ const Layout = () => {
             <strong>Layout</strong> <small>Form grid</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               More complex forms can be built using our grid classes. Use these for form layouts
               that require multiple columns, varied widths, and additional alignment options.
             </p>
@@ -48,7 +48,7 @@ const Layout = () => {
             <strong>Layout</strong> <small>Gutters</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               By adding <a href="https://coreui.io/docs/layout/gutters/">gutter modifier classes</a>
               , you can have control over the gutter width in as well the inline as block direction.
             </p>
@@ -62,7 +62,7 @@ const Layout = () => {
                 </CCol>
               </CRow>
             </DocsExample>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               More complex layouts can also be created with the grid system.
             </p>
             <DocsExample href="forms/layout#gutters">
@@ -115,14 +115,14 @@ const Layout = () => {
             <strong>Layout</strong> <small>Horizontal form</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Create horizontal forms with the grid by adding the <code>.row</code> class to form
               groups and using the <code>.col-*-*</code> classes to specify the width of your labels
               and controls. Be sure to add <code>.col-form-label</code> to your{' '}
               <code>&lt;CFormLabel&gt;</code>s as well so they&#39;re vertically centered with their
               associated form controls.
             </p>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               At times, you maybe need to use margin or padding utilities to create that perfect
               alignment you need. For example, we&#39;ve removed the <code>padding-top</code> on our
               stacked radio inputs label to better align the text baseline.
@@ -190,7 +190,7 @@ const Layout = () => {
             <strong>Layout</strong> <small>Horizontal form label sizing</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Be sure to use <code>.col-form-label-sm</code> or <code>.col-form-label-lg</code> to
               your <code>&lt;CFormLabel&gt;</code>s or <code>&lt;legend&gt;</code>s to correctly
               follow the size of <code>.form-control-lg</code> and <code>.form-control-sm</code>.
@@ -246,7 +246,7 @@ const Layout = () => {
             <strong>Layout</strong> <small>Column sizing</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               As shown in the previous examples, our grid system allows you to place any number of{' '}
               <code>&lt;CCol&gt;</code>s within a <code>&lt;CRow&gt;</code>. They&#39;ll split the
               available width equally between them. You may also pick a subset of your columns to
@@ -276,7 +276,7 @@ const Layout = () => {
             <strong>Layout</strong> <small>Auto-sizing</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               The example below uses a flexbox utility to vertically center the contents and changes{' '}
               <code>&lt;CCol&gt;</code> to <code>&lt;CCol xs=&#34;auto&#34;&gt;</code> so that your
               columns only take up as much space as needed. Put another way, the column sizes itself
@@ -318,7 +318,7 @@ const Layout = () => {
                 </CCol>
               </CForm>
             </DocsExample>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               You can then remix that once again with size-specific column classes.
             </p>
             <DocsExample href="forms/layout#auto-sizing">
@@ -366,7 +366,7 @@ const Layout = () => {
             <strong>Layout</strong> <small>Inline forms</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Use the <code>&lt;CCol xs=&#34;auto&#34;&gt;</code> class to create horizontal
               layouts. By adding{' '}
               <a href="https://coreui.io/docs/layout/gutters/">gutter modifier classes</a>, we will
diff --git a/src/views/forms/range/Range.js b/src/views/forms/range/Range.js
index 1423f7b73..727ce75e5 100644
--- a/src/views/forms/range/Range.js
+++ b/src/views/forms/range/Range.js
@@ -11,7 +11,7 @@ const Range = () => {
             <strong>React Range</strong> <small></small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Create custom <code>&lt;input type=&#34;range&#34;&gt;</code> controls with{' '}
               <code>&lt;CFormRange&gt;</code>.
             </p>
@@ -28,7 +28,7 @@ const Range = () => {
             <strong>React Range</strong> <small>Disabled</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Add the <code>disabled</code> boolean attribute on an input to give it a grayed out
               appearance and remove pointer events.
             </p>
@@ -45,7 +45,7 @@ const Range = () => {
             <strong>React Range</strong> <small>Min and max</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Range inputs have implicit values for <code>min</code> and <code>max</code>—
               <code>0</code> and <code>100</code>, respectively. You may specify new values for
               those using the <code>min</code> and <code>max</code> attributes.
@@ -63,7 +63,7 @@ const Range = () => {
             <strong>React Range</strong> <small>Steps</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               By default, range inputs &#34;snap&#34; to integer values. To change this, you can
               specify a <code>step</code> value. In the example below, we double the number of steps
               by using <code>step=&#34;0.5&#34;</code>.
diff --git a/src/views/forms/select/Select.js b/src/views/forms/select/Select.js
index e81f6a568..dd0651e79 100644
--- a/src/views/forms/select/Select.js
+++ b/src/views/forms/select/Select.js
@@ -28,7 +28,7 @@ const Select = () => {
             <strong>React Select</strong> <small>Sizing</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               You may also choose from small and large custom selects to match our similarly sized
               text inputs.
             </p>
@@ -46,7 +46,7 @@ const Select = () => {
                 <option value="3">Three</option>
               </CFormSelect>
             </DocsExample>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               The <code>multiple</code> attribute is also supported:
             </p>
             <DocsExample href="forms/select#sizing">
@@ -57,7 +57,7 @@ const Select = () => {
                 <option value="3">Three</option>
               </CFormSelect>
             </DocsExample>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               As is the <code>htmlSize</code> property:
             </p>
             <DocsExample href="forms/select#sizing">
@@ -77,7 +77,7 @@ const Select = () => {
             <strong>React Select</strong> <small>Disabled</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Add the <code>disabled</code> boolean attribute on a select to give it a grayed out
               appearance and remove pointer events.
             </p>
diff --git a/src/views/forms/validation/Validation.js b/src/views/forms/validation/Validation.js
index 7053aa3b3..49bdf55ad 100644
--- a/src/views/forms/validation/Validation.js
+++ b/src/views/forms/validation/Validation.js
@@ -258,7 +258,7 @@ const Validation = () => {
             <strong>Validation</strong> <small>Custom styles</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               For custom CoreUI form validation messages, you&#39;ll need to add the{' '}
               <code>noValidate</code> boolean property to your <code>&lt;CForm&gt;</code>. This
               disables the browser default feedback tooltips, but still provides access to the form
@@ -267,7 +267,7 @@ const Validation = () => {
               you&#39;ll see the <code>:invalid</code> and <code>:valid</code> styles applied to
               your form controls.
             </p>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Custom feedback styles apply custom colors, borders, focus styles, and background
               icons to better communicate feedback.{' '}
             </p>
@@ -281,13 +281,13 @@ const Validation = () => {
             <strong>Validation</strong> <small>Browser defaults</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Not interested in custom validation feedback messages or writing JavaScript to change
               form behaviors? All good, you can use the browser defaults. Try submitting the form
               below. Depending on your browser and OS, you&#39;ll see a slightly different style of
               feedback.
             </p>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               While these feedback styles cannot be styled with CSS, you can still customize the
               feedback text through JavaScript.
             </p>
@@ -301,12 +301,12 @@ const Validation = () => {
             <strong>Validation</strong> <small>Server side</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               We recommend using client-side validation, but in case you require server-side
               validation, you can indicate invalid and valid form fields with <code>invalid</code>{' '}
               and <code>valid</code> boolean properties.
             </p>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               For invalid fields, ensure that the invalid feedback/error message is associated with
               the relevant form field using <code>aria-describedby</code> (noting that this
               attribute allows more than one <code>id</code> to be referenced, in case the field
@@ -395,7 +395,7 @@ const Validation = () => {
             <strong>Validation</strong> <small>Supported elements</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Validation styles are available for the following form controls and components:
             </p>
             <ul>
@@ -485,7 +485,7 @@ const Validation = () => {
             <strong>Validation</strong> <small>Tooltips</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               If your form layout allows it, you can swap the text for the tooltip to display
               validation feedback in a styled tooltip. Be sure to have a parent with{' '}
               <code>position: relative</code> on it for tooltip positioning. In the example below,
diff --git a/src/views/notifications/alerts/Alerts.js b/src/views/notifications/alerts/Alerts.js
index 6d0200b74..c073fc76c 100644
--- a/src/views/notifications/alerts/Alerts.js
+++ b/src/views/notifications/alerts/Alerts.js
@@ -20,7 +20,7 @@ const Alerts = () => {
             <strong>React Alert</strong>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               React Alert is prepared for any length of text, as well as an optional close button.
               For a styling, use one of the <strong>required</strong> contextual <code>color</code>{' '}
               props (e.g., <code>primary</code>). For inline dismissal, use the{' '}
@@ -48,7 +48,7 @@ const Alerts = () => {
             <strong>React Alert</strong> <small>Link color</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Use the <code>&lt;CAlertLink&gt;</code> component to immediately give matching colored
               links inside any alert.
             </p>
@@ -95,7 +95,7 @@ const Alerts = () => {
             <strong>React Alert</strong> <small>Additional content</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Alert can also incorporate supplementary components &amp; elements like heading,
               paragraph, and divider.
             </p>
@@ -123,7 +123,7 @@ const Alerts = () => {
             <strong>React Alert</strong> <small>Dismissing</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Alerts can also be easily dismissed. Just add the <code>dismissible</code> prop.
             </p>
             <DocsExample href="components/alert#dismissing">
diff --git a/src/views/notifications/badges/Badges.js b/src/views/notifications/badges/Badges.js
index f2c63b58d..50f40ac18 100644
--- a/src/views/notifications/badges/Badges.js
+++ b/src/views/notifications/badges/Badges.js
@@ -11,7 +11,7 @@ const Badges = () => {
             <strong>React Badges</strong> <small>Dismissing</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Bootstrap badge scale to suit the size of the parent element by using relative font
               sizing and <code>em</code> units.
             </p>
@@ -35,7 +35,7 @@ const Badges = () => {
                 Example heading <CBadge color="secondary">New</CBadge>
               </h6>
             </DocsExample>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Badges can be used as part of links or buttons to provide a counter.
             </p>
             <DocsExample href="components/badge">
@@ -43,11 +43,11 @@ const Badges = () => {
                 Notifications <CBadge color="secondary">4</CBadge>
               </CButton>
             </DocsExample>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Remark that depending on how you use them, badges may be complicated for users of
               screen readers and related assistive technologies.
             </p>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Unless the context is clear, consider including additional context with a visually
               hidden piece of additional text.
             </p>
@@ -66,7 +66,7 @@ const Badges = () => {
             <strong>React Badges</strong> <small>Contextual variations</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Add any of the below-mentioned <code>color</code> props to modify the presentation of
               a badge.
             </p>
@@ -86,7 +86,7 @@ const Badges = () => {
             <strong>React Badges</strong> <small>Pill badges</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Apply the <code>shape=&#34;rounded-pill&#34;</code> prop to make badges rounded.
             </p>
             <DocsExample href="components/badge#pill-badges">
diff --git a/src/views/notifications/modals/Modals.js b/src/views/notifications/modals/Modals.js
index fcd31116b..d65dd44b2 100644
--- a/src/views/notifications/modals/Modals.js
+++ b/src/views/notifications/modals/Modals.js
@@ -466,7 +466,7 @@ const Modals = () => {
             <strong>React Modal</strong>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Below is a static modal example (meaning its <code>position</code> and{' '}
               <code>display</code> have been overridden). Included are the modal header, modal body
               (required for <code>padding</code>), and modal footer (optional). We ask that you
@@ -500,7 +500,7 @@ const Modals = () => {
             <strong>React Modal</strong> <small>Live demo</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Toggle a working modal demo by clicking the button below. It will slide down and fade
               in from the top of the page.
             </p>
@@ -514,7 +514,7 @@ const Modals = () => {
             <strong>React Modal</strong> <small>Static backdrop</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               If you don’t provide an <code>onDimsiss</code> handler to the Modal component, your
               modal will behave as though the backdrop is static, meaning it will not close when
               clicking outside it. Click the button below to try it.
@@ -529,7 +529,7 @@ const Modals = () => {
             <strong>React Modal</strong> <small>Scrolling long content</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               If you don’t provide an <code>onDimsiss</code> handler to the Modal component, your
               modal will behave as though the backdrop is static, meaning it will not close when
               clicking outside it. Click the button below to try it.
@@ -537,7 +537,7 @@ const Modals = () => {
             <DocsExample href="components/modal#scrolling-long-content">
               {ScrollingLongContent()}
             </DocsExample>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               You can also create a scrollable modal that allows scroll the modal body by adding{' '}
               <code>scrollable</code> prop.
             </p>
@@ -553,7 +553,7 @@ const Modals = () => {
             <strong>React Modal</strong> <small>Vertically centered</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Add <code>alignment=&#34;center&#34;</code> to <code>&lt;CModal&gt;</code> to
               vertically center the modal.
             </p>
@@ -572,7 +572,7 @@ const Modals = () => {
             <strong>React Modal</strong> <small>Tooltips and popovers</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               <code>&lt;CTooltips&gt;</code> and <code>&lt;CPopovers&gt;</code> can be placed within
               modals as needed. When modals are closed, any tooltips and popovers within are also
               automatically dismissed.
@@ -589,7 +589,7 @@ const Modals = () => {
             <strong>React Modal</strong> <small>Optional sizes</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Modals have three optional sizes, available via modifier classes to be placed on a{' '}
               <code>&lt;CModal&gt;</code>. These sizes kick in at certain breakpoints to avoid
               horizontal scrollbars on narrower viewports.
@@ -614,7 +614,7 @@ const Modals = () => {
                 </tr>
                 <tr>
                   <td>Default</td>
-                  <td className="text-medium-emphasis">None</td>
+                  <td className="text-body-secondary">None</td>
                   <td>
                     <code>500px</code>
                   </td>
@@ -649,7 +649,7 @@ const Modals = () => {
             <strong>React Modal</strong> <small>Fullscreen Modal</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Another override is the option to pop up a modal that covers the user viewport,
               available via property <code>fullscrean</code>.
             </p>
diff --git a/src/views/notifications/toasts/Toasts.js b/src/views/notifications/toasts/Toasts.js
index 09422abbf..cfa5be232 100644
--- a/src/views/notifications/toasts/Toasts.js
+++ b/src/views/notifications/toasts/Toasts.js
@@ -54,7 +54,7 @@ const Toasts = () => {
             <strong>React Toast</strong> <small>Basic</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Toasts are as flexible as you need and have very little required markup. At a minimum,
               we require a single element to contain your “toasted” content and strongly encourage a
               dismiss button.
@@ -89,7 +89,7 @@ const Toasts = () => {
             <strong>React Toast</strong> <small>Translucent</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Toasts are slightly translucent to blend in with what&#39;s below them.
             </p>
             <DocsExample href="components/toast#translucent">
@@ -123,7 +123,7 @@ const Toasts = () => {
             <strong>React Toast</strong> <small>Stacking</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               You can stack toasts by wrapping them in a toast container, which will vertically add
               some spacing.
             </p>
@@ -176,7 +176,7 @@ const Toasts = () => {
             <strong>React Toast</strong> <small>Custom content</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Customize your toasts by removing sub-components, tweaking them with{' '}
               <a href="https://coreui.io/docs/4.0/utilities/api">utilities</a>, or by adding your
               own markup. Here we&#39;ve created a simpler toast by removing the default{' '}
@@ -193,7 +193,7 @@ const Toasts = () => {
                 </div>
               </CToast>
             </DocsExample>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Alternatively, you can also add additional controls and components to toasts.
             </p>
             <DocsExample href="components/toast#custom-content">
@@ -220,7 +220,7 @@ const Toasts = () => {
             <strong>React Toast</strong> <small>Custom content</small>
           </CCardHeader>
           <CCardBody>
-            <p className="text-medium-emphasis small">
+            <p className="text-body-secondary small">
               Building on the above example, you can create different toast color schemes with our{' '}
               <a href="https://coreui.io/docs/4.0/utilities/colors">color</a> and{' '}
               <a href="https://coreui.io/docs/4.0//utilities/background">background</a> utilities.
diff --git a/src/views/pages/login/Login.js b/src/views/pages/login/Login.js
index 320cacd4d..1b2ee0baa 100644
--- a/src/views/pages/login/Login.js
+++ b/src/views/pages/login/Login.js
@@ -27,7 +27,7 @@ const Login = () => {
                 <CCardBody>
                   <CForm>
                     <h1>Login</h1>
-                    <p className="text-medium-emphasis">Sign In to your account</p>
+                    <p className="text-body-secondary">Sign In to your account</p>
                     <CInputGroup className="mb-3">
                       <CInputGroupText>
                         <CIcon icon={cilUser} />
diff --git a/src/views/pages/page404/Page404.js b/src/views/pages/page404/Page404.js
index c14e859fc..d7fe9a0a2 100644
--- a/src/views/pages/page404/Page404.js
+++ b/src/views/pages/page404/Page404.js
@@ -20,7 +20,7 @@ const Page404 = () => {
             <div className="clearfix">
               <h1 className="float-start display-3 me-4">404</h1>
               <h4 className="pt-3">Oops! You{"'"}re lost.</h4>
-              <p className="text-medium-emphasis float-start">
+              <p className="text-body-secondary float-start">
                 The page you are looking for was not found.
               </p>
             </div>
diff --git a/src/views/pages/page500/Page500.js b/src/views/pages/page500/Page500.js
index 11d867b89..ea11a0cb2 100644
--- a/src/views/pages/page500/Page500.js
+++ b/src/views/pages/page500/Page500.js
@@ -20,7 +20,7 @@ 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-medium-emphasis float-start">
+              <p className="text-body-secondary float-start">
                 The page you are looking for is temporarily unavailable.
               </p>
             </span>
diff --git a/src/views/pages/register/Register.js b/src/views/pages/register/Register.js
index 4dc5b7ae7..d78b24c8f 100644
--- a/src/views/pages/register/Register.js
+++ b/src/views/pages/register/Register.js
@@ -24,7 +24,7 @@ const Register = () => {
               <CCardBody className="p-4">
                 <CForm>
                   <h1>Register</h1>
-                  <p className="text-medium-emphasis">Create your account</p>
+                  <p className="text-body-secondary">Create your account</p>
                   <CInputGroup className="mb-3">
                     <CInputGroupText>
                       <CIcon icon={cilUser} />
diff --git a/src/views/theme/colors/Colors.js b/src/views/theme/colors/Colors.js
index 9e51a9867..4a1570353 100644
--- a/src/views/theme/colors/Colors.js
+++ b/src/views/theme/colors/Colors.js
@@ -19,11 +19,11 @@ const ThemeView = () => {
     <table className="table w-100" ref={ref}>
       <tbody>
         <tr>
-          <td className="text-medium-emphasis">HEX:</td>
+          <td className="text-body-secondary">HEX:</td>
           <td className="font-weight-bold">{rgbToHex(color)}</td>
         </tr>
         <tr>
-          <td className="text-medium-emphasis">RGB:</td>
+          <td className="text-body-secondary">RGB:</td>
           <td className="font-weight-bold">{color}</td>
         </tr>
       </tbody>
diff --git a/src/views/widgets/Widgets.js b/src/views/widgets/Widgets.js
index 44a2521b3..c6be871f6 100644
--- a/src/views/widgets/Widgets.js
+++ b/src/views/widgets/Widgets.js
@@ -643,7 +643,7 @@ const Widgets = () => {
                 color="primary"
                 footer={
                   <CLink
-                    className="font-weight-bold font-xs text-medium-emphasis"
+                    className="font-weight-bold font-xs text-body-secondary"
                     href="https://coreui.io/"
                     rel="noopener norefferer"
                     target="_blank"
@@ -663,7 +663,7 @@ const Widgets = () => {
                 color="info"
                 footer={
                   <CLink
-                    className="font-weight-bold font-xs text-medium-emphasis"
+                    className="font-weight-bold font-xs text-body-secondary"
                     href="https://coreui.io/"
                     rel="noopener norefferer"
                     target="_blank"
@@ -683,7 +683,7 @@ const Widgets = () => {
                 color="warning"
                 footer={
                   <CLink
-                    className="font-weight-bold font-xs text-medium-emphasis"
+                    className="font-weight-bold font-xs text-body-secondary"
                     href="https://coreui.io/"
                     rel="noopener norefferer"
                     target="_blank"
@@ -703,7 +703,7 @@ const Widgets = () => {
                 color="danger"
                 footer={
                   <CLink
-                    className="font-weight-bold font-xs text-medium-emphasis"
+                    className="font-weight-bold font-xs text-body-secondary"
                     href="https://coreui.io/"
                     rel="noopener norefferer"
                     target="_blank"
diff --git a/src/views/widgets/WidgetsDropdown.js b/src/views/widgets/WidgetsDropdown.js
index 478661ebb..ddab3d3be 100644
--- a/src/views/widgets/WidgetsDropdown.js
+++ b/src/views/widgets/WidgetsDropdown.js
@@ -53,7 +53,7 @@ const WidgetsDropdown = () => {
           action={
             <CDropdown alignment="end">
               <CDropdownToggle color="transparent" caret={false} className="p-0">
-                <CIcon icon={cilOptions} className="text-high-emphasis-inverse" />
+                <CIcon icon={cilOptions} />
               </CDropdownToggle>
               <CDropdownMenu>
                 <CDropdownItem>Action</CDropdownItem>
@@ -141,7 +141,7 @@ const WidgetsDropdown = () => {
           action={
             <CDropdown alignment="end">
               <CDropdownToggle color="transparent" caret={false} className="p-0">
-                <CIcon icon={cilOptions} className="text-high-emphasis-inverse" />
+                <CIcon icon={cilOptions} />
               </CDropdownToggle>
               <CDropdownMenu>
                 <CDropdownItem>Action</CDropdownItem>
@@ -228,7 +228,7 @@ const WidgetsDropdown = () => {
           action={
             <CDropdown alignment="end">
               <CDropdownToggle color="transparent" caret={false} className="p-0">
-                <CIcon icon={cilOptions} className="text-high-emphasis-inverse" />
+                <CIcon icon={cilOptions} />
               </CDropdownToggle>
               <CDropdownMenu>
                 <CDropdownItem>Action</CDropdownItem>
@@ -301,7 +301,7 @@ const WidgetsDropdown = () => {
           action={
             <CDropdown alignment="end">
               <CDropdownToggle color="transparent" caret={false} className="p-0">
-                <CIcon icon={cilOptions} className="text-high-emphasis-inverse" />
+                <CIcon icon={cilOptions} />
               </CDropdownToggle>
               <CDropdownMenu>
                 <CDropdownItem>Action</CDropdownItem>

From 7801ae064debf493315554170811f2fc2eef9d9f Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Fri, 15 Sep 2023 20:07:53 +0200
Subject: [PATCH 23/68] refactor: update layout

---
 src/assets/brand/logo-negative.js | 33 -------------------------
 src/assets/brand/logo.js          | 40 ++++++++++---------------------
 src/assets/brand/sygnet.js        | 15 ++++--------
 src/components/AppHeader.js       | 24 ++++++++++---------
 src/components/AppSidebar.js      | 38 +++++++++++++++++++++--------
 src/components/AppSidebarNav.js   | 16 +++++++++----
 src/layout/DefaultLayout.js       |  2 +-
 src/scss/_custom.scss             | 32 +++++++++++++++++++++++++
 src/scss/_layout.scss             | 12 ++++++++++
 9 files changed, 115 insertions(+), 97 deletions(-)
 delete mode 100644 src/assets/brand/logo-negative.js

diff --git a/src/assets/brand/logo-negative.js b/src/assets/brand/logo-negative.js
deleted file mode 100644
index 114a6a047..000000000
--- a/src/assets/brand/logo-negative.js
+++ /dev/null
@@ -1,33 +0,0 @@
-export const logoNegative = [
-  '608 134',
-  `
-  <title>coreui react pro logo</title>
-  <g>
-    <g style="fill:#80d0ff;">
-      <path d="M362.0177,90.1512,353.25,69.4149a.2507.2507,0,0,0-.2559-.1914H343.01a.2263.2263,0,0,0-.2559.2559V90.0233a.5657.5657,0,0,1-.64.64h-1.2163a.5652.5652,0,0,1-.64-.64V46.5028a.5655.5655,0,0,1,.64-.64H353.442a9.9792,9.9792,0,0,1,7.7437,3.2324A12.2,12.2,0,0,1,364.13,57.64a12.4389,12.4389,0,0,1-2.24,7.584,9.37,9.37,0,0,1-6.08,3.7441c-.1709.086-.2139.1915-.128.3194l8.7041,20.6084.064.2558q0,.5127-.5757.5118h-1.1523A.703.703,0,0,1,362.0177,90.1512ZM342.754,48.3593v18.496a.2259.2259,0,0,0,.2559.2559h10.3037a7.6713,7.6713,0,0,0,6.0166-2.5918,9.8807,9.8807,0,0,0,2.3037-6.8164,10.2875,10.2875,0,0,0-2.272-6.9756,7.6033,7.6033,0,0,0-6.0483-2.624H343.01A.2263.2263,0,0,0,342.754,48.3593Z"/>
-      <path d="M401.3263,48.1034H381.2945a.2262.2262,0,0,0-.2558.2559v18.496a.2259.2259,0,0,0,.2558.2559h13.8238a.5664.5664,0,0,1,.6406.64v.96a.5663.5663,0,0,1-.6406.6406H381.2945a.2263.2263,0,0,0-.2558.2559v18.56a.2258.2258,0,0,0,.2558.2558h20.0318a.5671.5671,0,0,1,.6406.6407v.96a.566.566,0,0,1-.6406.64H379.1827a.5653.5653,0,0,1-.64-.64V46.5028a.5656.5656,0,0,1,.64-.64h22.1436a.5664.5664,0,0,1,.6406.64v.96A.5663.5663,0,0,1,401.3263,48.1034Z"/>
-      <path d="M439.047,90.1512l-2.4317-8.832a.2971.2971,0,0,0-.32-.1924H419.5274a.2957.2957,0,0,0-.32.1924l-2.3681,8.7676a.6577.6577,0,0,1-.7036.5762H414.919a.5385.5385,0,0,1-.5756-.7041l12.0317-43.584a.6436.6436,0,0,1,.7041-.5117h1.6a.6442.6442,0,0,1,.7041.5117l12.16,43.584.0644.1923q0,.5127-.64.5118h-1.2163A.6428.6428,0,0,1,439.047,90.1512ZM419.9435,78.9188a.3031.3031,0,0,0,.2236.0967h15.4883a.3048.3048,0,0,0,.2236-.0967c.0645-.0635.0742-.1162.0322-.1592l-7.872-28.9287c-.043-.0849-.086-.1279-.128-.1279s-.0859.043-.1279.1279L419.9112,78.76C419.8683,78.8026,419.879,78.8553,419.9435,78.9188Z"/>
-      <path d="M456.6017,87.911a11.6372,11.6372,0,0,1-3.3277-8.7041V57.1913a11.4158,11.4158,0,0,1,3.36-8.5762,12.0941,12.0941,0,0,1,8.8-3.2637,12.2566,12.2566,0,0,1,8.8643,3.2315,11.3927,11.3927,0,0,1,3.36,8.6084v.64a.5663.5663,0,0,1-.6406.6407l-1.28.0634q-.6408,0-.64-.5761v-.8321a9.289,9.289,0,0,0-2.6558-6.9121,10.6734,10.6734,0,0,0-14.0161,0,9.2854,9.2854,0,0,0-2.6563,6.9121V79.3993a9.2808,9.2808,0,0,0,2.6563,6.9121,10.67,10.67,0,0,0,14.0161,0,9.2843,9.2843,0,0,0,2.6558-6.9121v-.7686q0-.5757.64-.5752l1.28.0635a.5667.5667,0,0,1,.6406.6406v.5118a11.4952,11.4952,0,0,1-3.36,8.64,13.6227,13.6227,0,0,1-17.6963,0Z"/>
-      <path d="M514.4376,46.5028v.96a.5658.5658,0,0,1-.64.6406H503.046a.2263.2263,0,0,0-.2559.2559v41.664a.566.566,0,0,1-.6406.64h-1.2158a.5652.5652,0,0,1-.64-.64V48.3593a.2266.2266,0,0,0-.2558-.2559H489.8619a.5656.5656,0,0,1-.64-.6406v-.96a.5656.5656,0,0,1,.64-.64H513.798A.5658.5658,0,0,1,514.4376,46.5028Z"/>
-      <path d="M522.0665,89.5116a2.8385,2.8385,0,0,1-.8-2.0488,2.9194,2.9194,0,0,1,.8-2.1114,2.7544,2.7544,0,0,1,2.08-.832,2.8465,2.8465,0,0,1,2.9438,2.9434,2.7541,2.7541,0,0,1-.832,2.08,2.9221,2.9221,0,0,1-2.1118.8008A2.754,2.754,0,0,1,522.0665,89.5116Z"/>
-      <path d="M542.4054,88.0077a11.3123,11.3123,0,0,1-3.2-8.416v-5.44a.5656.5656,0,0,1,.64-.64h1.2158a.5661.5661,0,0,1,.64.64v5.5039a9.1424,9.1424,0,0,0,2.5283,6.72,8.9745,8.9745,0,0,0,6.6875,2.5605,8.7908,8.7908,0,0,0,9.28-9.28V46.5028a.5655.5655,0,0,1,.64-.64h1.2163a.566.566,0,0,1,.64.64V79.5917a11.2545,11.2545,0,0,1-3.2325,8.416,13.0618,13.0618,0,0,1-17.0556,0Z"/>
-      <path d="M580.35,88.1034a10.4859,10.4859,0,0,1-3.36-8.1279v-1.792a.5663.5663,0,0,1,.64-.6407h1.0884a.5668.5668,0,0,1,.64.6407v1.6a8.5459,8.5459,0,0,0,2.752,6.6562,10.5353,10.5353,0,0,0,7.36,2.4961,9.8719,9.8719,0,0,0,6.9761-2.3681,8.2161,8.2161,0,0,0,2.56-6.336,8.4,8.4,0,0,0-1.12-4.416,11.3812,11.3812,0,0,0-3.3281-3.3926,71.6714,71.6714,0,0,0-6.1763-3.7119,71.0479,71.0479,0,0,1-6.24-3.84,12.1711,12.1711,0,0,1-3.4238-3.68,10.2614,10.2614,0,0,1-1.28-5.3438,9.8579,9.8579,0,0,1,3.0718-7.7441,12.0122,12.0122,0,0,1,8.32-2.752q5.6954,0,8.96,3.1036a10.8251,10.8251,0,0,1,3.2642,8.2246v1.6a.5658.5658,0,0,1-.64.64h-1.1519a.5652.5652,0,0,1-.64-.64V56.8075a8.8647,8.8647,0,0,0-2.624-6.6885,9.9933,9.9933,0,0,0-7.232-2.5273,9.37,9.37,0,0,0-6.5278,2.1435,7.8224,7.8224,0,0,0-2.3682,6.1123,7.8006,7.8006,0,0,0,1.0244,4.16,10.387,10.387,0,0,0,3.0078,3.0391,62.8714,62.8714,0,0,0,5.9522,3.4882,71.0575,71.0575,0,0,1,6.72,4.2559,13.4674,13.4674,0,0,1,3.648,3.9365,10.049,10.049,0,0,1,1.28,5.1836,10.7177,10.7177,0,0,1-3.2637,8.1924q-3.2637,3.0717-8.832,3.0723Q583.71,91.1757,580.35,88.1034Z"/>
-    </g>
-
-    <g style="fill:#fff;">
-      <g>
-        <path d="M99.835,36.0577l-39-22.5167a12,12,0,0,0-12,0l-39,22.5166a12.0339,12.0339,0,0,0-6,10.3924V91.4833a12.0333,12.0333,0,0,0,6,10.3923l39,22.5167a12,12,0,0,0,12,0l39-22.5167a12.0331,12.0331,0,0,0,6-10.3923V46.45A12.0334,12.0334,0,0,0,99.835,36.0577Zm-2,55.4256a4,4,0,0,1-2,3.4641l-39,22.5167a4.0006,4.0006,0,0,1-4,0l-39-22.5167a4,4,0,0,1-2-3.4641V46.45a4,4,0,0,1,2-3.4642l39-22.5166a4,4,0,0,1,4,0l39,22.5166a4,4,0,0,1,2,3.4642Z"/>
-        <path d="M77.8567,82.0046h-2.866a4,4,0,0,0-1.9247.4934L55.7852,91.9833,35.835,80.4648V57.4872l19.95-11.5185,17.2893,9.4549a3.9993,3.9993,0,0,0,1.9192.4906h2.8632a2,2,0,0,0,2-2V51.2024a2,2,0,0,0-1.04-1.7547L59.628,38.9521a8.0391,8.0391,0,0,0-7.8428.09L31.8346,50.56a8.0246,8.0246,0,0,0-4,6.9287v22.976a8,8,0,0,0,4,6.9283l19.95,11.5186a8.0429,8.0429,0,0,0,7.8433.0879l19.19-10.5312a2,2,0,0,0,1.0378-1.7533v-2.71A2,2,0,0,0,77.8567,82.0046Z"/>
-      </g>
-      <g>
-        <path d="M172.58,45.3618a15.0166,15.0166,0,0,0-15,14.9995V77.6387a15,15,0,0,0,30,0V60.3613A15.0166,15.0166,0,0,0,172.58,45.3618Zm7,32.2769a7,7,0,0,1-14,0V60.3613a7,7,0,0,1,14,0Z"/>
-        <path d="M135.9138,53.4211a7.01,7.01,0,0,1,7.8681,6.0752.9894.9894,0,0,0,.9843.865h6.03a1.0108,1.0108,0,0,0,.9987-1.0971,15.0182,15.0182,0,0,0-15.7162-13.8837,15.2881,15.2881,0,0,0-14.2441,15.4163V77.2037A15.288,15.288,0,0,0,136.0792,92.62a15.0183,15.0183,0,0,0,15.7162-13.8842,1.0107,1.0107,0,0,0-.9987-1.0971h-6.03a.9894.9894,0,0,0-.9843.865,7.01,7.01,0,0,1-7.8679,6.0757,7.1642,7.1642,0,0,1-6.0789-7.1849V60.6057A7.1638,7.1638,0,0,1,135.9138,53.4211Z"/>
-        <path d="M218.7572,72.9277a12.1585,12.1585,0,0,0,7.1843-11.0771V58.1494A12.1494,12.1494,0,0,0,213.7921,46H196.835a1,1,0,0,0-1,1V91a1,1,0,0,0,1,1h6a1,1,0,0,0,1-1V74h6.6216l7.9154,17.4138a1,1,0,0,0,.91.5862h6.5911a1,1,0,0,0,.91-1.4138Zm-.8157-11.0771A4.1538,4.1538,0,0,1,213.7926,66h-9.8511V54h9.8511a4.1538,4.1538,0,0,1,4.1489,4.1494Z"/>
-        <path d="M260.835,46h-26a1,1,0,0,0-1,1V91a1,1,0,0,0,1,1h26a1,1,0,0,0,1-1V85a1,1,0,0,0-1-1h-19V72h13a1,1,0,0,0,1-1V65a1,1,0,0,0-1-1h-13V54h19a1,1,0,0,0,1-1V47A1,1,0,0,0,260.835,46Z"/>
-        <path d="M298.835,46h-6a1,1,0,0,0-1,1V69.6475a7.0066,7.0066,0,1,1-14,0V47a1,1,0,0,0-1-1h-6a1,1,0,0,0-1,1V69.6475a15.0031,15.0031,0,1,0,30,0V47A1,1,0,0,0,298.835,46Z"/>
-        <rect x="307.835" y="46" width="8" height="38" rx="1"/>
-      </g>
-    </g>
-  </g>
-`,
-]
diff --git a/src/assets/brand/logo.js b/src/assets/brand/logo.js
index 7a2d7e0b3..63961c6a1 100644
--- a/src/assets/brand/logo.js
+++ b/src/assets/brand/logo.js
@@ -1,32 +1,18 @@
 export const logo = [
-  '608 134',
-  `
-  <title>coreui react pro</title>
-  <g>
-    <g style="fill:#00a1ff">
-      <path d="M362.0177,90.1512,353.25,69.4149a.2507.2507,0,0,0-.2559-.1914H343.01a.2263.2263,0,0,0-.2559.2559V90.0233a.5657.5657,0,0,1-.64.64h-1.2163a.5652.5652,0,0,1-.64-.64V46.5028a.5655.5655,0,0,1,.64-.64H353.442a9.9792,9.9792,0,0,1,7.7437,3.2324A12.2,12.2,0,0,1,364.13,57.64a12.4389,12.4389,0,0,1-2.24,7.584,9.37,9.37,0,0,1-6.08,3.7441c-.1709.086-.2139.1915-.128.3194l8.7041,20.6084.064.2558q0,.5127-.5757.5118h-1.1523A.703.703,0,0,1,362.0177,90.1512ZM342.754,48.3593v18.496a.2259.2259,0,0,0,.2559.2559h10.3037a7.6713,7.6713,0,0,0,6.0166-2.5918,9.8807,9.8807,0,0,0,2.3037-6.8164,10.2875,10.2875,0,0,0-2.272-6.9756,7.6033,7.6033,0,0,0-6.0483-2.624H343.01A.2263.2263,0,0,0,342.754,48.3593Z"/>
-      <path d="M401.3263,48.1034H381.2945a.2262.2262,0,0,0-.2558.2559v18.496a.2259.2259,0,0,0,.2558.2559h13.8238a.5664.5664,0,0,1,.6406.64v.96a.5663.5663,0,0,1-.6406.6406H381.2945a.2263.2263,0,0,0-.2558.2559v18.56a.2258.2258,0,0,0,.2558.2558h20.0318a.5671.5671,0,0,1,.6406.6407v.96a.566.566,0,0,1-.6406.64H379.1827a.5653.5653,0,0,1-.64-.64V46.5028a.5656.5656,0,0,1,.64-.64h22.1436a.5664.5664,0,0,1,.6406.64v.96A.5663.5663,0,0,1,401.3263,48.1034Z"/>
-      <path d="M439.047,90.1512l-2.4317-8.832a.2971.2971,0,0,0-.32-.1924H419.5274a.2957.2957,0,0,0-.32.1924l-2.3681,8.7676a.6577.6577,0,0,1-.7036.5762H414.919a.5385.5385,0,0,1-.5756-.7041l12.0317-43.584a.6436.6436,0,0,1,.7041-.5117h1.6a.6442.6442,0,0,1,.7041.5117l12.16,43.584.0644.1923q0,.5127-.64.5118h-1.2163A.6428.6428,0,0,1,439.047,90.1512ZM419.9435,78.9188a.3031.3031,0,0,0,.2236.0967h15.4883a.3048.3048,0,0,0,.2236-.0967c.0645-.0635.0742-.1162.0322-.1592l-7.872-28.9287c-.043-.0849-.086-.1279-.128-.1279s-.0859.043-.1279.1279L419.9112,78.76C419.8683,78.8026,419.879,78.8553,419.9435,78.9188Z"/>
-      <path d="M456.6017,87.911a11.6372,11.6372,0,0,1-3.3277-8.7041V57.1913a11.4158,11.4158,0,0,1,3.36-8.5762,12.0941,12.0941,0,0,1,8.8-3.2637,12.2566,12.2566,0,0,1,8.8643,3.2315,11.3927,11.3927,0,0,1,3.36,8.6084v.64a.5663.5663,0,0,1-.6406.6407l-1.28.0634q-.6408,0-.64-.5761v-.8321a9.289,9.289,0,0,0-2.6558-6.9121,10.6734,10.6734,0,0,0-14.0161,0,9.2854,9.2854,0,0,0-2.6563,6.9121V79.3993a9.2808,9.2808,0,0,0,2.6563,6.9121,10.67,10.67,0,0,0,14.0161,0,9.2843,9.2843,0,0,0,2.6558-6.9121v-.7686q0-.5757.64-.5752l1.28.0635a.5667.5667,0,0,1,.6406.6406v.5118a11.4952,11.4952,0,0,1-3.36,8.64,13.6227,13.6227,0,0,1-17.6963,0Z"/>
-      <path d="M514.4376,46.5028v.96a.5658.5658,0,0,1-.64.6406H503.046a.2263.2263,0,0,0-.2559.2559v41.664a.566.566,0,0,1-.6406.64h-1.2158a.5652.5652,0,0,1-.64-.64V48.3593a.2266.2266,0,0,0-.2558-.2559H489.8619a.5656.5656,0,0,1-.64-.6406v-.96a.5656.5656,0,0,1,.64-.64H513.798A.5658.5658,0,0,1,514.4376,46.5028Z"/>
-      <path d="M522.0665,89.5116a2.8385,2.8385,0,0,1-.8-2.0488,2.9194,2.9194,0,0,1,.8-2.1114,2.7544,2.7544,0,0,1,2.08-.832,2.8465,2.8465,0,0,1,2.9438,2.9434,2.7541,2.7541,0,0,1-.832,2.08,2.9221,2.9221,0,0,1-2.1118.8008A2.754,2.754,0,0,1,522.0665,89.5116Z"/>
-      <path d="M542.4054,88.0077a11.3123,11.3123,0,0,1-3.2-8.416v-5.44a.5656.5656,0,0,1,.64-.64h1.2158a.5661.5661,0,0,1,.64.64v5.5039a9.1424,9.1424,0,0,0,2.5283,6.72,8.9745,8.9745,0,0,0,6.6875,2.5605,8.7908,8.7908,0,0,0,9.28-9.28V46.5028a.5655.5655,0,0,1,.64-.64h1.2163a.566.566,0,0,1,.64.64V79.5917a11.2545,11.2545,0,0,1-3.2325,8.416,13.0618,13.0618,0,0,1-17.0556,0Z"/>
-      <path d="M580.35,88.1034a10.4859,10.4859,0,0,1-3.36-8.1279v-1.792a.5663.5663,0,0,1,.64-.6407h1.0884a.5668.5668,0,0,1,.64.6407v1.6a8.5459,8.5459,0,0,0,2.752,6.6562,10.5353,10.5353,0,0,0,7.36,2.4961,9.8719,9.8719,0,0,0,6.9761-2.3681,8.2161,8.2161,0,0,0,2.56-6.336,8.4,8.4,0,0,0-1.12-4.416,11.3812,11.3812,0,0,0-3.3281-3.3926,71.6714,71.6714,0,0,0-6.1763-3.7119,71.0479,71.0479,0,0,1-6.24-3.84,12.1711,12.1711,0,0,1-3.4238-3.68,10.2614,10.2614,0,0,1-1.28-5.3438,9.8579,9.8579,0,0,1,3.0718-7.7441,12.0122,12.0122,0,0,1,8.32-2.752q5.6954,0,8.96,3.1036a10.8251,10.8251,0,0,1,3.2642,8.2246v1.6a.5658.5658,0,0,1-.64.64h-1.1519a.5652.5652,0,0,1-.64-.64V56.8075a8.8647,8.8647,0,0,0-2.624-6.6885,9.9933,9.9933,0,0,0-7.232-2.5273,9.37,9.37,0,0,0-6.5278,2.1435,7.8224,7.8224,0,0,0-2.3682,6.1123,7.8006,7.8006,0,0,0,1.0244,4.16,10.387,10.387,0,0,0,3.0078,3.0391,62.8714,62.8714,0,0,0,5.9522,3.4882,71.0575,71.0575,0,0,1,6.72,4.2559,13.4674,13.4674,0,0,1,3.648,3.9365,10.049,10.049,0,0,1,1.28,5.1836,10.7177,10.7177,0,0,1-3.2637,8.1924q-3.2637,3.0717-8.832,3.0723Q583.71,91.1757,580.35,88.1034Z"/>
-    </g>
-    <g style="fill:#3c4b64">
-      <g>
-        <path d="M99.835,36.0577l-39-22.5167a12,12,0,0,0-12,0l-39,22.5166a12.0339,12.0339,0,0,0-6,10.3924V91.4833a12.0333,12.0333,0,0,0,6,10.3923l39,22.5167a12,12,0,0,0,12,0l39-22.5167a12.0331,12.0331,0,0,0,6-10.3923V46.45A12.0334,12.0334,0,0,0,99.835,36.0577Zm-2,55.4256a4,4,0,0,1-2,3.4641l-39,22.5167a4.0006,4.0006,0,0,1-4,0l-39-22.5167a4,4,0,0,1-2-3.4641V46.45a4,4,0,0,1,2-3.4642l39-22.5166a4,4,0,0,1,4,0l39,22.5166a4,4,0,0,1,2,3.4642Z"/>
-        <path d="M77.8567,82.0046h-2.866a4,4,0,0,0-1.9247.4934L55.7852,91.9833,35.835,80.4648V57.4872l19.95-11.5185,17.2893,9.4549a3.9993,3.9993,0,0,0,1.9192.4906h2.8632a2,2,0,0,0,2-2V51.2024a2,2,0,0,0-1.04-1.7547L59.628,38.9521a8.0391,8.0391,0,0,0-7.8428.09L31.8346,50.56a8.0246,8.0246,0,0,0-4,6.9287v22.976a8,8,0,0,0,4,6.9283l19.95,11.5186a8.0429,8.0429,0,0,0,7.8433.0879l19.19-10.5312a2,2,0,0,0,1.0378-1.7533v-2.71A2,2,0,0,0,77.8567,82.0046Z"/>
+  '599 116',
+  `<g>
+    <g fill="none" fill-rule="nonzero">
+      <g style="fill:#80d0ff;">
+        <path d="m358.773 79.151-8.768-20.736a.25.25 0 0 0-.255-.191h-9.985a.226.226 0 0 0-.256.255v20.543a.566.566 0 0 1-.64.641h-1.216a.565.565 0 0 1-.64-.64v-43.52a.566.566 0 0 1 .64-.64h12.544a9.979 9.979 0 0 1 7.744 3.23 12.204 12.204 0 0 1 2.944 8.546 12.439 12.439 0 0 1-2.24 7.584 9.37 9.37 0 0 1-6.08 3.744c-.17.086-.214.191-.127.32l8.704 20.608.064.255c0 .342-.192.512-.576.512h-1.152a.703.703 0 0 1-.705-.51Zm-19.264-41.793v18.496a.226.226 0 0 0 .256.257h10.304a7.669 7.669 0 0 0 6.017-2.592 9.878 9.878 0 0 0 2.303-6.816 10.286 10.286 0 0 0-2.272-6.976 7.601 7.601 0 0 0-6.048-2.624h-10.304a.226.226 0 0 0-.256.255ZM398.082 37.102H378.05a.226.226 0 0 0-.256.256v18.496a.226.226 0 0 0 .256.257h13.824a.566.566 0 0 1 .64.64v.96a.566.566 0 0 1-.64.64H378.05a.226.226 0 0 0-.256.256v18.56a.226.226 0 0 0 .256.256h20.032a.567.567 0 0 1 .64.64v.96a.566.566 0 0 1-.64.64h-22.144a.566.566 0 0 1-.64-.64v-43.52a.566.566 0 0 1 .64-.64h22.144a.566.566 0 0 1 .64.64v.96a.566.566 0 0 1-.64.64ZM435.802 79.151l-2.431-8.832a.296.296 0 0 0-.32-.192h-16.768a.295.295 0 0 0-.32.192l-2.368 8.768a.658.658 0 0 1-.704.576h-1.216a.588.588 0 0 1-.48-.191.582.582 0 0 1-.096-.513l12.031-43.584a.644.644 0 0 1 .704-.512h1.6a.644.644 0 0 1 .704.512l12.16 43.584.065.192c0 .342-.214.512-.64.512h-1.217a.643.643 0 0 1-.704-.512ZM416.7 67.92a.303.303 0 0 0 .223.096h15.489a.304.304 0 0 0 .223-.096c.065-.065.075-.117.033-.16l-7.873-28.928c-.043-.085-.085-.128-.127-.128-.042 0-.086.043-.128.128l-7.872 28.928c-.043.043-.033.095.032.16ZM453.357 76.911a11.637 11.637 0 0 1-3.328-8.704V46.19a11.414 11.414 0 0 1 3.36-8.575 12.09 12.09 0 0 1 8.8-3.265 12.253 12.253 0 0 1 8.865 3.233 11.39 11.39 0 0 1 3.36 8.607v.64a.566.566 0 0 1-.641.641l-1.28.064c-.427 0-.64-.192-.64-.576v-.833a9.287 9.287 0 0 0-2.656-6.912 10.67 10.67 0 0 0-14.016 0 9.284 9.284 0 0 0-2.656 6.913v22.272a9.282 9.282 0 0 0 2.656 6.912 10.673 10.673 0 0 0 14.016 0 9.286 9.286 0 0 0 2.656-6.912v-.768c0-.384.213-.576.64-.575l1.28.063a.566.566 0 0 1 .64.64v.511a11.498 11.498 0 0 1-3.36 8.64 13.626 13.626 0 0 1-17.696 0v.001ZM511.193 35.503v.96a.565.565 0 0 1-.64.64H499.8a.226.226 0 0 0-.256.256v41.663a.566.566 0 0 1-.64.641h-1.216a.565.565 0 0 1-.64-.64V37.357a.227.227 0 0 0-.256-.255h-10.176a.565.565 0 0 1-.64-.64v-.96a.566.566 0 0 1 .64-.64h23.936a.566.566 0 0 1 .64.64ZM518.822 78.51a2.835 2.835 0 0 1-.8-2.047 2.923 2.923 0 0 1 .8-2.112c.544-.56 1.3-.862 2.08-.832a2.847 2.847 0 0 1 2.944 2.944c.03.78-.273 1.536-.832 2.08a2.921 2.921 0 0 1-2.112.8 2.754 2.754 0 0 1-2.08-.832ZM539.16 77.007a11.31 11.31 0 0 1-3.2-8.416v-5.44a.566.566 0 0 1 .64-.64h1.217a.567.567 0 0 1 .64.64v5.504a9.144 9.144 0 0 0 2.528 6.72 8.974 8.974 0 0 0 6.687 2.56 8.79 8.79 0 0 0 9.28-9.28V35.504a.565.565 0 0 1 .64-.64h1.217a.566.566 0 0 1 .64.64V68.59a11.252 11.252 0 0 1-3.233 8.416 13.062 13.062 0 0 1-17.055 0ZM577.106 77.102a10.482 10.482 0 0 1-3.36-8.127v-1.792a.565.565 0 0 1 .64-.64h1.088a.566.566 0 0 1 .64.64v1.6a8.544 8.544 0 0 0 2.752 6.655 10.536 10.536 0 0 0 7.36 2.496 9.876 9.876 0 0 0 6.976-2.367 8.215 8.215 0 0 0 2.56-6.336 8.397 8.397 0 0 0-1.12-4.416 11.383 11.383 0 0 0-3.328-3.392 71.626 71.626 0 0 0-6.176-3.712 71.302 71.302 0 0 1-6.24-3.84 12.174 12.174 0 0 1-3.424-3.68 10.257 10.257 0 0 1-1.28-5.345 9.86 9.86 0 0 1 3.072-7.744 12.012 12.012 0 0 1 8.32-2.752c3.796 0 6.783 1.035 8.96 3.105a10.823 10.823 0 0 1 3.264 8.224v1.6a.566.566 0 0 1-.64.64h-1.152a.565.565 0 0 1-.64-.64v-1.471a8.865 8.865 0 0 0-2.624-6.689 9.994 9.994 0 0 0-7.232-2.528 9.365 9.365 0 0 0-6.528 2.144 7.822 7.822 0 0 0-2.368 6.112 7.8 7.8 0 0 0 1.024 4.16 10.376 10.376 0 0 0 3.008 3.04 62.829 62.829 0 0 0 5.952 3.488 71.058 71.058 0 0 1 6.72 4.256 13.454 13.454 0 0 1 3.648 3.936 10.049 10.049 0 0 1 1.28 5.184 10.714 10.714 0 0 1-3.264 8.191c-2.175 2.05-5.12 3.073-8.832 3.073-3.798 0-6.817-1.024-9.057-3.073Z"/>
       </g>
-      <g>
-        <path d="M172.58,45.3618a15.0166,15.0166,0,0,0-15,14.9995V77.6387a15,15,0,0,0,30,0V60.3613A15.0166,15.0166,0,0,0,172.58,45.3618Zm7,32.2769a7,7,0,0,1-14,0V60.3613a7,7,0,0,1,14,0Z"/>
-        <path d="M135.9138,53.4211a7.01,7.01,0,0,1,7.8681,6.0752.9894.9894,0,0,0,.9843.865h6.03a1.0108,1.0108,0,0,0,.9987-1.0971,15.0182,15.0182,0,0,0-15.7162-13.8837,15.2881,15.2881,0,0,0-14.2441,15.4163V77.2037A15.288,15.288,0,0,0,136.0792,92.62a15.0183,15.0183,0,0,0,15.7162-13.8842,1.0107,1.0107,0,0,0-.9987-1.0971h-6.03a.9894.9894,0,0,0-.9843.865,7.01,7.01,0,0,1-7.8679,6.0757,7.1642,7.1642,0,0,1-6.0789-7.1849V60.6057A7.1638,7.1638,0,0,1,135.9138,53.4211Z"/>
-        <path d="M218.7572,72.9277a12.1585,12.1585,0,0,0,7.1843-11.0771V58.1494A12.1494,12.1494,0,0,0,213.7921,46H196.835a1,1,0,0,0-1,1V91a1,1,0,0,0,1,1h6a1,1,0,0,0,1-1V74h6.6216l7.9154,17.4138a1,1,0,0,0,.91.5862h6.5911a1,1,0,0,0,.91-1.4138Zm-.8157-11.0771A4.1538,4.1538,0,0,1,213.7926,66h-9.8511V54h9.8511a4.1538,4.1538,0,0,1,4.1489,4.1494Z"/>
-        <path d="M260.835,46h-26a1,1,0,0,0-1,1V91a1,1,0,0,0,1,1h26a1,1,0,0,0,1-1V85a1,1,0,0,0-1-1h-19V72h13a1,1,0,0,0,1-1V65a1,1,0,0,0-1-1h-13V54h19a1,1,0,0,0,1-1V47A1,1,0,0,0,260.835,46Z"/>
-        <path d="M298.835,46h-6a1,1,0,0,0-1,1V69.6475a7.0066,7.0066,0,1,1-14,0V47a1,1,0,0,0-1-1h-6a1,1,0,0,0-1,1V69.6475a15.0031,15.0031,0,1,0,30,0V47A1,1,0,0,0,298.835,46Z"/>
-        <rect x="307.835" y="46" width="8" height="38" rx="1"/>
+      <g style="fill:currentColor;">
+        <path d="m96.59 25.058-39-22.517a12 12 0 0 0-12 0l-39 22.517a12.034 12.034 0 0 0-6 10.392v45.033a12.033 12.033 0 0 0 6 10.393l39 22.516a12 12 0 0 0 12 0l39-22.516a12.033 12.033 0 0 0 6-10.393V35.45a12.034 12.034 0 0 0-6-10.392Zm-2 55.425a4 4 0 0 1-2 3.464l-39 22.517a4 4 0 0 1-4 0l-39-22.517a4 4 0 0 1-2-3.464V35.45a4 4 0 0 1 2-3.464l39-22.517a4 4 0 0 1 4 0l39 22.517a4 4 0 0 1 2 3.464v45.033Z"/>
+        <path d="M74.612 71.005h-2.866c-.673 0-1.335.17-1.925.493l-17.28 9.485L32.59 69.465V46.487L52.54 34.97l17.29 9.455a4 4 0 0 0 1.919.49h2.863a2 2 0 0 0 2-2v-2.712a2 2 0 0 0-1.04-1.754L56.383 27.952a8.039 8.039 0 0 0-7.842.09L28.59 39.56a8.025 8.025 0 0 0-4 6.929v22.976a8 8 0 0 0 4 6.928l19.95 11.519a8.043 8.043 0 0 0 7.843.087l19.19-10.53a2 2 0 0 0 1.038-1.754v-2.71a2 2 0 0 0-1.999-2Z"/>
+        <g transform="translate(118 34)">
+          <path d="M51.335.362c-8.28.009-14.99 6.719-15 15v17.277c0 8.284 6.716 15 15 15 8.284 0 15-6.716 15-15V15.36c-.01-8.28-6.72-14.99-15-15Zm7 32.277a7 7 0 0 1-14 0V15.36a7 7 0 0 1 14 0V32.64ZM14.67 8.421a7.01 7.01 0 0 1 7.867 6.075.99.99 0 0 0 .985.865h6.03a1.01 1.01 0 0 0 .998-1.097C29.945 6.14 22.971-.02 14.834.381 6.751.932.504 7.696.59 15.796v16.407C.503 40.305 6.752 47.068 14.835 47.62c8.137.401 15.11-5.76 15.716-13.884a1.01 1.01 0 0 0-.999-1.097h-6.03a.99.99 0 0 0-.984.865 7.01 7.01 0 0 1-7.868 6.075 7.164 7.164 0 0 1-6.08-7.184v-16.79a7.164 7.164 0 0 1 6.08-7.184ZM97.513 27.928a12.158 12.158 0 0 0 7.184-11.077v-3.702C104.697 6.44 99.257 1 92.547 1H75.59a1 1 0 0 0-1 1v44a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V29h6.621l7.916 17.414a1 1 0 0 0 .91.586h6.591a1 1 0 0 0 .91-1.414l-8.025-17.658Zm-.816-11.077A4.154 4.154 0 0 1 92.547 21h-9.85V9h9.85a4.154 4.154 0 0 1 4.15 4.15v3.7ZM139.59 1h-26a1 1 0 0 0-1 1v44a1 1 0 0 0 1 1h26a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1h-19V27h13a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1h-13V9h19a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1ZM177.59 1h-6a1 1 0 0 0-1 1v22.648a7.007 7.007 0 1 1-14 0V2a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v22.648a15.003 15.003 0 1 0 30 0V2a1 1 0 0 0-1-1Z"/>
+          <rect width="8" height="38" x="186.59" y="1" rx="1"/>
+        </g>
       </g>
     </g>
-  </g>
-`,
+  </g>`,
 ]
diff --git a/src/assets/brand/sygnet.js b/src/assets/brand/sygnet.js
index 3a57fbdd4..53c3c45fd 100644
--- a/src/assets/brand/sygnet.js
+++ b/src/assets/brand/sygnet.js
@@ -1,12 +1,7 @@
 export const sygnet = [
-  '160 160',
-  `
-  <title>coreui logo</title>
-  <g>
-    <g style="fill:#fff;">
-      <path d="M125,47.091,86,24.5743a12,12,0,0,0-12,0L35,47.091a12.0336,12.0336,0,0,0-6,10.3923v45.0334a12.0335,12.0335,0,0,0,6,10.3923l39,22.5166a11.9993,11.9993,0,0,0,12,0l39-22.5166a12.0335,12.0335,0,0,0,6-10.3923V57.4833A12.0336,12.0336,0,0,0,125,47.091Zm-2,55.4257a4,4,0,0,1-2,3.464L82,128.4974a4,4,0,0,1-4,0L39,105.9807a4,4,0,0,1-2-3.464V57.4833a4,4,0,0,1,2-3.4641L78,31.5025a4,4,0,0,1,4,0l39,22.5167a4,4,0,0,1,2,3.4641Z"/>
-      <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>
-`,
+  '102 115',
+  `<g style="fill: currentColor">
+    <path d="M96 24.124 57 1.608a12 12 0 0 0-12 0L6 24.124a12.034 12.034 0 0 0-6 10.393V79.55a12.033 12.033 0 0 0 6 10.392l39 22.517a12 12 0 0 0 12 0l39-22.517a12.033 12.033 0 0 0 6-10.392V34.517a12.034 12.034 0 0 0-6-10.393ZM94 79.55a4 4 0 0 1-2 3.464l-39 22.517a4 4 0 0 1-4 0L10 83.014a4 4 0 0 1-2-3.464V34.517a4 4 0 0 1 2-3.464L49 8.536a4 4 0 0 1 4 0l39 22.517a4 4 0 0 1 2 3.464V79.55Z"/>
+    <path d="M74.022 70.071h-2.866a4 4 0 0 0-1.925.494L51.95 80.05 32 68.531V45.554l19.95-11.519 17.29 9.455a4 4 0 0 0 1.919.49h2.863a2 2 0 0 0 2-2v-2.71a2 2 0 0 0-1.04-1.756L55.793 27.02a8.04 8.04 0 0 0-7.843.09L28 38.626a8.025 8.025 0 0 0-4 6.929V68.53a8 8 0 0 0 4 6.928l19.95 11.519a8.043 8.043 0 0 0 7.843.088l19.19-10.532a2 2 0 0 0 1.038-1.753v-2.71a2 2 0 0 0-2-2Z"/>
+  </g>`,
 ]
diff --git a/src/components/AppHeader.js b/src/components/AppHeader.js
index 80bb87dc8..98b19d2d0 100644
--- a/src/components/AppHeader.js
+++ b/src/components/AppHeader.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect, useRef } from 'react'
 import { NavLink } from 'react-router-dom'
 import { useSelector, useDispatch } from 'react-redux'
 import {
@@ -9,7 +9,6 @@ import {
   CDropdownToggle,
   CHeader,
   CHeaderBrand,
-  CHeaderDivider,
   CHeaderNav,
   CHeaderToggler,
   CNavLink,
@@ -29,27 +28,31 @@ import {
 
 import { AppBreadcrumb } from './index'
 import { AppHeaderDropdown } from './header/index'
-import { logo } from 'src/assets/brand/logo'
 
 const AppHeader = () => {
+  const headerRef = useRef()
   const { colorMode, setColorMode } = useColorModes('coreui-free-react-admin-template-theme')
 
   const dispatch = useDispatch()
   const sidebarShow = useSelector((state) => state.sidebarShow)
 
+  useEffect(() => {
+    document.addEventListener('scroll', () => {
+      headerRef.current &&
+        headerRef.current.classList.toggle('shadow-sm', document.documentElement.scrollTop > 0)
+    })
+  }, [])
+
   return (
-    <CHeader position="sticky" className="mb-4">
-      <CContainer fluid>
+    <CHeader position="sticky" className="mb-4" ref={headerRef}>
+      <CContainer className="border-bottom" fluid>
         <CHeaderToggler
           className="ps-1"
           onClick={() => dispatch({ type: 'set', sidebarShow: !sidebarShow })}
         >
           <CIcon icon={cilMenu} size="lg" />
         </CHeaderToggler>
-        <CHeaderBrand className="mx-auto d-md-none" to="/">
-          <CIcon icon={logo} height={48} alt="Logo" />
-        </CHeaderBrand>
-        <CHeaderNav className="d-none d-md-flex me-auto">
+        <CHeaderNav className="d-none d-md-flex">
           <CNavItem>
             <CNavLink to="/dashboard" component={NavLink}>
               Dashboard
@@ -62,7 +65,7 @@ const AppHeader = () => {
             <CNavLink href="#">Settings</CNavLink>
           </CNavItem>
         </CHeaderNav>
-        <CHeaderNav>
+        <CHeaderNav className="ms-auto">
           <CNavItem>
             <CNavLink href="#">
               <CIcon icon={cilBell} size="lg" />
@@ -129,7 +132,6 @@ const AppHeader = () => {
           <AppHeaderDropdown />
         </CHeaderNav>
       </CContainer>
-      <CHeaderDivider />
       <CContainer fluid>
         <AppBreadcrumb />
       </CContainer>
diff --git a/src/components/AppSidebar.js b/src/components/AppSidebar.js
index d279a1101..4d0c60036 100644
--- a/src/components/AppSidebar.js
+++ b/src/components/AppSidebar.js
@@ -1,12 +1,20 @@
 import React from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 
-import { CSidebar, CSidebarBrand, CSidebarNav, CSidebarToggler } from '@coreui/react'
+import {
+  CCloseButton,
+  CSidebar,
+  CSidebarBrand,
+  CSidebarFooter,
+  CSidebarHeader,
+  CSidebarNav,
+  CSidebarToggler,
+} from '@coreui/react'
 import CIcon from '@coreui/icons-react'
 
 import { AppSidebarNav } from './AppSidebarNav'
 
-import { logoNegative } from 'src/assets/brand/logo-negative'
+import { logo } from 'src/assets/brand/logo'
 import { sygnet } from 'src/assets/brand/sygnet'
 
 import SimpleBar from 'simplebar-react'
@@ -22,6 +30,7 @@ const AppSidebar = () => {
 
   return (
     <CSidebar
+      className="sidebar-dark border-end"
       position="fixed"
       unfoldable={unfoldable}
       visible={sidebarShow}
@@ -29,19 +38,28 @@ const AppSidebar = () => {
         dispatch({ type: 'set', sidebarShow: visible })
       }}
     >
-      <CSidebarBrand className="d-none d-md-flex" to="/">
-        <CIcon className="sidebar-brand-full" icon={logoNegative} height={35} />
-        <CIcon className="sidebar-brand-narrow" icon={sygnet} height={35} />
-      </CSidebarBrand>
+      <CSidebarHeader className="border-bottom">
+        <CSidebarBrand to="/">
+          <CIcon customClassName="sidebar-brand-full" icon={logo} height={32} />
+          <CIcon customClassName="sidebar-brand-narrow" icon={sygnet} height={32} />
+        </CSidebarBrand>
+        <CCloseButton
+          className="d-md-none"
+          dark
+          onClick={() => dispatch({ type: 'set', sidebarShow: false })}
+        />
+      </CSidebarHeader>
+
       <CSidebarNav>
         <SimpleBar>
           <AppSidebarNav items={navigation} />
         </SimpleBar>
       </CSidebarNav>
-      <CSidebarToggler
-        className="d-none d-lg-flex"
-        onClick={() => dispatch({ type: 'set', sidebarUnfoldable: !unfoldable })}
-      />
+      <CSidebarFooter className="border-top d-none d-lg-flex">
+        <CSidebarToggler
+          onClick={() => dispatch({ type: 'set', sidebarUnfoldable: !unfoldable })}
+        />
+      </CSidebarFooter>
     </CSidebar>
   )
 }
diff --git a/src/components/AppSidebarNav.js b/src/components/AppSidebarNav.js
index 2063d9e73..57657aa22 100644
--- a/src/components/AppSidebarNav.js
+++ b/src/components/AppSidebarNav.js
@@ -6,10 +6,16 @@ import { CBadge } from '@coreui/react'
 
 export const AppSidebarNav = ({ items }) => {
   const location = useLocation()
-  const navLink = (name, icon, badge) => {
+  const navLink = (name, icon, badge, indent = false) => {
     return (
       <>
-        {icon && icon}
+        {icon
+          ? icon
+          : indent && (
+              <span className="nav-icon">
+                <span className="nav-icon-bullet"></span>
+              </span>
+            )}
         {name && name}
         {badge && (
           <CBadge color={badge.color} className="ms-auto">
@@ -20,7 +26,7 @@ export const AppSidebarNav = ({ items }) => {
     )
   }
 
-  const navItem = (item, index) => {
+  const navItem = (item, index, indent = false) => {
     const { component, name, badge, icon, ...rest } = item
     const Component = component
     return (
@@ -32,7 +38,7 @@ export const AppSidebarNav = ({ items }) => {
         key={index}
         {...rest}
       >
-        {navLink(name, icon, badge)}
+        {navLink(name, icon, badge, indent)}
       </Component>
     )
   }
@@ -48,7 +54,7 @@ export const AppSidebarNav = ({ items }) => {
         {...rest}
       >
         {item.items?.map((item, index) =>
-          item.items ? navGroup(item, index) : navItem(item, index),
+          item.items ? navGroup(item, index) : navItem(item, index, true),
         )}
       </Component>
     )
diff --git a/src/layout/DefaultLayout.js b/src/layout/DefaultLayout.js
index 0b6311774..a3e5b5d5d 100644
--- a/src/layout/DefaultLayout.js
+++ b/src/layout/DefaultLayout.js
@@ -5,7 +5,7 @@ const DefaultLayout = () => {
   return (
     <div>
       <AppSidebar />
-      <div className="wrapper d-flex flex-column min-vh-100 bg-body-tertiary">
+      <div className="wrapper d-flex flex-column min-vh-100">
         <AppHeader />
         <div className="body flex-grow-1 px-3">
           <AppContent />
diff --git a/src/scss/_custom.scss b/src/scss/_custom.scss
index 15d367af4..c2d61919d 100644
--- a/src/scss/_custom.scss
+++ b/src/scss/_custom.scss
@@ -1 +1,33 @@
 // Here you can add other styles
+.header > .container-fluid,
+.sidebar-header {
+  min-height: calc(4rem + 1px); // stylelint-disable-line function-disallowed-list
+}
+
+.sidebar-toggler {
+  @include ltr-rtl("margin-left", auto);
+}
+
+.sidebar-narrow,
+.sidebar-narrow-unfoldable:not(:hover) {
+  .sidebar-toggler {
+    @include ltr-rtl("margin-right", auto);
+  }
+}
+
+.header > .container-fluid + .container-fluid {
+  min-height: 3rem;
+}
+
+.header {
+  padding: 0;
+
+  .container-fluid {
+    padding-right: $spacer;
+    padding-left: $spacer;
+  }
+}
+
+.footer {
+  min-height: calc(3rem + 1px); // stylelint-disable-line function-disallowed-list
+}
\ No newline at end of file
diff --git a/src/scss/_layout.scss b/src/scss/_layout.scss
index 38bfe8c45..c71d8abf3 100644
--- a/src/scss/_layout.scss
+++ b/src/scss/_layout.scss
@@ -1,6 +1,18 @@
+body {
+  background-color: var(--cui-tertiary-bg);
+}
+
 .wrapper {
   width: 100%;
   @include ltr-rtl("padding-left", var(--cui-sidebar-occupy-start, 0));
   will-change: auto;
   @include transition(padding .15s);
 }
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    body {
+      background-color: var(--cui-dark-bg-subtle);
+    }
+  }
+}
\ No newline at end of file

From f4e94106394d92adb7e68a56eb00e5abd4d85743 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Fri, 15 Sep 2023 21:11:14 +0200
Subject: [PATCH 24/68] refactor: improve sidebar nav

---
 src/components/AppSidebarNav.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/AppSidebarNav.js b/src/components/AppSidebarNav.js
index 57657aa22..1cadaff25 100644
--- a/src/components/AppSidebarNav.js
+++ b/src/components/AppSidebarNav.js
@@ -43,10 +43,11 @@ export const AppSidebarNav = ({ items }) => {
     )
   }
   const navGroup = (item, index) => {
-    const { component, name, icon, to, ...rest } = item
+    const { component, name, icon, items, to, ...rest } = item
     const Component = component
     return (
       <Component
+        compact
         idx={String(index)}
         key={index}
         toggler={navLink(name, icon)}

From 48c1f16e4dab318c7b3f052a6200b5c1b4e66ea2 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Fri, 15 Sep 2023 21:14:40 +0200
Subject: [PATCH 25/68] chore: clean-up

---
 src/components/AppHeader.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/AppHeader.js b/src/components/AppHeader.js
index 98b19d2d0..3cecff456 100644
--- a/src/components/AppHeader.js
+++ b/src/components/AppHeader.js
@@ -8,7 +8,6 @@ import {
   CDropdownMenu,
   CDropdownToggle,
   CHeader,
-  CHeaderBrand,
   CHeaderNav,
   CHeaderToggler,
   CNavLink,

From d0cb2e776fbd3ffc473911923290e04ccfd9c288 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Sat, 16 Sep 2023 02:19:15 +0200
Subject: [PATCH 26/68] refactor: update footer color

---
 src/scss/_layout.scss | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/scss/_layout.scss b/src/scss/_layout.scss
index c71d8abf3..7e2ee4f81 100644
--- a/src/scss/_layout.scss
+++ b/src/scss/_layout.scss
@@ -14,5 +14,9 @@ body {
     body {
       background-color: var(--cui-dark-bg-subtle);
     }
+
+    .footer {
+      --cui-footer-bg: var(--cui-body-bg);
+    }
   }
-}
\ No newline at end of file
+}

From 350ec47ad9d06ee160397f3bbb997fb124a5a258 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Mon, 30 Oct 2023 15:51:56 +0100
Subject: [PATCH 27/68] refactor: update styles

---
 src/scss/_custom.scss | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/scss/_custom.scss b/src/scss/_custom.scss
index c2d61919d..1a2300563 100644
--- a/src/scss/_custom.scss
+++ b/src/scss/_custom.scss
@@ -1,9 +1,14 @@
-// Here you can add other styles
+// Custom styles for this theme
+
 .header > .container-fluid,
 .sidebar-header {
   min-height: calc(4rem + 1px); // stylelint-disable-line function-disallowed-list
 }
 
+.sidebar-brand-full {
+  margin-left: 3px;
+}
+
 .sidebar-toggler {
   @include ltr-rtl("margin-left", auto);
 }
@@ -30,4 +35,4 @@
 
 .footer {
   min-height: calc(3rem + 1px); // stylelint-disable-line function-disallowed-list
-}
\ No newline at end of file
+}

From a41187ba44f0dc7192a57e22f755c45200c90d26 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Mon, 30 Oct 2023 15:52:12 +0100
Subject: [PATCH 28/68] refactor: update colors

---
 src/views/widgets/WidgetsDropdown.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/views/widgets/WidgetsDropdown.js b/src/views/widgets/WidgetsDropdown.js
index ddab3d3be..c803c0a95 100644
--- a/src/views/widgets/WidgetsDropdown.js
+++ b/src/views/widgets/WidgetsDropdown.js
@@ -52,7 +52,7 @@ const WidgetsDropdown = () => {
           title="Users"
           action={
             <CDropdown alignment="end">
-              <CDropdownToggle color="transparent" caret={false} className="p-0">
+              <CDropdownToggle color="transparent" caret={false} className="text-white p-0">
                 <CIcon icon={cilOptions} />
               </CDropdownToggle>
               <CDropdownMenu>
@@ -140,7 +140,7 @@ const WidgetsDropdown = () => {
           title="Income"
           action={
             <CDropdown alignment="end">
-              <CDropdownToggle color="transparent" caret={false} className="p-0">
+              <CDropdownToggle color="transparent" caret={false} className="text-white p-0">
                 <CIcon icon={cilOptions} />
               </CDropdownToggle>
               <CDropdownMenu>
@@ -227,7 +227,7 @@ const WidgetsDropdown = () => {
           title="Conversion Rate"
           action={
             <CDropdown alignment="end">
-              <CDropdownToggle color="transparent" caret={false} className="p-0">
+              <CDropdownToggle color="transparent" caret={false} className="text-white p-0">
                 <CIcon icon={cilOptions} />
               </CDropdownToggle>
               <CDropdownMenu>
@@ -300,7 +300,7 @@ const WidgetsDropdown = () => {
           title="Sessions"
           action={
             <CDropdown alignment="end">
-              <CDropdownToggle color="transparent" caret={false} className="p-0">
+              <CDropdownToggle color="transparent" caret={false} className="text-white p-0">
                 <CIcon icon={cilOptions} />
               </CDropdownToggle>
               <CDropdownMenu>

From 620fb223f8e8ffefb71f85d73a6ede768f515c85 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Mon, 30 Oct 2023 16:17:14 +0100
Subject: [PATCH 29/68] chore: update dependencies and devDependencies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

@coreui/chartjs                      ^3.1.2  →  ^4.0.0-beta.0
@coreui/coreui               ^5.0.0-alpha.2  →  ^5.0.0-beta.0
@coreui/react                ^5.0.0-alpha.1  →  ^5.0.0-beta.0
@coreui/react-chartjs                ^2.1.3  →  ^5.0.0-beta.0
@testing-library/user-event         ^14.5.0  →        ^14.5.1
chart.js                             ^3.9.1  →         ^4.4.0
core-js                             ^3.32.2  →        ^3.33.1
react-redux                          ^8.1.2  →         ^8.1.3
react-router-dom                    ^6.16.0  →        ^6.17.0
sass                                ^1.67.0  →        ^1.69.5
web-vitals                           ^3.4.0  →         ^3.5.0
---
 package.json | 23 ++++++++++++-----------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index 5ae06afad..b959302ba 100644
--- a/package.json
+++ b/package.json
@@ -22,35 +22,36 @@
     "test:debug": "react-scripts --inspect-brk test --runInBand"
   },
   "dependencies": {
-    "@coreui/chartjs": "^3.1.2",
-    "@coreui/coreui": "^5.0.0-alpha.2",
+    "@coreui/chartjs": "^4.0.0-beta.0",
+    "@coreui/coreui": "^5.0.0-beta.0",
     "@coreui/icons": "^3.0.1",
     "@coreui/icons-react": "^2.2.1",
-    "@coreui/react": "^5.0.0-alpha.1",
-    "@coreui/react-chartjs": "^2.1.3",
+    "@coreui/react": "^5.0.0-beta.0",
+    "@coreui/react-chartjs": "^3.0.0-beta.0",
     "@coreui/utils": "^2.0.2",
-    "chart.js": "^3.9.1",
+    "@popperjs/core": "^2.11.8",
+    "chart.js": "^4.4.0",
     "classnames": "^2.3.2",
-    "core-js": "^3.32.2",
+    "core-js": "^3.33.1",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-app-polyfill": "^3.0.0",
     "react-dom": "^18.2.0",
-    "react-redux": "^8.1.2",
-    "react-router-dom": "^6.16.0",
+    "react-redux": "^8.1.3",
+    "react-router-dom": "^6.17.0",
     "redux": "4.2.1",
     "simplebar-react": "^3.2.4"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.5.0",
+    "@testing-library/user-event": "^14.5.1",
     "eslint-config-prettier": "^8.10.0",
     "eslint-plugin-prettier": "^4.2.1",
     "prettier": "2.8.8",
     "react-scripts": "5.0.1",
-    "sass": "^1.67.0",
-    "web-vitals": "^3.4.0"
+    "sass": "^1.69.5",
+    "web-vitals": "^3.5.0"
   },
   "engines": {
     "node": ">=10",

From 04ade81ea0fb3d8a0107aa4e0006e66f6a407152 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Mon, 30 Oct 2023 16:51:19 +0100
Subject: [PATCH 30/68] release: v5.0.0-beta.0

---
 package.json      | 2 +-
 public/index.html | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index b959302ba..4c8fcec1c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coreui/coreui-free-react-admin-template",
-  "version": "4.6.0-beta.0",
+  "version": "5.0.0-beta.0",
   "description": "CoreUI Free React Admin Template",
   "homepage": ".",
   "bugs": {
diff --git a/public/index.html b/public/index.html
index 5d2e83841..3fa4ca470 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <!--
 * CoreUI Free React.js Admin Template
-* @version v4.6.0-beta.0
+* @version v5.0.0-beta.0
 * @link https://coreui.io/product/free-react-admin-template/
 * Copyright (c) 2023 creativeLabs Łukasz Holeczek
 * Licensed under MIT (https://github.com/coreui/coreui-free-react-admin-template/blob/main/LICENSE)

From 8af3a4e2eb98c2c65ab924a0511aed7f8bfd235c Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Mon, 30 Oct 2023 18:17:44 +0100
Subject: [PATCH 31/68] refactor: update charts

---
 src/views/widgets/WidgetsDropdown.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/views/widgets/WidgetsDropdown.js b/src/views/widgets/WidgetsDropdown.js
index c803c0a95..a1050d850 100644
--- a/src/views/widgets/WidgetsDropdown.js
+++ b/src/views/widgets/WidgetsDropdown.js
@@ -89,6 +89,9 @@ const WidgetsDropdown = () => {
                 maintainAspectRatio: false,
                 scales: {
                   x: {
+                    border: {
+                      display: false,
+                    },
                     grid: {
                       display: false,
                       drawBorder: false,
@@ -177,6 +180,9 @@ const WidgetsDropdown = () => {
                 maintainAspectRatio: false,
                 scales: {
                   x: {
+                    border: {
+                      display: false,
+                    },
                     grid: {
                       display: false,
                       drawBorder: false,
@@ -362,6 +368,9 @@ const WidgetsDropdown = () => {
                     },
                   },
                   y: {
+                    border: {
+                      display: false,
+                    },
                     grid: {
                       display: false,
                       drawBorder: false,

From 30d931d1518338bbb2581f8b323e1c9d366e002a Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 7 Nov 2023 12:40:11 +0100
Subject: [PATCH 32/68] chore: update dependencies and devDependencies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

@coreui/coreui    ^5.0.0-beta.0  →  ^5.0.0-beta.1
@coreui/react     ^5.0.0-beta.0  →  ^5.0.0-beta.1
core-js                 ^3.33.1  →        ^3.33.2
react-router-dom        ^6.17.0  →        ^6.18.0
---
 package.json | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 4c8fcec1c..dae126b5e 100644
--- a/package.json
+++ b/package.json
@@ -23,22 +23,22 @@
   },
   "dependencies": {
     "@coreui/chartjs": "^4.0.0-beta.0",
-    "@coreui/coreui": "^5.0.0-beta.0",
+    "@coreui/coreui": "^5.0.0-beta.1",
     "@coreui/icons": "^3.0.1",
     "@coreui/icons-react": "^2.2.1",
-    "@coreui/react": "^5.0.0-beta.0",
+    "@coreui/react": "^5.0.0-beta.1",
     "@coreui/react-chartjs": "^3.0.0-beta.0",
     "@coreui/utils": "^2.0.2",
     "@popperjs/core": "^2.11.8",
     "chart.js": "^4.4.0",
     "classnames": "^2.3.2",
-    "core-js": "^3.33.1",
+    "core-js": "^3.33.2",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-app-polyfill": "^3.0.0",
     "react-dom": "^18.2.0",
     "react-redux": "^8.1.3",
-    "react-router-dom": "^6.17.0",
+    "react-router-dom": "^6.18.0",
     "redux": "4.2.1",
     "simplebar-react": "^3.2.4"
   },

From 956133b7a5ecdcf1efb930878523c3a279f5ad97 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 7 Nov 2023 12:57:58 +0100
Subject: [PATCH 33/68] refactor: improve styles

---
 src/components/AppHeader.js                | 2 +-
 src/scss/{_example.scss => _examples.scss} | 0
 src/scss/_variables.scss                   | 3 +++
 src/scss/style.scss                        | 7 +++----
 4 files changed, 7 insertions(+), 5 deletions(-)
 rename src/scss/{_example.scss => _examples.scss} (100%)

diff --git a/src/components/AppHeader.js b/src/components/AppHeader.js
index 3cecff456..4c5b96325 100644
--- a/src/components/AppHeader.js
+++ b/src/components/AppHeader.js
@@ -43,7 +43,7 @@ const AppHeader = () => {
   }, [])
 
   return (
-    <CHeader position="sticky" className="mb-4" ref={headerRef}>
+    <CHeader position="sticky" className="mb-4 p-0" ref={headerRef}>
       <CContainer className="border-bottom" fluid>
         <CHeaderToggler
           className="ps-1"
diff --git a/src/scss/_example.scss b/src/scss/_examples.scss
similarity index 100%
rename from src/scss/_example.scss
rename to src/scss/_examples.scss
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index 697b08ade..5ac5b7265 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -1,3 +1,6 @@
 // Variable overrides
 //
 // If you want to customize your project please add your variables below.
+
+$enable-rtl: true; /* stylelint-disable-line scss/dollar-variable-default */
+$enable-deprecation-messages: false; /* stylelint-disable-line scss/dollar-variable-default */
diff --git a/src/scss/style.scss b/src/scss/style.scss
index 02f199c40..de0c64a08 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -1,9 +1,6 @@
 // If you want to override variables do it here
 @import "variables";
 
-$enable-ltr: true;
-$enable-rtl: true;
-
 // Import CoreUI for React components library
 @import "@coreui/coreui/scss/coreui";
 
@@ -11,7 +8,9 @@ $enable-rtl: true;
 @import "@coreui/chartjs/scss/coreui-chartjs";
 
 @import "layout";
-@import "example";
+
+// Preview
+@import "examples";
 
 // If you want to add custom CSS you can put it here.
 @import "custom";

From 452725ad5fefd23b410762e64e7d2fe185778066 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 7 Nov 2023 13:12:13 +0100
Subject: [PATCH 34/68] refactor: improve layout

---
 src/components/AppBreadcrumb.js            |  2 +-
 src/components/AppContent.js               |  2 +-
 src/components/AppFooter.js                |  2 +-
 src/components/AppHeader.js                | 20 ++++++++++----------
 src/components/header/AppHeaderDropdown.js |  2 +-
 src/layout/DefaultLayout.js                |  2 +-
 6 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/components/AppBreadcrumb.js b/src/components/AppBreadcrumb.js
index 35be72c33..d37de8ce9 100644
--- a/src/components/AppBreadcrumb.js
+++ b/src/components/AppBreadcrumb.js
@@ -32,7 +32,7 @@ const AppBreadcrumb = () => {
   const breadcrumbs = getBreadcrumbs(currentLocation)
 
   return (
-    <CBreadcrumb className="m-0 ms-2">
+    <CBreadcrumb className="my-0">
       <CBreadcrumbItem href="/">Home</CBreadcrumbItem>
       {breadcrumbs.map((breadcrumb, index) => {
         return (
diff --git a/src/components/AppContent.js b/src/components/AppContent.js
index 7a03fe58b..b72cc6bd6 100644
--- a/src/components/AppContent.js
+++ b/src/components/AppContent.js
@@ -7,7 +7,7 @@ import routes from '../routes'
 
 const AppContent = () => {
   return (
-    <CContainer lg>
+    <CContainer class="px-4" lg>
       <Suspense fallback={<CSpinner color="primary" />}>
         <Routes>
           {routes.map((route, idx) => {
diff --git a/src/components/AppFooter.js b/src/components/AppFooter.js
index c853f5b87..2f26d8b6e 100644
--- a/src/components/AppFooter.js
+++ b/src/components/AppFooter.js
@@ -3,7 +3,7 @@ import { CFooter } from '@coreui/react'
 
 const AppFooter = () => {
   return (
-    <CFooter>
+    <CFooter className="px-4">
       <div>
         <a href="https://coreui.io" target="_blank" rel="noopener noreferrer">
           CoreUI
diff --git a/src/components/AppHeader.js b/src/components/AppHeader.js
index 4c5b96325..ac85c429b 100644
--- a/src/components/AppHeader.js
+++ b/src/components/AppHeader.js
@@ -44,10 +44,10 @@ const AppHeader = () => {
 
   return (
     <CHeader position="sticky" className="mb-4 p-0" ref={headerRef}>
-      <CContainer className="border-bottom" fluid>
+      <CContainer className="border-bottom px-4" fluid>
         <CHeaderToggler
-          className="ps-1"
           onClick={() => dispatch({ type: 'set', sidebarShow: !sidebarShow })}
+          style={{ marginInlineStart: '-14px' }}
         >
           <CIcon icon={cilMenu} size="lg" />
         </CHeaderToggler>
@@ -80,17 +80,19 @@ const AppHeader = () => {
               <CIcon icon={cilEnvelopeOpen} size="lg" />
             </CNavLink>
           </CNavItem>
-          <li className="nav-item py-2 py-lg-1">
+        </CHeaderNav>
+        <CHeaderNav>
+          <li className="nav-item py-1">
             <div className="vr h-100 mx-2 text-body text-opacity-75"></div>
           </li>
           <CDropdown variant="nav-item" placement="bottom-end">
             <CDropdownToggle caret={false}>
               {colorMode === 'dark' ? (
-                <CIcon icon={cilMoon} size="xl" />
+                <CIcon icon={cilMoon} size="lg" />
               ) : colorMode === 'auto' ? (
-                <CIcon icon={cilContrast} size="xl" />
+                <CIcon icon={cilContrast} size="lg" />
               ) : (
-                <CIcon icon={cilSun} size="xl" />
+                <CIcon icon={cilSun} size="lg" />
               )}
             </CDropdownToggle>
             <CDropdownMenu>
@@ -123,15 +125,13 @@ const AppHeader = () => {
               </CDropdownItem>
             </CDropdownMenu>
           </CDropdown>
-          <li className="nav-item py-2 py-lg-1">
+          <li className="nav-item py-1">
             <div className="vr h-100 mx-2 text-body text-opacity-75"></div>
           </li>
-        </CHeaderNav>
-        <CHeaderNav className="ms-3">
           <AppHeaderDropdown />
         </CHeaderNav>
       </CContainer>
-      <CContainer fluid>
+      <CContainer className="px-4" fluid>
         <AppBreadcrumb />
       </CContainer>
     </CHeader>
diff --git a/src/components/header/AppHeaderDropdown.js b/src/components/header/AppHeaderDropdown.js
index 4332d8e52..c377ff699 100644
--- a/src/components/header/AppHeaderDropdown.js
+++ b/src/components/header/AppHeaderDropdown.js
@@ -27,7 +27,7 @@ import avatar8 from './../../assets/images/avatars/8.jpg'
 const AppHeaderDropdown = () => {
   return (
     <CDropdown variant="nav-item">
-      <CDropdownToggle placement="bottom-end" className="py-0" caret={false}>
+      <CDropdownToggle placement="bottom-end" className="py-0 pe-0" caret={false}>
         <CAvatar src={avatar8} size="md" />
       </CDropdownToggle>
       <CDropdownMenu className="pt-0" placement="bottom-end">
diff --git a/src/layout/DefaultLayout.js b/src/layout/DefaultLayout.js
index a3e5b5d5d..19fbf225f 100644
--- a/src/layout/DefaultLayout.js
+++ b/src/layout/DefaultLayout.js
@@ -7,7 +7,7 @@ const DefaultLayout = () => {
       <AppSidebar />
       <div className="wrapper d-flex flex-column min-vh-100">
         <AppHeader />
-        <div className="body flex-grow-1 px-3">
+        <div className="body flex-grow-1">
           <AppContent />
         </div>
         <AppFooter />

From 88cb35c315fd08aaaaec422e385a215e8fd97bbc Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 7 Nov 2023 13:33:22 +0100
Subject: [PATCH 35/68] refactor: update examples

---
 src/components/DocsExample.js            |  2 +-
 src/scss/_examples.scss                  |  2 +-
 src/views/notifications/toasts/Toasts.js | 42 +++++++++++-------------
 src/views/widgets/WidgetsDropdown.js     |  2 +-
 4 files changed, 23 insertions(+), 25 deletions(-)

diff --git a/src/components/DocsExample.js b/src/components/DocsExample.js
index 5fb2a0569..2adedad49 100644
--- a/src/components/DocsExample.js
+++ b/src/components/DocsExample.js
@@ -11,7 +11,7 @@ const DocsExample = (props) => {
 
   return (
     <div className="example">
-      <CNav variant="tabs">
+      <CNav variant="underline-border">
         <CNavItem>
           <CNavLink href="#" active>
             <CIcon icon={cilMediaPlay} className="me-2" />
diff --git a/src/scss/_examples.scss b/src/scss/_examples.scss
index 2ce6eb7f4..b78106711 100644
--- a/src/scss/_examples.scss
+++ b/src/scss/_examples.scss
@@ -9,7 +9,7 @@
   }
 
   .tab-content {
-    background-color: rgba(var(--#{$prefix}tertiary-bg-rgb), var(--#{$prefix}bg-opacity, 1)) !important;
+    background-color: rgba(var(--#{$prefix}tertiary-bg-rgb), var(--#{$prefix}bg-opacity, 1));
   }
 
   & + p {
diff --git a/src/views/notifications/toasts/Toasts.js b/src/views/notifications/toasts/Toasts.js
index cfa5be232..f1b592c65 100644
--- a/src/views/notifications/toasts/Toasts.js
+++ b/src/views/notifications/toasts/Toasts.js
@@ -92,27 +92,25 @@ const Toasts = () => {
             <p className="text-body-secondary small">
               Toasts are slightly translucent to blend in with what&#39;s below them.
             </p>
-            <DocsExample href="components/toast#translucent">
-              <div className="bg-dark p-3">
-                <CToast title="CoreUI for React.js" autohide={false} visible={true}>
-                  <CToastHeader closeButton>
-                    <svg
-                      className="rounded me-2"
-                      width="20"
-                      height="20"
-                      xmlns="http://www.w3.org/2000/svg"
-                      preserveAspectRatio="xMidYMid slice"
-                      focusable="false"
-                      role="img"
-                    >
-                      <rect width="100%" height="100%" fill="#007aff"></rect>
-                    </svg>
-                    <strong className="me-auto">CoreUI for React.js</strong>
-                    <small>7 min ago</small>
-                  </CToastHeader>
-                  <CToastBody>Hello, world! This is a toast message.</CToastBody>
-                </CToast>
-              </div>
+            <DocsExample href="components/toast#translucent" tabContentClassName="bg-dark">
+              <CToast title="CoreUI for React.js" autohide={false} visible={true}>
+                <CToastHeader closeButton>
+                  <svg
+                    className="rounded me-2"
+                    width="20"
+                    height="20"
+                    xmlns="http://www.w3.org/2000/svg"
+                    preserveAspectRatio="xMidYMid slice"
+                    focusable="false"
+                    role="img"
+                  >
+                    <rect width="100%" height="100%" fill="#007aff"></rect>
+                  </svg>
+                  <strong className="me-auto">CoreUI for React.js</strong>
+                  <small>7 min ago</small>
+                </CToastHeader>
+                <CToastBody>Hello, world! This is a toast message.</CToastBody>
+              </CToast>
             </DocsExample>
           </CCardBody>
         </CCard>
@@ -128,7 +126,7 @@ const Toasts = () => {
               some spacing.
             </p>
             <DocsExample href="components/toast#stacking">
-              <CToaster>
+              <CToaster className="position-static">
                 <CToast title="CoreUI for React.js" autohide={false} visible={true}>
                   <CToastHeader closeButton>
                     <svg
diff --git a/src/views/widgets/WidgetsDropdown.js b/src/views/widgets/WidgetsDropdown.js
index a1050d850..ed4174b23 100644
--- a/src/views/widgets/WidgetsDropdown.js
+++ b/src/views/widgets/WidgetsDropdown.js
@@ -224,7 +224,7 @@ const WidgetsDropdown = () => {
           color="warning"
           value={
             <>
-              2.49{' '}
+              2.49%{' '}
               <span className="fs-6 fw-normal">
                 (84.7% <CIcon icon={cilArrowTop} />)
               </span>

From b29e61db1e2858422981ab11fb097ed789513eba Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 7 Nov 2023 13:52:45 +0100
Subject: [PATCH 36/68] chore: clean-up

---
 README.md    | 5 +----
 migration.md | 3 ---
 2 files changed, 1 insertion(+), 7 deletions(-)
 delete mode 100644 migration.md

diff --git a/README.md b/README.md
index 1185d8047..6b05dec94 100644
--- a/README.md
+++ b/README.md
@@ -189,7 +189,4 @@ Thanks to all the backers and sponsors! Support this project by [becoming a back
 
 copyright 2023 creativeLabs Łukasz Holeczek.   
 
- 
-Code released under [the MIT license](https://github.com/coreui/coreui-free-react-admin-template/blob/master/LICENSE).
-There is only one limitation you can't can’t re-distribute the CoreUI as stock. You can’t do this if you modify the CoreUI. In past we faced some problems with persons who tried to sell CoreUI based templates.
-
+Code released under [the MIT license](https://github.com/coreui/coreui-free-react-admin-template/blob/master/LICENSE).
\ No newline at end of file
diff --git a/migration.md b/migration.md
deleted file mode 100644
index 11a3528fe..000000000
--- a/migration.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Migration from version 3
-
-https://coreui.io/react/docs/4.0/migration/v4/

From 4d798c2e09365fc6e7ec60940ae5505a92547b96 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 7 Nov 2023 15:12:45 +0100
Subject: [PATCH 37/68] docs: update link to license

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 6b05dec94..217ec8910 100644
--- a/README.md
+++ b/README.md
@@ -189,4 +189,4 @@ Thanks to all the backers and sponsors! Support this project by [becoming a back
 
 copyright 2023 creativeLabs Łukasz Holeczek.   
 
-Code released under [the MIT license](https://github.com/coreui/coreui-free-react-admin-template/blob/master/LICENSE).
\ No newline at end of file
+Code released under [the MIT license](https://github.com/coreui/coreui-free-react-admin-template/blob/main/LICENSE).
\ No newline at end of file

From a97e32633f602aa79a0a72f4d8683850e29dc494 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 7 Nov 2023 18:13:44 +0100
Subject: [PATCH 38/68] refactor: update examples

---
 src/scss/_custom.scss                    | 17 ++++-------------
 src/scss/_examples.scss                  |  3 +++
 src/views/base/carousels/Carousels.js    |  2 +-
 src/views/base/tables/Tables.js          |  2 +-
 src/views/buttons/buttons/Buttons.js     |  2 +-
 src/views/notifications/alerts/Alerts.js |  4 +---
 src/views/notifications/toasts/Toasts.js | 22 +++++++++++-----------
 7 files changed, 22 insertions(+), 30 deletions(-)

diff --git a/src/scss/_custom.scss b/src/scss/_custom.scss
index 1a2300563..4301405f0 100644
--- a/src/scss/_custom.scss
+++ b/src/scss/_custom.scss
@@ -5,6 +5,10 @@
   min-height: calc(4rem + 1px); // stylelint-disable-line function-disallowed-list
 }
 
+.header > .container-fluid + .container-fluid {
+  min-height: 3rem;
+}
+
 .sidebar-brand-full {
   margin-left: 3px;
 }
@@ -20,19 +24,6 @@
   }
 }
 
-.header > .container-fluid + .container-fluid {
-  min-height: 3rem;
-}
-
-.header {
-  padding: 0;
-
-  .container-fluid {
-    padding-right: $spacer;
-    padding-left: $spacer;
-  }
-}
-
 .footer {
   min-height: calc(3rem + 1px); // stylelint-disable-line function-disallowed-list
 }
diff --git a/src/scss/_examples.scss b/src/scss/_examples.scss
index b78106711..f1e6ed856 100644
--- a/src/scss/_examples.scss
+++ b/src/scss/_examples.scss
@@ -51,6 +51,9 @@
     }
 
     // Buttons
+    .col > .btn,
+    .col-auto > .btn,
+    .d-md-block > .btn,
     > .btn,
     > .btn-group {
       margin: .25rem .125rem;
diff --git a/src/views/base/carousels/Carousels.js b/src/views/base/carousels/Carousels.js
index d3eac83a7..7980fd6c8 100644
--- a/src/views/base/carousels/Carousels.js
+++ b/src/views/base/carousels/Carousels.js
@@ -107,7 +107,7 @@ const Carousels = () => {
               You can add captions to slides with the <code>&lt;CCarouselCaption&gt;</code> element
               within any <code>&lt;CCarouselItem&gt;</code>. They can be immediately hidden on
               smaller viewports, as shown below, with optional{' '}
-              <a href="https://coreui.io/4.0/utilities/display">display utilities</a>. We hide them
+              <a href="https://coreui.io//utilities/display">display utilities</a>. We hide them
               with <code>.d-none</code> and draw them back on medium-sized devices with{' '}
               <code>.d-md-block</code>.
             </p>
diff --git a/src/views/base/tables/Tables.js b/src/views/base/tables/Tables.js
index 781af6eba..27e312da6 100644
--- a/src/views/base/tables/Tables.js
+++ b/src/views/base/tables/Tables.js
@@ -463,7 +463,7 @@ const Tables = () => {
               </CTable>
             </DocsExample>
             <p className="text-body-secondary small">
-              <a href="https://coreui.io/docs/4.0/utilities/borders#border-color">
+              <a href="https://coreui.io/docs/utilities/borders#border-color">
                 Border color utilities
               </a>{' '}
               can be added to change colors:
diff --git a/src/views/buttons/buttons/Buttons.js b/src/views/buttons/buttons/Buttons.js
index 8f593a3b7..d22055004 100644
--- a/src/views/buttons/buttons/Buttons.js
+++ b/src/views/buttons/buttons/Buttons.js
@@ -60,7 +60,7 @@ const Buttons = () => {
           </CCardHeader>
           <CCardBody>
             <p className="text-body-secondary small">
-              You can combine button with our <a href="https://icons.coreui.io/">CoreUI Icons</a>.
+              You can combine button with our <a href="https://coreui.io/icons/">CoreUI Icons</a>.
             </p>
             <DocsExample href="components/buttons">
               {['normal', 'active', 'disabled'].map((state, index) => (
diff --git a/src/views/notifications/alerts/Alerts.js b/src/views/notifications/alerts/Alerts.js
index c073fc76c..99f43629b 100644
--- a/src/views/notifications/alerts/Alerts.js
+++ b/src/views/notifications/alerts/Alerts.js
@@ -24,9 +24,7 @@ const Alerts = () => {
               React Alert is prepared for any length of text, as well as an optional close button.
               For a styling, use one of the <strong>required</strong> contextual <code>color</code>{' '}
               props (e.g., <code>primary</code>). For inline dismissal, use the{' '}
-              <a href="https://coreui.io/react/docs/4.0/components/alert#dismissing">
-                dismissing prop
-              </a>
+              <a href="https://coreui.io/react/docs/components/alert#dismissing">dismissing prop</a>
               .
             </p>
             <DocsExample href="components/alert">
diff --git a/src/views/notifications/toasts/Toasts.js b/src/views/notifications/toasts/Toasts.js
index f1b592c65..9631a0e83 100644
--- a/src/views/notifications/toasts/Toasts.js
+++ b/src/views/notifications/toasts/Toasts.js
@@ -176,12 +176,12 @@ const Toasts = () => {
           <CCardBody>
             <p className="text-body-secondary small">
               Customize your toasts by removing sub-components, tweaking them with{' '}
-              <a href="https://coreui.io/docs/4.0/utilities/api">utilities</a>, or by adding your
-              own markup. Here we&#39;ve created a simpler toast by removing the default{' '}
+              <a href="https://coreui.io/docs/utilities/api">utilities</a>, or by adding your own
+              markup. Here we&#39;ve created a simpler toast by removing the default{' '}
               <code>&lt;CToastHeader&gt;</code>, adding a custom hide icon from{' '}
-              <a href="https://icons.coreui.io">CoreUI Icons</a>, and using some{' '}
-              <a href="https://coreui.io/docs/4.0/utilities/flex">flexbox utilities</a> to adjust
-              the layout.
+              <a href="https://coreui.io/icons/">CoreUI Icons</a>, and using some{' '}
+              <a href="https://coreui.io/docs/utilities/flex">flexbox utilities</a> to adjust the
+              layout.
             </p>
             <DocsExample href="components/toast#custom-content">
               <CToast autohide={false} className="align-items-center" visible={true}>
@@ -220,12 +220,12 @@ const Toasts = () => {
           <CCardBody>
             <p className="text-body-secondary small">
               Building on the above example, you can create different toast color schemes with our{' '}
-              <a href="https://coreui.io/docs/4.0/utilities/colors">color</a> and{' '}
-              <a href="https://coreui.io/docs/4.0//utilities/background">background</a> utilities.
-              Here we&#39;ve set <code>color=&#34;primary&#34;</code> and added{' '}
-              <code>.text-white</code> class to the <code>&lt;Ctoast&gt;</code>, and then set{' '}
-              <code>white</code> property to our close button. For a crisp edge, we remove the
-              default border with <code>.border-0</code>.
+              <a href="https://coreui.io/docs/utilities/colors">color</a> and{' '}
+              <a href="https://coreui.io/docs/utilities/background">background</a> utilities. Here
+              we&#39;ve set <code>color=&#34;primary&#34;</code> and added <code>.text-white</code>{' '}
+              class to the <code>&lt;Ctoast&gt;</code>, and then set <code>white</code> property to
+              our close button. For a crisp edge, we remove the default border with{' '}
+              <code>.border-0</code>.
             </p>
             <DocsExample href="components/toast#color-schemes">
               <CToast

From acdfb926c1786167061168687865d606a33cf1c0 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 7 Nov 2023 20:50:41 +0100
Subject: [PATCH 39/68] docs: update README

---
 README.md | 54 +++++++++++++++++-------------------------------------
 1 file changed, 17 insertions(+), 37 deletions(-)

diff --git a/README.md b/README.md
index 217ec8910..fdbf2749b 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,9 @@
+# CoreUI Free React Admin Template [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social&logo=twitter)](https://twitter.com/intent/tweet?text=CoreUI%20-%20Free%React%204%20Admin%20Template%20&url=https://coreui.io&hashtags=bootstrap,admin,template,dashboard,panel,free,angular,react,vue)
+
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square)](https://opensource.org/licenses/MIT)
 [![@coreui coreui](https://img.shields.io/badge/@coreui%20-coreui-lightgrey.svg?style=flat-square)](https://github.com/coreui/coreui)
 [![npm package][npm-coreui-badge]][npm-coreui]
-[![NPM downloads][npm-coreui-download]][npm-coreui]  
+[![NPM downloads][npm-coreui-download]][npm-coreui]
 [![@coreui react](https://img.shields.io/badge/@coreui%20-react-lightgrey.svg?style=flat-square)](https://github.com/coreui/react)
 [![npm package][npm-coreui-react-badge]][npm-coreui-react]
 [![NPM downloads][npm-coreui-react-download]][npm-coreui-react]  
@@ -13,7 +16,7 @@
 [npm-coreui-react-download]: https://img.shields.io/npm/dm/@coreui/react.svg?style=flat-square
 [npm]: https://www.npmjs.com/package/@coreui/react
 
-# CoreUI Free React Admin Template
+[![Bootstrap Admin Template](https://assets.coreui.io/products/coreui-free-bootstrap-admin-template-light-dark.webp)](https://coreui.io/product/free-react-admin-template/)
 
 CoreUI is meant to be the UX game changer. Pure & transparent code is devoid of redundant components, so the app is light enough to offer ultimate user experience. This means mobile devices also, where the navigation is just as easy and intuitive as on a desktop or laptop. The CoreUI Layout API lets you customize your project for almost any device – be it Mobile, Web or WebApp – CoreUI covers them all!
 
@@ -21,6 +24,7 @@ CoreUI is meant to be the UX game changer. Pure & transparent code is devoid of
 
 * [Versions](#versions)
 * [CoreUI Pro](#coreui-pro)
+* [CoreUI PRO React Admin Templates](#coreui-pro-react-admin-templates)
 * [Quick Start](#quick-start)
 * [Installation](#installation)
 * [Basic usage](#basic-usage)
@@ -46,6 +50,16 @@ CoreUI is meant to be the UX game changer. Pure & transparent code is devoid of
 * 💪  [CoreUI Pro React Admin Template](https://coreui.io/product/react-dashboard-template/)
 * 💪  [CoreUI Pro Vue Admin Template](https://coreui.io/product/vue-dashboard-template/)
 
+## CoreUI PRO React Admin Templates
+
+| Default Theme | Light Theme |
+| --- | --- |
+| [![CoreUI Pro React Admin Template](https://coreui.io/images/templates/coreui_pro_default_light_dark.webp)](https://coreui.io/product/react-dashboard-template/?theme=default) | [![CoreUI Pro React Admin Template](https://coreui.io/images/templates/coreui_pro_light_light_dark.webp)](https://coreui.io/product/react-dashboard-template/?theme=light)| [![CoreUI Pro React Admin Template](https://coreui.io/images/templates/coreui_pro_dark_1440.webp)](https://coreui.io/product/react-dashboard-template/?theme=dark)
+
+| Default Theme v3 | Light Theme v3 |
+| --- | --- |
+| [![CoreUI Pro React Admin Template](https://coreui.io/images/templates/coreui_pro_default_v3_light_dark.webp)](https://coreui.io/product/react-dashboard-template/?theme=default-v3) | [![CoreUI Pro React Admin Template](https://coreui.io/images/templates/coreui_pro_light_v3_light_dark.webp)](https://coreui.io/product/react-dashboard-template/?theme=light)|
+
 ## Quick Start
 
 - [Download the latest release](https://github.com/coreui/coreui-free-react-admin-template/archive/refs/heads/main.zip)
@@ -149,41 +163,7 @@ Get updates on CoreUI's development and chat with the project maintainers and co
 
 ## Support CoreUI Development
 
-CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing. You can support development by buying the [CoreUI PRO](https://coreui.io/pricing/) or by becoming a sponsor via [Open Collective](https://opencollective.com/coreui/).
-
-<!--- StartOpenCollectiveBackers -->
-
-### Platinum Sponsors
-
-Support this project by [becoming a Platinum Sponsor](https://opencollective.com/coreui/contribute/platinum-sponsor-40959/). A large company logo will be added here with a link to your website.
-
-<a href="https://opencollective.com/coreui/contribute/platinum-sponsor-40959/checkout"><img src="https://opencollective.com/coreui/tiers/platinum-sponsor/0/avatar.svg?avatarHeight=100"></a>
-
-### Gold Sponsors
-
-Support this project by [becoming a Gold Sponsor](https://opencollective.com/coreui/contribute/gold-sponsor-40960/). A big company logo will be added here with a link to your website.
-
-<a href="https://opencollective.com/coreui/contribute/gold-sponsor-40960/checkout"><img src="https://opencollective.com/coreui/tiers/gold-sponsor/0/avatar.svg?avatarHeight=100"></a> 
-
-### Silver Sponsors
-
-Support this project by [becoming a Silver Sponsor](https://opencollective.com/coreui/contribute/silver-sponsor-40967/). A medium company logo will be added here with a link to your website.
-
-<a href="https://opencollective.com/coreui/contribute/silver-sponsor-40967/checkout"><img src="https://opencollective.com/coreui/tiers/gold-sponsor/0/avatar.svg?avatarHeight=100"></a>
-
-### Bronze Sponsors
-
-Support this project by [becoming a Bronze Sponsor](https://opencollective.com/coreui/contribute/bronze-sponsor-40966/). The company avatar will show up here with a link to your OpenCollective Profile.
-
-<a href="https://opencollective.com/coreui/contribute/bronze-sponsor-40966/checkout"><img src="https://opencollective.com/coreui/tiers/bronze-sponsor/0/avatar.svg?avatarHeight=100"></a> 
-
-### Backers
-
-Thanks to all the backers and sponsors! Support this project by [becoming a backer](https://opencollective.com/coreui/contribute/backer-40965/).
-
-<a href="https://opencollective.com/coreui/contribute/backer-40965/checkout" target="_blank" rel="noopener"><img src="https://opencollective.com/coreui/backers.svg?width=890"></a>
-
-<!--- EndOpenCollectiveBackers -->
+CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing. You can support development by buying the [CoreUI PRO](https://coreui.io/pricing/?framework=bootstrap&src=github-coreui-free-react-admin-template) or by becoming a sponsor via [Open Collective](https://opencollective.com/coreui/).
 
 ## Copyright and License
 

From c43863789242955b13cea7fff11c0d682f6cd485 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Tue, 7 Nov 2023 21:17:12 +0100
Subject: [PATCH 40/68] docs: update README

---
 README.md | 31 +++++++++++++++++++------------
 1 file changed, 19 insertions(+), 12 deletions(-)

diff --git a/README.md b/README.md
index fdbf2749b..1df83973f 100644
--- a/README.md
+++ b/README.md
@@ -23,7 +23,7 @@ CoreUI is meant to be the UX game changer. Pure & transparent code is devoid of
 ## Table of Contents
 
 * [Versions](#versions)
-* [CoreUI Pro](#coreui-pro)
+* [CoreUI PRO](#coreui-pro)
 * [CoreUI PRO React Admin Templates](#coreui-pro-react-admin-templates)
 * [Quick Start](#quick-start)
 * [Installation](#installation)
@@ -43,22 +43,22 @@ CoreUI is meant to be the UX game changer. Pure & transparent code is devoid of
 * [CoreUI Free React.js Admin Template](https://github.com/coreui/coreui-free-react-admin-template)
 * [CoreUI Free Vue.js Admin Template](https://github.com/coreui/coreui-free-vue-admin-template)
 
-## CoreUI Pro
+## CoreUI PRO
 
-* 💪  [CoreUI Pro Angular Admin Template](https://coreui.io/product/angular-dashboard-template/)
-* 💪  [CoreUI Pro Bootstrap Admin Template](https://coreui.io/product/bootstrap-dashboard-template/)
-* 💪  [CoreUI Pro React Admin Template](https://coreui.io/product/react-dashboard-template/)
-* 💪  [CoreUI Pro Vue Admin Template](https://coreui.io/product/vue-dashboard-template/)
+* 💪  [CoreUI PRO Angular Admin Template](https://coreui.io/product/angular-dashboard-template/)
+* 💪  [CoreUI PRO Bootstrap Admin Template](https://coreui.io/product/bootstrap-dashboard-template/)
+* 💪  [CoreUI PRO React Admin Template](https://coreui.io/product/react-dashboard-template/)
+* 💪  [CoreUI PRO Vue Admin Template](https://coreui.io/product/vue-dashboard-template/)
 
 ## CoreUI PRO React Admin Templates
 
 | Default Theme | Light Theme |
 | --- | --- |
-| [![CoreUI Pro React Admin Template](https://coreui.io/images/templates/coreui_pro_default_light_dark.webp)](https://coreui.io/product/react-dashboard-template/?theme=default) | [![CoreUI Pro React Admin Template](https://coreui.io/images/templates/coreui_pro_light_light_dark.webp)](https://coreui.io/product/react-dashboard-template/?theme=light)| [![CoreUI Pro React Admin Template](https://coreui.io/images/templates/coreui_pro_dark_1440.webp)](https://coreui.io/product/react-dashboard-template/?theme=dark)
+| [![CoreUI PRO React Admin Template](https://coreui.io/images/templates/coreui_pro_default_light_dark.webp)](https://coreui.io/product/react-dashboard-template/?theme=default) | [![CoreUI PRO React Admin Template](https://coreui.io/images/templates/coreui_pro_light_light_dark.webp)](https://coreui.io/product/react-dashboard-template/?theme=light)|
 
 | Default Theme v3 | Light Theme v3 |
 | --- | --- |
-| [![CoreUI Pro React Admin Template](https://coreui.io/images/templates/coreui_pro_default_v3_light_dark.webp)](https://coreui.io/product/react-dashboard-template/?theme=default-v3) | [![CoreUI Pro React Admin Template](https://coreui.io/images/templates/coreui_pro_light_v3_light_dark.webp)](https://coreui.io/product/react-dashboard-template/?theme=light)|
+| [![CoreUI PRO React Admin Template](https://coreui.io/images/templates/coreui_pro_default_v3_light_dark.webp)](https://coreui.io/product/react-dashboard-template/?theme=default-v3) | [![CoreUI PRO React Admin Template](https://coreui.io/images/templates/coreui_pro_light_v3_light_dark.webp)](https://coreui.io/product/react-dashboard-template/?theme=light)|
 
 ## Quick Start
 
@@ -147,12 +147,19 @@ See [the Releases section of our project](https://github.com/coreui/coreui-free-
 ## Creators
 
 **Łukasz Holeczek**
+
 * <https://twitter.com/lukaszholeczek>
 * <https://github.com/mrholek>
-* <https://github.com/coreui>
 
-**CoreUI team**
-* https://github.com/orgs/coreui/people
+**Andrzej Kopański**
+
+* <https://github.com/xidedix>
+
+**CoreUI Team**
+
+* <https://twitter.com/core_ui>
+* <https://github.com/coreui>
+* <https://github.com/orgs/coreui/people>
 
 ## Community
 
@@ -163,7 +170,7 @@ Get updates on CoreUI's development and chat with the project maintainers and co
 
 ## Support CoreUI Development
 
-CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing. You can support development by buying the [CoreUI PRO](https://coreui.io/pricing/?framework=bootstrap&src=github-coreui-free-react-admin-template) or by becoming a sponsor via [Open Collective](https://opencollective.com/coreui/).
+CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing. You can support development by buying the [CoreUI PRO](https://coreui.io/pricing/?framework=react&src=github-coreui-free-react-admin-template) or by becoming a sponsor via [Open Collective](https://opencollective.com/coreui/).
 
 ## Copyright and License
 

From 2539b121da93109cf5cfb6e07eead012264f3a81 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Wed, 8 Nov 2023 13:20:11 +0100
Subject: [PATCH 41/68] chore: update dependencies and devDependencies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

@coreui/chartjs         ^4.0.0-beta.0  →  ^4.0.0-beta.1
@coreui/coreui          ^5.0.0-beta.1  →  ^5.0.0-beta.2
@testing-library/react        ^14.0.0  →        ^14.1.0
---
 package.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index dae126b5e..98a050226 100644
--- a/package.json
+++ b/package.json
@@ -22,8 +22,8 @@
     "test:debug": "react-scripts --inspect-brk test --runInBand"
   },
   "dependencies": {
-    "@coreui/chartjs": "^4.0.0-beta.0",
-    "@coreui/coreui": "^5.0.0-beta.1",
+    "@coreui/chartjs": "^4.0.0-beta.1",
+    "@coreui/coreui": "^5.0.0-beta.2",
     "@coreui/icons": "^3.0.1",
     "@coreui/icons-react": "^2.2.1",
     "@coreui/react": "^5.0.0-beta.1",
@@ -44,7 +44,7 @@
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^14.0.0",
+    "@testing-library/react": "^14.1.0",
     "@testing-library/user-event": "^14.5.1",
     "eslint-config-prettier": "^8.10.0",
     "eslint-plugin-prettier": "^4.2.1",

From 1328195e02a868b350a42679e46664e0e9427e07 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Fri, 10 Nov 2023 18:33:03 +0100
Subject: [PATCH 42/68] refactor: update examples

---
 src/components/AppSidebar.js                |  3 +-
 src/views/base/cards/Cards.js               | 56 ++++++++++++-----
 src/views/base/collapses/Collapses.js       | 12 +++-
 src/views/base/jumbotrons/Jumbotrons.js     |  4 +-
 src/views/base/placeholders/Placeholders.js |  4 +-
 src/views/base/spinners/Spinners.js         |  8 +--
 src/views/forms/form-control/FormControl.js |  2 +-
 src/views/forms/layout/Layout.js            | 20 +++++--
 src/views/notifications/modals/Modals.js    | 66 +++++++++++++++------
 src/views/notifications/toasts/Toasts.js    |  4 +-
 10 files changed, 131 insertions(+), 48 deletions(-)

diff --git a/src/components/AppSidebar.js b/src/components/AppSidebar.js
index 4d0c60036..156ae8014 100644
--- a/src/components/AppSidebar.js
+++ b/src/components/AppSidebar.js
@@ -30,7 +30,8 @@ const AppSidebar = () => {
 
   return (
     <CSidebar
-      className="sidebar-dark border-end"
+      className="border-end"
+      colorScheme="dark"
       position="fixed"
       unfoldable={unfoldable}
       visible={sidebarShow}
diff --git a/src/views/base/cards/Cards.js b/src/views/base/cards/Cards.js
index c9a8ddb40..bb89cc03c 100644
--- a/src/views/base/cards/Cards.js
+++ b/src/views/base/cards/Cards.js
@@ -54,7 +54,9 @@ const Cards = () => {
                     Some quick example text to build on the card title and make up the bulk of the
                     card&#39;s content.
                   </CCardText>
-                  <CButton href="#">Go somewhere</CButton>
+                  <CButton color="primary" href="#">
+                    Go somewhere
+                  </CButton>
                 </CCardBody>
               </CCard>
             </DocsExample>
@@ -235,7 +237,9 @@ const Cards = () => {
                   <CCardText>
                     With supporting text below as a natural lead-in to additional content.
                   </CCardText>
-                  <CButton href="#">Go somewhere</CButton>
+                  <CButton color="primary" href="#">
+                    Go somewhere
+                  </CButton>
                 </CCardBody>
               </CCard>
             </DocsExample>
@@ -250,7 +254,9 @@ const Cards = () => {
                   <CCardText>
                     With supporting text below as a natural lead-in to additional content.
                   </CCardText>
-                  <CButton href="#">Go somewhere</CButton>
+                  <CButton color="primary" href="#">
+                    Go somewhere
+                  </CButton>
                 </CCardBody>
               </CCard>
             </DocsExample>
@@ -278,7 +284,9 @@ const Cards = () => {
                   <CCardText>
                     With supporting text below as a natural lead-in to additional content.
                   </CCardText>
-                  <CButton href="#">Go somewhere</CButton>
+                  <CButton color="primary" href="#">
+                    Go somewhere
+                  </CButton>
                 </CCardBody>
                 <CCardFooter className="text-body-secondary">2 days ago</CCardFooter>
               </CCard>
@@ -310,7 +318,9 @@ const Cards = () => {
                       <CCardText>
                         With supporting text below as a natural lead-in to additional content.
                       </CCardText>
-                      <CButton href="#">Go somewhere</CButton>
+                      <CButton color="primary" href="#">
+                        Go somewhere
+                      </CButton>
                     </CCardBody>
                   </CCard>
                 </CCol>
@@ -321,7 +331,9 @@ const Cards = () => {
                       <CCardText>
                         With supporting text below as a natural lead-in to additional content.
                       </CCardText>
-                      <CButton href="#">Go somewhere</CButton>
+                      <CButton color="primary" href="#">
+                        Go somewhere
+                      </CButton>
                     </CCardBody>
                   </CCard>
                 </CCol>
@@ -340,7 +352,9 @@ const Cards = () => {
                   <CCardText>
                     With supporting text below as a natural lead-in to additional content.
                   </CCardText>
-                  <CButton href="#">Go somewhere</CButton>
+                  <CButton color="primary" href="#">
+                    Go somewhere
+                  </CButton>
                 </CCardBody>
               </CCard>
               <CCard className="w-50">
@@ -349,7 +363,9 @@ const Cards = () => {
                   <CCardText>
                     With supporting text below as a natural lead-in to additional content.
                   </CCardText>
-                  <CButton href="#">Go somewhere</CButton>
+                  <CButton color="primary" href="#">
+                    Go somewhere
+                  </CButton>
                 </CCardBody>
               </CCard>
             </DocsExample>
@@ -364,7 +380,9 @@ const Cards = () => {
                   <CCardText>
                     With supporting text below as a natural lead-in to additional content.
                   </CCardText>
-                  <CButton href="#">Go somewhere</CButton>
+                  <CButton color="primary" href="#">
+                    Go somewhere
+                  </CButton>
                 </CCardBody>
               </CCard>
             </DocsExample>
@@ -390,7 +408,9 @@ const Cards = () => {
                   <CCardText>
                     With supporting text below as a natural lead-in to additional content.
                   </CCardText>
-                  <CButton href="#">Go somewhere</CButton>
+                  <CButton color="primary" href="#">
+                    Go somewhere
+                  </CButton>
                 </CCardBody>
               </CCard>
               <CCard className="text-center" style={{ width: '18rem' }}>
@@ -399,7 +419,9 @@ const Cards = () => {
                   <CCardText>
                     With supporting text below as a natural lead-in to additional content.
                   </CCardText>
-                  <CButton href="#">Go somewhere</CButton>
+                  <CButton color="primary" href="#">
+                    Go somewhere
+                  </CButton>
                 </CCardBody>
               </CCard>
               <CCard className="text-end" style={{ width: '18rem' }}>
@@ -408,7 +430,9 @@ const Cards = () => {
                   <CCardText>
                     With supporting text below as a natural lead-in to additional content.
                   </CCardText>
-                  <CButton href="#">Go somewhere</CButton>
+                  <CButton color="primary" href="#">
+                    Go somewhere
+                  </CButton>
                 </CCardBody>
               </CCard>
             </DocsExample>
@@ -449,7 +473,9 @@ const Cards = () => {
                   <CCardText>
                     With supporting text below as a natural lead-in to additional content.
                   </CCardText>
-                  <CButton href="#">Go somewhere</CButton>
+                  <CButton color="primary" href="#">
+                    Go somewhere
+                  </CButton>
                 </CCardBody>
               </CCard>
             </DocsExample>
@@ -477,7 +503,9 @@ const Cards = () => {
                   <CCardText>
                     With supporting text below as a natural lead-in to additional content.
                   </CCardText>
-                  <CButton href="#">Go somewhere</CButton>
+                  <CButton color="primary" href="#">
+                    Go somewhere
+                  </CButton>
                 </CCardBody>
               </CCard>
             </DocsExample>
diff --git a/src/views/base/collapses/Collapses.js b/src/views/base/collapses/Collapses.js
index 6f98a69cd..218518933 100644
--- a/src/views/base/collapses/Collapses.js
+++ b/src/views/base/collapses/Collapses.js
@@ -27,7 +27,9 @@ const Collapses = () => {
               >
                 Link
               </CButton>
-              <CButton onClick={() => setVisible(!visible)}>Button</CButton>
+              <CButton color="primary" onClick={() => setVisible(!visible)}>
+                Button
+              </CButton>
               <CCollapse visible={visible}>
                 <CCard className="mt-3">
                   <CCardBody>
@@ -81,8 +83,12 @@ const Collapses = () => {
               A <code>&lt;CButton&gt;</code> can show and hide multiple elements.
             </p>
             <DocsExample href="components/collapse#multiple-targets">
-              <CButton onClick={() => setVisibleA(!visibleA)}>Toggle first element</CButton>
-              <CButton onClick={() => setVisibleB(!visibleB)}>Toggle second element</CButton>
+              <CButton color="primary" onClick={() => setVisibleA(!visibleA)}>
+                Toggle first element
+              </CButton>
+              <CButton color="primary" onClick={() => setVisibleB(!visibleB)}>
+                Toggle second element
+              </CButton>
               <CButton
                 onClick={() => {
                   setVisibleA(!visibleA)
diff --git a/src/views/base/jumbotrons/Jumbotrons.js b/src/views/base/jumbotrons/Jumbotrons.js
index 560681367..18c9223b8 100644
--- a/src/views/base/jumbotrons/Jumbotrons.js
+++ b/src/views/base/jumbotrons/Jumbotrons.js
@@ -18,7 +18,9 @@ const Jumbotrons = () => {
               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>
+            <CButton color="primary" size="lg">
+              Example button
+            </CButton>
           </CContainer>
           <CRow className="align-items-md-stretch">
             <CCol md={6}>
diff --git a/src/views/base/placeholders/Placeholders.js b/src/views/base/placeholders/Placeholders.js
index 9639b168b..4f0e80f21 100644
--- a/src/views/base/placeholders/Placeholders.js
+++ b/src/views/base/placeholders/Placeholders.js
@@ -39,7 +39,9 @@ const Placeholders = () => {
                       Some quick example text to build on the card title and make up the bulk of the
                       card&#39;s content.
                     </CCardText>
-                    <CButton href="#">Go somewhere</CButton>
+                    <CButton color="primary" href="#">
+                      Go somewhere
+                    </CButton>
                   </CCardBody>
                 </CCard>
                 <CCard style={{ width: '18rem' }}>
diff --git a/src/views/base/spinners/Spinners.js b/src/views/base/spinners/Spinners.js
index 7347cf0c1..c3b927f54 100644
--- a/src/views/base/spinners/Spinners.js
+++ b/src/views/base/spinners/Spinners.js
@@ -93,19 +93,19 @@ const Accordion = () => {
               as needed.
             </p>
             <DocsExample href="components/spinner#buttons">
-              <CButton disabled>
+              <CButton color="primary" disabled>
                 <CSpinner component="span" size="sm" aria-hidden="true" />
               </CButton>
-              <CButton disabled>
+              <CButton color="primary" disabled>
                 <CSpinner component="span" size="sm" aria-hidden="true" />
                 Loading...
               </CButton>
             </DocsExample>
             <DocsExample href="components/spinner#buttons">
-              <CButton disabled>
+              <CButton color="primary" disabled>
                 <CSpinner component="span" size="sm" variant="grow" aria-hidden="true" />
               </CButton>
-              <CButton disabled>
+              <CButton color="primary" disabled>
                 <CSpinner component="span" size="sm" variant="grow" aria-hidden="true" />
                 Loading...
               </CButton>
diff --git a/src/views/forms/form-control/FormControl.js b/src/views/forms/form-control/FormControl.js
index 5949a79ce..caea5f722 100644
--- a/src/views/forms/form-control/FormControl.js
+++ b/src/views/forms/form-control/FormControl.js
@@ -183,7 +183,7 @@ const FormControl = () => {
                   <CFormInput type="password" id="inputPassword2" placeholder="Password" />
                 </div>
                 <div className="col-auto">
-                  <CButton type="submit" className="mb-3">
+                  <CButton color="primary" type="submit" className="mb-3">
                     Confirm identity
                   </CButton>
                 </div>
diff --git a/src/views/forms/layout/Layout.js b/src/views/forms/layout/Layout.js
index 9d2b21fd2..8fdc2a88c 100644
--- a/src/views/forms/layout/Layout.js
+++ b/src/views/forms/layout/Layout.js
@@ -102,7 +102,9 @@ const Layout = () => {
                   <CFormCheck type="checkbox" id="gridCheck" label="Check me out" />
                 </CCol>
                 <CCol xs={12}>
-                  <CButton type="submit">Sign in</CButton>
+                  <CButton color="primary" type="submit">
+                    Sign in
+                  </CButton>
                 </CCol>
               </CForm>
             </DocsExample>
@@ -178,7 +180,9 @@ const Layout = () => {
                     <CFormCheck type="checkbox" id="gridCheck1" label="Example checkbox" />
                   </div>
                 </CRow>
-                <CButton type="submit">Sign in</CButton>
+                <CButton color="primary" type="submit">
+                  Sign in
+                </CButton>
               </CForm>
             </DocsExample>
           </CCardBody>
@@ -314,7 +318,9 @@ const Layout = () => {
                   <CFormCheck type="checkbox" id="autoSizingCheck" label="Remember me" />
                 </CCol>
                 <CCol xs="auto">
-                  <CButton type="submit">Submit</CButton>
+                  <CButton color="primary" type="submit">
+                    Submit
+                  </CButton>
                 </CCol>
               </CForm>
             </DocsExample>
@@ -353,7 +359,9 @@ const Layout = () => {
                   <CFormCheck type="checkbox" id="autoSizingCheck2" label="Remember me" />
                 </CCol>
                 <CCol xs="auto">
-                  <CButton type="submit">Submit</CButton>
+                  <CButton color="primary" type="submit">
+                    Submit
+                  </CButton>
                 </CCol>
               </CForm>
             </DocsExample>
@@ -400,7 +408,9 @@ const Layout = () => {
                   <CFormCheck type="checkbox" id="inlineFormCheck" label="Remember me" />
                 </CCol>
                 <CCol xs={12}>
-                  <CButton type="submit">Submit</CButton>
+                  <CButton color="primary" type="submit">
+                    Submit
+                  </CButton>
                 </CCol>
               </CForm>
             </DocsExample>
diff --git a/src/views/notifications/modals/Modals.js b/src/views/notifications/modals/Modals.js
index d65dd44b2..11e375884 100644
--- a/src/views/notifications/modals/Modals.js
+++ b/src/views/notifications/modals/Modals.js
@@ -21,7 +21,9 @@ const LiveDemo = () => {
   const [visible, setVisible] = useState(false)
   return (
     <>
-      <CButton onClick={() => setVisible(!visible)}>Launch demo modal</CButton>
+      <CButton color="primary" onClick={() => setVisible(!visible)}>
+        Launch demo modal
+      </CButton>
       <CModal visible={visible} onClose={() => setVisible(false)}>
         <CModalHeader>
           <CModalTitle>Modal title</CModalTitle>
@@ -42,7 +44,9 @@ const StaticBackdrop = () => {
   const [visible, setVisible] = useState(false)
   return (
     <>
-      <CButton onClick={() => setVisible(!visible)}>Launch static backdrop modal</CButton>
+      <CButton color="primary" onClick={() => setVisible(!visible)}>
+        Launch static backdrop modal
+      </CButton>
       <CModal backdrop="static" visible={visible} onClose={() => setVisible(false)}>
         <CModalHeader>
           <CModalTitle>Modal title</CModalTitle>
@@ -65,7 +69,9 @@ const ScrollingLongContent = () => {
   const [visible, setVisible] = useState(false)
   return (
     <>
-      <CButton onClick={() => setVisible(!visible)}>Launch demo modal</CButton>
+      <CButton color="primary" onClick={() => setVisible(!visible)}>
+        Launch demo modal
+      </CButton>
       <CModal visible={visible} onClose={() => setVisible(false)}>
         <CModalHeader>
           <CModalTitle>Modal title</CModalTitle>
@@ -165,7 +171,9 @@ const ScrollingLongContent2 = () => {
   const [visible, setVisible] = useState(false)
   return (
     <>
-      <CButton onClick={() => setVisible(!visible)}>Launch demo modal</CButton>
+      <CButton color="primary" onClick={() => setVisible(!visible)}>
+        Launch demo modal
+      </CButton>
       <CModal scrollable visible={visible} onClose={() => setVisible(false)}>
         <CModalHeader>
           <CModalTitle>Modal title</CModalTitle>
@@ -265,7 +273,9 @@ const VerticallyCentered = () => {
   const [visible, setVisible] = useState(false)
   return (
     <>
-      <CButton onClick={() => setVisible(!visible)}>Vertically centered modal</CButton>
+      <CButton color="primary" onClick={() => setVisible(!visible)}>
+        Vertically centered modal
+      </CButton>
       <CModal alignment="center" visible={visible} onClose={() => setVisible(false)}>
         <CModalHeader>
           <CModalTitle>Modal title</CModalTitle>
@@ -289,7 +299,9 @@ const VerticallyCentered2 = () => {
   const [visible, setVisible] = useState(false)
   return (
     <>
-      <CButton onClick={() => setVisible(!visible)}>Vertically centered scrollable modal</CButton>
+      <CButton color="primary" onClick={() => setVisible(!visible)}>
+        Vertically centered scrollable modal
+      </CButton>
       <CModal alignment="center" scrollable visible={visible} onClose={() => setVisible(false)}>
         <CModalHeader>
           <CModalTitle>Modal title</CModalTitle>
@@ -332,7 +344,9 @@ const TooltipsPopovers = () => {
   const [visible, setVisible] = useState(false)
   return (
     <>
-      <CButton onClick={() => setVisible(!visible)}>Launch demo modal</CButton>
+      <CButton color="primary" onClick={() => setVisible(!visible)}>
+        Launch demo modal
+      </CButton>
       <CModal alignment="center" visible={visible} onClose={() => setVisible(false)}>
         <CModalHeader>
           <CModalTitle>Modal title</CModalTitle>
@@ -342,7 +356,7 @@ const TooltipsPopovers = () => {
           <p>
             This
             <CPopover title="Popover title" content="Popover body content is set in this property.">
-              <CButton>button</CButton>
+              <CButton color="primary">button</CButton>
             </CPopover>{' '}
             triggers a popover on click.
           </p>
@@ -376,9 +390,15 @@ const OptionalSizes = () => {
   const [visibleSm, setVisibleSm] = useState(false)
   return (
     <>
-      <CButton onClick={() => setVisibleXL(!visibleXL)}>Extra large modal</CButton>
-      <CButton onClick={() => setVisibleLg(!visibleLg)}>Large modal</CButton>
-      <CButton onClick={() => setVisibleSm(!visibleSm)}>Small large modal</CButton>
+      <CButton color="primary" onClick={() => setVisibleXL(!visibleXL)}>
+        Extra large modal
+      </CButton>
+      <CButton color="primary" onClick={() => setVisibleLg(!visibleLg)}>
+        Large modal
+      </CButton>
+      <CButton color="primary" onClick={() => setVisibleSm(!visibleSm)}>
+        Small large modal
+      </CButton>
       <CModal size="xl" visible={visibleXL} onClose={() => setVisibleXL(false)}>
         <CModalHeader>
           <CModalTitle>Extra large modal</CModalTitle>
@@ -411,12 +431,24 @@ const FullscreenModal = () => {
 
   return (
     <>
-      <CButton onClick={() => setVisible(!visible)}>Full screen</CButton>
-      <CButton onClick={() => setVisibleSm(!visibleSm)}>Full screen below sm</CButton>
-      <CButton onClick={() => setVisibleMd(!visibleMd)}>Full screen below md</CButton>
-      <CButton onClick={() => setVisibleLg(!visibleLg)}>Full screen below lg</CButton>
-      <CButton onClick={() => setVisibleXL(!visibleXL)}>Full screen below xl</CButton>
-      <CButton onClick={() => setVisibleXXL(!visibleXXL)}>Full screen below xxl</CButton>
+      <CButton color="primary" onClick={() => setVisible(!visible)}>
+        Full screen
+      </CButton>
+      <CButton color="primary" onClick={() => setVisibleSm(!visibleSm)}>
+        Full screen below sm
+      </CButton>
+      <CButton color="primary" onClick={() => setVisibleMd(!visibleMd)}>
+        Full screen below md
+      </CButton>
+      <CButton color="primary" onClick={() => setVisibleLg(!visibleLg)}>
+        Full screen below lg
+      </CButton>
+      <CButton color="primary" onClick={() => setVisibleXL(!visibleXL)}>
+        Full screen below xl
+      </CButton>
+      <CButton color="primary" onClick={() => setVisibleXXL(!visibleXXL)}>
+        Full screen below xxl
+      </CButton>
       <CModal fullscreen visible={visible} onClose={() => setVisible(false)}>
         <CModalHeader>
           <CModalTitle>Full screen</CModalTitle>
diff --git a/src/views/notifications/toasts/Toasts.js b/src/views/notifications/toasts/Toasts.js
index 9631a0e83..639b78b48 100644
--- a/src/views/notifications/toasts/Toasts.js
+++ b/src/views/notifications/toasts/Toasts.js
@@ -39,7 +39,9 @@ const ExampleToast = () => {
   )
   return (
     <>
-      <CButton onClick={() => addToast(exampleToast)}>Send a toast</CButton>
+      <CButton color="primary" onClick={() => addToast(exampleToast)}>
+        Send a toast
+      </CButton>
       <CToaster ref={toaster} push={toast} placement="top-end" />
     </>
   )

From 6cb34cfc3e9d3ed4173e807a10d3a47657c9ab73 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Mon, 13 Nov 2023 19:58:21 +0100
Subject: [PATCH 43/68] fix: make the sidebar close button visible under the
 `lg` breakpoint

---
 src/components/AppSidebar.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/AppSidebar.js b/src/components/AppSidebar.js
index 156ae8014..6e9f3495f 100644
--- a/src/components/AppSidebar.js
+++ b/src/components/AppSidebar.js
@@ -45,7 +45,7 @@ const AppSidebar = () => {
           <CIcon customClassName="sidebar-brand-narrow" icon={sygnet} height={32} />
         </CSidebarBrand>
         <CCloseButton
-          className="d-md-none"
+          className="d-lg-none"
           dark
           onClick={() => dispatch({ type: 'set', sidebarShow: false })}
         />

From 8f55012707027a38dba8b39e27ce2f656e6e3af4 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Mon, 13 Nov 2023 20:13:12 +0100
Subject: [PATCH 44/68] refactor: resolve deprecation warning

---
 src/store.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/store.js b/src/store.js
index 559c5983e..8ad30dad6 100644
--- a/src/store.js
+++ b/src/store.js
@@ -1,4 +1,4 @@
-import { createStore } from 'redux'
+import { legacy_createStore as createStore } from 'redux'
 
 const initialState = {
   sidebarShow: true,

From f8d4f9f0c6427c79708236a346488d4a34b1f970 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Wed, 15 Nov 2023 11:31:41 +0100
Subject: [PATCH 45/68] refactor: improve responsive behavior

---
 src/components/AppContent.js         |   2 +-
 src/views/dashboard/Dashboard.js     |  76 ++++++++------
 src/views/theme/colors/Colors.js     |   2 +-
 src/views/widgets/Widgets.js         | 146 ++++++++++-----------------
 src/views/widgets/WidgetsBrand.js    |  25 ++---
 src/views/widgets/WidgetsDropdown.js |  23 +++--
 6 files changed, 123 insertions(+), 151 deletions(-)

diff --git a/src/components/AppContent.js b/src/components/AppContent.js
index b72cc6bd6..b9a39ef50 100644
--- a/src/components/AppContent.js
+++ b/src/components/AppContent.js
@@ -7,7 +7,7 @@ import routes from '../routes'
 
 const AppContent = () => {
   return (
-    <CContainer class="px-4" lg>
+    <CContainer className="px-4" lg>
       <Suspense fallback={<CSpinner color="primary" />}>
         <Routes>
           {routes.map((route, idx) => {
diff --git a/src/views/dashboard/Dashboard.js b/src/views/dashboard/Dashboard.js
index da59f7818..5b0b61041 100644
--- a/src/views/dashboard/Dashboard.js
+++ b/src/views/dashboard/Dashboard.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import classNames from 'classnames'
 
 import {
   CAvatar,
@@ -90,12 +91,12 @@ const Dashboard = () => {
       user: {
         name: 'Yiorgos Avraamu',
         new: true,
-        registered: 'Jan 1, 2021',
+        registered: 'Jan 1, 2023',
       },
       country: { name: 'USA', flag: cifUs },
       usage: {
         value: 50,
-        period: 'Jun 11, 2021 - Jul 10, 2021',
+        period: 'Jun 11, 2023 - Jul 10, 2023',
         color: 'success',
       },
       payment: { name: 'Mastercard', icon: cibCcMastercard },
@@ -106,12 +107,12 @@ const Dashboard = () => {
       user: {
         name: 'Avram Tarasios',
         new: false,
-        registered: 'Jan 1, 2021',
+        registered: 'Jan 1, 2023',
       },
       country: { name: 'Brazil', flag: cifBr },
       usage: {
         value: 22,
-        period: 'Jun 11, 2021 - Jul 10, 2021',
+        period: 'Jun 11, 2023 - Jul 10, 2023',
         color: 'info',
       },
       payment: { name: 'Visa', icon: cibCcVisa },
@@ -119,11 +120,11 @@ const Dashboard = () => {
     },
     {
       avatar: { src: avatar3, status: 'warning' },
-      user: { name: 'Quintin Ed', new: true, registered: 'Jan 1, 2021' },
+      user: { name: 'Quintin Ed', new: true, registered: 'Jan 1, 2023' },
       country: { name: 'India', flag: cifIn },
       usage: {
         value: 74,
-        period: 'Jun 11, 2021 - Jul 10, 2021',
+        period: 'Jun 11, 2023 - Jul 10, 2023',
         color: 'warning',
       },
       payment: { name: 'Stripe', icon: cibCcStripe },
@@ -131,11 +132,11 @@ const Dashboard = () => {
     },
     {
       avatar: { src: avatar4, status: 'secondary' },
-      user: { name: 'Enéas Kwadwo', new: true, registered: 'Jan 1, 2021' },
+      user: { name: 'Enéas Kwadwo', new: true, registered: 'Jan 1, 2023' },
       country: { name: 'France', flag: cifFr },
       usage: {
         value: 98,
-        period: 'Jun 11, 2021 - Jul 10, 2021',
+        period: 'Jun 11, 2023 - Jul 10, 2023',
         color: 'danger',
       },
       payment: { name: 'PayPal', icon: cibCcPaypal },
@@ -146,12 +147,12 @@ const Dashboard = () => {
       user: {
         name: 'Agapetus Tadeáš',
         new: true,
-        registered: 'Jan 1, 2021',
+        registered: 'Jan 1, 2023',
       },
       country: { name: 'Spain', flag: cifEs },
       usage: {
         value: 22,
-        period: 'Jun 11, 2021 - Jul 10, 2021',
+        period: 'Jun 11, 2023 - Jul 10, 2023',
         color: 'primary',
       },
       payment: { name: 'Google Wallet', icon: cibCcApplePay },
@@ -162,12 +163,12 @@ const Dashboard = () => {
       user: {
         name: 'Friderik Dávid',
         new: true,
-        registered: 'Jan 1, 2021',
+        registered: 'Jan 1, 2023',
       },
       country: { name: 'Poland', flag: cifPl },
       usage: {
         value: 43,
-        period: 'Jun 11, 2021 - Jul 10, 2021',
+        period: 'Jun 11, 2023 - Jul 10, 2023',
         color: 'success',
       },
       payment: { name: 'Amex', icon: cibCcAmex },
@@ -177,7 +178,7 @@ const Dashboard = () => {
 
   return (
     <>
-      <WidgetsDropdown />
+      <WidgetsDropdown className="mb-4" />
       <CCard className="mb-4">
         <CCardBody>
           <CRow>
@@ -185,7 +186,7 @@ const Dashboard = () => {
               <h4 id="traffic" className="card-title mb-0">
                 Traffic
               </h4>
-              <div className="small text-body-secondary">January - July 2021</div>
+              <div className="small text-body-secondary">January - July 2023</div>
             </CCol>
             <CCol sm={7} className="d-none d-md-block">
               <CButton color="primary" className="float-end">
@@ -208,22 +209,31 @@ const Dashboard = () => {
           <MainChart />
         </CCardBody>
         <CCardFooter>
-          <CRow xs={{ cols: 1 }} md={{ cols: 5 }} className="text-center">
-            {progressExample.map((item, index) => (
-              <CCol className="mb-sm-2 mb-0" key={index}>
+          <CRow
+            xs={{ cols: 1, gutter: 4 }}
+            sm={{ cols: 2 }}
+            lg={{ cols: 4 }}
+            xl={{ cols: 5 }}
+            className="mb-2 text-center"
+          >
+            {progressExample.map((item, index, items) => (
+              <CCol
+                className={classNames({
+                  'd-none d-xl-block': index + 1 === items.length,
+                })}
+                key={index}
+              >
                 <div className="text-body-secondary">{item.title}</div>
-                <strong>
+                <div className="fw-semibold text-truncate">
                   {item.value} ({item.percent}%)
-                </strong>
+                </div>
                 <CProgress thin className="mt-2" color={item.color} value={item.percent} />
               </CCol>
             ))}
           </CRow>
         </CCardFooter>
       </CCard>
-
-      <WidgetsBrand withCharts />
-
+      <WidgetsBrand className="mb-4" withCharts />
       <CRow>
         <CCol xs>
           <CCard className="mb-4">
@@ -232,20 +242,21 @@ const Dashboard = () => {
               <CRow>
                 <CCol xs={12} md={6} xl={6}>
                   <CRow>
-                    <CCol sm={6}>
+                    <CCol xs={6}>
                       <div className="border-start border-start-4 border-start-info py-1 px-3">
-                        <div className="text-body-secondary small">New Clients</div>
+                        <div className="text-body-secondary text-truncate xsall">New Clients</div>
                         <div className="fs-5 fw-semibold">9,123</div>
                       </div>
                     </CCol>
-                    <CCol sm={6}>
+                    <CCol xs={6}>
                       <div className="border-start border-start-4 border-start-danger py-1 px-3 mb-3">
-                        <div className="text-body-secondary small">Recurring Clients</div>
+                        <div className="text-body-secondary text-truncate small">
+                          Recurring Clients
+                        </div>
                         <div className="fs-5 fw-semibold">22,643</div>
                       </div>
                     </CCol>
                   </CRow>
-
                   <hr className="mt-0" />
                   {progressGroupExample1.map((item, index) => (
                     <div className="progress-group mb-4" key={index}>
@@ -259,18 +270,17 @@ const Dashboard = () => {
                     </div>
                   ))}
                 </CCol>
-
                 <CCol xs={12} md={6} xl={6}>
                   <CRow>
-                    <CCol sm={6}>
+                    <CCol xs={6}>
                       <div className="border-start border-start-4 border-start-warning py-1 px-3 mb-3">
-                        <div className="text-body-secondary small">Pageviews</div>
+                        <div className="text-body-secondary text-truncate small">Pageviews</div>
                         <div className="fs-5 fw-semibold">78,623</div>
                       </div>
                     </CCol>
-                    <CCol sm={6}>
+                    <CCol xs={6}>
                       <div className="border-start border-start-4 border-start-success py-1 px-3 mb-3">
-                        <div className="text-body-secondary small">Organic</div>
+                        <div className="text-body-secondary text-truncate small">Organic</div>
                         <div className="fs-5 fw-semibold">49,123</div>
                       </div>
                     </CCol>
@@ -314,7 +324,7 @@ const Dashboard = () => {
               <br />
 
               <CTable align="middle" className="mb-0 border" hover responsive>
-                <CTableHead>
+                <CTableHead className="text-nowrap">
                   <CTableRow>
                     <CTableHeaderCell className="bg-body-tertiary text-center">
                       <CIcon icon={cilPeople} />
diff --git a/src/views/theme/colors/Colors.js b/src/views/theme/colors/Colors.js
index 4a1570353..ef844e163 100644
--- a/src/views/theme/colors/Colors.js
+++ b/src/views/theme/colors/Colors.js
@@ -1,5 +1,5 @@
-import PropTypes from 'prop-types'
 import React, { useEffect, useState, createRef } from 'react'
+import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { CRow, CCol, CCard, CCardHeader, CCardBody } from '@coreui/react'
 import { rgbToHex } from '@coreui/utils'
diff --git a/src/views/widgets/Widgets.js b/src/views/widgets/Widgets.js
index c6be871f6..a9bf51e12 100644
--- a/src/views/widgets/Widgets.js
+++ b/src/views/widgets/Widgets.js
@@ -41,41 +41,37 @@ const Widgets = () => {
     <CCard className="mb-4">
       <CCardHeader>Widgets</CCardHeader>
       <CCardBody>
-        <DocsExample href="/components/widgets/#cwidgetstatsa">
+        <DocsExample href="components/widgets/#cwidgetstatsa">
           <WidgetsDropdown />
         </DocsExample>
-        <DocsExample href="/components/widgets/#cwidgetstatsb">
-          <CRow>
-            <CCol xs={12} sm={6} lg={3}>
+        <DocsExample href="components/widgets/#cwidgetstatsb">
+          <CRow xs={{ gutter: 4 }}>
+            <CCol xs={12} sm={6} xl={4} xxl={3}>
               <CWidgetStatsB
-                className="mb-4"
                 progress={{ color: 'success', value: 89.9 }}
                 text="Lorem ipsum dolor sit amet enim."
                 title="Widget title"
                 value="89.9%"
               />
             </CCol>
-            <CCol xs={12} sm={6} lg={3}>
+            <CCol xs={12} sm={6} xl={4} xxl={3}>
               <CWidgetStatsB
-                className="mb-4"
                 value="12.124"
                 title="Widget title"
                 progress={{ color: 'info', value: 89.9 }}
                 text="Lorem ipsum dolor sit amet enim."
               />
             </CCol>
-            <CCol xs={12} sm={6} lg={3}>
+            <CCol xs={12} sm={6} xl={4} xxl={3}>
               <CWidgetStatsB
-                className="mb-4"
                 value="$98.111,00"
                 title="Widget title"
                 progress={{ color: 'warning', value: 89.9 }}
                 text="Lorem ipsum dolor sit amet enim."
               />
             </CCol>
-            <CCol xs={12} sm={6} lg={3}>
+            <CCol xs={12} sm={6} xl={4} xxl={3}>
               <CWidgetStatsB
-                className="mb-4"
                 value="2 TB"
                 title="Widget title"
                 progress={{ color: 'primary', value: 89.9 }}
@@ -84,11 +80,10 @@ const Widgets = () => {
             </CCol>
           </CRow>
         </DocsExample>
-        <DocsExample href="/components/widgets/#cwidgetstatsb">
-          <CRow>
-            <CCol xs={12} sm={6} lg={3}>
+        <DocsExample href="components/widgets/#cwidgetstatsb">
+          <CRow xs={{ gutter: 4 }}>
+            <CCol xs={12} sm={6} xl={4} xxl={3}>
               <CWidgetStatsB
-                className="mb-4"
                 color="success"
                 inverse
                 value="89.9%"
@@ -97,9 +92,8 @@ const Widgets = () => {
                 text="Lorem ipsum dolor sit amet enim."
               />
             </CCol>
-            <CCol xs={12} sm={6} lg={3}>
+            <CCol xs={12} sm={6} xl={4} xxl={3}>
               <CWidgetStatsB
-                className="mb-4"
                 color="info"
                 inverse
                 value="12.124"
@@ -108,9 +102,8 @@ const Widgets = () => {
                 text="Lorem ipsum dolor sit amet enim."
               />
             </CCol>
-            <CCol xs={12} sm={6} lg={3}>
+            <CCol xs={12} sm={6} xl={4} xxl={3}>
               <CWidgetStatsB
-                className="mb-4"
                 color="warning"
                 inverse
                 value="$98.111,00"
@@ -119,9 +112,8 @@ const Widgets = () => {
                 text="Lorem ipsum dolor sit amet enim."
               />
             </CCol>
-            <CCol xs={12} sm={6} lg={3}>
+            <CCol xs={12} sm={6} xl={4} xxl={3}>
               <CWidgetStatsB
-                className="mb-4"
                 color="primary"
                 inverse
                 value="2 TB"
@@ -132,8 +124,8 @@ const Widgets = () => {
             </CCol>
           </CRow>
         </DocsExample>
-        <DocsExample href="/components/widgets/#cwidgetstatse">
-          <CRow>
+        <DocsExample href="components/widgets/#cwidgetstatse">
+          <CRow xs={{ gutter: 4 }}>
             <CCol sm={4} lg={2}>
               <CWidgetStatsE
                 chart={
@@ -201,7 +193,6 @@ const Widgets = () => {
                     }}
                   />
                 }
-                className="mb-4"
                 title="title"
                 value="1,123"
               />
@@ -273,7 +264,6 @@ const Widgets = () => {
                     }}
                   />
                 }
-                className="mb-4"
                 title="title"
                 value="1,123"
               />
@@ -345,7 +335,6 @@ const Widgets = () => {
                     }}
                   />
                 }
-                className="mb-4"
                 title="title"
                 value="1,123"
               />
@@ -425,7 +414,6 @@ const Widgets = () => {
                     }}
                   />
                 }
-                className="mb-4"
                 title="title"
                 value="1,123"
               />
@@ -505,7 +493,6 @@ const Widgets = () => {
                     }}
                   />
                 }
-                className="mb-4"
                 title="title"
                 value="1,123"
               />
@@ -585,45 +572,40 @@ const Widgets = () => {
                     }}
                   />
                 }
-                className="mb-4"
                 title="title"
                 value="1,123"
               />
             </CCol>
           </CRow>
         </DocsExample>
-        <DocsExample href="/components/widgets/#cwidgetstatsf">
-          <CRow>
-            <CCol xs={12} sm={6} lg={3}>
+        <DocsExample href="components/widgets/#cwidgetstatsf">
+          <CRow xs={{ gutter: 4 }}>
+            <CCol xs={12} sm={6} xl={4} xxl={3}>
               <CWidgetStatsF
-                className="mb-3"
                 icon={<CIcon width={24} icon={cilSettings} size="xl" />}
                 title="income"
                 value="$1.999,50"
                 color="primary"
               />
             </CCol>
-            <CCol xs={12} sm={6} lg={3}>
+            <CCol xs={12} sm={6} xl={4} xxl={3}>
               <CWidgetStatsF
-                className="mb-3"
                 icon={<CIcon width={24} icon={cilUser} size="xl" />}
                 title="income"
                 value="$1.999,50"
                 color="info"
               />
             </CCol>
-            <CCol xs={12} sm={6} lg={3}>
+            <CCol xs={12} sm={6} xl={4} xxl={3}>
               <CWidgetStatsF
-                className="mb-3"
                 icon={<CIcon width={24} icon={cilMoon} size="xl" />}
                 title="income"
                 value="$1.999,50"
                 color="warning"
               />
             </CCol>
-            <CCol xs={12} sm={6} lg={3}>
+            <CCol xs={12} sm={6} xl={4} xxl={3}>
               <CWidgetStatsF
-                className="mb-3"
                 icon={<CIcon width={24} icon={cilBell} size="xl" />}
                 title="income"
                 value="$1.999,50"
@@ -632,11 +614,10 @@ const Widgets = () => {
             </CCol>
           </CRow>
         </DocsExample>
-        <DocsExample href="/components/widgets/#cwidgetstatsf">
-          <CRow>
-            <CCol xs={12} sm={6} lg={3}>
+        <DocsExample href="components/widgets/#cwidgetstatsf">
+          <CRow xs={{ gutter: 4 }}>
+            <CCol xs={12} sm={6} xl={4} xxl={3}>
               <CWidgetStatsF
-                className="mb-3"
                 icon={<CIcon width={24} icon={cilSettings} size="xl" />}
                 title="income"
                 value="$1.999,50"
@@ -654,9 +635,8 @@ const Widgets = () => {
                 }
               />
             </CCol>
-            <CCol xs={12} sm={6} lg={3}>
+            <CCol xs={12} sm={6} xl={4} xxl={3}>
               <CWidgetStatsF
-                className="mb-3"
                 icon={<CIcon width={24} icon={cilLaptop} size="xl" />}
                 title="income"
                 value="$1.999,50"
@@ -674,9 +654,8 @@ const Widgets = () => {
                 }
               />
             </CCol>
-            <CCol xs={12} sm={6} lg={3}>
+            <CCol xs={12} sm={6} xl={4} xxl={3}>
               <CWidgetStatsF
-                className="mb-3"
                 icon={<CIcon width={24} icon={cilMoon} size="xl" />}
                 title="income"
                 value="$1.999,50"
@@ -694,9 +673,8 @@ const Widgets = () => {
                 }
               />
             </CCol>
-            <CCol xs={12} sm={6} lg={3}>
+            <CCol xs={12} sm={6} xl={4} xxl={3}>
               <CWidgetStatsF
-                className="mb-3"
                 icon={<CIcon width={24} icon={cilBell} size="xl" />}
                 title="income"
                 value="$1.999,50"
@@ -716,11 +694,10 @@ const Widgets = () => {
             </CCol>
           </CRow>
         </DocsExample>
-        <DocsExample href="/components/widgets/#cwidgetstatsf">
-          <CRow>
-            <CCol xs={12} sm={6} lg={3}>
+        <DocsExample href="components/widgets/#cwidgetstatsf">
+          <CRow xs={{ gutter: 4 }}>
+            <CCol xs={12} sm={6} xl={4} xxl={3}>
               <CWidgetStatsF
-                className="mb-3"
                 icon={<CIcon width={24} icon={cilSettings} size="xl" />}
                 padding={false}
                 title="income"
@@ -728,9 +705,8 @@ const Widgets = () => {
                 color="primary"
               />
             </CCol>
-            <CCol xs={12} sm={6} lg={3}>
+            <CCol xs={12} sm={6} xl={4} xxl={3}>
               <CWidgetStatsF
-                className="mb-3"
                 icon={<CIcon width={24} icon={cilUser} size="xl" />}
                 padding={false}
                 title="income"
@@ -738,9 +714,8 @@ const Widgets = () => {
                 color="info"
               />
             </CCol>
-            <CCol xs={12} sm={6} lg={3}>
+            <CCol xs={12} sm={6} xl={4} xxl={3}>
               <CWidgetStatsF
-                className="mb-3"
                 icon={<CIcon width={24} icon={cilMoon} size="xl" />}
                 padding={false}
                 title="income"
@@ -748,9 +723,8 @@ const Widgets = () => {
                 color="warning"
               />
             </CCol>
-            <CCol xs={12} sm={6} lg={3}>
+            <CCol xs={12} sm={6} xl={4} xxl={3}>
               <CWidgetStatsF
-                className="mb-3"
                 icon={<CIcon width={24} icon={cilBell} size="xl" />}
                 padding={false}
                 title="income"
@@ -760,13 +734,13 @@ const Widgets = () => {
             </CCol>
           </CRow>
         </DocsExample>
-        <DocsExample href="/components/widgets/#cwidgetstatsd">
+        <DocsExample href="components/widgets/#cwidgetstatsd">
           <WidgetsBrand />
         </DocsExample>
-        <DocsExample href="/components/widgets/#cwidgetstatsd">
+        <DocsExample href="components/widgets/#cwidgetstatsd">
           <WidgetsBrand withCharts />
         </DocsExample>
-        <DocsExample href="/components/widgets/#cwidgetstatsc">
+        <DocsExample href="components/widgets/#cwidgetstatsc">
           <CCardGroup className="mb-4">
             <CWidgetStatsC
               icon={<CIcon icon={cilPeople} height={36} />}
@@ -800,67 +774,61 @@ const Widgets = () => {
             />
           </CCardGroup>
         </DocsExample>
-        <DocsExample href="/components/widgets/#cwidgetstatsc">
-          <CRow>
-            <CCol sm={6} md={2}>
+        <DocsExample href="components/widgets/#cwidgetstatsc">
+          <CRow xs={{ gutter: 4 }}>
+            <CCol xs={6} lg={4} xl={4} xxl={2}>
               <CWidgetStatsC
                 icon={<CIcon icon={cilPeople} height={36} />}
                 value="87.500"
                 title="Visitors"
                 progress={{ color: 'info', value: 75 }}
-                className="mb-4"
               />
             </CCol>
-            <CCol sm={6} md={2}>
+            <CCol xs={6} lg={4} xl={4} xxl={2}>
               <CWidgetStatsC
                 icon={<CIcon icon={cilUserFollow} height={36} />}
                 value="385"
                 title="New Clients"
                 progress={{ color: 'success', value: 75 }}
-                className="mb-4"
               />
             </CCol>
-            <CCol sm={6} md={2}>
+            <CCol xs={6} lg={4} xl={4} xxl={2}>
               <CWidgetStatsC
                 icon={<CIcon icon={cilBasket} height={36} />}
                 value="1238"
                 title="Products sold"
                 progress={{ color: 'warning', value: 75 }}
-                className="mb-4"
               />
             </CCol>
-            <CCol sm={6} md={2}>
+            <CCol xs={6} lg={4} xl={4} xxl={2}>
               <CWidgetStatsC
                 icon={<CIcon icon={cilChartPie} height={36} />}
                 value="28%"
                 title="Returning Visitors"
                 progress={{ color: 'primary', value: 75 }}
-                className="mb-4"
               />
             </CCol>
-            <CCol sm={6} md={2}>
+            <CCol xs={6} lg={4} xl={4} xxl={2}>
               <CWidgetStatsC
                 icon={<CIcon icon={cilSpeedometer} height={36} />}
                 value="5:34:11"
                 title="Avg. Time"
                 progress={{ color: 'danger', value: 75 }}
-                className="mb-4"
               />
             </CCol>
-            <CCol sm={6} md={2}>
+            <CCol xs={6} lg={4} xl={4} xxl={2}>
               <CWidgetStatsC
                 icon={<CIcon icon={cilSpeech} height={36} />}
                 value="972"
-                title="comments"
+                title="Comments"
                 progress={{ color: 'info', value: 75 }}
-                className="mb-4"
               />
             </CCol>
           </CRow>
         </DocsExample>
-        <DocsExample href="/components/widgets/#cwidgetstatsc">
-          <CRow>
-            <CCol sm={6} md={2}>
+        <DocsExample href="components/widgets/#cwidgetstatsc">
+          <CRow xs={{ gutter: 4 }}>
+            <CCol xs={6} lg={4} xl={4} xxl={2}>
               <CWidgetStatsC
                 color="info"
                 icon={<CIcon icon={cilPeople} height={36} />}
@@ -868,10 +836,9 @@ const Widgets = () => {
                 title="Visitors"
                 inverse
                 progress={{ value: 75 }}
-                className="mb-4"
               />
             </CCol>
-            <CCol sm={6} md={2}>
+            <CCol xs={6} lg={4} xl={4} xxl={2}>
               <CWidgetStatsC
                 color="success"
                 icon={<CIcon icon={cilUserFollow} height={36} />}
@@ -879,10 +846,9 @@ const Widgets = () => {
                 title="New Clients"
                 inverse
                 progress={{ value: 75 }}
-                className="mb-4"
               />
             </CCol>
-            <CCol sm={6} md={2}>
+            <CCol xs={6} lg={4} xl={4} xxl={2}>
               <CWidgetStatsC
                 color="warning"
                 icon={<CIcon icon={cilBasket} height={36} />}
@@ -890,10 +856,9 @@ const Widgets = () => {
                 title="Products sold"
                 inverse
                 progress={{ value: 75 }}
-                className="mb-4"
               />
             </CCol>
-            <CCol sm={6} md={2}>
+            <CCol xs={6} lg={4} xl={4} xxl={2}>
               <CWidgetStatsC
                 color="primary"
                 icon={<CIcon icon={cilChartPie} height={36} />}
@@ -901,10 +866,9 @@ const Widgets = () => {
                 title="Returning Visitors"
                 inverse
                 progress={{ value: 75 }}
-                className="mb-4"
               />
             </CCol>
-            <CCol sm={6} md={2}>
+            <CCol xs={6} lg={4} xl={4} xxl={2}>
               <CWidgetStatsC
                 color="danger"
                 icon={<CIcon icon={cilSpeedometer} height={36} />}
@@ -912,18 +876,16 @@ const Widgets = () => {
                 title="Avg. Time"
                 inverse
                 progress={{ value: 75 }}
-                className="mb-4"
               />
             </CCol>
-            <CCol sm={6} md={2}>
+            <CCol xs={6} lg={4} xl={4} xxl={2}>
               <CWidgetStatsC
                 color="info"
                 icon={<CIcon icon={cilSpeech} height={36} />}
                 value="972"
-                title="comments"
+                title="Comments"
                 inverse
                 progress={{ value: 75 }}
-                className="mb-4"
               />
             </CCol>
           </CRow>
diff --git a/src/views/widgets/WidgetsBrand.js b/src/views/widgets/WidgetsBrand.js
index b5eb528ac..f09393aae 100644
--- a/src/views/widgets/WidgetsBrand.js
+++ b/src/views/widgets/WidgetsBrand.js
@@ -5,7 +5,7 @@ import CIcon from '@coreui/icons-react'
 import { cibFacebook, cibLinkedin, cibTwitter, cilCalendar } from '@coreui/icons'
 import { CChart } from '@coreui/react-chartjs'
 
-const WidgetsBrand = ({ withCharts }) => {
+const WidgetsBrand = (props) => {
   const chartOptions = {
     elements: {
       line: {
@@ -35,11 +35,10 @@ const WidgetsBrand = ({ withCharts }) => {
   }
 
   return (
-    <CRow>
-      <CCol sm={6} lg={3}>
+    <CRow className={props.className} xs={{ gutter: 4 }}>
+      <CCol sm={6} xl={4} xxl={3}>
         <CWidgetStatsD
-          className="mb-4"
-          {...(withCharts && {
+          {...(props.withCharts && {
             chart: (
               <CChart
                 className="position-absolute w-100 h-100"
@@ -72,10 +71,9 @@ const WidgetsBrand = ({ withCharts }) => {
         />
       </CCol>
 
-      <CCol sm={6} lg={3}>
+      <CCol sm={6} xl={4} xxl={3}>
         <CWidgetStatsD
-          className="mb-4"
-          {...(withCharts && {
+          {...(props.withCharts && {
             chart: (
               <CChart
                 className="position-absolute w-100 h-100"
@@ -108,10 +106,9 @@ const WidgetsBrand = ({ withCharts }) => {
         />
       </CCol>
 
-      <CCol sm={6} lg={3}>
+      <CCol sm={6} xl={4} xxl={3}>
         <CWidgetStatsD
-          className="mb-4"
-          {...(withCharts && {
+          {...(props.withCharts && {
             chart: (
               <CChart
                 className="position-absolute w-100 h-100"
@@ -144,11 +141,10 @@ const WidgetsBrand = ({ withCharts }) => {
         />
       </CCol>
 
-      <CCol sm={6} lg={3}>
+      <CCol sm={6} xl={4} xxl={3}>
         <CWidgetStatsD
-          className="mb-4"
           color="warning"
-          {...(withCharts && {
+          {...(props.withCharts && {
             chart: (
               <CChart
                 className="position-absolute w-100 h-100"
@@ -182,6 +178,7 @@ const WidgetsBrand = ({ withCharts }) => {
 }
 
 WidgetsBrand.propTypes = {
+  className: PropTypes.string,
   withCharts: PropTypes.bool,
 }
 
diff --git a/src/views/widgets/WidgetsDropdown.js b/src/views/widgets/WidgetsDropdown.js
index ed4174b23..85e2fc969 100644
--- a/src/views/widgets/WidgetsDropdown.js
+++ b/src/views/widgets/WidgetsDropdown.js
@@ -1,4 +1,6 @@
 import React, { useEffect, useRef } from 'react'
+import PropTypes from 'prop-types'
+
 import {
   CRow,
   CCol,
@@ -13,7 +15,7 @@ import { CChartBar, CChartLine } from '@coreui/react-chartjs'
 import CIcon from '@coreui/icons-react'
 import { cilArrowBottom, cilArrowTop, cilOptions } from '@coreui/icons'
 
-const WidgetsDropdown = () => {
+const WidgetsDropdown = (props) => {
   const widgetChartRef1 = useRef(null)
   const widgetChartRef2 = useRef(null)
 
@@ -36,10 +38,9 @@ const WidgetsDropdown = () => {
   }, [widgetChartRef1, widgetChartRef2])
 
   return (
-    <CRow>
-      <CCol sm={6} lg={3}>
+    <CRow className={props.className} xs={{ gutter: 4 }}>
+      <CCol sm={6} xl={4} xxl={3}>
         <CWidgetStatsA
-          className="mb-4"
           color="primary"
           value={
             <>
@@ -128,9 +129,8 @@ const WidgetsDropdown = () => {
           }
         />
       </CCol>
-      <CCol sm={6} lg={3}>
+      <CCol sm={6} xl={4} xxl={3}>
         <CWidgetStatsA
-          className="mb-4"
           color="info"
           value={
             <>
@@ -218,9 +218,8 @@ const WidgetsDropdown = () => {
           }
         />
       </CCol>
-      <CCol sm={6} lg={3}>
+      <CCol sm={6} xl={4} xxl={3}>
         <CWidgetStatsA
-          className="mb-4"
           color="warning"
           value={
             <>
@@ -291,9 +290,8 @@ const WidgetsDropdown = () => {
           }
         />
       </CCol>
-      <CCol sm={6} lg={3}>
+      <CCol sm={6} xl={4} xxl={3}>
         <CWidgetStatsA
-          className="mb-4"
           color="danger"
           value={
             <>
@@ -390,4 +388,9 @@ const WidgetsDropdown = () => {
   )
 }
 
+WidgetsDropdown.propTypes = {
+  className: PropTypes.string,
+  withCharts: PropTypes.bool,
+}
+
 export default WidgetsDropdown

From 004030755bb743316390286a814573038e7c0764 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Wed, 15 Nov 2023 11:39:18 +0100
Subject: [PATCH 46/68] chore: update dependencies and devDependencies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

@coreui/chartjs        ^4.0.0-beta.1  →  ^4.0.0-rc.0
@coreui/coreui         ^5.0.0-beta.2  →  ^5.0.0-rc.0
@coreui/react          ^5.0.0-beta.1  →  ^5.0.0-rc.0
@coreui/react-chartjs  ^3.0.0-beta.0  →  ^3.0.0-rc.0
@testing-library/jest-dom    ^5.17.0  →       ^6.1.4
eslint-config-prettier       ^8.10.0  →       ^9.0.0
eslint-plugin-prettier        ^4.2.1  →       ^5.0.1
prettier                       2.8.8  →        3.1.0
---
 package.json | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 98a050226..ee891a24e 100644
--- a/package.json
+++ b/package.json
@@ -22,12 +22,12 @@
     "test:debug": "react-scripts --inspect-brk test --runInBand"
   },
   "dependencies": {
-    "@coreui/chartjs": "^4.0.0-beta.1",
-    "@coreui/coreui": "^5.0.0-beta.2",
+    "@coreui/chartjs": "^4.0.0-rc.0",
+    "@coreui/coreui": "^5.0.0-rc.0",
     "@coreui/icons": "^3.0.1",
     "@coreui/icons-react": "^2.2.1",
-    "@coreui/react": "^5.0.0-beta.1",
-    "@coreui/react-chartjs": "^3.0.0-beta.0",
+    "@coreui/react": "^5.0.0-rc.0",
+    "@coreui/react-chartjs": "^3.0.0-rc.0",
     "@coreui/utils": "^2.0.2",
     "@popperjs/core": "^2.11.8",
     "chart.js": "^4.4.0",
@@ -43,12 +43,13 @@
     "simplebar-react": "^3.2.4"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.17.0",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^14.1.0",
     "@testing-library/user-event": "^14.5.1",
-    "eslint-config-prettier": "^8.10.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "prettier": "2.8.8",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-prettier": "^5.0.1",
+    "prettier": "3.1.0",
     "react-scripts": "5.0.1",
     "sass": "^1.69.5",
     "web-vitals": "^3.5.0"

From 30f8ee04a333c4d735cdead1a7799fab3ae93228 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Wed, 15 Nov 2023 11:45:52 +0100
Subject: [PATCH 47/68] release: v5.0.0-rc.0

---
 package.json      | 2 +-
 public/index.html | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index ee891a24e..c377ac217 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coreui/coreui-free-react-admin-template",
-  "version": "5.0.0-beta.0",
+  "version": "5.0.0-rc.0",
   "description": "CoreUI Free React Admin Template",
   "homepage": ".",
   "bugs": {
diff --git a/public/index.html b/public/index.html
index 3fa4ca470..851936cc6 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <!--
 * CoreUI Free React.js Admin Template
-* @version v5.0.0-beta.0
+* @version v5.0.0-rc.0
 * @link https://coreui.io/product/free-react-admin-template/
 * Copyright (c) 2023 creativeLabs Łukasz Holeczek
 * Licensed under MIT (https://github.com/coreui/coreui-free-react-admin-template/blob/main/LICENSE)

From 20b3798c9ef26264071218f2f9d4a7e034e7e251 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Wed, 15 Nov 2023 13:34:15 +0100
Subject: [PATCH 48/68] styles: remove whitespaces

---
 src/views/widgets/WidgetsBrand.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/views/widgets/WidgetsBrand.js b/src/views/widgets/WidgetsBrand.js
index f09393aae..03eea83ef 100644
--- a/src/views/widgets/WidgetsBrand.js
+++ b/src/views/widgets/WidgetsBrand.js
@@ -70,7 +70,6 @@ const WidgetsBrand = (props) => {
           }}
         />
       </CCol>
-
       <CCol sm={6} xl={4} xxl={3}>
         <CWidgetStatsD
           {...(props.withCharts && {
@@ -105,7 +104,6 @@ const WidgetsBrand = (props) => {
           }}
         />
       </CCol>
-
       <CCol sm={6} xl={4} xxl={3}>
         <CWidgetStatsD
           {...(props.withCharts && {
@@ -140,7 +138,6 @@ const WidgetsBrand = (props) => {
           }}
         />
       </CCol>
-
       <CCol sm={6} xl={4} xxl={3}>
         <CWidgetStatsD
           color="warning"

From 2b18af56d016593ebf0aeb1fd2c2ad8213c27898 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Wed, 15 Nov 2023 13:34:43 +0100
Subject: [PATCH 49/68] fix: add proper class names

---
 src/views/dashboard/Dashboard.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/dashboard/Dashboard.js b/src/views/dashboard/Dashboard.js
index 5b0b61041..57a55290d 100644
--- a/src/views/dashboard/Dashboard.js
+++ b/src/views/dashboard/Dashboard.js
@@ -244,7 +244,7 @@ const Dashboard = () => {
                   <CRow>
                     <CCol xs={6}>
                       <div className="border-start border-start-4 border-start-info py-1 px-3">
-                        <div className="text-body-secondary text-truncate xsall">New Clients</div>
+                        <div className="text-body-secondary text-truncate small">New Clients</div>
                         <div className="fs-5 fw-semibold">9,123</div>
                       </div>
                     </CCol>

From cf6063524659f9a0e3b2fa70c4e32a1c3792eaf9 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Wed, 15 Nov 2023 19:52:56 +0100
Subject: [PATCH 50/68] refactor: update responsive behavior

---
 src/views/widgets/Widgets.js | 36 ++++++++++++++++++------------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/views/widgets/Widgets.js b/src/views/widgets/Widgets.js
index a9bf51e12..4a34afe4c 100644
--- a/src/views/widgets/Widgets.js
+++ b/src/views/widgets/Widgets.js
@@ -126,7 +126,7 @@ const Widgets = () => {
         </DocsExample>
         <DocsExample href="components/widgets/#cwidgetstatse">
           <CRow xs={{ gutter: 4 }}>
-            <CCol sm={4} lg={2}>
+            <CCol sm={4} md={3} xl={2}>
               <CWidgetStatsE
                 chart={
                   <CChartBar
@@ -197,7 +197,7 @@ const Widgets = () => {
                 value="1,123"
               />
             </CCol>
-            <CCol sm={4} lg={2}>
+            <CCol sm={4} md={3} xl={2}>
               <CWidgetStatsE
                 chart={
                   <CChartBar
@@ -268,7 +268,7 @@ const Widgets = () => {
                 value="1,123"
               />
             </CCol>
-            <CCol sm={4} lg={2}>
+            <CCol sm={4} md={3} xl={2}>
               <CWidgetStatsE
                 chart={
                   <CChartBar
@@ -339,7 +339,7 @@ const Widgets = () => {
                 value="1,123"
               />
             </CCol>
-            <CCol sm={4} lg={2}>
+            <CCol sm={4} md={3} xl={2}>
               <CWidgetStatsE
                 chart={
                   <CChartLine
@@ -418,7 +418,7 @@ const Widgets = () => {
                 value="1,123"
               />
             </CCol>
-            <CCol sm={4} lg={2}>
+            <CCol sm={4} md={3} xl={2}>
               <CWidgetStatsE
                 chart={
                   <CChartLine
@@ -497,7 +497,7 @@ const Widgets = () => {
                 value="1,123"
               />
             </CCol>
-            <CCol sm={4} lg={2}>
+            <CCol sm={4} md={3} xl={2}>
               <CWidgetStatsE
                 chart={
                   <CChartLine
@@ -776,7 +776,7 @@ const Widgets = () => {
         </DocsExample>
         <DocsExample href="components/widgets/#cwidgetstatsc">
           <CRow xs={{ gutter: 4 }}>
-            <CCol xs={6} lg={4} xl={4} xxl={2}>
+            <CCol xs={6} lg={4} xxl={2}>
               <CWidgetStatsC
                 icon={<CIcon icon={cilPeople} height={36} />}
                 value="87.500"
@@ -784,7 +784,7 @@ const Widgets = () => {
                 progress={{ color: 'info', value: 75 }}
               />
             </CCol>
-            <CCol xs={6} lg={4} xl={4} xxl={2}>
+            <CCol xs={6} lg={4} xxl={2}>
               <CWidgetStatsC
                 icon={<CIcon icon={cilUserFollow} height={36} />}
                 value="385"
@@ -792,7 +792,7 @@ const Widgets = () => {
                 progress={{ color: 'success', value: 75 }}
               />
             </CCol>
-            <CCol xs={6} lg={4} xl={4} xxl={2}>
+            <CCol xs={6} lg={4} xxl={2}>
               <CWidgetStatsC
                 icon={<CIcon icon={cilBasket} height={36} />}
                 value="1238"
@@ -800,7 +800,7 @@ const Widgets = () => {
                 progress={{ color: 'warning', value: 75 }}
               />
             </CCol>
-            <CCol xs={6} lg={4} xl={4} xxl={2}>
+            <CCol xs={6} lg={4} xxl={2}>
               <CWidgetStatsC
                 icon={<CIcon icon={cilChartPie} height={36} />}
                 value="28%"
@@ -808,7 +808,7 @@ const Widgets = () => {
                 progress={{ color: 'primary', value: 75 }}
               />
             </CCol>
-            <CCol xs={6} lg={4} xl={4} xxl={2}>
+            <CCol xs={6} lg={4} xxl={2}>
               <CWidgetStatsC
                 icon={<CIcon icon={cilSpeedometer} height={36} />}
                 value="5:34:11"
@@ -816,7 +816,7 @@ const Widgets = () => {
                 progress={{ color: 'danger', value: 75 }}
               />
             </CCol>
-            <CCol xs={6} lg={4} xl={4} xxl={2}>
+            <CCol xs={6} lg={4} xxl={2}>
               <CWidgetStatsC
                 icon={<CIcon icon={cilSpeech} height={36} />}
                 value="972"
@@ -828,7 +828,7 @@ const Widgets = () => {
         </DocsExample>
         <DocsExample href="components/widgets/#cwidgetstatsc">
           <CRow xs={{ gutter: 4 }}>
-            <CCol xs={6} lg={4} xl={4} xxl={2}>
+            <CCol xs={6} lg={4} xxl={2}>
               <CWidgetStatsC
                 color="info"
                 icon={<CIcon icon={cilPeople} height={36} />}
@@ -838,7 +838,7 @@ const Widgets = () => {
                 progress={{ value: 75 }}
               />
             </CCol>
-            <CCol xs={6} lg={4} xl={4} xxl={2}>
+            <CCol xs={6} lg={4} xxl={2}>
               <CWidgetStatsC
                 color="success"
                 icon={<CIcon icon={cilUserFollow} height={36} />}
@@ -848,7 +848,7 @@ const Widgets = () => {
                 progress={{ value: 75 }}
               />
             </CCol>
-            <CCol xs={6} lg={4} xl={4} xxl={2}>
+            <CCol xs={6} lg={4} xxl={2}>
               <CWidgetStatsC
                 color="warning"
                 icon={<CIcon icon={cilBasket} height={36} />}
@@ -858,7 +858,7 @@ const Widgets = () => {
                 progress={{ value: 75 }}
               />
             </CCol>
-            <CCol xs={6} lg={4} xl={4} xxl={2}>
+            <CCol xs={6} lg={4} xxl={2}>
               <CWidgetStatsC
                 color="primary"
                 icon={<CIcon icon={cilChartPie} height={36} />}
@@ -868,7 +868,7 @@ const Widgets = () => {
                 progress={{ value: 75 }}
               />
             </CCol>
-            <CCol xs={6} lg={4} xl={4} xxl={2}>
+            <CCol xs={6} lg={4} xxl={2}>
               <CWidgetStatsC
                 color="danger"
                 icon={<CIcon icon={cilSpeedometer} height={36} />}
@@ -878,7 +878,7 @@ const Widgets = () => {
                 progress={{ value: 75 }}
               />
             </CCol>
-            <CCol xs={6} lg={4} xl={4} xxl={2}>
+            <CCol xs={6} lg={4} xxl={2}>
               <CWidgetStatsC
                 color="info"
                 icon={<CIcon icon={cilSpeech} height={36} />}

From 5c7720a60c47d2ea7755d2c800e3ab5ef283d95d Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Sat, 25 Nov 2023 18:42:45 +0100
Subject: [PATCH 51/68] chore: update dependencies and devDependencies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

@coreui/coreui          ^5.0.0-rc.0  →  ^5.0.0-rc.1
@testing-library/react      ^14.1.0  →      ^14.1.2
core-js                     ^3.33.2  →      ^3.33.3
react-router-dom            ^6.18.0  →      ^6.20.0
---
 package.json | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index c377ac217..0e5b26775 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
   },
   "dependencies": {
     "@coreui/chartjs": "^4.0.0-rc.0",
-    "@coreui/coreui": "^5.0.0-rc.0",
+    "@coreui/coreui": "^5.0.0-rc.1",
     "@coreui/icons": "^3.0.1",
     "@coreui/icons-react": "^2.2.1",
     "@coreui/react": "^5.0.0-rc.0",
@@ -32,20 +32,20 @@
     "@popperjs/core": "^2.11.8",
     "chart.js": "^4.4.0",
     "classnames": "^2.3.2",
-    "core-js": "^3.33.2",
+    "core-js": "^3.33.3",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-app-polyfill": "^3.0.0",
     "react-dom": "^18.2.0",
     "react-redux": "^8.1.3",
-    "react-router-dom": "^6.18.0",
+    "react-router-dom": "^6.20.0",
     "redux": "4.2.1",
     "simplebar-react": "^3.2.4"
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@testing-library/jest-dom": "^6.1.4",
-    "@testing-library/react": "^14.1.0",
+    "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.1",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.1",

From b17a28a8c991d494dcd74755417168cb994c074a Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Sat, 25 Nov 2023 18:44:14 +0100
Subject: [PATCH 52/68] refactor: improve styles

---
 src/scss/_custom.scss    |  30 +---------
 src/scss/_examples.scss  | 117 ---------------------------------------
 src/scss/_variables.scss |   3 +-
 src/scss/style.scss      |  14 ++---
 4 files changed, 8 insertions(+), 156 deletions(-)
 delete mode 100644 src/scss/_examples.scss

diff --git a/src/scss/_custom.scss b/src/scss/_custom.scss
index 4301405f0..15d367af4 100644
--- a/src/scss/_custom.scss
+++ b/src/scss/_custom.scss
@@ -1,29 +1 @@
-// Custom styles for this theme
-
-.header > .container-fluid,
-.sidebar-header {
-  min-height: calc(4rem + 1px); // stylelint-disable-line function-disallowed-list
-}
-
-.header > .container-fluid + .container-fluid {
-  min-height: 3rem;
-}
-
-.sidebar-brand-full {
-  margin-left: 3px;
-}
-
-.sidebar-toggler {
-  @include ltr-rtl("margin-left", auto);
-}
-
-.sidebar-narrow,
-.sidebar-narrow-unfoldable:not(:hover) {
-  .sidebar-toggler {
-    @include ltr-rtl("margin-right", auto);
-  }
-}
-
-.footer {
-  min-height: calc(3rem + 1px); // stylelint-disable-line function-disallowed-list
-}
+// Here you can add other styles
diff --git a/src/scss/_examples.scss b/src/scss/_examples.scss
deleted file mode 100644
index f1e6ed856..000000000
--- a/src/scss/_examples.scss
+++ /dev/null
@@ -1,117 +0,0 @@
-/* stylelint-disable declaration-no-important, scss/selector-no-redundant-nesting-selector */
-@import "@coreui/coreui/scss/functions";
-@import "@coreui/coreui/scss/variables";
-@import "@coreui/coreui/scss/mixins";
-
-.example {
-  &:not(:first-child) {
-    margin-top: 1.5rem;
-  }
-
-  .tab-content {
-    background-color: rgba(var(--#{$prefix}tertiary-bg-rgb), var(--#{$prefix}bg-opacity, 1));
-  }
-
-  & + p {
-    margin-top: 1.5rem;
-  }
-
-  // Components examples
-  .preview {
-    + p {
-      margin-top: 2rem;
-    }
-
-    > .form-control {
-      + .form-control {
-        margin-top: .5rem;
-      }
-    }
-
-    > .nav + .nav,
-    > .alert + .alert,
-    > .navbar + .navbar,
-    > .progress + .progress {
-      margin-top: 1rem;
-    }
-
-    > .dropdown-menu {
-      position: static;
-      display: block;
-    }
-
-    > :last-child {
-      margin-bottom: 0;
-    }
-
-    // Images
-    > svg + svg,
-    > img + img {
-      margin-left: .5rem;
-    }
-
-    // Buttons
-    .col > .btn,
-    .col-auto > .btn,
-    .d-md-block > .btn,
-    > .btn,
-    > .btn-group {
-      margin: .25rem .125rem;
-    }
-    > .btn-toolbar + .btn-toolbar {
-      margin-top: .5rem;
-    }
-
-    // List groups
-    > .list-group {
-      max-width: 400px;
-    }
-
-    > [class*="list-group-horizontal"] {
-      max-width: 100%;
-    }
-
-    // Navbars
-    .fixed-top,
-    .sticky-top {
-      position: static;
-      margin: -1rem -1rem 1rem;
-    }
-
-    .fixed-bottom {
-      position: static;
-      margin: 1rem -1rem -1rem;
-    }
-
-    @include media-breakpoint-up(sm) {
-      .fixed-top,
-      .sticky-top {
-        margin: -1.5rem -1.5rem 1rem;
-      }
-      .fixed-bottom {
-        margin: 1rem -1.5rem -1.5rem;
-      }
-    }
-
-    // Pagination
-    .pagination {
-      margin-top: .5rem;
-      margin-bottom: .5rem;
-    }
-
-    .docs-example-modal {
-      .modal {
-        position: static;
-        display: block;
-      }
-    }
-  }
-}
-
-@if $enable-dark-mode {
-  @include color-mode(dark) {
-    .example .tab-content {
-      background-color: var(--#{$prefix}secondary-bg) !important;
-    }
-  }
-}
\ No newline at end of file
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index 5ac5b7265..b0f8a52a3 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -2,5 +2,4 @@
 //
 // If you want to customize your project please add your variables below.
 
-$enable-rtl: true; /* stylelint-disable-line scss/dollar-variable-default */
-$enable-deprecation-messages: false; /* stylelint-disable-line scss/dollar-variable-default */
+$enable-deprecation-messages: false !default;
diff --git a/src/scss/style.scss b/src/scss/style.scss
index de0c64a08..6fbabff00 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -1,16 +1,14 @@
 // If you want to override variables do it here
 @import "variables";
 
-// Import CoreUI for React components library
+// Import styles
 @import "@coreui/coreui/scss/coreui";
 
-// Import Chart.js custom tooltips styles
-@import "@coreui/chartjs/scss/coreui-chartjs";
+// Vendors
+@import "vendors/simplebar";
 
-@import "layout";
+// Custom styles for this theme
+@import "theme";
 
-// Preview
-@import "examples";
-
-// If you want to add custom CSS you can put it here.
+// If you want to add custom CSS you can put it here
 @import "custom";

From cb9e0be1f63f29b484c66542e648eb4026f5e6b0 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Sat, 25 Nov 2023 18:45:03 +0100
Subject: [PATCH 53/68] refactor: improve the layout

---
 src/components/header/AppHeaderDropdown.js |   4 +-
 src/scss/_theme.scss                       |  64 ++++++++++++
 src/scss/examples.scss                     | 116 +++++++++++++++++++++
 src/scss/vendors/simplebar.scss            |   5 +
 4 files changed, 187 insertions(+), 2 deletions(-)
 create mode 100644 src/scss/_theme.scss
 create mode 100644 src/scss/examples.scss
 create mode 100644 src/scss/vendors/simplebar.scss

diff --git a/src/components/header/AppHeaderDropdown.js b/src/components/header/AppHeaderDropdown.js
index c377ff699..30c0df82b 100644
--- a/src/components/header/AppHeaderDropdown.js
+++ b/src/components/header/AppHeaderDropdown.js
@@ -31,7 +31,7 @@ const AppHeaderDropdown = () => {
         <CAvatar src={avatar8} size="md" />
       </CDropdownToggle>
       <CDropdownMenu className="pt-0" placement="bottom-end">
-        <CDropdownHeader className="bg-body-secondary fw-semibold py-2">Account</CDropdownHeader>
+        <CDropdownHeader className="bg-body-secondary fw-semibold mb-2">Account</CDropdownHeader>
         <CDropdownItem href="#">
           <CIcon icon={cilBell} className="me-2" />
           Updates
@@ -60,7 +60,7 @@ const AppHeaderDropdown = () => {
             42
           </CBadge>
         </CDropdownItem>
-        <CDropdownHeader className="bg-body-secondary fw-semibold py-2">Settings</CDropdownHeader>
+        <CDropdownHeader className="bg-body-secondary fw-semibold my-2">Settings</CDropdownHeader>
         <CDropdownItem href="#">
           <CIcon icon={cilUser} className="me-2" />
           Profile
diff --git a/src/scss/_theme.scss b/src/scss/_theme.scss
new file mode 100644
index 000000000..49e1c79e6
--- /dev/null
+++ b/src/scss/_theme.scss
@@ -0,0 +1,64 @@
+body {
+  background-color: var(--cui-tertiary-bg);
+}
+
+.wrapper {
+  width: 100%;
+  @include ltr-rtl("padding-left", var(--cui-sidebar-occupy-start, 0));
+  @include ltr-rtl("padding-right", var(--cui-sidebar-occupy-end, 0));
+  will-change: auto;
+  @include transition(padding .15s);
+}
+
+.header > .container-fluid,
+.sidebar-header {
+  min-height: calc(4rem + 1px); // stylelint-disable-line function-disallowed-list
+}
+
+.sidebar-brand-full {
+  margin-left: 3px;
+}
+
+.sidebar-header {
+  .nav-underline-border {
+    --cui-nav-underline-border-link-padding-x: 1rem;
+    --cui-nav-underline-border-gap: 0;
+  }
+
+  .nav-link {
+    display: flex;
+    align-items: center;
+    min-height: calc(4rem + 1px); // stylelint-disable-line function-disallowed-list
+  }
+}
+
+.sidebar-toggler {
+  @include ltr-rtl("margin-left", auto);
+}
+
+.sidebar-narrow,
+.sidebar-narrow-unfoldable:not(:hover) {
+  .sidebar-toggler {
+    @include ltr-rtl("margin-right", auto);
+  }
+}
+
+.header > .container-fluid + .container-fluid {
+  min-height: 3rem;
+}
+
+.footer {
+  min-height: calc(3rem + 1px); // stylelint-disable-line function-disallowed-list
+}
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    body {
+      background-color: var(--cui-dark-bg-subtle);
+    }
+
+    .footer {
+      --cui-footer-bg: var(--cui-body-bg);
+    }
+  }
+}
diff --git a/src/scss/examples.scss b/src/scss/examples.scss
new file mode 100644
index 000000000..2390ba194
--- /dev/null
+++ b/src/scss/examples.scss
@@ -0,0 +1,116 @@
+/* stylelint-disable declaration-no-important, scss/selector-no-redundant-nesting-selector */
+$enable-deprecation-messages: false; /* stylelint-disable-line scss/dollar-variable-default */
+
+@import "@coreui/coreui/scss/functions";
+@import "@coreui/coreui/scss/variables";
+@import "@coreui/coreui/scss/mixins";
+
+.example {
+  &:not(:first-child) {
+    margin-top: 1.5rem;
+  }
+
+  .tab-content {
+    background-color: var(--#{$prefix}tertiary-bg);
+  }
+
+  & + p {
+    margin-top: 1.5rem;
+  }
+
+  // Components examples
+  .preview {
+    + p {
+      margin-top: 2rem;
+    }
+
+    > .form-control {
+      + .form-control {
+        margin-top: .5rem;
+      }
+    }
+
+    > .nav + .nav,
+    > .alert + .alert,
+    > .navbar + .navbar,
+    > .progress + .progress {
+      margin-top: 1rem;
+    }
+
+    > .dropdown-menu {
+      position: static;
+      display: block;
+    }
+
+    > :last-child {
+      margin-bottom: 0;
+    }
+
+    // Images
+    > svg + svg,
+    > img + img {
+      margin-left: .5rem;
+    }
+
+    // Buttons
+    > .btn,
+    > .btn-group {
+      margin: .25rem .125rem;
+    }
+    > .btn-toolbar + .btn-toolbar {
+      margin-top: .5rem;
+    }
+
+    // List groups
+    > .list-group {
+      max-width: 400px;
+    }
+
+    > [class*="list-group-horizontal"] {
+      max-width: 100%;
+    }
+
+    // Navbars
+    .fixed-top,
+    .sticky-top {
+      position: static;
+      margin: -1rem -1rem 1rem;
+    }
+
+    .fixed-bottom {
+      position: static;
+      margin: 1rem -1rem -1rem;
+    }
+
+    @include media-breakpoint-up(sm) {
+      .fixed-top,
+      .sticky-top {
+        margin: -1.5rem -1.5rem 1rem;
+      }
+      .fixed-bottom {
+        margin: 1rem -1.5rem -1.5rem;
+      }
+    }
+
+    // Pagination
+    .pagination {
+      margin-top: .5rem;
+      margin-bottom: .5rem;
+    }
+
+    .docs-example-modal {
+      .modal {
+        position: static;
+        display: block;
+      }
+    }
+  }
+}
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    .example .tab-content {
+      background-color: var(--#{$prefix}secondary-bg) !important;
+    }
+  }
+}
diff --git a/src/scss/vendors/simplebar.scss b/src/scss/vendors/simplebar.scss
new file mode 100644
index 000000000..59c81b8a9
--- /dev/null
+++ b/src/scss/vendors/simplebar.scss
@@ -0,0 +1,5 @@
+.simplebar-content {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+}

From e506dd20746df12cbe95a4272840038f0cdb725c Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Sat, 25 Nov 2023 18:56:37 +0100
Subject: [PATCH 54/68] chore: clean-up

---
 src/scss/_layout.scss | 22 ----------------------
 1 file changed, 22 deletions(-)
 delete mode 100644 src/scss/_layout.scss

diff --git a/src/scss/_layout.scss b/src/scss/_layout.scss
deleted file mode 100644
index 7e2ee4f81..000000000
--- a/src/scss/_layout.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-body {
-  background-color: var(--cui-tertiary-bg);
-}
-
-.wrapper {
-  width: 100%;
-  @include ltr-rtl("padding-left", var(--cui-sidebar-occupy-start, 0));
-  will-change: auto;
-  @include transition(padding .15s);
-}
-
-@if $enable-dark-mode {
-  @include color-mode(dark) {
-    body {
-      background-color: var(--cui-dark-bg-subtle);
-    }
-
-    .footer {
-      --cui-footer-bg: var(--cui-body-bg);
-    }
-  }
-}

From 14d9d2d6e53e27ec2a081f0dff94b865b57dce51 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Mon, 11 Mar 2024 16:02:20 +0100
Subject: [PATCH 55/68] refactor: update examples

---
 src/views/base/cards/Cards.js               |  2 +-
 src/views/base/collapses/Collapses.js       |  3 ++
 src/views/base/list-groups/ListGroups.js    | 20 ++++++------
 src/views/base/navs/Navs.js                 |  4 +--
 src/views/base/placeholders/Placeholders.js |  2 ++
 src/views/base/spinners/Spinners.js         | 12 +++----
 src/views/base/tables/Tables.js             | 36 ++++++++++-----------
 src/views/buttons/buttons/Buttons.js        | 12 +++----
 src/views/buttons/dropdowns/Dropdowns.js    |  2 +-
 src/views/dashboard/MainChart.js            |  4 +--
 src/views/forms/form-control/FormControl.js |  2 +-
 src/views/forms/input-group/InputGroup.js   | 12 +++----
 src/views/forms/range/Range.js              |  4 +--
 src/views/notifications/alerts/Alerts.js    |  2 +-
 src/views/notifications/toasts/Toasts.js    | 10 +++---
 15 files changed, 66 insertions(+), 61 deletions(-)

diff --git a/src/views/base/cards/Cards.js b/src/views/base/cards/Cards.js
index bb89cc03c..8c3fb2582 100644
--- a/src/views/base/cards/Cards.js
+++ b/src/views/base/cards/Cards.js
@@ -248,7 +248,7 @@ const Cards = () => {
             </p>
             <DocsExample href="components/card/#header-and-footer">
               <CCard>
-                <CCardHeader component="h5">Header</CCardHeader>
+                <CCardHeader as="h5">Header</CCardHeader>
                 <CCardBody>
                   <CCardTitle>Special title treatment</CCardTitle>
                   <CCardText>
diff --git a/src/views/base/collapses/Collapses.js b/src/views/base/collapses/Collapses.js
index 218518933..98a6beb5c 100644
--- a/src/views/base/collapses/Collapses.js
+++ b/src/views/base/collapses/Collapses.js
@@ -19,6 +19,7 @@ const Collapses = () => {
             <p className="text-body-secondary small">You can use a link or a button component.</p>
             <DocsExample href="components/collapse">
               <CButton
+                color="primary"
                 href="#"
                 onClick={(e) => {
                   e.preventDefault()
@@ -53,6 +54,7 @@ const Collapses = () => {
             <DocsExample href="components/collapse#horizontal">
               <CButton
                 className="mb-3"
+                color="primary"
                 onClick={() => setVisibleHorizontal(!visibleHorizontal)}
                 aria-expanded={visibleHorizontal}
                 aria-controls="collapseWidthExample"
@@ -90,6 +92,7 @@ const Collapses = () => {
                 Toggle second element
               </CButton>
               <CButton
+                color="primary"
                 onClick={() => {
                   setVisibleA(!visibleA)
                   setVisibleB(!visibleB)
diff --git a/src/views/base/list-groups/ListGroups.js b/src/views/base/list-groups/ListGroups.js
index bcadf474d..07ad20055 100644
--- a/src/views/base/list-groups/ListGroups.js
+++ b/src/views/base/list-groups/ListGroups.js
@@ -97,19 +97,19 @@ const ListGroups = () => {
             </p>
             <DocsExample href="components/list-group/#links-and-buttons">
               <CListGroup>
-                <CListGroupItem component="a" href="#" active>
+                <CListGroupItem as="a" href="#" active>
                   Cras justo odio
                 </CListGroupItem>
-                <CListGroupItem component="a" href="#">
+                <CListGroupItem as="a" href="#">
                   Dapibus ac facilisis in
                 </CListGroupItem>
-                <CListGroupItem component="a" href="#">
+                <CListGroupItem as="a" href="#">
                   Morbi leo risus
                 </CListGroupItem>
-                <CListGroupItem component="a" href="#">
+                <CListGroupItem as="a" href="#">
                   Porta ac consectetur ac
                 </CListGroupItem>
-                <CListGroupItem component="a" href="#" disabled>
+                <CListGroupItem as="a" href="#" disabled>
                   Vestibulum at eros
                 </CListGroupItem>
               </CListGroup>
@@ -201,7 +201,7 @@ const ListGroups = () => {
             </p>
             <DocsExample href="components/list-group/#contextual-classes">
               <CListGroup>
-                <CListGroupItem component="a" href="#">
+                <CListGroupItem as="a" href="#">
                   Dapibus ac facilisis in
                 </CListGroupItem>
                 {[
@@ -214,7 +214,7 @@ const ListGroups = () => {
                   'light',
                   'dark',
                 ].map((color, index) => (
-                  <CListGroupItem component="a" href="#" color={color} key={index}>
+                  <CListGroupItem as="a" href="#" color={color} key={index}>
                     A simple {color} list group item
                   </CListGroupItem>
                 ))}
@@ -269,7 +269,7 @@ const ListGroups = () => {
             </p>
             <DocsExample href="components/list-group/#custom-content">
               <CListGroup>
-                <CListGroupItem component="a" href="#" active>
+                <CListGroupItem as="a" href="#" active>
                   <div className="d-flex w-100 justify-content-between">
                     <h5 className="mb-1">List group item heading</h5>
                     <small>3 days ago</small>
@@ -280,7 +280,7 @@ const ListGroups = () => {
                   </p>
                   <small>Donec id elit non mi porta.</small>
                 </CListGroupItem>
-                <CListGroupItem component="a" href="#">
+                <CListGroupItem as="a" href="#">
                   <div className="d-flex w-100 justify-content-between">
                     <h5 className="mb-1">List group item heading</h5>
                     <small className="text-body-secondary">3 days ago</small>
@@ -291,7 +291,7 @@ const ListGroups = () => {
                   </p>
                   <small className="text-body-secondary">Donec id elit non mi porta.</small>
                 </CListGroupItem>
-                <CListGroupItem component="a" href="#">
+                <CListGroupItem as="a" href="#">
                   <div className="d-flex w-100 justify-content-between">
                     <h5 className="mb-1">List group item heading</h5>
                     <small className="text-body-secondary">3 days ago</small>
diff --git a/src/views/base/navs/Navs.js b/src/views/base/navs/Navs.js
index 15319461b..e2a627ff2 100644
--- a/src/views/base/navs/Navs.js
+++ b/src/views/base/navs/Navs.js
@@ -58,7 +58,7 @@ const Navs = () => {
               without the extra markup.
             </p>
             <DocsExample href="components/nav#base-nav">
-              <CNav component="nav">
+              <CNav as="nav">
                 <CNavLink href="#" active>
                   Active
                 </CNavLink>
@@ -308,7 +308,7 @@ const Navs = () => {
               horizontal layout that fills the available width starting from the small breakpoint.
             </p>
             <DocsExample href="components/nav#working-with-flex-utilities">
-              <CNav component="nav" variant="pills" className="flex-column flex-sm-row">
+              <CNav as="nav" variant="pills" className="flex-column flex-sm-row">
                 <CNavLink href="#" active>
                   Active
                 </CNavLink>
diff --git a/src/views/base/placeholders/Placeholders.js b/src/views/base/placeholders/Placeholders.js
index 4f0e80f21..3be06a69a 100644
--- a/src/views/base/placeholders/Placeholders.js
+++ b/src/views/base/placeholders/Placeholders.js
@@ -71,6 +71,7 @@ const Placeholders = () => {
                       <CPlaceholder xs={8} />
                     </CPlaceholder>
                     <CPlaceholder
+                      color="primary"
                       component={CButton}
                       disabled
                       href="#"
@@ -99,6 +100,7 @@ const Placeholders = () => {
                 <CPlaceholder xs={6} />
               </p>
               <CPlaceholder
+                color="primary"
                 component={CButton}
                 aria-hidden="true"
                 disabled
diff --git a/src/views/base/spinners/Spinners.js b/src/views/base/spinners/Spinners.js
index c3b927f54..038870829 100644
--- a/src/views/base/spinners/Spinners.js
+++ b/src/views/base/spinners/Spinners.js
@@ -2,7 +2,7 @@ import React from 'react'
 import { CButton, CCard, CCardBody, CCardHeader, CCol, CSpinner, CRow } from '@coreui/react'
 import { DocsExample } from 'src/components'
 
-const Accordion = () => {
+const Spinners = () => {
   return (
     <CRow>
       <CCol xs={12}>
@@ -94,19 +94,19 @@ const Accordion = () => {
             </p>
             <DocsExample href="components/spinner#buttons">
               <CButton color="primary" disabled>
-                <CSpinner component="span" size="sm" aria-hidden="true" />
+                <CSpinner as="span" size="sm" aria-hidden="true" />
               </CButton>
               <CButton color="primary" disabled>
-                <CSpinner component="span" size="sm" aria-hidden="true" />
+                <CSpinner as="span" size="sm" aria-hidden="true" />
                 Loading...
               </CButton>
             </DocsExample>
             <DocsExample href="components/spinner#buttons">
               <CButton color="primary" disabled>
-                <CSpinner component="span" size="sm" variant="grow" aria-hidden="true" />
+                <CSpinner as="span" size="sm" variant="grow" aria-hidden="true" />
               </CButton>
               <CButton color="primary" disabled>
-                <CSpinner component="span" size="sm" variant="grow" aria-hidden="true" />
+                <CSpinner as="span" size="sm" variant="grow" aria-hidden="true" />
                 Loading...
               </CButton>
             </DocsExample>
@@ -117,4 +117,4 @@ const Accordion = () => {
   )
 }
 
-export default Accordion
+export default Spinners
diff --git a/src/views/base/tables/Tables.js b/src/views/base/tables/Tables.js
index 27e312da6..75f1636a2 100644
--- a/src/views/base/tables/Tables.js
+++ b/src/views/base/tables/Tables.js
@@ -53,7 +53,7 @@ const Tables = () => {
                   </CTableRow>
                   <CTableRow>
                     <CTableHeaderCell scope="row">3</CTableHeaderCell>
-                    <CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
+                    <CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
                     <CTableDataCell>@twitter</CTableDataCell>
                   </CTableRow>
                 </CTableBody>
@@ -167,7 +167,7 @@ const Tables = () => {
                   </CTableRow>
                   <CTableRow>
                     <CTableHeaderCell scope="row">3</CTableHeaderCell>
-                    <CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
+                    <CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
                     <CTableDataCell>@twitter</CTableDataCell>
                   </CTableRow>
                 </CTableBody>
@@ -201,7 +201,7 @@ const Tables = () => {
                   </CTableRow>
                   <CTableRow>
                     <CTableHeaderCell scope="row">3</CTableHeaderCell>
-                    <CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
+                    <CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
                     <CTableDataCell>@twitter</CTableDataCell>
                   </CTableRow>
                 </CTableBody>
@@ -232,7 +232,7 @@ const Tables = () => {
                   </CTableRow>
                   <CTableRow>
                     <CTableHeaderCell scope="row">3</CTableHeaderCell>
-                    <CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
+                    <CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
                     <CTableDataCell>@twitter</CTableDataCell>
                   </CTableRow>
                 </CTableBody>
@@ -276,7 +276,7 @@ const Tables = () => {
                   </CTableRow>
                   <CTableRow>
                     <CTableHeaderCell scope="row">3</CTableHeaderCell>
-                    <CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
+                    <CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
                     <CTableDataCell>@twitter</CTableDataCell>
                   </CTableRow>
                 </CTableBody>
@@ -307,7 +307,7 @@ const Tables = () => {
                   </CTableRow>
                   <CTableRow>
                     <CTableHeaderCell scope="row">3</CTableHeaderCell>
-                    <CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
+                    <CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
                     <CTableDataCell>@twitter</CTableDataCell>
                   </CTableRow>
                 </CTableBody>
@@ -338,7 +338,7 @@ const Tables = () => {
                   </CTableRow>
                   <CTableRow>
                     <CTableHeaderCell scope="row">3</CTableHeaderCell>
-                    <CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
+                    <CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
                     <CTableDataCell>@twitter</CTableDataCell>
                   </CTableRow>
                 </CTableBody>
@@ -378,7 +378,7 @@ const Tables = () => {
                   </CTableRow>
                   <CTableRow>
                     <CTableHeaderCell scope="row">3</CTableHeaderCell>
-                    <CTableDataCell colSpan="2" active>
+                    <CTableDataCell colSpan={2} active>
                       Larry the Bird
                     </CTableDataCell>
                     <CTableDataCell>@twitter</CTableDataCell>
@@ -411,7 +411,7 @@ const Tables = () => {
                   </CTableRow>
                   <CTableRow>
                     <CTableHeaderCell scope="row">3</CTableHeaderCell>
-                    <CTableDataCell colSpan="2" active>
+                    <CTableDataCell colSpan={2} active>
                       Larry the Bird
                     </CTableDataCell>
                     <CTableDataCell>@twitter</CTableDataCell>
@@ -456,7 +456,7 @@ const Tables = () => {
                   </CTableRow>
                   <CTableRow>
                     <CTableHeaderCell scope="row">3</CTableHeaderCell>
-                    <CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
+                    <CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
                     <CTableDataCell>@twitter</CTableDataCell>
                   </CTableRow>
                 </CTableBody>
@@ -493,7 +493,7 @@ const Tables = () => {
                   </CTableRow>
                   <CTableRow>
                     <CTableHeaderCell scope="row">3</CTableHeaderCell>
-                    <CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
+                    <CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
                     <CTableDataCell>@twitter</CTableDataCell>
                   </CTableRow>
                 </CTableBody>
@@ -536,7 +536,7 @@ const Tables = () => {
                   </CTableRow>
                   <CTableRow>
                     <CTableHeaderCell scope="row">3</CTableHeaderCell>
-                    <CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
+                    <CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
                     <CTableDataCell>@twitter</CTableDataCell>
                   </CTableRow>
                 </CTableBody>
@@ -567,7 +567,7 @@ const Tables = () => {
                   </CTableRow>
                   <CTableRow>
                     <CTableHeaderCell scope="row">3</CTableHeaderCell>
-                    <CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
+                    <CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
                     <CTableDataCell>@twitter</CTableDataCell>
                   </CTableRow>
                 </CTableBody>
@@ -611,7 +611,7 @@ const Tables = () => {
                   </CTableRow>
                   <CTableRow>
                     <CTableHeaderCell scope="row">3</CTableHeaderCell>
-                    <CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
+                    <CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
                     <CTableDataCell>@twitter</CTableDataCell>
                   </CTableRow>
                 </CTableBody>
@@ -730,7 +730,7 @@ const Tables = () => {
                     <CTableDataCell>@mdo</CTableDataCell>
                   </CTableRow>
                   <CTableRow>
-                    <CTableHeaderCell colSpan="4">
+                    <CTableHeaderCell colSpan={4}>
                       <CTable>
                         <CTableHead>
                           <CTableRow>
@@ -761,7 +761,7 @@ const Tables = () => {
                   </CTableRow>
                   <CTableRow>
                     <CTableHeaderCell scope="row">3</CTableHeaderCell>
-                    <CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
+                    <CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
                     <CTableDataCell>@twitter</CTableDataCell>
                   </CTableRow>
                 </CTableBody>
@@ -838,7 +838,7 @@ const Tables = () => {
                   </CTableRow>
                   <CTableRow>
                     <CTableHeaderCell scope="row">3</CTableHeaderCell>
-                    <CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
+                    <CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
                     <CTableDataCell>@twitter</CTableDataCell>
                   </CTableRow>
                 </CTableBody>
@@ -878,7 +878,7 @@ const Tables = () => {
                   </CTableRow>
                   <CTableRow>
                     <CTableHeaderCell scope="row">3</CTableHeaderCell>
-                    <CTableDataCell colSpan="2">Larry the Bird</CTableDataCell>
+                    <CTableDataCell colSpan={2}>Larry the Bird</CTableDataCell>
                     <CTableDataCell>@twitter</CTableDataCell>
                   </CTableRow>
                 </CTableBody>
diff --git a/src/views/buttons/buttons/Buttons.js b/src/views/buttons/buttons/Buttons.js
index d22055004..287732cc4 100644
--- a/src/views/buttons/buttons/Buttons.js
+++ b/src/views/buttons/buttons/Buttons.js
@@ -118,15 +118,15 @@ const Buttons = () => {
               meaning to assistive technologies such as screen readers.
             </p>
             <DocsExample href="components/buttons#button-components">
-              <CButton component="a" color="primary" href="#" role="button">
+              <CButton as="a" color="primary" href="#" role="button">
                 Link
               </CButton>
               <CButton type="submit" color="primary">
                 Button
               </CButton>
-              <CButton component="input" type="button" color="primary" value="Input" />
-              <CButton component="input" type="submit" color="primary" value="Submit" />
-              <CButton component="input" type="reset" color="primary" value="Reset" />
+              <CButton as="input" type="button" color="primary" value="Input" />
+              <CButton as="input" type="submit" color="primary" value="Submit" />
+              <CButton as="input" type="reset" color="primary" value="Reset" />
             </DocsExample>
           </CCardBody>
         </CCard>
@@ -329,10 +329,10 @@ const Buttons = () => {
               to assistive technologies.
             </p>
             <DocsExample href="components/buttons#disabled-state">
-              <CButton component="a" href="#" color="primary" size="lg" disabled>
+              <CButton as="a" href="#" color="primary" size="lg" disabled>
                 Primary link
               </CButton>
-              <CButton component="a" href="#" color="secondary" size="lg" disabled>
+              <CButton as="a" href="#" color="secondary" size="lg" disabled>
                 Link
               </CButton>
             </DocsExample>
diff --git a/src/views/buttons/dropdowns/Dropdowns.js b/src/views/buttons/dropdowns/Dropdowns.js
index 506f76ab2..375bc96ce 100644
--- a/src/views/buttons/dropdowns/Dropdowns.js
+++ b/src/views/buttons/dropdowns/Dropdowns.js
@@ -210,7 +210,7 @@ const Dropdowns = () => {
                   </button>
                   <div className="collapse navbar-collapse" id="navbarNavDarkDropdown">
                     <ul className="navbar-nav">
-                      <CDropdown dark component="li" variant="nav-item">
+                      <CDropdown dark as="li" variant="nav-item">
                         <CDropdownToggle>Dropdown</CDropdownToggle>
                         <CDropdownMenu>
                           <CDropdownItem href="#">Action</CDropdownItem>
diff --git a/src/views/dashboard/MainChart.js b/src/views/dashboard/MainChart.js
index b017c23ee..922c0d021 100644
--- a/src/views/dashboard/MainChart.js
+++ b/src/views/dashboard/MainChart.js
@@ -98,16 +98,16 @@ const MainChart = () => {
               },
             },
             y: {
+              beginAtZero: true,
               border: {
                 color: getStyle('--cui-border-color-translucent'),
               },
               grid: {
                 color: getStyle('--cui-border-color-translucent'),
               },
+              max: 250,
               ticks: {
-                beginAtZero: true,
                 color: getStyle('--cui-body-color'),
-                max: 250,
                 maxTicksLimit: 5,
                 stepSize: Math.ceil(250 / 5),
               },
diff --git a/src/views/forms/form-control/FormControl.js b/src/views/forms/form-control/FormControl.js
index caea5f722..f89969e48 100644
--- a/src/views/forms/form-control/FormControl.js
+++ b/src/views/forms/form-control/FormControl.js
@@ -34,7 +34,7 @@ const FormControl = () => {
                 </div>
                 <div className="mb-3">
                   <CFormLabel htmlFor="exampleFormControlTextarea1">Example textarea</CFormLabel>
-                  <CFormTextarea id="exampleFormControlTextarea1" rows="3"></CFormTextarea>
+                  <CFormTextarea id="exampleFormControlTextarea1" rows={3}></CFormTextarea>
                 </div>
               </CForm>
             </DocsExample>
diff --git a/src/views/forms/input-group/InputGroup.js b/src/views/forms/input-group/InputGroup.js
index 3bc7237e1..880cff38e 100644
--- a/src/views/forms/input-group/InputGroup.js
+++ b/src/views/forms/input-group/InputGroup.js
@@ -21,7 +21,7 @@ import {
 } from '@coreui/react'
 import { DocsExample } from 'src/components'
 
-const Select = () => {
+const InputGroup = () => {
   return (
     <CRow>
       <CCol xs={12}>
@@ -394,7 +394,7 @@ const Select = () => {
           <CCardBody>
             <DocsExample href="forms/input-group#custom-select">
               <CInputGroup className="mb-3">
-                <CInputGroupText component="label" htmlFor="inputGroupSelect01">
+                <CInputGroupText as="label" htmlFor="inputGroupSelect01">
                   Options
                 </CInputGroupText>
                 <CFormSelect id="inputGroupSelect01">
@@ -411,7 +411,7 @@ const Select = () => {
                   <option value="2">Two</option>
                   <option value="3">Three</option>
                 </CFormSelect>
-                <CInputGroupText component="label" htmlFor="inputGroupSelect02">
+                <CInputGroupText as="label" htmlFor="inputGroupSelect02">
                   Options
                 </CInputGroupText>
               </CInputGroup>
@@ -449,14 +449,14 @@ const Select = () => {
           <CCardBody>
             <DocsExample href="forms/input-group#custom-file-input">
               <CInputGroup className="mb-3">
-                <CInputGroupText component="label" htmlFor="inputGroupFile01">
+                <CInputGroupText as="label" htmlFor="inputGroupFile01">
                   Upload
                 </CInputGroupText>
                 <CFormInput type="file" id="inputGroupFile01" />
               </CInputGroup>
               <CInputGroup className="mb-3">
                 <CFormInput type="file" id="inputGroupFile02" />
-                <CInputGroupText component="label" htmlFor="inputGroupFile02">
+                <CInputGroupText as="label" htmlFor="inputGroupFile02">
                   Upload
                 </CInputGroupText>
               </CInputGroup>
@@ -500,4 +500,4 @@ const Select = () => {
   )
 }
 
-export default Select
+export default InputGroup
diff --git a/src/views/forms/range/Range.js b/src/views/forms/range/Range.js
index 727ce75e5..1e31cabca 100644
--- a/src/views/forms/range/Range.js
+++ b/src/views/forms/range/Range.js
@@ -52,7 +52,7 @@ const Range = () => {
             </p>
             <DocsExample href="forms/range#min-and-max" tabContentClassName="bg-opacity-10">
               <CFormLabel htmlFor="customRange2">Example range</CFormLabel>
-              <CFormRange min="0" max="5" defaultValue="3" id="customRange2" />
+              <CFormRange min={0} max={5} defaultValue="3" id="customRange2" />
             </DocsExample>
           </CCardBody>
         </CCard>
@@ -70,7 +70,7 @@ const Range = () => {
             </p>
             <DocsExample href="forms/range#steps" tabContentClassName="bg-opacity-10">
               <CFormLabel htmlFor="customRange3">Example range</CFormLabel>
-              <CFormRange min="0" max="5" step="0.5" defaultValue="3" id="customRange3" />
+              <CFormRange min={0} max={5} step={0.5} defaultValue="3" id="customRange3" />
             </DocsExample>
           </CCardBody>
         </CCard>
diff --git a/src/views/notifications/alerts/Alerts.js b/src/views/notifications/alerts/Alerts.js
index 99f43629b..f51b62e28 100644
--- a/src/views/notifications/alerts/Alerts.js
+++ b/src/views/notifications/alerts/Alerts.js
@@ -99,7 +99,7 @@ const Alerts = () => {
             </p>
             <DocsExample href="components/alert#additional-content">
               <CAlert color="success">
-                <CAlertHeading tag="h4">Well done!</CAlertHeading>
+                <CAlertHeading as="h4">Well done!</CAlertHeading>
                 <p>
                   Aww yeah, you successfully read this important alert message. This example text is
                   going to run a bit longer so that you can see how spacing within an alert works
diff --git a/src/views/notifications/toasts/Toasts.js b/src/views/notifications/toasts/Toasts.js
index 639b78b48..10b9b7e40 100644
--- a/src/views/notifications/toasts/Toasts.js
+++ b/src/views/notifications/toasts/Toasts.js
@@ -62,7 +62,7 @@ const Toasts = () => {
               dismiss button.
             </p>
             <DocsExample href="components/toast">
-              <CToast title="CoreUI for React.js" autohide={false} visible={true}>
+              <CToast autohide={false} visible={true}>
                 <CToastHeader closeButton>
                   <svg
                     className="rounded me-2"
@@ -95,7 +95,7 @@ const Toasts = () => {
               Toasts are slightly translucent to blend in with what&#39;s below them.
             </p>
             <DocsExample href="components/toast#translucent" tabContentClassName="bg-dark">
-              <CToast title="CoreUI for React.js" autohide={false} visible={true}>
+              <CToast autohide={false} visible={true}>
                 <CToastHeader closeButton>
                   <svg
                     className="rounded me-2"
@@ -129,7 +129,7 @@ const Toasts = () => {
             </p>
             <DocsExample href="components/toast#stacking">
               <CToaster className="position-static">
-                <CToast title="CoreUI for React.js" autohide={false} visible={true}>
+                <CToast autohide={false} visible={true}>
                   <CToastHeader closeButton>
                     <svg
                       className="rounded me-2"
@@ -147,7 +147,7 @@ const Toasts = () => {
                   </CToastHeader>
                   <CToastBody>Hello, world! This is a toast message.</CToastBody>
                 </CToast>
-                <CToast title="CoreUI for React.js" autohide={false} visible={true}>
+                <CToast autohide={false} visible={true}>
                   <CToastHeader closeButton>
                     <svg
                       className="rounded me-2"
@@ -204,7 +204,7 @@ const Toasts = () => {
                     <CButton type="button" color="primary" size="sm">
                       Take action
                     </CButton>
-                    <CToastClose component={CButton} color="secondary" size="sm" className="ms-1">
+                    <CToastClose as={CButton} color="secondary" size="sm" className="ms-1">
                       Close
                     </CToastClose>
                   </div>

From df4938701cc69833d54a75fe5e6dd2dba9d8b638 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Mon, 11 Mar 2024 16:08:15 +0100
Subject: [PATCH 56/68] refactor: update the sidebar to show scrollbar properly

---
 src/components/AppSidebar.js    | 13 ++---------
 src/components/AppSidebarNav.js | 39 ++++++++++++++-------------------
 2 files changed, 19 insertions(+), 33 deletions(-)

diff --git a/src/components/AppSidebar.js b/src/components/AppSidebar.js
index 6e9f3495f..3069aba10 100644
--- a/src/components/AppSidebar.js
+++ b/src/components/AppSidebar.js
@@ -7,7 +7,6 @@ import {
   CSidebarBrand,
   CSidebarFooter,
   CSidebarHeader,
-  CSidebarNav,
   CSidebarToggler,
 } from '@coreui/react'
 import CIcon from '@coreui/icons-react'
@@ -17,9 +16,6 @@ import { AppSidebarNav } from './AppSidebarNav'
 import { logo } from 'src/assets/brand/logo'
 import { sygnet } from 'src/assets/brand/sygnet'
 
-import SimpleBar from 'simplebar-react'
-import 'simplebar-react/dist/simplebar.min.css'
-
 // sidebar nav config
 import navigation from '../_nav'
 
@@ -31,7 +27,7 @@ const AppSidebar = () => {
   return (
     <CSidebar
       className="border-end"
-      colorScheme="dark"
+      colorScheme="light"
       position="fixed"
       unfoldable={unfoldable}
       visible={sidebarShow}
@@ -50,12 +46,7 @@ const AppSidebar = () => {
           onClick={() => dispatch({ type: 'set', sidebarShow: false })}
         />
       </CSidebarHeader>
-
-      <CSidebarNav>
-        <SimpleBar>
-          <AppSidebarNav items={navigation} />
-        </SimpleBar>
-      </CSidebarNav>
+      <AppSidebarNav items={navigation} />
       <CSidebarFooter className="border-top d-none d-lg-flex">
         <CSidebarToggler
           onClick={() => dispatch({ type: 'set', sidebarUnfoldable: !unfoldable })}
diff --git a/src/components/AppSidebarNav.js b/src/components/AppSidebarNav.js
index 1cadaff25..6b73cec4e 100644
--- a/src/components/AppSidebarNav.js
+++ b/src/components/AppSidebarNav.js
@@ -1,11 +1,13 @@
 import React from 'react'
-import { NavLink, useLocation } from 'react-router-dom'
+import { NavLink } from 'react-router-dom'
 import PropTypes from 'prop-types'
 
-import { CBadge } from '@coreui/react'
+import SimpleBar from 'simplebar-react'
+import 'simplebar-react/dist/simplebar.min.css'
+
+import { CBadge, CNavLink, CSidebarNav } from '@coreui/react'
 
 export const AppSidebarNav = ({ items }) => {
-  const location = useLocation()
   const navLink = (name, icon, badge, indent = false) => {
     return (
       <>
@@ -30,30 +32,23 @@ export const AppSidebarNav = ({ items }) => {
     const { component, name, badge, icon, ...rest } = item
     const Component = component
     return (
-      <Component
-        {...(rest.to &&
-          !rest.items && {
-            component: NavLink,
-          })}
-        key={index}
-        {...rest}
-      >
-        {navLink(name, icon, badge, indent)}
+      <Component as="div" key={index}>
+        {rest.to || rest.href ? (
+          <CNavLink {...(rest.to && { as: NavLink })} {...rest}>
+            {navLink(name, icon, badge, indent)}
+          </CNavLink>
+        ) : (
+          navLink(name, icon, badge, indent)
+        )}
       </Component>
     )
   }
+
   const navGroup = (item, index) => {
     const { component, name, icon, items, to, ...rest } = item
     const Component = component
     return (
-      <Component
-        compact
-        idx={String(index)}
-        key={index}
-        toggler={navLink(name, icon)}
-        visible={location.pathname.startsWith(to)}
-        {...rest}
-      >
+      <Component compact as="div" key={index} toggler={navLink(name, icon)} {...rest}>
         {item.items?.map((item, index) =>
           item.items ? navGroup(item, index) : navItem(item, index, true),
         )}
@@ -62,10 +57,10 @@ export const AppSidebarNav = ({ items }) => {
   }
 
   return (
-    <React.Fragment>
+    <CSidebarNav as={SimpleBar}>
       {items &&
         items.map((item, index) => (item.items ? navGroup(item, index) : navItem(item, index)))}
-    </React.Fragment>
+    </CSidebarNav>
   )
 }
 

From ef4b3f054fca6090efa1f9ec8ea8bffc0feb70ba Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Mon, 11 Mar 2024 16:09:24 +0100
Subject: [PATCH 57/68] refactor: update `CNavLink` and `CDropdownItem` syntax
 to the latest version of CoreUI

---
 src/components/AppHeader.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/AppHeader.js b/src/components/AppHeader.js
index ac85c429b..b10bd7e12 100644
--- a/src/components/AppHeader.js
+++ b/src/components/AppHeader.js
@@ -53,7 +53,7 @@ const AppHeader = () => {
         </CHeaderToggler>
         <CHeaderNav className="d-none d-md-flex">
           <CNavItem>
-            <CNavLink to="/dashboard" component={NavLink}>
+            <CNavLink to="/dashboard" as={NavLink}>
               Dashboard
             </CNavLink>
           </CNavItem>
@@ -99,7 +99,7 @@ const AppHeader = () => {
               <CDropdownItem
                 active={colorMode === 'light'}
                 className="d-flex align-items-center"
-                component="button"
+                as="button"
                 type="button"
                 onClick={() => setColorMode('light')}
               >
@@ -108,7 +108,7 @@ const AppHeader = () => {
               <CDropdownItem
                 active={colorMode === 'dark'}
                 className="d-flex align-items-center"
-                component="button"
+                as="button"
                 type="button"
                 onClick={() => setColorMode('dark')}
               >
@@ -117,7 +117,7 @@ const AppHeader = () => {
               <CDropdownItem
                 active={colorMode === 'auto'}
                 className="d-flex align-items-center"
-                component="button"
+                as="button"
                 type="button"
                 onClick={() => setColorMode('auto')}
               >

From aa6d3634c75e0d77cfff5cba9c41aa8f4153103a Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Mon, 11 Mar 2024 16:11:58 +0100
Subject: [PATCH 58/68] chore: update dependencies and devDependencies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

@coreui/coreui               ^5.0.0-rc.1  →  ^5.0.0-rc-2
@coreui/react                ^5.0.0-rc.0  →  ^5.0.0-rc.2
@testing-library/jest-dom         ^6.1.4  →       ^6.4.2
@testing-library/react           ^14.1.2  →      ^14.2.1
@testing-library/user-event      ^14.5.1  →      ^14.5.2
chart.js                          ^4.4.0  →       ^4.4.2
classnames                        ^2.3.2  →       ^2.5.1
core-js                          ^3.33.3  →      ^3.36.0
eslint-config-prettier            ^9.0.0  →       ^9.1.0
eslint-plugin-prettier            ^5.0.1  →       ^5.1.3
prettier                           3.1.0  →        3.2.5
react-router-dom                 ^6.20.0  →      ^6.22.3
sass                             ^1.69.5  →      ^1.71.1
web-vitals                        ^3.5.0  →       ^3.5.2
---
 package.json | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/package.json b/package.json
index 0e5b26775..ef628b30a 100644
--- a/package.json
+++ b/package.json
@@ -23,36 +23,36 @@
   },
   "dependencies": {
     "@coreui/chartjs": "^4.0.0-rc.0",
-    "@coreui/coreui": "^5.0.0-rc.1",
+    "@coreui/coreui": "^5.0.0-rc-2",
     "@coreui/icons": "^3.0.1",
     "@coreui/icons-react": "^2.2.1",
-    "@coreui/react": "^5.0.0-rc.0",
+    "@coreui/react": "^5.0.0-rc.2",
     "@coreui/react-chartjs": "^3.0.0-rc.0",
     "@coreui/utils": "^2.0.2",
     "@popperjs/core": "^2.11.8",
-    "chart.js": "^4.4.0",
-    "classnames": "^2.3.2",
-    "core-js": "^3.33.3",
+    "chart.js": "^4.4.2",
+    "classnames": "^2.5.1",
+    "core-js": "^3.36.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-app-polyfill": "^3.0.0",
     "react-dom": "^18.2.0",
     "react-redux": "^8.1.3",
-    "react-router-dom": "^6.20.0",
+    "react-router-dom": "^6.22.3",
     "redux": "4.2.1",
     "simplebar-react": "^3.2.4"
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@testing-library/jest-dom": "^6.1.4",
-    "@testing-library/react": "^14.1.2",
-    "@testing-library/user-event": "^14.5.1",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-prettier": "^5.0.1",
-    "prettier": "3.1.0",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.1",
+    "@testing-library/user-event": "^14.5.2",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "prettier": "3.2.5",
     "react-scripts": "5.0.1",
-    "sass": "^1.69.5",
-    "web-vitals": "^3.5.0"
+    "sass": "^1.71.1",
+    "web-vitals": "^3.5.2"
   },
   "engines": {
     "node": ">=10",

From 54891c730b53c5782d1d96932cb1106b7fd075d2 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Mon, 11 Mar 2024 16:14:31 +0100
Subject: [PATCH 59/68] chore: update dependencies and devDependencies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

react-redux  ^8.1.3  →  ^9.1.0
redux         4.2.1  →   5.0.1
---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index ef628b30a..3b1991bf7 100644
--- a/package.json
+++ b/package.json
@@ -37,9 +37,9 @@
     "react": "^18.2.0",
     "react-app-polyfill": "^3.0.0",
     "react-dom": "^18.2.0",
-    "react-redux": "^8.1.3",
+    "react-redux": "^9.1.0",
     "react-router-dom": "^6.22.3",
-    "redux": "4.2.1",
+    "redux": "5.0.1",
     "simplebar-react": "^3.2.4"
   },
   "devDependencies": {

From 04866379c3f73a5c468bee36f874db65979014f8 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Mon, 11 Mar 2024 16:16:09 +0100
Subject: [PATCH 60/68] refactor(Sidebar): update color scheme

---
 src/components/AppSidebar.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/AppSidebar.js b/src/components/AppSidebar.js
index 3069aba10..021cb52c3 100644
--- a/src/components/AppSidebar.js
+++ b/src/components/AppSidebar.js
@@ -27,7 +27,7 @@ const AppSidebar = () => {
   return (
     <CSidebar
       className="border-end"
-      colorScheme="light"
+      colorScheme="dark"
       position="fixed"
       unfoldable={unfoldable}
       visible={sidebarShow}

From 6c7dc12eb9b5250aa668f8ea5ac121eb181be90c Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Mon, 11 Mar 2024 16:17:23 +0100
Subject: [PATCH 61/68] chore: update current year

---
 LICENSE                     | 2 +-
 README.md                   | 2 +-
 public/index.html           | 2 +-
 src/components/AppFooter.js | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/LICENSE b/LICENSE
index b4870dd91..eee6fcc1f 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2023 creativeLabs Łukasz Holeczek.
+Copyright (c) 2024 creativeLabs Łukasz Holeczek.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
diff --git a/README.md b/README.md
index 1df83973f..24a987dd0 100644
--- a/README.md
+++ b/README.md
@@ -174,6 +174,6 @@ CoreUI is an MIT-licensed open source project and is completely free to use. How
 
 ## Copyright and License
 
-copyright 2023 creativeLabs Łukasz Holeczek.   
+copyright 2024 creativeLabs Łukasz Holeczek.   
 
 Code released under [the MIT license](https://github.com/coreui/coreui-free-react-admin-template/blob/main/LICENSE).
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index 851936cc6..eeb29ba81 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,7 +3,7 @@
 * CoreUI Free React.js Admin Template
 * @version v5.0.0-rc.0
 * @link https://coreui.io/product/free-react-admin-template/
-* Copyright (c) 2023 creativeLabs Łukasz Holeczek
+* Copyright (c) 2024 creativeLabs Łukasz Holeczek
 * Licensed under MIT (https://github.com/coreui/coreui-free-react-admin-template/blob/main/LICENSE)
 -->
 <html lang="en">
diff --git a/src/components/AppFooter.js b/src/components/AppFooter.js
index 2f26d8b6e..fd126f460 100644
--- a/src/components/AppFooter.js
+++ b/src/components/AppFooter.js
@@ -8,7 +8,7 @@ const AppFooter = () => {
         <a href="https://coreui.io" target="_blank" rel="noopener noreferrer">
           CoreUI
         </a>
-        <span className="ms-1">&copy; 2023 creativeLabs.</span>
+        <span className="ms-1">&copy; 2024 creativeLabs.</span>
       </div>
       <div className="ms-auto">
         <span className="me-1">Powered by</span>

From 1d05bd4cd636da9a1ea884ea964085883323b93f Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Mon, 11 Mar 2024 18:34:00 +0100
Subject: [PATCH 62/68] refactor: migrate from CRA to Vite

---
 .env                   |  2 --
 .eslintrc.js           |  2 --
 .prettierignore        |  2 +-
 .prettierrc.js         |  6 ++---
 README.md              | 10 +++++---
 index.html             | 29 +++++++++++++++++++++
 jest.config.js         | 17 -------------
 jsconfig.json          |  6 -----
 package.json           | 27 ++++++++------------
 public/index.html      | 50 ------------------------------------
 src/App.test.js        |  9 -------
 src/index.js           | 12 +++------
 src/reportWebVitals.js | 13 ----------
 src/setupTests.js      |  5 ----
 vite.config.mjs        | 57 ++++++++++++++++++++++++++++++++++++++++++
 15 files changed, 110 insertions(+), 137 deletions(-)
 delete mode 100644 .env
 create mode 100644 index.html
 delete mode 100644 jest.config.js
 delete mode 100644 jsconfig.json
 delete mode 100644 public/index.html
 delete mode 100644 src/App.test.js
 delete mode 100644 src/reportWebVitals.js
 delete mode 100644 src/setupTests.js
 create mode 100644 vite.config.mjs

diff --git a/.env b/.env
deleted file mode 100644
index 0c48d3cda..000000000
--- a/.env
+++ /dev/null
@@ -1,2 +0,0 @@
-PORT=3000
-CHOKIDAR_USEPOLLING=true
diff --git a/.eslintrc.js b/.eslintrc.js
index e08f0b57a..e9c55eec0 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -13,8 +13,6 @@ module.exports = {
     },
   },
   extends: [
-    'react-app',
-    'react-app/jest',
     'plugin:react/recommended', // Uses the recommended rules from @eslint-plugin-react
     'plugin:prettier/recommended', // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
   ],
diff --git a/.prettierignore b/.prettierignore
index 849ddff3b..567609b12 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1 +1 @@
-dist/
+build/
diff --git a/.prettierrc.js b/.prettierrc.js
index 415ca0578..66f90b933 100644
--- a/.prettierrc.js
+++ b/.prettierrc.js
@@ -1,7 +1,7 @@
 module.exports = {
   semi: false,
-  trailingComma: "all",
+  trailingComma: 'all',
   singleQuote: true,
   printWidth: 100,
-  tabWidth: 2
-};
\ No newline at end of file
+  tabWidth: 2,
+}
diff --git a/README.md b/README.md
index 24a987dd0..896332553 100644
--- a/README.md
+++ b/README.md
@@ -116,7 +116,8 @@ Within the download you'll find the following directories and files, logically g
 ```
 coreui-free-react-admin-template
 ├── public/          # static files
-│   └── index.html   # html template
+│   ├── favicon.ico
+│   └── manifest.json
 │
 ├── src/             # project root
 │   ├── assets/      # images, icons, etc.
@@ -126,12 +127,15 @@ coreui-free-react-admin-template
 │   ├── views/       # application views
 │   ├── _nav.js      # sidebar navigation config
 │   ├── App.js
-│   ├── ...
 │   ├── index.js
 │   ├── routes.js    # routes config
 │   └── store.js     # template state example 
 │
-└── package.json
+├── index.html       # html template
+├── ...
+├── package.json
+├── ...
+└── vite.config.mjs  # vite config
 ```
 
 ## Documentation
diff --git a/index.html b/index.html
new file mode 100644
index 000000000..ceddb2461
--- /dev/null
+++ b/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<!--
+* CoreUI Free React.js Admin Template
+* @version v5.0.0-rc.0
+* @link https://coreui.io/product/free-react-admin-template/
+* Copyright (c) 2024 creativeLabs Łukasz Holeczek
+* Licensed under MIT (https://github.com/coreui/coreui-free-react-admin-template/blob/main/LICENSE)
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="description" content="CoreUI for React - Open Source Bootstrap Admin Template">
+    <meta name="author" content="Łukasz Holeczek">
+    <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,CSS,SCSS,HTML,RWD,Dashboard,React">
+    <title>CoreUI Free React.js Admin Template</title>
+    <link rel="manifest" href="/manifest.json">
+    <link rel="shortcut icon" href="/favicon.ico">
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app
+    </noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/index.js"></script>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/jest.config.js b/jest.config.js
deleted file mode 100644
index abf16ab93..000000000
--- a/jest.config.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright (c) 2013-present, creativeLabs Lukasz Holeczek.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-'use strict'
-
-module.exports = {
-  collectCoverageFrom: [
-    'src/**/*.{js,jsx}',
-    '!**/*index.js',
-    '!src/serviceWorker.js',
-    '!src/polyfill.js',
-  ],
-}
diff --git a/jsconfig.json b/jsconfig.json
deleted file mode 100644
index 63f923e44..000000000
--- a/jsconfig.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "compilerOptions": {
-    "baseUrl": "."
-  },
-  "include": ["src"]
-}
\ No newline at end of file
diff --git a/package.json b/package.json
index 3b1991bf7..56a6e587a 100644
--- a/package.json
+++ b/package.json
@@ -13,13 +13,10 @@
   "license": "MIT",
   "author": "The CoreUI Team (https://github.com/orgs/coreui/people)",
   "scripts": {
-    "build": "react-scripts build",
-    "eject": "react-scripts eject",
+    "build": "vite build",
     "lint": "eslint \"src/**/*.js\"",
-    "start": "react-scripts start",
-    "test": "react-scripts test",
-    "test:cov": "npm test -- --coverage --watchAll=false",
-    "test:debug": "react-scripts --inspect-brk test --runInBand"
+    "serve": "vite preview",
+    "start": "vite"
   },
   "dependencies": {
     "@coreui/chartjs": "^4.0.0-rc.0",
@@ -35,7 +32,6 @@
     "core-js": "^3.36.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
-    "react-app-polyfill": "^3.0.0",
     "react-dom": "^18.2.0",
     "react-redux": "^9.1.0",
     "react-router-dom": "^6.22.3",
@@ -43,19 +39,16 @@
     "simplebar-react": "^3.2.4"
   },
   "devDependencies": {
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^14.2.1",
-    "@testing-library/user-event": "^14.5.2",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.18",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.34.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "postcss": "^8.4.35",
     "prettier": "3.2.5",
-    "react-scripts": "5.0.1",
     "sass": "^1.71.1",
-    "web-vitals": "^3.5.2"
-  },
-  "engines": {
-    "node": ">=10",
-    "npm": ">=6"
+    "vite": "^5.1.6"
   }
 }
diff --git a/public/index.html b/public/index.html
deleted file mode 100644
index eeb29ba81..000000000
--- a/public/index.html
+++ /dev/null
@@ -1,50 +0,0 @@
-<!DOCTYPE html>
-<!--
-* CoreUI Free React.js Admin Template
-* @version v5.0.0-rc.0
-* @link https://coreui.io/product/free-react-admin-template/
-* Copyright (c) 2024 creativeLabs Łukasz Holeczek
-* Licensed under MIT (https://github.com/coreui/coreui-free-react-admin-template/blob/main/LICENSE)
--->
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="description" content="CoreUI for React - Open Source Bootstrap Admin Template">
-    <meta name="author" content="Łukasz Holeczek">
-    <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,CSS,SCSS,HTML,RWD,Dashboard,React">
-    <title>CoreUI Free React.js Admin Template</title>
-    <!--
-      manifest.json provides metadata used when your web app is added to the
-      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-  </head>
-  <body>
-    <noscript>
-      You need to enable JavaScript to run this app.
-    </noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
-</html>
diff --git a/src/App.test.js b/src/App.test.js
deleted file mode 100644
index 3a7a8cc56..000000000
--- a/src/App.test.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react'
-import { render, screen } from '@testing-library/react'
-import App from './App'
-
-test('renders learn react link', () => {
-  render(<App />)
-  const linkElement = screen.getByText(/learn react/i)
-  expect(linkElement).toBeInTheDocument()
-})
diff --git a/src/index.js b/src/index.js
index d19a3bcd3..11d6e8658 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,10 +1,9 @@
-import 'react-app-polyfill/stable'
-import 'core-js'
 import React from 'react'
 import { createRoot } from 'react-dom/client'
-import App from './App'
-import reportWebVitals from './reportWebVitals'
 import { Provider } from 'react-redux'
+import 'core-js'
+
+import App from './App'
 import store from './store'
 
 createRoot(document.getElementById('root')).render(
@@ -12,8 +11,3 @@ createRoot(document.getElementById('root')).render(
     <App />
   </Provider>,
 )
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals()
diff --git a/src/reportWebVitals.js b/src/reportWebVitals.js
deleted file mode 100644
index dc6ff0781..000000000
--- a/src/reportWebVitals.js
+++ /dev/null
@@ -1,13 +0,0 @@
-const reportWebVitals = (onPerfEntry) => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry)
-      getFID(onPerfEntry)
-      getFCP(onPerfEntry)
-      getLCP(onPerfEntry)
-      getTTFB(onPerfEntry)
-    })
-  }
-}
-
-export default reportWebVitals
diff --git a/src/setupTests.js b/src/setupTests.js
deleted file mode 100644
index 52aaef1d2..000000000
--- a/src/setupTests.js
+++ /dev/null
@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom'
diff --git a/vite.config.mjs b/vite.config.mjs
new file mode 100644
index 000000000..ee16a3581
--- /dev/null
+++ b/vite.config.mjs
@@ -0,0 +1,57 @@
+import { defineConfig, loadEnv } from 'vite'
+import react from '@vitejs/plugin-react'
+import path from 'node:path'
+import autoprefixer from 'autoprefixer'
+
+export default defineConfig(({ mode }) => {
+  // Load .env
+  const env = loadEnv(mode, process.cwd(), '')
+  process.env = { ...process.env, ...env }
+
+  return {
+    base: './',
+    build: {
+      outDir: 'build',
+    },
+    css: {
+      postcss: {
+        plugins: [
+          autoprefixer({}), // add options if needed
+        ],
+      },
+    },
+    define: {
+      // vitejs does not support process.env so we have to redefine it
+      'process.env': process.env,
+    },
+    esbuild: {
+      loader: 'jsx',
+      include: /src\/.*\.jsx?$/,
+      exclude: [],
+    },
+    optimizeDeps: {
+      force: true,
+      esbuildOptions: {
+        loader: {
+          '.js': 'jsx',
+        },
+      },
+    },
+    plugins: [react()],
+    resolve: {
+      alias: [
+        {
+          find: 'src/',
+          replacement: `${path.resolve(__dirname, 'src')}/`,
+        },
+      ],
+      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue', '.scss'],
+    },
+    server: {
+      port: 3000,
+      proxy: {
+        // https://vitejs.dev/config/server-options.html
+      },
+    },
+  }
+})

From b57048543adf84edfc7aaff7808f03eeed961065 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Fri, 22 Mar 2024 12:45:41 +0100
Subject: [PATCH 63/68] chore: clean-up

---
 vite.config.mjs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/vite.config.mjs b/vite.config.mjs
index ee16a3581..66ffff2cf 100644
--- a/vite.config.mjs
+++ b/vite.config.mjs
@@ -45,7 +45,7 @@ export default defineConfig(({ mode }) => {
           replacement: `${path.resolve(__dirname, 'src')}/`,
         },
       ],
-      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue', '.scss'],
+      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.scss'],
     },
     server: {
       port: 3000,

From 0a7196fc53ff844fe4427f50b4d36de54d299b03 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Fri, 22 Mar 2024 13:05:15 +0100
Subject: [PATCH 64/68] chore: update dependencies and devDependencies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

@coreui/coreui        ^5.0.0-rc-2  →  ^5.0.0-rc.3
@coreui/react         ^5.0.0-rc.2  →  ^5.0.0-rc.3
autoprefixer             ^10.4.18  →     ^10.4.19
core-js                   ^3.36.0  →      ^3.36.1
eslint-plugin-react       ^7.34.0  →      ^7.34.1
postcss                   ^8.4.35  →      ^8.4.38
sass                      ^1.71.1  →      ^1.72.0
vite                       ^5.1.6  →       ^5.2.2
---
 package.json | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index 56a6e587a..e70fe6eff 100644
--- a/package.json
+++ b/package.json
@@ -23,13 +23,13 @@
     "@coreui/coreui": "^5.0.0-rc-2",
     "@coreui/icons": "^3.0.1",
     "@coreui/icons-react": "^2.2.1",
-    "@coreui/react": "^5.0.0-rc.2",
+    "@coreui/react": "^5.0.0-rc.3",
     "@coreui/react-chartjs": "^3.0.0-rc.0",
     "@coreui/utils": "^2.0.2",
     "@popperjs/core": "^2.11.8",
     "chart.js": "^4.4.2",
     "classnames": "^2.5.1",
-    "core-js": "^3.36.0",
+    "core-js": "^3.36.1",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -40,15 +40,15 @@
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^4.2.1",
-    "autoprefixer": "^10.4.18",
+    "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.34.0",
+    "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "postcss": "^8.4.35",
+    "postcss": "^8.4.38",
     "prettier": "3.2.5",
-    "sass": "^1.71.1",
-    "vite": "^5.1.6"
+    "sass": "^1.72.0",
+    "vite": "^5.2.2"
   }
 }

From cc07a0478c98a23b20634bf0ebfe2917df6ba16f Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Fri, 22 Mar 2024 13:06:20 +0100
Subject: [PATCH 65/68] docs: update README

---
 README.md | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 896332553..101aa0a32 100644
--- a/README.md
+++ b/README.md
@@ -40,7 +40,8 @@ CoreUI is meant to be the UX game changer. Pure & transparent code is devoid of
 
 * [CoreUI Free Bootstrap Admin Template](https://github.com/coreui/coreui-free-bootstrap-admin-template)
 * [CoreUI Free Angular Admin Template](https://github.com/coreui/coreui-free-angular-admin-template)
-* [CoreUI Free React.js Admin Template](https://github.com/coreui/coreui-free-react-admin-template)
+* [CoreUI Free React.js Admin Template (Vite)](https://github.com/coreui/coreui-free-react-admin-template)
+* [CoreUI Free React.js Admin Template (Create React App)](https://github.com/coreui/coreui-free-react-admin-template-cra)
 * [CoreUI Free Vue.js Admin Template](https://github.com/coreui/coreui-free-vue-admin-template)
 
 ## CoreUI PRO
@@ -140,7 +141,7 @@ coreui-free-react-admin-template
 
 ## Documentation
 
-The documentation for the CoreUI Admin Template is hosted at our website [CoreUI for React](https://coreui.io/react/)
+The documentation for the CoreUI Admin Template is hosted at our website [CoreUI for React](https://coreui.io/react/docs/templates/installation/)
 
 ## Versioning
 

From 49af4079f9166012c2d76bb806aae5292e7992e9 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Fri, 22 Mar 2024 13:06:58 +0100
Subject: [PATCH 66/68] release: v5.0.0-rc.1

---
 index.html   | 2 +-
 package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index ceddb2461..2e283fb93 100644
--- a/index.html
+++ b/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <!--
 * CoreUI Free React.js Admin Template
-* @version v5.0.0-rc.0
+* @version v5.0.0-rc.1
 * @link https://coreui.io/product/free-react-admin-template/
 * Copyright (c) 2024 creativeLabs Łukasz Holeczek
 * Licensed under MIT (https://github.com/coreui/coreui-free-react-admin-template/blob/main/LICENSE)
diff --git a/package.json b/package.json
index e70fe6eff..4e1c09bf6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coreui/coreui-free-react-admin-template",
-  "version": "5.0.0-rc.0",
+  "version": "5.0.0-rc.1",
   "description": "CoreUI Free React Admin Template",
   "homepage": ".",
   "bugs": {

From 9b759a0a21fe0087ff0b81485fe4138598f4b3da Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Thu, 28 Mar 2024 14:53:10 +0100
Subject: [PATCH 67/68] chore: update dependencies and devDependencies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

@coreui/chartjs        ^4.0.0-rc.0  →  ^4.0.0
@coreui/coreui         ^5.0.0-rc-2  →  ^5.0.0
@coreui/react          ^5.0.0-rc.3  →  ^5.0.0
@coreui/react-chartjs  ^3.0.0-rc.0  →  ^3.0.0
vite                        ^5.2.2  →  ^5.2.6
---
 package.json | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 4e1c09bf6..9f27617c2 100644
--- a/package.json
+++ b/package.json
@@ -19,12 +19,12 @@
     "start": "vite"
   },
   "dependencies": {
-    "@coreui/chartjs": "^4.0.0-rc.0",
-    "@coreui/coreui": "^5.0.0-rc-2",
+    "@coreui/chartjs": "^4.0.0",
+    "@coreui/coreui": "^5.0.0",
     "@coreui/icons": "^3.0.1",
     "@coreui/icons-react": "^2.2.1",
-    "@coreui/react": "^5.0.0-rc.3",
-    "@coreui/react-chartjs": "^3.0.0-rc.0",
+    "@coreui/react": "^5.0.0",
+    "@coreui/react-chartjs": "^3.0.0",
     "@coreui/utils": "^2.0.2",
     "@popperjs/core": "^2.11.8",
     "chart.js": "^4.4.2",
@@ -49,6 +49,6 @@
     "postcss": "^8.4.38",
     "prettier": "3.2.5",
     "sass": "^1.72.0",
-    "vite": "^5.2.2"
+    "vite": "^5.2.6"
   }
 }

From b819b813f79bc9f691dbc2bbfff1ae2c68cb08bc Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Thu, 28 Mar 2024 14:54:26 +0100
Subject: [PATCH 68/68] release: v5.0.0

---
 index.html   | 2 +-
 package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 2e283fb93..e958fb959 100644
--- a/index.html
+++ b/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <!--
 * CoreUI Free React.js Admin Template
-* @version v5.0.0-rc.1
+* @version v5.0.0
 * @link https://coreui.io/product/free-react-admin-template/
 * Copyright (c) 2024 creativeLabs Łukasz Holeczek
 * Licensed under MIT (https://github.com/coreui/coreui-free-react-admin-template/blob/main/LICENSE)
diff --git a/package.json b/package.json
index 9f27617c2..31b7c3fff 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coreui/coreui-free-react-admin-template",
-  "version": "5.0.0-rc.1",
+  "version": "5.0.0",
   "description": "CoreUI Free React Admin Template",
   "homepage": ".",
   "bugs": {