Inventory: fixes / layout (#11948)

Co-authored-by: Sabe Jones <sabrecat@gmail.com>

website/client/src/components/shared/closeIcon.vue

@@ -0,0 +1,53 @@
+<template>
+  <button title="close dialog"
+          @click="$emit('click', $event)">
+    <div v-once
+         class="svg-icon"
+         v-html="icons.close"
+    ></div>
+  </button>
+</template>
+
+<script>
+import svgClose from '@/assets/svg/close.svg';
+
+export default {
+  name: 'closeIcon',
+  data () {
+    return {
+      icons: Object.freeze({
+        close: svgClose,
+      }),
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+  @import '~@/assets/scss/colors.scss';
+
+  button {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    cursor: pointer;
+    opacity: 1;
+
+    border: 0;
+    outline: 0;
+    padding: 0.125rem;
+    background: transparent;
+    width: 1rem;
+    height: 1rem;
+
+    ::v-deep svg path {
+      stroke: $gray-200;
+    }
+
+    &:hover {
+      ::v-deep svg path {
+        stroke: $gray-100;
+      }
+    }
+  }
+</style>

website/client/src/components/shared/inventoryDrawer.vue

@@ -1,12 +1,23 @@
 <template>
   <drawer
     class="inventoryDrawer"
-    :title="$t('quickInventory')"
+    :no-title-bottom-padding="true"
     :error-message="inventoryDrawerErrorMessage(selectedDrawerItemType)"
+    ref="drawer"
   >
+    <div slot="drawer-title-row" class="title-row-tabs">
+      <div class="drawer-tab" v-for="(tab, index) of filteredTabs"
+           :key="tab.key">
+        <a
+          class="drawer-tab-text"
+          :class="{'drawer-tab-text-active': filteredTabs[selectedDrawerTab].key === tab.key}"
+          @click.prevent.stop="tabSelected(index); $refs.drawer.open();"
+        >{{ tab.label }}</a>
+      </div>
+    </div>
     <div slot="drawer-header">
       <drawer-header-tabs
-        :tabs="filteredTabs"
+        :tabs="[]"
         @changedPosition="tabSelected($event)"
       >
         <div slot="right-item">
@@ -15,7 +26,7 @@
             id="petLikeToEatMarket"
             class="drawer-help-text"
           >
-            {{ $t('petLikeToEat') + ' ' }}
+            <span>{{ $t('petLikeToEat') + ' ' }}</span>
             <span
               class="svg-icon inline icon-16"
               v-html="icons.information"
@@ -178,5 +189,28 @@ export default {
     .drawer-slider {
       height: 126px;
     }
+
+    .drawer-tab-text {
+      display: inline-block;
+    }
+
+    .drawer-help-text {
+      display: flex;
+      margin-top: 0.65rem;
+
+      .svg-icon {
+        position: inherit;
+        top: 0;
+      }
+    }
+
+    .title-row-tabs {
+      display: flex;
+      justify-content: center;
+
+      .drawer-tab {
+        background: transparent;
+      }
+    }
   }
 </style>