From c572a821e9175c845c2f658db85ba4c8bc088748 Mon Sep 17 00:00:00 2001
From: Elio Struyf <info@estruyf.be>
Date: Tue, 20 Jul 2021 16:12:29 +0200
Subject: [PATCH] Icon updates

---
 assets/media/styles.css                | 19 ++++++++++---------
 src/viewpanel/components/Tag.tsx       |  6 ++----
 src/viewpanel/components/TagPicker.tsx |  6 ++++--
 3 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/assets/media/styles.css b/assets/media/styles.css
index 736dd20e..203b6db4 100644
--- a/assets/media/styles.css
+++ b/assets/media/styles.css
@@ -138,6 +138,7 @@
 
 .article__tags__input button {
   position: absolute;
+  bottom: 1px;
   top: 1px;
   right: 1px;
   width: 30px;
@@ -179,23 +180,23 @@
   margin-right: .5rem;
 }
 
-.article__tags__items__item_add {
-  display: inline-flex;
-  align-items: center;
-  width: auto;
+.article__tags__items__item {
+  display: inline-block;
+  margin-bottom: .5rem;
+  margin-right: .5rem;
 }
 
+.article__tags__items__item_add,
 .article__tags__items__item_delete {
-  display: inline-flex;
-  align-items: center;
+  display: inline-block;
   width: auto;
 }
 
-.article__tags__items__item_delete i {
-  margin-left: 0.5rem;
+.article__tags__items__item svg {
+  display: inline;
+  vertical-align: bottom;
 }
 
-
 .article__tags__items__item_delete span {
   margin-left: .5rem;
 }
diff --git a/src/viewpanel/components/Tag.tsx b/src/viewpanel/components/Tag.tsx
index 2f1b88c3..3646ec5e 100644
--- a/src/viewpanel/components/Tag.tsx
+++ b/src/viewpanel/components/Tag.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import AddIcon from '@material-ui/icons/Add';
 import DeleteIcon from '@material-ui/icons/Delete';
-import { Icon } from './Icon';
 
 export interface ITagProps {
   className: string;
@@ -19,10 +18,9 @@ export const Tag: React.FunctionComponent<ITagProps> = (props: React.PropsWithCh
     <div className={`article__tags__items__item`}>
       {
         onCreate && 
-        <button title={`Add ${value} to your settings`} className={`article__tags__items__item_add`} onClick={() => onCreate(value)}><Icon name="add" /></button>
+        <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} <Icon name={`archive`} /></button>
+      <button title={title} className={`article__tags__items__item_delete ${className}`} onClick={() => onRemove(value)}>{value} <span><DeleteIcon /></span></button>
     </div>
   );
 };
\ No newline at end of file
diff --git a/src/viewpanel/components/TagPicker.tsx b/src/viewpanel/components/TagPicker.tsx
index 804f8ade..26d6754d 100644
--- a/src/viewpanel/components/TagPicker.tsx
+++ b/src/viewpanel/components/TagPicker.tsx
@@ -6,6 +6,7 @@ import { TagType } from '../TagType';
 import { MessageHelper } from '../helper/MessageHelper';
 import Downshift from 'downshift';
 import LocalOfferTwoToneIcon from '@material-ui/icons/LocalOfferTwoTone';
+import { Icon } from './Icon';
 
 export interface ITagPickerProps {
   type: string;
@@ -146,10 +147,11 @@ export const TagPicker: React.FunctionComponent<ITagPickerProps> = (props: React
                 
                 {
                   freeform && (
-                    <button title={`Add the unknown tag`}
+                    <button className={`article__tags__input__button`}
+                            title={`Add the unknown tag`}
                             disabled={!inputValue} 
                             onClick={() => insertUnkownTag(closeMenu)}>
-                      <LocalOfferTwoToneIcon />
+                      <Icon name="tag" />
                     </button>
                   )
                 }