Fix Incorrect Heading margins (#9311)

* fix(style): Fix margin of headers in inventory page

Set the `mb-0` class in h1 header to `mb-4`.
Set the class if `h2` header to `mb-3`.

* fix(style): Fix margin of headers in shops section

Set the `mb-0` class in h1 header to `mb-4`.
Set the class of `h2` header to `mb-3`.

* fix(style): Fix margin of headers in shops adn time traveler section

Set the `mb-0` class in h1 header to `mb-4`.
Set the class of `h2` header to `mb-3`.

website/client/components/inventory/equipment/index.vue

@@ -19,7 +19,7 @@
 
   .standard-page
     .clearfix
-      h1.float-left.mb-0.page-header(v-once) {{ $t('equipment') }}
+      h1.float-left.mb-4.page-header(v-once) {{ $t('equipment') }}
       .float-right
         span.dropdown-label {{ $t('sortBy') }}
         b-dropdown(:text="$t(selectedSortGearBy)", right=true)
@@ -93,7 +93,7 @@
       :key="group.key",
       :class='group.key',
     )
-      h2
+      h2.mb-3
        | {{ group.label }}
        |
        span.badge.badge-pill.badge-default {{items[group.key].length}}

website/client/components/inventory/items/index.vue

@@ -18,7 +18,7 @@
             span.custom-control-description(v-once) {{ $t(group.key) }}
   .standard-page
     .clearfix
-      h1.float-left.mb-0.page-header(v-once) {{ $t('items') }}
+      h1.float-left.mb-4.page-header(v-once) {{ $t('items') }}
       .float-right
         span.dropdown-label {{ $t('sortBy') }}
         b-dropdown(:text="$t(sortBy)", right=true)
@@ -29,7 +29,7 @@
       v-if="group.selected",
       :key="group.key",
     )
-      h2
+      h2.mb-3
        | {{ $t(group.key) }}
        |
        span.badge.badge-pill.badge-default(v-if="group.key != 'special'") {{group.quantity}}

website/client/components/inventory/stable/index.vue

@@ -56,7 +56,7 @@
 
     .standard-page.col-12.col-sm-9
       .clearfix
-        h1.float-left.mb-0.page-header(v-once) {{ $t('stable') }}
+        h1.float-left.mb-4.page-header(v-once) {{ $t('stable') }}
 
         div.float-right
           span.dropdown-label {{ $t('sortBy') }}
@@ -68,7 +68,7 @@
               :key="sort"
             ) {{ $t(sort) }}
 
-      h2
+      h2.mb-3
         | {{ $t('pets') }}
         |
         span.badge.badge-pill.badge-default {{countOwnedAnimals(petGroups[0], 'pet')}}

website/client/components/shops/market/index.vue

@@ -60,10 +60,10 @@
                   )
                     span.svg-icon.inline.icon-12.color(v-html="icons.pin")
 
-      h1.mb-0.page-header(v-once) {{ $t('market') }}
+      h1.mb-4.page-header(v-once) {{ $t('market') }}
 
       .clearfix
-        h2.float-left
+        h2.float-left.mb-3
           | {{ $t('equipment') }}
 
         div.float-right
@@ -118,7 +118,7 @@
                 span.svg-icon.inline.icon-12.color(v-html="icons.pin")
 
       .clearfix
-        h2.float-left
+        h2.float-left.mb-3
           | {{ $t('items') }}
 
         div.float-right

website/client/components/shops/quests/index.vue

@@ -67,7 +67,7 @@
                     span.svg-icon.inline.icon-12.color(v-html="icons.pin")
 
 
-      h1.mb-0.page-header(v-once) {{ $t('quests') }}
+      h1.mb-4.page-header(v-once) {{ $t('quests') }}
 
       .clearfix
         div.float-right
@@ -85,7 +85,7 @@
         v-for="category in categories",
         v-if="viewOptions[category.identifier].selected"
       )
-        h2 {{ category.text }}
+        h2.mb-3 {{ category.text }}
 
         itemRows(
           v-if="category.identifier === 'pet'",

website/client/components/shops/seasonal/index.vue

@@ -57,10 +57,10 @@
                 @click="itemSelected(item)"
               )
 
-      h1.mb-0.page-header(v-once, v-if='seasonal.opened') {{ $t('seasonalShop') }}
+      h1.mb-4.page-header(v-once, v-if='seasonal.opened') {{ $t('seasonalShop') }}
 
       .clearfix(v-if="seasonal.opened")
-        h2.float-left
+        h2.float-left.mb-3
           | {{ $t('classArmor') }}
 
         div.float-right

website/client/components/shops/timeTravelers/index.vue

@@ -36,7 +36,7 @@
               span.text(v-once) {{ $t('timeTravelersPopoverNoSubMobile') }}
               span.rectangle
 
-      h1.mb-0.page-header(v-once) {{ $t('timeTravelers') }}
+      h1.mb-4.page-header(v-once) {{ $t('timeTravelers') }}
 
       .clearfix(v-if="!closed")
         div.float-right
@@ -55,7 +55,7 @@
         v-if="!closed && viewOptions[category.identifier].selected",
         :class="category.identifier"
       )
-        h2 {{ category.text }}
+        h2.mb-3 {{ category.text }}
 
         itemRows(
           :items="travelersItems(category, selectedSortItemsBy, searchTextThrottled, hidePinned)",