Fix design inconsistencies in the connect flow (#19800)

ui/components/ui/account-list/index.scss

@@ -11,7 +11,7 @@
     flex: 0;
     margin-top: 36px;
     width: 100%;
-    padding-inline-start: 15px;
+    padding-inline-start: 16px;
     padding-inline-end: 17px;
   }
 
@@ -25,7 +25,6 @@
 
   &__select-all {
     display: flex;
-    margin-inline-start: 16px;
     align-items: center;
   }
 

ui/pages/permissions-connect/choose-account/choose-account.js

@@ -1,10 +1,10 @@
 import PropTypes from 'prop-types';
 import React, { useState } from 'react';
 import { useI18nContext } from '../../../hooks/useI18nContext';
-import Button from '../../../components/ui/button';
 import PermissionsConnectHeader from '../../../components/app/permissions-connect-header';
 import PermissionsConnectFooter from '../../../components/app/permissions-connect-footer';
 import AccountList from '../../../components/ui/account-list';
+import { PageContainerFooter } from '../../../components/ui/page-container';
 
 const ChooseAccount = ({
   selectedAccountAddresses,
@@ -75,21 +75,14 @@ const ChooseAccount = ({
       </div>
       <div className="permissions-connect-choose-account__footer-container">
         <PermissionsConnectFooter />
-        <div className="permissions-connect-choose-account__bottom-buttons">
-          <Button
-            onClick={() => cancelPermissionsRequest(permissionsRequestId)}
-            type="secondary"
-          >
-            {t('cancel')}
-          </Button>
-          <Button
-            onClick={() => selectAccounts(selectedAccounts)}
-            type="primary"
-            disabled={selectedAccounts.size === 0}
-          >
-            {t('next')}
-          </Button>
-        </div>
+        <PageContainerFooter
+          cancelButtonType="default"
+          onCancel={() => cancelPermissionsRequest(permissionsRequestId)}
+          cancelText={t('cancel')}
+          onSubmit={() => selectAccounts(selectedAccounts)}
+          submitText={t('next')}
+          disabled={selectedAccounts.size === 0}
+        />
       </div>
     </>
   );

ui/pages/permissions-connect/choose-account/index.scss

@@ -29,31 +29,9 @@
       justify-content: space-between;
       padding-bottom: 20px;
     }
-  }
 
-  &__bottom-buttons {
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-    padding-top: 16px;
-    padding-bottom: 16px;
-    margin-top: 12px;
-    border-top: 1px solid var(--color-border-muted);
-
-    @include screen-sm-min {
-      border-top: none;
-    }
-
-    button {
-      width: 124px;
-    }
-
-    .btn-secondary {
-      margin-left: 16px;
-    }
-
-    .btn-primary {
-      margin-right: 16px;
+    .page-container__footer {
+      margin-top: 12px;
     }
   }
 }

ui/pages/permissions-connect/permissions-connect.component.js

@@ -279,7 +279,7 @@ export default class PermissionConnect extends Component {
             onClick={() => this.goBack()}
           >
             <Icon
-              name={IconName.ArrowRight}
+              name={IconName.ArrowLeft}
               marginInlineEnd={1}
               size={IconSize.Xs}
             />