Add ReactIcons (#149)

app/javascript/components/common/ActionLink.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+interface Props {
+  onClick: React.MouseEventHandler<HTMLAnchorElement>;
+  icon?: React.ReactElement;
+  disabled?: boolean;
+  customClass?: string;
+  children: React.ReactNode;
+}
+
+const ActionLink = ({
+  onClick,
+  icon,
+  disabled = false,
+  customClass,
+  children,
+}: Props) => (
+  <a
+    onClick={onClick}
+    className={`actionLink${disabled ? ' actionLinkDisabled' : ''}${customClass ? ' ' + customClass : ''}`}
+  >
+      {icon}{children}
+  </a>
+);
+
+export default ActionLink;

app/javascript/components/common/CopyToClipboardButton.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import I18n from 'i18n-js';
 import { useState } from 'react';
+import ActionLink from './ActionLink';
+import { CopyIcon, DoneIcon } from './Icons';
 
 interface Props {
   label: string;
@@ -20,7 +22,7 @@ const CopyToClipboardButton = ({
 
   return (
     ready ?
-      <a
+      <ActionLink
         onClick={() => {
           if (navigator.clipboard) {
             navigator.clipboard.writeText(textToCopy).then(() => {
@@ -32,11 +34,14 @@ const CopyToClipboardButton = ({
             alertError();
           }
         }}
+        icon={<CopyIcon />}
       >
         {label}
-      </a>
+      </ActionLink>
     :
-      <span>{copiedLabel}</span>
+      <span style={{display: 'flex', marginRight: 12}}>
+        {copiedLabel}
+      </span>
   );
 };
 

app/javascript/components/common/DragZone.tsx

@@ -1,11 +1,22 @@
 import * as React from 'react';
+import { MdDragIndicator } from 'react-icons/md';
 
-const DragZone = ({dndProvided, isDragDisabled, color = 'black'}) => (
+interface Props {
+  dndProvided: any;
+  isDragDisabled: boolean;
+  color?: 'black' | 'white';
+}
+
+const DragZone = ({
+  dndProvided,
+  isDragDisabled,
+  color = 'black',
+}: Props) => (
   <span
     className={`drag-zone${isDragDisabled ? ' drag-zone-disabled' : ''}`}
     {...dndProvided.dragHandleProps}
   >
-    <span className={`drag-icon${color === 'white' ? ' drag-icon-white' : ''}`}></span>
+    <MdDragIndicator color={color} size={18} />
   </span>
 );
 

app/javascript/components/common/Icons.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+import { BsReply } from 'react-icons/bs';
+import { FiEdit, FiDelete } from 'react-icons/fi';
+import { ImCancelCircle } from 'react-icons/im';
+import { TbLock, TbLockOpen } from 'react-icons/tb';
+import { MdContentCopy, MdDone, MdOutlineArrowBack } from 'react-icons/md';
+import { GrTest } from 'react-icons/gr';
+
+export const EditIcon = () => <FiEdit />;
+
+export const DeleteIcon = () => <FiDelete />;
+
+export const CancelIcon = () => <ImCancelCircle />;
+
+export const BlockIcon = () => <TbLock />;
+
+export const UnblockIcon = () => <TbLockOpen />;
+
+export const CopyIcon = () => <MdContentCopy />;
+
+export const TestIcon = () => <GrTest />;
+
+export const DoneIcon = () => <MdDone />;
+
+export const BackIcon = () => <MdOutlineArrowBack />;
+
+export const ReplyIcon = () => <BsReply />;