chore: refactoring onboarding to remove deprecated components (#26207)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

This pull request aims to remove the deprecated `Box` and `Button`
components from the onboarding metametrics screen and replace them with
their counterparts from the design system-aligned component library. The
primary motivation for this change is to ensure consistency across the
application by using standardized components, which will improve
maintainability and reduce the risk of design discrepancies.

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/26207?quickstart=1)

## **Related issues**

Fixes: [#issue-number]

## **Manual testing steps**

1. Navigate to the onboarding metametrics screen in the storybook build
of this PR.
2. Verify that the UI elements look consistent with the design system
guidelines.

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<img width="757" alt="Screenshot 2024-07-29 at 3 29 27 PM"
src="https://github.com/user-attachments/assets/f216b6f2-2268-49e7-8f4d-610f8263c150">

<img width="949" alt="Screenshot 2024-07-29 at 3 59 40 PM"
src="https://github.com/user-attachments/assets/c42c7500-5a32-4164-8fbf-67848a873ee6">


### **After**

<img width="756" alt="Screenshot 2024-07-29 at 3 30 02 PM"
src="https://github.com/user-attachments/assets/53d6fd5a-aa7d-4d03-b71d-d77315e67ed2">

<img width="980" alt="Screenshot 2024-07-29 at 3 59 01 PM"
src="https://github.com/user-attachments/assets/b818a73c-2bfc-4e19-90f0-153e6531d79c">


## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability.
- [x] I’ve included tests if applicable.
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable.
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

ui/pages/onboarding-flow/metametrics/__snapshots__/metametrics.test.js.snap

@@ -36,7 +36,7 @@ exports[`Onboarding Metametrics Component should match snapshot 1`] = `
     <ul>
       <li>
         <div
-          class="box box--flex-direction-row"
+          class="mm-box"
         >
           <span
             class="mm-box mm-icon mm-icon--size-sm mm-box--margin-inline-end-2 mm-box--display-inline-block mm-box--color-success-default"
@@ -57,7 +57,7 @@ exports[`Onboarding Metametrics Component should match snapshot 1`] = `
       </li>
       <li>
         <div
-          class="box box--flex-direction-row"
+          class="mm-box"
         >
           <span
             class="mm-box mm-icon mm-icon--size-sm mm-box--margin-inline-end-2 mm-box--display-inline-block mm-box--color-success-default"
@@ -78,7 +78,7 @@ exports[`Onboarding Metametrics Component should match snapshot 1`] = `
       </li>
       <li>
         <div
-          class="box box--flex-direction-row"
+          class="mm-box"
         >
           <span
             class="mm-box mm-icon mm-icon--size-sm mm-box--margin-inline-end-2 mm-box--display-inline-block mm-box--color-success-default"
@@ -138,13 +138,13 @@ exports[`Onboarding Metametrics Component should match snapshot 1`] = `
       class="mm-box onboarding-metametrics__buttons mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-row mm-box--width-full"
     >
       <button
-        class="button btn--rounded btn-secondary btn--large"
+        class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-secondary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-primary-default box--border-style-solid box--border-width-1"
         data-testid="metametrics-no-thanks"
       >
         No thanks
       </button>
       <button
-        class="button btn--rounded btn-primary btn--large"
+        class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-primary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
         data-testid="metametrics-i-agree"
       >
         I agree
@@ -190,7 +190,7 @@ exports[`Onboarding Metametrics Component should match snapshot after new policy
     <ul>
       <li>
         <div
-          class="box box--flex-direction-row"
+          class="mm-box"
         >
           <span
             class="mm-box mm-icon mm-icon--size-sm mm-box--margin-inline-end-2 mm-box--display-inline-block mm-box--color-success-default"
@@ -211,7 +211,7 @@ exports[`Onboarding Metametrics Component should match snapshot after new policy
       </li>
       <li>
         <div
-          class="box box--flex-direction-row"
+          class="mm-box"
         >
           <span
             class="mm-box mm-icon mm-icon--size-sm mm-box--margin-inline-end-2 mm-box--display-inline-block mm-box--color-success-default"
@@ -232,7 +232,7 @@ exports[`Onboarding Metametrics Component should match snapshot after new policy
       </li>
       <li>
         <div
-          class="box box--flex-direction-row"
+          class="mm-box"
         >
           <span
             class="mm-box mm-icon mm-icon--size-sm mm-box--margin-inline-end-2 mm-box--display-inline-block mm-box--color-success-default"
@@ -292,13 +292,13 @@ exports[`Onboarding Metametrics Component should match snapshot after new policy
       class="mm-box onboarding-metametrics__buttons mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-row mm-box--width-full"
     >
       <button
-        class="button btn--rounded btn-secondary btn--large"
+        class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-secondary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-primary-default box--border-style-solid box--border-width-1"
         data-testid="metametrics-no-thanks"
       >
         No thanks
       </button>
       <button
-        class="button btn--rounded btn-primary btn--large"
+        class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-primary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
         data-testid="metametrics-i-agree"
       >
         I agree

ui/pages/onboarding-flow/metametrics/metametrics.js

@@ -11,7 +11,6 @@ import {
   IconColor,
   BlockSize,
 } from '../../../helpers/constants/design-system';
-import Button from '../../../components/ui/button';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import {
   setParticipateInMetaMetrics,
@@ -32,15 +31,17 @@ import {
 
 import { MetaMetricsContext } from '../../../contexts/metametrics';
 import {
-  Box as BoxComponent,
+  Box,
   Checkbox,
   Icon,
   IconName,
   IconSize,
   Text,
+  Button,
+  ButtonVariant,
+  ButtonSize,
 } from '../../../components/component-library';
 
-import Box from '../../../components/ui/box/box';
 import { FirstTimeFlowType } from '../../../../shared/constants/onboarding';
 
 export default function OnboardingMetametrics() {
@@ -123,7 +124,7 @@ export default function OnboardingMetametrics() {
       <Text className="onboarding-metametrics__desc" textAlign={TextAlign.Left}>
         {t('onboardingMetametricsDescription')}
       </Text>
-      <BoxComponent paddingTop={2} paddingBottom={2}>
+      <Box paddingTop={2} paddingBottom={2}>
         <Text
           color={TextColor.primaryDefault}
           as="a"
@@ -133,7 +134,7 @@ export default function OnboardingMetametrics() {
         >
           {t('onboardingMetametricsPrivacyDescription')}
         </Text>
-      </BoxComponent>
+      </Box>
       <Text className="onboarding-metametrics__desc" textAlign={TextAlign.Left}>
         {t('onboardingMetametricsDescription2')}
       </Text>
@@ -224,7 +225,7 @@ export default function OnboardingMetametrics() {
         ])}
       </Text>
 
-      <BoxComponent
+      <Box
         display={Display.Flex}
         flexDirection={FlexDirection.Row}
         width={BlockSize.Full}
@@ -233,21 +234,20 @@ export default function OnboardingMetametrics() {
       >
         <Button
           data-testid="metametrics-no-thanks"
-          type="secondary"
-          large
+          variant={ButtonVariant.Secondary}
+          size={ButtonSize.Lg}
           onClick={onCancel}
         >
           {t('noThanks')}
         </Button>
         <Button
           data-testid="metametrics-i-agree"
-          type="primary"
-          large
+          size={ButtonSize.Lg}
           onClick={onConfirm}
         >
           {t('onboardingMetametricsAgree')}
         </Button>
-      </BoxComponent>
+      </Box>
     </div>
   );
 }