From 2bef1603abc3333fcc5b8bc0e81a97cfa42b6b5b Mon Sep 17 00:00:00 2001
From: fmtabbara <fmtabbara@hotmail.co.uk>
Date: Mon, 10 Jan 2022 17:27:01 +0000
Subject: [PATCH] style updates

---
 nym-wallet/src/components/NymCard.tsx         |  2 -
 nym-wallet/src/pages/bond/BondForm.tsx        |  5 +-
 .../src/pages/delegate/DelegateForm.tsx       |  5 +-
 nym-wallet/src/pages/receive/index.tsx        | 66 ++++++-------------
 nym-wallet/src/pages/send/SendWizard.tsx      |  5 +-
 nym-wallet/src/pages/settings/profile.tsx     |  4 +-
 .../src/pages/settings/system-variables.tsx   |  5 +-
 .../src/pages/undelegate/UndelegateForm.tsx   |  5 +-
 nym-wallet/src/pages/undelegate/index.tsx     |  5 +-
 nym-wallet/src/theme/theme.tsx                |  1 +
 10 files changed, 33 insertions(+), 70 deletions(-)

diff --git a/nym-wallet/src/components/NymCard.tsx b/nym-wallet/src/components/NymCard.tsx
index bfaf7fa18a..0b218081b3 100644
--- a/nym-wallet/src/components/NymCard.tsx
+++ b/nym-wallet/src/components/NymCard.tsx
@@ -21,7 +21,6 @@ export const NymCard: React.FC<{
           color: 'nym.background.dark',
           py: 2.5,
           px: 4,
-          borderBottom: (theme) => `1px solid ${theme.palette.grey[200]}`,
         }}
       />
       {noPadding ? <CardContentNoPadding>{children}</CardContentNoPadding> : <CardContent>{children}</CardContent>}
