From c986860a42b6b8c6e15e4825c298f9050431115c Mon Sep 17 00:00:00 2001
From: Ajay <dev@ajay.app>
Date: Thu, 13 Jan 2022 22:55:08 -0500
Subject: [PATCH] Add close button to category pill

---
 public/content.css                       | 13 +++++++++++++
 src/components/CategoryPillComponent.tsx |  6 ++++++
 2 files changed, 19 insertions(+)

diff --git a/public/content.css b/public/content.css
index 4c15212e..35b82766 100644
--- a/public/content.css
+++ b/public/content.css
@@ -633,4 +633,17 @@ input::-webkit-inner-spin-button {
 .sponsorBlockCategoryPillTitleSection {
 	display: flex;
 	align-items: center;
+}
+
+.categoryPillClose {
+	display: none;
+	height: 10px;
+	width: 10px;
+	box-sizing: unset;
+	
+	margin: 0px 0px 0px 5px;
+}
+
+.sponsorBlockCategoryPill:hover .categoryPillClose {
+	display: inherit;
 }
\ No newline at end of file
diff --git a/src/components/CategoryPillComponent.tsx b/src/components/CategoryPillComponent.tsx
index 6c7e0437..eae106fd 100644
--- a/src/components/CategoryPillComponent.tsx
+++ b/src/components/CategoryPillComponent.tsx
@@ -72,6 +72,12 @@ class CategoryPillComponent extends React.Component<CategoryPillProps, CategoryP
                         </div>
                     </>
                 )}
+
+                {/* Close Button */}
+                <img src={chrome.extension.getURL("icons/close.png")}
+                    className="categoryPillClose"
+                    onClick={() => this.setState({ show: false })}>
+                </img>
             </span>
         );
     }