From 90cc806e1564a9ade6a6e359883df766c3c8b24f Mon Sep 17 00:00:00 2001
From: Antonella Sgarlatta <antonella@standardnotes.org>
Date: Wed, 26 May 2021 16:32:29 -0300
Subject: [PATCH] feat: highlight tag on click

---
 .../components/AutocompleteTagInput.tsx          |  8 ++++++--
 app/assets/javascripts/components/NoteTags.tsx   | 10 ++++++++--
 app/assets/javascripts/components/Tag.tsx        | 16 ----------------
 app/assets/stylesheets/_sn.scss                  |  8 ++++++++
 4 files changed, 22 insertions(+), 20 deletions(-)
 delete mode 100644 app/assets/javascripts/components/Tag.tsx

diff --git a/app/assets/javascripts/components/AutocompleteTagInput.tsx b/app/assets/javascripts/components/AutocompleteTagInput.tsx
index d4469d64c..9ae7e7ca5 100644
--- a/app/assets/javascripts/components/AutocompleteTagInput.tsx
+++ b/app/assets/javascripts/components/AutocompleteTagInput.tsx
@@ -6,7 +6,6 @@ import { Icon } from './Icon';
 import { Disclosure, DisclosurePanel } from '@reach/disclosure';
 import { useCloseOnBlur } from './utils';
 import { AppState } from '@/ui_models/app_state';
-import { Tag } from './Tag';
 
 type Props = {
   application: WebApplication;
@@ -142,7 +141,12 @@ export const AutocompleteTagInput: FunctionalComponent<Props> = ({
                   <span>
                     Create new tag:
                   </span>
-                  <Tag title={searchQuery} className="ml-2" />
+                  <span
+                    className="bg-contrast rounded text-xs color-text p-1 flex ml-2"
+                  >
+                    <Icon type="hashtag" className="sn-icon--small color-neutral mr-1" />
+                    {searchQuery}
+                  </span>
                 </button>
               </>
             )}
diff --git a/app/assets/javascripts/components/NoteTags.tsx b/app/assets/javascripts/components/NoteTags.tsx
index f91bcc509..2c32909cc 100644
--- a/app/assets/javascripts/components/NoteTags.tsx
+++ b/app/assets/javascripts/components/NoteTags.tsx
@@ -1,7 +1,7 @@
 import { AppState } from '@/ui_models/app_state';
 import { observer } from 'mobx-react-lite';
 import { toDirective } from './utils';
-import { Tag } from './Tag';
+import { Icon } from './Icon';
 import { AutocompleteTagInput } from './AutocompleteTagInput';
 import { WebApplication } from '@/ui_models/application';
 
@@ -14,7 +14,13 @@ const NoteTags = observer(({ application, appState }: Props) => {
   return (
     <div className="flex flex-wrap">
       {appState.notes.activeNoteTags.map((tag) => (
-        <Tag key={tag.uuid} title={tag.title} className="mt-2 mr-2" />
+        <button
+          className={`bg-contrast border-0 rounded text-xs color-text p-1 flex items-center 
+            mt-2 mr-2 cursor-pointer hover:bg-secondary-contrast focus:bg-secondary-contrast`}
+        >
+          <Icon type="hashtag" className="sn-icon--small color-neutral mr-1" />
+          {tag.title}
+        </button>
       ))}
       <AutocompleteTagInput application={application} appState={appState} />
     </div>
diff --git a/app/assets/javascripts/components/Tag.tsx b/app/assets/javascripts/components/Tag.tsx
deleted file mode 100644
index 37b370056..000000000
--- a/app/assets/javascripts/components/Tag.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { FunctionalComponent } from 'preact';
-import { Icon } from './Icon';
-
-type TagProps = {
-  title: string;
-  className?: string;
-};
-
-export const Tag: FunctionalComponent<TagProps> = ({ title, className }) => (
-  <span
-    className={`bg-contrast rounded text-xs color-text p-1 flex items-center ${className ?? ''}`}
-  >
-    <Icon type="hashtag" className="sn-icon--small color-neutral mr-1" />
-    {title}
-  </span>
-);
diff --git a/app/assets/stylesheets/_sn.scss b/app/assets/stylesheets/_sn.scss
index c819eca91..839edf5cf 100644
--- a/app/assets/stylesheets/_sn.scss
+++ b/app/assets/stylesheets/_sn.scss
@@ -102,6 +102,14 @@
   @extend .color-text;
 }
 
+.hover\:bg-secondary-contrast:hover {
+  @extend .bg-secondary-contrast;
+}
+
+.focus\:bg-secondary-contrast:focus {
+  @extend .bg-secondary-contrast;
+}
+
 .focus\:inner-ring-info:focus {
   @extend .inner-ring-info;
 }