SDA-4231 (Fix button width for macOS) (finos#1900)

* SDA-4231 - Fix button width for macOS Signed-off-by: Kiran Niranjan <kiran.niranjan@symphony.com> * SDA-4231 - Fix button width for macOS Signed-off-by: Kiran Niranjan <kiran.niranjan@symphony.com> --------- Signed-off-by: Kiran Niranjan <kiran.niranjan@symphony.com>
NguyenTranHoangSym · Aug 15, 2023 · f5944f8 · f5944f8
1 parent f2208d1
commit f5944f8
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/src/renderer/components/call-notification.tsx b/src/renderer/components/call-notification.tsx
@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import { ipcRenderer } from 'electron';
 import * as React from 'react';
+import { isMac } from '../../common/env';
 import {
   darkTheme,
   getContainerCssClasses,
@@ -125,6 +126,7 @@ export default class CallNotification extends React.Component<
       false,
     );
     let containerCssClass = `container ${themeClassName} `;
+    customCssClasses.push(isMac ? 'mac' : 'windows');
     containerCssClass += customCssClasses.join(' ');
 
     const acceptText = acceptButtonText

diff --git a/src/renderer/styles/call-notification.less b/src/renderer/styles/call-notification.less
@@ -26,6 +26,16 @@
   --profile-place-holder-text: @electricity-ui-40;
 }
 
+.mac {
+  --button-width: 80px;
+  --button-with-other: 104px;
+}
+
+.windows {
+  --button-width: 72px;
+  --button-with-other: 94px;
+}
+
 body {
   margin: 0;
 }
@@ -226,7 +236,7 @@ text {
     display: flex;
     padding: 4px 12px;
     justify-content: center;
-    width: 72px;
+    width: var(--button-width);
     align-items: center;
     gap: 8px;
     border-radius: 16px;
@@ -249,7 +259,7 @@ text {
   }
 
   .call-type-other {
-    width: 94px;
+    width: var(--button-with-other);
   }
 }