From 976a473d39bcb751d7991d4e9dcb97bb2d9fb90f Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Fri, 11 Dec 2020 10:10:14 +0100
Subject: [PATCH] Added a new tag icon instead of the `+`

---
 assets/media/styles.css                | 2 ++
 src/viewpanel/components/Tag.tsx       | 4 ++--
 src/viewpanel/components/TagPicker.tsx | 5 ++++-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/assets/media/styles.css b/assets/media/styles.css
index 973a3ea9..df2a9242 100644
--- a/assets/media/styles.css
+++ b/assets/media/styles.css
@@ -121,6 +121,8 @@
   top: 1px;
   right: 1px;
   width: 30px;
+  padding-bottom: 2px; 
+  padding-top: 2px;
 }
 
 .article__tags ul {
diff --git a/src/viewpanel/components/Tag.tsx b/src/viewpanel/components/Tag.tsx
index 3646ec5e..180aefe2 100644
--- a/src/viewpanel/components/Tag.tsx
+++ b/src/viewpanel/components/Tag.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import AddIcon from '@material-ui/icons/Add';
-import DeleteIcon from '@material-ui/icons/Delete';
+import DeleteForeverTwoToneIcon from '@material-ui/icons/DeleteForeverTwoTone';
 
 export interface ITagProps {
   className: string;
@@ -20,7 +20,7 @@ export const Tag: React.FunctionComponent<ITagProps> = (props: React.PropsWithCh
         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><DeleteIcon /></span></button>
+      <button title={title} className={`article__tags__items__item_delete ${className}`} onClick={() => onRemove(value)}>{value} <span><DeleteForeverTwoToneIcon /></span></button>
     </div>
   );
 };
\ No newline at end of file
diff --git a/src/viewpanel/components/TagPicker.tsx b/src/viewpanel/components/TagPicker.tsx
index bf6d8551..c6a4f58c 100644
--- a/src/viewpanel/components/TagPicker.tsx
+++ b/src/viewpanel/components/TagPicker.tsx
@@ -5,6 +5,7 @@ import { CommandToCode } from '../CommandToCode';
 import { TagType } from '../TagType';
 import { MessageHelper } from '../helper/MessageHelper';
 import Downshift from 'downshift';
+import LocalOfferTwoToneIcon from '@material-ui/icons/LocalOfferTwoTone';
 
 export interface ITagPickerProps {
   type: string;
@@ -146,7 +147,9 @@ export const TagPicker: React.FunctionComponent<ITagPickerProps> = (props: React
                   freeform && (
                     <button title={`Add the unknown tag`}
                             disabled={!inputValue} 
-                            onClick={() => insertUnkownTag(closeMenu)}>+</button>
+                            onClick={() => insertUnkownTag(closeMenu)}>
+                      <LocalOfferTwoToneIcon />
+                    </button>
                   )
                 }
               </div>