From f2e8c7f05854461147d4f2845ea1c3fdc8ecb91b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Thu, 25 Mar 2021 21:08:41 +0200
Subject: [PATCH] RED-1192, RED-1193

---
 .../initials-avatar.component.html            |  2 +-
 .../initials-avatar.component.scss            |  6 +++++
 .../initials-avatar.component.ts              | 22 ++++++++-----------
 .../src/assets/styles/red-page-layout.scss    |  6 +++++
 4 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.html b/apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.html
index 6af835d5b..8bac6c9dc 100644
--- a/apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.html
+++ b/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">
diff --git a/apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.scss b/apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.scss
index 4fa6482c9..61c92d816 100644
--- a/apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.scss
+++ b/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;
+}
diff --git a/apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.ts b/apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.ts
index 140126905..a4999dced 100644
--- a/apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.ts
+++ b/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);
     }
 }
diff --git a/apps/red-ui/src/assets/styles/red-page-layout.scss b/apps/red-ui/src/assets/styles/red-page-layout.scss
index a2ea6a528..d48a37437 100644
--- a/apps/red-ui/src/assets/styles/red-page-layout.scss
+++ b/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 {