@eturnity/eturnity_reusable_components 1.0.72 → 1.0.73

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.0.72",
+  "version": "1.0.73",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/App.vue

@@ -7,7 +7,6 @@
             <th>Column 1</th>
             <th>Column 2</th>
             <th>Column 3</th>
-            <th>Column 4</th>
             <div />
           </tr>
         </thead>
@@ -37,6 +36,9 @@
           :disabled="true"
         />
       </input-wrapper>
+      <br />
+      <br />
+      <delete-icon />
     </page-container>
   </ThemeProvider>
 </template>
@@ -48,6 +50,7 @@ import styled from "vue-styled-components"
 import MainTable from "@/components/tables/mainTable"
 import ThreeDots from "@/components/threeDots"
 import InputNumber from "@/components/inputs/inputNumber"
+import DeleteIcon from "@/components/deleteIcon"
 
 const PageContainer = styled.div`
   padding: 40px;
@@ -67,6 +70,7 @@ export default {
     ThreeDots,
     InputNumber,
     InputWrapper,
+    DeleteIcon,
   },
   data() {
     return {

package/src/assets/icons/delete_icon.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="5 5 30 30">
   <defs>
     <style>
       .cls-1 {

package/src/assets/icons/delete_icon_gray.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="5 5 30 30">
   <defs>
     <style>
       .cls-1 {

package/src/components/deleteIcon/index.vue

@@ -1,55 +1,44 @@
 <template>
-  <wrapper>
-    <icon :color="color" />
+  <wrapper @mouseover="isHovered = true" @mouseleave="isHovered = false">
+    <icon-image
+      v-if="isHovered"
+      :src="require('../../assets/icons/delete_icon.svg')"
+    />
+    <icon-image
+      v-else
+      :src="require('../../assets/icons/delete_icon_gray.svg')"
+    />
   </wrapper>
 </template>
 
 <script>
 // To use:
-// <delete-icon
-//   color="gray" // red is default
-// />
+// <delete-icon />
 import styled from "vue-styled-components"
 
 const Wrapper = styled.div`
-  width: 100%;
-  height: 100%;
-  min-height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`
-
-const iconAttrs = { color: String }
-const Icon = styled("span", iconAttrs)`
   width: 30px;
   height: 30px;
-  background-position: center;
   cursor: pointer;
-  background-image: ${(props) =>
-    props.color === "red"
-      ? `url(${require("../../assets/icons/delete_icon.svg")})`
-      : props.color === "gray"
-      ? `url(${require("../../assets/icons/delete_icon_gray.svg")})`
-      : `url(${require("../../assets/icons/delete_icon.svg")})`};
+`
 
+const IconImage = styled.img`
   &:hover {
-    background-image: ${() =>
-      `url(${require("../../assets/icons/delete_icon.svg")})`};
+    background-color: ${(props) => props.theme.colors.grey5};
+    border-radius: 4px;
   }
 `
 
 export default {
   name: "delete-icon",
   components: {
-    Icon,
     Wrapper,
+    IconImage,
   },
-  props: {
-    color: {
-      required: false,
-      default: "red", // red, gray
-    },
+  data() {
+    return {
+      isHovered: false,
+    }
   },
 }
 </script>

package/src/components/threeDots/index.vue

@@ -116,6 +116,14 @@ import Spinner from "../spinner"
 const PageContainer = styled.div`
   display: grid;
   align-items: center;
+  justify-items: center;
+  width: 30px;
+  height: 30px;
+
+  &:hover {
+    background-color: ${(props) => props.theme.colors.grey5};
+    border-radius: 4px;
+  }
 `
 
 const ButtonContainer = styled.div`
@@ -128,13 +136,6 @@ const ButtonContainer = styled.div`
     // This is the dot color
     background-color: #263238;
   }
-
-  &:hover {
-    div {
-      // Dot color on hover
-      background-color: ${(props) => props.theme.colors.grey3};
-    }
-  }
 `
 
 const DotItem = styled.div`