SDA-4732: Fixing bugs related

src/renderer/assets/federation-user-dark.svg

@@ -0,0 +1,4 @@
+<svg width="36" height="40" viewBox="0 0 36 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M28 10C28 4.47715 23.5228 0 18 0C12.4772 0 8 4.47715 8 10C8 15.5228 12.4772 20 18 20C23.5228 20 28 15.5228 28 10ZM23 10C23 12.7614 20.7614 15 18 15C15.2386 15 13 12.7614 13 10C13 7.23858 15.2386 5 18 5C20.7614 5 23 7.23858 23 10Z" fill="#65C862"/>
+<path d="M0.5 30.5902C0.5 30.2021 0.59098 29.8179 0.843023 29.5228C1.91036 28.2729 5.864 25 18 25C30.136 25 34.0896 28.2729 35.157 29.5228C35.409 29.8179 35.5 30.2021 35.5 30.5902V37.5C35.5 38.8807 34.3807 40 33 40H3C1.61929 40 0.5 38.8807 0.5 37.5V30.5902ZM18 30C10.4729 30 6.94804 31.3462 5.5 32.167V35H30.5V32.167C29.052 31.3462 25.5271 30 18 30Z" fill="#65C862"/>
+</svg>

src/renderer/components/call-notification.tsx

@@ -446,18 +446,25 @@ export default class CallNotification extends React.Component<
 
     if (!this.isNamedUser && isFederatedEnabled) {
       return (
-        <div
-          className={classNames('thumbnail', profilePlaceHolderClassName, {
-            external: isExternal && !isFederatedEnabled,
-            federation: isFederatedEnabled,
-          })}
-        >
-          <img
-            data-testid='FEDERATION_UNKNOWN_USER_AVATAR'
-            className={classNames('default-logo')}
-            src='../renderer/assets/federation-user.svg'
-            alt={alt}
-          />
+        <div className='logo'>
+          <div
+            className={classNames('thumbnail', profilePlaceHolderClassName, {
+              external: isExternal && !isFederatedEnabled,
+              federation: isFederatedEnabled,
+            })}
+          >
+            <img
+              data-testid='FEDERATION_UNKNOWN_USER_AVATAR'
+              className={classNames('default-logo')}
+              src={
+                this.state.theme === Themes.DARK
+                  ? '../renderer/assets/federation-user-dark.svg'
+                  : '../renderer/assets/federation-user-light.svg'
+              }
+              alt={alt}
+            />
+          </div>
+          {this.renderSymphonyBadge(shouldDisplayBadge, callType)}
         </div>
       );
     }
@@ -480,8 +487,7 @@ export default class CallNotification extends React.Component<
           >
             <p className={'profilePlaceHolderText'}>{profilePlaceHolderText}</p>
           </div>
-          {!isFederatedEnabled &&
-            this.renderSymphonyBadge(shouldDisplayBadge, callType)}
+          {this.renderSymphonyBadge(shouldDisplayBadge, callType)}
         </div>
       );
     }
@@ -489,7 +495,7 @@ export default class CallNotification extends React.Component<
     return (
       <div className='logo' data-testid={'AVATAR'}>
         <img className={imgClass} src={url} alt={alt} />
-        {!isFederatedEnabled && this.renderSymphonyBadge(shouldDisplayBadge)}
+        {this.renderSymphonyBadge(shouldDisplayBadge)}
       </div>
     );
   }

src/renderer/styles/call-notification.less

@@ -119,6 +119,7 @@ body {
     border-color: var(--profile-placeholder-fed-border-color);
     .profilePlaceHolderText {
       color: var(--profile-place-holder-text-fed);
+      font-weight: 400;
     }
   }
   .default-logo {
@@ -176,6 +177,7 @@ body {
   padding: 0 4px;
   align-items: center;
   display: flex;
+  margin-top: 1px;
 }
 
 .caller-role {