From b6cd5dedddcc7e004b52ccaf3fb0b4d535b4aaaf Mon Sep 17 00:00:00 2001
From: Cody Bender <codyfbender@gmail.com>
Date: Fri, 9 Aug 2024 13:42:15 -0400
Subject: [PATCH] style: container

---
 src/components/Container.tsx | 16 ++++++++++++++++
 src/screens/HomeScreen.tsx   |  7 ++++---
 2 files changed, 20 insertions(+), 3 deletions(-)
 create mode 100644 src/components/Container.tsx

diff --git a/src/components/Container.tsx b/src/components/Container.tsx
new file mode 100644
index 0000000..7ba867b
--- /dev/null
+++ b/src/components/Container.tsx
@@ -0,0 +1,16 @@
+import { Box } from "@mui/material";
+import React, { PropsWithChildren } from "react";
+
+export const Container: React.FC<PropsWithChildren> = ({ children }) => (
+  <Box
+    sx={{
+      maxWidth: "752px",
+      marginX: "auto",
+      backgroundColor: "background.paper",
+      padding: 3,
+      borderRadius: 2,
+    }}
+  >
+    {children}
+  </Box>
+);
diff --git a/src/screens/HomeScreen.tsx b/src/screens/HomeScreen.tsx
index 39455c0..246218d 100644
--- a/src/screens/HomeScreen.tsx
+++ b/src/screens/HomeScreen.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { View, ActivityIndicator, Image } from "react-native";
 import { Text } from "react-native-paper";
-import { Box, Button, Divider } from "@mui/material";
+import { Button, Divider } from "@mui/material";
 
 import { NativeStackNavigationProp } from "@react-navigation/native-stack";
 import { useNavigation } from "@react-navigation/native";
@@ -18,6 +18,7 @@ import { useAccounts } from "../context/AccountsContext";
 import { useWalletConnect } from "../context/WalletConnectContext";
 import { NetworksDataState, StackParamsList } from "../types";
 import { useNetworks } from "../context/NetworksContext";
+import { Container } from "../components/Container";
 
 const WCLogo = () => {
   return (
@@ -129,7 +130,7 @@ const HomeScreen = () => {
 
   return (
     <View style={styles.appContainer}>
-      <Box sx={{ maxWidth: "752px", marginX: "auto" }}>
+      <Container>
         {!isAccountsFetched ? (
           <View style={styles.spinnerContainer}>
             <Text style={styles.LoadingText}>Loading...</Text>
@@ -169,7 +170,7 @@ const HomeScreen = () => {
           hideDialog={hideResetDialog}
           onConfirm={confirmResetWallet}
         />
-      </Box>
+      </Container>
     </View>
   );
 };