[wallet] style changes to match new design and layout (#1336)

* feat(wallet): style changes to match new design

* fix(wallet): style

* feat(wallet): remove useless color

* feat(wallet): some style changes

in balance page, show entire address
set a small size to avatar account
set vertical alignment to start for page cards

* feat(wallet): fix padding

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

@@ -4,5 +4,5 @@ import stc from 'string-to-color';
 import { TAccount } from 'src/types';
 
 export const AccountAvatar = ({ name }: Pick<TAccount, 'name'>) => (
-  <Avatar sx={{ bgcolor: stc(name), width: 35, height: 35 }}>{name?.split('')[0]}</Avatar>
+  <Avatar sx={{ bgcolor: stc(name), width: 20, height: 20 }}>{name?.split('')[0]}</Avatar>
 );

nym-wallet/src/components/Nav.tsx

@@ -82,14 +82,14 @@ export const Nav = () => {
               <ListItemIcon
                 sx={{
                   minWidth: 30,
-                  color: location.pathname === route ? 'primary.main' : 'common.white',
+                  color: location.pathname === route ? 'primary.main' : 'text.primary',
                 }}
               >
                 <Icon sx={{ fontSize: 20 }} />
               </ListItemIcon>
               <ListItemText
                 sx={{
-                  color: location.pathname === route ? 'primary.main' : 'common.white',
+                  color: location.pathname === route ? 'primary.main' : 'text.primary',
                 }}
                 primary={label}
               />

nym-wallet/src/layouts/AppLayout.tsx

@@ -24,7 +24,7 @@ export const ApplicationLayout: React.FC = ({ children }) => {
       >
         <Box
           sx={{
-            background: '#121726',
+            background: (t) => t.palette.nym.nymWallet.nav.background,
             overflow: 'auto',
             py: 3,
             px: 5,
@@ -35,7 +35,7 @@ export const ApplicationLayout: React.FC = ({ children }) => {
         >
           <Box>
             <Box sx={{ mb: 4 }}>
-              <NymWordmark height={14} fill={theme.palette.background.paper} />
+              <NymWordmark height={14} />
             </Box>
             <Nav />
           </Box>

nym-wallet/src/layouts/PageLayout.tsx

@@ -4,10 +4,13 @@ import { Box } from '@mui/material';
 export const PageLayout: React.FC<{ position?: 'flex-start' | 'flex-end' }> = ({ position, children }) => (
   <Box
     sx={{
-      height: 'calc(100% - 65px)',
+      maxHeight: 'calc(100% - 65px)',
       display: 'flex',
+      flexFlow: 'column wrap',
+      justifyContent: 'start',
       alignItems: position || 'center',
       overflow: 'auto',
+      mt: 2,
     }}
   >
     <Box width="100%" margin="auto">

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

@@ -12,7 +12,7 @@ export const BalanceCard = () => {
   }, []);
 
   return (
-    <NymCard title="Balance" data-testid="check-balance" Action={<ClientAddress withCopy />}>
+    <NymCard title="Balance" data-testid="check-balance" Action={<ClientAddress withCopy showEntireAddress />}>
       <Grid container direction="column" spacing={2}>
         <Grid item>
           {userBalance.error && (

nym-wallet/src/theme/mui-theme.d.ts

@@ -52,13 +52,16 @@ declare module '@mui/material/styles' {
     topNav: {
       background: string;
     };
+    nav: {
+      background: string;
+    };
   }
 
   /**
    * A palette definition only for the Nym Wallet that extends the Nym palette
    */
   interface NymWalletPalette {
-    nymWallet: {};
+    nymWallet: NymPaletteVariant;
   }
 
   interface NymPaletteAndNymWalletPalette {

nym-wallet/src/theme/theme.tsx

@@ -44,12 +44,15 @@ const darkMode: NymPaletteVariant = {
   topNav: {
     background: '#111826',
   },
+  nav: {
+    background: '#FFFFFF',
+  },
 };
 
 const lightMode: NymPaletteVariant = {
   mode: 'light',
   background: {
-    main: '#F2F2F2',
+    main: '#E5E5E5',
     paper: '#FFFFFF',
   },
   text: {
@@ -58,6 +61,9 @@ const lightMode: NymPaletteVariant = {
   topNav: {
     background: '#111826',
   },
+  nav: {
+    background: '#FFFFFF',
+  },
 };
 
 /**
@@ -66,8 +72,8 @@ const lightMode: NymPaletteVariant = {
  * IMPORTANT: do not export this constant, always use the MUI `useTheme` hook to get the correct
  * colours for dark/light mode.
  */
-const nymWalletPalette = (_variant: NymPaletteVariant): NymWalletPalette => ({
-  nymWallet: {},
+const nymWalletPalette = (variant: NymPaletteVariant): NymWalletPalette => ({
+  nymWallet: variant,
 });
 
 //-----------------------------------------------------------------------------------------------