From 9f960a2af4e00510039871fda1f18e8087831544 Mon Sep 17 00:00:00 2001
From: lukas <lukas.heiligenbrunner@gmail.com>
Date: Wed, 3 Mar 2021 22:02:08 +0100
Subject: [PATCH] show a span on tag hover to delete it maybe

---
 src/elements/Tag/Tag.module.css | 26 ++++++++++++++++++++++----
 src/elements/Tag/Tag.tsx        | 11 +++++++----
 2 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/src/elements/Tag/Tag.module.css b/src/elements/Tag/Tag.module.css
index 4e5ef59..c8b3586 100644
--- a/src/elements/Tag/Tag.module.css
+++ b/src/elements/Tag/Tag.module.css
@@ -1,19 +1,37 @@
-.tagbtn {
-    background-color: #3574fe;
+.btnnostyle {
+    background: none;
+    color: inherit;
     border: none;
+    padding: 0;
+    font: inherit;
+    cursor: pointer;
+    outline: inherit;
+}
+
+.tagbtnContainer {
+    background-color: #3574fe;
     border-radius: 10px;
     color: white;
     margin-left: 10px;
     margin-top: 15px;
+    width: 50px;
     /*font-weight: bold;*/
     padding: 5px 15px 5px 15px;
 }
 
-.tagbtn:focus {
+.tagbtnContainer:focus {
     background-color: #004eff;
     outline: none;
 }
 
-.tagbtn:hover {
+.tagbtnContainer:hover {
     background-color: #004eff;
 }
+
+.deletebtn{
+    display: none;
+}
+
+.tagbtnContainer:hover .deletebtn {
+    display: inline;
+}
diff --git a/src/elements/Tag/Tag.tsx b/src/elements/Tag/Tag.tsx
index c73e886..480b80f 100644
--- a/src/elements/Tag/Tag.tsx
+++ b/src/elements/Tag/Tag.tsx
@@ -42,10 +42,13 @@ class Tag extends React.Component<props, state> {
 
     renderButton(): JSX.Element {
         return (
-            <button className={styles.tagbtn}
-                    onClick={(): void => this.TagClick()}
-                    onContextMenu={this.contextmenu}
-                    data-testid='Test-Tag'>{this.props.tagInfo.TagName}</button>
+            <span className={styles.tagbtnContainer}>
+                <button className={styles.btnnostyle}
+                        onClick={(): void => this.TagClick()}
+                        onContextMenu={this.contextmenu}
+                        data-testid='Test-Tag'>{this.props.tagInfo.TagName}</button>
+                <span className={styles.deletebtn}>X</span>
+            </span>
         );
     }