From b4e9ebd9ccfb39adc36a6f797601f6796c73ca53 Mon Sep 17 00:00:00 2001
From: Pierre Dommerc <dommerc.pierre@gmail.com>
Date: Mon, 13 Jun 2022 11:03:16 +0200
Subject: [PATCH] [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 |  2 +-
 nym-wallet/src/components/Nav.tsx                    |  4 ++--
 nym-wallet/src/layouts/AppLayout.tsx                 |  4 ++--
 nym-wallet/src/layouts/PageLayout.tsx                |  5 ++++-
 nym-wallet/src/pages/balance/balance.tsx             |  2 +-
 nym-wallet/src/theme/mui-theme.d.ts                  |  5 ++++-
 nym-wallet/src/theme/theme.tsx                       | 12 +++++++++---
 7 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/nym-wallet/src/components/Accounts/AccountAvatar.tsx b/nym-wallet/src/components/Accounts/AccountAvatar.tsx
index 95d1fcfd16..5f71df533e 100644
--- a/nym-wallet/src/components/Accounts/AccountAvatar.tsx
+++ b/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>
 );
diff --git a/nym-wallet/src/components/Nav.tsx b/nym-wallet/src/components/Nav.tsx
index 6cc07ab359..6afbca3215 100644
--- a/nym-wallet/src/components/Nav.tsx
+++ b/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}
               />
diff --git a/nym-wallet/src/layouts/AppLayout.tsx b/nym-wallet/src/layouts/AppLayout.tsx
index 2cb54855c6..028c4c10e7 100644
--- a/nym-wallet/src/layouts/AppLayout.tsx
+++ b/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>
diff --git a/nym-wallet/src/layouts/PageLayout.tsx b/nym-wallet/src/layouts/PageLayout.tsx
index f40cbb7d6a..d6ce46f0b9 100644
--- a/nym-wallet/src/layouts/PageLayout.tsx
+++ b/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">
diff --git a/nym-wallet/src/pages/balance/balance.tsx b/nym-wallet/src/pages/balance/balance.tsx
index 0bc8cc02bd..63dcb3a663 100644
--- a/nym-wallet/src/pages/balance/balance.tsx
+++ b/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 && (
diff --git a/nym-wallet/src/theme/mui-theme.d.ts b/nym-wallet/src/theme/mui-theme.d.ts
index 04ac54587e..ac63a4dd5c 100644
--- a/nym-wallet/src/theme/mui-theme.d.ts
+++ b/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 {
diff --git a/nym-wallet/src/theme/theme.tsx b/nym-wallet/src/theme/theme.tsx
index 9935b4761e..261e51c9de 100644
--- a/nym-wallet/src/theme/theme.tsx
+++ b/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,
 });
 
 //-----------------------------------------------------------------------------------------------