[SG-58] Avatar color selector (#3691)

* changes * merge * undo * work * stuffs * chore: added custom color picker * oops * chore: everything but the broken sink * picker v2 * fix: cleanup * fix: linty * fix: use tailwind * fix: use tailwind * undo: merge error * remove: old color picker * fix: merge issue * chore: use input vs component * fix: move logic out! * fix: revert changes to bit-avatar * fix: cleanup undos * feat: color lookup for "me" badge in vault * fix: naming stuff * fix: event emitter * fix: linty * fix: protect * fix: remove v1 states work: navatar * fix: big * fix: messages merge issue * bug: differing bg colors for generated components * feat: added sync stuff * fix: cli * fix: remove service refs, use state * fix: moved from EventEmitter to Subjects * fix: srs * fix: strict stuff is nice tbh * SG-920 + SG-921 (#4342) * SG-920 + SG-921 * Update change-avatar.component.html * Update selectable-avatar.component.ts * [SG-926] [SG-58] [Defect] - Selected Avatar color does not persist in the Account Settings menu (#4359) * SG-926 * fix: comment * fix: undo * fix: imp * work: done with static values (#4272) * [SG-35] (#4361) Co-authored-by: Todd Martin <106564991+trmartin4@users.noreply.github.com>
2024-11-22 11:45:59 +01:00 · 2023-01-01 10:30:09 -05:00 · 2023-01-01 10:30:09 -05:00 · d41b3b13ea
commit d41b3b13ea
parent 0a734ce338
27 changed files with 533 additions and 14 deletions
--- a/apps/browser/src/background/main.background.ts
+++ b/apps/browser/src/background/main.background.ts
@ -1,3 +1,4 @@
+import { AvatarUpdateService as AvatarUpdateServiceAbstraction } from "@bitwarden/common/abstractions/account/avatar-update.service";
 import { ApiService as ApiServiceAbstraction } from "@bitwarden/common/abstractions/api.service";
 import { AppIdService as AppIdServiceAbstraction } from "@bitwarden/common/abstractions/appId.service";
 import { AuditService as AuditServiceAbstraction } from "@bitwarden/common/abstractions/audit.service";
@ -45,6 +46,7 @@ import { CipherType } from "@bitwarden/common/enums/cipherType";
 import { StateFactory } from "@bitwarden/common/factories/stateFactory";
 import { GlobalState } from "@bitwarden/common/models/domain/global-state";
 import { CipherView } from "@bitwarden/common/models/view/cipher.view";
+import { AvatarUpdateService } from "@bitwarden/common/services/account/avatar-update.service";
 import { ApiService } from "@bitwarden/common/services/api.service";
 import { AppIdService } from "@bitwarden/common/services/appId.service";
 import { AuditService } from "@bitwarden/common/services/audit.service";
@ -168,6 +170,7 @@ export default class MainBackground {
  policyApiService: PolicyApiServiceAbstraction;
  userVerificationApiService: UserVerificationApiServiceAbstraction;
  syncNotifierService: SyncNotifierServiceAbstraction;
+  avatarUpdateService: AvatarUpdateServiceAbstraction;

  // Passed to the popup for Safari to workaround issues with theming, downloading, etc.
  backgroundWindow = window;
@ -565,6 +568,8 @@ export default class MainBackground {
      this.stateService,
      this.apiService
    );
+
+    this.avatarUpdateService = new AvatarUpdateService(this.apiService, this.stateService);
  }

  async bootstrap() {
--- a/apps/browser/src/background/runtime.background.ts
+++ b/apps/browser/src/background/runtime.background.ts
@ -97,6 +97,7 @@ export default class RuntimeBackground {
            await this.main.refreshBadge();
            await this.main.refreshMenu();
          }, 2000);
+          this.main.avatarUpdateService.loadColorFromState();
        }
        break;
      case "openPopup":
--- a/apps/desktop/src/app/layout/account-switcher.component.html
+++ b/apps/desktop/src/app/layout/account-switcher.component.html
@ -12,6 +12,7 @@
    <app-avatar
      [text]="activeAccount.name"
      [id]="activeAccount.id"
+      [color]="activeAccount.avatarColor"
      [size]="25"
      [circle]="true"
      [fontSize]="14"
@ -65,6 +66,7 @@
          [circle]="true"
          [fontSize]="14"
          [dynamic]="true"
+          [color]="a.value.avatarColor"
          *ngIf="a.value.profile.email != null"
          aria-hidden="true"
        ></app-avatar>
--- a/apps/desktop/src/app/layout/account-switcher.component.ts
+++ b/apps/desktop/src/app/layout/account-switcher.component.ts
@ -16,6 +16,7 @@ type ActiveAccount = {
  id: string;
  name: string;
  email: string;
+  avatarColor: string;
 };

 export class SwitcherAccount extends Account {
@ -27,6 +28,8 @@ export class SwitcherAccount extends Account {
    );
  }

+  avatarColor: string;
+
  private removeWebProtocolFromString(urlString: string) {
    const regex = /http(s)?(:)?(\/\/)?|(\/\/)?(www\.)?/g;
    return urlString.replace(regex, "");
@ -112,6 +115,7 @@ export class AccountSwitcherComponent implements OnInit, OnDestroy {
              id: await this.tokenService.getUserId(),
              name: (await this.tokenService.getName()) ?? (await this.tokenService.getEmail()),
              email: await this.tokenService.getEmail(),
+              avatarColor: await this.stateService.getAvatarColor(),
            };
          } catch {
            this.activeAccount = undefined;
@ -162,6 +166,9 @@ export class AccountSwitcherComponent implements OnInit, OnDestroy {
        userId: userId,
      });
      switcherAccounts[userId] = new SwitcherAccount(baseAccounts[userId]);
+      switcherAccounts[userId].avatarColor = await this.stateService.getAvatarColor({
+        userId: userId,
+      });
    }
    return switcherAccounts;
  }
