diff --git a/src/components/cipp/CippDatatable.js b/src/components/cipp/CippDatatable.js
index b529b93e9377..ef2c7e6742c1 100644
--- a/src/components/cipp/CippDatatable.js
+++ b/src/components/cipp/CippDatatable.js
@@ -87,6 +87,10 @@ export default function CippDatatable({
sortFocus: {
default: 'var(--cipp-table-sort-focus-bg)',
},
+ highlightOnHover: {
+ default: 'var(--cipp-table-highlight-on-hover-bg)',
+ text: 'var(--cipp-table-highlight-on-hover-color)',
+ },
striped: {
default: 'var(--cipp-table-striped-bg)',
text: 'var(--cipp-table-striped-color)',
diff --git a/src/components/cipp/PdfButton.js b/src/components/cipp/PdfButton.js
index 7b0563d40c41..f4dcee543118 100644
--- a/src/components/cipp/PdfButton.js
+++ b/src/components/cipp/PdfButton.js
@@ -3,6 +3,8 @@ import { CButton } from '@coreui/react'
import jsPDF from 'jspdf'
import 'jspdf-autotable'
import PropTypes from 'prop-types'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faFilePdf } from '@fortawesome/free-solid-svg-icons'
function ExportPDFButton(props) {
const exportPDF = (pdfData, pdfHeaders, pdfSize = 'A4', reportName) => {
@@ -40,10 +42,10 @@ function ExportPDFButton(props) {
return (
exportPDF(props.pdfData, props.pdfHeaders, props.pdfSize, props.reportName)}
>
- PDF
+ PDF
)
}
diff --git a/src/components/cipp/StatusIcon.js b/src/components/cipp/StatusIcon.js
index fdb222fade81..940b3e6d417f 100644
--- a/src/components/cipp/StatusIcon.js
+++ b/src/components/cipp/StatusIcon.js
@@ -14,15 +14,35 @@ const IconWarning = () => (
)
function StatusIcon(props) {
- const finalState = props.finalState
- if (finalState === 'Pass') {
- return
- } else if (finalState === 'Fail') {
- return
- } else if (finalState === 'Warn') {
- return
- } else {
- return ''
+ if (props.type === 'finalstate') {
+ const finalState = props.finalState
+ if (finalState === 'Pass') {
+ return
+ } else if (finalState === 'Fail') {
+ return
+ } else if (finalState === 'Warn') {
+ return
+ } else {
+ return ''
+ }
+ } else if (props.type === 'boolean') {
+ const status = props.status
+ if (status === true) {
+ return
+ } else if (status === false) {
+ return
+ } else {
+ return ''
+ }
+ } else if (props.type === 'negatedboolean') {
+ const status = props.status
+ if (status === false) {
+ return
+ } else if (status === true) {
+ return
+ } else {
+ return ''
+ }
}
}
@@ -30,4 +50,5 @@ export default StatusIcon
StatusIcon.propTypes = {
finalState: PropTypes.string,
+ status: PropTypes.bool,
}
diff --git a/src/routes.js b/src/routes.js
index c15e8166a23c..2e8ab367f12d 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -9,6 +9,7 @@ const AddUser = React.lazy(() => import('./views/identity/administration/AddUser
const EditUser = React.lazy(() => import('./views/identity/administration/EditUser'))
const ViewUser = React.lazy(() => import('./views/identity/administration/ViewUser'))
const Groups = React.lazy(() => import('./views/identity/administration/Groups'))
+const AddGroup = React.lazy(() => import('./views/identity/administration/AddGroup'))
const EditGroup = React.lazy(() => import('./views/identity/administration/EditGroup'))
const ViewGroup = React.lazy(() => import('./views/identity/administration/ViewGroup'))
const Roles = React.lazy(() => import('./views/identity/administration/Roles'))
@@ -114,313 +115,80 @@ const routes = [
{ path: '/identity/administration/ViewBec', name: 'View BEC', component: ViewBEC },
{ path: '/identity/administration', name: 'Administration' },
{ path: '/identity/administration/users', name: 'Users', component: Users },
+ { path: '/identity/administration/groups/add', name: 'Add Group', component: AddGroup },
{ path: '/identity/administration/groups/edit', name: 'Edit Group', component: EditGroup },
- {
- path: '/identity/administration/groups/view',
- name: 'View Group',
- component: ViewGroup,
- },
+ { path: '/identity/administration/groups/view', name: 'View Group', component: ViewGroup },
{ path: '/identity/administration/groups', name: 'Groups', component: Groups },
{ path: '/identity/administration/roles', name: 'Roles', component: Roles },
{ path: '/teams-share/teams/business-voice', name: 'BusinessVoice', component: BusinessVoice },
- {
- path: '/identity/administration/offboarding-wizard',
- name: 'Offboarding Wizard',
- component: OffboardingWizard,
- },
+ { path: '/identity/administration/offboarding-wizard', name: 'Offboarding Wizard', component: OffboardingWizard },
{ path: '/identity/reports', name: 'Reports' },
{ path: '/identity/reports/devices', name: 'Devices', component: Devices },
{ path: '/identity/reports/mfa-report', name: 'MFA Report', component: MFAReport },
- {
- path: '/identity/reports/basic-auth-report',
- name: 'Basic Auth Report',
- component: BasicAuthReport,
- },
- {
- path: '/tenant',
- name: 'Tenant',
- },
+ { path: '/identity/reports/basic-auth-report', name: 'Basic Auth Report', component: BasicAuthReport },
+ { path: '/tenant', name: 'Tenant' },
{ path: '/tenant/administration', name: 'Administration' },
{ path: '/tenant/administration/tenants', name: 'Tenants', component: Tenants },
{ path: '/tenant/administration/tenants/edit', name: 'Edit Tenant', component: EditTenant },
{ path: '/tenant/administration/domains', name: 'Domains', component: Domains },
- {
- path: '/tenant/administration/conditional-access-policies',
- name: 'Conditional Access',
- component: ConditionalAccess,
- },
- {
- path: '/tenant/standards',
- name: 'Standards',
- },
- {
- path: '/tenant/standards/list-applied-standards',
- name: 'List Applied Standards',
- component: ListAppliedStandards,
- },
- {
- path: '/tenant/standards/apply-standard',
- name: 'Apply Standard',
- component: ApplyStandard,
- },
- {
- path: '/tenant/standards/bpa-report',
- name: 'Best Practice Report',
- component: BestPracticeAnalyzer,
- },
- {
- path: '/tenant/standards/domains-analyser',
- name: 'Domains Analyser',
- component: DomainsAnalyser,
- },
- {
- path: '/tenant/standards/individual-domains',
- name: 'Individual Domain Check',
- component: IndividualDomain,
- },
- {
- path: '/tenant/standards/alert-list',
- name: 'Alert List (Alpha)',
- component: ListAlerts,
- },
- {
- path: '/endpoint',
- name: 'Endpoint',
- },
- {
- path: '/endpoint/applications',
- name: 'Applications',
- },
- {
- path: '/endpoint/applications/list',
- name: 'List',
- component: ApplicationsList,
- },
- {
- path: '/endpoint/applications/add-choco-app',
- name: 'Add Choco App',
- component: ApplicationsAddChocoApp,
- },
- {
- path: '/endpoint/autopilot',
- name: 'Autopilot',
- },
- {
- path: '/endpoint/autopilot/add-device',
- name: 'Add Device',
- component: AutopilotAddDevice,
- },
- {
- path: '/endpoint/autopilot/add-profile',
- name: 'Add Profile',
- component: AutopilotAddProfile,
- },
- {
- path: '/endpoint/autopilot/add-status-page',
- name: 'Add Status Page',
- component: AutopilotAddStatusPage,
- },
- {
- path: '/endpoint/autopilot/list-devices',
- name: 'List Devices',
- component: AutopilotListDevices,
- },
- {
- path: '/endpoint/autopilot/list-profiles',
- name: 'List Profiles',
- component: AutopilotListProfiles,
- },
- {
- path: '/endpoint/autopilot/list-status-pages',
- name: 'List Status Pages',
- component: AutopilotListStatusPages,
- },
- {
- path: '/endpoint/autopilot/edit-autopilot-profiles',
- name: 'Edit Autopilot Profiles',
- component: EditAutopilotProfile,
- },
- {
- path: '/endpoint/autopilot/edit-autopilot-status-page',
- name: 'Edit Autopilot Status Page',
- component: EditAutopilotStatusPage,
- },
- {
- path: '/endpoint/MEM',
- name: 'MEM',
- },
- {
- path: '/endpoint/MEM/list-policies',
- name: 'List Status Pages',
- component: IntuneListPolicies,
- },
- {
- path: '/endpoint/MEM/edit-policy',
- name: 'Edit MEM Policy',
- component: MEMEditPolicy,
- },
- {
- path: '/endpoint/MEM/ca-policies',
- name: 'List Status Pages',
- component: IntuneCAPolicies,
- },
- {
- path: '/endpoint/MEM/add-policy',
- name: 'Add Intune Policy',
- component: IntuneAddPolicy,
- },
- {
- path: '/endpoint/MEM/add-policy-template',
- name: 'Add Endpoint Manager Policy Template',
- component: MEMAddPolicyTemplate,
- },
- {
- path: '/endpoint/MEM/list-templates',
- name: 'List Intune Policy Template',
- component: IntuneListPolicyTemplate,
- },
- {
- path: '/endpoint/defender/list-defender',
- name: 'List Defender',
- component: ListDefender,
- },
- {
- path: '/teams-share',
- name: 'Teams & Sharepoint',
- },
- {
- path: '/teams-share/onedrive',
- name: 'OneDrive',
- },
- {
- path: '/teams-share/onedrive/list',
- name: 'List OneDrive',
- component: OneDriveList,
- },
- {
- path: '/teams-share/sharepoint',
- name: 'Sharepoint',
- },
- {
- path: '/teams-share/sharepoint/list-sharepoint',
- name: 'List Sharepoint',
- component: SharepointList,
- },
- {
- path: '/teams-share/teams',
- name: 'Teams',
- },
- {
- path: '/teams-share/teams/list-team',
- name: 'List Teams',
- component: TeamsListTeam,
- },
- {
- path: '/teams-share/teams/view-team-settings',
- name: 'View Team Settings',
- component: ViewTeamsSettings,
- },
- {
- path: '/teams-share/teams/add-team',
- name: 'List Teams',
- component: TeamsAddTeam,
- },
- {
- path: '/teams-share/teams/teams-activity',
- name: 'List Teams',
- component: TeamsActivity,
- },
- {
- name: 'Email & Exchange',
- path: '/email',
- },
- {
- name: 'Email Administration',
- path: '/email/administration',
- },
- {
- name: 'List Contacts',
- path: '/email/administration/contacts',
- component: ContactsList,
- },
- {
- name: 'Edit Mailbox Permissions',
- path: '/email/administration/edit-mailbox-permissions',
- component: EditMailboxPermissions,
- },
- {
- name: 'View Mobile Devices',
- path: '/email/administration/view-mobile-devices',
- component: ViewMobileDevices,
- },
- {
- name: 'Edit Contact',
- path: '/email/administration/edit-contact',
- component: EditContact,
- },
- {
- name: 'List Mailboxes',
- path: '/email/administration/mailboxes',
- component: MailboxesList,
- },
- {
- name: 'Email Reports',
- path: '/email/reports',
- },
- {
- name: 'Mailbox Statistics',
- path: '/email/reports/mailbox-statistics',
- component: MailboxStatisticsList,
- },
- {
- name: 'Mailbox Client Access Settings',
- path: '/email/reports/mailbox-cas-settings',
- component: MailboxClientAccessSettingsList,
- },
- {
- name: 'Message Trace',
- path: '/email/reports/message-trace',
- component: MessageTrace,
- },
- {
- name: 'Phishing Policies',
- path: '/email/reports/phishing-policies',
- component: PhishingPoliciesList,
- },
- {
- name: 'Phishing Policies',
- path: '/email/reports/phishing-policies',
- },
- {
- name: 'Security & Compliance',
- path: '/security',
- },
- {
- name: 'Security Administration',
- path: '/security/administration',
- },
- {
- name: 'Security Reports',
- path: '/security/reports',
- },
- {
- name: 'List Alerts',
- path: '/security/reports/list-alerts',
- component: SecurityComplianceAlerts,
- },
- {
- path: '/cipp',
- name: 'CIPP',
- },
- {
- path: '/cipp/cipp',
- name: 'CIPP',
- },
- {
- path: '/cipp/settings',
- name: 'Settings',
- component: CIPPSettings,
- },
+ { path: '/tenant/administration/conditional-access-policies', name: 'Conditional Access', component: ConditionalAccess },
+ { path: '/tenant/standards', name: 'Standards' },
+ { path: '/tenant/standards/list-applied-standards', name: 'List Applied Standards',component: ListAppliedStandards },
+ { path: '/tenant/standards/apply-standard', name: 'Apply Standard', component: ApplyStandard },
+ { path: '/tenant/standards/bpa-report', name: 'Best Practice Report', component: BestPracticeAnalyzer },
+ { path: '/tenant/standards/domains-analyser', name: 'Domains Analyser', component: DomainsAnalyser },
+ { path: '/tenant/standards/individual-domains', name: 'Individual Domain Check', component: IndividualDomain },
+ { path: '/tenant/standards/alert-list', name: 'Alert List (Alpha)', component: ListAlerts },
+ { path: '/endpoint', name: 'Endpoint' },
+ { path: '/endpoint/applications', name: 'Applications' },
+ { path: '/endpoint/applications/list', name: 'List', component: ApplicationsList },
+ { path: '/endpoint/applications/add-choco-app', name: 'Add Choco App', component: ApplicationsAddChocoApp },
+ { path: '/endpoint/autopilot', name: 'Autopilot' },
+ { path: '/endpoint/autopilot/add-device', name: 'Add Device', component: AutopilotAddDevice },
+ { path: '/endpoint/autopilot/add-profile', name: 'Add Profile', component: AutopilotAddProfile },
+ { path: '/endpoint/autopilot/add-status-page', name: 'Add Status Page', component: AutopilotAddStatusPage },
+ { path: '/endpoint/autopilot/list-devices', name: 'List Devices', component: AutopilotListDevices },
+ { path: '/endpoint/autopilot/list-profiles', name: 'List Profiles', component: AutopilotListProfiles },
+ { path: '/endpoint/autopilot/list-status-pages', name: 'List Status Pages', component: AutopilotListStatusPages },
+ { path: '/endpoint/autopilot/edit-autopilot-profiles', name: 'Edit Autopilot Profiles', component: EditAutopilotProfile },
+ { path: '/endpoint/autopilot/edit-autopilot-status-page', name: 'Edit Autopilot Status Page', component: EditAutopilotStatusPage },
+ { path: '/endpoint/MEM', name: 'MEM' },
+ { path: '/endpoint/MEM/list-policies', name: 'List Status Pages', component: IntuneListPolicies },
+ { path: '/endpoint/MEM/edit-policy', name: 'Edit MEM Policy', component: MEMEditPolicy },
+ { path: '/endpoint/MEM/ca-policies', name: 'List Status Pages', component: IntuneCAPolicies },
+ { path: '/endpoint/MEM/add-policy', name: 'Add Intune Policy', component: IntuneAddPolicy },
+ { path: '/endpoint/MEM/add-policy-template', name: 'Add Endpoint Manager Policy Template', component: MEMAddPolicyTemplate },
+ { path: '/endpoint/MEM/list-templates', name: 'List Intune Policy Template', component: IntuneListPolicyTemplate },
+ { path: '/endpoint/defender/list-defender', name: 'List Defender', component: ListDefender },
+ { path: '/teams-share', name: 'Teams & Sharepoint' },
+ { path: '/teams-share/onedrive', name: 'OneDrive' },
+ { path: '/teams-share/onedrive/list', name: 'List OneDrive', component: OneDriveList },
+ { path: '/teams-share/sharepoint', name: 'Sharepoint' },
+ { path: '/teams-share/sharepoint/list-sharepoint', name: 'List Sharepoint', component: SharepointList },
+ { path: '/teams-share/teams', name: 'Teams' },
+ { path: '/teams-share/teams/list-team', name: 'List Teams', component: TeamsListTeam },
+ { path: '/teams-share/teams/view-team-settings', name: 'View Team Settings', component: ViewTeamsSettings },
+ { path: '/teams-share/teams/add-team', name: 'List Teams', component: TeamsAddTeam },
+ { path: '/teams-share/teams/teams-activity', name: 'List Teams', component: TeamsActivity },
+ { name: 'Email & Exchange', path: '/email' },
+ { name: 'Email Administration', path: '/email/administration' },
+ { name: 'List Contacts', path: '/email/administration/contacts', component: ContactsList },
+ { name: 'Edit Mailbox Permissions', path: '/email/administration/edit-mailbox-permissions', component: EditMailboxPermissions },
+ { name: 'View Mobile Devices', path: '/email/administration/view-mobile-devices', component: ViewMobileDevices },
+ { name: 'Edit Contact', path: '/email/administration/edit-contact', component: EditContact },
+ { name: 'List Mailboxes', path: '/email/administration/mailboxes', component: MailboxesList },
+ { name: 'Email Reports', path: '/email/reports' },
+ { name: 'Mailbox Statistics', path: '/email/reports/mailbox-statistics', component: MailboxStatisticsList },
+ { name: 'Mailbox Client Access Settings', path: '/email/reports/mailbox-cas-settings', component: MailboxClientAccessSettingsList },
+ { name: 'Message Trace', path: '/email/reports/message-trace', component: MessageTrace },
+ { name: 'Phishing Policies', path: '/email/reports/phishing-policies', component: PhishingPoliciesList },
+ { name: 'Security & Compliance', path: '/security' },
+ { name: 'Security Administration', path: '/security/administration' },
+ { name: 'Security Reports', path: '/security/reports' },
+ { name: 'List Alerts', path: '/security/reports/list-alerts', component: SecurityComplianceAlerts },
+ { path: '/cipp', name: 'CIPP' },
+ { path: '/cipp/cipp', name: 'CIPP' },
+ { path: '/cipp/settings', name: 'Settings', component: CIPPSettings },
]
export default routes
diff --git a/src/scss/_custom.scss b/src/scss/_custom.scss
index 5f5016f63478..ed7e71350539 100644
--- a/src/scss/_custom.scss
+++ b/src/scss/_custom.scss
@@ -61,14 +61,20 @@
/* cui overrides */
+.btn {
+ border-radius: var(--cipp-border-radius);
+}
+
.card {
border-radius: var(--cipp-border-radius);
&.page-card {
.card-header {
- background: var(--cui-body-bg);
+ background: var(--cyberdrain-accent-green);
}
.card-title {
font-size: 1rem;
+ line-height: 2rem;
+ margin-bottom: 0rem;
}
}
&.options-card {
@@ -84,6 +90,10 @@
}
}
+.dropdown-menu {
+ border-radius: var(--cipp-border-radius);
+}
+
.form-control {
border-radius: var(--cipp-border-radius);
}
@@ -94,3 +104,7 @@
border: 0px;
}
}
+
+.modal-content {
+ border-radius: var(--cipp-border-radius);
+}
diff --git a/src/scss/_themes.scss b/src/scss/_themes.scss
index fdf5ffc77048..3f241ea7550a 100644
--- a/src/scss/_themes.scss
+++ b/src/scss/_themes.scss
@@ -2,8 +2,10 @@
// CyberDrain variables.
--cyberdrain-primary: #f77f00; // Orange
--cyberdrain-secondary: #003049; // Prussian Blue
- --cyberdrain-light: #ebedef; // Cultured
- --cyberdrain-light-striped: #c6ccd2; // Silver Sand
+ --cyberdrain-lighter: #ffffff; // White
+ --cyberdrain-light: #f4f5f6; // Cultured
+ --cyberdrain-light-striped: #d2d6da; // Light Gray
+ --cyberdrain-darker: #242A2E; //Charleston Green
--cyberdrain-dark: #2e363a; // Gunmetal
--cyberdrain-dark-striped: #48555b; // Charcoal
--cyberdrain-accent-blue: #3e5c66; // Deep Space Sparkle
@@ -74,42 +76,47 @@
[data-theme="default"],
[data-theme="cyberdrain"] {
// Core UI CyberDrain theme variables.
- --cui-body-color: var(--cyberdrain-dark);
--cui-body-bg: var(--cyberdrain-light);
- --cui-header-color: var(--cyberdrain-dark);
- --cui-header-bg: var(--cyberdrain-light);
- --cui-header-divider-border-color: var(--cyberdrain-dark);
- --cui-header-border-color: var(--cyberdrain-dark);
- --cui-footer-bg: var(--cyberdrain-light);
- --cui-footer-border-color: var(--cyberdrain-dark);
- --cui-card-color: var(--cyberdrain-dark);
+ --cui-body-color: var(--cyberdrain-dark);
+ --cui-btn-link-color: var(--cyberdrain-dark);
--cui-card-bg: var(--cyberdrain-light);
--cui-card-border-color: var(--cyberdrain-dark);
- --cui-list-group-color: var(--cyberdrain-dark);
- --cui-list-group-bg: var(--cyberdrain-light);
+ --cui-card-color: var(--cyberdrain-dark);
+ --cui-dropdown-bg: var(--cyberdrain-light);
+ --cui-dropdown-color: var(--cyberdrain-dark);
+ --cui-dropdown-border-color: var(--cyberdrain-dark);
+ --cui-dropdown-link-color: var(--cyberdrain-dark);
+ --cui-footer-bg: var(--cyberdrain-light);
+ --cui-footer-border-color: var(--cyberdrain-dark);
+ --cui-form-select-bg: var(--cyberdrain-light);
+ --cui-form-select-border-color: var(--cyberdrain-dark);
+ --cui-form-select-color: var(--cyberdrain-dark);
+ --cui-header-bg: var(--cyberdrain-light);
+ --cui-header-border-color: var(--cyberdrain-dark);
+ --cui-header-color: var(--cyberdrain-dark);
+ --cui-header-divider-border-color: var(--cyberdrain-dark);
--cui-input-bg: var(--cyberdrain-light);
- --cui-input-focus-bg: var(--cyberdrain-light-striped);
- --cui-input-color: var(--cyberdrain-dark);
- --cui-input-focus-color: var(--cyberdrain-dark);
--cui-input-border-colour: var(--cyberdrain-dark);
+ --cui-input-color: var(--cyberdrain-dark);
+ --cui-input-focus-bg: var(--cyberdrain-light-striped);
--cui-input-focus-border-colour: var(--cyberdrain-primary);
- --cui-form-select-color: var(--cyberdrain-dark);
- --cui-form-select-bg: var(--cyberdrain-light);
- --cui-form-select-border-color: var(--cyberdrain-dark);
- --cui-toast-background-color: var(--cyberdrain-light);
- --cui-toast-color: var(--cyberdrain-dark);
- --cui-toast-header-background-color: var(--cyberdrain-light);
- --cui-toast-header-color: var(--cyberdrain-primary);
- --cui-toast-border-color: var(--cyberdrain-dark);
+ --cui-input-focus-color: var(--cyberdrain-dark);
+ --cui-list-group-bg: var(--cyberdrain-light);
+ --cui-list-group-color: var(--cyberdrain-dark);
--cui-modal-content-bg: var(--cyberdrain-light);
- --cui-modal-content-color: var(--cyberdrain-dark);
--cui-modal-content-border-color: var(--cyberdrain-dark);
- --cui-modal-header-bg: var(--cyberdrain-light);
- --cui-modal-header-color: var(--cyberdrain-dark);
- --cui-modal-header-border-color: var(--cyberdrain-dark);
+ --cui-modal-content-color: var(--cyberdrain-dark);
--cui-modal-footer-bg: var(--cyberdrain-light);
- --cui-modal-footer-color: var(--cyberdrain-dark);
--cui-modal-footer-border-color: var(--cyberdrain-dark);
+ --cui-modal-footer-color: var(--cyberdrain-dark);
+ --cui-modal-header-bg: var(--cyberdrain-light);
+ --cui-modal-header-border-color: var(--cyberdrain-dark);
+ --cui-modal-header-color: var(--cyberdrain-dark);
+ --cui-toast-background-color: var(--cyberdrain-light);
+ --cui-toast-border-color: var(--cyberdrain-dark);
+ --cui-toast-color: var(--cyberdrain-dark);
+ --cui-toast-header-background-color: var(--cyberdrain-light);
+ --cui-toast-header-color: var(--cyberdrain-primary);
.table {
--cui-table-bg: var(--cyberdrain-light);
--cui-table-color: var(--cyberdrain-dark);
@@ -117,21 +124,23 @@
--cui-table-striped-color: var(--cyberdrain-dark-striped);
}
// CIPP CyberDrain theme variables.
- --cipp-search-color: var(--cyberdrain-dark);
--cipp-search-bg: var(--cyberdrain-light);
- --cipp-search-option-color: var(--cyberdrain-dark);
--cipp-search-border-color: var(--cyberdrain-dark);
- --cipp-table-primary-colour: var(--cyberdrain-dark);
- --cipp-table-secondary-colour: var(--cyberdrain-secondary);
+ --cipp-search-color: var(--cyberdrain-dark);
+ --cipp-search-option-color: var(--cyberdrain-dark);
--cipp-table-bg: var(--cyberdrain-light);
+ --cipp-table-button-bg: var(--cui-btn-bg);
+ --cipp-table-button-disabled-bg: var(--cui-btn-disabled-bg);
+ --cipp-table-button-focus-bg: var(--cui-btn-active-bg);
+ --cipp-table-button-hover-bg: var(--cui-btn-hover-bg);
--cipp-table-context-bg: var(--cyberdrain-primary);
--cipp-table-context-color: var(--cyberdrain-light);
--cipp-table-divider: var(--cyberdrain-dark);
- --cipp-table-button-bg: var(--cui-btn-bg);
- --cipp-table-button-hover-bg: var(--cui-btn-hover-bg);
- --cipp-table-button-focus-bg: var(--cui-btn-active-bg);
- --cipp-table-button-disabled-bg: var(--cui-btn-disabled-bg);
+ --cipp-table-primary-colour: var(--cyberdrain-dark);
+ --cipp-table-secondary-colour: var(--cyberdrain-secondary);
--cipp-table-sort-focus-bg: var(--cyberdrain-secondary);
+ --cipp-table-highlight-on-hover-bg: white;
+ --cipp-table-highlight-on-hover-color: var(--cyberdrain-dark);
--cipp-table-striped-bg: var(--cyberdrain-light-striped);
--cipp-table-striped-colour: var(--cyberdrain-dark-striped);
.header-toggler {
@@ -142,42 +151,47 @@
}
[data-theme="impact"] {
// Core UI Impact theme variables.
- --cui-body-color: var(--cyberdrain-light);
--cui-body-bg: var(--cyberdrain-dark);
- --cui-header-color: var(--cyberdrain-light);
- --cui-header-bg: var(--cyberdrain-dark);
- --cui-header-divider-border-color: var(--cyberdrain-light);
- --cui-header-border-color: var(--cyberdrain-light);
- --cui-footer-bg: var(--cyberdrain-dark);
- --cui-footer-border-color: var(--cyberdrain-light);
- --cui-card-color: var(--cyberdrain-light);
+ --cui-body-color: var(--cyberdrain-light);
+ --cui-btn-link-color: var(--cyberdrain-light);
--cui-card-bg: var(--cyberdrain-dark);
--cui-card-border-color: var(--cyberdrain-light);
- --cui-list-group-color: var(--cyberdrain-light);
- --cui-list-group-bg: var(--cyberdrain-dark);
+ --cui-card-color: var(--cyberdrain-light);
+ --cui-dropdown-bg: var(--cyberdrain-dark);
+ --cui-dropdown-color: var(--cyberdrain-light);
+ --cui-dropdown-border-color: var(--cyberdrain-light);
+ --cui-dropdown-link-color: var(--cyberdrain-light);
+ --cui-footer-bg: var(--cyberdrain-dark);
+ --cui-footer-border-color: var(--cyberdrain-light);
+ --cui-form-select-bg: var(--cyberdrain-dark);
+ --cui-form-select-border-color: var(--cyberdrain-light);
+ --cui-form-select-color: var(--cyberdrain-light);
+ --cui-header-bg: var(--cyberdrain-dark);
+ --cui-header-border-color: var(--cyberdrain-light);
+ --cui-header-color: var(--cyberdrain-light);
+ --cui-header-divider-border-color: var(--cyberdrain-light);
--cui-input-bg: var(--cyberdrain-dark);
- --cui-input-focus-bg: var(--cyberdrain-dark-striped);
- --cui-input-color: var(--cyberdrain-light);
- --cui-input-focus-color: var(--cyberdrain-primary);
--cui-input-border-colour: var(--cyberdrain-light);
+ --cui-input-color: var(--cyberdrain-light);
+ --cui-input-focus-bg: var(--cyberdrain-dark-striped);
--cui-input-focus-border-color: var(--cyberdrain-primary);
- --cui-form-select-color: var(--cyberdrain-light);
- --cui-form-select-bg: var(--cyberdrain-dark);
- --cui-form-select-border-color: var(--cyberdrain-light);
- --cui-toast-background-color: var(--cyberdrain-dark);
- --cui-toast-color: var(--cyberdrain-light);
- --cui-toast-header-background-color: var(--cyberdrain-dark);
- --cui-toast-header-color: var(--cyberdrain-primary);
- --cui-toast-border-color: var(--cyberdrain-light);
+ --cui-input-focus-color: var(--cyberdrain-primary);
+ --cui-list-group-bg: var(--cyberdrain-dark);
+ --cui-list-group-color: var(--cyberdrain-light);
--cui-modal-content-bg: var(--cyberdrain-dark);
- --cui-modal-content-color: var(--cyberdrain-light);
--cui-modal-content-border-color: var(--cyberdrain-light);
- --cui-modal-header-bg: var(--cyberdrain-dark);
- --cui-modal-header-color: var(--cyberdrain-light);
- --cui-modal-header-border-color: var(--cyberdrain-light);
+ --cui-modal-content-color: var(--cyberdrain-light);
--cui-modal-footer-bg: var(--cyberdrain-dark);
- --cui-modal-footer-color: var(--cyberdrain-light);
--cui-modal-footer-border-color: var(--cyberdrain-light);
+ --cui-modal-footer-color: var(--cyberdrain-light);
+ --cui-modal-header-bg: var(--cyberdrain-dark);
+ --cui-modal-header-border-color: var(--cyberdrain-light);
+ --cui-modal-header-color: var(--cyberdrain-light);
+ --cui-toast-background-color: var(--cyberdrain-dark);
+ --cui-toast-border-color: var(--cyberdrain-light);
+ --cui-toast-color: var(--cyberdrain-light);
+ --cui-toast-header-background-color: var(--cyberdrain-dark);
+ --cui-toast-header-color: var(--cyberdrain-primary);
.table {
--cui-table-bg: var(--cyberdrain-dark);
--cui-table-color: var(--cyberdrain-light);
@@ -185,21 +199,23 @@
--cui-table-striped-color: var(--cyberdrain-light-striped);
}
// CIPP Impact theme variables.
- --cipp-search-color: var(--cyberdrain-light);
--cipp-search-bg: var(--cyberdrain-dark);
- --cipp-search-option-color: var(--cyberdrain-light);
--cipp-search-border-color: var(--cyberdrain-light);
- --cipp-table-primary-colour: var(--cyberdrain-light);
- --cipp-table-secondary-colour: var(--cui-gray-100);
+ --cipp-search-color: var(--cyberdrain-light);
+ --cipp-search-option-color: var(--cyberdrain-light);
--cipp-table-bg: var(--cyberdrain-dark);
+ --cipp-table-button-bg: var(--cui-btn-bg);
+ --cipp-table-button-disabled-bg: var(--cui-btn-disabled-bg);
+ --cipp-table-button-focus-bg: var(--cui-btn-active-bg);
+ --cipp-table-button-hover-bg: var(--cui-btn-hover-bg);
--cipp-table-context-bg: var(--cyberdrain-primary);
--cipp-table-context-color: var(--cyberdrain-light);
--cipp-table-divider: var(--cyberdrain-light);
- --cipp-table-button-bg: var(--cui-btn-bg);
- --cipp-table-button-hover-bg: var(--cui-btn-hover-bg);
- --cipp-table-button-focus-bg: var(--cui-btn-active-bg);
- --cipp-table-button-disabled-bg: var(--cui-btn-disabled-bg);
+ --cipp-table-primary-colour: var(--cyberdrain-light);
+ --cipp-table-secondary-colour: var(--cui-gray-100);
--cipp-table-sort-focus-bg: var(--cyberdrain-secondary);
+ --cipp-table-highlight-on-hover-bg: var(--cyberdrain-darker);
+ --cipp-table-highlight-on-hover-color: var(--cyberdrain-light);
--cipp-table-striped-bg: var(--cyberdrain-dark-striped);
--cipp-table-striped-colour: var(--cyberdrain-light-striped);
.header-toggler {
diff --git a/src/views/home/Home.js b/src/views/home/Home.js
index 82becfe26e9b..c43f2342da05 100644
--- a/src/views/home/Home.js
+++ b/src/views/home/Home.js
@@ -1,6 +1,6 @@
import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faTimesCircle, faCheckCircle } from '@fortawesome/free-solid-svg-icons'
+import { faUser, faUserFriends, faUsers } from '@fortawesome/free-solid-svg-icons'
import {
CCard,
CCardHeader,
@@ -9,70 +9,78 @@ import {
CRow,
CCol,
CSpinner,
- CCardImage,
CCardTitle,
CButton,
} from '@coreui/react'
-import { useLoadVersionsQuery } from '../../store/api/app'
+import { useLoadVersionsQuery } from 'src/store/api/app'
+import StatusIcon from 'src/components/cipp/StatusIcon'
const Home = () => {
const { data: versions, isLoading } = useLoadVersionsQuery()
-
return (
Dashboard
-
+
+ Quick Create
+
- New User
- Ready to make a new user for any managed tenant? Click below to jump to the wizard.
+ Ready to add a new user, group or team for any managed tenant? Click the buttons below to jump to the relevant wizard.
-
- Add a user
+
+ Add a User
+
+
+ Add a Group
+
+
+ Add a Team
-
- CIPP Version
+
+
+
+ CIPP Version
+
+
- {versions?.OutOfDateCIPP ? (
-
+
+ Latest: {!isLoading ? versions.RemoteCIPPVersion : }
+
+
+ Current: {!isLoading ? versions.LocalCIPPVersion : }
+
+ {!isLoading && !versions.OutOfDateCIPP ? (
+ You're running the latest and greatest version of CIPP!
) : (
-
+ Your CIPP version is out of date!
)}
-
- Remote: {!isLoading ? versions.RemoteCIPPVersion : }
-
- Local: {!isLoading ? versions.LocalCIPPVersion : }
-
- CIPP API Version
+
+
+
+ CIPP API Version
+
+
- {versions?.OutOfDateCIPPAPI ? (
-
+
+ Latest: {!isLoading ? versions.RemoteCIPPAPIVersion : }
+
+
+ Current: {!isLoading ? versions.LocalCIPPAPIVersion : }
+
+ {!isLoading && !versions.OutOfDateCIPPAPI ? (
+ You're running the latest and greatest version of CIPP API!
) : (
-
+ Your CIPP API version is out of date!
)}
-
- Remote: {!isLoading ? versions.RemoteCIPPAPIVersion : }
-
- Local: {!isLoading ? versions.LocalCIPPAPIVersion : }
diff --git a/src/views/identity/administration/Groups.js b/src/views/identity/administration/Groups.js
index 83d94aafc267..2071df8d380b 100644
--- a/src/views/identity/administration/Groups.js
+++ b/src/views/identity/administration/Groups.js
@@ -2,6 +2,7 @@ import React from 'react'
import TenantSelector from 'src/components/cipp/TenantSelector'
import { useSelector } from 'react-redux'
import {
+ CButton,
CDropdown,
CDropdownItem,
CDropdownMenu,
@@ -13,7 +14,7 @@ import {
} from '@coreui/react'
import CippDatatable from '../../../components/cipp/CippDatatable'
import { cellBooleanFormatter } from '../../../components/cipp'
-import { faBars, faCog } from '@fortawesome/free-solid-svg-icons'
+import { faPlus, faBars, faCog } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
const Dropdown = (row = {}) => {
@@ -83,7 +84,12 @@ const Groups = () => {
- Groups
+
+ Groups
+
+ Add Group
+
+
{Object.keys(tenant).length === 0 && Select a tenant to get started.}
diff --git a/src/views/identity/administration/Users.js b/src/views/identity/administration/Users.js
index b0cd43d70e5e..583f9a079d4b 100644
--- a/src/views/identity/administration/Users.js
+++ b/src/views/identity/administration/Users.js
@@ -2,6 +2,7 @@ import React from 'react'
import { CDropdown, CDropdownItem, CDropdownMenu, CDropdownToggle } from '@coreui/react'
import { useDispatch, useSelector } from 'react-redux'
import {
+ faPlus,
faUser,
faCog,
faBars,
@@ -66,7 +67,7 @@ const Dropdown = (row, rowIndex, formatExtraData) => {
-
+
View User
{
return (
- {type} Results
+ {type} Results
{/* records and additional information is specific to each type