feat: history section

components/smart/ConfirmModal.vue

@@ -43,6 +43,7 @@ export default {
     },
     resolve() {
       this.$emit("resolve")
+      this.$emit("hide-modal")
     },
   },
 }

components/smart/Tab.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-show="isActive">
+  <div v-show="active">
     <slot></slot>
   </div>
 </template>
@@ -18,18 +18,12 @@ export default {
 
   data() {
     return {
-      isActive: false,
+      active: false,
     }
   },
 
-  // computed: {
-  //   href() {
-  //     return `#${this.label.toLowerCase().replace(/ /g, "-")}`
-  //   },
-  // },
-
   mounted() {
-    this.isActive = this.selected
+    this.active = this.selected
   },
 }
 </script>

components/smart/Tabs.vue

@@ -1,13 +1,13 @@
 <template>
-  <div class="tabs-wrapper bg-blue-300">
-    <div class="tabs" :class="styles">
+  <div class="flex flex-col flex-nowrap relative flex-1">
+    <div class="tabs hide-scrollbar" :class="styles">
       <div class="flex w-0">
         <div class="inline-flex">
           <button
             v-for="(tab, index) in tabs"
             :key="index"
             class="tab"
-            :class="{ 'is-active': tab.isActive }"
+            :class="{ active: tab.active }"
             :tabindex="0"
             @keyup.enter="selectTab(tab)"
             @click="selectTab(tab)"
@@ -20,7 +20,7 @@
         </div>
       </div>
     </div>
-    <div class="tabs-details">
+    <div>
       <slot></slot>
     </div>
   </div>
@@ -48,7 +48,7 @@ export default {
   methods: {
     selectTab({ id }) {
       this.tabs.forEach((tab) => {
-        tab.isActive = tab.id === id
+        tab.active = tab.id === id
       })
       this.$emit("tab-changed", id)
     },
@@ -57,47 +57,61 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.tabs-wrapper {
+.tabs {
   @apply flex;
-  @apply flex-col;
-  @apply flex-nowrap;
   @apply flex-1;
+  @apply whitespace-nowrap;
+  @apply overflow-auto;
+  @apply bg-primary;
 
-  .tabs {
+  &::after {
+    @apply absolute;
+    @apply inset-x-0;
+    @apply bottom-0;
+    @apply bg-dividerLight;
+    @apply z-1;
+    @apply h-0.5;
+
+    content: "";
+  }
+
+  .tab {
     @apply flex;
-    @apply flex-1;
-    @apply whitespace-nowrap;
-    @apply overflow-auto;
+    @apply items-center;
+    @apply justify-center;
+    @apply px-4;
+    @apply py-3;
+    @apply text-secondary;
+    @apply font-semibold;
+    @apply text-xs;
+    @apply cursor-pointer;
+    @apply transition;
+    @apply hover:text-secondaryDark;
+    @apply focus:text-secondaryDark;
+    @apply focus:outline-none;
+    @apply relative;
 
-    .tab {
-      @apply flex;
-      @apply items-center;
-      @apply justify-center;
-      @apply px-4;
-      @apply py-2;
-      @apply text-secondaryLight;
-      @apply font-semibold;
-      @apply text-xs;
-      @apply cursor-pointer;
-      @apply transition;
-      @apply border-b-2;
-      @apply border-transparent;
-      @apply rounded-t-lg;
+    &::after {
+      @apply absolute;
+      @apply inset-x-0;
+      @apply bottom-0;
+      @apply bg-dividerLight;
+      @apply z-2;
+      @apply h-0.5;
 
-      .material-icons {
-        @apply mr-4;
-      }
+      content: "";
+    }
 
-      &:hover {
-        @apply text-secondaryDark;
-      }
-      &:focus {
-        @apply text-secondaryDark;
-        @apply outline-none;
-      }
-      &.is-active {
-        @apply text-accent;
-        @apply border-accent;
+    .material-icons {
+      @apply mr-4;
+    }
+
+    &.active {
+      @apply text-accent;
+      @apply border-accent;
+
+      &::after {
+        @apply bg-accent;
       }
     }
   }

components/smart/__tests__/Tab.spec.js

@@ -61,7 +61,7 @@ describe("tab", () => {
         selected: true,
       },
       {
-        isActive: true,
+        active: true,
       }
     )
 
@@ -76,7 +76,7 @@ describe("tab", () => {
         id: "testid",
       },
       {
-        isActive: false,
+        active: false,
       }
     )
 

components/smart/__tests__/Tabs.spec.js

@@ -50,7 +50,7 @@ describe("tabs", () => {
     wrapper.vm.selectTab({ id: "tab2" })
     await wrapper.vm.$nextTick()
 
-    expect(wrapper.vm.$data.tabs[1].$data.isActive).toEqual(true)
+    expect(wrapper.vm.$data.tabs[1].$data.active).toEqual(true)
   })
 
   test("switched tab page is rendered and the other page is not rendered", async () => {
@@ -60,8 +60,8 @@ describe("tabs", () => {
     wrapper.vm.selectTab({ id: "tab2" })
     await wrapper.vm.$nextTick()
 
-    expect(wrapper.vm.$data.tabs[0].$data.isActive).toEqual(false)
-    expect(wrapper.vm.$data.tabs[1].$data.isActive).toEqual(true)
-    expect(wrapper.vm.$data.tabs[2].$data.isActive).toEqual(false)
+    expect(wrapper.vm.$data.tabs[0].$data.active).toEqual(false)
+    expect(wrapper.vm.$data.tabs[1].$data.active).toEqual(true)
+    expect(wrapper.vm.$data.tabs[2].$data.active).toEqual(false)
   })
 })