From d1267f064180187d1bca6bfb434442a182b6437c Mon Sep 17 00:00:00 2001
From: Rainer Simon <rainer.simon@ait.ac.at>
Date: Wed, 29 Apr 2020 08:30:59 +0200
Subject: [PATCH] Replaced comment arrow and tag delete icons with inline SVG

---
 src/Icons.js                                  | 26 +++++++++++++++++++
 src/editor/widgets/comment/Comment.jsx        |  5 +++-
 src/editor/widgets/tag/TagWidget.jsx          |  3 ++-
 .../editor/widgets/comment/_comment.scss      | 18 ++++---------
 themes/default/editor/widgets/tag/_tag.scss   |  7 ++++-
 5 files changed, 43 insertions(+), 16 deletions(-)
 create mode 100644 src/Icons.js

diff --git a/src/Icons.js b/src/Icons.js
new file mode 100644
index 0000000..bee9ec7
--- /dev/null
+++ b/src/Icons.js
@@ -0,0 +1,26 @@
+import React from 'react';
+
+/**
+ * Icons from IcoFont https://icofont.com/, licensed under the CC BY 4.0 license.
+ */
+export const ChevronDown = props => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 940 940" width={props.width}>
+      <metadata>IcoFont Icons</metadata>
+      <title>simple-down</title>
+      <glyph glyphName="simple-down" unicode="&#xeab2;" horizAdvX="1000" />
+      <path fill="currentColor" d="M200 392.6l300 300 300-300-85.10000000000002-85.10000000000002-214.89999999999998 214.79999999999995-214.89999999999998-214.89999999999998-85.10000000000002 85.20000000000005z" />
+    </svg>
+  )
+}
+
+export const Close = props => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="180 150 700 800" width={props.width}>
+      <metadata>IcoFont Icons</metadata>
+      <title>close</title>
+      <glyph glyphName="close" unicode="&#xeee4;" horizAdvX="1000" />
+      <path fill="currentColor" d="M709.8 206.6c-64.39999999999998 65.50000000000003-128.89999999999998 131.20000000000002-194.19999999999993 197.6-8.600000000000023 8.699999999999989-22.400000000000034 8.800000000000011-31 0-65-66-129.70000000000005-131.8-194.5-197.6-8.600000000000023-8.699999999999989-22.400000000000034-8.599999999999994-30.900000000000034 0.09999999999999432-15.699999999999989 16.200000000000017-31.099999999999994 32.30000000000001-47.099999999999994 48.80000000000001-8.5 8.800000000000011-8.299999999999983 23 0.20000000000001705 31.69999999999999 63.099999999999966 64.19999999999999 127.89999999999998 130.10000000000002 193.59999999999997 197 8.600000000000023 8.699999999999989 8.5 22.80000000000001 0 31.599999999999966-65.19999999999999 66.40000000000009-130.2 132.5-194.7 198.10000000000002-8.5 8.700000000000045-8.5 22.800000000000068 0.20000000000001705 31.399999999999977l47.79999999999998 47.90000000000009c8.600000000000023 8.599999999999909 22.600000000000023 8.599999999999909 31.100000000000023-0.10000000000002274l194.2-197.30000000000007c8.600000000000023-8.699999999999932 22.399999999999977-8.699999999999932 31 0 64.70000000000005 65.80000000000007 129.20000000000005 131.4000000000001 194.20000000000005 197.5 8.599999999999909 8.700000000000045 22.5 8.800000000000068 31 0.10000000000002274 16-16.199999999999932 31.699999999999932-32.19999999999993 47.59999999999991-48.299999999999955 8.600000000000023-8.700000000000045 8.600000000000023-22.899999999999977 0.10000000000002274-31.600000000000023-63.799999999999955-65-128.5-130.89999999999998-194.19999999999993-197.79999999999995-8.600000000000023-8.700000000000045-8.600000000000023-22.900000000000034 0-31.600000000000023 65.19999999999993-66.40000000000003 130.0999999999999-132.5 194.5-198.20000000000005 8.599999999999909-8.699999999999989 8.5-22.799999999999955-0.10000000000002274-31.49999999999997l-47.80000000000007-48.099999999999994c-8.5-8.5-22.399999999999977-8.400000000000006-31 0.29999999999998295z"/>
+    </svg>
+  )
+}
\ No newline at end of file
diff --git a/src/editor/widgets/comment/Comment.jsx b/src/editor/widgets/comment/Comment.jsx
index 5fbb8f4..c3879c9 100644
--- a/src/editor/widgets/comment/Comment.jsx
+++ b/src/editor/widgets/comment/Comment.jsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import DropdownMenu from './DropdownMenu';
 import TextEntryField from './TextEntryField';
