feat(multi-org): Show user icon when FirstName and LastName are absent (#5494)

Author: ChitlangeSahas

src/identity/components/GlobalHeader/IdentityUserAvatar.tsx

@@ -100,18 +100,17 @@ class IdentityUserAvatar extends React.Component<Props, State> {
         <div>
           {/* Button shape is ButtonShape.Square to make the height and width the same
             so we can use the border radius to make it a circle  */}
-          {this.getInitials() && (
-            <Button
-              text={this.getInitials()}
-              shape={ButtonShape.Square}
-              color={
-                isPopoverOpen ? ComponentColor.Default : ComponentColor.Tertiary
-              }
-              onClick={this.togglePopoverState}
-              className={userAvatarButtonClassName}
-              testID="global-header--user-avatar"
-            />
-          )}
+          <Button
+            text={this.getInitials()}
+            shape={ButtonShape.Square}
+            color={
+              isPopoverOpen ? ComponentColor.Default : ComponentColor.Tertiary
+            }
+            onClick={this.togglePopoverState}
+            className={userAvatarButtonClassName}
+            testID="global-header--user-avatar"
+            icon={!this.getInitials() ? IconFont.User : null}
+          />
           <FlexBox
             className={userPopoverClassName}
             direction={FlexDirection.Column}

src/identity/components/GlobalHeader/UserPopoverStyles.scss

@@ -10,6 +10,9 @@
     border: none;
     background: linear-gradient(75.66deg, #0098f0 0%, $c-amethyst 79.64%);
   }
+  .cf-button-icon {
+    font-size: 18px;
+  }
 }
 
 .user-popover {