[SG-232 & SG-251] Fix color issues with organization badge (#1649)

* Fix color issues with organization badge

* Use tokenService to get account name

* Remove unused import

src/app/modules/vault/modules/organization-badge/organization-name-badge.component.ts

@@ -8,10 +8,11 @@ import { I18nService } from "jslib-common/abstractions/i18n.service";
 })
 export class OrganizationNameBadgeComponent implements OnInit {
   @Input() organizationName: string;
-  @Input() color: string;
+  @Input() profileName: string;
 
   @Output() onOrganizationClicked = new EventEmitter<string>();
 
+  color: string;
   textColor: string;
 
   constructor(private i18nService: I18nService) {}
@@ -19,10 +20,10 @@ export class OrganizationNameBadgeComponent implements OnInit {
   ngOnInit(): void {
     if (this.organizationName == null || this.organizationName === "") {
       this.organizationName = this.i18nService.t("me");
+      this.color = this.stringToColor(this.profileName.toUpperCase());
     }
-    const upperData = this.organizationName.toUpperCase();
     if (this.color == null) {
-      this.color = this.stringToColor(upperData);
+      this.color = this.stringToColor(this.organizationName.toUpperCase());
     }
     this.textColor = this.pickTextColorBasedOnBgColor();
   }
@@ -49,18 +50,7 @@ export class OrganizationNameBadgeComponent implements OnInit {
     const r = parseInt(color.substring(0, 2), 16); // hexToR
     const g = parseInt(color.substring(2, 4), 16); // hexToG
     const b = parseInt(color.substring(4, 6), 16); // hexToB
-
-    const uicolors = [r / 255, g / 255, b / 255];
-    const c = uicolors.map((c) => {
-      if (c <= 0.03928) {
-        return c / 12.92;
-      } else {
-        return Math.pow((c + 0.055) / 1.055, 2.4);
-      }
-    });
-
-    const L = 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
-    return L > 0.179 ? "black !important" : "white !important";
+    return r * 0.299 + g * 0.587 + b * 0.114 > 186 ? "black !important" : "white !important";
   }
 
   emitOnOrganizationClicked() {

src/app/organizations/vault/ciphers.component.ts

@@ -10,6 +10,7 @@ import { PasswordRepromptService } from "jslib-common/abstractions/passwordRepro
 import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
 import { SearchService } from "jslib-common/abstractions/search.service";
 import { StateService } from "jslib-common/abstractions/state.service";
+import { TokenService } from "jslib-common/abstractions/token.service";
 import { TotpService } from "jslib-common/abstractions/totp.service";
 import { Organization } from "jslib-common/models/domain/organization";
 import { CipherView } from "jslib-common/models/view/cipherView";
@@ -33,13 +34,14 @@ export class CiphersComponent extends BaseCiphersComponent {
     i18nService: I18nService,
     platformUtilsService: PlatformUtilsService,
     cipherService: CipherService,
-    private apiService: ApiService,
     eventService: EventService,
     totpService: TotpService,
     passwordRepromptService: PasswordRepromptService,
     logService: LogService,
     stateService: StateService,
-    organizationService: OrganizationService
+    organizationService: OrganizationService,
+    tokenService: TokenService,
+    private apiService: ApiService
   ) {
     super(
       searchService,
@@ -51,7 +53,8 @@ export class CiphersComponent extends BaseCiphersComponent {
       stateService,
       passwordRepromptService,
       logService,
-      organizationService
+      organizationService,
+      tokenService
     );
   }
 

src/app/vault/ciphers.component.html

@@ -48,7 +48,7 @@
         <td *ngIf="organizations.length > 0 && !organization" class="tw-w-28">
           <app-org-badge
             organizationName="{{ c.organizationId | orgNameFromId: organizations }}"
-            [color]="!c.organizationId ? '#175ddc' : null"
+            profileName="{{ profileName }}"
             (onOrganizationClicked)="onOrganizationClicked(c.organizationId)"
           ></app-org-badge>
         </td>

src/app/vault/ciphers.component.ts

@@ -10,6 +10,7 @@ import { PasswordRepromptService } from "jslib-common/abstractions/passwordRepro
 import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
 import { SearchService } from "jslib-common/abstractions/search.service";
 import { StateService } from "jslib-common/abstractions/state.service";
+import { TokenService } from "jslib-common/abstractions/token.service";
 import { TotpService } from "jslib-common/abstractions/totp.service";
 import { CipherRepromptType } from "jslib-common/enums/cipherRepromptType";
 import { CipherType } from "jslib-common/enums/cipherType";
@@ -37,6 +38,7 @@ export class CiphersComponent extends BaseCiphersComponent implements OnDestroy
   actionPromise: Promise<any>;
   userHasPremiumAccess = false;
   organizations: Organization[] = [];
+  profileName: string;
 
   private didScroll = false;
   private pagedCiphersCount = 0;
@@ -52,7 +54,8 @@ export class CiphersComponent extends BaseCiphersComponent implements OnDestroy
     protected stateService: StateService,
     protected passwordRepromptService: PasswordRepromptService,
     private logService: LogService,
-    private organizationService: OrganizationService
+    private organizationService: OrganizationService,
+    private tokenService: TokenService
   ) {
     super(searchService);
   }
@@ -65,6 +68,7 @@ export class CiphersComponent extends BaseCiphersComponent implements OnDestroy
   // Do not use ngOnInit() for anything that requires sync data.
   async load(filter: (cipher: CipherView) => boolean = null, deleted = false) {
     await super.load(filter, deleted);
+    this.profileName = await this.tokenService.getName();
     this.organizations = await this.organizationService.getAll();
     this.userHasPremiumAccess = await this.stateService.getCanAccessPremium();
   }