Add ReactIcons (#149)

app/javascript/components/SiteSettings/Authentication/OAuthForm.tsx

@@ -9,6 +9,8 @@ import { IOAuth } from '../../../interfaces/IOAuth';
 import { AuthenticationPages } from './AuthenticationSiteSettingsP';
 import { useState } from 'react';
 import Separator from '../../common/Separator';
+import ActionLink from '../../common/ActionLink';
+import { BackIcon } from '../../common/Icons';
 
 interface Props {
   selectedOAuth: IOAuth;
@@ -88,16 +90,18 @@ const OAuthForm = ({
 
   return (
     <>
-    <a
+    <ActionLink
       onClick={() => {
         let confirmation = true;
         if (isDirty)
           confirmation = confirm(I18n.t('common.unsaved_changes') + ' ' + I18n.t('common.confirmation'));
         if (confirmation) setPage('index');
       }}
-      className="backButton link">
-      ← { I18n.t('common.buttons.back') }
-    </a>
+      icon={<BackIcon />}
+      customClass="backButton"
+    >
+      {I18n.t('common.buttons.back')}
+    </ActionLink>
     <h2>{ I18n.t(`site_settings.authentication.form.title_${page}`) }</h2>
     <form onSubmit={handleSubmit(onSubmit)}>
       <div className="formRow">

app/javascript/components/SiteSettings/Authentication/OAuthProviderItem.tsx

@@ -6,6 +6,8 @@ import Switch from '../../common/Switch';
 import Separator from '../../common/Separator';
 import { AuthenticationPages } from './AuthenticationSiteSettingsP';
 import CopyToClipboardButton from '../../common/CopyToClipboardButton';
+import ActionLink from '../../common/ActionLink';
+import { DeleteIcon, EditIcon, TestIcon } from '../../common/Icons';
 
 interface Props {
   oAuth: IOAuth;
@@ -44,23 +46,32 @@ const OAuthProviderItem = ({
         label={I18n.t('site_settings.authentication.copy_url')}
         textToCopy={oAuth.callbackUrl}
       />
-      <Separator />
-      <a onClick={() =>
-        window.open(`/o_auths/${oAuth.id}/start?reason=test`, '', 'width=640, height=640')
-      }>
-        Test
-      </a>
-      <Separator />
-      <a onClick={() => {
-        setSelectedOAuth(oAuth.id);
-        setPage('edit');
-      }}>
-        { I18n.t('common.buttons.edit') }
-      </a>
-      <Separator />
-      <a onClick={() => confirm(I18n.t('common.confirmation')) && handleDeleteOAuth(oAuth.id)}>
-        { I18n.t('common.buttons.delete') }
-      </a>
+      
+      <ActionLink
+        onClick={() =>
+          window.open(`/o_auths/${oAuth.id}/start?reason=test`, '', 'width=640, height=640')
+        }
+        icon={<TestIcon />}
+      >
+        {I18n.t('common.buttons.test')}
+      </ActionLink>
+      
+      <ActionLink
+        onClick={() => {
+          setSelectedOAuth(oAuth.id);
+          setPage('edit');
+        }}
+        icon={<EditIcon />}
+      >
+        {I18n.t('common.buttons.edit')}
+      </ActionLink>
+      
+      <ActionLink
+        onClick={() => confirm(I18n.t('common.confirmation')) && handleDeleteOAuth(oAuth.id)}
+        icon={<DeleteIcon />}
+      >
+        {I18n.t('common.buttons.delete')}
+      </ActionLink>
     </div>
   </li>
 );

app/javascript/components/SiteSettings/Boards/BoardEditable.tsx

@@ -8,6 +8,8 @@ import DragZone from '../../common/DragZone';
 import PostBoardLabel from '../../common/PostBoardLabel';
 import Separator from '../../common/Separator';
 import BoardForm from './BoardForm';
+import ActionLink from '../../common/ActionLink';
+import { CancelIcon, DeleteIcon, EditIcon } from '../../common/Icons';
 
 interface Props {
   id: number;
@@ -83,13 +85,16 @@ class BoardsEditable extends React.Component<Props, State> {
                 </div>
 
                 <div className="boardEditableActions">
-                  <a onClick={this.toggleEditMode}>{I18n.t('common.buttons.edit')}</a>
+                  <ActionLink onClick={this.toggleEditMode} icon={<EditIcon />}>
+                    {I18n.t('common.buttons.edit')}
+                  </ActionLink>
 
-                  <Separator />
-
-                  <a onClick={() => confirm(I18n.t('common.confirmation')) && handleDelete(id)}>
+                  <ActionLink
+                    onClick={() => confirm(I18n.t('common.confirmation')) && handleDelete(id)}
+                    icon={<DeleteIcon />}
+                  >
                     {I18n.t('common.buttons.delete')}
-                  </a>
+                  </ActionLink>
                 </div>
               </>
             :
@@ -102,11 +107,12 @@ class BoardsEditable extends React.Component<Props, State> {
                   handleUpdate={this.handleUpdate}
                 />
 
-                <a
-                  className="boardFormCancelButton"
-                  onClick={this.toggleEditMode}>
+                <ActionLink
+                  onClick={this.toggleEditMode}
+                  icon={<CancelIcon />}
+                >
                   {I18n.t('common.buttons.cancel')}
-                </a>
+                </ActionLink>
               </>
             }
           </li>

app/javascript/components/SiteSettings/Boards/BoardForm.tsx

@@ -68,6 +68,7 @@ const BoardForm = ({
           {...register('name', { required: true })}
           placeholder={I18n.t('site_settings.boards.form.name')}
           autoFocus={mode === 'update'}
+          autoComplete={'off'}
           className="formControl"
         />
 

app/javascript/components/SiteSettings/PostStatuses/PostStatusEditable.tsx

@@ -6,6 +6,8 @@ import PostStatusLabel from "../../common/PostStatusLabel";
 import DragZone from '../../common/DragZone';
 import Separator from '../../common/Separator';
 import PostStatusForm from './PostStatusForm';
+import ActionLink from '../../common/ActionLink';
+import { CancelIcon, DeleteIcon, EditIcon } from '../../common/Icons';
 
 interface Props {
   id: number;
@@ -74,13 +76,16 @@ class PostStatusEditable extends React.Component<Props, State> {
                 <PostStatusLabel name={name} color={color} />
 
                 <div className="postStatusEditableActions">
-                  <a onClick={this.toggleEditMode}>{I18n.t('common.buttons.edit')}</a>
+                  <ActionLink onClick={this.toggleEditMode} icon={<EditIcon />}>
+                    {I18n.t('common.buttons.edit')}
+                  </ActionLink>
 
-                  <Separator />
-
-                  <a onClick={() => confirm(I18n.t('common.confirmation')) && handleDelete(id)}>
+                  <ActionLink
+                    onClick={() => confirm(I18n.t('common.confirmation')) && handleDelete(id)}
+                    icon={<DeleteIcon />}
+                  >
                     {I18n.t('common.buttons.delete')}
-                  </a>
+                  </ActionLink>
                 </div>
               </>
             :
@@ -93,11 +98,12 @@ class PostStatusEditable extends React.Component<Props, State> {
                   handleUpdate={this.handleUpdate}
                 />
 
-                <a
-                  className="postStatusFormCancelButton"
-                  onClick={this.toggleEditMode}>
+                <ActionLink
+                  onClick={this.toggleEditMode}
+                  icon={<CancelIcon />}
+                >
                   {I18n.t('common.buttons.cancel')}
-                </a>
+                </ActionLink>
               </>
             }
           </li>

app/javascript/components/SiteSettings/PostStatuses/PostStatusForm.tsx

@@ -72,6 +72,7 @@ const PostStatusForm = ({
         {...register('name', { required: true })}
         placeholder={I18n.t('site_settings.post_statuses.form.name')}
         autoFocus={mode === 'update'}
+        autoComplete={'off'}
         className="formControl"
       />
       

app/javascript/components/SiteSettings/Users/UserEditable.tsx

@@ -6,6 +6,8 @@ import IUser, { UserRoles, USER_ROLE_ADMIN, USER_ROLE_USER, USER_STATUS_ACTIVE,
 import Separator from "../../common/Separator";
 import UserForm from "./UserForm";
 import { MutedText } from "../../common/CustomTexts";
+import { BlockIcon, CancelIcon, EditIcon, UnblockIcon } from "../../common/Icons";
+import ActionLink from "../../common/ActionLink";
 
 interface Props {
   user: IUser;
@@ -119,18 +121,18 @@ class UserEditable extends React.Component<Props, State> {
             </div>
 
             <div className="userEditableActions">
-              <a
+              <ActionLink
                 onClick={() => editEnabled && this.toggleEditMode()}
-                className={editEnabled ? '' : 'actionDisabled'}
+                icon={<EditIcon />}
+                disabled={!editEnabled}
               >
                 { I18n.t('common.buttons.edit') }
-              </a>
+              </ActionLink>
 
-              <Separator />
-
-              <a
+              <ActionLink
                 onClick={() => blockEnabled && this._handleUpdateUserStatus()}
-                className={blockEnabled ? '' : 'actionDisabled'}
+                icon={user.status !== USER_STATUS_BLOCKED ? <BlockIcon /> : <UnblockIcon />}
+                disabled={!blockEnabled}
               >
                 {
                   user.status !== USER_STATUS_BLOCKED ?
@@ -138,15 +140,15 @@ class UserEditable extends React.Component<Props, State> {
                   :
                     I18n.t('site_settings.users.unblock')
                 }
-              </a>
+              </ActionLink>
             </div>
           </>
           :
             <>
             <UserForm user={user} updateUserRole={this._handleUpdateUserRole} />
-            <a onClick={this.toggleEditMode} className="userEditCancelButton">
-              { I18n.t('common.buttons.cancel') }
-            </a>
+            <ActionLink onClick={this.toggleEditMode} icon={<CancelIcon />}>
+              {I18n.t('common.buttons.cancel')}
+            </ActionLink>
             </>
         }
       </li>