Guild category tags and challenge category tags have now the same styling.

website/client/assets/scss/categories.scss

@@ -23,6 +23,16 @@
   color: $gray-300;
 }
 
+.category-label-purple {
+  color: white;
+  background: $purple-300;
+}
+
+.category-label-blue {
+  color: white;
+  background: $blue-50;
+}
+
 .category-select {
   border-radius: 2px;
   background-color: $white;

website/client/components/challenges/challengeItem.vue

@@ -26,9 +26,9 @@
           .svg-icon(v-html="icons.calendarIcon")
           strong.mx-1 {{ $t('endDate')}}:
           span {{challenge.endDate}}
-  .tags
-    span.tag.tag-blue(v-if='isLeader(challenge)') {{ $t('owned') }}
-    span.tag(v-for='category in challenge.categories', :class="{'tag-purple':isOfficial(category)}") {{ $t(category.name) }}
+  .categories
+    span.category-label.category-label-blue(v-if='isLeader(challenge)') {{ $t('owned') }}
+    span.category-label(v-for='category in challenge.categories', :class="{'category-label-purple':isOfficial(category)}") {{ $t(category.name) }}
   .challenge-description {{challenge.summary}}
   .well-wrapper(v-if="fullLayout")
     .well
@@ -104,7 +104,7 @@
       display: inline-block;
       float: right;
       padding: 1em 1.5em;
-      margin-left: 1.5em;
+      margin-left: 1em;
       background: #eefaf6;
       border-bottom-left-radius: .3em;
 
@@ -129,7 +129,7 @@
     .meta, .owner {
       display: flex;
       align-items: center;
-      overflow: visible;
+      flex-wrap: wrap;
     }
 
     .meta-item, .owner-item {
@@ -165,33 +165,15 @@
       width: 26px;
     }
 
-    .tags {
+    .categories {
+      clear: right;
       display: flex;
-      padding: 0 1em 1em;
+      padding: 0 1.5em 1em;
+      flex-wrap: wrap;
     }
 
-    .tag {
-      box-shadow: none !important;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      border-radius: 1em;
-      color: $gray-200;
-      background: $gray-500;
-      padding: .2em .8em;
-      margin-left: .3em;
-      font-weight: 600;
-      font-size: .9em
-    }
-
-    .tag-purple {
-      color: white;
-      background: $purple-300;
-    }
-
-    .tag-blue {
-      color: white;
-      background: $blue-50;
+    .category-label {
+      margin-top: .5em;
     }
 
     .challenge-description {

website/client/components/groups/publicGuildItem.vue

@@ -25,7 +25,11 @@ router-link.card-link(:to="{ name: 'guild', params: { groupId: guild._id } }")
               div.guild-bank(v-if='displayGemBank', v-once) {{$t('guildBank')}}
           .row
             .col-md-12
-              .category-label(v-for="category in guild.categorySlugs")
+              .category-label.category-label-blue(v-if='isLeader(guild)') {{ $t('owned') }}
+              .category-label(
+                v-for="category in guild.categorySlugs"
+                :class="{'category-label-purple': isOfficial(category)}"
+              )
                 | {{$t(category)}}
               span.recommend-text(v-if='showSuggested(guild._id)') Suggested because you’re new to Habitica.
 </template>
@@ -176,6 +180,13 @@ export default {
       // @TODO: ask about challenges when we add challenges
       await this.$store.dispatch('guilds:leave', {groupId: this.guild._id, type: 'myGuilds'});
     },
+    isLeader (guild) {
+      if (!guild.leader) return false;
+      return this.user._id === guild.leader;
+    },
+    isOfficial (category) {
+      return category === 'habitica_official';
+    },
   },
 };
 </script>