From 1e0a0e66cca4c37ae015873c7ce3af33847b2869 Mon Sep 17 00:00:00 2001
From: Cody Bender <codyfbender@gmail.com>
Date: Fri, 9 Aug 2024 13:39:08 -0400
Subject: [PATCH] style: accordions on home screen

---
 package.json                       |  1 +
 src/components/Accounts.tsx        | 20 +++++++++++++-------
 src/components/NetworkDropdown.tsx | 27 +++++++++++++++------------
 src/index.tsx                      | 13 +++++++++++++
 yarn.lock                          |  7 +++++++
 5 files changed, 49 insertions(+), 19 deletions(-)

diff --git a/package.json b/package.json
index fd29103..3a8cf52 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/Accounts.tsx b/src/components/Accounts.tsx
index 426f3e6..ee7eb44 100644
--- a/src/components/Accounts.tsx
+++ b/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
diff --git a/src/components/NetworkDropdown.tsx b/src/components/NetworkDropdown.tsx
index 12f7e76..703c387 100644
--- a/src/components/NetworkDropdown.tsx
+++ b/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>
   );
 };
diff --git a/src/index.tsx b/src/index.tsx
index 1cd34ee..b1b1840 100644
--- a/src/index.tsx
+++ b/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",
+    },
   },
 });
 
diff --git a/yarn.lock b/yarn.lock
index 5122fa6..054ff5b 100644
--- a/yarn.lock
+++ b/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"