Refactored <GhMemberAvatar> to glimmer component

no issue

- cleaned up property access in template to differentiate between passed-in args and component-defined properties
- tidied up logic in `backgroundStyle` and `initials` getters

ghost/admin/app/components/gh-member-avatar.js

@@ -1,5 +1,4 @@
-import Component from '@ember/component';
+import Component from '@glimmer/component';
-import {computed} from '@ember/object';
 import {htmlSafe} from '@ember/string';
 
 const stringToHslColor = function (str, saturation, lightness) {
@@ -12,33 +11,24 @@ const stringToHslColor = function (str, saturation, lightness) {
     return 'hsl(' + h + ', ' + saturation + '%, ' + lightness + '%)';
 };
 
-export default Component.extend({
+export default class GhMemberAvatarComponent extends Component {
-    tagName: '',
+    get memberName() {
-    containerClass: '',
+        let {member} = this.args;
-    member: null,
+        return member.name || member.email || 'NM';
-    initialsClass: computed('sizeClass', function () {
+    }
-        return this.sizeClass || 'gh-member-list-avatar';
-    }),
 
-    backgroundStyle: computed('member.{name,email}', function () {
+    get backgroundStyle() {
-        let name = this.member.name || this.member.email || 'NM';
+        let color = stringToHslColor(this.memberName, 55, 55);
-        if (name) {
+        return htmlSafe(`background-color: ${color}`);
-            let color = stringToHslColor(name, 55, 55);
+    }
-            return htmlSafe(`background-color: ${color}`);
+
+    get initials() {
+        if (this.memberName === 'NM') {
+            return 'NM';
         }
 
-        return htmlSafe('');
+        let names = this.memberName.split(' ');
-    }),
+        let intials = names.length > 1 ? [names[0][0], names[names.length - 1][0]] : [names[0][0]];
-
+        return intials.join('').toUpperCase();
-    initials: computed('member.{name,email}', function () {
+    }
-        let name = this.member.name || this.member.email;
+}
-        if (name) {
-            let names = name.split(' ');
-            let intials = names.length > 1 ? [names[0][0], names[names.length - 1][0]] : [names[0][0]];
-            return intials.join('').toUpperCase();
-        }
-
-        // New Member initials
-        return 'NM';
-    })
-});

ghost/admin/app/templates/components/gh-member-avatar.hbs

@@ -1,6 +1,6 @@
-<figure class="gh-member-gravatar {{this.containerClass}}">
+<figure class="gh-member-gravatar {{@containerClass}}">
-    <div class="gh-member-initials flex items-center justify-center br-100 {{this.containerClass}}" style={{this.backgroundStyle}}>
+    <div class="gh-member-initials flex items-center justify-center br-100 {{@containerClass}}" style={{this.backgroundStyle}}>
-        <span class="gh-member-avatar-label {{this.initialsClass}}">{{this.initials}}</span>
+        <span class="gh-member-avatar-label {{or @sizeClass "gh-member-list-avatar"}}">{{this.initials}}</span>
     </div>
-    <img class="gh-member-avatar-image" src={{gravatar this.member.email size=180}} />
+    <img class="gh-member-avatar-image" src={{gravatar @member.email size=180}} />
 </figure>