From 02091dddb73a9bc64fed11e211b260ee3c88b4e2 Mon Sep 17 00:00:00 2001
From: lana-k <skochetova89@gmail.com>
Date: Tue, 22 Dec 2020 16:30:14 +0100
Subject: [PATCH] use close icon component in Tabs

---
 src/components/Tabs.vue      | 22 ++++------------------
 src/components/svg/close.vue | 26 ++++++++++++++++++++++----
 2 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/src/components/Tabs.vue b/src/components/Tabs.vue
index d84a64a..2d940df 100644
--- a/src/components/Tabs.vue
+++ b/src/components/Tabs.vue
@@ -13,19 +13,7 @@
           <span v-else class="tab-untitled">{{ tab.tempName }}</span>
         </div>
         <div>
-          <svg
-            class="close-icon"
-            @click.stop="closeTab(index)"
-            width="10"
-            height="10"
-            viewBox="0 0 14 14"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z"
-              fill="#A2B1C6"/>
-          </svg>
+          <close-icon class="close-icon" :size="10" @click="closeTab(index)"/>
         </div>
       </div>
     </div>
@@ -49,10 +37,12 @@
 
 <script>
 import Tab from '@/components/Tab'
+import CloseIcon from '@/components/svg/close'
 
 export default {
   components: {
-    Tab
+    Tab,
+    CloseIcon
   },
   data () {
     return {
@@ -130,10 +120,6 @@ export default {
   margin-left: 5px;
 }
 
-.close-icon:hover path {
-  fill: var(--color-text-base);
-  cursor: pointer;
-}
 #start-guide {
   position: absolute;
   top: 50%;
diff --git a/src/components/svg/close.vue b/src/components/svg/close.vue
index a068cbe..3606bbf 100644
--- a/src/components/svg/close.vue
+++ b/src/components/svg/close.vue
@@ -1,12 +1,30 @@
 <template>
-  <svg @click.stop="$emit('click')" class="icon" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z" fill="#A2B1C6"/>
+  <svg
+    @click.stop="$emit('click')"
+    class="icon"
+    :width="size"
+    :height="size"
+    viewBox="0 0 14 14"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z"
+      fill="#A2B1C6"
+    />
   </svg>
 </template>
 
 <script>
 export default {
-  name: 'CloseIcon'
+  name: 'CloseIcon',
+  props: {
+    size: {
+      type: Number,
+      required: false,
+      default: 14
+    }
+  }
 }
 </script>
 
@@ -15,6 +33,6 @@ export default {
   cursor: pointer;
 }
 .icon:hover path {
-  fill: var(--color-text-active);
+  fill: var(--color-text-base);
 }
 </style>