--- a/apps/web/src/app/components/dynamic-avatar.component.ts
+++ b/apps/web/src/app/components/dynamic-avatar.component.ts
@ -0,0 +1,41 @@
+import { Component, Input, OnDestroy } from "@angular/core";
+import { Observable, Subject } from "rxjs";
+
+import { AvatarUpdateService } from "@bitwarden/common/abstractions/account/avatar-update.service";
+type SizeTypes = "xlarge" | "large" | "default" | "small" | "xsmall";
+@Component({
+  selector: "dynamic-avatar",
+  template: `<span [title]="title">
+    <bit-avatar
+      appStopClick
+      [text]="text"
+      [size]="size"
+      [color]="color$ | async"
+      [border]="border"
+      [id]="id"
+      [title]="title"
+    >
+    </bit-avatar>
+  </span>`,
+})
+export class DynamicAvatarComponent implements OnDestroy {
+  @Input() border = false;
+  @Input() id: string;
+  @Input() text: string;
+  @Input() title: string;
+  @Input() size: SizeTypes = "default";
+  color$: Observable<string | null>;
+  private destroy$ = new Subject<void>();
+
+  constructor(private accountUpdateService: AvatarUpdateService) {
+    if (this.text) {
+      this.text = this.text.toUpperCase();
+    }
+    this.color$ = this.accountUpdateService.avatarUpdate$;
+  }
+
+  async ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+}
--- a/apps/web/src/app/components/selectable-avatar.component.ts
+++ b/apps/web/src/app/components/selectable-avatar.component.ts
@ -0,0 +1,54 @@
+import { Component, EventEmitter, Input, Output } from "@angular/core";
+
+@Component({
+  selector: "selectable-avatar",
+  template: `<span
+    [title]="title"
+    (click)="onFire()"
+    (keyup.enter)="onFire()"
+    tabindex="0"
+    [ngClass]="classList"
+  >
+    <bit-avatar
+      appStopClick
+      [text]="text"
+      size="xlarge"
+      [text]="text"
+      [color]="color"
+      [border]="false"
+      [id]="id"
+      [border]="border"
+      [title]="title"
+    >
+    </bit-avatar>
+  </span>`,
+})
+export class SelectableAvatarComponent {
+  @Input() id: string;
+  @Input() text: string;
+  @Input() title: string;
+  @Input() color: string;
+  @Input() border = false;
+  @Input() selected = false;
+  @Output() select = new EventEmitter<string>();
+
+  onFire() {
+    this.select.emit(this.color);
+  }
+
+  get classList() {
+    return ["tw-rounded-full tw-inline-block"]
+      .concat(["tw-cursor-pointer", "tw-outline", "tw-outline-solid", "tw-outline-offset-1"])
+      .concat(
+        this.selected
+          ? ["tw-outline-[3px]", "tw-outline-primary-500"]
+          : [
+              "tw-outline-0",
+              "hover:tw-outline-1",
+              "hover:tw-outline-primary-300",
+              "focus:tw-outline-2",
+              "focus:tw-outline-primary-500",
+            ]
+      );
+  }
+}
--- a/apps/web/src/app/layouts/navbar.component.html
+++ b/apps/web/src/app/layouts/navbar.component.html
@ -45,7 +45,7 @@
          [bitMenuTriggerFor]="accountMenu"
          class="tw-border-0 tw-bg-transparent tw-text-alt2 tw-opacity-70 hover:tw-opacity-90"
        >
-          <i class="bwi bwi-user-circle bwi-lg" aria-hidden="true"></i>
+          <dynamic-avatar [text]="name" size="xsmall" aria-hidden="true"></dynamic-avatar>
          <i class="bwi bwi-caret-down bwi-sm" aria-hidden="true"></i>
        </button>
        <bit-menu class="dropdown-menu" #accountMenu>
@ -55,7 +55,7 @@
              *ngIf="name"
              appStopProp
            >
