style: accordions on home screen

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
-          title={`Account ${currentIndex + 1}`}
-          expanded={expanded}
-          onPress={handlePress}
-        >
+        <Accordion expanded={expanded} onClick={handlePress}>
+          <AccordionSummary
+            expandIcon={<ExpandMoreIcon />}
+          >{`Account ${currentIndex + 1}`}</AccordionSummary>
           {renderAccountItems()}
-        </List.Accordion>
+        </Accordion>
 
         <Stack direction="row" spacing={3} sx={{ mt: 4 }}>
           <LoadingButton

src/components/NetworkDropdown.tsx

@@ -1,10 +1,12 @@
-import React, { useState } from 'react';
-import { View } from 'react-native';
-import { List } from 'react-native-paper';
+import React, { useState } from "react";
+import { View } from "react-native";
+import { List } from "react-native-paper";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 
-import { NetworkDropdownProps, NetworksDataState } from '../types';
-import styles from '../styles/stylesheet';
-import { useNetworks } from '../context/NetworksContext';
+import { NetworkDropdownProps, NetworksDataState } from "../types";
+import styles from "../styles/stylesheet";
+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
-        title={selectedNetwork!.networkName}
-        expanded={expanded}
-        onPress={() => setExpanded(!expanded)}>
-        {networksData.map(networkData => (
+      <Accordion expanded={expanded} onClick={() => setExpanded(!expanded)}>
+        <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+          {selectedNetwork!.networkName}
+        </AccordionSummary>
+
+        {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",
+    },
   },
 });