add icons to card headers and balance padding

nym-wallet/src/components/AppBar.tsx

@@ -1,9 +1,10 @@
-import React, { useContext, useEffect } from 'react'
+import React, { useContext } from 'react'
 import { AppBar as MuiAppBar, Divider, Grid, IconButton, Toolbar, Typography, useMediaQuery } from '@mui/material'
 import { Box } from '@mui/system'
-import { Logout, SettingsOutlined } from '@mui/icons-material'
+import { Logout } from '@mui/icons-material'
 import { ClientContext } from '../context/main'
 import { CopyToClipboard } from '.'
+import { Node } from '../svg-icons/node'
 
 export const AppBar = () => {
   const { userBalance, clientDetails, showSettings, logOut, handleShowSettings } = useContext(ClientContext)
@@ -20,7 +21,6 @@ export const AppBar = () => {
             {matches && (
               <>
                 <Divider orientation="vertical" variant="middle" flexItem sx={{ mr: 1 }} />
-
                 <Grid item>
                   <AppBarItem
                     primaryText="Address"
@@ -38,7 +38,7 @@ export const AppBar = () => {
                 sx={{ color: showSettings ? 'primary.main' : 'nym.background.dark' }}
                 size="small"
               >
-                <SettingsOutlined fontSize="small" />
+                <Node />
               </IconButton>
             </Grid>
             <Grid item>

nym-wallet/src/components/NymCard.tsx

@@ -1,27 +1,28 @@
 import React from 'react'
-import { Card, CardContent, CardHeader } from '@mui/material'
+import { Box, Card, CardContent, CardHeader } from '@mui/material'
 import { styled } from '@mui/material/styles'
 
 export const NymCard: React.FC<{
   title: string | React.ReactElement
   subheader?: string
   Action?: React.ReactNode
+  Icon?: any
   noPadding?: boolean
-}> = ({ title, subheader, Action, noPadding, children }) => {
+}> = ({ title, subheader, Action, Icon, noPadding, children }) => {
   return (
     <Card variant="outlined" sx={{ overflow: 'auto' }}>
       <CardHeader
-        title={title}
+        sx={{ p: 3, color: 'nym.background.dark' }}
+        title={
+          <Box display="flex" alignItems="center">
+            {Icon && <Icon sx={{ mr: 1 }} />} {title}
+          </Box>
+        }
         subheader={subheader}
         data-testid={title}
         titleTypographyProps={{ variant: 'h5' }}
         subheaderTypographyProps={{ variant: 'subtitle1' }}
         action={Action}
-        sx={{
-          color: 'nym.background.dark',
-          py: 2.5,
-          px: 4,
-        }}
       />
       {noPadding ? <CardContentNoPadding>{children}</CardContentNoPadding> : <CardContent>{children}</CardContent>}
     </Card>

nym-wallet/src/images/node.svg

@@ -0,0 +1 @@
+

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

@@ -1,6 +1,6 @@
 import React, { useContext, useEffect } from 'react'
 import { Alert, Button, Grid, Link, Typography } from '@mui/material'
-import { OpenInNew } from '@mui/icons-material'
+import { AccountBalanceWalletOutlined, OpenInNew } from '@mui/icons-material'
 import { NymCard } from '../../components'
 import { Layout } from '../../layouts'
 
@@ -15,7 +15,7 @@ export const Balance = () => {
 
   return (
     <Layout>
-      <NymCard title="Balance" data-testid="check-balance">
+      <NymCard title="Balance" data-testid="check-balance" Icon={AccountBalanceWalletOutlined}>
         <Grid container direction="column" spacing={2}>
           <Grid item>
             {userBalance.error && (

nym-wallet/src/pages/bond/BondForm.tsx

@@ -125,7 +125,7 @@ export const BondForm = ({
 
   return (
     <FormControl fullWidth>
-      <Box sx={{ padding: [3, 5] }}>
+      <Box sx={{ p: 3 }}>
         <Grid container spacing={3}>
           <Grid container item justifyContent="space-between">
             <Grid item>

nym-wallet/src/pages/bond/index.tsx

@@ -8,6 +8,7 @@ import { getGasFee, unbond } from '../../requests'
 import { TFee } from '../../types'
 import { useCheckOwnership } from '../../hooks/useCheckOwnership'
 import { ClientContext } from '../../context/main'
+import { Bond as BondIcon } from '../../svg-icons/bond'
 import { SuccessView } from './SuccessView'
 
 export const Bond = () => {
@@ -35,7 +36,7 @@ export const Bond = () => {
 
   return (
     <Layout>
-      <NymCard title="Bond" subheader="Bond a node or gateway" noPadding>
+      <NymCard title="Bond" subheader="Bond a node or gateway" noPadding Icon={BondIcon}>
         {ownership?.hasOwnership && (
           <Alert
             severity="warning"

nym-wallet/src/pages/delegate/DelegateForm.tsx

@@ -1,8 +1,8 @@
 import React, { useContext } from 'react'
 import { Box, Button, CircularProgress, FormControl, Grid, InputAdornment, TextField, Typography } from '@mui/material'
+import { yupResolver } from '@hookform/resolvers/yup'
 import { useForm } from 'react-hook-form'
 import { EnumNodeType, TFee } from '../../types'
-import { yupResolver } from '@hookform/resolvers/yup'
 import { validationSchema } from './validationSchema'
 import { ClientContext, MAJOR_CURRENCY } from '../../context/main'
 import { delegate, majorToMinor } from '../../requests'
@@ -71,7 +71,7 @@ export const DelegateForm = ({
 
   return (
     <FormControl fullWidth>
-      <Box sx={{ padding: [3, 5] }}>
+      <Box sx={{ p: 3 }}>
         <Grid container spacing={3}>
           <Grid item xs={12}>
             <TextField

nym-wallet/src/pages/delegate/index.tsx

@@ -7,6 +7,7 @@ import { EnumRequestStatus, RequestStatus } from '../../components/RequestStatus
 import { TFee } from '../../types'
 import { getGasFee } from '../../requests'
 import { SuccessView } from './SuccessView'
+import { Delegate as DelegateIcon } from '../../svg-icons'
 
 export const Delegate = () => {
   const [status, setStatus] = useState<EnumRequestStatus>(EnumRequestStatus.initial)
@@ -28,7 +29,13 @@ export const Delegate = () => {
 
   return (
     <Layout>
-      <NymCard title="Delegate" subheader="Delegate to mixnode" noPadding data-testid="delegateCard">
+      <NymCard
+        title="Delegate"
+        subheader="Delegate to mixnode"
+        noPadding
+        Icon={DelegateIcon}
+        data-testid="delegateCard"
+      >
         {isLoading && (
           <Box
             sx={{

nym-wallet/src/pages/receive/index.tsx

@@ -3,14 +3,15 @@ import QRCode from 'qrcode.react'
 import { Alert, Box, Stack, Typography } from '@mui/material'
 import { CopyToClipboard, NymCard } from '../../components'
 import { Layout } from '../../layouts'
-import { ClientContext } from '../../context/main'
+import { ClientContext, MAJOR_CURRENCY } from '../../context/main'
+import { ArrowBack } from '@mui/icons-material'
 
 export const Receive = () => {
   const { clientDetails } = useContext(ClientContext)
 
   return (
     <Layout>
-      <NymCard title="Receive Nym">
+      <NymCard title={`Receive ${MAJOR_CURRENCY}`} Icon={ArrowBack}>
         <Stack spacing={3} alignItems="center">
           <Alert severity="info" data-testid="receive-nym" sx={{ width: '100%' }}>
             You can receive tokens by providing this address to the sender

nym-wallet/src/pages/send/SendForm.tsx

@@ -13,8 +13,7 @@ export const SendForm = ({ transferFee }: { transferFee?: string }) => {
   return (
     <Grid container spacing={3}>
       <Grid item xs={12}>
-        <Typography variant="caption">Your address</Typography>
-        <Typography>{clientDetails?.client_address}</Typography>
+        <Typography variant="body2">Your address: {clientDetails?.client_address}</Typography>
       </Grid>
 
       <Grid item xs={12}>

nym-wallet/src/pages/send/SendWizard.tsx

@@ -102,7 +102,7 @@ export const SendWizard = () => {
 
   return (
     <FormProvider {...methods}>
-      <Box sx={{ pt: 3 }}>
+      <Box>
         <Stepper
           activeStep={activeStep}
           sx={{
@@ -147,8 +147,8 @@ export const SendWizard = () => {
             </Button>
           )}
           <Button
-            variant={activeStep > 0 ? 'contained' : 'text'}
-            color={activeStep > 0 ? 'primary' : 'inherit'}
+            variant="contained"
+            color="primary"
             disableElevation
             data-testid="button"
             onClick={activeStep === 0 ? handleNextStep : activeStep === 1 ? handleSend : handleFinish}

nym-wallet/src/pages/send/index.tsx

@@ -1,13 +1,14 @@
-import React, { useState } from 'react'
+import React from 'react'
 import { NymCard } from '../../components'
 import { SendWizard } from './SendWizard'
 import { Layout } from '../../layouts'
 import { MAJOR_CURRENCY } from '../../context/main'
+import { ArrowForward } from '@mui/icons-material'
 
 export const Send = () => {
   return (
     <Layout>
-      <NymCard title={`Send ${MAJOR_CURRENCY}`} noPadding>
+      <NymCard title={`Send ${MAJOR_CURRENCY}`} noPadding Icon={ArrowForward}>
         <SendWizard />
       </NymCard>
     </Layout>

nym-wallet/src/pages/settings/index.tsx

@@ -1,6 +1,5 @@
 import React, { useContext, useEffect, useState } from 'react'
-import { Alert, Box, Dialog, Typography } from '@mui/material'
-import { SettingsOutlined } from '@mui/icons-material'
+import { Alert, Box, Dialog } from '@mui/material'
 import { NymCard } from '../../components'
 import { ClientContext } from '../../context/main'
 import { Tabs } from './tabs'
@@ -10,6 +9,7 @@ import { NodeStats } from './node-stats'
 import { Overview } from './overview'
 import { getMixnodeBondDetails } from '../../requests'
 import { TMixnodeBondDetails } from '../../types'
+import { Node } from '../../svg-icons/node'
 
 const tabs = ['Profile', 'System variables', 'Node stats']
 
@@ -26,22 +26,20 @@ export const Settings = () => {
     if (showSettings) getBondDetails()
   }, [showSettings])
 
-  const handleTabChange = (event: React.SyntheticEvent, newTab: number) => setSelectedTab(newTab)
+  const handleTabChange = (_: React.SyntheticEvent, newTab: number) => setSelectedTab(newTab)
 
   return showSettings ? (
     <Dialog open={true} onClose={handleShowSettings} maxWidth="md" fullWidth>
       <NymCard
         title={
           <Box display="flex" alignItems="center">
-            <SettingsOutlined sx={{ mr: 1 }} /> Settings
+            <Node sx={{ mr: 1 }} />
+            <div>Settings</div>
           </Box>
         }
         noPadding
       >
         <>
-          <Typography variant="h5" sx={{ py: 2, px: 4 }}>
-            Node settings
-          </Typography>
           <Tabs tabs={tabs} selectedTab={selectedTab} onChange={handleTabChange} disabled={!mixnodeDetails} />
           <Overview details={mixnodeDetails} />
           {!mixnodeDetails && (

nym-wallet/src/pages/settings/profile.tsx

@@ -6,7 +6,7 @@ import { InfoTooltip } from '../../components/InfoToolTip'
 export const Profile = () => {
   return (
     <>
-      <Box sx={{ p: 4 }}>
+      <Box sx={{ p: 3 }}>
         <Stack spacing={3}>
           <TextField label="Mixnode name" disabled />
           <TextField multiline label="Mixnode description" rows={3} disabled />
@@ -21,7 +21,7 @@ export const Profile = () => {
           padding: 3,
         }}
       >
-        <Button variant="contained" color="primary" type="submit" disableElevation disabled>
+        <Button variant="contained" size="large" color="primary" type="submit" disableElevation disabled>
           Update
         </Button>
       </Box>

nym-wallet/src/pages/settings/system-variables.tsx

@@ -66,8 +66,8 @@ export const SystemVariables = ({
 
   return (
     <>
-      <Box sx={{ p: 4 }}>
-        <Stack spacing={3}>
+      <Box sx={{ p: 3 }}>
+        <Stack spacing={5}>
           <TextField
             {...register('profitMarginPercent', { valueAsNumber: true })}
             label="Profit margin"
@@ -80,20 +80,13 @@ export const SystemVariables = ({
             error={!!errors.profitMarginPercent}
             disabled={isSubmitting}
           />
-          <TextField
-            {...register('signature')}
-            label="Owner signature"
-            error={!!errors.signature}
-            helperText={!!errors.signature && errors.signature.message}
-            disabled={isSubmitting}
-          />
-          <Divider />
+
           <DataField
             title="Estimated reward"
             info="Estimated reward per epoch for this profit margin if your node is selected in the active set."
             Indicator={<Chip label="Coming soon" icon={<AccessTimeOutlined fontSize="small" />} />}
           />
-          <Divider />
+
           <DataField
             title="Chance of being in the active set"
             info="Probability of getting selected in the reward set (active and standby nodes) in the next epoch. The more your stake, the higher the chances to be selected"
@@ -105,7 +98,6 @@ export const SystemVariables = ({
             Indicator={<Chip label="Coming soon" icon={<AccessTimeOutlined fontSize="small" />} />}
           />
 
-          <Divider />
           <DataField
             title="Node stake saturation"
             info="Level of stake saturation for this node. Nodes receive more rewards the higher their saturation level, up to 100%. Beyond 100% no additional rewards are granted. The current stake saturation level is: 1 million NYM, computed as S/K where S is the total amount of tokens available to stakeholders and K is the number of nodes in the reward set."

nym-wallet/src/pages/unbond/index.tsx

@@ -5,6 +5,7 @@ import { Layout } from '../../layouts'
 import { useCheckOwnership } from '../../hooks/useCheckOwnership'
 import { ClientContext } from '../../context/main'
 import { unbond } from '../../requests'
+import { Unbond as UnbondIcon } from '../../svg-icons'
 
 export const Unbond = () => {
   const [isLoading, setIsLoading] = useState(false)
@@ -20,7 +21,7 @@ export const Unbond = () => {
 
   return (
     <Layout>
-      <NymCard title="Unbond" subheader="Unbond a mixnode or gateway" noPadding>
+      <NymCard title="Unbond" subheader="Unbond a mixnode or gateway" noPadding Icon={UnbondIcon}>
         {ownership?.hasOwnership && (
           <Alert
             severity="warning"

nym-wallet/src/pages/undelegate/UndelegateForm.tsx

@@ -60,7 +60,7 @@ export const UndelegateForm = ({
 
   return (
     <FormControl fullWidth>
-      <Box sx={{ p: 4 }}>
+      <Box sx={{ p: 3 }}>
         <Grid container spacing={3} direction="column">
           <Grid item xs={12}>
             <Controller
@@ -101,6 +101,7 @@ export const UndelegateForm = ({
           alignItems: 'center',
           justifyContent: 'flex-end',
           p: 3,
+          pt: 0,
         }}
       >
         <Button

nym-wallet/src/pages/undelegate/index.tsx

@@ -6,6 +6,7 @@ import { EnumRequestStatus, RequestStatus } from '../../components/RequestStatus
 import { Alert, AlertTitle, Box, Button, CircularProgress } from '@mui/material'
 import { getGasFee, getReverseMixDelegations } from '../../requests'
 import { TFee, TPagedDelegations } from '../../types'
+import { Undelegate as UndelegateIcon } from '../../svg-icons'
 
 export const Undelegate = () => {
   const [message, setMessage] = useState<string>()
@@ -42,7 +43,7 @@ export const Undelegate = () => {
 
   return (
     <Layout>
-      <NymCard title="Undelegate" subheader="Undelegate from a mixnode" noPadding>
+      <NymCard title="Undelegate" subheader="Undelegate from a mixnode" Icon={UndelegateIcon} noPadding>
         {isLoading && (
           <Box
             sx={{

nym-wallet/src/svg-icons/node.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { SvgIcon, SvgIconProps } from '@mui/material'
+
+export const Node = (props: SvgIconProps) => {
+  return (
+    <SvgIcon {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M15.7946 5.8275L9.99984 2.54815L4.2051 5.8275L9.59513 8.82196C9.84682 8.96179 10.1529 8.96179 10.4045 8.82196L15.7946 5.8275ZM16.5836 7.29574L11.2139 10.2789C11.0909 10.3473 10.9635 10.4045 10.8332 10.4506V16.9801L16.5836 13.7258V7.29574ZM9.16651 10.4506C9.0362 10.4045 8.9088 10.3473 8.78573 10.2789L3.41605 7.29574V13.7258L9.16651 16.9801V10.4506ZM10.8746 1.06301C10.3333 0.756667 9.66638 0.756668 9.12506 1.06301L2.54128 4.78889C1.99997 5.09523 1.6665 5.66136 1.6665 6.27404V13.7258C1.6665 14.3385 1.99997 14.9046 2.54128 15.211L9.12506 18.9368C9.66638 19.2432 10.3333 19.2432 10.8746 18.9368L17.4584 15.211C17.9997 14.9046 18.3332 14.3385 18.3332 13.7258V6.27404C18.3332 5.66136 17.9997 5.09523 17.4584 4.78889L10.8746 1.06301Z"
+        fill="black"
+      />
+    </SvgIcon>
+  )
+}

nym-wallet/src/theme/theme.tsx

@@ -201,7 +201,6 @@ export const getDesignTokens = (mode: PaletteMode): ThemeOptions => {
         styleOverrides: {
           sizeLarge: {
             height: 55,
-            padding: '13px 24px',
           },
         },
       },