-              <bit-avatar [text]="name" [id]="userId" size="small"></bit-avatar>
+              <dynamic-avatar [text]="name" size="small"></dynamic-avatar>
              <div class="tw-ml-2 tw-block tw-overflow-hidden tw-whitespace-nowrap">
                <span>{{ "loggedInAs" | i18n }}</span>
                <small class="tw-block tw-overflow-hidden tw-whitespace-nowrap tw-text-muted">{{
--- a/apps/web/src/app/settings/change-avatar.component.html
+++ b/apps/web/src/app/settings/change-avatar.component.html
@ -0,0 +1,82 @@
+<div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="customizeTitle">
+  <div class="modal-dialog modal-dialog-scrollable tw-w-[600px] tw-max-w-none" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h2 class="modal-title" id="customizeTitle">{{ "customizeAvatar" | i18n }}</h2>
+        <button
+          type="button"
+          class="close"
+          data-dismiss="modal"
+          appA11yTitle="{{ 'close' | i18n }}"
+        >
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <div class="card-body text-center" *ngIf="loading">
+          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          {{ "loading" | i18n }}
+        </div>
+        <app-callout type="error" *ngIf="error">
+          {{ error }}
+        </app-callout>
+        <p class="tw-text-lg">{{ "pickAnAvatarColor" | i18n }}</p>
+        <div class="tw-flex tw-flex-wrap tw-justify-center tw-gap-8 tw-gap-y-8">
+          <ng-container *ngFor="let c of defaultColorPalette">
+            <selectable-avatar
+              appStopClick
+              (select)="setSelection(c.color)"
+              [selected]="c.selected"
+              [title]="c.name"
+              text="{{ profile | userName }}"
+              [color]="c.color"
+              [border]="true"
+            >
+            </selectable-avatar>
+          </ng-container>
+          <span>
+            <span
+              [tabIndex]="0"
+              (keyup.enter)="showCustomPicker()"
+              (click)="showCustomPicker()"
+              title="{{ 'customColor' | i18n }}"
+              [ngClass]="{
+                '!tw-outline-[3px] tw-outline-primary-500 hover:tw-outline-[3px] hover:tw-outline-primary-500':
+                  customColorSelected
+              }"
+              class="tw-outline-solid tw-bg-white tw-relative tw-inline-block tw-flex tw-h-24 tw-w-24 tw-cursor-pointer tw-place-content-center tw-content-center tw-justify-center tw-rounded-full tw-border tw-border-solid tw-border-secondary-500 tw-outline tw-outline-0 tw-outline-offset-1 hover:tw-outline-1 hover:tw-outline-primary-300 focus:tw-outline-2 focus:tw-outline-primary-500"
+              [style.background-color]="customColor$ | async"
+            >
+              <i
+                [style.color]="customTextColor$ | async"
+                class="bwi bwi-pencil tw-m-auto tw-text-3xl"
+              ></i>
+              <input
+                tabindex="-1"
+                class="tw-absolute tw-right-0 tw-bottom-0 tw-h-px tw-w-px tw-border-none tw-bg-transparent tw-opacity-0"
+                #colorPicker
+                type="color"
+                [ngModel]="customColor$ | async"
+                (ngModelChange)="customColor$.next($event)"
+              />
+            </span>
+          </span>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button
+          type="submit"
+          class="btn btn-primary btn-submit"
+          [disabled]="loading"
+          (click)="submit()"
+        >
+          <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
+          <span>{{ "save" | i18n }}</span>
+        </button>
+        <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
+          {{ "close" | i18n }}
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
--- a/apps/web/src/app/settings/change-avatar.component.ts
+++ b/apps/web/src/app/settings/change-avatar.component.ts
@ -0,0 +1,138 @@
+import {
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnDestroy,
+  OnInit,
+  Output,
+  ViewChild,
+  ViewEncapsulation,
+} from "@angular/core";
+import { BehaviorSubject, debounceTime, Subject, takeUntil } from "rxjs";
+
+import { AvatarUpdateService } from "@bitwarden/common/abstractions/account/avatar-update.service";
+import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
+import { LogService } from "@bitwarden/common/abstractions/log.service";
+import { PlatformUtilsService } from "@bitwarden/common/abstractions/platformUtils.service";
+import { Utils } from "@bitwarden/common/misc/utils";
+import { ProfileResponse } from "@bitwarden/common/models/response/profile.response";
+
+@Component({
+  selector: "app-change-avatar",
+  templateUrl: "change-avatar.component.html",
+  encapsulation: ViewEncapsulation.None,
+})
+export class ChangeAvatarComponent implements OnInit, OnDestroy {
+  @Input() profile: ProfileResponse;
+
+  @Output() changeColor: EventEmitter<string | null> = new EventEmitter();
+  @Output() onSaved = new EventEmitter();
+
+  @ViewChild("colorPicker") colorPickerElement: ElementRef<HTMLElement>;
+
+  loading = false;
+  error: string;
+  defaultColorPalette: NamedAvatarColor[] = [
+    { name: "brightBlue", color: "#16cbfc" },
+    { name: "green", color: "#94cc4b" },
+    { name: "orange", color: "#ffb520" },
+    { name: "lavender", color: "#e5beed" },
+    { name: "yellow", color: "#fcff41" },
+    { name: "indigo", color: "#acbdf7" },
+    { name: "teal", color: "#8ecdc5" },
+    { name: "salmon", color: "#ffa3a3" },
+    { name: "pink", color: "#ffa2d4" },
+  ];
+  customColorSelected = false;
+  currentSelection: string;
+
+  protected customColor$ = new BehaviorSubject<string | null>(null);
+  protected customTextColor$ = new BehaviorSubject<string>("#000000");
+  private destroy$ = new Subject<void>();
+
+  constructor(
+    private i18nService: I18nService,
+    private platformUtilsService: PlatformUtilsService,
+    private logService: LogService,
+    private accountUpdateService: AvatarUpdateService
+  ) {}
+
+  async ngOnInit() {
+    //localize the default colors
+    this.defaultColorPalette.forEach((c) => (c.name = this.i18nService.t(c.name)));
+
+    this.customColor$
+      .pipe(debounceTime(200), takeUntil(this.destroy$))
+      .subscribe((color: string | null) => {
+        if (color == null) {
+          return;
+        }
+        this.customTextColor$.next(Utils.pickTextColorBasedOnBgColor(color));
+        this.customColorSelected = true;
+        this.currentSelection = color;
+      });
+
+    this.setSelection(await this.accountUpdateService.loadColorFromState());
+  }
+
+  async showCustomPicker() {
+    this.customColorSelected = true;
+    this.colorPickerElement.nativeElement.click();
+    this.setSelection(this.customColor$.value);
+  }
+
+  async generateAvatarColor() {
+    Utils.stringToColor(this.profile.name.toString());
+  }
+
+  async submit() {
+    try {
+      if (Utils.validateHexColor(this.currentSelection) || this.currentSelection == null) {
+        await this.accountUpdateService.pushUpdate(this.currentSelection);
+        this.changeColor.emit(this.currentSelection);
+        this.platformUtilsService.showToast("success", null, this.i18nService.t("avatarUpdated"));
+      } else {
+        this.platformUtilsService.showToast("error", null, this.i18nService.t("errorOccurred"));
+      }
+    } catch (e) {
+      this.logService.error(e);
+      this.platformUtilsService.showToast("error", null, this.i18nService.t("errorOccurred"));
+    }
+  }
+
+  async ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  async setSelection(color: string | null) {
+    this.defaultColorPalette.filter((x) => x.selected).forEach((c) => (c.selected = false));
+
+    if (color == null) {
+      return;
+    }
+
+    color = color.toLowerCase();
+
+    this.customColorSelected = false;
+    //Allow for toggle
+    if (this.currentSelection === color) {
+      this.currentSelection = null;
+    } else {
+      const selectedColorIndex = this.defaultColorPalette.findIndex((c) => c.color === color);
+      if (selectedColorIndex !== -1) {
+        this.defaultColorPalette[selectedColorIndex].selected = true;
+        this.currentSelection = color;
+      } else {
+        this.customColor$.next(color);
+      }
+    }
+  }
+}
+
+export class NamedAvatarColor {
+  name: string;
+  color: string;
+  selected? = false;
+}
--- a/apps/web/src/app/settings/profile.component.html
+++ b/apps/web/src/app/settings/profile.component.html
@ -33,7 +33,17 @@
    </div>
    <div class="col-6">
      <div class="mb-3">
-        <bit-avatar [text]="profile | userName" [id]="profile.id" size="large"></bit-avatar>
+        <dynamic-avatar text="{{ profile | userName }}" [size]="'large'"> </dynamic-avatar>
+        <button
+          type="button"
+          class="btn btn-outline-secondary tw-ml-3.5"
+          appStopClick
+          appStopProp
+          (click)="openChangeAvatar()"
+        >
+          <i class="bwi bwi-lg bwi-pencil-square" aria-hidden="true"></i>
+          Customize
+        </button>
      </div>
      <hr />
      <p *ngIf="fingerprint">
@ -55,3 +65,4 @@
    <span>{{ "save" | i18n }}</span>
  </button>
 </form>
+<ng-template #avatarModalTemplate></ng-template>
--- a/apps/web/src/app/settings/profile.component.ts
+++ b/apps/web/src/app/settings/profile.component.ts
@ -1,5 +1,7 @@
-import { Component, OnInit } from "@angular/core";
+import { ViewChild, ViewContainerRef, Component, OnDestroy, OnInit } from "@angular/core";
+import { Subject, takeUntil } from "rxjs";

+import { ModalService } from "@bitwarden/angular/services/modal.service";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
@ -10,16 +12,21 @@ import { StateService } from "@bitwarden/common/abstractions/state.service";
 import { UpdateProfileRequest } from "@bitwarden/common/models/request/update-profile.request";
 import { ProfileResponse } from "@bitwarden/common/models/response/profile.response";

+import { ChangeAvatarComponent } from "./change-avatar.component";
+
@Component({
  selector: "app-profile",
  templateUrl: "profile.component.html",
 })
-export class ProfileComponent implements OnInit {
+export class ProfileComponent implements OnInit, OnDestroy {
  loading = true;
  profile: ProfileResponse;
  fingerprint: string;

  formPromise: Promise<any>;
+  @ViewChild("avatarModalTemplate", { read: ViewContainerRef, static: true })
+  avatarModalRef: ViewContainerRef;
+  private destroy$ = new Subject<void>();

  constructor(
    private apiService: ApiService,
@ -28,7 +35,8 @@ export class ProfileComponent implements OnInit {
    private cryptoService: CryptoService,
    private logService: LogService,
    private keyConnectorService: KeyConnectorService,
-    private stateService: StateService
+    private stateService: StateService,
+    private modalService: ModalService
  ) {}

  async ngOnInit() {
@ -42,6 +50,24 @@ export class ProfileComponent implements OnInit {
    }
  }

+  async ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  async openChangeAvatar() {
+    const modalOpened = await this.modalService.openViewRef(
+      ChangeAvatarComponent,
+      this.avatarModalRef,
+      (modal) => {
+        modal.profile = this.profile;
+        modal.changeColor.pipe(takeUntil(this.destroy$)).subscribe(() => {
+          modalOpened[0].close();
+        });
+      }
+    );
+  }
+
  async submit() {
    try {
      const request = new UpdateProfileRequest(this.profile.name, this.profile.masterPasswordHint);
--- a/apps/web/src/app/shared/loose-components.module.ts
+++ b/apps/web/src/app/shared/loose-components.module.ts
@ -16,10 +16,12 @@ import { UpdatePasswordComponent } from "../accounts/update-password.component";
 import { UpdateTempPasswordComponent } from "../accounts/update-temp-password.component";
 import { VerifyEmailTokenComponent } from "../accounts/verify-email-token.component";
 import { VerifyRecoverDeleteComponent } from "../accounts/verify-recover-delete.component";
+import { DynamicAvatarComponent } from "../components/dynamic-avatar.component";
 import { NestedCheckboxComponent } from "../components/nested-checkbox.component";
 import { OrganizationSwitcherComponent } from "../components/organization-switcher.component";
 import { PasswordRepromptComponent } from "../components/password-reprompt.component";
 import { PremiumBadgeComponent } from "../components/premium-badge.component";
+import { SelectableAvatarComponent } from "../components/selectable-avatar.component";
 import { UserVerificationPromptComponent } from "../components/user-verification-prompt.component";
 import { UserVerificationComponent } from "../components/user-verification.component";
 import { FooterComponent } from "../layouts/footer.component";
@ -69,6 +71,7 @@ import { ApiKeyComponent } from "../settings/api-key.component";
 import { BillingHistoryViewComponent } from "../settings/billing-history-view.component";
 import { BillingHistoryComponent } from "../settings/billing-history.component";
 import { BillingSyncKeyComponent } from "../settings/billing-sync-key.component";
+import { ChangeAvatarComponent } from "../settings/change-avatar.component";
 import { ChangeEmailComponent } from "../settings/change-email.component";
 import { ChangeKdfComponent } from "../settings/change-kdf.component";
 import { ChangePasswordComponent } from "../settings/change-password.component";
@ -167,6 +170,7 @@ import { SharedModule } from ".";
    DeauthorizeSessionsComponent,
    DeleteAccountComponent,
    DomainRulesComponent,
+    DynamicAvatarComponent,
    EmergencyAccessAddEditComponent,
    EmergencyAccessAttachmentsComponent,
    EmergencyAccessComponent,
@ -220,6 +224,7 @@ import { SharedModule } from ".";
    PremiumBadgeComponent,
    PremiumComponent,
    ProfileComponent,
+    ChangeAvatarComponent,
    ProvidersComponent,
    PurgeVaultComponent,
    RecoverDeleteComponent,
@ -227,6 +232,7 @@ import { SharedModule } from ".";
    RemovePasswordComponent,
    SecurityComponent,
    SecurityKeysComponent,
+    SelectableAvatarComponent,
    SendAddEditComponent,
    SendComponent,
    SendEffluxDatesComponent,
@ -290,6 +296,7 @@ import { SharedModule } from ".";
    DeauthorizeSessionsComponent,
    DeleteAccountComponent,
    DomainRulesComponent,
+    DynamicAvatarComponent,
    EmergencyAccessAddEditComponent,
    EmergencyAccessAttachmentsComponent,
    EmergencyAccessComponent,
@ -342,6 +349,7 @@ import { SharedModule } from ".";
    PremiumBadgeComponent,
    PremiumComponent,
    ProfileComponent,
+    ChangeAvatarComponent,
    ProvidersComponent,
    PurgeVaultComponent,
    RecoverDeleteComponent,
@ -349,6 +357,7 @@ import { SharedModule } from ".";
    RemovePasswordComponent,
    SecurityComponent,
    SecurityKeysComponent,
+    SelectableAvatarComponent,
    SendAddEditComponent,
    SendComponent,
    SendEffluxDatesComponent,
--- a/apps/web/src/app/vault/organization-badge/organization-name-badge.component.ts
+++ b/apps/web/src/app/vault/organization-badge/organization-name-badge.component.ts
@ -1,6 +1,8 @@
 import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";

+import { AvatarUpdateService } from "@bitwarden/common/abstractions/account/avatar-update.service";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
+import { TokenService } from "@bitwarden/common/abstractions/token.service";
 import { Utils } from "@bitwarden/common/misc/utils";

@Component({
@ -15,18 +17,29 @@ export class OrganizationNameBadgeComponent implements OnInit {

  color: string;
  textColor: string;
+  isMe: boolean;

-  constructor(private i18nService: I18nService) {}
+  constructor(
+    private i18nService: I18nService,
+    private avatarService: AvatarUpdateService,
+    private tokenService: TokenService
+  ) {}

-  ngOnInit(): void {
+  async ngOnInit(): Promise<void> {
    if (this.organizationName == null || this.organizationName === "") {
      this.organizationName = this.i18nService.t("me");
-      this.color = Utils.stringToColor(this.profileName.toUpperCase());
+      this.isMe = true;
    }
-    if (this.color == null) {
-      this.color = Utils.stringToColor(this.organizationName.toUpperCase());
+    if (this.isMe) {
+      this.color = await this.avatarService.loadColorFromState();
+      if (this.color == null) {
+        const userName = await this.tokenService.getName();
+        this.color = Utils.stringToColor(userName.toUpperCase());
+      }
+    } else {
+      this.color = Utils.stringToColor(this.organizationName);
    }
-    this.textColor = Utils.pickTextColorBasedOnBgColor(this.color);
+    this.textColor = Utils.pickTextColorBasedOnBgColor(this.color, 135, true) + "!important";
  }

  emitOnOrganizationClicked() {
--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@ -5475,6 +5475,45 @@
  "notYou": {
    "message": "Not you?"
  },
+  "pickAnAvatarColor": {
+    "message": "Pick an avatar color"
+  },
+  "customizeAvatar": {
+    "message": "Customize avatar"
+  },
+  "avatarUpdated": {
+    "message": "Avatar updated"
+  },
+  "brightBlue": {
+    "message": "Bright Blue"
+  },
+  "green": {
+    "message": "Green"
+  },
+  "orange": {
+    "message": "Orange"
+  },
+  "lavender": {
+    "message": "Lavender"
+  },
+  "yellow": {
+    "message": "Yellow"
+  },
+  "indigo": {
+    "message": "Indigo"
+  },
+  "teal": {
+    "message": "Teal"
+  },
+  "salmon": {
+    "message": "Salmon"
+  },
+  "pink": {
+    "message": "Pink"
+   },
+   "customColor": {
+    "message": "Custom Color"
+  },
  "multiSelectPlaceholder": {
    "message": "-- Type to Filter --"
  },
--- a/libs/angular/src/services/jslib-services.module.ts
+++ b/libs/angular/src/services/jslib-services.module.ts
@ -5,6 +5,7 @@ import {
  AccountService as AccountServiceAbstraction,
  InternalAccountService,
 } from "@bitwarden/common/abstractions/account/account.service";
+import { AvatarUpdateService as AccountUpdateServiceAbstraction } from "@bitwarden/common/abstractions/account/avatar-update.service";
 import { AnonymousHubService as AnonymousHubServiceAbstraction } from "@bitwarden/common/abstractions/anonymousHub.service";
 import { ApiService as ApiServiceAbstraction } from "@bitwarden/common/abstractions/api.service";
 import { AppIdService as AppIdServiceAbstraction } from "@bitwarden/common/abstractions/appId.service";
@ -73,6 +74,7 @@ import { Account } from "@bitwarden/common/models/domain/account";
 import { GlobalState } from "@bitwarden/common/models/domain/global-state";
 import { AccountApiServiceImplementation } from "@bitwarden/common/services/account/account-api.service";
 import { AccountServiceImplementation } from "@bitwarden/common/services/account/account.service";
+import { AvatarUpdateService } from "@bitwarden/common/services/account/avatar-update.service";
 import { AnonymousHubService } from "@bitwarden/common/services/anonymousHub.service";
 import { ApiService } from "@bitwarden/common/services/api.service";
 import { AppIdService } from "@bitwarden/common/services/appId.service";
@ -291,6 +293,11 @@ import { AbstractThemingService } from "./theming/theming.service.abstraction";
      provide: InternalAccountService,
      useExisting: AccountServiceAbstraction,
    },
+    {
+      provide: AccountUpdateServiceAbstraction,
+      useClass: AvatarUpdateService,
+      deps: [ApiServiceAbstraction, StateServiceAbstraction],
+    },
    { provide: LogService, useFactory: () => new ConsoleLogService(false) },
    {
      provide: CollectionServiceAbstraction,
--- a/libs/common/src/abstractions/account/avatar-update.service.ts
+++ b/libs/common/src/abstractions/account/avatar-update.service.ts
@ -0,0 +1,8 @@
+import { Observable } from "rxjs";
+
+import { ProfileResponse } from "../../models/response/profile.response";
+export abstract class AvatarUpdateService {
+  avatarUpdate$ = new Observable<string | null>();
+  abstract pushUpdate(color: string): Promise<ProfileResponse | void>;
+  abstract loadColorFromState(): Promise<string | null>;
+}
--- a/libs/common/src/abstractions/api.service.ts
+++ b/libs/common/src/abstractions/api.service.ts
@ -62,6 +62,7 @@ import { TaxInfoUpdateRequest } from "../models/request/tax-info-update.request"
 import { TwoFactorEmailRequest } from "../models/request/two-factor-email.request";
 import { TwoFactorProviderRequest } from "../models/request/two-factor-provider.request";
 import { TwoFactorRecoveryRequest } from "../models/request/two-factor-recovery.request";
+import { UpdateAvatarRequest } from "../models/request/update-avatar.request";
 import { UpdateDomainsRequest } from "../models/request/update-domains.request";
 import { UpdateKeyRequest } from "../models/request/update-key.request";
 import { UpdateProfileRequest } from "../models/request/update-profile.request";
@ -172,6 +173,7 @@ export abstract class ApiService {
  getUserSubscription: () => Promise<SubscriptionResponse>;
  getTaxInfo: () => Promise<TaxInfoResponse>;
  putProfile: (request: UpdateProfileRequest) => Promise<ProfileResponse>;
+  putAvatar: (request: UpdateAvatarRequest) => Promise<ProfileResponse>;
  putTaxInfo: (request: TaxInfoUpdateRequest) => Promise<any>;
  postPrelogin: (request: PreloginRequest) => Promise<PreloginResponse>;
  postEmailToken: (request: EmailTokenRequest) => Promise<any>;
--- a/libs/common/src/abstractions/state.service.ts
+++ b/libs/common/src/abstractions/state.service.ts
@ -349,4 +349,7 @@ export abstract class StateService<T extends Account = Account> {
   * @deprecated Do not call this directly, use ConfigService
   */
  setServerConfig: (value: ServerConfigData, options?: StorageOptions) => Promise<void>;
+
+  getAvatarColor: (options?: StorageOptions) => Promise<string | null | undefined>;
+  setAvatarColor: (value: string, options?: StorageOptions) => Promise<void>;
 }
--- a/libs/common/src/misc/utils.ts
+++ b/libs/common/src/misc/utils.ts
@ -431,6 +431,10 @@ export class Utils {
    return this.global.bitwardenContainerService;
  }

+  static validateHexColor(color: string) {
+    return /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(color);
+  }
+
  /**
   * Converts map to a Record<string, V> with the same data. Inverse of recordToMap
   * Useful in toJSON methods, since Maps are not serializable
--- a/libs/common/src/models/domain/account.ts
+++ b/libs/common/src/models/domain/account.ts
@ -233,6 +233,7 @@ export class AccountSettings {
  vaultTimeout?: number;
  vaultTimeoutAction?: string = "lock";
  serverConfig?: ServerConfigData;
+  avatarColor?: string;

  static fromJSON(obj: Jsonify<AccountSettings>): AccountSettings {
    if (obj == null) {
--- a/libs/common/src/models/request/update-avatar.request.ts
+++ b/libs/common/src/models/request/update-avatar.request.ts
@ -0,0 +1,7 @@
+export class UpdateAvatarRequest {
+  avatarColor: string;
+
+  constructor(avatarColor: string) {
+    this.avatarColor = avatarColor;
+  }
+}
--- a/libs/common/src/models/response/profile.response.ts
+++ b/libs/common/src/models/response/profile.response.ts
@ -14,6 +14,7 @@ export class ProfileResponse extends BaseResponse {
  culture: string;
  twoFactorEnabled: boolean;
  key: string;
+  avatarColor: string;
  privateKey: string;
  securityStamp: string;
  forcePasswordReset: boolean;
@ -34,6 +35,7 @@ export class ProfileResponse extends BaseResponse {
    this.culture = this.getResponseProperty("Culture");
    this.twoFactorEnabled = this.getResponseProperty("TwoFactorEnabled");
    this.key = this.getResponseProperty("Key");
+    this.avatarColor = this.getResponseProperty("AvatarColor");
    this.privateKey = this.getResponseProperty("PrivateKey");
    this.securityStamp = this.getResponseProperty("SecurityStamp");
    this.forcePasswordReset = this.getResponseProperty("ForcePasswordReset") ?? false;
--- a/libs/common/src/services/account/avatar-update.service.ts
+++ b/libs/common/src/services/account/avatar-update.service.ts
@ -0,0 +1,30 @@
+import { BehaviorSubject, Observable } from "rxjs";
+
+import { AvatarUpdateService as AvatarUpdateServiceAbstraction } from "../../abstractions/account/avatar-update.service";
+import { ApiService } from "../../abstractions/api.service";
+import { StateService } from "../../abstractions/state.service";
+import { UpdateAvatarRequest } from "../../models/request/update-avatar.request";
+import { ProfileResponse } from "../../models/response/profile.response";
+
+export class AvatarUpdateService implements AvatarUpdateServiceAbstraction {
+  private _avatarUpdate$ = new BehaviorSubject<string | null>(null);
+  avatarUpdate$: Observable<string | null> = this._avatarUpdate$.asObservable();
+
+  constructor(private apiService: ApiService, private stateService: StateService) {
+    this.loadColorFromState();
+  }
+
+  loadColorFromState(): Promise<string | null> {
+    return this.stateService.getAvatarColor().then((color) => {
+      this._avatarUpdate$.next(color);
+      return color;
+    });
+  }
+
+  pushUpdate(color: string | null): Promise<ProfileResponse | void> {
+    return this.apiService.putAvatar(new UpdateAvatarRequest(color)).then((response) => {
+      this.stateService.setAvatarColor(response.avatarColor);
+      this._avatarUpdate$.next(response.avatarColor);
+    });
+  }
+}
--- a/libs/common/src/services/api.service.ts
+++ b/libs/common/src/services/api.service.ts
@ -70,6 +70,7 @@ import { TaxInfoUpdateRequest } from "../models/request/tax-info-update.request"
 import { TwoFactorEmailRequest } from "../models/request/two-factor-email.request";
 import { TwoFactorProviderRequest } from "../models/request/two-factor-provider.request";
 import { TwoFactorRecoveryRequest } from "../models/request/two-factor-recovery.request";
+import { UpdateAvatarRequest } from "../models/request/update-avatar.request";
 import { UpdateDomainsRequest } from "../models/request/update-domains.request";
 import { UpdateKeyRequest } from "../models/request/update-key.request";
 import { UpdateProfileRequest } from "../models/request/update-profile.request";
@ -290,6 +291,11 @@ export class ApiService implements ApiServiceAbstraction {
    return new ProfileResponse(r);
  }

+  async putAvatar(request: UpdateAvatarRequest): Promise<ProfileResponse> {
+    const r = await this.send("PUT", "/accounts/avatar", request, true, true);
+    return new ProfileResponse(r);
+  }
+
  putTaxInfo(request: TaxInfoUpdateRequest): Promise<any> {
    return this.send("PUT", "/accounts/tax", request, true, false);
  }
--- a/libs/common/src/services/state.service.ts
+++ b/libs/common/src/services/state.service.ts
@ -2301,6 +2301,23 @@ export class StateService<
    )?.settings?.serverConfig;
  }

+  async getAvatarColor(options?: StorageOptions): Promise<string | null | undefined> {
+    return (
+      await this.getAccount(this.reconcileOptions(options, await this.defaultOnDiskLocalOptions()))
+    )?.settings?.avatarColor;
+  }
+
+  async setAvatarColor(value: string, options?: StorageOptions): Promise<void> {
+    const account = await this.getAccount(
+      this.reconcileOptions(options, await this.defaultOnDiskLocalOptions())
+    );
+    account.settings.avatarColor = value;
+    return await this.saveAccount(
+      account,
+      this.reconcileOptions(options, await this.defaultOnDiskLocalOptions())
+    );
+  }
+
  protected async getGlobals(options: StorageOptions): Promise<TGlobalState> {
    let globals: TGlobalState;
    if (this.useMemory(options.storageLocation)) {
--- a/libs/common/src/services/sync/sync.service.ts
+++ b/libs/common/src/services/sync/sync.service.ts
@ -304,6 +304,7 @@ export class SyncService implements SyncServiceAbstraction {
    await this.cryptoService.setEncPrivateKey(response.privateKey);
    await this.cryptoService.setProviderKeys(response.providers);
    await this.cryptoService.setOrgKeys(response.organizations, response.providerOrganizations);
+    await this.stateService.setAvatarColor(response.avatarColor);
    await this.stateService.setSecurityStamp(response.securityStamp);
    await this.stateService.setEmailVerified(response.emailVerified);
    await this.stateService.setHasPremiumPersonally(response.premiumPersonally);
--- a/libs/components/src/avatar/avatar.component.ts
+++ b/libs/components/src/avatar/avatar.component.ts
@ -3,23 +3,26 @@ import { DomSanitizer, SafeResourceUrl } from "@angular/platform-browser";

 import { Utils } from "@bitwarden/common/misc/utils";

-type SizeTypes = "large" | "default" | "small";
+type SizeTypes = "xlarge" | "large" | "default" | "small" | "xsmall";

 const SizeClasses: Record<SizeTypes, string[]> = {
+  xlarge: ["tw-h-24", "tw-w-24"],
  large: ["tw-h-16", "tw-w-16"],
  default: ["tw-h-10", "tw-w-10"],
  small: ["tw-h-7", "tw-w-7"],
+  xsmall: ["tw-h-6", "tw-w-6"],
 };

@Component({
  selector: "bit-avatar",
-  template: `<img *ngIf="src" [src]="src" title="{{ text }}" [ngClass]="classList" />`,
+  template: `<img *ngIf="src" [src]="src" title="{{ title || text }}" [ngClass]="classList" />`,
 })
 export class AvatarComponent implements OnChanges {
  @Input() border = false;
  @Input() color?: string;
  @Input() id?: string;
  @Input() text?: string;
+  @Input() title: string;
  @Input() size: SizeTypes = "default";

  private svgCharCount = 2;