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

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)}

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);
+      }
+    }
   }
 }
 

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;