Update user avatar fallback (#472)

* Update userAvatar fallback

* Update tests

* Remove unused helper

* Fix broken test

* Add iconSize tests

web/app/components/person/avatar.hbs

@@ -23,13 +23,11 @@
       />
     {{else}}
       <div data-test-fallback class="flex text-body-100">
-        {{#if @email}}
-          <span class="capitalize">
-            {{get-first-letter @email}}
-          </span>
-        {{else}}
-          <FlightIcon @name="user" class="scale-90" />
-        {{/if}}
+        <FlightIcon
+          class="default-user-icon text-color-foreground-faint"
+          @size={{if this.iconIsLarge "24"}}
+          @name="user"
+        />
       </div>
     {{/if}}
   {{/if}}

web/app/components/person/avatar.ts

@@ -16,6 +16,10 @@ interface PersonAvatarComponentSignature {
 
 export default class PersonAvatarComponent extends Component<PersonAvatarComponentSignature> {
   protected size = this.args.size ?? HermesSize.Small;
+
+  protected get iconIsLarge(): boolean {
+    return this.size === HermesSize.Large || this.size === HermesSize.XL;
+  }
 }
 
 declare module "@glint/environment-ember-loose/registry" {

web/app/styles/hermes/avatar.scss

@@ -33,6 +33,10 @@
 
   &.small {
     @apply h-5 w-5;
+
+    .default-user-icon {
+      @apply scale-[85%];
+    }
   }
 
   &.medium {

web/tests/acceptance/authenticated/projects/project-test.ts

@@ -252,8 +252,7 @@ module("Acceptance | authenticated/projects/project", function (hooks) {
 
     assert
       .dom(JIRA_ASSIGNEE_AVATAR)
-      .hasAttribute("data-test-assignee", jiraAssignee)
-      .hasText(jiraAssignee.charAt(0));
+      .hasAttribute("data-test-assignee", jiraAssignee);
 
     assert.dom(JIRA_OVERFLOW_BUTTON).exists();
   });

web/tests/integration/components/editable-field-test.ts

@@ -388,7 +388,7 @@ module("Integration | Component | editable-field", function (hooks) {
 
       <EditableField
         data-test-two
-        @value={{array (hash email="bar")}}
+        @value={{array (hash email="bar" imgURL="baz")}}
         @onSave={{this.onCommit}}
       />
     `);

web/tests/integration/components/person-test.ts

@@ -45,23 +45,15 @@ module("Integration | Component | person", function (hooks) {
       .dom(".person .person-email")
       .hasText(this.email)
       .hasAttribute("title", this.email);
-    assert.dom(".person span").doesNotExist();
     assert.dom(".person svg").doesNotExist();
 
     this.set("imgURL", null);
 
     assert.dom(".person img").doesNotExist();
     assert.dom(".person .person-email").hasText(this.email);
-    assert.dom(".person span").hasText("e");
-    assert.dom(".person svg").doesNotExist();
-
-    this.set("email", null);
-
-    assert.dom(".person img").doesNotExist();
-    assert.dom(".person .person-email").hasText("Unknown");
-    assert.dom(".person span").doesNotExist();
     assert.dom(".person svg").exists();
 
+    this.set("email", null);
     this.set("ignoreUnknown", true);
 
     assert.dom(".person").doesNotExist();

web/tests/integration/components/person/avatar-test.ts

@@ -25,20 +25,32 @@ module("Integration | Component | person/avatar", async function (hooks) {
       <Person::Avatar class="xl" @email="" @size="xl" />
     `);
 
+    function assertIconSize(containerClass: string, size: string) {
+      assert
+        .dom(`.${containerClass} .flight-icon`)
+        .hasAttribute("width", size)
+        .hasAttribute("height", size);
+    }
+
     assert.dom(".default").hasStyle({ width: "20px" });
     assert.dom(".default").hasStyle({ height: "20px" });
+    assertIconSize("default", "16");
 
     assert.dom(".small").hasStyle({ width: "20px" });
     assert.dom(".small").hasStyle({ height: "20px" });
+    assertIconSize("small", "16");
 
     assert.dom(".medium").hasStyle({ width: "28px" });
     assert.dom(".medium").hasStyle({ height: "28px" });
+    assertIconSize("medium", "16");
 
     assert.dom(".large").hasStyle({ width: "36px" });
     assert.dom(".large").hasStyle({ height: "36px" });
+    assertIconSize("large", "24");
 
     assert.dom(".xl").hasStyle({ width: "64px" });
     assert.dom(".xl").hasStyle({ height: "64px" });
+    assertIconSize("xl", "24");
   });
 
   test("it can render a loading state", async function (this: PersonAvatarTestContext, assert) {
@@ -49,13 +61,10 @@ module("Integration | Component | person/avatar", async function (hooks) {
     `);
 
     assert.dom(LOADING).exists();
-    assert.dom(IMAGE).doesNotExist();
-    assert.dom(FALLBACK).doesNotExist();
 
     this.set("isLoading", false);
 
     assert.dom(LOADING).doesNotExist();
-    assert.dom(FALLBACK).exists();
   });
 
   test("it renders an image if provided and a fallback if not", async function (this: PersonAvatarTestContext, assert) {
@@ -71,6 +80,6 @@ module("Integration | Component | person/avatar", async function (hooks) {
     this.set("imgURL", undefined);
 
     assert.dom(IMAGE).doesNotExist();
-    assert.dom(FALLBACK).hasText("B");
+    assert.dom(FALLBACK).exists();
   });
 });