Added SVG icons for relation editor

src/Icons.js

@@ -1,11 +1,11 @@
 import React from 'react';
 
 /**
- * Icons from IcoFont https://icofont.com/, licensed under the CC BY 4.0 license.
+ * Icon from IcoFont https://icofont.com/, licensed under the CC BY 4.0 license.
  */
-export const ChevronDown = props => {
+export const ChevronDownIcon = props => {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 940 940" width={props.width}>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 940" width={props.width}>
       <metadata>IcoFont Icons</metadata>
       <title>simple-down</title>
       <glyph glyphName="simple-down" unicode="&#xeab2;" horizAdvX="1000" />
@@ -14,7 +14,10 @@ export const ChevronDown = props => {
   )
 }
 
-export const Close = props => {
+/**
+ * Icon from IcoFont https://icofont.com/, licensed under the CC BY 4.0 license.
+ */
+export const CloseIcon = props => {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="180 150 700 800" width={props.width}>
       <metadata>IcoFont Icons</metadata>
@@ -24,3 +27,30 @@ export const Close = props => {
     </svg>
   )
 }
+
+/**
+ * Icon from IcoFont https://icofont.com/, licensed under the CC BY 4.0 license.
+ */
+export const CheckIcon = props => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 980 980" width={props.width}>
+      <metadata>IcoFont Icons</metadata>
+      <title>verification-check</title>
+      <glyph glyph-name="verification-check" unicode="&#xf021;" horiz-adv-x="1000" />
+      <path fill="currentColor" d="M792.9 162.8c-133.19999999999993 126.69999999999999-264.9 251.89999999999998-397.29999999999995 377.8-8.800000000000011 8.299999999999955-22.600000000000023 8-31-0.8000000000000682l-139.50000000000003-146.89999999999998c-8.299999999999983-8.799999999999955-22.5-9.399999999999977-31.599999999999994-1.5-41.19999999999999 36-82 71.70000000000005-123.7 108.20000000000005-9.099999999999994 8-9.899999999999999 21.699999999999932-1.7999999999999972 30.600000000000023 92.9 102.19999999999993 185 203.5 277.7 305.4 8.100000000000023 8.899999999999977 21.900000000000034 9.5 30.80000000000001 1.2999999999999545 185.29999999999995-172.39999999999998 369.29999999999995-343.7 553.8-515.3 8.900000000000091-8.200000000000045 9.600000000000023-22.30000000000001 1.7000000000000455-31.5-36.700000000000045-42.400000000000034-72.70000000000005-84.00000000000003-108.89999999999998-125.80000000000001-7.899999999999977-9.100000000000023-21.399999999999977-9.800000000000011-30.200000000000045-1.5z"/>
+    </svg>  
+  )
+}
+
+
+/**
+ * Icon from FontAwesome https://fontawesome.com/icons/trash-alt, 
+ * licensed under the CC BY 4.0 license https://fontawesome.com/license
+ */
+export const TrashIcon = props => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width={props.width}>
+      <path fill="currentColor" d="M268 416h24a12 12 0 0 0 12-12V188a12 12 0 0 0-12-12h-24a12 12 0 0 0-12 12v216a12 12 0 0 0 12 12zM432 80h-82.41l-34-56.7A48 48 0 0 0 274.41 0H173.59a48 48 0 0 0-41.16 23.3L98.41 80H16A16 16 0 0 0 0 96v16a16 16 0 0 0 16 16h16v336a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V128h16a16 16 0 0 0 16-16V96a16 16 0 0 0-16-16zM171.84 50.91A6 6 0 0 1 177 48h94a6 6 0 0 1 5.15 2.91L293.61 80H154.39zM368 464H80V128h288zm-212-48h24a12 12 0 0 0 12-12V188a12 12 0 0 0-12-12h-24a12 12 0 0 0-12 12v216a12 12 0 0 0 12 12z"></path>
+    </svg>
+  )
+}

src/editor/widgets/comment/Comment.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import DropdownMenu from './DropdownMenu';
 import TextEntryField from './TextEntryField';
-import { ChevronDown } from '../../../Icons';
+import { ChevronDownIcon } from '../../../Icons';
 
 /** A single comment inside the CommentWidget **/
 const Comment = props => {
@@ -39,7 +39,7 @@ const Comment = props => {
       <div 
         className={isMenuVisible ? "icon arrow-down menu-open" : "icon arrow-down"} 
         onClick={() => setIsMenuVisible(!isMenuVisible)}>
-        <ChevronDown width={12} />
+        <ChevronDownIcon width={12} />
       </div>
 
       { isMenuVisible && 

src/editor/widgets/tag/TagWidget.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { CSSTransition } from 'react-transition-group';
-import { Close } from '../../../Icons';
+import { CloseIcon } from '../../../Icons';
 
 /** The basic freetext tag control from original Recogito **/
 const TagWidget = props => {
@@ -41,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">
-                  <Close width={14} />
+                  <CloseIcon width={12} />
                 </span>
               </span>
             </CSSTransition>

src/relations/editor/RelationEditor.jsx

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import ContentEditable from 'react-contenteditable';
+import { TrashIcon, CheckIcon } from '../../Icons';
 
 /**
  * Shorthand to get the label (= first tag body value) from the
@@ -112,11 +113,15 @@ export default class RelationEditor extends Component {
         <div className="buttons">
           <span 
             className="icon delete"
-            onClick={this.onDelete}>{'\uf014'}</span>
+            onClick={this.onDelete}>
+            <TrashIcon width={14} />
+          </span>
 
           <span
             className="icon ok"
-            onClick={this.onSubmit}>{'\uf00c'}</span>
+            onClick={this.onSubmit}>
+            <CheckIcon width={14} />
+          </span>
         </div>
       </div>
     )

themes/default/relations/_editor.scss

@@ -8,6 +8,11 @@
   transform:translate(-50%, -50%);
   background-color:#fff;
 
+  svg {
+    vertical-align:middle;
+    shape-rendering: geometricPrecision;
+  }
+
   * {
     line-height:31px;
     box-sizing:border-box;
@@ -49,7 +54,7 @@
 
     .delete {
       background-color:#fff;
-      color:$standard-type;
+      color:$lightblue-type;
       border-left:1px solid $lightgrey-border;
     }