Merge pull request #32 from PagerDuty/dark-mode

giranm · Apr 18, 2023 · 10e14a3 · 10e14a3
2 parents 3ea266f + 9fedc18
commit 10e14a3
Show file tree

Hide file tree

Showing 26 changed files with 410 additions and 17 deletions.
diff --git a/cypress/e2e/Settings/settings.spec.js b/cypress/e2e/Settings/settings.spec.js
@@ -14,6 +14,7 @@ import {
   updateMaxRateLimit,
   updateAutoAcceptIncidentQuery,
   updateAutoRefreshInterval,
+  updateDarkMode,
   manageIncidentTableColumns,
   manageCustomAlertColumnDefinitions,
   activateButton,
@@ -193,4 +194,16 @@ describe('Manage Settings', { failFast: { enabled: false } }, () => {
     cy.get('.btn').contains('Clear Local Cache').click();
     cy.get('.modal-title').contains('Disclaimer & License').should('be.visible');
   });
+
+  it('Update dark mode', () => {
+    [true, false].forEach((darkMode) => {
+      updateDarkMode(darkMode);
+      cy.window()
+        .its('store')
+        .invoke('getState')
+        .then((state) => expect(
+          state.settings.darkMode,
+        ).to.equal(darkMode));
+    });
+  });
 });
diff --git a/cypress/support/util/common.js b/cypress/support/util/common.js
@@ -305,6 +305,22 @@ export const updateAutoAcceptIncidentQuery = (autoAcceptIncidentsQuery = false)
   cy.get('.close').click();
 };
 
