From fb6dce086a750548e7005322c9a4de1710aade6d Mon Sep 17 00:00:00 2001
From: Kiran Niranjan <kiran.niranjan@symphony.com>
Date: Tue, 2 Feb 2021 13:48:14 +0530
Subject: [PATCH] fix: SDA-2948 (Redesign notification) (#1186)

* fix: SDA-2948 - Redesign notification

* fix: SDA-2948 - Fix background color
---
 src/renderer/components/notification-comp.tsx | 16 +++--
 src/renderer/notification-handler.ts          |  4 +-
 src/renderer/notification.ts                  |  6 +-
 src/renderer/styles/notification-comp.less    | 68 ++++++++++++-------
 4 files changed, 59 insertions(+), 35 deletions(-)

diff --git a/src/renderer/components/notification-comp.tsx b/src/renderer/components/notification-comp.tsx
index 6c172579..ca637395 100644
--- a/src/renderer/components/notification-comp.tsx
+++ b/src/renderer/components/notification-comp.tsx
@@ -41,8 +41,8 @@ type mouseEventButton =
 type keyboardEvent = React.KeyboardEvent<HTMLInputElement>;
 
 // Notification container height
-const CONTAINER_HEIGHT = 100;
-const CONTAINER_HEIGHT_WITH_INPUT = 132;
+const CONTAINER_HEIGHT = 88;
+const CONTAINER_HEIGHT_WITH_INPUT = 120;
 
 export default class NotificationComp extends React.Component<{}, IState> {
   private readonly eventHandlers = {
@@ -137,11 +137,17 @@ export default class NotificationComp extends React.Component<{}, IState> {
     const containerClass = classNames('container', {
       'external-border': isExternal,
     });
+    const actionButtonContainer = classNames('rte-button-container', {
+      'action-container-margin': !isInputHidden,
+    });
 
     return (
       <div
         className={containerClass}
-        style={{ height: containerHeight }}
+        style={{
+          height: containerHeight,
+          backgroundColor: bgColor.backgroundColor,
+        }}
         lang={i18n.getLocale()}
       >
         <div
@@ -188,7 +194,7 @@ export default class NotificationComp extends React.Component<{}, IState> {
         </div>
         <div
           style={{
-            ...{ display: isInputHidden ? 'none' : 'flex' },
+            ...{ display: isInputHidden ? 'none' : 'block' },
             ...bgColor,
           }}
           className='rte-container'
@@ -218,7 +224,7 @@ export default class NotificationComp extends React.Component<{}, IState> {
               ref={this.input}
             />
           </div>
-          <div className='rte-button-container'>
+          <div className={actionButtonContainer}>
             <button
               className={`rte-thumbsup-button ${themeClassName}`}
               onClick={this.eventHandlers.onThumbsUp()}
diff --git a/src/renderer/notification-handler.ts b/src/renderer/notification-handler.ts
index d67af3d0..d08f5f9b 100644
--- a/src/renderer/notification-handler.ts
+++ b/src/renderer/notification-handler.ts
@@ -26,8 +26,8 @@ interface ICorner {
 }
 
 type startCorner = 'upper-right' | 'upper-left' | 'lower-right' | 'lower-left';
-const NEXT_INSERT_POSITION = 108;
-const NEXT_INSERT_POSITION_WITH_INPUT = 140;
+const NEXT_INSERT_POSITION = 96;
+const NEXT_INSERT_POSITION_WITH_INPUT = 128;
 
 export default class NotificationHandler {
   public settings: ISettings;
diff --git a/src/renderer/notification.ts b/src/renderer/notification.ts
index b53a2a57..76fc8ab1 100644
--- a/src/renderer/notification.ts
+++ b/src/renderer/notification.ts
@@ -16,7 +16,7 @@ import NotificationHandler from './notification-handler';
 // const MAX_QUEUE_SIZE = 30;
 const CLEAN_UP_INTERVAL = 60 * 1000; // Closes inactive notification
 const animationQueue = new AnimationQueue();
-const CONTAINER_HEIGHT_WITH_INPUT = 132; // Notification container height
+const CONTAINER_HEIGHT_WITH_INPUT = 120; // Notification container height
 
 interface ICustomBrowserWindow extends Electron.BrowserWindow {
   winName: string;
@@ -31,7 +31,7 @@ const notificationSettings = {
   startCorner: 'upper-right' as startCorner,
   display: '',
   width: 344,
-  height: 100,
+  height: 88,
   totalHeight: 0,
   totalWidth: 0,
   corner: {
@@ -607,7 +607,7 @@ class Notification extends NotificationHandler {
   private getNotificationOpts(): Electron.BrowserWindowConstructorOptions {
     return {
       width: 344,
-      height: 100,
+      height: 88,
       alwaysOnTop: true,
       skipTaskbar: true,
       resizable: isWindowsOS,
diff --git a/src/renderer/styles/notification-comp.less b/src/renderer/styles/notification-comp.less
index 22eebbd1..a44313e2 100644
--- a/src/renderer/styles/notification-comp.less
+++ b/src/renderer/styles/notification-comp.less
@@ -1,22 +1,27 @@
-@import "theme";
+@import 'theme';
 @inputWidth: 270px;
 
 .blackText {
   --text-color: #000000;
   --button-bg-color: #52575f;
-  --button-test-color: #FFFFFF;
+  --button-test-color: #ffffff;
   --logo-bg: url('../assets/symphony-logo.png');
 }
 .light {
   --text-color: #525760;
-  --button-bg-color: linear-gradient(0deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.72)), #525760;
+  --button-bg-color: linear-gradient(
+      0deg,
+      rgba(255, 255, 255, 0.72),
+      rgba(255, 255, 255, 0.72)
+    ),
+    #525760;
   --button-test-color: #000000;
   --logo-bg: url('../assets/symphony-logo.png');
 }
 .dark {
-  --text-color: #FFFFFF;
+  --text-color: #ffffff;
   --button-bg-color: #52575f;
-  --button-test-color: #FFFFFF;
+  --button-test-color: #ffffff;
   --logo-bg: url('../assets/symphony-logo.png');
 }
 
@@ -37,9 +42,8 @@ body {
 
 .container {
   width: 344px;
-  height: 100px;
+  height: 88px;
   display: flex;
-  justify-content: center;
   background-color: #ffffff;
   overflow: hidden;
   position: relative;
@@ -58,13 +62,14 @@ body {
 }
 
 .main-container {
-  height: 100px;
+  height: 88px;
   display: flex;
   justify-content: center;
   background-color: #ffffff;
   overflow: hidden;
   position: relative;
   line-height: 15px;
+  align-items: flex-start;
 }
 
 .ext-border {
@@ -78,7 +83,7 @@ body {
 .header {
   width: 232px;
   min-width: 215px;
-  margin: auto;
+  margin-top: 10px;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -101,10 +106,10 @@ body {
   display: flex;
   height: 40px;
   border-radius: 4px;
-  border: 1px solid rgba(82, 87, 96, .32);
+  border: 1px solid rgba(82, 87, 96, 0.32);
   margin: 12px;
   width: 40px;
-  background: #FFFFFF;
+  background: #ffffff;
 }
 
 .user-name-text {
@@ -113,7 +118,7 @@ body {
   align-items: center;
   margin: auto;
   text-align: center;
-  color: #008EFF;
+  color: #008eff;
 }
 
 .ext-badge-container {
@@ -135,6 +140,11 @@ body {
   flex-direction: column;
   justify-content: center;
   z-index: 5;
+  margin-top: 4px;
+}
+
+.action-container-margin {
+  margin-top: 8px;
 }
 
 .action-button {
@@ -159,7 +169,7 @@ body {
 }
 
 .action-button:hover {
-  background: #A5A8AC;
+  background: #a5a8ac;
 }
 
 .action-button:lang(fr-FR) {
@@ -167,16 +177,19 @@ body {
 }
 
 .action-button:lang(ja-JP) {
- width: 60px;
+  width: 60px;
 }
 
 .rte-container {
   width: 100%;
-  display: flex;
+  height: 38px;
+  position: absolute;
+  bottom: 0;
 }
 
 .input-container {
   width: 100%;
+  height: 38px;
   outline: none;
 }
 
@@ -185,7 +198,7 @@ body {
   left: 8px;
   right: 8px;
   top: 0;
-  background: #008EFF;
+  background: #008eff;
   margin: 0 8px;
 }
 
@@ -259,11 +272,13 @@ input {
   color: var(--text-color);
 }
 
-.rte-thumbsup-button:focus, .rte-send-button:focus {
+.rte-thumbsup-button:focus,
+.rte-send-button:focus {
   outline: none;
 }
-.rte-send-button:focus:not(:hover):not(:active), .rte-thumbsup-button:focus:not(:hover):not(:active) {
-  outline: #008EFF auto 1px;
+.rte-send-button:focus:not(:hover):not(:active),
+.rte-thumbsup-button:focus:not(:hover):not(:active) {
+  outline: #008eff auto 1px;
 }
 
 .rte-send-button {
@@ -271,13 +286,15 @@ input {
   height: 25px;
   align-self: center;
   padding: 3px;
-  background: url('../assets/notification-send-button-enabled.svg') no-repeat center;
+  background: url('../assets/notification-send-button-enabled.svg') no-repeat
+    center;
   border: none;
   color: var(--text-color);
 }
 
 .rte-send-button:disabled {
-  background: url('../assets/notification-send-button-disabled.svg') no-repeat center;
+  background: url('../assets/notification-send-button-disabled.svg') no-repeat
+    center;
 }
 
 .title {
@@ -333,7 +350,7 @@ input {
 }
 
 .logo-container {
-  margin: 10px;
+  margin: 12px;
   display: flex;
   align-items: center;
 }
@@ -344,10 +361,11 @@ input {
 }
 
 @-webkit-keyframes blink {
-  from, to {
+  from,
+  to {
     background: transparent;
   }
   50% {
-    background: #008EFF;
+    background: #008eff;
   }
-}
\ No newline at end of file
+}