if/SymphonyElectron
1
0
Fork 0
mirror of https://github.com/finos/SymphonyElectron.git synced 2025-02-25 18:55:29 -06:00
Code Issues Packages Projects Releases Wiki Activity

SDA-4346 Add yellow border to profile placeholder for extrnal call notifications (#1974)

Browse Source
This commit is contained in:
Salah Benmoussati 2023-10-09 14:32:20 +02:00 committed by GitHub
parent b95f7d1c3a
commit 32e50f0f0d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 21 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/renderer/components/call-notification.tsx
View File

@ -155,6 +155,7 @@ export default class CallNotification extends React.Component<
profilePlaceHolderText, profilePlaceHolderText,
callType, callType,
shouldDisplayBadge, shouldDisplayBadge,
isExternal,
)} )}
</div> </div>
<div className='info-text-container'> <div className='info-text-container'>
@ -283,6 +284,7 @@ export default class CallNotification extends React.Component<
profilePlaceHolderText: string, profilePlaceHolderText: string,
callType: CallType, callType: CallType,
shouldDisplayBadge: boolean, shouldDisplayBadge: boolean,
isExternal: boolean,
): JSX.Element | undefined { ): JSX.Element | undefined {
let imgClass = 'default-logo'; let imgClass = 'default-logo';
let url = '../renderer/assets/notification-symphony-logo.svg'; let url = '../renderer/assets/notification-symphony-logo.svg';
@ -293,7 +295,6 @@ export default class CallNotification extends React.Component<
url = imageUrl; url = imageUrl;
alt = 'Profile picture'; alt = 'Profile picture';
} }
if (!imageUrl) { if (!imageUrl) {
const profilePlaceHolderClassName = const profilePlaceHolderClassName =
callType === 'IM' callType === 'IM'
@ -301,7 +302,11 @@ export default class CallNotification extends React.Component<
: 'roomPlaceHolderContainer'; : 'roomPlaceHolderContainer';
return ( return (
<div className='logo'> <div className='logo'>
<div className={`thumbnail ${profilePlaceHolderClassName}`}> <div
className={classNames('thumbnail', profilePlaceHolderClassName, {
external: isExternal,
})}
>
<p className={'profilePlaceHolderText'}>{profilePlaceHolderText}</p> <p className={'profilePlaceHolderText'}>{profilePlaceHolderText}</p>
</div> </div>
{this.renderSymphonyBadge(shouldDisplayBadge, callType)} {this.renderSymphonyBadge(shouldDisplayBadge, callType)}

10
src/renderer/styles/call-notification.less
View File

@ -15,6 +15,8 @@
--notification-bg-color: @light-notification-bg-color; --notification-bg-color: @light-notification-bg-color;
--notification-border-color: @graphite-10; --notification-border-color: @graphite-10;
--profile-place-holder-text: @electricity-ui-50; --profile-place-holder-text: @electricity-ui-50;
--profile-place-holder-text-ext: @yellow-50;
--profile-placeholder-ext-border-color: @yellow-20;
} }
.dark { .dark {
@ -24,6 +26,8 @@
--notification-bg-color: @dark-notification-bg-color; --notification-bg-color: @dark-notification-bg-color;
--notification-border-color: @graphite-60; --notification-border-color: @graphite-60;
--profile-place-holder-text: @electricity-ui-40; --profile-place-holder-text: @electricity-ui-40;
--profile-place-holder-text-ext: @yellow-30;
--profile-placeholder-ext-border-color: @yellow-30;
} }
.mac { .mac {
@ -126,6 +130,12 @@ body {
right: -2px; right: -2px;
bottom: -1px; bottom: -1px;
} }
.external {
border-color: var(--profile-placeholder-ext-border-color);
.profilePlaceHolderText {
color: var(--profile-place-holder-text-ext);
}
}
} }
} }

4
src/renderer/styles/theme.less
View File

@ -33,3 +33,7 @@
@red-40: #ff5d50; @red-40: #ff5d50;
@green-50: #378535; @green-50: #378535;
@green-40: #2eaa35; @green-40: #2eaa35;
@yellow-20: #f7ca3b;
@yellow-30: #e7a800;
@yellow-50: #9c6c1a;