balance page ui

nym-wallet/src/components/NymCard.tsx

@@ -12,16 +12,17 @@ const CardContentNoPadding = styled(CardContent)(() => ({
 
 export const NymCard: React.FC<{
   title: string | React.ReactElement;
+  titleSx?: object;
   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

@@ -40,12 +40,12 @@ export const ApplicationLayout: React.FC = ({ children }) => {
             <Nav />
           </Box>
           {appVersion && (
-            <Box color="#888" mt={8}>
+            <Box color="#888" 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 />}