update app layout to use mui v5 system

nym-wallet/src/layouts/AppLayout.tsx

@@ -1,31 +1,31 @@
 import React from 'react'
 import { Box, Divider } from '@mui/material'
-import { AddressCard, BalanceCard, Nav } from '../components'
+import { Nav } from '../components'
 import Logo from '../images/logo-background.svg'
 
 export const ApplicationLayout: React.FC = ({ children }) => {
   return (
-    <div
-      style={{
+    <Box
+      sx={{
         height: '100vh',
         width: '100vw',
         display: 'grid',
-        gridTemplateColumns: '400px auto',
+        gridTemplateColumns: '240px auto',
         gridTemplateRows: '100%',
         gridColumnGap: '8px',
         gridRowGap: '0px',
         overflow: 'hidden',
       }}
     >
-      <div
-        style={{
+      <Box
+        sx={{
           gridArea: '1 / 1 / 2 / 2',
           background: '#121726',
           overflow: 'auto',
         }}
       >
         <Box sx={{ display: 'flex', justifyContent: 'center', marginTop: 6 }}>
-          <img src={Logo} style={{ width: 75 }} />
+          <img src={Logo} style={{ width: 45 }} />
         </Box>
         <Divider
           light
@@ -33,13 +33,13 @@ export const ApplicationLayout: React.FC = ({ children }) => {
           sx={{ bgcolor: (theme) => theme.palette.grey[100], marginTop: 6 }}
         />
 
-        <div style={{ marginTop: 7 }}>
+        <Box sx={{ marginTop: 7 }}>
           <Nav />
-        </div>
-        <div />
-      </div>
-      <div
-        style={{
+        </Box>
+        <Box />
+      </Box>
+      <Box
+        sx={{
           gridArea: '1 / 2 / 2 / 3',
           display: 'flex',
           alignItems: 'center',
@@ -47,7 +47,7 @@ export const ApplicationLayout: React.FC = ({ children }) => {
         }}
       >
         {children}
-      </div>
-    </div>
+      </Box>
+    </Box>
   )
 }