improve typing

nym-wallet/src/components/Accounts/AccountOverview.tsx

@@ -6,7 +6,15 @@ import { AccountAvatar } from './AccountAvatar';
 export const AccountOverview = ({ account, onClick }: { account: AccountEntry; onClick: () => void }) => (
   <Button
     startIcon={<AccountAvatar name={account.id} />}
-    sx={{ color: 'text.primary' }}
+    sx={{
+      color: 'text.primary',
+      '&:hover': (t) =>
+        t.palette.mode === 'dark'
+          ? {
+              backgroundColor: 'rgba(255, 255, 255, 0.08)',
+            }
+          : {},
+    }}
     onClick={onClick}
     disableRipple
   >

nym-wallet/src/components/NetworkSelector.tsx

@@ -40,7 +40,16 @@ export const NetworkSelector = () => {
       <Button
         variant="text"
         color="primary"
-        sx={{ color: 'text.primary' }}
+        sx={{
+          color: 'text.primary',
+          fontSize: 14,
+          '&:hover': (t) =>
+            t.palette.mode === 'dark'
+              ? {
+                  backgroundColor: 'rgba(255, 255, 255, 0.08)',
+                }
+              : {},
+        }}
         onClick={handleClick}
         disableElevation
         endIcon={<ArrowDropDown sx={{ color: (theme) => `1px solid ${theme.palette.text.primary}` }} />}

nym-wallet/src/components/NymCard.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { SxProps } from '@mui/material';
 import { Box, Card, CardContent, CardHeader } from '@mui/material';
 import { styled, Theme } from '@mui/material/styles';
 import { Title } from './Title';
@@ -12,16 +13,17 @@ const CardContentNoPadding = styled(CardContent)(() => ({
 
 export const NymCard: React.FC<{
   title: string | React.ReactElement;
+  titleSx?: SxProps;
   subheader?: string;
   Action?: React.ReactNode;
   Icon?: React.ReactNode;
   noPadding?: boolean;
   borderless?: boolean;
   dataTestid?: string;
-}> = ({ title, subheader, Action, Icon, noPadding, borderless, children, dataTestid }) => (
+}> = ({ title, titleSx, subheader, Action, Icon, noPadding, borderless, children, dataTestid }) => (
   <Card variant="outlined" sx={{ overflow: 'auto', ...(borderless && { border: 'none', dropShadow: 'none' }) }}>
     <CardHeader
-      sx={{ p: 3, color: (theme: Theme) => theme.palette.text.primary }}
+      sx={{ p: 3, color: (theme: Theme) => theme.palette.text.primary, ...titleSx }}
       title={<Title title={title} Icon={Icon} />}
       subheader={subheader}
       data-testid={dataTestid || title}

nym-wallet/src/layouts/AppLayout.tsx

@@ -39,12 +39,12 @@ export const ApplicationLayout: React.FC = ({ children }) => {
             <Nav />
           </Box>
           {appVersion && (
-            <Box color="#888" ml={5} mt={8}>
+            <Box color="#888" ml={5} mt={8} fontSize={14}>
               Version {appVersion}
             </Box>
           )}
         </Box>
-        <Container maxWidth="xl">
+        <Container maxWidth="xl" sx={{ px: { sm: 5 } }}>
           <AppBar />
           <Box overflow="auto" sx={{ height: () => `calc(100% - ${theme.spacing(10)})` }}>
             {children}

nym-wallet/src/pages/balance/balance.tsx

@@ -14,6 +14,7 @@ export const BalanceCard = () => {
   return (
     <NymCard
       title="Balance"
+      titleSx={{ fontSize: 20 }}
       data-testid="check-balance"
       borderless
       Action={<ClientAddress withCopy showEntireAddress />}