+export const updateDarkMode = (darkMode = false) => {
+  cy.get('.settings-panel-dropdown').click();
+  cy.get('.dropdown-item').contains('Settings').click();
+  cy.get('.nav-item').contains('User Profile').click();
+
+  if (darkMode) {
+    cy.get('#user-profile-dark-mode-checkbox').check({ force: true });
+  } else {
+    cy.get('#user-profile-dark-mode-checkbox').uncheck({ force: true });
+  }
+
+  cy.get('.btn').contains('Update User Profile').click();
+  checkActionAlertsModalContent('Updated user profile settings');
+  cy.get('.close').click();
+};
+
 export const priorityNames = ['--', 'P5', 'P4', 'P3', 'P2', 'P1'];
 
 /*

diff --git a/src/App.js b/src/App.js
@@ -97,6 +97,14 @@ const App = ({
 }) => {
   // Verify if session token is present
   const token = sessionStorage.getItem('pd_access_token');
+  const {
+    autoRefreshInterval, darkMode,
+  } = state.settings;
+
+  if (darkMode) {
+    document.body.classList.add('dark-mode');
+  }
+
   if (!token) {
     return (
       <div className="App">
@@ -109,9 +117,6 @@ const App = ({
   const {
     userAuthorized, userAcceptedDisclaimer, currentUserLocale,
   } = state.users;
-  const {
-    autoRefreshInterval,
-  } = state.settings;
   const {
     fetchingIncidents,
     fetchingIncidentNotes,

diff --git a/src/App.scss b/src/App.scss
@@ -5,12 +5,22 @@ body {
   background-color: $pd-brand-background !important;
 }
 
+body.dark-mode {
+  background-color: $pd-brand-gray-dark !important;
+}
+
 .btn-outline-secondary {
   color: $pd-brand-black;
   background-color: $pd-brand-white;
   border-color: $pd-brand-secondary-light;
 }
 
+body.dark-mode .btn-outline-secondary {
+  color: $pd-white;
+  background-color: $pd-brand-gray-dark;
+  border-color: $pd-brand-secondary-light;
+}
+
 .btn-outline-secondary:disabled {
   color: $pd-brand-secondary-light !important;
 }
@@ -26,6 +36,10 @@ body {
   background-color: unset !important;
 }
 
+body.dark-mode .btn-outline-secondary:not(:disabled):not(.disabled).active {
+  background-color: $pd-brand-gray-light !important;
+}
+
 .btn-outline-dark {
   color: $pd-brand-gray-dark;
   background-color: $pd-white;
@@ -59,3 +73,54 @@ body {
 .modal-footer {
   display: unset !important;
 }
+
+body.dark-mode a {
+  color: $pd-brand-white;
+}
+
+body.dark-mode .modal-content {
+  background-color: $pd-brand-black !important;
+  color: $pd-white !important;
+}
+
+body.dark-mode .modal-title {
+  color: $pd-brand-white !important;
+}
+
+body.dark-mode .modal-header .close {
+  color: $pd-brand-white !important;
+}
+
+body.dark-mode .form-label, body.dark-mode .form-text {
+  color: $pd-brand-white !important;
+}
+
+body.dark-mode .form-control {
+  background-color: $pd-brand-gray-dark !important;
+  color: $pd-white;
+}
+
+body.dark-mode div.react-select__control, body.dark-mode div.react-select__menu {
+  background-color: $pd-brand-gray-dark !important;
+  color: $pd-brand-white !important;
+}
+
+body.dark-mode div.react-select__multi-value {
+  background-color: $pd-brand-gray-light !important;
+  color: $pd-brand-white !important;
+}
+
+body.dark-mode div.react-select__single-value {
+  color: $pd-brand-white !important;
+}
+
+body.dark-mode div.react-select__option:hover {
+  background-color: $pd-brand-secondary-light !important;
+  color: $pd-brand-white !important;
+}
+
+body.dark-mode div.react-select__option--is-focused {
+  background-color: $pd-brand-secondary-light !important;
+  color: $pd-brand-white !important;
+}
+
diff --git a/src/assets/images/pd_logo_white.svg b/src/assets/images/pd_logo_white.svg
diff --git a/src/components/AddResponderModal/AddResponderModalComponent.js b/src/components/AddResponderModal/AddResponderModalComponent.js
@@ -86,6 +86,7 @@ const AddResponderModalComponent = ({
               <Form.Label>{t('Responders')}</Form.Label>
               <Select
                 id="add-responders-select"
+                classNamePrefix="react-select"
                 onChange={(selectedTargets) => {
                   setResponderRequestTargets(selectedTargets);
                 }}

diff --git a/src/components/Auth/AuthComponent.scss b/src/components/Auth/AuthComponent.scss
@@ -13,6 +13,13 @@
   background-color: $pd-white;
 }
 
+body.dark-mode #pd-login-form {
+  border: 1px solid $pd-dark;
+  box-shadow: 0px 0px 10px 1px $pd-dark;
+  background-color: $pd-gray;
+  color: $pd-white;
+}
+
 #pd-login-logo {
   display: block;
   text-indent: -9999px;

diff --git a/src/components/GlobalSearch/GlobalSearchComponent.scss b/src/components/GlobalSearch/GlobalSearchComponent.scss
@@ -1,5 +1,11 @@
+@import 'assets/styles/pagerduty.scss';
+
 .global-search-ctr {
   position: relative;
   padding-right: 10px;
   top: 6px;
 }
+
+body.dark-mode .global-search-ctr .input-group-text {
+  background-color: $pd-brand-secondary-light !important;
+}
diff --git a/src/components/IncidentActions/IncidentActionsComponent.js b/src/components/IncidentActions/IncidentActionsComponent.js
@@ -100,6 +100,7 @@ const IncidentActionsComponent = ({
   runCustomIncidentAction,
   runResponsePlayAsync,
   syncWithExternalSystem,
+  settings,
 }) => {
   const {
     t,
@@ -112,6 +113,9 @@ const IncidentActionsComponent = ({
     ACKNOWLEDGED,
   ]);
   const highUrgencyIncidents = filterIncidentsByField(selectedRows, 'urgency', [HIGH]);
+  const {
+    darkMode,
+  } = settings;
 
   // Determine ability of each button based on selected items
   const selectedIncident = selectedCount === 1 ? selectedRows[0] : null;
@@ -216,6 +220,9 @@ const IncidentActionsComponent = ({
     setExternalSystems(tempExternalSystems);
   }, [displayRunActions, selectedIncident]);
 
+  // Const for theme based on dark mode
+  const theme = darkMode ? 'dark' : 'light';
+
   return (
     <div>
       <Container className="incident-actions-ctr" id="incident-actions-ctr" fluid>
@@ -227,7 +234,7 @@ const IncidentActionsComponent = ({
             <Button
               id="incident-action-acknowledge-button"
               className="action-button"
-              variant={enableActions ? 'outline-secondary' : 'light'}
+              variant={enableActions ? 'outline-secondary' : theme}
               onClick={() => acknowledge(selectedRows)}
               disabled={enableActions}
             >
@@ -240,7 +247,7 @@ const IncidentActionsComponent = ({
               id="incident-action-escalate-button"
               as={ButtonGroup}
               className="action-button"
-              variant={enableEscalationAction ? 'outline-secondary' : 'light'}
+              variant={enableEscalationAction ? 'outline-secondary' : theme}
               drop="up"
               title={(
                 <>
@@ -272,7 +279,7 @@ const IncidentActionsComponent = ({
             <Button
               id="incident-action-reassign-button"
               className="action-button"
-              variant={enableActions ? 'outline-secondary' : 'light'}
+              variant={enableActions ? 'outline-secondary' : theme}
               onClick={() => toggleDisplayReassignModal()}
               disabled={enableActions}
             >
@@ -284,7 +291,7 @@ const IncidentActionsComponent = ({
             <Button
               id="incident-action-add-responders-button"
               className="action-button"
-              variant={enableActions ? 'outline-secondary' : 'light'}
+              variant={enableActions ? 'outline-secondary' : theme}
               onClick={() => toggleDisplayAddResponderModal()}
               disabled={enableActions}
             >
@@ -297,7 +304,7 @@ const IncidentActionsComponent = ({
               id="incident-action-snooze-button"
               as={ButtonGroup}
               className="action-button"
-              variant={enableActions ? 'outline-secondary' : 'light'}
+              variant={enableActions ? 'outline-secondary' : theme}
               drop="up"
               title={(
                 <>
@@ -331,7 +338,7 @@ const IncidentActionsComponent = ({
             <Button
               id="incident-action-merge-button"
               className="action-button"
-              variant={enableMergeAction ? 'outline-secondary' : 'light'}
+              variant={enableMergeAction ? 'outline-secondary' : theme}
               onClick={() => toggleDisplayMergeModal()}
               disabled={enableMergeAction}
             >
@@ -343,7 +350,7 @@ const IncidentActionsComponent = ({
             <Button
               id="incident-action-resolve-button"
               className="action-button"
-              variant={enableActions ? 'outline-secondary' : 'light'}
+              variant={enableActions ? 'outline-secondary' : theme}
               disabled={enableActions}
               onClick={() => resolve(selectedRows)}
             >
@@ -358,7 +365,7 @@ const IncidentActionsComponent = ({
               id="incident-action-update-priority-button"
               as={ButtonGroup}
               className="action-button"
-              variant={enablePriorityAction ? 'outline-secondary' : 'light'}
+              variant={enablePriorityAction ? 'outline-secondary' : theme}
               drop="up"
               title={(
                 <>
@@ -393,7 +400,7 @@ const IncidentActionsComponent = ({
             <Button
               id="incident-action-add-note-button"
               className="action-button"
-              variant={enablePostActions ? 'outline-secondary' : 'light'}
+              variant={enablePostActions ? 'outline-secondary' : theme}
               onClick={() => toggleDisplayAddNoteModal()}
               disabled={enablePostActions}
             >
@@ -406,7 +413,7 @@ const IncidentActionsComponent = ({
               id="incident-action-run-action-button"
               as={ButtonGroup}
               className="action-button"
-              variant={enablePostSingularAction ? 'outline-secondary' : 'light'}
+              variant={enablePostSingularAction ? 'outline-secondary' : theme}
               drop="up"
               title={(
                 <>
@@ -431,6 +438,7 @@ const IncidentActionsComponent = ({
                   <Dropdown.Item>
                     <Select
                       id="response-play-select"
+                      classNamePrefix="react-select"
                       className="response-play-dropdown"
                       menuPlacement="top"
                       components={animatedComponents}
@@ -502,6 +510,7 @@ const mapStateToProps = (state) => ({
   escalationPolicies: state.escalationPolicies.escalationPolicies,
   extensions: state.extensions,
   responsePlays: state.responsePlays.responsePlays,
+  settings: state.settings,
 });
 
 const mapDispatchToProps = (dispatch) => ({

diff --git a/src/components/IncidentActions/IncidentActionsComponent.scss b/src/components/IncidentActions/IncidentActionsComponent.scss
@@ -11,6 +11,11 @@
   background-color: $pd-white;
 }
 
+body.dark-mode .incident-actions-ctr {
+  background-color: $pd-brand-gray-dark;
+  color: $pd-brand-white;
+}
+
 .action-button {
   margin-right: 10px;
 }

diff --git a/src/components/IncidentActions/IncidentActionsComponent.test.js b/src/components/IncidentActions/IncidentActionsComponent.test.js
@@ -41,6 +41,9 @@ describe('IncidentActionsComponent', () => {
       serviceExtensionMap: {},
     },
     responsePlays: { responsePlays: [] },
+    settings: {
+      darkMode: false,
+    },
   };
 
   const tempStoreMap = { ...baseStoreMap };