style: container

package.json

@@ -13,6 +13,7 @@
     "@ethersproject/shims": "^5.7.0",
     "@hookform/resolvers": "^3.3.4",
     "@json-rpc-tools/utils": "^1.7.6",
+    "@mui/icons-material": "^5.16.7",
     "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.4",
     "@react-navigation/elements": "^1.3.30",

src/components/Accounts.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { TouchableOpacity, View } from "react-native";
 import { List } from "react-native-paper";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 
 import { useNavigation } from "@react-navigation/native";
 import { NativeStackNavigationProp } from "@react-navigation/native-stack";
@@ -16,7 +17,13 @@ import ConfirmDialog from "./ConfirmDialog";
 import { getNamespaces } from "../utils/wallet-connect/helpers";
 import ShowPKDialog from "./ShowPKDialog";
 import { setInternetCredentials } from "../utils/key-store";
-import { Button, Link, Stack } from "@mui/material";
+import {
+  Accordion,
+  AccordionSummary,
+  Button,
+  Link,
+  Stack,
+} from "@mui/material";
 import { LoadingButton } from "@mui/lab";
 
 const Accounts = () => {
@@ -124,13 +131,12 @@ const Accounts = () => {
           updateAccounts={updateAccounts}
           pathCode={pathCode}
         />
-        <List.Accordion
+        <Accordion expanded={expanded} onClick={handlePress}>
-          title={`Account ${currentIndex + 1}`}
+          <AccordionSummary
-          expanded={expanded}
+            expandIcon={<ExpandMoreIcon />}
-          onPress={handlePress}
+          >{`Account ${currentIndex + 1}`}</AccordionSummary>
-        >
           {renderAccountItems()}
-        </List.Accordion>
+        </Accordion>
 
         <Stack direction="row" spacing={3} sx={{ mt: 4 }}>
           <LoadingButton

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

src/components/NetworkDropdown.tsx

@@ -1,10 +1,12 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
-import { View } from 'react-native';
+import { View } from "react-native";
-import { List } from 'react-native-paper';
+import { List } from "react-native-paper";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 
-import { NetworkDropdownProps, NetworksDataState } from '../types';
+import { NetworkDropdownProps, NetworksDataState } from "../types";
-import styles from '../styles/stylesheet';
+import styles from "../styles/stylesheet";
-import { useNetworks } from '../context/NetworksContext';
+import { useNetworks } from "../context/NetworksContext";
+import { Accordion, AccordionSummary } from "@mui/material";
 
 const NetworkDropdown = ({ updateNetwork }: NetworkDropdownProps) => {
   const { networksData, selectedNetwork, setSelectedNetwork } = useNetworks();
@@ -19,18 +21,19 @@ const NetworkDropdown = ({ updateNetwork }: NetworkDropdownProps) => {
 
   return (
     <View style={styles.networkDropdown}>
-      <List.Accordion
+      <Accordion expanded={expanded} onClick={() => setExpanded(!expanded)}>
-        title={selectedNetwork!.networkName}
+        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-        expanded={expanded}
+          {selectedNetwork!.networkName}
-        onPress={() => setExpanded(!expanded)}>
+        </AccordionSummary>
-        {networksData.map(networkData => (
+
+        {networksData.map((networkData) => (
           <List.Item
             key={networkData.networkId}
             title={networkData.networkName}
             onPress={() => handleNetworkPress(networkData)}
           />
         ))}
-      </List.Accordion>
+      </Accordion>
     </View>
   );
 };

src/index.tsx

@@ -39,6 +39,15 @@ const navigationTheme: typeof DarkTheme = {
 
 const muiTheme = createTheme({
   components: {
+    MuiAccordion: {
+      defaultProps: {
+        sx: {
+          border: "1px solid #48474F",
+          borderBottomRightRadius: 3,
+          borderBottomLeftRadius: 3,
+        },
+      },
+    },
     MuiButton: {
       defaultProps: {
         color: "primary",
@@ -71,6 +80,10 @@ const muiTheme = createTheme({
     error: {
       main: "#B20710",
     },
+    background: {
+      default: "#0F0F0F",
+      paper: "#18181A",
+    },
   },
 });
 

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

yarn.lock

@@ -2602,6 +2602,13 @@
   resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.16.4.tgz#a34de72acd7e81fdbcc7eeb07786205e90dda148"
   integrity sha512-rNdHXhclwjEZnK+//3SR43YRx0VtjdHnUFhMSGYmAMJve+KiwEja/41EYh8V3pZKqF2geKyfcFUenTfDTYUR4w==
 
+"@mui/icons-material@^5.16.7":
+  version "5.16.7"
+  resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.16.7.tgz#e27f901af792065efc9f3d75d74a66af7529a10a"
+  integrity sha512-UrGwDJCXEszbDI7yV047BYU5A28eGJ79keTCP4cc74WyncuVrnurlmIRxaHL8YK+LI1Kzq+/JM52IAkNnv4u+Q==
+  dependencies:
+    "@babel/runtime" "^7.23.9"
+
 "@mui/lab@^5.0.0-alpha.173":
   version "5.0.0-alpha.173"
   resolved "https://registry.yarnpkg.com/@mui/lab/-/lab-5.0.0-alpha.173.tgz#a0f9696d93a765b48d69a7da5aaca0affa510ae8"