UX: Style group flair in /groups same as in topic avatars

app/assets/javascripts/discourse/components/groups-info.js.es6

@@ -2,6 +2,7 @@ import computed from "ember-addons/ember-computed-decorators";
 
 export default Ember.Component.extend({
   tagName: "span",
+  classNames: ["group-info-details"],
 
   @computed("group.full_name", "group.title")
   showFullName(fullName, title) {

app/assets/stylesheets/common/base/group.scss

@@ -56,9 +56,15 @@
   .avatar-flair {
     background-size: $size;
     height: $size;
+    width: $size;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
     .d-icon {
-      font-size: $size !important;
+      height: $size / 1.8;
+      width: $size / 1.8;
     }
   }
 }

app/assets/stylesheets/common/base/groups.scss

@@ -189,6 +189,10 @@
   }
 
   .groups-info {
+    .group-info-details {
+      vertical-align: middle;
+    }
+
     .groups-info-name {
       font-weight: bold;
       color: $primary;
@@ -204,6 +208,11 @@
       color: dark-light-choose($primary-medium, $secondary-medium);
     }
 
+    .group-avatar-flair {
+      vertical-align: middle;
+      color: $primary;
+    }
+
     span {
       display: inline-block;
     }
@@ -213,9 +222,15 @@
     .avatar-flair {
       background-size: $size;
       height: $size;
+      width: $size;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
 
       .d-icon {
-        font-size: $size !important;
+        height: $size / 1.8;
+        width: $size / 1.8;
       }
     }