RED-1192, RED-1193

apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.html

@@ -1,5 +1,5 @@
 <div class="wrapper">
-    <div [className]="colorClass + ' oval ' + size" [matTooltipPosition]="'above'" [matTooltip]="displayName">
+    <div [className]="colorClass + ' oval ' + size + (hasBorder ? ' border' : '')" [matTooltipPosition]="'above'" [matTooltip]="displayName">
         {{ initials }}
     </div>
     <div *ngIf="withName" class="clamp-2 username">

apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.scss

@@ -1,3 +1,5 @@
+@import '../../../assets/styles/red-variables';
+
 .wrapper {
     display: flex;
     align-items: center;
@@ -7,3 +9,7 @@
         margin-left: 6px;
     }
 }
+
+.border {
+    border: 1px solid $grey-7;
+}

apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.ts

@@ -8,17 +8,10 @@ import { User } from '@redaction/red-ui-http';
     styleUrls: ['./initials-avatar.component.scss']
 })
 export class InitialsAvatarComponent implements OnInit, OnChanges {
-    @Input()
-    public userId: string;
-
-    @Input()
-    public color = 'lightgray';
-
-    @Input()
-    public size: 'small' | 'large' = 'small';
-
-    @Input()
-    public withName = false;
+    @Input() public userId: string;
+    @Input() public color = 'lightgray';
+    @Input() public size: 'small' | 'large' = 'small';
+    @Input() public withName = false;
 
     public _user: User;
 
@@ -67,7 +60,10 @@ export class InitialsAvatarComponent implements OnInit, OnChanges {
         if (this.color.includes('-')) {
             return this.color;
         }
-        const textColor = !this._user || !this._userService.isManager(this._user) ? 'dark' : 'red';
-        return `${this.color}-${textColor}`;
+        return `${this.color}-dark`;
+    }
+
+    public get hasBorder(): boolean {
+        return !!this._user && this._userService.userId !== this.userId && this._userService.isManager(this._user);
     }
 }

apps/red-ui/src/assets/styles/red-page-layout.scss

@@ -118,6 +118,12 @@ body {
                 margin-bottom: 24px;
             }
         }
+
+        @media only screen and (max-width: 1600px) {
+            redaction-initials-avatar .username {
+                display: none;
+            }
+        }
     }
 
     .right-container {