Enhanced tags

src/panelWebView/components/Tag.tsx

@@ -1,6 +1,5 @@
+import { PlusIcon, XIcon } from '@heroicons/react/outline';
 import * as React from 'react';
-import { AddIcon } from './Icons/AddIcon';
-import { ArchiveIcon } from './Icons/ArchiveIcon';
 
 export interface ITagProps {
   className: string;
@@ -17,13 +16,29 @@ const Tag: React.FunctionComponent<ITagProps> = (props: React.PropsWithChildren<
   const { value, className, title, onRemove, onCreate, disableConfigurable } = props;
 
   return (
-    <div className={`article__tags__items__item`}>
-      {
-        !disableConfigurable && onCreate && 
-        <button title={`Add ${value} to your settings`} className={`article__tags__items__item_add`} onClick={() => onCreate(value)}><AddIcon /></button>
-      }
-      <button title={title} className={`article__tags__items__item_delete ${className}`} onClick={() => onRemove(value)}>{value} <span><ArchiveIcon /></span></button>
-    </div>
+    <>
+      <div className={`tag`}>
+        { 
+          !disableConfigurable && onCreate && (
+            <button 
+              className={`tag__create`}
+              title={`Add ${value} to your settings`} 
+              onClick={() => onCreate(value)}>
+              <PlusIcon style={{ width: `1rem`, height: `1rem` }} />
+            </button>
+          ) 
+        }
+        
+        <div className={`tag__value`}>{value}</div>
+
+        <button 
+          title={title} 
+          className={`tag__delete`} 
+          onClick={() => onRemove(value)}>
+          <XIcon style={{ width: `1rem`, height: `1rem` }} />
+        </button>
+      </div>
+    </>
   );
 };
 

src/panelWebView/components/Tags.tsx

@@ -28,12 +28,24 @@ const Tags: React.FunctionComponent<ITagsProps> = (props: React.PropsWithChildre
     <div className={`article__tags__items`}>
       {
         knownTags.map((t, idx) => (
-          <Tag key={generateKey(t, idx)} value={t} className={`article__tags__items__pill_exists`} onRemove={onRemove} title={`Remove ${t}`} />
+          <Tag 
+            key={generateKey(t, idx)} 
+            value={t} 
+            className={`article__tags__items__pill_exists`} 
+            onRemove={onRemove} 
+            title={`Remove ${t}`} />
         ))
       }
       {
         unknownTags.map((t, idx) => (
-          <Tag key={generateKey(t, idx)} value={t} className={`article__tags__items__pill_notexists`} onRemove={onRemove} onCreate={onCreate} title={`Be aware, this tag "${t}" is not saved in your settings. Once removed, it will be gone forever.`} disableConfigurable={disableConfigurable} />
+          <Tag 
+            key={generateKey(t, idx)} 
+            value={t} 
+            className={`article__tags__items__pill_notexists`} 
+            onRemove={onRemove} 
+            onCreate={onCreate} 
+            title={`Be aware, this tag "${t}" is not saved in your settings. Once removed, it will be gone forever.`} 
+            disableConfigurable={disableConfigurable} />
         ))
       }
     </div>

src/panelWebView/styles.css

@@ -354,6 +354,73 @@ vscode-divider {
   padding: .5rem;
 }
 
+/* Tags */
+.article__tags__items {
+  display: flex;
+  flex-flow: row wrap;
+  margin-top: 1rem;
+}
+
+.tag {
+  align-items: center;
+  background-color: var(--vscode-button-background);
+  border: 1px solid var(--vscode-button-border);
+  border-radius: 2px;
+  color: var(--vscode-button-foreground);
+  display: inline-flex;
+  font-size: 11px;
+  line-height: 16px;
+  padding: .25rem .25rem;
+  margin-bottom: .5rem;
+  margin-right: .5rem;
+}
+
+.tag button {
+  background: none;
+  border: none;
+  color: inherit;
+  outline: none !important;
+  outline-offset: inherit !important;
+  margin: 0;
+  display: inline-flex;
+  align-items: center;
+  padding: .25rem;
+}
+
+.tag .tag__create {
+  margin-right: .25rem;
+}
+
+.tag .tag__create:hover {
+  color: var(--vscode-inputValidation-infoForeground, #000);
+  background-color: var(--vscode-inputValidation-infoBackground);
+  border-radius: 2px;
+}
+
+.vscode-dark .tag .tag__create:hover {
+  color: var(--vscode-inputValidation-infoForeground, #fff);
+}
+
+.tag .tag__delete {
+  margin-left: .25rem;
+}
+
+.tag .tag__delete:hover {
+  background-color: var(--vscode-inputValidation-errorBackground);
+  color: var(--vscode-inputValidation-errorForeground, #000);
+  border-radius: 2px;
+}
+
+.vscode-dark .tag .tag__delete:hover {
+  color: var(--vscode-inputValidation-infoForeground, #fff);
+}
+
+.tag .tag__value {
+  flex-grow: 1;
+  white-space: nowrap;
+}
+
+
 /* Quill changes */
 .ql-toolbar.ql-snow,
 .ql-container.ql-snow {