forked from cerc-io/laconic-wallet-web
style: container
This commit is contained in:
parent
45e045d956
commit
7b72631206
16
src/components/Container.tsx
Normal file
16
src/components/Container.tsx
Normal 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>
|
||||||
|
);
|
@ -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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user