Dark Mode baby!

.env

@@ -1,3 +1,4 @@
 PORT=3000
 CHOKIDAR_USEPOLLING=true
-BROWSER=none
+BROWSER=none
+GENERATE_SOURCEMAP=false

.vscode/launch.json

@@ -12,7 +12,11 @@
  "name": "Run frontend",
  "request": "launch",
  "type": "node-terminal",
- "preLaunchTask": "RunAPI"
+ "preLaunchTask": "RunAPI",
+ "resolveSourceMapLocations": [
+ "${workspaceFolder}/**",
+ "!**/node_modules/**"
+ ]
  },
  {
  "name": "Launch Edge",

package.json

@@ -1,5 +1,5 @@
 {
- "name": "CIPP",
+ "name": "cipp",
  "version": "1.5.1",
  "description": "The CyberDrain Improved Partner Portal is a portal to help manage administration for Microsoft Partners.",
  "homepage": "https://cipp.app/",
@@ -59,22 +59,24 @@
  "react-dom": "^17.0.2",
  "react-final-form": "^6.5.7",
  "react-final-form-listeners": "^1.0.3",
+ "react-media-hook": "^0.4.9",
  "react-redux": "^7.2.5",
  "react-router-dom": "^6.1.1",
  "react-select-search": "^3.0.8",
  "redux": "4.1.1",
  "redux-persist": "^6.0.0",
  "simplebar-react": "^2.3.6",
+ "source-map-loader": "^3.0.0",
  "styled-components": "^5.3.3"
  },
  "devDependencies": {
  "auto-changelog": "~2.3.0",
  "eslint-config-prettier": "^8.3.0",
  "eslint-plugin-prettier": "^4.0.0",
  "prettier": "2.4.1",
- "react-scripts": "4.0.3",
+ "react-scripts": "^5.0.0",
  "redux-immutable-state-invariant": "^2.1.0",
- "sass": "^1.43.2"
+ "sass": "^1.44"
  },
  "engines": {
  "node": "16",

src/App.js

@@ -1,5 +1,5 @@
-import React, { Component, Suspense } from 'react'
-import { HashRouter, BrowserRouter, Route, Routes, Navigate } from 'react-router-dom'
+import React, { Suspense } from 'react'
+import { BrowserRouter, Route, Routes, Navigate } from 'react-router-dom'
 import { PrivateRoute } from './components/PrivateRoute'
 import './scss/style.scss'
 import { FullScreenLoading } from './components'

src/components/AppSidebar.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 
-import { CSidebar, CSidebarBrand, CSidebarNav, CSidebarToggler } from '@coreui/react'
+import { CSidebar, CSidebarBrand, CSidebarNav } from '@coreui/react'
 import { CImage } from '@coreui/react'
 
 import { AppSidebarNav } from './AppSidebarNav'

src/components/FastSwitcher.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { CFormInput, CModal, CModalBody } from '@coreui/react'
-import { hideSwitcher, initialize, mapNav } from '../store/features/switcher'
+import { hideSwitcher, mapNav } from '../store/features/switcher'
 import { useNavigate } from 'react-router-dom'
 import PropTypes from 'prop-types'
 //import FuzzySearch from 'fuzzy-search'

src/components/Toasts.js

@@ -1,23 +1,9 @@
 import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 import { useDispatch, useSelector } from 'react-redux'
-import {
- CToast,
- CToastBody,
- CToaster,
- CToastClose,
- CToastHeader,
- CCollapse,
- CCard,
- CCardBody,
-} from '@coreui/react'
+import { CToast, CToastBody, CToaster, CToastHeader, CCollapse } from '@coreui/react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import {
- faExpandAlt,
- faCaretSquareUp,
- faCompressAlt,
- faTimes,
-} from '@fortawesome/free-solid-svg-icons'
+import { faExpandAlt, faCompressAlt, faTimes } from '@fortawesome/free-solid-svg-icons'
 import { closeToast } from '../store/features/toasts'
 
 const Toasts = () => {

src/components/cipp/CellProgressBar.js

@@ -35,7 +35,7 @@ export const CellProgressBar = ({ value, reverse = false }) => {
  if (value) {
  return (
  <div style={{ width: '100%' }}>
- <CProgress className="mb-3">
+ <CProgress>
  <CProgressBar value={value} color={color}>
  {value}
  </CProgressBar>

src/components/cipp/CippDatatable.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import ExportPDFButton from 'src/components/cipp/PdfButton'
 import { CSpinner, CFormInput } from '@coreui/react'
-import DataTable from 'react-data-table-component'
+import DataTable, { createTheme } from 'react-data-table-component'
 import { useListDatatableQuery } from '../../store/api/datatable'
 import PropTypes from 'prop-types'
 
@@ -35,7 +35,7 @@ export default function CippDatatable({
  reportName,
  columns = [],
  tableProps: {
- theme = 'dark',
+ theme = 'cyberdrain',
  pagination = true,
  responsive = true,
  dense = true,
@@ -60,6 +60,40 @@ export default function CippDatatable({
  (item) => JSON.stringify(item).toLowerCase().indexOf(filterText.toLowerCase()) !== -1,
  )
 
+ createTheme(
+ 'cyberdrain',
+ {
+ text: {
+ primary: 'var(--cipp-table-primary-colour)',
+ secondary: 'var(--cipp-table-secondary-colour)',
+ },
+ background: {
+ default: 'var(--cipp-table-bg)',
+ },
+ context: {
+ background: 'var(--cipp-table-context-bg)',
+ text: 'var(--cipp-table-context-color)',
+ },
+ divider: {
+ default: 'var(--cipp-table-divider)',
+ },
+ button: {
+ default: 'var(--cipp-table-button-bg)',
+ hover: 'var(--cipp-table-button-hover-bg)',
+ focus: 'var(--cipp-table-button-focus-bg)',
+ disabled: 'var(--cipp-table-button-disabled-bg)',
+ },
+ sortFocus: {
+ default: 'var(--cipp-table-sort-focus-bg)',
+ },
+ striped: {
+ default: 'var(--cipp-table-striped-bg)',
+ text: 'var(--cipp-table-striped-color)',
+ },
+ },
+ 'default',
+ )
+
  const subHeaderComponentMemo = React.useMemo(() => {
  const handleClear = () => {
  if (filterText) {
@@ -102,7 +136,7 @@ export default function CippDatatable({
  {!isFetching && !error && (
  <div>
  <DataTable
- // theme={theme}
+ theme={theme}
  subHeader={subheader}
  selectableRows={selectableRows}
  onSelectedRowsChange={onSelectedRowsChange}

src/components/cipp/StatusIcon.js

@@ -0,0 +1,33 @@
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import {
+ faCheckCircle,
+ faExclamationTriangle,
+ faTimesCircle,
+} from '@fortawesome/free-solid-svg-icons'
+import PropTypes from 'prop-types'
+
+const IconGreenCheck = () => <FontAwesomeIcon icon={faCheckCircle} className="text-success mx-2" />
+const IconRedX = () => <FontAwesomeIcon icon={faTimesCircle} className="text-danger mx-2" />
+const IconWarning = () => (
+ <FontAwesomeIcon icon={faExclamationTriangle} className="text-warning mx-2" />
+)
+
+function StatusIcon(props) {
+ const finalState = props.finalState
+ if (finalState === 'Pass') {
+ return <IconGreenCheck />
+ } else if (finalState === 'Fail') {
+ return <IconRedX />
+ } else if (finalState === 'Warn') {
+ return <IconWarning />
+ } else {
+ return ''
+ }
+}
+
+export default StatusIcon
+
+StatusIcon.propTypes = {
+ finalState: PropTypes.string,
+}

src/components/cipp/ThemeSwitcher.js

@@ -2,20 +2,23 @@ import React from 'react'
 import { CButtonGroup, CButton, CCardTitle, CCard, CCardBody } from '@coreui/react'
 import { useDispatch, useSelector } from 'react-redux'
 import { setCurrentTheme } from 'src/store/features/app'
+import { useMediaPredicate } from 'react-media-hook'
 
 function caps(str) {
  return str.charAt(0).toUpperCase() + str.slice(1)
 }
 
 const ThemeSwitcher = () => {
  const dispatch = useDispatch()
- const theme = useSelector((state) => state.app.currentTheme)
+ const preferredTheme = useMediaPredicate('(prefers-color-scheme: dark)') ? 'impact' : 'cyberdrain'
+ const theme = useSelector((state) => state.app.currentTheme) || preferredTheme
  const themes = useSelector((state) => state.app.themes)
 
  const SwitchTheme = (t) => {
  dispatch(setCurrentTheme({ theme: t }))
  document.body.classList = []
- document.body.classList.add(t)
+ document.body.classList.add(`theme-${t}`)
+ document.body.dataset.theme = t
  }
 
  return (

src/components/cipp/index.js

@@ -5,6 +5,7 @@ import { CellNullText, cellNullTextFormatter } from './CellNullText'
 import { CellProgressBar, cellProgressBarFormatter } from './CellProgressBar'
 import CippDatatable from './CippDatatable'
 import PdfButton from './PdfButton'
+import StatusIcon from './StatusIcon'
 import TenantSelector from './TenantSelector'
 import TenantSelectorMultiple from './TenantSelectorMultiple'
 import ThemeSwitcher from './ThemeSwitcher'
@@ -22,6 +23,7 @@ export {
  cellProgressBarFormatter,
  CippDatatable,
  PdfButton,
+ StatusIcon,
  TenantSelector,
  TenantSelectorMultiple,
  ThemeSwitcher,

src/components/header/AppHeaderDropdown.js

@@ -1,13 +1,12 @@
 import React from 'react'
 import { CAvatar, CDropdown, CDropdownHeader, CDropdownMenu, CDropdownToggle } from '@coreui/react'
-import { faUser, faCog, faBars, faBook } from '@fortawesome/free-solid-svg-icons'
+import { faUser, faBook } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Link } from 'react-router-dom'
-import avatar0 from './../../assets/images/avatars/0.jpg'
 import { authApi } from '../../store/api/auth'
 
 const AppHeaderDropdown = () => {
- const { data: profile, isLoading } = authApi.endpoints.loadClientPrincipal.useQueryState()
+ const { data: profile } = authApi.endpoints.loadClientPrincipal.useQueryState()
  return (
  <CDropdown variant="nav-item">
  <CDropdownToggle placement="bottom-end" className="py-0" caret={false}>
@@ -16,7 +15,7 @@ const AppHeaderDropdown = () => {
  </CAvatar>
  </CDropdownToggle>
  <CDropdownMenu className="pt-0" placement="bottom-end">
- <CDropdownHeader className="bg-light fw-semibold py-2">Settings</CDropdownHeader>
+ <CDropdownHeader className="fw-semibold py-2">Settings</CDropdownHeader>
  <Link className="dropdown-item" to="/profile/view">
  <FontAwesomeIcon icon={faUser} className="me-2" />
  Profile

src/layout/DefaultLayout.js

@@ -12,7 +12,9 @@ import FastSwitcher from '../components/FastSwitcher'
 const DefaultLayout = () => {
  const theme = useSelector((state) => state.app.currentTheme)
  useEffect(() => {
- document.body.classList.add(theme)
+ document.body.classList = []
+ document.body.classList.add(`theme-${theme}`)
+ document.body.dataset.theme = theme
  })
 
  const dispatch = useDispatch()
@@ -29,7 +31,7 @@ const DefaultLayout = () => {
  <SharedModal />
  <Toasts />
  <AppSidebar />
- <div className="wrapper d-flex flex-column min-vh-100 bg-light">
+ <div className="wrapper d-flex flex-column min-vh-100">
  <AppHeader />
  <div className="body flex-grow-1 px-3">
  <CContainer fluid>

src/scss/_custom.scss

@@ -1,6 +1,5 @@
 // Here you can add other styles
 @import 'tenantselector';
-@import '_themes';
 
 // https://gist.github.com/ffoodd/000b59f431e3e64e4ce1a24d5bb36034
 .sr-only {
@@ -38,19 +37,6 @@
  white-space: normal !important;
 }
 
-body {
- @include default();
- &.cyberdrain {
- @include cyberdrain();
- }
- &.dark {
- @include dark();
- }
- @media (prefers-color-scheme: dark) {
- @include dark();
- }
-}
-
 //added some code for slightly prettier scrollbars
 
 /* custom scrollbar */
@@ -72,3 +58,34 @@ body {
 ::-webkit-scrollbar-thumb:hover {
  background-color: #a8bbbf;
 }
+
+/* cui overrides */
+
+.card {
+ border-radius: var(--cipp-border-radius);
+ &.page-card {
+ .card-header {
+ background: var(--cui-body-bg);
+ }
+ .card-title {
+ font-size: 1.25rem;
+ }
+ }
+ &.options-card {
+ .card-title {
+ line-height: 2rem;
+ margin-bottom: 0rem;
+ }
+ }
+}
+
+.form-control {
+ border-radius: var(--cipp-border-radius);
+}
+
+.form-select {
+ border-radius: var(--cipp-border-radius);
+ .select-search__input {
+ border: 0px;
+ }
+}