From 5c5462592d010dcdbc62145ed2fcd8475b34ce8a Mon Sep 17 00:00:00 2001
From: psjostrom <per.sjostrom@symphony.com>
Date: Thu, 14 Jan 2021 12:10:20 +0100
Subject: [PATCH] SDA-2824 Set notification position modal darkmode

---
 .../notificationSettings.spec.ts.snap         | 36 ++++++++-
 spec/mainApiHandler.spec.ts                   |  4 +-
 spec/notificationSettings.spec.ts             | 14 ++--
 src/app/main-api-handler.ts                   |  4 +-
 src/app/window-handler.ts                     |  6 +-
 src/common/api-interface.ts                   |  3 +
 src/renderer/app-bridge.ts                    |  2 +-
 .../components/notification-settings.tsx      | 73 +++++++++++++++----
 src/renderer/ssf-api.ts                       |  3 +-
 .../styles/notification-settings.less         | 15 ++--
 10 files changed, 118 insertions(+), 42 deletions(-)

diff --git a/spec/__snapshots__/notificationSettings.spec.ts.snap b/spec/__snapshots__/notificationSettings.spec.ts.snap
index 6ac2eac7..64889c66 100644
--- a/spec/__snapshots__/notificationSettings.spec.ts.snap
+++ b/spec/__snapshots__/notificationSettings.spec.ts.snap
@@ -48,10 +48,17 @@ exports[`Notification Settings should mount, unmount and render component should
           className="position-button-container"
         >
           <button
-            className="position-button upper-left"
+            className="position-button"
+            data-testid="upper-left"
             id="upper-left"
             name="position"
             onClick={[Function]}
+            style={
+              Object {
+                "backgroundColor": "#F8F8F9",
+                "color": "#17181B",
+              }
+            }
             type="button"
             value="upper-left"
           >
@@ -62,10 +69,17 @@ exports[`Notification Settings should mount, unmount and render component should
           className="position-button-container"
         >
           <button
-            className="position-button lower-left"
+            className="position-button"
+            data-testid="lower-left"
             id="lower-left"
             name="position"
             onClick={[Function]}
+            style={
+              Object {
+                "backgroundColor": "#F8F8F9",
+                "color": "#17181B",
+              }
+            }
             type="button"
             value="lower-left"
           >
@@ -80,10 +94,17 @@ exports[`Notification Settings should mount, unmount and render component should
           className="position-button-container"
         >
           <button
-            className="position-button position-button-selected upper-right"
+            className="position-button"
+            data-testid="upper-right"
             id="upper-right"
             name="position"
             onClick={[Function]}
+            style={
+              Object {
+                "backgroundColor": "#008EFF",
+                "color": "white",
+              }
+            }
             type="button"
             value="upper-right"
           >
@@ -94,10 +115,17 @@ exports[`Notification Settings should mount, unmount and render component should
           className="position-button-container"
         >
           <button
-            className="position-button lower-right"
+            className="position-button"
+            data-testid="lower-right"
             id="lower-right"
             name="position"
             onClick={[Function]}
+            style={
+              Object {
+                "backgroundColor": "#F8F8F9",
+                "color": "#17181B",
+              }
+            }
             type="button"
             value="lower-right"
           >
diff --git a/spec/mainApiHandler.spec.ts b/spec/mainApiHandler.spec.ts
index a54aaf64..13d22a29 100644
--- a/spec/mainApiHandler.spec.ts
+++ b/spec/mainApiHandler.spec.ts
@@ -289,10 +289,10 @@ describe('main api handler', () => {
             const value = {
                 cmd: apiCmds.showNotificationSettings,
                 windowName: 'notification-settings',
+                theme: 'light',
             };
-            const expectedValue = 'notification-settings';
             ipcMain.send(apiName.symphonyApi, value);
-            expect(spy).toBeCalledWith(expectedValue);
+            expect(spy).toBeCalledWith('notification-settings', 'light');
         });
 
         it('should call `sanitize` correctly', () => {
diff --git a/spec/notificationSettings.spec.ts b/spec/notificationSettings.spec.ts
index 59959eaf..ca952490 100644
--- a/spec/notificationSettings.spec.ts
+++ b/spec/notificationSettings.spec.ts
@@ -16,6 +16,7 @@ describe('Notification Settings', () => {
             },
         ],
         display: '6713899',
+        theme: 'light'
     };
     const onLabelEvent = 'on';
     const sendEvent = 'send';
@@ -85,6 +86,7 @@ describe('Notification Settings', () => {
                 position: 'upper-right',
                 screens: [],
                 display: '6713899',
+                theme: 'light',
             };
 
             const spy = jest.spyOn(NotificationSettings.prototype, 'setState');
@@ -93,8 +95,7 @@ describe('Notification Settings', () => {
             const wrapper = shallow(React.createElement(NotificationSettings));
             ipcRenderer.send('notification-settings-data', notificationSettingsMock);
 
-            const positionButton = `button.upper-right`;
-            const input = wrapper.find(positionButton);
+            const input = wrapper.find('[data-testid="upper-right"]');
 
             input.simulate('click', { target: { value: 'upper-right' } });
 
@@ -115,8 +116,7 @@ describe('Notification Settings', () => {
             const wrapper = shallow(React.createElement(NotificationSettings));
             ipcRenderer.send('notification-settings-data', notificationSettingsMock);
 
-            const positionButton = `button.lower-right`;
-            const input = wrapper.find(positionButton);
+            const input = wrapper.find('[data-testid="lower-right"]');
 
             input.simulate('click', { target: { value: 'lower-right' } });
 
@@ -137,8 +137,7 @@ describe('Notification Settings', () => {
             const wrapper = shallow(React.createElement(NotificationSettings));
             ipcRenderer.send('notification-settings-data', notificationSettingsMock);
 
-            const positionButton = `button.upper-left`;
-            const input = wrapper.find(positionButton);
+            const input = wrapper.find('[data-testid="upper-left"]');
 
             input.simulate('click', { target: { value: 'upper-left' } });
 
@@ -159,8 +158,7 @@ describe('Notification Settings', () => {
             const wrapper = shallow(React.createElement(NotificationSettings));
             ipcRenderer.send('notification-settings-data', notificationSettingsMock);
 
-            const positionButton = `button.lower-left`;
-            const input = wrapper.find(positionButton);
+            const input = wrapper.find('[data-testid="lower-left"]');
 
             input.simulate('click', { target: { value: 'lower-left' } });
 
diff --git a/src/app/main-api-handler.ts b/src/app/main-api-handler.ts
index 2a65a6e4..611b6175 100644
--- a/src/app/main-api-handler.ts
+++ b/src/app/main-api-handler.ts
@@ -93,8 +93,8 @@ ipcMain.on(apiName.symphonyApi, async (event: Electron.IpcMainEvent, arg: IApiAr
             downloadHandler.setWindow(event.sender);
             break;
         case apiCmds.showNotificationSettings:
-            if (typeof arg.windowName === 'string') {
-                windowHandler.createNotificationSettingsWindow(arg.windowName);
+            if (typeof arg.windowName === 'string' && typeof arg.theme === 'string') {
+                windowHandler.createNotificationSettingsWindow(arg.windowName, arg.theme);
             }
             break;
         case apiCmds.sanitize:
diff --git a/src/app/window-handler.ts b/src/app/window-handler.ts
index cd014963..66b46c98 100644
--- a/src/app/window-handler.ts
+++ b/src/app/window-handler.ts
@@ -13,7 +13,7 @@ import * as fs from 'fs';
 import * as path from 'path';
 import { format, parse } from 'url';
 
-import { apiName, WindowTypes } from '../common/api-interface';
+import { apiName, Themes, WindowTypes } from '../common/api-interface';
 import { isDevEnv, isLinux, isMac, isNodeEnv, isWindowsOS } from '../common/env';
 import { i18n, LocaleType } from '../common/i18n';
 import { logger } from '../common/logger';
@@ -1323,7 +1323,7 @@ export class WindowHandler {
      *
      * @param windowName
      */
-    public createNotificationSettingsWindow(windowName: string): void {
+    public createNotificationSettingsWindow(windowName: string, theme: Themes): void {
         const opts = this.getWindowOpts(
             {
                 width: 540,
@@ -1370,7 +1370,7 @@ export class WindowHandler {
                 ]).notificationSettings;
                 this.notificationSettingsWindow.webContents.send(
                     'notification-settings-data',
-                    {screens, position, display},
+                    {screens, position, display, theme},
                 );
             }
         });
diff --git a/src/common/api-interface.ts b/src/common/api-interface.ts
index 145fe032..3d0afc63 100644
--- a/src/common/api-interface.ts
+++ b/src/common/api-interface.ts
@@ -83,8 +83,11 @@ export interface IApiArgs {
     isMana: boolean;
     notificationOpts: object;
     notificationId: number;
+    theme: Themes;
 }
 
+export type Themes = 'light' | 'dark';
+
 export type WindowTypes = 'screen-picker' | 'screen-sharing-indicator' | 'notification-settings';
 
 export interface IBadgeCount {
diff --git a/src/renderer/app-bridge.ts b/src/renderer/app-bridge.ts
index 6ad82491..9a663522 100644
--- a/src/renderer/app-bridge.ts
+++ b/src/renderer/app-bridge.ts
@@ -173,7 +173,7 @@ export class AppBridge {
                 await notification.hideNotification(data as number);
                 break;
             case apiCmds.showNotificationSettings:
-                ssf.showNotificationSettings();
+                ssf.showNotificationSettings(data);
                 break;
             case apiCmds.setIsInMeeting:
                 if (typeof data === 'boolean') {
diff --git a/src/renderer/components/notification-settings.tsx b/src/renderer/components/notification-settings.tsx
index c233186c..c1ad1e5b 100644
--- a/src/renderer/components/notification-settings.tsx
+++ b/src/renderer/components/notification-settings.tsx
@@ -12,6 +12,12 @@ interface IState {
     position: startCorner;
     screens: Electron.Display[];
     display: number;
+    theme: Themes;
+}
+
+export enum Themes {
+    LIGHT = 'light',
+    DARK = 'dark',
 }
 
 /**
@@ -25,6 +31,7 @@ export default class NotificationSettings extends React.Component<{}, IState> {
             position: 'upper-right',
             screens: [],
             display: 1,
+            theme: Themes.LIGHT,
         };
         this.updateState = this.updateState.bind(this);
     }
@@ -33,20 +40,27 @@ export default class NotificationSettings extends React.Component<{}, IState> {
      * Renders the notification settings window
      */
     public render(): JSX.Element {
-        return (
-            <div className='content'>
+        if (this.state.theme === Themes.DARK) {
+            document.body.classList.add('dark-mode');
+        }
 
-                <header className='header'>
+        return (
+            <div className='content' style={this.state.theme === Themes.DARK ? { backgroundColor: '#25272B' } : undefined} >
+                <header
+                    className='header'
+                    style={this.state.theme === Themes.DARK ? { color: 'white', borderBottom: '1px solid #525760' } : undefined}>
                     <span className='header-title'>
                         {i18n.t('Set Notification Position', NOTIFICATION_SETTINGS_NAMESPACE)()}
                     </span>
                 </header>
-
                 <div className='form'>
-                    <label className='display-label'>{i18n.t('Show on display', NOTIFICATION_SETTINGS_NAMESPACE)()}</label>
+                    <label className='display-label' style={this.state.theme === Themes.DARK ? { color: 'white' } : undefined}>
+                        {i18n.t('Show on display', NOTIFICATION_SETTINGS_NAMESPACE)()}
+                    </label>
                     <div id='screens' className='display-container'>
                         <select
                             className='display-selector'
+                            style={this.state.theme === Themes.DARK ? { border: '2px solid #767A81', backgroundColor: '#25272B', color: 'white' } : undefined}
                             id='screen-selector'
                             title='position'
                             value={this.state.display}
@@ -55,9 +69,10 @@ export default class NotificationSettings extends React.Component<{}, IState> {
                             {this.renderScreens()}
                         </select>
                     </div>
-
-                    <label className='position-label'>{i18n.t('Position', NOTIFICATION_SETTINGS_NAMESPACE)()}</label>
-                    <div className='position-container'>
+                    <label className='position-label' style={this.state.theme === Themes.DARK ? { color: 'white' } : undefined}>
+                        {i18n.t('Position', NOTIFICATION_SETTINGS_NAMESPACE)()}
+                    </label>
+                    <div className='position-container' style={this.state.theme === Themes.DARK ? { background: '#2E3136' } : undefined}>
                         <div className='button-set-left'>
                             {this.renderPositionButton('upper-left', 'Top Left')}
                             {this.renderPositionButton('lower-left', 'Bottom Left')}
@@ -68,18 +83,24 @@ export default class NotificationSettings extends React.Component<{}, IState> {
                         </div>
                     </div>
                 </div>
-
-                <footer className='footer'>
+                <footer className='footer' style={this.state.theme === Themes.DARK ? { borderTop: '1px solid #525760' } : undefined}>
                     <div className='footer-button-container'>
-                        <button id='cancel' className='footer-button footer-button-dismiss' onClick={this.close.bind(this)}>
+                        <button
+                            id='cancel'
+                            className='footer-button footer-button-dismiss'
+                            onClick={this.close.bind(this)}
+                            style={this.state.theme === Themes.DARK ? { backgroundColor: '#25272B', color: 'white' } : undefined}>
                             {i18n.t('CANCEL', NOTIFICATION_SETTINGS_NAMESPACE)()}
                         </button>
-                        <button id='ok-button' className='footer-button footer-button-ok' onClick={this.submit.bind(this)}>
+                        <button
+                            id='ok-button'
+                            className='footer-button footer-button-ok'
+                            onClick={this.submit.bind(this)}
+                            style={this.state.theme === Themes.DARK ? { backgroundColor: '#25272B', color: 'white' } : undefined}>
                             {i18n.t('OK', NOTIFICATION_SETTINGS_NAMESPACE)()}
                         </button>
                     </div>
                 </footer>
-
             </div>
         );
     }
@@ -143,13 +164,16 @@ export default class NotificationSettings extends React.Component<{}, IState> {
      * @param content
      */
     private renderPositionButton(id: startCorner, content: string): JSX.Element {
-        const style = this.state.position === id ? `position-button position-button-selected ${id}` : `position-button ${id}`;
+        const style = this.getPositionButtonStyle(id);
         return (
             <div className='position-button-container'>
                 <button
                     onClick={this.togglePosition.bind(this)}
-                    className={style}
-                    id={id} type='button'
+                    className='position-button'
+                    style={style}
+                    id={id}
+                    data-testid={id}
+                    type='button'
                     name='position'
                     value={id}
                 >
@@ -159,6 +183,23 @@ export default class NotificationSettings extends React.Component<{}, IState> {
         );
     }
 
+    /**
+     * Gets the text color and background color of a position button
+     *
+     * @param id
+     */
+    private getPositionButtonStyle(id: string): React.CSSProperties {
+        let style: React.CSSProperties;
+        if (this.state.position === id) {
+            style = { backgroundColor: '#008EFF', color: 'white' };
+        } else if (this.state.theme === Themes.DARK) {
+            style = { backgroundColor: '#25272B', color: 'white' };
+        } else {
+            style = { backgroundColor: '#F8F8F9', color: '#17181B' };
+        }
+        return style;
+    }
+
     /**
      * Renders the drop down list of available screens
      */
diff --git a/src/renderer/ssf-api.ts b/src/renderer/ssf-api.ts
index 0fc86b64..0ae1372d 100644
--- a/src/renderer/ssf-api.ts
+++ b/src/renderer/ssf-api.ts
@@ -433,11 +433,12 @@ export class SSFApi {
     /**
      * Opens a modal window to configure notification preference.
      */
-    public showNotificationSettings(): void {
+    public showNotificationSettings(data: string): void {
         const windowName = (remote.getCurrentWindow() as ICustomBrowserWindow).winName;
         local.ipcRenderer.send(apiName.symphonyApi, {
             cmd: apiCmds.showNotificationSettings,
             windowName,
+            theme: data,
         });
     }
 
diff --git a/src/renderer/styles/notification-settings.less b/src/renderer/styles/notification-settings.less
index 4bc3ea35..20307280 100644
--- a/src/renderer/styles/notification-settings.less
+++ b/src/renderer/styles/notification-settings.less
@@ -12,6 +12,13 @@ body {
   margin: 0;
   height: 100%;
   font-family: @font-family;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.dark-mode {
+  background-color: #25272B;
+  color: white;
 }
 
 .content {
@@ -28,6 +35,7 @@ body {
   border-bottom: 1px solid rgba(0, 0, 0, .1);
   margin-bottom: 20px;
   padding: 16px;
+  color: @color;
 }
 
 .header-title {
@@ -41,7 +49,6 @@ body {
   white-space: nowrap;
   overflow: hidden;
   width: 100%;
-  color: @color;
 }
 
 .form {
@@ -131,10 +138,7 @@ body {
     line-height: 20px;
     align-items: center;
     color: #17181B;
-  }
-
-  .position-button-selected {
-    background-color: #008EFF;
+    cursor: pointer;
   }
 
   .upper-left,
@@ -170,6 +174,7 @@ body {
     font-size: 14px;
     line-height: 20px;
     align-items: center;
+    cursor: pointer;
   }
 
   .footer-button-ok {