WIP Update coreui to v3.0.0

package-lock.json

@@ -1196,20 +1196,9 @@
       }
     },
     "@coreui/coreui": {
-      "version": "2.1.16",
-      "resolved": "https://registry.npmjs.org/@coreui/coreui/-/coreui-2.1.16.tgz",
-      "integrity": "sha512-1YOnQAlcX2bIgnaX3k9GKaN4lD+wKam7tdDfFj7/ZQTN1XG3dwDELHp4aagWQs78ix2CCO1LyeLrzGpsMcLW3Q==",
-      "requires": {
-        "@coreui/coreui-plugin-npm-postinstall": "^1.0.2",
-        "bootstrap": "^4.3.1",
-        "core-js": "^3.3.4",
-        "regenerator-runtime": "^0.13.3"
-      }
-    },
-    "@coreui/coreui-plugin-npm-postinstall": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@coreui/coreui-plugin-npm-postinstall/-/coreui-plugin-npm-postinstall-1.0.2.tgz",
-      "integrity": "sha512-yeeoWp+bNS84nP1977Y8UCiQ9pssO+f4QuVj3i0/gYZFjjvOgxx0dnyWhtowD5sLYnCRMPlPpqyjwXze3SlkYg=="
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@coreui/coreui/-/coreui-3.0.0.tgz",
+      "integrity": "sha512-D62oLjBM3xqipQwwa29bYsEo3LUhge0Ub2tSrtXONz71oGmMxMNCjmYebkig0dM+iYuekYfusjeAP8sxpbRlHA=="
     },
     "@csstools/convert-colors": {
       "version": "1.4.0",
@@ -3770,11 +3759,6 @@
       "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
       "dev": true
     },
-    "bootstrap": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.4.1.tgz",
-      "integrity": "sha512-tbx5cHubwE6e2ZG7nqM3g/FZ5PQEDMWmMGNrCUBVRPHXTJaH7CBDdsLeu3eCh3B1tzAxTnAbtmrzvWEvT2NNEA=="
-    },
     "bootstrap-daterangepicker": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/bootstrap-daterangepicker/-/bootstrap-daterangepicker-3.0.5.tgz",

package.json

