From 32e50f0f0daba501336ae8a3dd7bcc186d7ce9f0 Mon Sep 17 00:00:00 2001
From: Salah Benmoussati <51402489+sbenmoussati@users.noreply.github.com>
Date: Mon, 9 Oct 2023 14:32:20 +0200
Subject: [PATCH] SDA-4346 Add yellow border to profile placeholder for extrnal
 call notifications (#1974)

---
 src/renderer/components/call-notification.tsx |  9 +++++++--
 src/renderer/styles/call-notification.less    | 10 ++++++++++
 src/renderer/styles/theme.less                |  4 ++++
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/renderer/components/call-notification.tsx b/src/renderer/components/call-notification.tsx
index f5041dcc..992d7d3d 100644
--- a/src/renderer/components/call-notification.tsx
+++ b/src/renderer/components/call-notification.tsx
@@ -155,6 +155,7 @@ export default class CallNotification extends React.Component<
               profilePlaceHolderText,
               callType,
               shouldDisplayBadge,
+              isExternal,
             )}
           </div>
           <div className='info-text-container'>
@@ -283,6 +284,7 @@ export default class CallNotification extends React.Component<
     profilePlaceHolderText: string,
     callType: CallType,
     shouldDisplayBadge: boolean,
+    isExternal: boolean,
   ): JSX.Element | undefined {
     let imgClass = 'default-logo';
     let url = '../renderer/assets/notification-symphony-logo.svg';
@@ -293,7 +295,6 @@ export default class CallNotification extends React.Component<
       url = imageUrl;
       alt = 'Profile picture';
     }
-
     if (!imageUrl) {
       const profilePlaceHolderClassName =
         callType === 'IM'
@@ -301,7 +302,11 @@ export default class CallNotification extends React.Component<
           : 'roomPlaceHolderContainer';
       return (
         <div className='logo'>
-          <div className={`thumbnail ${profilePlaceHolderClassName}`}>
+          <div
+            className={classNames('thumbnail', profilePlaceHolderClassName, {
+              external: isExternal,
+            })}
+          >
             <p className={'profilePlaceHolderText'}>{profilePlaceHolderText}</p>
           </div>
           {this.renderSymphonyBadge(shouldDisplayBadge, callType)}
diff --git a/src/renderer/styles/call-notification.less b/src/renderer/styles/call-notification.less
index f3069cf1..24e26e1b 100644
--- a/src/renderer/styles/call-notification.less
+++ b/src/renderer/styles/call-notification.less
@@ -15,6 +15,8 @@
   --notification-bg-color: @light-notification-bg-color;
   --notification-border-color: @graphite-10;
   --profile-place-holder-text: @electricity-ui-50;
+  --profile-place-holder-text-ext: @yellow-50;
+  --profile-placeholder-ext-border-color: @yellow-20;
 }
 
 .dark {
@@ -24,6 +26,8 @@
   --notification-bg-color: @dark-notification-bg-color;
   --notification-border-color: @graphite-60;
   --profile-place-holder-text: @electricity-ui-40;
+  --profile-place-holder-text-ext: @yellow-30;
+  --profile-placeholder-ext-border-color: @yellow-30;
 }
 
 .mac {
@@ -126,6 +130,12 @@ body {
       right: -2px;
       bottom: -1px;
     }
+    .external {
+      border-color: var(--profile-placeholder-ext-border-color);
+      .profilePlaceHolderText {
+        color: var(--profile-place-holder-text-ext);
+      }
+    }
   }
 }
 
diff --git a/src/renderer/styles/theme.less b/src/renderer/styles/theme.less
index d7f6c04d..9d6c04f6 100644
--- a/src/renderer/styles/theme.less
+++ b/src/renderer/styles/theme.less
@@ -33,3 +33,7 @@
 @red-40: #ff5d50;
 @green-50: #378535;
 @green-40: #2eaa35;
+
+@yellow-20: #f7ca3b;
+@yellow-30: #e7a800;
+@yellow-50: #9c6c1a;