replace icons with Checkbox component (#8830)

in both permission flows the checkboxes were using the fa-check icon, and in the case
of the connected accounts popover the color of the icon was wrong. It occurred to me
while simply fixing that color would have been easier, we will be adding permissions
at some point in the future that a user will be able to 'uncheck'. This PR replaces
the usages of those icons with the Checkbox component that is equipped to handle the
interactivity of checking/unchecking.

ui/app/components/app/connected-accounts-permissions/connected-accounts-permissions.component.js

@@ -1,6 +1,7 @@
 import classnames from 'classnames'
 import PropTypes from 'prop-types'
 import React, { PureComponent } from 'react'
+import CheckBox from '../../ui/check-box'
 
 export default class ConnectedAccountsPermissions extends PureComponent {
   static contextTypes = {
@@ -57,7 +58,8 @@ export default class ConnectedAccountsPermissions extends PureComponent {
           <ul className="connected-accounts-permissions__list">
             {permissions.map(({ key: permissionName }) => (
               <li key={permissionName} className="connected-accounts-permissions__list-item">
-                <i className="fas fa-check-square" />{t(permissionName)}
+                <CheckBox checked disabled id={permissionName} className="connected-accounts-permissions__checkbox" />
+                <label htmlFor={permissionName}>{t(permissionName)}</label>
               </li>
             ))}
           </ul>

ui/app/components/app/connected-accounts-permissions/index.scss

@@ -41,13 +41,11 @@
 
   &__list-item {
     display: flex;
-
-    i {
-      display: block;
-      padding-right: 8px;
-      font-size: 18px;
-      color: $Grey-800;
   }
+
+  & &__checkbox {
+    margin: 0 8px 0 0;
+    font-size: 18px;
   }
 
   &__list-container {

ui/app/components/app/permission-page-container/index.scss

@@ -62,11 +62,6 @@
       display: flex;
       align-items: center;
 
-      i {
-        font-size: 1.4rem;
-        color: $Grey-200;
-      }
-
       label {
         font-size: 14px;
         margin-left: 16px;
@@ -75,6 +70,11 @@
     }
   }
 
+  & &__checkbox {
+    font-size: 1.4rem;
+    margin: 0;
+  }
+
   &__content-container {
     display: flex;
     flex-direction: column;

ui/app/components/app/permission-page-container/permission-page-container-content/permission-page-container-content.component.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types'
 import React, { PureComponent } from 'react'
 import PermissionsConnectHeader from '../../permissions-connect-header'
 import Tooltip from '../../../ui/tooltip-v2'
+import CheckBox from '../../../ui/check-box'
 
 export default class PermissionPageContainerContent extends PureComponent {
 
@@ -33,6 +34,8 @@ export default class PermissionPageContainerContent extends PureComponent {
       const description = t(permissionName)
       // don't allow deselecting eth_accounts
       const isDisabled = permissionName === 'eth_accounts'
+      const isChecked = Boolean(selectedPermissions[permissionName])
+      const title = isChecked ? t('permissionCheckedIconDescription') : t('permissionUncheckedIconDescription')
 
       return (
         <div
@@ -44,11 +47,14 @@ export default class PermissionPageContainerContent extends PureComponent {
             }
           }}
         >
-          { selectedPermissions[permissionName]
-            ? <i title={t('permissionCheckedIconDescription')} className="fa fa-check-square" />
-            : <i title={t('permissionUncheckedIconDescription')} className="fa fa-square" />
-          }
-          <label>{description}</label>
+          <CheckBox
+            disabled={isDisabled}
+            id={permissionName}
+            className="permission-approval-container__checkbox"
+            checked={isChecked}
+            title={title}
+          />
+          <label htmlFor={permissionName}>{description}</label>
         </div>
       )
     })

ui/app/components/ui/check-box/check-box.component.js

@@ -10,7 +10,7 @@ const CHECKBOX_STATE = {
 
 export const { CHECKED, INDETERMINATE, UNCHECKED } = CHECKBOX_STATE
 
-const CheckBox = ({ className, disabled, id, onClick, checked }) => {
+const CheckBox = ({ className, disabled, id, onClick, checked, title }) => {
   if (typeof checked === 'boolean') {
     checked = checked
       ? CHECKBOX_STATE.CHECKED
@@ -41,6 +41,7 @@ const CheckBox = ({ className, disabled, id, onClick, checked }) => {
       }
       readOnly
       ref={ref}
+      title={title}
       type="checkbox"
     />
   )
@@ -52,6 +53,7 @@ CheckBox.propTypes = {
   id: PropTypes.string,
   onClick: PropTypes.func,
   checked: PropTypes.oneOf([...Object.keys(CHECKBOX_STATE), true, false]).isRequired,
+  title: PropTypes.string,
 }
 
 CheckBox.defaultProps = {

ui/app/components/ui/check-box/index.scss

@@ -18,6 +18,5 @@
   &:disabled {
     color: $Grey-100;
     cursor: not-allowed;
-    opacity: 0.5;
   }
 }