style: container

This commit is contained in:
Cody Bender 2024-08-09 13:42:15 -04:00
parent 45e045d956
commit 7b72631206
2 changed files with 30 additions and 13 deletions

View File

@ -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>
);

View File

@ -1,7 +1,7 @@
import React, { useCallback, useEffect, useState } from "react"; import React, { useCallback, useEffect, useState } from "react";
import { View, ActivityIndicator, Image } from "react-native"; import { View, ActivityIndicator, Image } from "react-native";
import { Text } from "react-native-paper"; 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 { NativeStackNavigationProp } from "@react-navigation/native-stack";
import { useNavigation } from "@react-navigation/native"; import { useNavigation } from "@react-navigation/native";
@ -19,6 +19,7 @@ import { NetworksDataState, StackParamsList } from "../types";
import { useNetworks } from "../context/NetworksContext"; import { useNetworks } from "../context/NetworksContext";
import ImportWalletDialog from "../components/ImportWalletDialog"; import ImportWalletDialog from "../components/ImportWalletDialog";
import { MnemonicDialog } from "../components/MnemonicDialog"; import { MnemonicDialog } from "../components/MnemonicDialog";
import { Container } from "../components/Container";
const WCLogo = () => { const WCLogo = () => {
return ( return (
@ -148,7 +149,7 @@ const HomeScreen = () => {
return ( return (
<View style={styles.appContainer}> <View style={styles.appContainer}>
<Box sx={{ maxWidth: "752px", marginX: "auto" }}> <Container>
{!isAccountsFetched ? ( {!isAccountsFetched ? (
<View style={styles.spinnerContainer}> <View style={styles.spinnerContainer}>
<Text style={styles.LoadingText}>Loading...</Text> <Text style={styles.LoadingText}>Loading...</Text>
@ -203,17 +204,17 @@ const HomeScreen = () => {
hideDialog={hideResetDialog} hideDialog={hideResetDialog}
onConfirm={confirmResetWallet} onConfirm={confirmResetWallet}
/> />
<Portal> </Container>
<Snackbar <Portal>
open={toastVisible} <Snackbar
autoHideDuration={3000} open={toastVisible}
message={invalidMnemonicError} autoHideDuration={3000}
onClose={() => setToastVisible(false)} message={invalidMnemonicError}
anchorOrigin={{ horizontal: "center", vertical: "bottom" }} onClose={() => setToastVisible(false)}
ContentProps={{ style: { backgroundColor: "red", color: "white" } }} anchorOrigin={{ horizontal: "center", vertical: "bottom" }}
/> ContentProps={{ style: { backgroundColor: "red", color: "white" } }}
</Portal> />
</Box> </Portal>
</View> </View>
); );
}; };