Add ReactIcons (#149)

app/javascript/components/Comments/CommentEditForm.tsx

@@ -1,6 +1,9 @@
 import * as React from 'react';
 import I18n from 'i18n-js';
 import Button from '../common/Button';
+import Switch from '../common/Switch';
+import ActionLink from '../common/ActionLink';
+import { CancelIcon } from '../common/Icons';
 
 interface Props {
   id: number;
@@ -61,34 +64,23 @@ class CommentEditForm extends React.Component<Props, State> {
         <div>
           <div>
             {
-              isPowerUser ?
-                <>
-                  <input
-                    id={`isPostUpdateFlagComment${id}`}
-                    type="checkbox"
-                    onChange={e => this.handleCommentIsPostUpdateChange(e.target.checked)}
-                    checked={isPostUpdate || false}
-                  />
-                  &nbsp;
-                  <label htmlFor={`isPostUpdateFlagComment${id}`}>
-                    {I18n.t('post.new_comment.is_post_update')}
-                  </label>
-                </>
-              :
-                null
+              isPowerUser &&
+                <Switch
+                  htmlId={`isPostUpdateFlagComment${id}`}
+                  onClick={e => this.handleCommentIsPostUpdateChange(!isPostUpdate)}
+                  checked={isPostUpdate || false}
+                  label={I18n.t('post.new_comment.is_post_update')}
+                />
             }
-            
           </div>
 
-          <div>
-            <a className="commentLink" onClick={toggleEditMode}>
-              { I18n.t('common.buttons.cancel') }
-            </a>
+          <div className="editCommentFormActions">
+            <ActionLink onClick={toggleEditMode} icon={<CancelIcon />}>
+              {I18n.t('common.buttons.cancel')}
+            </ActionLink>
             &nbsp;
-            <Button
-              onClick={() => handleUpdateComment(body, isPostUpdate)}
-            >
-              { I18n.t('common.buttons.update') }
+            <Button onClick={() => handleUpdateComment(body, isPostUpdate)}>
+              {I18n.t('common.buttons.update')}
             </Button>
           </div>
         </div>

app/javascript/components/Comments/CommentFooter.tsx

@@ -5,6 +5,8 @@ import Separator from '../common/Separator';
 import { MutedText } from '../common/CustomTexts';
 import friendlyDate from '../../helpers/datetime';
 import { ReplyFormState } from '../../reducers/replyFormReducer';
+import ActionLink from '../common/ActionLink';
+import { CancelIcon, DeleteIcon, EditIcon, ReplyIcon } from '../common/Icons';
 
 interface Props {
   id: number;
@@ -34,43 +36,43 @@ const CommentFooter = ({
   toggleEditMode,
 }: Props) => (
   <div className="commentFooter">
-    <a className="commentReplyButton commentLink" onClick={handleToggleCommentReply}>
+    <ActionLink
+      onClick={handleToggleCommentReply}
+      icon={replyForm.isOpen ? <CancelIcon /> : <ReplyIcon />}
+    >
       {
         replyForm.isOpen ?
           I18n.t('common.buttons.cancel')
         :
           I18n.t('post.comments.reply_button')
       }
-    </a>
+    </ActionLink>
     {
       isPowerUser || currentUserEmail === commentAuthorEmail ?
         <>
-          <Separator />
-          <a onClick={toggleEditMode} className="commentLink">
+          <ActionLink onClick={toggleEditMode} icon={<EditIcon />}>
             {I18n.t('common.buttons.edit')}
-          </a>
+          </ActionLink>
 
-          <Separator />
-          <a
+          <ActionLink
             onClick={() => confirm(I18n.t('common.confirmation')) && handleDeleteComment(id)}
-            className="commentLink">
-              {I18n.t('common.buttons.delete')}
-          </a>
+            icon={<DeleteIcon />}
+          >
+            {I18n.t('common.buttons.delete')}
+          </ActionLink>
         </>
       :
         null
     }
-    <Separator />
+    
     <MutedText>{friendlyDate(createdAt)}</MutedText>
 
     {
-      createdAt !== updatedAt ?
+      createdAt !== updatedAt &&
         <>
           <Separator />
           <MutedText>{ I18n.t('common.edited').toLowerCase() }</MutedText>
         </>
-      :
-        null
     }
   </div>
 );

app/javascript/components/Comments/NewCommentUpdateSection.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import I18n from 'i18n-js';
 
 import { MutedText } from '../common/CustomTexts';
+import Switch from '../common/Switch';
 
 interface Props {
   postUpdateFlagValue: boolean;
@@ -13,21 +14,15 @@ const NewCommentUpdateSection = ({
   handlePostUpdateFlag,
 }: Props) => (
   <div className="commentIsUpdateForm">
-    <div>
-      <input
-        id="isPostUpdateFlag"
-        type="checkbox"
-        onChange={handlePostUpdateFlag}
-        checked={postUpdateFlagValue || false}
-      />
-      &nbsp;
-      <label htmlFor="isPostUpdateFlag">{I18n.t('post.new_comment.is_post_update')}</label>
-    </div>
+    <Switch
+      htmlId="isPostUpdateFlag"
+      onClick={handlePostUpdateFlag}
+      checked={postUpdateFlagValue || false}
+      label={I18n.t('post.new_comment.is_post_update')}
+    />
     {
-      postUpdateFlagValue ?
+      postUpdateFlagValue &&
         <MutedText>{I18n.t('post.new_comment.user_notification')}</MutedText>
-      :
-        null
     }
   </div>
 );