SDA-4231 (Fix button width for macOS) (#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>
This commit is contained in:
Kiran Niranjan 2023-07-19 10:52:26 +05:30 committed by GitHub
parent 37d04d421a
commit 6a256a81f7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 2 deletions

View File

@ -1,6 +1,7 @@
import classNames from 'classnames'; import classNames from 'classnames';
import { ipcRenderer } from 'electron'; import { ipcRenderer } from 'electron';
import * as React from 'react'; import * as React from 'react';
import { isMac } from '../../common/env';
import { import {
darkTheme, darkTheme,
getContainerCssClasses, getContainerCssClasses,
@ -125,6 +126,7 @@ export default class CallNotification extends React.Component<
false, false,
); );
let containerCssClass = `container ${themeClassName} `; let containerCssClass = `container ${themeClassName} `;
customCssClasses.push(isMac ? 'mac' : 'windows');
containerCssClass += customCssClasses.join(' '); containerCssClass += customCssClasses.join(' ');
const acceptText = acceptButtonText const acceptText = acceptButtonText

View File

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