+import { ChevronDown } from '../../../Icons';
 
 /** A single comment inside the CommentWidget **/
 const Comment = props => {
@@ -37,7 +38,9 @@ const Comment = props => {
 
       <div 
         className={isMenuVisible ? "icon arrow-down menu-open" : "icon arrow-down"} 
-        onClick={() => setIsMenuVisible(!isMenuVisible)} />
+        onClick={() => setIsMenuVisible(!isMenuVisible)}>
+        <ChevronDown width={12} />
+      </div>
 
       { isMenuVisible && 
         <DropdownMenu 
diff --git a/src/editor/widgets/tag/TagWidget.jsx b/src/editor/widgets/tag/TagWidget.jsx
index 8393f33..38b8140 100644
--- a/src/editor/widgets/tag/TagWidget.jsx
+++ b/src/editor/widgets/tag/TagWidget.jsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { CSSTransition } from 'react-transition-group';
+import { Close } from '../../../Icons';
 
 /** The basic freetext tag control from original Recogito **/
 const TagWidget = props => {
@@ -40,7 +41,7 @@ const TagWidget = props => {
             <CSSTransition in={showDelete === tag.value} timeout={200} classNames="delete">
               <span className="delete-wrapper" onClick={onDelete(tag)}>
                 <span className="delete">
-                  <span className="icon">{'\uf014'}</span>
+                  <Close width={14} />
                 </span>
               </span>
             </CSSTransition>
diff --git a/themes/default/editor/widgets/comment/_comment.scss b/themes/default/editor/widgets/comment/_comment.scss
index c2e4739..74771f9 100644
--- a/themes/default/editor/widgets/comment/_comment.scss
+++ b/themes/default/editor/widgets/comment/_comment.scss
@@ -6,27 +6,19 @@
 
   .arrow-down {
     position:absolute;
-    top:5px;
-    right:5px;
     height: 20px;
     width: 20px;
-    line-height: 14px;
-    font-size: 18px;
-    background-color:#fff;
-    text-align: center;
-    text-rendering: auto;
-    -webkit-font-smoothing: antialiased;
-    border: 1px solid $lightgrey-border;
     top: 9px;
     right: 9px;
+    line-height: 24px;
+    background-color:#fff;
+    text-align: center;
+    -webkit-font-smoothing: antialiased;
+    border: 1px solid $lightgrey-border;
     cursor: pointer;
     @include rounded-corners(1px);
   }
 
-  .arrow-down::before {
-    content:'\2304';
-  }
-
   .arrow-down.menu-open {
     border-color:$ocean;
   }
diff --git a/themes/default/editor/widgets/tag/_tag.scss b/themes/default/editor/widgets/tag/_tag.scss
index 62b2053..5df6875 100644
--- a/themes/default/editor/widgets/tag/_tag.scss
+++ b/themes/default/editor/widgets/tag/_tag.scss
@@ -28,6 +28,7 @@
     .label {
       padding:2px 8px;
       display:inline-block;
+      vertical-align:middle;
     }
 
     .delete-wrapper {
@@ -37,7 +38,7 @@
       width:0;
       height:100%;
       background-color:$ocean;
-      vertical-align:top;
+      @include rounded-corners-right(2px);
 
       .delete {
         padding:2px 6px;
@@ -49,6 +50,10 @@
       
       }
 
+      svg {
+        vertical-align:middle;
+      }
+
     }
 
     .delete-enter-active {