From cb049605ede232b7b23cd2482f3282ff7991a63b Mon Sep 17 00:00:00 2001
From: Brian August Nguyen <brianacnguyen@gmail.com>
Date: Fri, 20 Dec 2024 07:39:21 -0800
Subject: [PATCH] fix: Update layout of "Network added" BottomSheet (#12778)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--
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 PR updates the layout of the `Network added` `BottomSheet` to
align with DS's `BottomSheet`
<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

## **Related issues**

Fixes: #10910

## **Manual testing steps**

1. Go to Wallet
2. Click on Network Picker
3. Scroll down and add a new network
4. Add new network
5. Observe change to `Add new network` `BottomSheet`

## **Screenshots/Recordings**

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

### **Before**

<!-- [screenshots/recordings] -->

### **After**
![Simulator Screenshot - iPhone 15 Pro Max - 2024-12-18 at 11 35
12](https://github.com/user-attachments/assets/33480430-f76a-4cfe-9c4f-a8701a38d7aa)

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] 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-mobile/blob/main/.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/NetworkModal/NetworkAdded/index.tsx    | 97 ++++++++++---------
 1 file changed, 53 insertions(+), 44 deletions(-)

diff --git a/app/components/UI/NetworkModal/NetworkAdded/index.tsx b/app/components/UI/NetworkModal/NetworkAdded/index.tsx
index 299781879c2..8a00786072f 100644
--- a/app/components/UI/NetworkModal/NetworkAdded/index.tsx
+++ b/app/components/UI/NetworkModal/NetworkAdded/index.tsx
@@ -1,15 +1,30 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
-import StyledButton from '../../StyledButton';
 import { strings } from '../../../../../locales/i18n';
-import Text from '../../../Base/Text';
-import { useTheme } from '../../../../util/theme';
 import { NetworkAddedBottomSheetSelectorsIDs } from '../../../../../e2e/selectors/Network/NetworkAddedBottomSheet.selectors';
+import BottomSheetHeader from '../../../../component-library/components/BottomSheets/BottomSheetHeader';
+import Text, {
+  TextVariant,
+} from '../../../../component-library/components/Texts/Text';
+import BottomSheetFooter, {
+  ButtonsAlignment,
+} from '../../../../component-library/components/BottomSheets/BottomSheetFooter';
+import {
+  ButtonProps,
+  ButtonVariants,
+  ButtonSize,
+} from '../../../../component-library/components/Buttons/Button/Button.types';
 
 // TODO: Replace "any" with type
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const createStyles = (colors: any) =>
+const createStyles = () =>
   StyleSheet.create({
+    header: {
+      padding: 0,
+    },
+    content: {
+      paddingVertical: 16,
+    },
     buttonView: {
       flexDirection: 'row',
       paddingVertical: 16,
@@ -17,19 +32,6 @@ const createStyles = (colors: any) =>
     base: {
       padding: 16,
     },
-    button: {
-      flex: 1,
-    },
-    cancel: {
-      marginRight: 8,
-      backgroundColor: colors.background.default,
-      borderColor: colors.border.default,
-
-      borderWidth: 1,
-    },
-    confirm: {
-      marginLeft: 8,
-    },
   });
 
 interface NetworkAddedProps {
@@ -40,38 +42,45 @@ interface NetworkAddedProps {
 
 const NetworkAdded = (props: NetworkAddedProps) => {
   const { nickname, closeModal, switchNetwork } = props;
-  const { colors } = useTheme();
-  const styles = createStyles(colors);
+  const styles = createStyles();
 
+  const buttonProps: ButtonProps[] = [
+    {
+      variant: ButtonVariants.Secondary,
+      size: ButtonSize.Lg,
+      onPress: closeModal,
+      label: strings('networks.close'),
+      testID: NetworkAddedBottomSheetSelectorsIDs.CLOSE_NETWORK_BUTTON,
+    },
+    {
+      variant: ButtonVariants.Primary,
+      size: ButtonSize.Lg,
+      onPress: switchNetwork,
+      label: strings('networks.switch_network'),
+      testID: NetworkAddedBottomSheetSelectorsIDs.SWITCH_NETWORK_BUTTON,
+    },
+  ];
   return (
     <View style={styles.base}>
-      <Text centered bold black big>
+      <BottomSheetHeader style={styles.header}>
         {strings('networks.new_network')}
-      </Text>
-      <Text centered>
-        <Text bold>{`"${strings('networks.network_name', {
-          networkName: nickname ?? '',
-        })}"`}</Text>
-        <Text>{strings('networks.network_added')}</Text>
-      </Text>
-      <View style={styles.buttonView}>
-        <StyledButton
-          type={'cancel'}
-          testID={NetworkAddedBottomSheetSelectorsIDs.CLOSE_NETWORK_BUTTON}
-          onPress={closeModal}
-          containerStyle={[styles.button, styles.cancel]}
-        >
-          {strings('networks.close')}
-        </StyledButton>
-        <StyledButton
-          type={'confirm'}
-          onPress={switchNetwork}
-          testID={NetworkAddedBottomSheetSelectorsIDs.SWITCH_NETWORK_BUTTON}
-          containerStyle={[styles.button, styles.confirm]}
-        >
-          {strings('networks.switch_network')}
-        </StyledButton>
+      </BottomSheetHeader>
+      <View style={styles.content}>
+        <Text>
+          <Text variant={TextVariant.BodyMDBold}>
+            {`"${strings('networks.network_name', {
+              networkName: nickname ?? '',
+            })}"`}
+          </Text>
+          <Text variant={TextVariant.BodyMD}>
+            {strings('networks.network_added')}
+          </Text>
+        </Text>
       </View>
+      <BottomSheetFooter
+        buttonsAlignment={ButtonsAlignment.Horizontal}
+        buttonPropsArray={buttonProps}
+      />
     </View>
   );
 };