modal style updates (#1508)

remove commented code

remove unused props

fix props

nym-wallet/src/components/Delegation/DelegateModal.tsx

@@ -244,7 +244,7 @@ export const DelegateModal: React.FC<{
         {errorAmount}
       </Typography>
       <Box sx={{ mt: 3 }}>
-        <ModalListItem label="Account balance" value={accountBalance?.toUpperCase()} divider strong />
+        <ModalListItem label="Account balance" value={accountBalance?.toUpperCase()} divider fontWeight={600} />
       </Box>
 
       <ModalListItem label="Rewards payout interval" value={rewardInterval} hidden divider />

nym-wallet/src/components/Modals/ModalListItem.tsx

@@ -1,21 +1,25 @@
 import React from 'react';
-import { Box, Stack, Typography } from '@mui/material';
+import { Box, Stack, Typography, TypographyProps } from '@mui/material';
 import { ModalDivider } from './ModalDivider';
+import { fontWeight } from '@mui/system';
+
+type TFontWeight = 'strong' | 'light';
 
 export const ModalListItem: React.FC<{
   label: string;
   divider?: boolean;
   hidden?: boolean;
-  strong?: boolean;
+  fontWeight?: TypographyProps['fontWeight'];
+  light?: boolean;
   value?: React.ReactNode;
-}> = ({ label, value, hidden, divider, strong }) => (
+}> = ({ label, value, hidden, fontWeight, divider }) => (
   <Box sx={{ display: hidden ? 'none' : 'block' }}>
     <Stack direction="row" justifyContent="space-between">
-      <Typography fontSize="smaller" fontWeight={strong ? 600 : undefined} sx={{ color: 'text.primary' }}>
+      <Typography fontSize="smaller" fontWeight={fontWeight} sx={{ color: 'text.primary' }}>
         {label}
       </Typography>
       {value && (
-        <Typography fontSize="smaller" fontWeight={strong ? 600 : undefined} sx={{ color: 'text.primary' }}>
+        <Typography fontSize="smaller" fontWeight={fontWeight} sx={{ color: 'text.primary' }}>
           {value}
         </Typography>
       )}

nym-wallet/src/components/Receive/ReceiveModal.tsx

@@ -1,42 +1,33 @@
 import React, { useContext } from 'react';
 import { AppContext } from 'src/context';
-import { Box, Stack, Typography, SxProps } from '@mui/material';
+import { Box, Stack, Typography, SxProps, Dialog, DialogTitle, DialogContent } from '@mui/material';
 import QRCode from 'qrcode.react';
-import { SimpleModal } from '../Modals/SimpleModal';
 import { ClientAddress } from '../ClientAddress';
+import { ModalListItem } from '../Modals/ModalListItem';
+import { Close as CloseIcon } from '@mui/icons-material';
 
-export const ReceiveModal = ({
-  onClose,
-  open,
-  sx,
-  backdropProps,
-}: {
-  onClose: () => void;
-  open: boolean;
-  sx?: SxProps;
-  backdropProps?: object;
-}) => {
+export const ReceiveModal = ({ onClose }: { onClose: () => void; sx?: SxProps; backdropProps?: object }) => {
   const { clientDetails } = useContext(AppContext);
   return (
-    <SimpleModal
-      header="Receive"
-      okLabel="Ok"
-      onClose={onClose}
-      open={open}
-      sx={{ width: 'small', ...sx }}
-      backdropProps={backdropProps}
-    >
-      <Stack spacing={3} sx={{ mt: 1.6 }}>
-        <Stack direction="row" alignItems="center" gap={4}>
-          <Typography>Your address:</Typography>
-          <ClientAddress withCopy showEntireAddress />
-        </Stack>
-        <Stack alignItems="center">
-          <Box sx={{ border: (t) => `1px solid ${t.palette.nym.highlight}`, borderRadius: 2, p: 2 }}>
+    <Dialog open maxWidth="sm" fullWidth onClose={onClose}>
+      <DialogTitle>
+        <Box sx={{ mt: 1, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+          <Typography fontSize={20} fontWeight={600}>
+            Receive
+          </Typography>
+          <CloseIcon onClick={onClose} cursor="pointer" />
+        </Box>
+      </DialogTitle>
+      <DialogContent sx={{ p: 0 }}>
+        <Box sx={{ px: 3 }}>
+          <ModalListItem label="Your address:" value={<ClientAddress withCopy showEntireAddress />} />
+        </Box>
+        <Stack alignItems="center" sx={{ px: 0, py: 3, mt: 3, bgcolor: 'rgba(251, 110, 78, 5%)' }}>
+          <Box sx={{ border: (t) => `1px solid ${t.palette.nym.highlight}`, bgcolor: 'white', borderRadius: 2, p: 3 }}>
             {clientDetails && <QRCode data-testid="qr-code" value={clientDetails?.client_address} />}
           </Box>
         </Stack>
-      </Stack>
-    </SimpleModal>
+      </DialogContent>
+    </Dialog>
   );
 };

nym-wallet/src/components/Receive/index.tsx

@@ -5,8 +5,7 @@ import { ReceiveModal } from './ReceiveModal';
 export const Receive = ({ hasStorybookStyles }: { hasStorybookStyles?: {} }) => {
   const { showReceiveModal, handleShowReceiveModal } = useContext(AppContext);
 
-  if (showReceiveModal)
-    return <ReceiveModal onClose={handleShowReceiveModal} open={showReceiveModal} {...hasStorybookStyles} />;
+  if (showReceiveModal) return <ReceiveModal onClose={handleShowReceiveModal} {...hasStorybookStyles} />;
 
   return null;
 };

nym-wallet/src/components/Send/SendInputModal.tsx

@@ -56,6 +56,7 @@ export const SendInputModal = ({
       backdropProps={backdropProps}
     >
       <Stack gap={2} sx={{ mt: 2 }}>
+        <ModalListItem label="Your address:" value={fromAddress} fontWeight="light" />
         <TextField
           placeholder="Recipient address"
           fullWidth
@@ -76,9 +77,8 @@ export const SendInputModal = ({
           {error}
         </Typography>
       </Stack>
-      <Stack gap={0.5} sx={{ mt: 2 }}>
-        <ModalListItem label="Account balance:" value={balance?.toUpperCase()} divider strong />
-        <ModalListItem label="Your address:" value={fromAddress} divider />
+      <Stack gap={0.5} sx={{ mt: 1 }}>
+        <ModalListItem label="Account balance:" value={balance?.toUpperCase()} divider fontWeight={600} />
         <Typography fontSize="smaller" sx={{ color: 'text.primary' }}>
           Est. fee for this transaction will be show on the next page
         </Typography>