@@ -37,7 +37,7 @@
     "typescript": "^3.8.3"
   },
   "dependencies": {
-    "@coreui/coreui": "^2.1.16",
+    "@coreui/coreui": "^3.0.0",
     "@fortawesome/fontawesome-free": "^5.13.0",
     "@reduxjs/toolkit": "^1.3.2",
     "bootstrap-daterangepicker": "^3.0.5",

public/index.html

@@ -39,7 +39,7 @@
     <!-- End Single Page Apps for GitHub Pages -->
   </head>
 
-  <body class="app header-fixed sidebar-fixed sidebar-lg-show boxcontainer background-image">
+  <body class="c-app c-header-fixed c-sidebar-fixed c-sidebar-lg-show boxcontainer background-image">
     <noscript>
       <p style="text-align: center">Please enable JavaScript! This web interface will not work without it.</p>
     </noscript>

src/components/common/Footer.tsx

@@ -17,7 +17,7 @@ const Footer = (props: any) => {
   const { t } = props;
 
   return (
-    <footer className="app-footer">
+    <footer className="c-footer">
       <div>
         <i className="fab fa-paypal" />
         <strong>

src/components/common/Header.tsx

@@ -9,7 +9,6 @@
  * Please see LICENSE file for your rights under this license. */
 
 import React, { MouseEvent } from "react";
-import { Link } from "react-router-dom";
 import { TimeRangeSelectorContainer } from "../dashboard/TimeRangeSelector";
 import api from "../../util/api";
 
@@ -32,35 +31,19 @@ export const mobileSidebarHide = () => {
   document.body.classList.remove("sidebar-show");
 };
 
-//const asideToggle = e => {
-//  e.preventDefault();
-//  document.body.classList.toggle('aside-menu-hidden');
-//};
-
 export default () => (
-  <header className="app-header navbar">
+  <header className="c-header c-header-light c-header-fixed">
     <button
-      className="navbar-toggler d-lg-none text-white ml-3"
+      className="c-header-toggler d-lg-none text-dark ml-3"
       onClick={mobileSidebarToggle}
       type="button"
     >
       &#9776;
     </button>
-    <Link to="/dashboard" className="navbar-brand text-center">
-      <span className="text-white" style={{ lineHeight: "40px" }}>
-        <span className="navbar-brand-full">
-          Pi-
-          <b>hole</b>
-        </span>
-        <span className="navbar-brand-minimized">
-          P<b>h</b>
-        </span>
-      </span>
-    </Link>
-    <ul className="nav navbar-nav d-md-down-none mr-auto">
-      <li className="nav-item">
+    <ul className="c-header-nav navbar-nav d-md-down-none mr-auto">
+      <li className="c-header-nav-item">
         <button
-          className="nav-link navbar-toggler text-white sidebar-toggler"
+          className="c-header-nav-link c-header-toggler text-white sidebar-toggler"
           type="button"
           onClick={sidebarMinimize}
         >

src/components/common/NavButton.tsx

@@ -19,14 +19,14 @@ export interface NavButtonProps {
 }
 
 const NavButton = ({ name, icon, onClick }: NavButtonProps) => (
-  <li className="nav-item">
+  <li className="c-header-nav-item">
     <a
       href="#"
       onClick={e => {
         e.preventDefault();
         onClick(e);
       }}
-      className="nav-link"
+      className="c-header-nav-link"
     >
       <i className={"nav-icon " + icon} />
       {name}

src/components/common/NavDropdown.tsx

@@ -20,15 +20,19 @@ export interface NavDropdownProps {
 }
 
 export default ({ name, icon, isOpen, children }: NavDropdownProps) => (
-  <li className={"nav-item nav-dropdown" + (isOpen ? " open" : "")}>
+  <li
+    className={
+      "c-sidebar-nav-item c-sidebar-nav-dropdown" + (isOpen ? " open" : "")
+    }
+  >
     <button
-      className="nav-link nav-dropdown-toggle"
+      className="c-sidebar-nav-link c-sidebar-nav-dropdown-toggle"
       onClick={handleDropdownClick}
     >
       <i className={"nav-icon " + icon} />
       {name}
     </button>
-    <ul className="nav-dropdown-items">{children}</ul>
+    <ul className="c-sidebar-nav-dropdown-items">{children}</ul>
   </li>
 );
 

src/components/common/Sidebar.tsx

@@ -10,7 +10,7 @@
 
 import React, { Fragment, ReactElement, Suspense } from "react";
 import { WithTranslation, withTranslation } from "react-i18next";
-import { NavLink } from "react-router-dom";
+import { Link, NavLink } from "react-router-dom";
 import { Nav, NavItem } from "reactstrap";
 import logo from "../../img/logo.svg";
 import { mobileSidebarHide } from "./Header";
@@ -43,7 +43,7 @@ export const PiholeNavItem = ({
     <NavLink
       to={item.url}
       onClick={mobileSidebarHide}
-      className="nav-link"
+      className="c-sidebar-nav-link"
       activeClassName="active"
     >
       <i className={"nav-icon " + item.icon} />
@@ -138,10 +138,21 @@ export interface SidebarProps extends WithTranslation {
  * @constructor
  */
 const Sidebar = ({ items, t, location }: SidebarProps): ReactElement => (
-  <div className="sidebar">
-    <nav className="sidebar-nav">
+  <div className="c-sidebar c-sidebar-dark c-sidebar-fixed c-sidebar-lg-show">
+    <div className="c-sidebar-brand d-md-down-none">
+      <Link to="/dashboard" className="c-sidebar-brand">
+        <span className="c-header-brand-full">
+          Pi-
+          <b>hole</b>
+        </span>
+        <span className="c-header-brand-minimized">
+          P<b>h</b>
+        </span>
+      </Link>
+    </div>
+    <nav className="c-sidebar-nav ps ps--active-y">
       <Nav>
-        <li className="nav-title" style={{ textTransform: "none" }}>
+        <li className="c-sidebar-nav-title" style={{ textTransform: "none" }}>
           <img
             src={logo}
             className="img-responsive float-left"

src/components/common/__tests__/Header.test.tsx

@@ -61,7 +61,7 @@ it("toggle the sidebar on mobile when clicked", () => {
   expect(document.body.classList).not.toContain("sidebar-show");
 
   wrapper
-    .find(".navbar-toggler")
+    .find(".c-header-toggler")
     .first()
     .simulate("click", { preventDefault: () => {} });
 

src/containers/Full.tsx

@@ -24,12 +24,12 @@ import {
 import { GlobalContextProvider } from "../components/common/context";
 
 export default (props: any) => (
-  <div className="app">
+  <div className="c-wrapper">
     <GlobalContextProvider>
       <Header />
-      <div className="app-body">
+      <div className="c-body">
         <Sidebar items={nav} {...props} />
-        <main className="main" onClick={mobileSidebarHide}>
+        <main className="c-main" onClick={mobileSidebarHide}>
           <div className="container-fluid mt-4">
             <Suspense fallback={null}>
               <Switch>

src/scss/_custom.scss

@@ -1,11 +1,11 @@
 @media (max-width: 992px) and (min-width: 576px) {
-  .sidebar-show.sidebar-fixed.sidebar-minimized .main,
-  .sidebar-show.sidebar-fixed.sidebar-minimized .app-footer {
+  .sidebar-show.sidebar-fixed.sidebar-minimized .c-main,
+  .sidebar-show.sidebar-fixed.sidebar-minimized .c-footer {
     margin-left: $sidebar-width !important;
   }
 }
 
-.app-body {
+.c-body {
   background-color: #ecf0f5;
 }
 
@@ -120,7 +120,7 @@
   box-shadow: 0 0 8px rgba(0, 0, 0, .5);
 }
 
-.boxcontainer .app-header {
+.boxcontainer .c-header {
   max-width: 1250px;
   border-bottom-color: $navbar-bg;
 }
@@ -134,15 +134,15 @@
   font-size: 3em;
 }
 
-.app-header .navbar-toggler {
+.c-header .c-header-toggler {
   min-width: initial;
 }
 
-.sidebar .nav-item {
+.c-sidebar .c-sidebar-nav-item {
   cursor: pointer;
 }
 
-.sidebar button.nav-dropdown-toggle {
+.c-sidebar button.c-sidebar-nav-dropdown-toggle {
   border: none;
   width: 100%;
   text-align: left;
@@ -156,7 +156,7 @@
   margin-top: .2rem;
 }
 
-.nav-item button {
+.c-header-nav-item button {
   cursor: pointer;
 }
 

src/scss/_ie-fix.scss

@@ -1,3 +1,3 @@
-html body .app.flex-row.align-items-center {
+html body .c-wrapper.flex-row.align-items-center {
   height: 100vh;
 }

src/scss/vendors/_variables.scss

@@ -1,7 +1,3 @@
 // Override Boostrap variables
 @import "../variables";
-@import "~@coreui/coreui/scss/bootstrap/variables";
-@import "~bootstrap/scss/mixins";
-@import "~bootstrap/scss/functions";
-@import "~bootstrap/scss/variables";
 @import "~@coreui/coreui/scss/variables";