style updates

nym-wallet/src/components/NymCard.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Card, CardContent, CardHeader } from '@mui/material'
-import { styled } from '@mui/styles'
+import { styled } from '@mui/material/styles'
 
 export const NymCard: React.FC<{
   title: string
@@ -20,21 +20,18 @@ export const NymCard: React.FC<{
         sx={{
           color: 'nym.background.dark',
           padding: 2.5,
-          borderBottom: (theme) => `1px solid ${theme.palette.grey[100]}`,
+          borderBottom: (theme) => `1px solid ${theme.palette.grey[200]}`,
         }}
       />
-      {noPadding ? (
-        <CardContentNoPadding>{children}</CardContentNoPadding>
-      ) : (
-        <CardContent>{children}</CardContent>
-      )}
+      {noPadding ? <CardContentNoPadding>{children}</CardContentNoPadding> : <CardContent>{children}</CardContent>}
     </Card>
   )
 }
 
-const CardContentNoPadding = styled(CardContent)({
+const CardContentNoPadding = styled(CardContent)(({ theme }) => ({
+  background: theme.palette.grey[50],
   padding: 0,
   '&:last-child': {
     paddingBottom: 0,
   },
-})
+}))

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

@@ -339,7 +339,7 @@ export const BondForm = ({
           alignItems: 'center',
           justifyContent: 'flex-end',
           borderTop: (theme) => `1px solid ${theme.palette.grey[200]}`,
-          bgcolor: (theme) => theme.palette.grey[50],
+          bgcolor: 'grey.100',
           padding: 2,
         }}
       >

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

@@ -100,7 +100,7 @@ export const Bond = () => {
                 alignItems: 'center',
                 justifyContent: 'flex-end',
                 borderTop: (theme) => `1px solid ${theme.palette.grey[200]}`,
-                bgcolor: (theme) => theme.palette.grey[50],
+                bgcolor: 'grey.100',
                 padding: 2,
               }}
             >

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

@@ -114,7 +114,7 @@ export const DelegateForm = ({
           alignItems: 'center',
           justifyContent: 'flex-end',
           borderTop: (theme) => `1px solid ${theme.palette.grey[200]}`,
-          background: (theme) => theme.palette.grey[50],
+          bgcolor: 'grey.100',
           padding: 2,
         }}
       >

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

@@ -73,7 +73,7 @@ export const Delegate = () => {
                   alignItems: 'center',
                   justifyContent: 'flex-end',
                   borderTop: (theme) => `1px solid ${theme.palette.grey[200]}`,
-                  background: (theme) => theme.palette.grey[50],
+                  bgcolor: 'grey.100',
                   p: 2,
                 }}
               >

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

@@ -136,7 +136,7 @@ export const SendWizard = () => {
             alignItems: 'center',
             justifyContent: 'flex-end',
             borderTop: (theme) => `1px solid ${theme.palette.grey[200]}`,
-            background: (theme) => theme.palette.grey[50],
+            bgcolor: 'grey.50',
             p: 2,
           }}
         >

nym-wallet/src/routes/sign-in/sign-in.tsx

@@ -1,6 +1,6 @@
 import React, { useContext, useState } from 'react'
 import { Button, CircularProgress, Grid, Stack, Link, TextField, Typography, Alert, SvgIcon } from '@mui/material'
-import { styled } from '@mui/styles'
+import { styled } from '@mui/material/styles'
 import Logo from '../../images/logo-background.svg'
 import { signInWithMnemonic } from '../../requests'
 import { ClientContext } from '../../context/main'

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

@@ -110,7 +110,7 @@ export const UndelegateForm = ({
           alignItems: 'center',
           justifyContent: 'flex-end',
           borderTop: (theme) => `1px solid ${theme.palette.grey[200]}`,
-          background: (theme) => theme.palette.grey[50],
+          bgcolor: 'grey.100',
           p: 2,
         }}
       >

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

@@ -98,12 +98,14 @@ export const Undelegate = () => {
                   alignItems: 'center',
                   justifyContent: 'flex-end',
                   borderTop: '1px solid grey[200]',
-                  bgcolor: 'grey[50]',
+                  bgcolor: 'grey.100',
                   p: 2,
                 }}
               >
                 <Button
                   data-testid="finish-button"
+                  variant="contained"
+                  disableElevation
                   onClick={() => {
                     setStatus(EnumRequestStatus.initial)
                     initialize()