From 7b72631206f8840e598fa33cf54ff660bee1dc21 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   | 27 ++++++++++++++-------------
 2 files changed, 30 insertions(+), 13 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 6105dec..4fb3f1e 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, Portal, Snackbar } from "@mui/material";
+import { Button, Divider, Portal, Snackbar } from "@mui/material";
 
 import { NativeStackNavigationProp } from "@react-navigation/native-stack";
 import { useNavigation } from "@react-navigation/native";
@@ -19,6 +19,7 @@ import { NetworksDataState, StackParamsList } from "../types";
 import { useNetworks } from "../context/NetworksContext";
 import ImportWalletDialog from "../components/ImportWalletDialog";
 import { MnemonicDialog } from "../components/MnemonicDialog";
+import { Container } from "../components/Container";
 
 const WCLogo = () => {
   return (
@@ -148,7 +149,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>
@@ -203,17 +204,17 @@ const HomeScreen = () => {
           hideDialog={hideResetDialog}
           onConfirm={confirmResetWallet}
         />
-        <Portal>
-          <Snackbar
-            open={toastVisible}
-            autoHideDuration={3000}
-            message={invalidMnemonicError}
-            onClose={() => setToastVisible(false)}
-            anchorOrigin={{ horizontal: "center", vertical: "bottom" }}
-            ContentProps={{ style: { backgroundColor: "red", color: "white" } }}
-          />
-        </Portal>
-      </Box>
+      </Container>
+      <Portal>
+        <Snackbar
+          open={toastVisible}
+          autoHideDuration={3000}
+          message={invalidMnemonicError}
+          onClose={() => setToastVisible(false)}
+          anchorOrigin={{ horizontal: "center", vertical: "bottom" }}
+          ContentProps={{ style: { backgroundColor: "red", color: "white" } }}
+        />
+      </Portal>
     </View>
   );
 };