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

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

From c388cacb81af619593e5d75cea679284c95e15f6 Mon Sep 17 00:00:00 2001
From: Penar Musaraj <pmusaraj@gmail.com>
Date: Wed, 28 Nov 2018 16:02:49 -0500
Subject: [PATCH] UX: Style group flair in /groups same as in topic avatars


diff --git a/app/assets/javascripts/discourse/components/groups-info.js.es6 b/app/assets/javascripts/discourse/components/groups-info.js.es6
index 55a77b5..a95c9da 100644
--- a/app/assets/javascripts/discourse/components/groups-info.js.es6
+++ b/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) {
diff --git a/app/assets/stylesheets/common/base/group.scss b/app/assets/stylesheets/common/base/group.scss
index 20b6cf5..9c2e433 100644
--- a/app/assets/stylesheets/common/base/group.scss
+++ b/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;
     }
   }
 }
diff --git a/app/assets/stylesheets/common/base/groups.scss b/app/assets/stylesheets/common/base/groups.scss
index ae41e6c..e02e919 100644
--- a/app/assets/stylesheets/common/base/groups.scss
+++ b/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;
       }
     }

GitHub

This commit has been mentioned on Discourse Meta. There might be relevant details there:

Where does 1.8 come from?

1 Like

It’s there to reduce the size of the icon inside the circle. I’ll move it to a variable.

2 Likes