Replaced with new checkbox in ConnectedAccountsPermissions (#20228)

* Replaced with new checkbox in ConnectedAccountsPermissions

* removed a typo

* fixed linting issue

* Small updates to styles

---------

Co-authored-by: George Marshall <george.marshall@consensys.net>

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

@@ -2,7 +2,7 @@ import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import React, { useState } from 'react';
 import { flatten } from 'lodash';
-import CheckBox from '../../ui/check-box';
+import { Checkbox } from '../../component-library';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { getPermissionDescription } from '../../../helpers/utils/permission';
 
@@ -59,13 +59,12 @@ const ConnectedAccountsPermissions = ({ permissions }) => {
               key={`connected-permission-${idx}`}
               className="connected-accounts-permissions__list-item"
             >
-              <CheckBox
-                checked
-                disabled
+              <Checkbox
+                isChecked
+                isDisabled
                 id={`connected-permission-${idx}`}
-                className="connected-accounts-permissions__checkbox"
+                label={label}
               />
-              <label htmlFor={`connected-permission-${idx}`}>{label}</label>
             </li>
           ))}
         </ul>

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

@@ -40,11 +40,6 @@
     display: flex;
   }
 
-  & &__checkbox {
-    font-size: $font-size-h4;
-    margin: 0 8px 0 0;
-  }
-
   &__list-container {
     max-height: 0;
     overflow: hidden;

ui/components/component-library/checkbox/checkbox.scss

@@ -42,6 +42,7 @@
 
   &--disabled {
     opacity: var(--opacity-disabled);
+    cursor: not-allowed;
   }
 
   &__icon {