From 950305ff1c28c5f3d852c513836211245730a8b7 Mon Sep 17 00:00:00 2001 From: Michael O'Toole Date: Tue, 4 Jan 2022 16:39:56 +0000 Subject: [PATCH] Styling and layout improvements. --- src/components/cipp/CippDatatable.js | 4 + src/components/cipp/PdfButton.js | 6 +- src/components/cipp/StatusIcon.js | 39 +- src/routes.js | 360 ++++-------------- src/scss/_custom.scss | 16 +- src/scss/_themes.scss | 156 ++++---- src/views/home/Home.js | 82 ++-- src/views/identity/administration/Groups.js | 10 +- src/views/identity/administration/Users.js | 12 +- .../tenant/standards/IndividualDomain.js | 3 +- 10 files changed, 266 insertions(+), 422 deletions(-) diff --git a/src/components/cipp/CippDatatable.js b/src/components/cipp/CippDatatable.js index 9d9cc2e4e752..ea66cd7b9b8d 100644 --- a/src/components/cipp/CippDatatable.js +++ b/src/components/cipp/CippDatatable.js @@ -86,6 +86,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 163e2dd1e322..ab27047d6b66 100644 --- a/src/views/identity/administration/Users.js +++ b/src/views/identity/administration/Users.js @@ -1,8 +1,9 @@ import React from 'react' -import { CDropdown, CDropdownItem, CDropdownMenu, CDropdownToggle } from '@coreui/react' +import { CButton, CDropdown, CDropdownItem, CDropdownMenu, CDropdownToggle } from '@coreui/react' import TenantSelector from 'src/components/cipp/TenantSelector' import { useDispatch, useSelector } from 'react-redux' import { + faPlus, faUser, faCog, faBars, @@ -66,7 +67,7 @@ const Dropdown = (row, rowIndex, formatExtraData) => { - + View User {
- Users + + Users + + Add User + + {Object.keys(tenant).length === 0 && Select a tenant to get started.} diff --git a/src/views/tenant/standards/IndividualDomain.js b/src/views/tenant/standards/IndividualDomain.js index 319f329fe157..2a18089d5c9d 100644 --- a/src/views/tenant/standards/IndividualDomain.js +++ b/src/views/tenant/standards/IndividualDomain.js @@ -14,7 +14,6 @@ import { CCol, CCollapse, CForm, - CFormLabel, CFormTextarea, CRow, CCardTitle, @@ -136,7 +135,7 @@ const ResultsCard = ({ children, data, type }) => { return ( - {type} Results + {type} Results {/* records and additional information is specific to each type