From f93822b0b359a08f70fbbf5550edeba65e317313 Mon Sep 17 00:00:00 2001
From: Marvin Rabe <marvin.rabe@gmail.com>
Date: Tue, 1 May 2018 14:34:58 +0200
Subject: [PATCH 01/19] Several hard coded strings fixed.

---
 website/client/components/challenges/sidebar.vue     | 6 +++---
 website/client/components/inventory/stable/index.vue | 2 +-
 website/common/locales/en/challenge.json             | 2 ++
 website/common/locales/en/npc.json                   | 1 +
 4 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/website/client/components/challenges/sidebar.vue b/website/client/components/challenges/sidebar.vue
index ce22bf0d62..ecd46e493a 100644
--- a/website/client/components/challenges/sidebar.vue
+++ b/website/client/components/challenges/sidebar.vue
@@ -5,7 +5,7 @@
   form
     h2(v-once) {{ $t('filter') }}
     .form-group
-      h3 Category
+      h3 {{ $t('category') }}
       .form-check(
         v-for="group in categoryOptions",
         :key="group.key",
@@ -14,7 +14,7 @@
           input.custom-control-input(type="checkbox", :value='group.key' v-model="categoryFilters", :id="group.key")
           label.custom-control-label(v-once, :for="group.key") {{ $t(group.label) }}
     .form-group(v-if='$route.name !== "findChallenges"')
-      h3 Membership
+      h3 {{ $t('membership') }}
       .form-check(
         v-for="group in roleOptions",
         :key="group.key",
@@ -23,7 +23,7 @@
           input.custom-control-input(type="checkbox", :value='group.key' v-model="roleFilters", :id="group.key")
           label.custom-control-label(v-once, :for="group.key") {{ $t(group.label) }}
     .form-group
-      h3 Ownership
+      h3 {{ $t('ownership') }}
       .form-check(
         v-for="group in ownershipOptions",
         :key="group.key",
diff --git a/website/client/components/inventory/stable/index.vue b/website/client/components/inventory/stable/index.vue
index b118f8f679..7298f60bc7 100644
--- a/website/client/components/inventory/stable/index.vue
+++ b/website/client/components/inventory/stable/index.vue
@@ -47,7 +47,7 @@
               label.custom-control-label(v-once, :for="mountGroup.key") {{ mountGroup.label }}
 
         div.form-group.clearfix
-          h3.float-left Hide Missing
+          h3.float-left {{ $t('hideMissing') }}
           toggle-switch.float-right(
             :checked="hideMissing",
             @change="updateHideMissing"
diff --git a/website/common/locales/en/challenge.json b/website/common/locales/en/challenge.json
index a5ca557e4a..65af6c1211 100644
--- a/website/common/locales/en/challenge.json
+++ b/website/common/locales/en/challenge.json
@@ -25,7 +25,9 @@
   "filter": "Filter",
   "groups": "Groups",
   "noNone": "None",
+  "category": "Category",
   "membership": "Membership",
+  "ownership": "Ownership",
   "participating": "Participating",
   "notParticipating": "Not Participating",
   "either": "Either",
diff --git a/website/common/locales/en/npc.json b/website/common/locales/en/npc.json
index 0fdb31496d..0644e86a64 100644
--- a/website/common/locales/en/npc.json
+++ b/website/common/locales/en/npc.json
@@ -53,6 +53,7 @@
   "featuredItems": "Featured Items!",
   "hideLocked": "Hide locked",
   "hidePinned": "Hide pinned",
+  "hideMissing": "Hide Missing",
   "amountExperience": "<%= amount %> Experience",
   "amountGold": "<%= amount %> Gold",
   "namedHatchingPotion": "<%= type %> Hatching Potion",

From 4e4181a394a79bc535a91b6f70fac5dbf4e41428 Mon Sep 17 00:00:00 2001
From: Marvin Rabe <marvin.rabe@gmail.com>
Date: Tue, 1 May 2018 16:10:22 +0200
Subject: [PATCH 02/19] Improved challenge layout.

---
 .../components/challenges/challengeDetail.vue |  74 ++++-----
 .../components/challenges/groupChallenges.vue | 154 ++++++++++--------
 website/client/components/groups/group.vue    |  93 ++---------
 .../components/groups/questSidebarSection.vue | 140 ++++++++--------
 website/client/components/sidebarSection.vue  |  94 +++++++++++
 5 files changed, 294 insertions(+), 261 deletions(-)
 create mode 100644 website/client/components/sidebarSection.vue

diff --git a/website/client/components/challenges/challengeDetail.vue b/website/client/components/challenges/challengeDetail.vue
index 19ddd1f183..eb2013d166 100644
--- a/website/client/components/challenges/challengeDetail.vue
+++ b/website/client/components/challenges/challengeDetail.vue
@@ -6,7 +6,7 @@
   challenge-member-progress-modal(:memberId='progressMemberId', :challengeId='challenge._id')
   .col-12.col-md-8.standard-page
     .row
-      .col-12.col-md-8
+      .col-12.col-md-6
         h1(v-markdown='challenge.name')
         div
           strong(v-once) {{$t('createdBy')}}:
@@ -19,7 +19,7 @@
           // span {{challenge.endDate}}
         .tags
           span.tag(v-for='tag in challenge.tags') {{tag}}
-      .col-12.col-md-4
+      .col-12.col-md-6.text-right
         .box(@click="showMemberModal()")
           .svg-icon.member-icon(v-html="icons.memberIcon")
           | {{challenge.memberCount}}
@@ -29,10 +29,10 @@
           | {{challenge.prize}}
           .details(v-once) {{$t('prize')}}
     .row.challenge-actions
-      .col-12.col-md-7.offset-md-5
-        span.view-progress
-          strong {{ $t('viewProgressOf') }}
+      .col-12.col-md-6
+        strong.view-progress {{ $t('viewProgressOf') }}
         member-search-dropdown(:text="$t('selectParticipant')", :members='members', :challengeId='challengeId', @member-selected='openMemberProgressModal')
+      .col-12.col-md-6.text-right
         span(v-if='isLeader || isAdmin')
           b-dropdown.create-dropdown(:text="$t('addTaskToChallenge')", :variant="'success'")
             b-dropdown-item(v-for="type in columns", :key="type", @click="createTask(type)")
@@ -56,24 +56,25 @@
         v-on:editTask="editTask",
         v-if='tasksByType[column].length > 0')
   .col-12.col-md-4.sidebar.standard-page
-    .acitons
-      div(v-if='canJoin')
-        button.btn.btn-success(v-once, @click='joinChallenge()') {{$t('joinChallenge')}}
-      div(v-if='isMember')
-        button.btn.btn-danger(v-once, @click='leaveChallenge()') {{$t('leaveChallenge')}}
-      div(v-if='isLeader || isAdmin')
-        button.btn.btn-secondary(v-once, @click='edit()') {{$t('editChallenge')}}
-      div(v-if='isLeader || isAdmin')
-        button.btn.btn-danger(v-once, @click='closeChallenge()') {{$t('endChallenge')}}
-      div(v-if='isLeader || isAdmin')
-        button.btn.btn-secondary(v-once, @click='exportChallengeCsv()') {{$t('exportChallengeCsv')}}
-      div(v-if='isLeader || isAdmin')
-        button.btn.btn-secondary(v-once, @click='cloneChallenge()') {{$t('clone')}}
-    .description-section
-      h2 {{$t('challengeSummary')}}
+    .button-container(v-if='canJoin')
+      button.btn.btn-success(v-once, @click='joinChallenge()') {{$t('joinChallenge')}}
+    .button-container(v-if='isLeader || isAdmin')
+      button.btn.btn-primary(v-once, @click='edit()') {{$t('editChallenge')}}
+    .button-container(v-if='isLeader || isAdmin')
+      button.btn.btn-primary(v-once, @click='cloneChallenge()') {{$t('clone')}}
+    .button-container(v-if='isLeader || isAdmin')
+      button.btn.btn-primary(v-once, @click='exportChallengeCsv()') {{$t('exportChallengeCsv')}}
+    .button-container(v-if='isLeader || isAdmin')
+      button.btn.btn-danger(v-once, @click='closeChallenge()') {{$t('endChallenge')}}
+    sidebar-section(:title="$t('challengeSummary')")
       p(v-markdown='challenge.summary')
-      h2 {{$t('challengeDescription')}}
+    sidebar-section(
+      :title="$t('challengeDescription')"
+      :last="true"
+    )
       p(v-markdown='challenge.description')
+    .text-center(v-if='isMember')
+      button.btn.btn-danger(v-once, @click='leaveChallenge()') {{$t('leaveChallenge')}}
 </template>
 
 <style lang='scss' scoped>
@@ -91,6 +92,14 @@
     margin-left: .5em;
   }
 
+  .button-container {
+    margin-bottom: 1em;
+
+    button {
+      width: 100%;
+    }
+  }
+
   .calendar-icon {
     width: 12px;
     display: inline-block;
@@ -138,23 +147,12 @@
     }
   }
 
-  .acitons {
-    width: 100%;
-
-    div, button {
-      width: 60%;
-      margin: 0 auto;
-      margin-bottom: .5em;
-      text-align: center;
-    }
-  }
-
   .description-section {
     margin-top: 2em;
   }
 
   .challenge-actions {
-    margin-top: 1em;
+    margin-bottom: 1em;
 
     .view-progress {
       margin-right: .5em;
@@ -162,14 +160,6 @@
   }
 </style>
 
-<style>
-  .create-dropdown button {
-    width: 100%;
-    font-size: 16px !important;
-    font-weight: bold !important;
-  }
-</style>
-
 <script>
 const TASK_KEYS_TO_REMOVE = ['_id', 'completed', 'date', 'dateCompleted', 'history', 'id', 'streak', 'createdAt', 'challenge'];
 
@@ -189,6 +179,7 @@ import challengeModal from './challengeModal';
 import challengeMemberProgressModal from './challengeMemberProgressModal';
 import challengeMemberSearchMixin from 'client/mixins/challengeMemberSearch';
 import leaveChallengeModal from './leaveChallengeModal';
+import sidebarSection from '../sidebarSection';
 
 import taskDefaults from 'common/script/libs/taskDefaults';
 
@@ -208,6 +199,7 @@ export default {
     challengeModal,
     challengeMemberProgressModal,
     memberSearchDropdown,
+    sidebarSection,
     TaskColumn: Column,
     TaskModal,
   },
diff --git a/website/client/components/challenges/groupChallenges.vue b/website/client/components/challenges/groupChallenges.vue
index ceeeccf370..fdac5452cf 100644
--- a/website/client/components/challenges/groupChallenges.vue
+++ b/website/client/components/challenges/groupChallenges.vue
@@ -6,25 +6,51 @@ div
       .svg-icon.challenge-icon(v-html="icons.challengeIcon")
       h4(v-once) {{ $t('haveNoChallenges') }}
       p(v-once) {{ $t('challengeDetails') }}
-  router-link.title(:to="{ name: 'challenge', params: { challengeId: challenge._id } }", v-for='challenge in challenges',:key='challenge._id')
-    .col-12.challenge-item
-      .row
-        .col-9
-          router-link.title(:to="{ name: 'challenge', params: { challengeId: challenge._id } }")
-            strong(v-markdown='challenge.name')
-          p(v-markdown='challenge.summary || challenge.name')
-          div
-            .svg-icon.member-icon(v-html="icons.memberIcon")
-            .member-count {{challenge.memberCount}}
-        .col-3
-          div
-            span.svg-icon.gem(v-html="icons.gemIcon")
-            span.prize {{challenge.prize}}
-          div.prize-title Prize
-  .col-12.text-center
-    button.btn.btn-secondary(@click='createChallenge()') {{ $t('createChallenge') }}
+      button.btn.btn-secondary(@click='createChallenge()') {{ $t('createChallenge') }}
+  template(v-else)
+    router-link.title(:to="{ name: 'challenge', params: { challengeId: challenge._id } }", v-for='challenge in challenges',:key='challenge._id')
+      .col-12.challenge-item
+        .row
+          .col-9
+            router-link.title(:to="{ name: 'challenge', params: { challengeId: challenge._id } }")
+              strong(v-markdown='challenge.name')
+            p(v-markdown='challenge.summary || challenge.name')
+            div
+              .svg-icon.member-icon(v-html="icons.memberIcon")
+              .member-count {{challenge.memberCount}}
+          .col-3
+            div
+              span.svg-icon.gem(v-html="icons.gemIcon")
+              span.prize {{challenge.prize}}
+            div.prize-title Prize
+    .col-12.text-center
+      button.btn.btn-secondary(@click='createChallenge()') {{ $t('createChallenge') }}
 </template>
 
+<style lang="scss" scoped>
+  @import '~client/assets/scss/colors.scss';
+
+  .no-quest-section {
+    padding: 2em;
+    color: $gray-300;
+
+    h4 {
+      color: $gray-300;
+    }
+
+    p {
+      margin-bottom: 2em;
+    }
+
+    .svg-icon {
+      height: 30px;
+      width: 30px;
+      margin: 0 auto;
+      margin-bottom: 2em;
+    }
+  }
+</style>
+
 <style scoped>
   .title {
     color: #4E4A57;
@@ -80,57 +106,57 @@ div
 </style>
 
 <script>
-import challengeModal from './challengeModal';
-import { mapState } from 'client/libs/store';
-import markdownDirective from 'client/directives/markdown';
+  import challengeModal from './challengeModal';
+  import {mapState} from 'client/libs/store';
+  import markdownDirective from 'client/directives/markdown';
 
-import challengeIcon from 'assets/svg/challenge.svg';
-import gemIcon from 'assets/svg/gem.svg';
-import memberIcon from 'assets/svg/member-icon.svg';
+  import challengeIcon from 'assets/svg/challenge.svg';
+  import gemIcon from 'assets/svg/gem.svg';
+  import memberIcon from 'assets/svg/member-icon.svg';
 
-export default {
-  props: ['groupId'],
-  components: {
-    challengeModal,
-  },
-  computed: {
-    ...mapState({user: 'user.data'}),
-  },
-  data () {
-    return {
-      challenges: [],
-      icons: Object.freeze({
-        challengeIcon,
-        memberIcon,
-        gemIcon,
-      }),
-      groupIdForChallenges: '',
-    };
-  },
-  directives: {
-    markdown: markdownDirective,
-  },
-  mounted () {
-    this.loadChallenges();
-  },
-  watch: {
-    async groupId () {
+  export default {
+    props: ['groupId'],
+    components: {
+      challengeModal,
+    },
+    computed: {
+      ...mapState({user: 'user.data'}),
+    },
+    data() {
+      return {
+        challenges: [],
+        icons: Object.freeze({
+          challengeIcon,
+          memberIcon,
+          gemIcon,
+        }),
+        groupIdForChallenges: '',
+      };
+    },
+    directives: {
+      markdown: markdownDirective,
+    },
+    mounted() {
       this.loadChallenges();
     },
-  },
-  methods: {
-    async loadChallenges () {
-      this.groupIdForChallenges = this.groupId;
-      if (this.groupId === 'party' && this.user.party._id) this.groupIdForChallenges = this.user.party._id;
-      this.challenges = await this.$store.dispatch('challenges:getGroupChallenges', {groupId: this.groupIdForChallenges});
+    watch: {
+      async groupId() {
+        this.loadChallenges();
+      },
     },
-    createChallenge () {
-      this.$root.$emit('bv::show::modal', 'challenge-modal');
+    methods: {
+      async loadChallenges() {
+        this.groupIdForChallenges = this.groupId;
+        if (this.groupId === 'party' && this.user.party._id) this.groupIdForChallenges = this.user.party._id;
+        this.challenges = await this.$store.dispatch('challenges:getGroupChallenges', {groupId: this.groupIdForChallenges});
+      },
+      createChallenge() {
+        this.$root.$emit('bv::show::modal', 'challenge-modal');
+      },
+      challengeCreated(challenge) {
+        if (challenge.group._id !== this.groupIdForChallenges) return;
+        this.challenges.push(challenge);
+      },
     },
-    challengeCreated (challenge) {
-      if (challenge.group._id !== this.groupIdForChallenges) return;
-      this.challenges.push(challenge);
-    },
-  },
-};
+  };
 </script>
diff --git a/website/client/components/groups/group.vue b/website/client/components/groups/group.vue
index ff5372f734..be3c4ea675 100644
--- a/website/client/components/groups/group.vue
+++ b/website/client/components/groups/group.vue
@@ -61,48 +61,17 @@
           // @TODO: V2 button.btn.btn-primary(v-once, v-if='!isLeader') {{$t('messageGuildLeader')}} // Suggest making the button visible to the leader too - useful for them to test how the feature works or to send a note to themself. -- Alys
         .button-container
           // @TODO: V2 button.btn.btn-primary(v-once, v-if='isMember && !isParty') {{$t('donateGems')}} // Suggest removing the isMember restriction - it's okay if non-members donate to a public guild. Also probably allow it for parties if parties can buy imagery. -- Alys
-    .section-header(v-if='isParty')
-      quest-sidebar-section(@toggle='toggleQuestSection', :show='sections.quest', :group='group')
-    .section-header(v-if='!isParty')
-      .row
-        .col-10
-          h3(v-once) {{ $t('guildSummary') }}
-        .col-2
-          .toggle-up(@click="sections.summary = !sections.summary", v-if="sections.summary")
-            .svg-icon(v-html="icons.upIcon")
-          .toggle-down(@click="sections.summary = !sections.summary", v-if="!sections.summary")
-            .svg-icon(v-html="icons.downIcon")
-      .section(v-if="sections.summary")
-        p(v-markdown='group.summary')
-    .section-header
-      .row
-        .col-10
-          h3 {{ $t('groupDescription') }}
-        .col-2
-          .toggle-up(@click="sections.description = !sections.description", v-if="sections.description")
-            .svg-icon(v-html="icons.upIcon")
-          .toggle-down(@click="sections.description = !sections.description", v-if="!sections.description")
-            .svg-icon(v-html="icons.downIcon")
-      .section(v-if="sections.description")
-        p(v-markdown='group.description')
-    .section-header.challenge
-      .row
-        .col-10.information-header
-          h3(v-once)
-            | {{ $t('challenges') }}
-          #groupPrivateDescOrChallengeInfo.icon.tooltip-wrapper(:title="isParty ? $t('challengeDetails') : $t('privateDescription')")
-            .svg-icon(v-html='icons.information')
-          b-tooltip(
-            :title="isParty ? $t('challengeDetails') : $t('privateDescription')",
-            target="groupPrivateDescOrChallengeInfo",
-          )
-        .col-2
-          .toggle-up(@click="sections.challenges = !sections.challenges", v-if="sections.challenges")
-            .svg-icon(v-html="icons.upIcon")
-          .toggle-down(@click="sections.challenges = !sections.challenges", v-if="!sections.challenges")
-            .svg-icon(v-html="icons.downIcon")
-      .section(v-if="sections.challenges")
-        group-challenges(:groupId='searchId')
+    quest-sidebar-section(:group='group', v-if='isParty')
+    sidebar-section(:title="$t('guildSummary')", v-if='!isParty')
+      p(v-markdown='group.summary')
+    sidebar-section(:title="$t('groupDescription')")
+      p(v-markdown='group.description')
+    sidebar-section(
+      :title="$t('challenges')",
+      :tooltip="isParty ? $t('challengeDetails') : $t('privateDescription')"
+      :last="true"
+    )
+      group-challenges(:groupId='searchId')
     div.text-center
       button.btn.btn-danger(v-if='isMember', @click='clickLeave()') {{ isParty ? $t('leaveParty') : $t('leaveGroup') }}
 </template>
@@ -270,29 +239,6 @@
     margin-right: .3em;
   }
 
-  .information-header {
-    h3, .tooltip-wrapper {
-      display: inline-block;
-    }
-
-    .tooltip-wrapper {
-      width: 15px;
-      margin-left: 1.2em;
-    }
-  }
-
-  .section-header {
-    border-top: 1px solid #e1e0e3;
-    margin-top: 1em;
-    padding-top: 1em;
-  }
-
-  .section-header.challenge {
-    border-bottom: 1px solid #e1e0e3;
-    margin-bottom: 1em;
-    padding-bottom: 1em;
-  }
-
   .hr {
     width: 100%;
     height: 20px;
@@ -334,6 +280,7 @@ import groupGemsModal from 'client/components/groups/groupGemsModal';
 import questSidebarSection from 'client/components/groups/questSidebarSection';
 import markdownDirective from 'client/directives/markdown';
 import communityGuidelines from './communityGuidelines';
+import sidebarSection from '../sidebarSection';
 
 import deleteIcon from 'assets/svg/delete.svg';
 import copyIcon from 'assets/svg/copy.svg';
@@ -342,10 +289,7 @@ import likedIcon from 'assets/svg/liked.svg';
 import reportIcon from 'assets/svg/report.svg';
 import gemIcon from 'assets/svg/gem.svg';
 import questIcon from 'assets/svg/quest.svg';
-import informationIcon from 'assets/svg/information.svg';
 import questBackground from 'assets/svg/quest-background-border.svg';
-import upIcon from 'assets/svg/up.svg';
-import downIcon from 'assets/svg/down.svg';
 import goldGuildBadgeIcon from 'assets/svg/gold-guild-badge-small.svg';
 import silverGuildBadgeIcon from 'assets/svg/silver-guild-badge-small.svg';
 import bronzeGuildBadgeIcon from 'assets/svg/bronze-guild-badge-small.svg';
@@ -365,6 +309,7 @@ export default {
     groupGemsModal,
     questSidebarSection,
     communityGuidelines,
+    sidebarSection,
   },
   directives: {
     markdown: markdownDirective,
@@ -381,22 +326,13 @@ export default {
         gem: gemIcon,
         liked: likedIcon,
         questIcon,
-        information: informationIcon,
         questBackground,
-        upIcon,
-        downIcon,
         goldGuildBadgeIcon,
         silverGuildBadgeIcon,
         bronzeGuildBadgeIcon,
       }),
       members: [],
       selectedQuest: {},
-      sections: {
-        quest: true,
-        summary: true,
-        description: true,
-        challenges: true,
-      },
       newMessage: '',
       coords: {
         TOP: 0,
@@ -698,9 +634,6 @@ export default {
     showGroupGems () {
       this.$root.$emit('bv::show::modal', 'group-gems-modal');
     },
-    toggleQuestSection () {
-      this.sections.quest = !this.sections.quest;
-    },
   },
 };
 </script>
diff --git a/website/client/components/groups/questSidebarSection.vue b/website/client/components/groups/questSidebarSection.vue
index f7dde2dbd8..f683841e22 100644
--- a/website/client/components/groups/questSidebarSection.vue
+++ b/website/client/components/groups/questSidebarSection.vue
@@ -1,74 +1,65 @@
 <template lang="pug">
-div
-  .row
-    .col-10
-      h3(v-once) {{ $t('questDetailsTitle') }}
+sidebar-section(:title="$t('questDetailsTitle')")
+  .row.no-quest-section(v-if='!onPendingQuest && !onActiveQuest')
+    .col-12.text-center
+      .svg-icon(v-html="icons.questIcon")
+      h4(v-once) {{ $t('youAreNotOnQuest') }}
+      p(v-once) {{ $t('questDescription') }}
+      button.btn.btn-secondary(v-once, @click="openStartQuestModal()") {{ $t('startAQuest') }}
+  .row.quest-active-section(v-if='onPendingQuest && !onActiveQuest')
     .col-2
-      .toggle-up(@click="toggle()", v-if="show")
-        .svg-icon(v-html="icons.upIcon")
-      .toggle-down(@click="toggle()", v-if="!show")
-        .svg-icon(v-html="icons.downIcon")
-  .section(v-if="show")
-    .row.no-quest-section(v-if='!onPendingQuest && !onActiveQuest')
-      .col-12.text-center
-        .svg-icon(v-html="icons.questIcon")
-        h4(v-once) {{ $t('youAreNotOnQuest') }}
-        p(v-once) {{ $t('questDescription') }}
-        button.btn.btn-secondary(v-once, @click="openStartQuestModal()") {{ $t('startAQuest') }}
-    .row.quest-active-section(v-if='onPendingQuest && !onActiveQuest')
-      .col-2
-        .quest(:class='`inventory_quest_scroll_${questData.key}`')
-      .col-6.titles
-        strong {{ questData.text() }}
-        p {{acceptedCount}} / {{group.memberCount}}
-      .col-4
-        button.btn.btn-secondary(@click="openQuestDetails()") {{ $t('details') }}
-    .row.quest-active-section.quest-invite(v-if='user.party.quest && user.party.quest.RSVPNeeded')
-      span {{ $t('wouldYouParticipate') }}
-      button.btn.btn-primary.accept(@click='questAccept(group._id)') {{$t('accept')}}
-      button.btn.btn-primary.reject(@click='questReject(group._id)') {{$t('reject')}}
-    .row.quest-active-section(v-if='!onPendingQuest && onActiveQuest')
-      .col-12.text-center
-        .quest-boss(:class="'quest_' + questData.key")
-        h3(v-once) {{ questData.text() }}
-        .quest-box
-          .collect-info(v-if='questData.collect')
-            .row(v-for='(value, key) in questData.collect')
-              .col-2
-                div(:class="'quest_' + questData.key + '_' + key")
-              .col-10
-                strong {{value.text()}}
-                .grey-progress-bar
-                  .collect-progress-bar(:style="{width: (group.quest.progress.collect[key] / value.count) * 100 + '%'}")
-                strong {{group.quest.progress.collect[key]}} / {{value.count}}
-            div.text-right {{parseFloat(user.party.quest.progress.collectedItems) || 0}} items found
-          .boss-info(v-if='questData.boss')
-            .row
+      .quest(:class='`inventory_quest_scroll_${questData.key}`')
+    .col-6.titles
+      strong {{ questData.text() }}
+      p {{acceptedCount}} / {{group.memberCount}}
+    .col-4
+      button.btn.btn-secondary(@click="openQuestDetails()") {{ $t('details') }}
+  .row.quest-active-section.quest-invite(v-if='user.party.quest && user.party.quest.RSVPNeeded')
+    span {{ $t('wouldYouParticipate') }}
+    button.btn.btn-primary.accept(@click='questAccept(group._id)') {{$t('accept')}}
+    button.btn.btn-primary.reject(@click='questReject(group._id)') {{$t('reject')}}
+  .row.quest-active-section(v-if='!onPendingQuest && onActiveQuest')
+    .col-12.text-center
+      .quest-boss(:class="'quest_' + questData.key")
+      h3(v-once) {{ questData.text() }}
+      .quest-box
+        .collect-info(v-if='questData.collect')
+          .row(v-for='(value, key) in questData.collect')
+            .col-2
+              div(:class="'quest_' + questData.key + '_' + key")
+            .col-10
+              strong {{value.text()}}
+              .grey-progress-bar
+                .collect-progress-bar(:style="{width: (group.quest.progress.collect[key] / value.count) * 100 + '%'}")
+              strong {{group.quest.progress.collect[key]}} / {{value.count}}
+          div.text-right {{parseFloat(user.party.quest.progress.collectedItems) || 0}} items found
+        .boss-info(v-if='questData.boss')
+          .row
+            .col-6
+              h4.float-left(v-once) {{ questData.boss.name() }}
+            .col-6
+              span.float-right(v-once) {{ $t('participantsTitle') }}
+          .row
+            .col-12
+              .grey-progress-bar
+                .boss-health-bar(:style="{width: (group.quest.progress.hp / questData.boss.hp) * 100 + '%'}")
+          .row.boss-details
+            .col-6
+              span.float-left
+                | {{ Math.ceil(parseFloat(group.quest.progress.hp) * 100) / 100 }} / {{ parseFloat(questData.boss.hp).toFixed(2) }}
+                // current boss hp uses ceil so you don't underestimate damage needed to end quest
+            .col-6(v-if='userIsOnQuest')
+              // @TODO: Why do we not sync quest progress on the group doc? Each user could have different progress.
+              span.float-right {{ user.party.quest.progress.up | floor(10) }} {{ $t('pendingDamageLabel') }}
+              // player's pending damage uses floor so you don't overestimate damage you've already done
+          .row.rage-bar-row(v-if='questData.boss.rage')
+            .col-12
+              .grey-progress-bar
+                .boss-health-bar.rage-bar(:style="{width: (group.quest.progress.rage / questData.boss.rage.value) * 100 + '%'}")
+          .row.boss-details.rage-details(v-if='questData.boss.rage')
               .col-6
-                h4.float-left(v-once) {{ questData.boss.name() }}
-              .col-6
-                span.float-right(v-once) {{ $t('participantsTitle') }}
-            .row
-              .col-12
-                .grey-progress-bar
-                  .boss-health-bar(:style="{width: (group.quest.progress.hp / questData.boss.hp) * 100 + '%'}")
-            .row.boss-details
-              .col-6
-                span.float-left
-                  | {{ Math.ceil(parseFloat(group.quest.progress.hp) * 100) / 100 }} / {{ parseFloat(questData.boss.hp).toFixed(2) }}
-                  // current boss hp uses ceil so you don't underestimate damage needed to end quest
-              .col-6(v-if='userIsOnQuest')
-                // @TODO: Why do we not sync quest progress on the group doc? Each user could have different progress.
-                span.float-right {{ user.party.quest.progress.up | floor(10) }} {{ $t('pendingDamageLabel') }}
-                // player's pending damage uses floor so you don't overestimate damage you've already done
-            .row.rage-bar-row(v-if='questData.boss.rage')
-              .col-12
-                .grey-progress-bar
-                  .boss-health-bar.rage-bar(:style="{width: (group.quest.progress.rage / questData.boss.rage.value) * 100 + '%'}")
-            .row.boss-details.rage-details(v-if='questData.boss.rage')
-                .col-6
-                  span.float-left {{ $t('rage') }} {{ parseFloat(group.quest.progress.rage).toFixed(2) }} / {{ questData.boss.rage.value }}
-        button.btn.btn-secondary(v-once, @click="questAbort()", v-if='canEditQuest') {{ $t('abort') }}
+                span.float-left {{ $t('rage') }} {{ parseFloat(group.quest.progress.rage).toFixed(2) }} / {{ questData.boss.rage.value }}
+      button.btn.btn-secondary(v-once, @click="questAbort()", v-if='canEditQuest') {{ $t('abort') }}
 </template>
 
 <style lang="scss" scoped>
@@ -193,18 +184,18 @@ import { mapState } from 'client/libs/store';
 
 import quests from 'common/script/content/quests';
 import percent from 'common/script/libs/percent';
+import sidebarSection from '../sidebarSection';
 
-import upIcon from 'assets/svg/up.svg';
-import downIcon from 'assets/svg/down.svg';
 import questIcon from 'assets/svg/quest.svg';
 
 export default {
-  props: ['show', 'group'],
+  props: ['group'],
+  components: {
+    sidebarSection,
+  },
   data () {
     return {
       icons: Object.freeze({
-        upIcon,
-        downIcon,
         questIcon,
       }),
     };
@@ -261,9 +252,6 @@ export default {
     },
   },
   methods: {
-    toggle () {
-      this.$emit('toggle');
-    },
     openStartQuestModal () {
       this.$root.$emit('bv::show::modal', 'start-quest-modal');
     },
diff --git a/website/client/components/sidebarSection.vue b/website/client/components/sidebarSection.vue
new file mode 100644
index 0000000000..f4cba87ced
--- /dev/null
+++ b/website/client/components/sidebarSection.vue
@@ -0,0 +1,94 @@
+<template lang="pug">
+  .section(:class="{'section-last': last}")
+      .section-header.d-flex.align-items-center
+        h3.mb-0(v-once)
+          | {{ title }}
+        .section-info.mx-1(
+          v-if="tooltip !== null"
+        )
+          .svg-icon(
+            v-html='icons.information',
+            :id="tooltipId",
+            :title="tooltip"
+          )
+          b-tooltip(
+            :title="tooltip",
+            :target="tooltipId",
+          )
+        .section-toggle.ml-auto(@click="toggle")
+          .svg-icon(v-html="icons.upIcon", v-if="visible")
+          .svg-icon(v-html="icons.downIcon", v-else)
+      .section-body(v-show="visible")
+        slot
+</template>
+
+<style lang="scss" scoped>
+  .section {
+    border-top: 1px solid #e1e0e3;
+    margin-top: 1em;
+    padding-top: 1em;
+  }
+
+  .section-last {
+    border-bottom: 1px solid #e1e0e3;
+    margin-bottom: 1em;
+    padding-bottom: 1em;
+  }
+
+  .section-body {
+    margin-top: 1em;
+  }
+
+  .section-toggle {
+    cursor: pointer;
+  }
+
+  .section-info {
+    cursor: help;
+  }
+
+  .section-info .svg-icon,
+  .section-toggle .svg-icon {
+    width: 16px;
+  }
+</style>
+
+<script>
+  import uuid from 'uuid/v4';
+  import upIcon from 'assets/svg/up.svg';
+  import downIcon from 'assets/svg/down.svg';
+  import informationIcon from 'assets/svg/information.svg';
+
+  export default {
+    props: {
+      title: {
+        required: true,
+      },
+      tooltip: {
+        default: null,
+      },
+      show: {
+        default: true,
+      },
+      last: {
+        default: false,
+      },
+    },
+    data () {
+      return {
+        tooltipId: uuid(),
+        visible: this.show,
+        icons: {
+          upIcon,
+          downIcon,
+          information: informationIcon
+        },
+      };
+    },
+    methods: {
+      toggle () {
+        this.visible = !this.visible;
+      },
+    },
+  };
+</script>
\ No newline at end of file

From 85136675e9f55d63730b55826c438dd941636d4b Mon Sep 17 00:00:00 2001
From: Marvin Rabe <marvin.rabe@gmail.com>
Date: Tue, 1 May 2018 16:13:16 +0200
Subject: [PATCH 03/19] Fixed group sidebar.

---
 website/client/components/groups/sidebar.vue | 6 +++---
 website/common/locales/en/groups.json        | 2 ++
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/website/client/components/groups/sidebar.vue b/website/client/components/groups/sidebar.vue
index cd1a35ebf9..afa35608a1 100644
--- a/website/client/components/groups/sidebar.vue
+++ b/website/client/components/groups/sidebar.vue
@@ -6,7 +6,7 @@
   form
     h2(v-once) {{ $t('filter') }}
     .form-group
-      h3 Category
+      h3 {{ $t('category') }}
       .form-check(
         v-for="group in categoryOptions",
         :key="group.key",
@@ -15,7 +15,7 @@
           input.custom-control-input(type="checkbox", :value='group.key' v-model="categoryFilters", :id="group.key")
           label.custom-control-label(v-once, :for="group.key") {{ $t(group.label) }}
     .form-group
-      h3 Role
+      h3 {{ $t('role') }}
       .form-check(
         v-for="group in roleOptions",
         :key="group.key",
@@ -24,7 +24,7 @@
           input.custom-control-input(type="checkbox", :value='group.key' v-model="roleFilters", :id="group.key")
           label.custom-control-label(v-once, :for="group.key") {{ $t(group.label) }}
     .form-group
-      h3 Guild Size
+      h3 {{ $t('guildSize') }}
       .form-check(
         v-for="group in guildSizeOptions",
         :key="group.key",
diff --git a/website/common/locales/en/groups.json b/website/common/locales/en/groups.json
index 706934318d..99c01fcd0b 100644
--- a/website/common/locales/en/groups.json
+++ b/website/common/locales/en/groups.json
@@ -371,9 +371,11 @@
   "recentActivity": "Recent Activity",
   "myGuilds": "My Guilds",
   "guildsDiscovery": "Discover Guilds",
+  "role": "Role",
   "guildOrPartyLeader": "Leader",
   "guildLeader": "Guild Leader",
   "member": "Member",
+  "guildSize": "Guild Size",
   "goldTier": "Gold Tier",
   "silverTier": "Silver Tier",
   "bronzeTier": "Bronze Tier",

From 88b14592c5a4623c6c3c0d171d59fc9c88bb85e3 Mon Sep 17 00:00:00 2001
From: Marvin Rabe <marvin.rabe@gmail.com>
Date: Tue, 1 May 2018 17:23:02 +0200
Subject: [PATCH 04/19] Make Challenge Owner's Name Clickable (#9283)

---
 .../components/challenges/challengeDetail.vue |  7 ++++---
 .../components/challenges/groupChallenges.vue | 12 +++++------
 website/client/components/groups/group.vue    | 17 ++++-----------
 website/client/components/sidebarSection.vue  |  2 +-
 website/client/components/userLink.vue        | 21 +++++++++++++++++++
 5 files changed, 36 insertions(+), 23 deletions(-)
 create mode 100644 website/client/components/userLink.vue

diff --git a/website/client/components/challenges/challengeDetail.vue b/website/client/components/challenges/challengeDetail.vue
index eb2013d166..6152740022 100644
--- a/website/client/components/challenges/challengeDetail.vue
+++ b/website/client/components/challenges/challengeDetail.vue
@@ -9,8 +9,8 @@
       .col-12.col-md-6
         h1(v-markdown='challenge.name')
         div
-          strong(v-once) {{$t('createdBy')}}:
-          span(v-if='challenge.leader && challenge.leader.profile') {{challenge.leader.profile.name}}
+          strong.float-left(v-once) {{ $t('createdBy') }}:
+          user-link.mx-1.float-left(:user="challenge.leader")
           // @TODO: make challenge.author a variable inside the createdBy string (helps with RTL languages)
           // @TODO: Implement in V2 strong.margin-left(v-once)
             .svg-icon.calendar-icon(v-html="icons.calendarIcon")
@@ -180,7 +180,7 @@ import challengeMemberProgressModal from './challengeMemberProgressModal';
 import challengeMemberSearchMixin from 'client/mixins/challengeMemberSearch';
 import leaveChallengeModal from './leaveChallengeModal';
 import sidebarSection from '../sidebarSection';
-
+import userLink from '../userLink';
 import taskDefaults from 'common/script/libs/taskDefaults';
 
 import gemIcon from 'assets/svg/gem.svg';
@@ -202,6 +202,7 @@ export default {
     sidebarSection,
     TaskColumn: Column,
     TaskModal,
+    userLink,
   },
   data () {
     return {
diff --git a/website/client/components/challenges/groupChallenges.vue b/website/client/components/challenges/groupChallenges.vue
index fdac5452cf..79af7de8be 100644
--- a/website/client/components/challenges/groupChallenges.vue
+++ b/website/client/components/challenges/groupChallenges.vue
@@ -122,7 +122,7 @@ div
     computed: {
       ...mapState({user: 'user.data'}),
     },
-    data() {
+    data () {
       return {
         challenges: [],
         icons: Object.freeze({
@@ -136,24 +136,24 @@ div
     directives: {
       markdown: markdownDirective,
     },
-    mounted() {
+    mounted () {
       this.loadChallenges();
     },
     watch: {
-      async groupId() {
+      async groupId () {
         this.loadChallenges();
       },
     },
     methods: {
-      async loadChallenges() {
+      async loadChallenges () {
         this.groupIdForChallenges = this.groupId;
         if (this.groupId === 'party' && this.user.party._id) this.groupIdForChallenges = this.user.party._id;
         this.challenges = await this.$store.dispatch('challenges:getGroupChallenges', {groupId: this.groupIdForChallenges});
       },
-      createChallenge() {
+      createChallenge () {
         this.$root.$emit('bv::show::modal', 'challenge-modal');
       },
-      challengeCreated(challenge) {
+      challengeCreated (challenge) {
         if (challenge.group._id !== this.groupIdForChallenges) return;
         this.challenges.push(challenge);
       },
diff --git a/website/client/components/groups/group.vue b/website/client/components/groups/group.vue
index be3c4ea675..4d128948e2 100644
--- a/website/client/components/groups/group.vue
+++ b/website/client/components/groups/group.vue
@@ -9,8 +9,8 @@
     .row
       .col-12.col-md-6.title-details
         h1 {{group.name}}
-        strong.float-left(v-once) {{$t('groupLeader')}}
-        span.leader.float-left(v-if='group.leader.profile', @click='showMemberProfile(group.leader)') : {{group.leader.profile.name}}
+        strong.float-left(v-once) {{$t('groupLeader')}}:
+        user-link.mx-1.float-left(:user="group.leader")
       .col-12.col-md-6
         .row.icon-row
           .col-4.offset-4(v-bind:class="{ 'offset-8': isParty }")
@@ -93,10 +93,6 @@
     color: $purple-200;
   }
 
-  .leader:hover {
-    cursor: pointer;
-  }
-
   .button-container {
     margin-bottom: 1em;
 
@@ -281,6 +277,7 @@ import questSidebarSection from 'client/components/groups/questSidebarSection';
 import markdownDirective from 'client/directives/markdown';
 import communityGuidelines from './communityGuidelines';
 import sidebarSection from '../sidebarSection';
+import userLink from '../userLink';
 
 import deleteIcon from 'assets/svg/delete.svg';
 import copyIcon from 'assets/svg/copy.svg';
@@ -310,6 +307,7 @@ export default {
     questSidebarSection,
     communityGuidelines,
     sidebarSection,
+    userLink
   },
   directives: {
     markdown: markdownDirective,
@@ -624,13 +622,6 @@ export default {
       }
       // $rootScope.$state.go('options.inventory.quests');
     },
-    async showMemberProfile (leader) {
-      let heroDetails = await this.$store.dispatch('members:fetchMember', { memberId: leader._id });
-      this.$root.$emit('habitica:show-profile', {
-        user: heroDetails.data.data,
-        startingPage: 'profile',
-      });
-    },
     showGroupGems () {
       this.$root.$emit('bv::show::modal', 'group-gems-modal');
     },
diff --git a/website/client/components/sidebarSection.vue b/website/client/components/sidebarSection.vue
index f4cba87ced..18bdcc9b5a 100644
--- a/website/client/components/sidebarSection.vue
+++ b/website/client/components/sidebarSection.vue
@@ -81,7 +81,7 @@
         icons: {
           upIcon,
           downIcon,
-          information: informationIcon
+          information: informationIcon,
         },
       };
     },
diff --git a/website/client/components/userLink.vue b/website/client/components/userLink.vue
new file mode 100644
index 0000000000..c0e51fff43
--- /dev/null
+++ b/website/client/components/userLink.vue
@@ -0,0 +1,21 @@
+<template lang="pug">
+  b-link(
+    v-if='user && user.profile',
+    @click.prevent='showProfile(user)'
+    ) {{user.profile.name}}
+</template>
+
+<script>
+  export default {
+    props: ['user'],
+    methods: {
+      async showProfile (user) {
+        let heroDetails = await this.$store.dispatch('members:fetchMember', { memberId: user._id });
+        this.$root.$emit('habitica:show-profile', {
+          user: heroDetails.data.data,
+          startingPage: 'profile',
+        });
+      },
+    },
+  };
+</script>
\ No newline at end of file

From eaa00598d0c70b80d00c4474390fe48115e1efee Mon Sep 17 00:00:00 2001
From: Marvin Rabe <marvin.rabe@gmail.com>
Date: Tue, 1 May 2018 19:47:04 +0200
Subject: [PATCH 05/19] Improvements to Challenge Layout (#9619)

---
 .../components/challenges/challengeDetail.vue |  13 +-
 .../components/challenges/challengeItem.vue   | 389 +++++++++++-------
 .../components/challenges/groupChallenges.vue |  76 +---
 website/client/components/groupLink.vue       |  22 +
 website/client/components/groups/group.vue    |   6 +-
 website/common/locales/en/challenge.json      |   3 +-
 6 files changed, 286 insertions(+), 223 deletions(-)
 create mode 100644 website/client/components/groupLink.vue

diff --git a/website/client/components/challenges/challengeDetail.vue b/website/client/components/challenges/challengeDetail.vue
index 6152740022..ae7e88a1a8 100644
--- a/website/client/components/challenges/challengeDetail.vue
+++ b/website/client/components/challenges/challengeDetail.vue
@@ -9,8 +9,12 @@
       .col-12.col-md-6
         h1(v-markdown='challenge.name')
         div
-          strong.float-left(v-once) {{ $t('createdBy') }}:
-          user-link.mx-1.float-left(:user="challenge.leader")
+          span.mr-1.ml-0
+            strong(v-once) {{ $t('createdBy') }}:
+            user-link.mx-1(:user="challenge.leader")
+          span.mr-1.ml-0(v-if="challenge.group")
+            strong(v-once) {{ $t(challenge.group.type) }}:
+            group-link.mx-1(:group="challenge.group")
           // @TODO: make challenge.author a variable inside the createdBy string (helps with RTL languages)
           // @TODO: Implement in V2 strong.margin-left(v-once)
             .svg-icon.calendar-icon(v-html="icons.calendarIcon")
@@ -152,7 +156,8 @@
   }
 
   .challenge-actions {
-    margin-bottom: 1em;
+    margin-top: 1em;
+    margin-bottom: 2em;
 
     .view-progress {
       margin-right: .5em;
@@ -181,6 +186,7 @@ import challengeMemberSearchMixin from 'client/mixins/challengeMemberSearch';
 import leaveChallengeModal from './leaveChallengeModal';
 import sidebarSection from '../sidebarSection';
 import userLink from '../userLink';
+import groupLink from '../groupLink';
 import taskDefaults from 'common/script/libs/taskDefaults';
 
 import gemIcon from 'assets/svg/gem.svg';
@@ -203,6 +209,7 @@ export default {
     TaskColumn: Column,
     TaskModal,
     userLink,
+    groupLink,
   },
   data () {
     return {
diff --git a/website/client/components/challenges/challengeItem.vue b/website/client/components/challenges/challengeItem.vue
index 2b0c12c4c8..bd1407cd4b 100644
--- a/website/client/components/challenges/challengeItem.vue
+++ b/website/client/components/challenges/challengeItem.vue
@@ -1,187 +1,288 @@
 <template lang="pug">
-.card
-  .row
-    router-link.col-12(:to="{ name: 'challenge', params: { challengeId: challenge._id } }")
-      h3(v-markdown='challenge.name')
-  .row
-    .col-6
-      div.details
-        span
-          .svg-icon.member-icon(v-html="icons.memberIcon")
-        span {{challenge.memberCount}}
-        // @TODO: Add in V2
-          span
-            .svg-icon.calendar-icon(v-html="icons.calendarIcon")
-          span
-            strong End Date:
+.challenge
+  .challenge-prize
+    .number
+      span.svg-icon(v-html="icons.gemIcon")
+      span.value {{challenge.prize}}
+    .label {{ $t('challengePrize') }}
+  .challenge-header
+    router-link(
+      :to="{ name: 'challenge', params: { challengeId: challenge._id } }"
+    )
+      h3.challenge-title(v-markdown='challenge.name')
+    .owner(v-if="fullLayout")
+      .owner-item
+        strong {{ $t('createdBy') }}:
+        user-link.mx-1(:user="challenge.leader")
+      .owner-item(v-if="challenge.group")
+        strong {{ $t(challenge.group.type) }}:
+        group-link.mx-1(:group="challenge.group")
+    .meta
+      .meta-item
+        .svg-icon.user-icon(v-html="icons.memberIcon")
+        span.mx-1 {{challenge.memberCount}}
+      // @TODO: add end date
+        .meta-item
+          .svg-icon(v-html="icons.calendarIcon")
+          strong.mx-1 {{ $t('endDate')}}:
           span {{challenge.endDate}}
-      div.tags
-        span.tag(v-for='tag in challenge.tags') {{tag}}
-    .col-6.prize-section
-      div
-        span.svg-icon.gem(v-html="icons.gemIcon")
-        span.prize {{challenge.prize}}
-      div Challenge Prize
-  .row.description
-    .col-12
-      | {{challenge.summary}}
-  .well.row
-    .col-3
-      .count-details
-        .svg-icon.habit-icon(v-html="icons.habitIcon")
-        span.count {{challenge.tasksOrder.habits.length}}
-      div {{$t('habit')}}
-    .col-3
-      .count-details
-        .svg-icon.daily-icon(v-html="icons.dailyIcon")
-        span.count {{challenge.tasksOrder.dailys.length}}
-      div {{$t('daily')}}
-    .col-3
-      .count-details
-        .svg-icon.todo-icon(v-html="icons.todoIcon")
-        span.count {{challenge.tasksOrder.todos.length}}
-      div {{$t('todo')}}
-    .col-3
-      .count-details
-        .svg-icon.reward-icon(v-html="icons.rewardIcon")
-        span.count {{challenge.tasksOrder.rewards.length}}
-      div {{$t('reward')}}
+  .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) }}
+  .challenge-description {{challenge.summary}}
+  .well-wrapper(v-if="fullLayout")
+    .well
+      div(:class="{'muted': challenge.tasksOrder.habits.length === 0}")
+        .number
+          .svg-icon.habit-icon(v-html="icons.habitIcon")
+          span.value {{challenge.tasksOrder.habits.length}}
+        .label {{$t('habit')}}
+      div(:class="{'muted': challenge.tasksOrder.dailys.length === 0}")
+        .number
+          .svg-icon.daily-icon(v-html="icons.dailyIcon")
+          span.value {{challenge.tasksOrder.dailys.length}}
+        .label {{$t('daily')}}
+      div(:class="{'muted': challenge.tasksOrder.todos.length === 0}")
+        .number
+          .svg-icon.todo-icon(v-html="icons.todoIcon")
+          span.value {{challenge.tasksOrder.todos.length}}
+        div {{$t('todo')}}
+      div(:class="{'muted': challenge.tasksOrder.rewards.length === 0}")
+        .number
+          .svg-icon.reward-icon(v-html="icons.rewardIcon")
+          span.value {{challenge.tasksOrder.rewards.length}}
+        .label {{$t('reward')}}
+
 </template>
 
+<style lang="scss">
+  // Have to use this, because v-markdown creates p element in h3. Scoping doesn't work with it.
+  .challenge-title > p {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    max-height: 3em;
+    line-height: 1.5em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-all;
+  }
+</style>
+
 <style lang="scss" scoped>
   @import '~client/assets/scss/colors.scss';
 
-  .card {
+  .challenge {
     background-color: $white;
-    box-shadow: 0 2px 2px 0 $gray-600, 0 1px 4px 0 $gray-600;
-    padding: 2em;
-    height: 350px;
+    box-shadow: 0 2px 2px 0 $gray-400, 0 1px 4px 0 $gray-500;
     margin-bottom: 1em;
+    border-radius: .3em;
+    padding-bottom: .5em;
 
-    .gem {
-      width: 32px;
+    .number {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .svg-icon {
+        margin-top: -.2em;
+      }
+
+      .value {
+        margin-left: .5em;
+        font-size: 24px;
+      }
     }
 
-    .member-icon {
+    .label {
+      font-size: .9em;
+    }
+
+    .challenge-prize {
+      text-align: center;
+      color: $gems-color;
+      display: inline-block;
+      float: right;
+      padding: 1em 1.5em;
+      margin-left: 1.5em;
+      background: #eefaf6;
+      border-bottom-left-radius: .3em;
+
+      .svg-icon {
+        width: 32px;
+      }
+    }
+
+    .challenge-header,
+    .well-wrapper {
+      padding: 1em 1.5em;
+    }
+
+    .challenge-header {
+      padding-bottom: .5em;
+    }
+
+    .owner {
+      margin: 1em 0 .5em;
+    }
+
+    .meta, .owner {
+      display: flex;
+      align-items: center;
+      overflow: visible;
+    }
+
+    .meta-item, .owner-item {
+      display: inline-flex;
+      color: $gray-200;
+      align-items: center;
+      margin-right: 1em;
+      white-space: nowrap;
+
+      .svg-icon {
+        color: $gray-300;
+        width: 14px;
+      }
+    }
+
+    .user-icon {
+      width: 20px !important;
+    }
+
+    .habit-icon {
+      width: 30px;
+    }
+
+    .todo-icon {
       width: 20px;
     }
 
-    .calendar-icon {
-      width: 14px;
+    .daily-icon {
+      width: 24px;
     }
 
-    span {
-      display: inline-block;
-      font-size: 14px;
-      color: $gray-200;
-      margin-right: 1em;
-      vertical-align: bottom;
-    }
-
-    .details {
-      margin: 1em 0;
+    .reward-icon {
+      width: 26px;
     }
 
     .tags {
-      margin-bottom: 1em;
+      display: flex;
+      padding: 0 1em 1em;
     }
 
     .tag {
-      border-radius: 30px;
-      background-color: $gray-600;
-      padding: .5em;
-    }
-
-    .prize {
-      color: $gray-100;
-      font-size: 24px;
-    }
-
-    .prize-section {
-      text-align: right;
-      padding-right: 2em;
-    }
-
-    .description {
-      color: $gray-200;
-      margin-top: 1em;
-      margin-bottom: 1em;
+      box-shadow: none !important;
       overflow: hidden;
-      height: 80px;
+      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
     }
 
-    .well-wrapper {
-      padding: .8em;
+    .tag-purple {
+      color: white;
+      background: $purple-300;
+    }
+
+    .tag-blue {
+      color: white;
+      background: $blue-50;
+    }
+
+    .challenge-description {
+      color: $gray-200;
+      margin: 0 1.5em;
+      word-break: break-all;
     }
 
     .well {
+      display: flex;
+      align-items: center;
+      justify-content: space-evenly;
       background-color: $gray-700;
       text-align: center;
-      padding: 2em;
-      border-radius: 4px;
-      margin-left: .2em;
-      margin-right: .2em;
+      padding: 1em;
+      border-radius: .25em;
 
-      .svg-icon {
-        display: inline-block;
-        margin-left: .5em;
+      > div {
+        color: $gray-200;
+
+        .svg-icon {
+          color: $gray-300;
+        }
       }
 
-      .habit-icon {
-        width: 30px;
-      }
+      > div.muted {
+        color: $gray-400;
 
-      .todo-icon {
-        width: 20px;
-      }
-
-      .daily-icon {
-        width: 24px;
-      }
-
-      .reward-icon {
-        width: 26px;
-      }
-
-      .count-details span {
-        margin-right: .5em;
-      }
-
-      .count {
-        font-size: 20px;
-        margin-left: .5em;
+        .svg-icon {
+          color: $gray-500;
+        }
       }
     }
+
   }
 </style>
 
 <script>
-import gemIcon from 'assets/svg/gem.svg';
-import memberIcon from 'assets/svg/member-icon.svg';
-import calendarIcon from 'assets/svg/calendar.svg';
-import habitIcon from 'assets/svg/habit.svg';
-import todoIcon from 'assets/svg/todo.svg';
-import dailyIcon from 'assets/svg/daily.svg';
-import rewardIcon from 'assets/svg/reward.svg';
-import markdownDirective from 'client/directives/markdown';
+  import {mapState} from 'client/libs/store';
+  import userLink from '../userLink';
+  import groupLink from '../groupLink';
+  import markdownDirective from 'client/directives/markdown';
 
-export default {
-  props: ['challenge'],
-  data () {
-    return {
-      icons: Object.freeze({
-        gemIcon,
-        memberIcon,
-        calendarIcon,
-        habitIcon,
-        todoIcon,
-        dailyIcon,
-        rewardIcon,
-      }),
-    };
-  },
-  directives: {
-    markdown: markdownDirective,
-  },
-};
+  import gemIcon from 'assets/svg/gem.svg';
+  import memberIcon from 'assets/svg/member-icon.svg';
+  import calendarIcon from 'assets/svg/calendar.svg';
+  import habitIcon from 'assets/svg/habit.svg';
+  import todoIcon from 'assets/svg/todo.svg';
+  import dailyIcon from 'assets/svg/daily.svg';
+  import rewardIcon from 'assets/svg/reward.svg';
+
+  export default {
+    props: {
+      challenge: {
+        required: true,
+      },
+      fullLayout: {
+        default: true,
+      },
+    },
+    components: {
+      userLink,
+      groupLink,
+    },
+    data () {
+      return {
+        icons: Object.freeze({
+          gemIcon,
+          memberIcon,
+          calendarIcon,
+          habitIcon,
+          todoIcon,
+          dailyIcon,
+          rewardIcon,
+        }),
+      };
+    },
+    computed: {
+      ...mapState({user: 'user.data'}),
+    },
+    directives: {
+      markdown: markdownDirective,
+    },
+    methods: {
+      isLeader (challenge) {
+        if (!challenge.leader) return false;
+        return this.user._id === challenge.leader._id;
+      },
+      isOfficial (category) {
+        return category.name === 'habitica_official';
+      },
+    },
+  };
 </script>
diff --git a/website/client/components/challenges/groupChallenges.vue b/website/client/components/challenges/groupChallenges.vue
index 79af7de8be..1415b921a9 100644
--- a/website/client/components/challenges/groupChallenges.vue
+++ b/website/client/components/challenges/groupChallenges.vue
@@ -8,21 +8,7 @@ div
       p(v-once) {{ $t('challengeDetails') }}
       button.btn.btn-secondary(@click='createChallenge()') {{ $t('createChallenge') }}
   template(v-else)
-    router-link.title(:to="{ name: 'challenge', params: { challengeId: challenge._id } }", v-for='challenge in challenges',:key='challenge._id')
-      .col-12.challenge-item
-        .row
-          .col-9
-            router-link.title(:to="{ name: 'challenge', params: { challengeId: challenge._id } }")
-              strong(v-markdown='challenge.name')
-            p(v-markdown='challenge.summary || challenge.name')
-            div
-              .svg-icon.member-icon(v-html="icons.memberIcon")
-              .member-count {{challenge.memberCount}}
-          .col-3
-            div
-              span.svg-icon.gem(v-html="icons.gemIcon")
-              span.prize {{challenge.prize}}
-            div.prize-title Prize
+    challenge-item(v-for='challenge in challenges',:challenge='challenge',:key='challenge._id',:fullLayout='false')
     .col-12.text-center
       button.btn.btn-secondary(@click='createChallenge()') {{ $t('createChallenge') }}
 </template>
@@ -51,73 +37,19 @@ div
   }
 </style>
 
-<style scoped>
-  .title {
-    color: #4E4A57;
-  }
-
-  .member-icon {
-    display: inline-block;
-    width: 20px !important;
-    vertical-align: bottom;
-    height: 16px !important;
-  }
-
-  .member-count {
-    width: 21px;
-    height: 16px;
-    font-size: 14px;
-    line-height: 2;
-    color: #878190;
-    display: inline-block;
-    text-align: center;
-  }
-
-  .challenge-icon {
-    height: 30px;
-    width: 30px;
-    margin-bottom: 2em;
-    margin: 0 auto;
-  }
-
-  .gem {
-    width: 26px;
-    vertical-align: bottom;
-    display: inline-block;
-  }
-
-  .prize {
-    color: #686274;
-    font-size: 18px;
-    margin-left: .5em;
-  }
-
-  .prize-title {
-    padding-left: .7em;
-  }
-
-  .challenge-item {
-    border-radius: 2px;
-    background-color: #ffffff;
-    box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
-    margin-bottom: 1em;
-    padding: 2em;
-  }
-</style>
-
 <script>
   import challengeModal from './challengeModal';
   import {mapState} from 'client/libs/store';
   import markdownDirective from 'client/directives/markdown';
 
+  import challengeItem from './challengeItem';
   import challengeIcon from 'assets/svg/challenge.svg';
-  import gemIcon from 'assets/svg/gem.svg';
-  import memberIcon from 'assets/svg/member-icon.svg';
 
   export default {
     props: ['groupId'],
     components: {
       challengeModal,
+      challengeItem,
     },
     computed: {
       ...mapState({user: 'user.data'}),
@@ -127,8 +59,6 @@ div
         challenges: [],
         icons: Object.freeze({
           challengeIcon,
-          memberIcon,
-          gemIcon,
         }),
         groupIdForChallenges: '',
       };
diff --git a/website/client/components/groupLink.vue b/website/client/components/groupLink.vue
new file mode 100644
index 0000000000..754f3440e9
--- /dev/null
+++ b/website/client/components/groupLink.vue
@@ -0,0 +1,22 @@
+<template lang="pug">
+  b-link(
+    v-if='group',
+    @click.prevent='goToGroup'
+    ) {{group.name}}
+
+</template>
+
+<script>
+  export default {
+    props: ['group'],
+    methods: {
+      goToGroup () {
+        if (this.group.type === 'party') {
+          this.$router.push({name: 'party'});
+        } else {
+          this.$router.push({name: 'guild', params: {groupId: this.group._id}});
+        }
+      },
+    },
+  };
+</script>
\ No newline at end of file
diff --git a/website/client/components/groups/group.vue b/website/client/components/groups/group.vue
index 4d128948e2..63b5a1d82f 100644
--- a/website/client/components/groups/group.vue
+++ b/website/client/components/groups/group.vue
@@ -9,8 +9,10 @@
     .row
       .col-12.col-md-6.title-details
         h1 {{group.name}}
-        strong.float-left(v-once) {{$t('groupLeader')}}:
-        user-link.mx-1.float-left(:user="group.leader")
+        div
+          span.mr-1.ml-0
+            strong(v-once) {{$t('groupLeader')}}:
+            user-link.mx-1(:user="group.leader")
       .col-12.col-md-6
         .row.icon-row
           .col-4.offset-4(v-bind:class="{ 'offset-8': isParty }")
diff --git a/website/common/locales/en/challenge.json b/website/common/locales/en/challenge.json
index a5ca557e4a..ee425c1efc 100644
--- a/website/common/locales/en/challenge.json
+++ b/website/common/locales/en/challenge.json
@@ -13,7 +13,8 @@
   "challengeWinner": "Was the winner in the following challenges",
   "challenges": "Challenges",
   "challengesLink": "<a href='http://habitica.wikia.com/wiki/Challenges' target='_blank'>Challenges</a>",
-
+  "challengePrize": "Challenge Prize",
+  "endDate": "Ends",
   "noChallenges": "No challenges yet, visit",
   "toCreate": "to create one.",
 

From 45df73e4be260497cf18206d8b5384ea5ae36d01 Mon Sep 17 00:00:00 2001
From: Marvin Rabe <marvin.rabe@gmail.com>
Date: Tue, 1 May 2018 19:53:31 +0200
Subject: [PATCH 06/19] Fixed challenges on 'Tavern'

---
 website/client/components/challenges/challengeDetail.vue | 2 +-
 website/client/components/challenges/challengeItem.vue   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/website/client/components/challenges/challengeDetail.vue b/website/client/components/challenges/challengeDetail.vue
index ae7e88a1a8..1d0b737d71 100644
--- a/website/client/components/challenges/challengeDetail.vue
+++ b/website/client/components/challenges/challengeDetail.vue
@@ -12,7 +12,7 @@
           span.mr-1.ml-0
             strong(v-once) {{ $t('createdBy') }}:
             user-link.mx-1(:user="challenge.leader")
-          span.mr-1.ml-0(v-if="challenge.group")
+          span.mr-1.ml-0(v-if="challenge.group && challenge.group.name !== 'Tavern'")
             strong(v-once) {{ $t(challenge.group.type) }}:
             group-link.mx-1(:group="challenge.group")
           // @TODO: make challenge.author a variable inside the createdBy string (helps with RTL languages)
diff --git a/website/client/components/challenges/challengeItem.vue b/website/client/components/challenges/challengeItem.vue
index bd1407cd4b..c92c2fa2d9 100644
--- a/website/client/components/challenges/challengeItem.vue
+++ b/website/client/components/challenges/challengeItem.vue
@@ -14,7 +14,7 @@
       .owner-item
         strong {{ $t('createdBy') }}:
         user-link.mx-1(:user="challenge.leader")
-      .owner-item(v-if="challenge.group")
+      .owner-item(v-if="challenge.group && challenge.group.name !== 'Tavern'")
         strong {{ $t(challenge.group.type) }}:
         group-link.mx-1(:group="challenge.group")
     .meta

From 05c43d1f9d7119c62b589da2c8e51d17d817b7a8 Mon Sep 17 00:00:00 2001
From: Marvin Rabe <marvin.rabe@gmail.com>
Date: Tue, 1 May 2018 20:13:46 +0200
Subject: [PATCH 07/19] Use sidebar section component in tavern.

---
 website/client/components/groups/group.vue  |  2 +-
 website/client/components/groups/tavern.vue | 93 +++++++--------------
 2 files changed, 30 insertions(+), 65 deletions(-)

diff --git a/website/client/components/groups/group.vue b/website/client/components/groups/group.vue
index 63b5a1d82f..6bcf92922e 100644
--- a/website/client/components/groups/group.vue
+++ b/website/client/components/groups/group.vue
@@ -309,7 +309,7 @@ export default {
     questSidebarSection,
     communityGuidelines,
     sidebarSection,
-    userLink
+    userLink,
   },
   directives: {
     markdown: markdownDirective,
diff --git a/website/client/components/groups/tavern.vue b/website/client/components/groups/tavern.vue
index 3ea95eed72..9fb0924dbf 100644
--- a/website/client/components/groups/tavern.vue
+++ b/website/client/components/groups/tavern.vue
@@ -102,18 +102,9 @@
           li(v-once) {{ $t('sleepBullet4') }}
         button.btn.btn-secondary.pause-button(v-if='!user.preferences.sleep', @click='toggleSleep()', v-once) {{ $t('pauseDailies') }}
         button.btn.btn-secondary.pause-button(v-if='user.preferences.sleep', @click='toggleSleep()', v-once) {{ $t('unpauseDailies') }}
-
-    .below-header-sections
-      .section-header
+    .px-3
+      sidebar-section(:title="$t('staffAndModerators')")
         .row
-          .col-10
-            h3(v-once) {{ $t('staffAndModerators') }}
-          .col-2
-            .toggle-up(@click="sections.staff = !sections.staff", v-if="sections.staff")
-              .svg-icon(v-html="icons.upIcon")
-            .toggle-down(@click="sections.staff = !sections.staff", v-if="!sections.staff")
-              .svg-icon(v-html="icons.downIcon")
-        .section.row(v-if="sections.staff")
           .col-4.staff(v-for='user in staff', :class='{staff: user.type === "Staff", moderator: user.type === "Moderator", bailey: user.name === "It\'s Bailey"}')
             div
               a.title(@click="viewStaffProfile(user.uuid)") {{user.name}}
@@ -122,50 +113,33 @@
               .svg-icon.npc-icon(v-html="icons.tierNPC", v-if='user.name === "It\'s Bailey"')
             .type {{user.type}}
 
-      .section-header
-        .row
-          .col-10
-            h3(v-once) {{ $t('helpfulLinks') }}
-          .col-2
-            .toggle-up(@click="sections.helpfulLinks = !sections.helpfulLinks", v-if="sections.helpfulLinks")
-              .svg-icon(v-html="icons.upIcon")
-            .toggle-down(@click="sections.helpfulLinks = !sections.helpfulLinks", v-if="!sections.helpfulLinks")
-              .svg-icon(v-html="icons.downIcon")
-        .section.row(v-if="sections.helpfulLinks")
-          ul
-            li
-              a(href='', @click.prevent='modForm()') {{ $t('contactForm') }}
-            li
-             router-link(to='/static/community-guidelines', v-once) {{ $t('communityGuidelinesLink') }}
-            li
-              router-link(to="/groups/guild/f2db2a7f-13c5-454d-b3ee-ea1f5089e601") {{ $t('lookingForGroup') }}
-            li
-             router-link(to='/static/faq', v-once) {{ $t('faq') }}
-            li
-              a(href='', v-html="$t('glossary')")
-            li
-              a(href='http://habitica.wikia.com/wiki/Habitica_Wiki', v-once) {{ $t('wiki') }}
-            li
-              a(href='https://oldgods.net/habitrpg/habitrpg_user_data_display.html', v-once) {{ $t('dataDisplayTool') }}
-            li
-              router-link(to="/groups/guild/a29da26b-37de-4a71-b0c6-48e72a900dac") {{ $t('reportProblem') }}
-            li
-              a(href='https://trello.com/c/odmhIqyW/440-read-first-table-of-contents', v-once) {{ $t('requestFeature') }}
-            li
-              a(href='', v-html="$t('communityForum')")
-            li
-              router-link(to="/groups/guild/5481ccf3-5d2d-48a9-a871-70a7380cee5a") {{ $t('askQuestionGuild') }}
+      sidebar-section(:title="$t('helpfulLinks')")
+        ul
+          li
+            a(href='', @click.prevent='modForm()') {{ $t('contactForm') }}
+          li
+           router-link(to='/static/community-guidelines', v-once) {{ $t('communityGuidelinesLink') }}
+          li
+            router-link(to="/groups/guild/f2db2a7f-13c5-454d-b3ee-ea1f5089e601") {{ $t('lookingForGroup') }}
+          li
+           router-link(to='/static/faq', v-once) {{ $t('faq') }}
+          li
+            a(href='', v-html="$t('glossary')")
+          li
+            a(href='http://habitica.wikia.com/wiki/Habitica_Wiki', v-once) {{ $t('wiki') }}
+          li
+            a(href='https://oldgods.net/habitrpg/habitrpg_user_data_display.html', v-once) {{ $t('dataDisplayTool') }}
+          li
+            router-link(to="/groups/guild/a29da26b-37de-4a71-b0c6-48e72a900dac") {{ $t('reportProblem') }}
+          li
+            a(href='https://trello.com/c/odmhIqyW/440-read-first-table-of-contents', v-once) {{ $t('requestFeature') }}
+          li
+            a(href='', v-html="$t('communityForum')")
+          li
+            router-link(to="/groups/guild/5481ccf3-5d2d-48a9-a871-70a7380cee5a") {{ $t('askQuestionGuild') }}
 
-      .section-header
+      sidebar-section(:title="$t('playerTiers')",:last='true')
         .row
-          .col-10
-            h3(v-once) {{ $t('playerTiers') }}
-          .col-2
-            .toggle-up(@click="sections.playerTiers = !sections.playerTiers", v-if="sections.playerTiers")
-              .svg-icon(v-html="icons.upIcon")
-            .toggle-down(@click="sections.playerTiers = !sections.playerTiers", v-if="!sections.playerTiers")
-              .svg-icon(v-html="icons.downIcon")
-        .section.row(v-if="sections.playerTiers")
           .col-12
             p(v-once) {{ $t('playerTiersDesc') }}
             ul.tier-list
@@ -267,10 +241,6 @@
     width: 100%;
   }
 
-  .section-header {
-    margin-top: 2em;
-  }
-
   .grassy-meadow-backdrop {
     background-image: url('~assets/images/npc/#{$npc_tavern_flavor}/tavern_background.png');
     background-repeat: repeat-x;
@@ -525,17 +495,16 @@ import autocomplete from '../chat/autoComplete';
 import communityGuidelines from './communityGuidelines';
 import worldBossInfoModal from '../world-boss/worldBossInfoModal';
 import worldBossRageModal from '../world-boss/worldBossRageModal';
+import sidebarSection from '../sidebarSection';
 
 import challengeIcon from 'assets/svg/challenge.svg';
 import chevronIcon from 'assets/svg/chevron-red.svg';
-import downIcon from 'assets/svg/down.svg';
 import gemIcon from 'assets/svg/gem.svg';
 import healthIcon from 'assets/svg/health.svg';
 import informationIconRed from 'assets/svg/information-red.svg';
 import questBackground from 'assets/svg/quest-background-border.svg';
 import rageIcon from 'assets/svg/rage.svg';
 import swordIcon from 'assets/svg/sword.svg';
-import upIcon from 'assets/svg/up.svg';
 
 import tier1 from 'assets/svg/tier-1.svg';
 import tier2 from 'assets/svg/tier-2.svg';
@@ -557,6 +526,7 @@ export default {
     communityGuidelines,
     worldBossInfoModal,
     worldBossRageModal,
+    sidebarSection,
   },
   data () {
     return {
@@ -564,7 +534,6 @@ export default {
       icons: Object.freeze({
         challengeIcon,
         chevronIcon,
-        downIcon,
         gem: gemIcon,
         healthIcon,
         informationIcon: informationIconRed,
@@ -581,15 +550,11 @@ export default {
         tierMod,
         tierNPC,
         tierStaff,
-        upIcon,
       }),
       group: {
         chat: [],
       },
       sections: {
-        staff: true,
-        helpfulLinks: true,
-        playerTiers: true,
         worldBoss: true,
       },
       staff: [

From 129fccf646abf0dd7354eecd4dd5cc29b564f501 Mon Sep 17 00:00:00 2001
From: Marvin Rabe <marvin.rabe@gmail.com>
Date: Tue, 1 May 2018 21:36:23 +0200
Subject: [PATCH 08/19] Guild category tags and challenge category tags have
 now the same styling.

---
 website/client/assets/scss/categories.scss    | 10 +++++
 .../components/challenges/challengeItem.vue   | 40 +++++--------------
 .../components/groups/publicGuildItem.vue     | 13 +++++-
 3 files changed, 33 insertions(+), 30 deletions(-)

diff --git a/website/client/assets/scss/categories.scss b/website/client/assets/scss/categories.scss
index 7317e9ee5e..cd0b4c4c4e 100644
--- a/website/client/assets/scss/categories.scss
+++ b/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;
diff --git a/website/client/components/challenges/challengeItem.vue b/website/client/components/challenges/challengeItem.vue
index c92c2fa2d9..4932b86d9d 100644
--- a/website/client/components/challenges/challengeItem.vue
+++ b/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 {
diff --git a/website/client/components/groups/publicGuildItem.vue b/website/client/components/groups/publicGuildItem.vue
index f01ccded7d..db28020e6e 100644
--- a/website/client/components/groups/publicGuildItem.vue
+++ b/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>

From 17001743e1e36c5e53ae0f7716efc3e525254cab Mon Sep 17 00:00:00 2001
From: Marvin Rabe <marvin.rabe@gmail.com>
Date: Mon, 7 May 2018 13:24:48 +0200
Subject: [PATCH 09/19] Changed last prop to :last-of-type

---
 .../components/challenges/challengeDetail.vue | 12 +++++-----
 website/client/components/groups/group.vue    | 22 +++++++++----------
 website/client/components/groups/tavern.vue   |  2 +-
 website/client/components/sidebarSection.vue  |  7 ++----
 4 files changed, 19 insertions(+), 24 deletions(-)

diff --git a/website/client/components/challenges/challengeDetail.vue b/website/client/components/challenges/challengeDetail.vue
index 1d0b737d71..70b9ff2c60 100644
--- a/website/client/components/challenges/challengeDetail.vue
+++ b/website/client/components/challenges/challengeDetail.vue
@@ -70,13 +70,11 @@
       button.btn.btn-primary(v-once, @click='exportChallengeCsv()') {{$t('exportChallengeCsv')}}
     .button-container(v-if='isLeader || isAdmin')
       button.btn.btn-danger(v-once, @click='closeChallenge()') {{$t('endChallenge')}}
-    sidebar-section(:title="$t('challengeSummary')")
-      p(v-markdown='challenge.summary')
-    sidebar-section(
-      :title="$t('challengeDescription')"
-      :last="true"
-    )
-      p(v-markdown='challenge.description')
+    div
+      sidebar-section(:title="$t('challengeSummary')")
+        p(v-markdown='challenge.summary')
+      sidebar-section(:title="$t('challengeDescription')")
+        p(v-markdown='challenge.description')
     .text-center(v-if='isMember')
       button.btn.btn-danger(v-once, @click='leaveChallenge()') {{$t('leaveChallenge')}}
 </template>
diff --git a/website/client/components/groups/group.vue b/website/client/components/groups/group.vue
index 6bcf92922e..474752907b 100644
--- a/website/client/components/groups/group.vue
+++ b/website/client/components/groups/group.vue
@@ -63,17 +63,17 @@
           // @TODO: V2 button.btn.btn-primary(v-once, v-if='!isLeader') {{$t('messageGuildLeader')}} // Suggest making the button visible to the leader too - useful for them to test how the feature works or to send a note to themself. -- Alys
         .button-container
           // @TODO: V2 button.btn.btn-primary(v-once, v-if='isMember && !isParty') {{$t('donateGems')}} // Suggest removing the isMember restriction - it's okay if non-members donate to a public guild. Also probably allow it for parties if parties can buy imagery. -- Alys
-    quest-sidebar-section(:group='group', v-if='isParty')
-    sidebar-section(:title="$t('guildSummary')", v-if='!isParty')
-      p(v-markdown='group.summary')
-    sidebar-section(:title="$t('groupDescription')")
-      p(v-markdown='group.description')
-    sidebar-section(
-      :title="$t('challenges')",
-      :tooltip="isParty ? $t('challengeDetails') : $t('privateDescription')"
-      :last="true"
-    )
-      group-challenges(:groupId='searchId')
+    div
+      quest-sidebar-section(:group='group', v-if='isParty')
+      sidebar-section(:title="$t('guildSummary')", v-if='!isParty')
+        p(v-markdown='group.summary')
+      sidebar-section(:title="$t('groupDescription')")
+        p(v-markdown='group.description')
+      sidebar-section(
+        :title="$t('challenges')",
+        :tooltip="isParty ? $t('challengeDetails') : $t('privateDescription')"
+      )
+        group-challenges(:groupId='searchId')
     div.text-center
       button.btn.btn-danger(v-if='isMember', @click='clickLeave()') {{ isParty ? $t('leaveParty') : $t('leaveGroup') }}
 </template>
diff --git a/website/client/components/groups/tavern.vue b/website/client/components/groups/tavern.vue
index 9fb0924dbf..de390cac93 100644
--- a/website/client/components/groups/tavern.vue
+++ b/website/client/components/groups/tavern.vue
@@ -138,7 +138,7 @@
           li
             router-link(to="/groups/guild/5481ccf3-5d2d-48a9-a871-70a7380cee5a") {{ $t('askQuestionGuild') }}
 
-      sidebar-section(:title="$t('playerTiers')",:last='true')
+      sidebar-section(:title="$t('playerTiers')")
         .row
           .col-12
             p(v-once) {{ $t('playerTiersDesc') }}
diff --git a/website/client/components/sidebarSection.vue b/website/client/components/sidebarSection.vue
index 18bdcc9b5a..24f150ef00 100644
--- a/website/client/components/sidebarSection.vue
+++ b/website/client/components/sidebarSection.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  .section(:class="{'section-last': last}")
+  .section
       .section-header.d-flex.align-items-center
         h3.mb-0(v-once)
           | {{ title }}
@@ -29,7 +29,7 @@
     padding-top: 1em;
   }
 
-  .section-last {
+  .section:last-of-type {
     border-bottom: 1px solid #e1e0e3;
     margin-bottom: 1em;
     padding-bottom: 1em;
@@ -70,9 +70,6 @@
       show: {
         default: true,
       },
-      last: {
-        default: false,
-      },
     },
     data () {
       return {

From 11b223a81e3714a59cb4b634296ac955bc0bf3ba Mon Sep 17 00:00:00 2001
From: Marvin Rabe <marvin.rabe@gmail.com>
Date: Mon, 7 May 2018 13:25:52 +0200
Subject: [PATCH 10/19] Challenge item shadow and border radius matches guild
 item style.

---
 website/client/components/challenges/challengeItem.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/website/client/components/challenges/challengeItem.vue b/website/client/components/challenges/challengeItem.vue
index 4932b86d9d..214918b192 100644
--- a/website/client/components/challenges/challengeItem.vue
+++ b/website/client/components/challenges/challengeItem.vue
@@ -74,9 +74,9 @@
 
   .challenge {
     background-color: $white;
-    box-shadow: 0 2px 2px 0 $gray-400, 0 1px 4px 0 $gray-500;
+    box-shadow: 0 2px 2px 0 rgba($black, 0.15), 0 1px 4px 0 rgba($black, 0.1);
     margin-bottom: 1em;
-    border-radius: .3em;
+    border-radius: 4px;
     padding-bottom: .5em;
 
     .number {
@@ -106,7 +106,7 @@
       padding: 1em 1.5em;
       margin-left: 1em;
       background: #eefaf6;
-      border-bottom-left-radius: .3em;
+      border-bottom-left-radius: 4px;
 
       .svg-icon {
         width: 32px;

From 4c837acf88f2b6fafe9bd23135339296976f3cb5 Mon Sep 17 00:00:00 2001
From: Marvin Rabe <marvin.rabe@gmail.com>
Date: Mon, 7 May 2018 13:30:33 +0200
Subject: [PATCH 11/19] Use computed attribute for boss health bar width.

---
 website/client/components/groups/questSidebarSection.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/client/components/groups/questSidebarSection.vue b/website/client/components/groups/questSidebarSection.vue
index f683841e22..45b5fbc212 100644
--- a/website/client/components/groups/questSidebarSection.vue
+++ b/website/client/components/groups/questSidebarSection.vue
@@ -42,7 +42,7 @@ sidebar-section(:title="$t('questDetailsTitle')")
           .row
             .col-12
               .grey-progress-bar
-                .boss-health-bar(:style="{width: (group.quest.progress.hp / questData.boss.hp) * 100 + '%'}")
+                .boss-health-bar(:style="{width: bossHpPercent + '%'}")
           .row.boss-details
             .col-6
               span.float-left

From c83499545cc3a6a96dce4d61b750afb0474384d0 Mon Sep 17 00:00:00 2001
From: Marvin Rabe <marvin.rabe@gmail.com>
Date: Mon, 7 May 2018 13:35:53 +0200
Subject: [PATCH 12/19] Added Tavern case

---
 website/client/components/challenges/challengeItem.vue | 6 +++++-
 website/client/components/groupLink.vue                | 5 ++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/website/client/components/challenges/challengeItem.vue b/website/client/components/challenges/challengeItem.vue
index 214918b192..81cc9b0bb3 100644
--- a/website/client/components/challenges/challengeItem.vue
+++ b/website/client/components/challenges/challengeItem.vue
@@ -14,7 +14,7 @@
       .owner-item
         strong {{ $t('createdBy') }}:
         user-link.mx-1(:user="challenge.leader")
-      .owner-item(v-if="challenge.group && challenge.group.name !== 'Tavern'")
+      .owner-item(v-if="challenge.group && !isTavern(challenge.group)")
         strong {{ $t(challenge.group.type) }}:
         group-link.mx-1(:group="challenge.group")
     .meta
@@ -212,6 +212,7 @@
 </style>
 
 <script>
+  import { TAVERN_ID } from '../../../common/script/constants';
   import {mapState} from 'client/libs/store';
   import userLink from '../userLink';
   import groupLink from '../groupLink';
@@ -265,6 +266,9 @@
       isOfficial (category) {
         return category.name === 'habitica_official';
       },
+      isTavern (group) {
+        return group._id === TAVERN_ID;
+      },
     },
   };
 </script>
diff --git a/website/client/components/groupLink.vue b/website/client/components/groupLink.vue
index 754f3440e9..e1861565f9 100644
--- a/website/client/components/groupLink.vue
+++ b/website/client/components/groupLink.vue
@@ -3,16 +3,19 @@
     v-if='group',
     @click.prevent='goToGroup'
     ) {{group.name}}
-
 </template>
 
 <script>
+  import { TAVERN_ID } from '../../common/script/constants';
+
   export default {
     props: ['group'],
     methods: {
       goToGroup () {
         if (this.group.type === 'party') {
           this.$router.push({name: 'party'});
+        } else if (this.group._id === TAVERN_ID) {
+          this.$router.push({name: 'tavern'});
         } else {
           this.$router.push({name: 'guild', params: {groupId: this.group._id}});
         }

From 891b5566a990744fa5a3f5d40b6dc138f44c1487 Mon Sep 17 00:00:00 2001
From: Marvin Rabe <marvin.rabe@gmail.com>
Date: Mon, 7 May 2018 13:56:54 +0200
Subject: [PATCH 13/19] Created reusable category tags component.

---
 .../components/categories/categoryTags.vue    | 37 +++++++++++++++++++
 .../components/challenges/challengeItem.vue   | 17 ++-------
 .../components/groups/publicGuildItem.vue     | 19 +++-------
 3 files changed, 45 insertions(+), 28 deletions(-)
 create mode 100644 website/client/components/categories/categoryTags.vue

diff --git a/website/client/components/categories/categoryTags.vue b/website/client/components/categories/categoryTags.vue
new file mode 100644
index 0000000000..944580f5ea
--- /dev/null
+++ b/website/client/components/categories/categoryTags.vue
@@ -0,0 +1,37 @@
+<template lang="pug">
+  .categories
+    span.category-label.category-label-blue(v-if='isOwner')
+     | {{ $t('owned') }}
+    span.category-label(
+      v-for='category in categories',
+      :class="{'category-label-purple':isOfficial(category)}"
+    )
+     | {{ $t(category.name) }}
+    slot
+</template>
+
+<script>
+  import {mapState} from 'client/libs/store';
+
+  export default {
+    props: {
+      categories: {
+        required: true,
+      },
+      ownerId: {
+        default: null,
+      },
+    },
+    computed: {
+      ...mapState({user: 'user.data'}),
+      isOwner () {
+        return this.ownerId && this.ownerId === this.user._id;
+      },
+    },
+    methods: {
+      isOfficial (category) {
+        return category.name === 'habitica_official';
+      },
+    },
+  };
+</script>
\ No newline at end of file
diff --git a/website/client/components/challenges/challengeItem.vue b/website/client/components/challenges/challengeItem.vue
index 81cc9b0bb3..4684c7cfb8 100644
--- a/website/client/components/challenges/challengeItem.vue
+++ b/website/client/components/challenges/challengeItem.vue
@@ -26,9 +26,7 @@
           .svg-icon(v-html="icons.calendarIcon")
           strong.mx-1 {{ $t('endDate')}}:
           span {{challenge.endDate}}
-  .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) }}
+  category-tags(:categories="challenge.categories", :owner-id="challenge.leader._id", v-once)
   .challenge-description {{challenge.summary}}
   .well-wrapper(v-if="fullLayout")
     .well
@@ -213,9 +211,9 @@
 
 <script>
   import { TAVERN_ID } from '../../../common/script/constants';
-  import {mapState} from 'client/libs/store';
   import userLink from '../userLink';
   import groupLink from '../groupLink';
+  import categoryTags from '../categories/categoryTags';
   import markdownDirective from 'client/directives/markdown';
 
   import gemIcon from 'assets/svg/gem.svg';
@@ -238,6 +236,7 @@
     components: {
       userLink,
       groupLink,
+      categoryTags,
     },
     data () {
       return {
@@ -252,20 +251,10 @@
         }),
       };
     },
-    computed: {
-      ...mapState({user: 'user.data'}),
-    },
     directives: {
       markdown: markdownDirective,
     },
     methods: {
-      isLeader (challenge) {
-        if (!challenge.leader) return false;
-        return this.user._id === challenge.leader._id;
-      },
-      isOfficial (category) {
-        return category.name === 'habitica_official';
-      },
       isTavern (group) {
         return group._id === TAVERN_ID;
       },
diff --git a/website/client/components/groups/publicGuildItem.vue b/website/client/components/groups/publicGuildItem.vue
index db28020e6e..a38c0f1f0d 100644
--- a/website/client/components/groups/publicGuildItem.vue
+++ b/website/client/components/groups/publicGuildItem.vue
@@ -24,13 +24,7 @@ router-link.card-link(:to="{ name: 'guild', params: { groupId: guild._id } }")
                 span.count {{ guild.balance * 4 }}
               div.guild-bank(v-if='displayGemBank', v-once) {{$t('guildBank')}}
           .row
-            .col-md-12
-              .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)}}
+            category-tags.col-md-12(:categories="guild.categories", :owner-id="guild.leader", v-once)
               span.recommend-text(v-if='showSuggested(guild._id)') Suggested because you’re new to Habitica.
 </template>
 
@@ -132,6 +126,7 @@ router-link.card-link(:to="{ name: 'guild', params: { groupId: guild._id } }")
 <script>
 import moment from 'moment';
 import { mapState } from 'client/libs/store';
+import categoryTags from '../categories/categoryTags';
 import groupUtilities from 'client/mixins/groupsUtilities';
 import markdown from 'client/directives/markdown';
 import gemIcon from 'assets/svg/gem.svg';
@@ -146,6 +141,9 @@ export default {
     markdown,
   },
   props: ['guild', 'displayLeave', 'displayGemBank'],
+  components: {
+    categoryTags,
+  },
   computed: {
     ...mapState({user: 'user.data'}),
     isMember () {
@@ -180,13 +178,6 @@ 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>

From 1896a8fab0f81afb00b3eedcdf2376cd75890883 Mon Sep 17 00:00:00 2001
From: Marvin Rabe <marvin.rabe@gmail.com>
Date: Mon, 7 May 2018 14:18:05 +0200
Subject: [PATCH 14/19] Challenge task numbers get created from computed array.

---
 .../components/challenges/challengeItem.vue   | 78 ++++++++++---------
 1 file changed, 40 insertions(+), 38 deletions(-)

diff --git a/website/client/components/challenges/challengeItem.vue b/website/client/components/challenges/challengeItem.vue
index 4684c7cfb8..405f2a9d87 100644
--- a/website/client/components/challenges/challengeItem.vue
+++ b/website/client/components/challenges/challengeItem.vue
@@ -26,31 +26,15 @@
           .svg-icon(v-html="icons.calendarIcon")
           strong.mx-1 {{ $t('endDate')}}:
           span {{challenge.endDate}}
-  category-tags(:categories="challenge.categories", :owner-id="challenge.leader._id", v-once)
+  category-tags.challenge-categories(:categories="challenge.categories", :owner-id="challenge.leader._id", v-once)
   .challenge-description {{challenge.summary}}
   .well-wrapper(v-if="fullLayout")
     .well
-      div(:class="{'muted': challenge.tasksOrder.habits.length === 0}")
+      div(v-for="task in tasksData", :class="{'muted': task.value === 0}", v-once)
         .number
-          .svg-icon.habit-icon(v-html="icons.habitIcon")
-          span.value {{challenge.tasksOrder.habits.length}}
-        .label {{$t('habit')}}
-      div(:class="{'muted': challenge.tasksOrder.dailys.length === 0}")
-        .number
-          .svg-icon.daily-icon(v-html="icons.dailyIcon")
-          span.value {{challenge.tasksOrder.dailys.length}}
-        .label {{$t('daily')}}
-      div(:class="{'muted': challenge.tasksOrder.todos.length === 0}")
-        .number
-          .svg-icon.todo-icon(v-html="icons.todoIcon")
-          span.value {{challenge.tasksOrder.todos.length}}
-        div {{$t('todo')}}
-      div(:class="{'muted': challenge.tasksOrder.rewards.length === 0}")
-        .number
-          .svg-icon.reward-icon(v-html="icons.rewardIcon")
-          span.value {{challenge.tasksOrder.rewards.length}}
-        .label {{$t('reward')}}
-
+          .svg-icon(v-html="task.icon", :class="task.label + '-icon'")
+          span.value {{ task.value }}
+        .label {{$t(task.label)}}
 </template>
 
 <style lang="scss">
@@ -143,6 +127,13 @@
       }
     }
 
+    .challenge-categories {
+      clear: right;
+      display: flex;
+      padding: 0 1.5em 1em;
+      flex-wrap: wrap;
+    }
+
     .user-icon {
       width: 20px !important;
     }
@@ -163,17 +154,6 @@
       width: 26px;
     }
 
-    .categories {
-      clear: right;
-      display: flex;
-      padding: 0 1.5em 1em;
-      flex-wrap: wrap;
-    }
-
-    .category-label {
-      margin-top: .5em;
-    }
-
     .challenge-description {
       color: $gray-200;
       margin: 0 1.5em;
@@ -238,21 +218,43 @@
       groupLink,
       categoryTags,
     },
+    directives: {
+      markdown: markdownDirective,
+    },
     data () {
       return {
         icons: Object.freeze({
           gemIcon,
           memberIcon,
           calendarIcon,
-          habitIcon,
-          todoIcon,
-          dailyIcon,
-          rewardIcon,
         }),
       };
     },
-    directives: {
-      markdown: markdownDirective,
+    computed: {
+      tasksData () {
+        return [
+          {
+            icon: habitIcon,
+            label: 'habit',
+            value: this.challenge.tasksOrder.habits.length,
+          },
+          {
+            icon: dailyIcon,
+            label: 'daily',
+            value: this.challenge.tasksOrder.dailys.length,
+          },
+          {
+            icon: todoIcon,
+            label: 'todo',
+            value: this.challenge.tasksOrder.todos.length,
+          },
+          {
+            icon: rewardIcon,
+            label: 'reward',
+            value: this.challenge.tasksOrder.rewards.length,
+          },
+        ];
+      },
     },
     methods: {
       isTavern (group) {

From 0d846439612c4f3892fe7ad47fc9304ec4d737d5 Mon Sep 17 00:00:00 2001
From: Marvin Rabe <marvin.rabe@gmail.com>
Date: Mon, 7 May 2018 16:03:15 +0200
Subject: [PATCH 15/19] Joined and Owned Challenges should still appear in
 Discover, but annotated with status (#9956)

---
 website/client/assets/scss/categories.scss    |  7 ++++++-
 .../components/categories/categoryTags.vue    | 19 ++++++++-----------
 .../components/challenges/challengeItem.vue   | 10 +++++++++-
 .../components/challenges/findChallenges.vue  |  5 +----
 .../components/groups/publicGuildItem.vue     |  5 ++++-
 5 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/website/client/assets/scss/categories.scss b/website/client/assets/scss/categories.scss
index cd0b4c4c4e..3108537157 100644
--- a/website/client/assets/scss/categories.scss
+++ b/website/client/assets/scss/categories.scss
@@ -15,7 +15,7 @@
   background-color: $gray-600;
   padding: .5em;
   display: inline-block;
-  margin-right: .5em;
+  margin: .25em;
   font-size: 12px;
   font-weight: 500;
   line-height: 1.33;
@@ -33,6 +33,11 @@
   background: $blue-50;
 }
 
+.category-label-green {
+  color: white;
+  background: $green-50;
+}
+
 .category-select {
   border-radius: 2px;
   background-color: $white;
diff --git a/website/client/components/categories/categoryTags.vue b/website/client/components/categories/categoryTags.vue
index 944580f5ea..aaa0209db3 100644
--- a/website/client/components/categories/categoryTags.vue
+++ b/website/client/components/categories/categoryTags.vue
@@ -1,7 +1,9 @@
 <template lang="pug">
   .categories
-    span.category-label.category-label-blue(v-if='isOwner')
-     | {{ $t('owned') }}
+    span.category-label.category-label-blue(v-if='owner')
+      | {{ $t('owned') }}
+    span.category-label.category-label-green(v-if='member')
+      | {{ $t('joined') }}
     span.category-label(
       v-for='category in categories',
       :class="{'category-label-purple':isOfficial(category)}"
@@ -11,21 +13,16 @@
 </template>
 
 <script>
-  import {mapState} from 'client/libs/store';
-
   export default {
     props: {
       categories: {
         required: true,
       },
-      ownerId: {
-        default: null,
+      owner: {
+        default: false,
       },
-    },
-    computed: {
-      ...mapState({user: 'user.data'}),
-      isOwner () {
-        return this.ownerId && this.ownerId === this.user._id;
+      member: {
+        default: false,
       },
     },
     methods: {
diff --git a/website/client/components/challenges/challengeItem.vue b/website/client/components/challenges/challengeItem.vue
index 405f2a9d87..bd3032756d 100644
--- a/website/client/components/challenges/challengeItem.vue
+++ b/website/client/components/challenges/challengeItem.vue
@@ -26,7 +26,7 @@
           .svg-icon(v-html="icons.calendarIcon")
           strong.mx-1 {{ $t('endDate')}}:
           span {{challenge.endDate}}
-  category-tags.challenge-categories(:categories="challenge.categories", :owner-id="challenge.leader._id", v-once)
+  category-tags.challenge-categories(:categories="challenge.categories", :owner="isOwner", :member="isMember" v-once)
   .challenge-description {{challenge.summary}}
   .well-wrapper(v-if="fullLayout")
     .well
@@ -195,6 +195,7 @@
   import groupLink from '../groupLink';
   import categoryTags from '../categories/categoryTags';
   import markdownDirective from 'client/directives/markdown';
+  import {mapState} from 'client/libs/store';
 
   import gemIcon from 'assets/svg/gem.svg';
   import memberIcon from 'assets/svg/member-icon.svg';
@@ -231,6 +232,13 @@
       };
     },
     computed: {
+      ...mapState({user: 'user.data'}),
+      isOwner () {
+        return this.challenge.leader && this.challenge.leader._id === this.user._id;
+      },
+      isMember () {
+        return this.user.challenges.indexOf(this.challenge._id) !== -1;
+      },
       tasksData () {
         return [
           {
diff --git a/website/client/components/challenges/findChallenges.vue b/website/client/components/challenges/findChallenges.vue
index 8bfe6c6e1b..6b3308adae 100644
--- a/website/client/components/challenges/findChallenges.vue
+++ b/website/client/components/challenges/findChallenges.vue
@@ -15,7 +15,7 @@
           .svg-icon.positive-icon(v-html="icons.positiveIcon")
           span(v-once) {{$t('createChallenge')}}
     .row
-      .col-12.col-md-6(v-for='challenge in filteredChallenges', v-if='!memberOf(challenge)')
+      .col-12.col-md-6(v-for='challenge in filteredChallenges')
         challenge-item(:challenge='challenge')
     .row
       .col-12.text-center
@@ -105,9 +105,6 @@ export default {
     },
   },
   methods: {
-    memberOf (challenge) {
-      return this.user.challenges.indexOf(challenge._id) !== -1;
-    },
     updateSearch (eventData) {
       this.search = eventData.searchTerm;
       this.page = 0;
diff --git a/website/client/components/groups/publicGuildItem.vue b/website/client/components/groups/publicGuildItem.vue
index a38c0f1f0d..a08548eb17 100644
--- a/website/client/components/groups/publicGuildItem.vue
+++ b/website/client/components/groups/publicGuildItem.vue
@@ -24,7 +24,7 @@ router-link.card-link(:to="{ name: 'guild', params: { groupId: guild._id } }")
                 span.count {{ guild.balance * 4 }}
               div.guild-bank(v-if='displayGemBank', v-once) {{$t('guildBank')}}
           .row
-            category-tags.col-md-12(:categories="guild.categories", :owner-id="guild.leader", v-once)
+            category-tags.col-md-12(:categories="guild.categories", :owner="isOwner", v-once)
               span.recommend-text(v-if='showSuggested(guild._id)') Suggested because you’re new to Habitica.
 </template>
 
@@ -146,6 +146,9 @@ export default {
   },
   computed: {
     ...mapState({user: 'user.data'}),
+    isOwner () {
+      return this.guild.leader && this.guild.leader === this.user._id;
+    },
     isMember () {
       return this.isMemberOfGroup(this.user, this.guild);
     },

From 5f319ca4f6fda51a6ac69db2bf689c1f28d50df0 Mon Sep 17 00:00:00 2001
From: Marvin Rabe <marvin.rabe@gmail.com>
Date: Mon, 7 May 2018 16:23:49 +0200
Subject: [PATCH 16/19] My Challenges should include all Owned Challenges
 (#9286)

---
 .../client/components/challenges/myChallenges.vue   | 13 +------------
 1 file changed, 1 insertion(+), 12 deletions(-)

diff --git a/website/client/components/challenges/myChallenges.vue b/website/client/components/challenges/myChallenges.vue
index c80d73763b..a512c355f4 100644
--- a/website/client/components/challenges/myChallenges.vue
+++ b/website/client/components/challenges/myChallenges.vue
@@ -63,8 +63,6 @@
 </style>
 
 <script>
-import { mapState } from 'client/libs/store';
-
 import Sidebar from './sidebar';
 import ChallengeItem from './challengeItem';
 import challengeModal from './challengeModal';
@@ -111,24 +109,18 @@ export default {
         },
       ],
       search: '',
-      filters: {
-        roles: ['participating'], // This is required for my challenges
-      },
+      filters: {},
     };
   },
   mounted () {
     this.loadchallanges();
   },
   computed: {
-    ...mapState({user: 'user.data'}),
     filteredChallenges () {
       let search = this.search;
       let filters = this.filters;
       let user = this.$store.state.user.data;
 
-      // Always filter by member on this page:
-      filters.roles = ['participating'];
-
       // @TODO: Move this to the server
       return this.challenges.filter((challenge) => {
         return this.filterChallenge(challenge, filters, search, user);
@@ -136,9 +128,6 @@ export default {
     },
   },
   methods: {
-    memberOf (challenge) {
-      return this.user.challenges.indexOf(challenge._id) !== -1;
-    },
     updateSearch (eventData) {
       this.search = eventData.searchTerm;
     },

From 68526c07aeba4fae321920647c27a6f997c9d2f3 Mon Sep 17 00:00:00 2001
From: Marvin Rabe <marvin.rabe@gmail.com>
Date: Mon, 7 May 2018 16:43:07 +0200
Subject: [PATCH 17/19] Added missing comma.

---
 website/client/components/challenges/challengeItem.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/website/client/components/challenges/challengeItem.vue b/website/client/components/challenges/challengeItem.vue
index bd3032756d..0e458fd144 100644
--- a/website/client/components/challenges/challengeItem.vue
+++ b/website/client/components/challenges/challengeItem.vue
@@ -26,7 +26,12 @@
           .svg-icon(v-html="icons.calendarIcon")
           strong.mx-1 {{ $t('endDate')}}:
           span {{challenge.endDate}}
-  category-tags.challenge-categories(:categories="challenge.categories", :owner="isOwner", :member="isMember" v-once)
+  category-tags.challenge-categories(
+    :categories="challenge.categories",
+    :owner="isOwner",
+    :member="isMember",
+    v-once
+  )
   .challenge-description {{challenge.summary}}
   .well-wrapper(v-if="fullLayout")
     .well

From 68353fb874c5840210a48a9ea4edbf565313a769 Mon Sep 17 00:00:00 2001
From: Marvin Rabe <marvin.rabe@gmail.com>
Date: Mon, 7 May 2018 18:20:16 +0200
Subject: [PATCH 18/19] Added sidebar section test.

---
 .../unit/specs/components/sidebarSection.js   | 54 +++++++++++++++++++
 website/client/components/sidebarSection.vue  |  4 ++
 2 files changed, 58 insertions(+)
 create mode 100644 test/client/unit/specs/components/sidebarSection.js

diff --git a/test/client/unit/specs/components/sidebarSection.js b/test/client/unit/specs/components/sidebarSection.js
new file mode 100644
index 0000000000..23b651b7fc
--- /dev/null
+++ b/test/client/unit/specs/components/sidebarSection.js
@@ -0,0 +1,54 @@
+import {shallow} from '@vue/test-utils';
+
+import SidebarSection from 'client/components/sidebarSection.vue';
+
+describe('Sidebar Section', () => {
+  let wrapper;
+
+  beforeEach(function () {
+    wrapper = shallow(SidebarSection, {
+      propsData: {
+        title: 'Hello World',
+      },
+      slots: {
+        default: '<p>This is a test.</p>',
+      },
+    });
+  });
+
+  it('displays title', () => {
+    expect(wrapper.find('h3').text()).to.eq('Hello World');
+  });
+
+  it('displays contents', () => {
+    expect(wrapper.find('.section-body').find('p').text()).to.eq('This is a test.');
+  });
+
+  it('displays tooltip icon', () => {
+    expect(wrapper.contains('.section-info')).to.eq(false);
+    wrapper.setProps({tooltip: 'This is a test'});
+    expect(wrapper.contains('.section-info')).to.eq(true);
+  });
+
+  it('hides contents', () => {
+    expect(wrapper.find('.section-body').element.style.display).to.not.eq('none');
+    wrapper.find('.section-toggle').trigger('click');
+    expect(wrapper.find('.section-body').element.style.display).to.eq('none');
+    wrapper.find('.section-toggle').trigger('click');
+    expect(wrapper.find('.section-body').element.style.display).to.not.eq('none');
+  });
+
+  it('can hide contents by default', () => {
+    wrapper = shallow(SidebarSection, {
+      propsData: {
+        title: 'Hello World',
+        show: false,
+      },
+      slots: {
+        default: '<p>This is a test.</p>',
+      },
+    });
+
+    expect(wrapper.find('.section-body').element.style.display).to.eq('none');
+  });
+});
\ No newline at end of file
diff --git a/website/client/components/sidebarSection.vue b/website/client/components/sidebarSection.vue
index 24f150ef00..8eed35a28b 100644
--- a/website/client/components/sidebarSection.vue
+++ b/website/client/components/sidebarSection.vue
@@ -58,6 +58,7 @@
   import upIcon from 'assets/svg/up.svg';
   import downIcon from 'assets/svg/down.svg';
   import informationIcon from 'assets/svg/information.svg';
+  import bTooltip from 'bootstrap-vue/es/components/tooltip/tooltip';
 
   export default {
     props: {
@@ -71,6 +72,9 @@
         default: true,
       },
     },
+    components: {
+      bTooltip,
+    },
     data () {
       return {
         tooltipId: uuid(),

From 6ee21dcfa9b4052d4f037d0bf6a53a3cee53876d Mon Sep 17 00:00:00 2001
From: Marvin Rabe <marvin.rabe@gmail.com>
Date: Mon, 7 May 2018 18:29:05 +0200
Subject: [PATCH 19/19] Added category tags tests.

---
 .../components/categories/categoryTags.js     | 65 +++++++++++++++++++
 1 file changed, 65 insertions(+)
 create mode 100644 test/client/unit/specs/components/categories/categoryTags.js

diff --git a/test/client/unit/specs/components/categories/categoryTags.js b/test/client/unit/specs/components/categories/categoryTags.js
new file mode 100644
index 0000000000..a0ea2e69b7
--- /dev/null
+++ b/test/client/unit/specs/components/categories/categoryTags.js
@@ -0,0 +1,65 @@
+import {shallow} from '@vue/test-utils';
+
+import CategoryTags from 'client/components/categories/categoryTags.vue';
+
+describe('Category Tags', () => {
+  let wrapper;
+
+  beforeEach(function () {
+    wrapper = shallow(CategoryTags, {
+      propsData: {
+        categories: [],
+      },
+      slots: {
+        default: '<p>This is a slot.</p>',
+      },
+      mocks: {
+        $t: (string) => string,
+      },
+    });
+  });
+
+  it('displays a category', () => {
+    wrapper.setProps({
+      categories: [
+        {
+          name: 'test',
+        },
+      ],
+    });
+    expect(wrapper.contains('.category-label')).to.eq(true);
+    expect(wrapper.find('.category-label').text()).to.eq('test');
+  });
+
+  it('displays a habitica official in purple', () => {
+    wrapper.setProps({
+      categories: [
+        {
+          name: 'habitica_official',
+        },
+      ],
+    });
+    expect(wrapper.contains('.category-label-purple')).to.eq(true);
+    expect(wrapper.find('.category-label').text()).to.eq('habitica_official');
+  });
+
+  it('displays owner label', () => {
+    wrapper.setProps({
+      owner: true,
+    });
+    expect(wrapper.contains('.category-label-blue')).to.eq(true);
+    expect(wrapper.find('.category-label').text()).to.eq('owned');
+  });
+
+  it('displays member label', () => {
+    wrapper.setProps({
+      member: true,
+    });
+    expect(wrapper.contains('.category-label-green')).to.eq(true);
+    expect(wrapper.find('.category-label').text()).to.eq('joined');
+  });
+
+  it('displays additional content at the end', () => {
+    expect(wrapper.find('p').text()).to.eq('This is a slot.');
+  });
+});
\ No newline at end of file