From 88c625fe80afe605ee4d8be7cb56edcab88e6af5 Mon Sep 17 00:00:00 2001
From: Brian Fenton <brian@brianfenton.us>
Date: Fri, 15 Jun 2018 03:58:28 -0500
Subject: [PATCH] removing the 24px top margin on .modal-dialog .title (#10377)

* removing the 24px top margin on .modal-dialog .title so boss HP and difficulty line up

* stop overloading title so much and use a properly-scoped style

* removing unnecessary temp vars

* using SCSS color vars as per CR

* using relative font size measurements instead of absolute pixels, and adding popover override CSS to not break quest shop & invite notifications

* removing redundant font declarations
---
 .../header/notifications/questInvitation.vue  |  8 ++---
 .../components/shops/quests/questInfo.vue     | 31 +++++++++++++------
 2 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/website/client/components/header/notifications/questInvitation.vue b/website/client/components/header/notifications/questInvitation.vue
index ce8e6b9106..506e1e4cf2 100644
--- a/website/client/components/header/notifications/questInvitation.vue
+++ b/website/client/components/header/notifications/questInvitation.vue
@@ -45,19 +45,17 @@ export default {
       this.$router.push({ name: 'party' });
     },
     async questAccept () {
-      let quest = await this.$store.dispatch('quests:sendAction', {
+      this.user.party.quest = await this.$store.dispatch('quests:sendAction', {
         groupId: this.notification.data.partyId,
         action: 'quests/accept',
       });
-      this.user.party.quest = quest;
     },
     async questReject () {
-      let quest = await this.$store.dispatch('quests:sendAction', {
+      this.user.party.quest = await this.$store.dispatch('quests:sendAction', {
         groupId: this.notification.data.partyId,
         action: 'quests/reject',
       });
-      this.user.party.quest = quest;
     },
   },
 };
-</script>
\ No newline at end of file
+</script>
diff --git a/website/client/components/shops/quests/questInfo.vue b/website/client/components/shops/quests/questInfo.vue
index 0cab52200b..a395eca04e 100644
--- a/website/client/components/shops/quests/questInfo.vue
+++ b/website/client/components/shops/quests/questInfo.vue
@@ -1,17 +1,18 @@
 <template lang="pug">
 .row(:class="{'small-version': smallVersion}")
+  dl
   template(v-if="quest.collect")
-    span.title(:class="smallVersion ? 'col-3' : 'col-4'") {{ $t('collect') + ':' }}
-    span.col-8
+    dt(:class="smallVersion ? 'col-3' : 'col-4'") {{ $t('collect') + ':' }}
+    dd.col-8
       div(v-for="(collect, key) of quest.collect")
         span {{ collect.count }} {{ getCollectText(collect) }}
 
   template(v-if="quest.boss")
-    span.title(:class="smallVersion ? 'col-3' : 'col-4'") {{ $t('bossHP') + ':' }}
-    span.col-8 {{ quest.boss.hp }}
+    dt(:class="smallVersion ? 'col-3' : 'col-4'") {{ $t('bossHP') + ':' }}
+    dd.col-8 {{ quest.boss.hp }}
 
-  span.title(:class="smallVersion ? 'col-3' : 'col-4'") {{ $t('difficulty') + ':' }}
-  span.col-8
+  dt(:class="smallVersion ? 'col-3' : 'col-4'") {{ $t('difficulty') + ':' }}
+  dd.col-8
     .svg-icon.inline(
       v-for="star of stars()", v-html="icons[star]",
       :class="smallVersion ? 'icon-12' : 'icon-16'",
@@ -21,10 +22,10 @@
 <style lang="scss" scoped>
 @import '~client/assets/scss/colors.scss';
 
-.title {
-  text-align: left;
-  font-weight: bold;
-  white-space: nowrap;
+dt {
+  font-size: 1.3em;
+  line-height: 1.2;
+  color: $gray-50;
 }
 
 .col-8 {
@@ -49,6 +50,16 @@
 }
 </style>
 
+<style lang="scss">
+.questPopover {
+  dt {
+    color: inherit;
+    font-size: 1em;
+    white-space: nowrap;
+  }
+}
+</style>
+
 <script>
   import svgStar from 'assets/svg/difficulty-star.svg';
   import svgStarHalf from 'assets/svg/difficulty-star-half.svg';