@@ -30,7 +29,6 @@ export const NymCard: React.FC<{
 }
 
 const CardContentNoPadding = styled(CardContent)(({ theme }) => ({
-  background: theme.palette.grey[50],
   padding: 0,
   '&:last-child': {
     paddingBottom: 0,
diff --git a/nym-wallet/src/pages/bond/BondForm.tsx b/nym-wallet/src/pages/bond/BondForm.tsx
index 55609d15fc..306239eeb8 100644
--- a/nym-wallet/src/pages/bond/BondForm.tsx
+++ b/nym-wallet/src/pages/bond/BondForm.tsx
@@ -375,9 +375,7 @@ export const BondForm = ({
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'flex-end',
-          borderTop: (theme) => `1px solid ${theme.palette.grey[200]}`,
-          bgcolor: 'grey.100',
-          padding: 2,
+          padding: 3,
         }}
       >
         <Button
@@ -389,6 +387,7 @@ export const BondForm = ({
           disableElevation
           onClick={handleSubmit(onSubmit)}
           endIcon={isSubmitting && <CircularProgress size={20} />}
+          size="large"
         >
           Bond
         </Button>
diff --git a/nym-wallet/src/pages/delegate/DelegateForm.tsx b/nym-wallet/src/pages/delegate/DelegateForm.tsx
index dbcff4c4b0..e8c671daa8 100644
--- a/nym-wallet/src/pages/delegate/DelegateForm.tsx
+++ b/nym-wallet/src/pages/delegate/DelegateForm.tsx
@@ -115,9 +115,7 @@ export const DelegateForm = ({
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'flex-end',
-          borderTop: (theme) => `1px solid ${theme.palette.grey[200]}`,
-          bgcolor: 'grey.100',
-          padding: 2,
+          padding: 3,
         }}
       >
         <Button
@@ -129,6 +127,7 @@ export const DelegateForm = ({
           type="submit"
           disableElevation
           endIcon={isSubmitting && <CircularProgress size={20} />}
+          size="large"
         >
           Delegate stake
         </Button>
diff --git a/nym-wallet/src/pages/receive/index.tsx b/nym-wallet/src/pages/receive/index.tsx
index 66a41cd792..afab517dc5 100644
--- a/nym-wallet/src/pages/receive/index.tsx
+++ b/nym-wallet/src/pages/receive/index.tsx
@@ -1,65 +1,37 @@
 import React, { useContext } from 'react'
 import QRCode from 'qrcode.react'
-import { Alert, Box, Card, Grid, Typography, useMediaQuery } from '@mui/material'
+import { Alert, Box, Stack, Typography } from '@mui/material'
 import { CopyToClipboard, NymCard } from '../../components'
 import { Layout } from '../../layouts'
 import { ClientContext } from '../../context/main'
 
 export const Receive = () => {
   const { clientDetails } = useContext(ClientContext)
-  const matches = useMediaQuery('(min-width:769px)')
 
   return (
     <Layout>
       <NymCard title="Receive Nym">
-        <Grid container direction="column" spacing={1}>
-          <Grid item>
-            <Alert severity="info" data-testid="receive-nym">
-              You can receive tokens by providing this address to the sender
-            </Alert>
-          </Grid>
-          <Grid item>
-            <Card
+        <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
+          </Alert>
+          <Box>
+            <Typography
+              data-testid="client-address"
+              variant="subtitle1"
               sx={{
-                m: [1, 0],
-                display: 'flex',
-                justifyContent: 'space-between',
-                flexWrap: 'wrap',
-                p: 3,
+                wordBreak: 'break-word',
+                mr: 1,
               }}
-              variant="outlined"
+              component="span"
             >
-              <Grid container direction="column" spacing={4} alignItems="center">
-                <Grid item>
-                  <Typography
-                    data-testid="client-address"
-                    variant={matches ? 'h5' : 'subtitle1'}
-                    sx={{
-                      wordBreak: 'break-word',
-                      mr: 1,
-                    }}
-                    component="span"
-                  >
-                    {clientDetails?.client_address}
-                  </Typography>
-                  <CopyToClipboard text={clientDetails?.client_address || ''} />
-                </Grid>
-                <Grid item>
-                  <Box
-                    sx={{
-                      display: 'flex',
-                      justifyContent: 'center',
-                      mb: 2,
-                    }}
-                    component="div"
-                  >
-                    {clientDetails && <QRCode data-testid="qr-code" value={clientDetails.client_address} />}
-                  </Box>
-                </Grid>
-              </Grid>
-            </Card>
-          </Grid>
-        </Grid>
+              Your address: {clientDetails?.client_address}
+            </Typography>
+            <CopyToClipboard text={clientDetails?.client_address || ''} iconButton />
+          </Box>
+
+          {clientDetails && <QRCode data-testid="qr-code" value={clientDetails.client_address} />}
+        </Stack>
       </NymCard>
     </Layout>
   )
diff --git a/nym-wallet/src/pages/send/SendWizard.tsx b/nym-wallet/src/pages/send/SendWizard.tsx
index f3965b3d0d..12abd78f24 100644
--- a/nym-wallet/src/pages/send/SendWizard.tsx
+++ b/nym-wallet/src/pages/send/SendWizard.tsx
@@ -138,9 +138,7 @@ export const SendWizard = () => {
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'flex-end',
-            borderTop: (theme) => `1px solid ${theme.palette.grey[200]}`,
-            bgcolor: 'grey.100',
-            p: 2,
+            p: 3,
           }}
         >
           {activeStep === 1 && (
@@ -155,6 +153,7 @@ export const SendWizard = () => {
             data-testid="button"
             onClick={activeStep === 0 ? handleNextStep : activeStep === 1 ? handleSend : handleFinish}
             disabled={!!(methods.formState.errors.amount || methods.formState.errors.to || isLoading)}
+            size="large"
           >
             {activeStep === 0 ? 'Next' : activeStep === 1 ? 'Send' : 'Finish'}
           </Button>
diff --git a/nym-wallet/src/pages/settings/profile.tsx b/nym-wallet/src/pages/settings/profile.tsx
index 228d63e8ad..e9e4c6b0fb 100644
--- a/nym-wallet/src/pages/settings/profile.tsx
+++ b/nym-wallet/src/pages/settings/profile.tsx
@@ -18,9 +18,7 @@ export const Profile = () => {
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'flex-end',
-          borderTop: (theme) => `1px solid ${theme.palette.grey[300]}`,
-          bgcolor: 'grey.200',
-          padding: 2,
+          padding: 3,
         }}
       >
         <Button variant="contained" color="primary" type="submit" disableElevation disabled>
diff --git a/nym-wallet/src/pages/settings/system-variables.tsx b/nym-wallet/src/pages/settings/system-variables.tsx
index befdbd72bc..42a9062672 100644
--- a/nym-wallet/src/pages/settings/system-variables.tsx
+++ b/nym-wallet/src/pages/settings/system-variables.tsx
@@ -118,9 +118,7 @@ export const SystemVariables = ({
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'space-between',
-          borderTop: (theme) => `1px solid ${theme.palette.grey[300]}`,
-          bgcolor: 'grey.200',
-          padding: 2,
+          padding: 3,
         }}
       >
         {nodeUpdateResponse === 'success' ? (
@@ -137,6 +135,7 @@ export const SystemVariables = ({
           disableElevation
           endIcon={isSubmitting && <CircularProgress size={20} />}
           disabled={Object.keys(errors).length > 0 || isSubmitting}
+          size="large"
         >
           Update Profit Margin
         </Button>
diff --git a/nym-wallet/src/pages/undelegate/UndelegateForm.tsx b/nym-wallet/src/pages/undelegate/UndelegateForm.tsx
index aedb9884a9..6f1a7731ab 100644
--- a/nym-wallet/src/pages/undelegate/UndelegateForm.tsx
+++ b/nym-wallet/src/pages/undelegate/UndelegateForm.tsx
@@ -100,9 +100,7 @@ export const UndelegateForm = ({
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'flex-end',
-          borderTop: (theme) => `1px solid ${theme.palette.grey[200]}`,
-          bgcolor: 'grey.100',
-          p: 2,
+          p: 3,
         }}
       >
         <Button
@@ -114,6 +112,7 @@ export const UndelegateForm = ({
           disableElevation
           disabled={isSubmitting}
           endIcon={isSubmitting && <CircularProgress size={20} />}
+          size="large"
         >
           Undelegate stake
         </Button>
diff --git a/nym-wallet/src/pages/undelegate/index.tsx b/nym-wallet/src/pages/undelegate/index.tsx
index 4e90d739f9..3e7d57558f 100644
--- a/nym-wallet/src/pages/undelegate/index.tsx
+++ b/nym-wallet/src/pages/undelegate/index.tsx
@@ -91,9 +91,7 @@ export const Undelegate = () => {
                   display: 'flex',
                   alignItems: 'center',
                   justifyContent: 'flex-end',
-                  borderTop: '1px solid grey[200]',
-                  bgcolor: 'grey.100',
-                  p: 2,
+                  p: 3,
                 }}
               >
                 <Button
@@ -104,6 +102,7 @@ export const Undelegate = () => {
                     setStatus(EnumRequestStatus.initial)
                     initialize()
                   }}
+                  size="large"
                 >
                   Finish
                 </Button>
diff --git a/nym-wallet/src/theme/theme.tsx b/nym-wallet/src/theme/theme.tsx
index 02e4f92b9f..db13d2a16a 100644
--- a/nym-wallet/src/theme/theme.tsx
+++ b/nym-wallet/src/theme/theme.tsx
@@ -201,6 +201,7 @@ export const getDesignTokens = (mode: PaletteMode): ThemeOptions => {
         styleOverrides: {
           sizeLarge: {
             height: 55,
+            padding: '13px 24px',
           },
         },
       },