GRIN/nym
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

modals and dialogs border in dark mode

Browse Source
This commit is contained in:
Gala
2022-09-06 16:40:50 +02:00
parent 2407285121
commit 70624e9062
10 changed files with 146 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
nym-wallet/src/components/Accounts/MultiAccountHowTo.tsx
+44 -33
View File
@@ -1,6 +1,7 @@
import React from 'react';
import { Alert, Box, Paper, Dialog, DialogContent, DialogTitle, IconButton, Stack, Typography } from '@mui/material';
import { Close } from '@mui/icons-material';
import { useTheme } from '@mui/material/styles';
const passwordCreationSteps = [
'Log out',
@@ -10,36 +11,46 @@ const passwordCreationSteps = [
'Now you can create multiple accounts',
];
export const MultiAccountHowTo = ({ show, handleClose }: { show: boolean; handleClose: () => void }) => (
<Dialog open={show} onClose={handleClose} fullWidth>
<Paper>
<DialogTitle>
<Box display="flex" justifyContent="space-between" alignItems="center">
<Typography variant="h6">Multi accounts</Typography>
<IconButton onClick={handleClose}>
<Close />
</IconButton>
</Box>
<Typography variant="body1" sx={{ color: (theme) => theme.palette.nym.text.muted }}>
How to set up multiple accounts
</Typography>
</DialogTitle>
<DialogContent>
<Stack spacing={2}>
<Alert
severity="warning"
icon={false}
sx={(t) => (t.palette.mode === 'dark' ? { bgcolor: (theme) => theme.palette.background.paper } : {})}
>
<Typography>In order to create multiple accounts your wallet needs a password.</Typography>
<Typography>Follow steps below to create password.</Typography>
</Alert>
<Typography>How to create a password for your account</Typography>
{passwordCreationSteps.map((step, index) => (
<Typography key={step}>{`${index + 1}. ${step}`}</Typography>
))}
</Stack>
</DialogContent>
</Paper>
</Dialog>
);
export const MultiAccountHowTo = ({ show, handleClose }: { show: boolean; handleClose: () => void }) => {
const theme = useTheme();
return (
<Dialog
open={show}
onClose={handleClose}
fullWidth
PaperProps={{
style: { border: `1px solid ${theme.palette.nym.nymWallet.modal.border}` },
}}
>
<Paper>
<DialogTitle>
<Box display="flex" justifyContent="space-between" alignItems="center">
<Typography variant="h6">Multi accounts</Typography>
<IconButton onClick={handleClose}>
<Close />
</IconButton>
</Box>
<Typography variant="body1" sx={{ color: (theme) => theme.palette.nym.text.muted }}>
How to set up multiple accounts
</Typography>
</DialogTitle>
<DialogContent>
<Stack spacing={2}>
<Alert
severity="warning"
icon={false}
sx={(t) => (t.palette.mode === 'dark' ? { bgcolor: (theme) => theme.palette.background.paper } : {})}
>
<Typography>In order to create multiple accounts your wallet needs a password.</Typography>
<Typography>Follow steps below to create password.</Typography>
</Alert>
<Typography>How to create a password for your account</Typography>
{passwordCreationSteps.map((step, index) => (
<Typography key={step}>{`${index + 1}. ${step}`}</Typography>
))}
</Stack>
</DialogContent>
</Paper>
</Dialog>
);
};
nym-wallet/src/components/Accounts/modals/AccountsModal.tsx
+11 -1
View File
@@ -12,6 +12,7 @@ import {
Divider,
} from '@mui/material';
import { Add, ArrowDownwardSharp, Close } from '@mui/icons-material';
import { useTheme } from '@mui/material/styles';
import { AccountsContext } from 'src/context';
import { AccountItem } from '../AccountItem';
import { ConfirmPasswordModal } from './ConfirmPasswordModal';
@@ -21,6 +22,8 @@ export const AccountsModal = () => {
useContext(AccountsContext);
const [accountToSwitchTo, setAccountToSwitchTo] = useState<string>();
const theme = useTheme();
const handleClose = () => {
setDialogToDisplay(undefined);
setError(undefined);
@@ -43,7 +46,14 @@ export const AccountsModal = () => {
);
return (
<Dialog open={dialogToDisplay === 'Accounts'} onClose={handleClose} fullWidth>
<Dialog
open={dialogToDisplay === 'Accounts'}
onClose={handleClose}
fullWidth
PaperProps={{
style: { border: `1px solid ${theme.palette.nym.nymWallet.modal.border}` },
}}
>
<Paper>
<DialogTitle>
<Box display="flex" justifyContent="space-between" alignItems="center">
nym-wallet/src/components/Accounts/modals/ConfirmPasswordModal.tsx
+11 -3
View File
@@ -1,6 +1,6 @@
import React, { useContext } from 'react';
import { Box, Paper, Dialog, DialogTitle, IconButton, Typography } from '@mui/material';
import { ArrowBack } from '@mui/icons-material';
import { Paper, Dialog, DialogTitle, Typography } from '@mui/material';
import { useTheme } from '@mui/material/styles';
import { ConfirmPassword } from 'src/components/ConfirmPassword';
import { AccountsContext } from 'src/context';
@@ -14,9 +14,17 @@ export const ConfirmPasswordModal = ({
onConfirm: (password: string) => Promise<void>;
}) => {
const { isLoading, error } = useContext(AccountsContext);
const theme = useTheme();
return (
<Dialog open={Boolean(accountName)} onClose={onClose} fullWidth>
<Dialog
open={Boolean(accountName)}
onClose={onClose}
fullWidth
PaperProps={{
style: { border: `1px solid ${theme.palette.nym.nymWallet.modal.border}` },
}}
>
<Paper>
<DialogTitle>
<Typography variant="h6">Switch account</Typography>
nym-wallet/src/components/Accounts/modals/EditAccountModal.tsx
+11 -1
View File
@@ -12,6 +12,7 @@ import {
Typography,
} from '@mui/material';
import { Close } from '@mui/icons-material';
import { useTheme } from '@mui/material/styles';
import { AccountsContext } from 'src/context';
export const EditAccountModal = () => {
@@ -19,12 +20,21 @@ export const EditAccountModal = () => {
const { accountToEdit, dialogToDisplay, setDialogToDisplay, handleEditAccount } = useContext(AccountsContext);
const theme = useTheme();
useEffect(() => {
setAccountName(accountToEdit ? accountToEdit?.id : '');
}, [accountToEdit]);
return (
<Dialog open={dialogToDisplay === 'Edit'} onClose={() => setDialogToDisplay('Accounts')} fullWidth>
<Dialog
open={dialogToDisplay === 'Edit'}
onClose={() => setDialogToDisplay('Accounts')}
fullWidth
PaperProps={{
style: { border: `1px solid ${theme.palette.nym.nymWallet.modal.border}` },
}}
>
<Paper>
<DialogTitle>
<Box display="flex" justifyContent="space-between" alignItems="center">
nym-wallet/src/components/Modals/ErrorModal.tsx
+4 -1
View File
@@ -11,7 +11,10 @@ export const ErrorModal: React.FC<{
onClose: () => void;
}> = ({ children, open, title, message, sx, backdropProps, onClose }) => (
<Modal open={open} onClose={onClose} BackdropProps={backdropProps}>
<Box sx={{ ...modalStyle, ...sx }} textAlign="center">
<Box
sx={{ border: (t) => `1px solid ${t.palette.nym.nymWallet.modal.border}`, ...modalStyle, ...sx }}
textAlign="center"
>
<Typography color={(theme) => theme.palette.error.main} mb={1}>
{title || 'Oh no! Something went wrong...'}
</Typography>
nym-wallet/src/components/Modals/LoadingModal.tsx
+4 -1
View File
@@ -18,7 +18,10 @@ export const LoadingModal: React.FC<{
backdropProps?: object;
}> = ({ sx, backdropProps }) => (
<Modal open BackdropProps={backdropProps}>
<Box sx={sx ? { ...modalStyle, ...sx } : { ...modalStyle }} textAlign="center">
<Box
sx={{ border: (t) => `1px solid ${t.palette.nym.nymWallet.modal.border}`, ...modalStyle, ...sx }}
textAlign="center"
>
<Stack spacing={4} direction="row" alignItems="center">
<CircularProgress />
<Typography sx={{ color: 'text.primary' }}>Please wait...</Typography>
nym-wallet/src/components/Modals/SimpleModal.tsx
+1 -1
View File
@@ -38,7 +38,7 @@ export const SimpleModal: React.FC<{
backdropProps,
}) => (
<Modal open={open} onClose={onClose} BackdropProps={backdropProps}>
<Box sx={{ ...modalStyle, ...sx }}>
<Box sx={{ border: (t) => `1px solid ${t.palette.nym.nymWallet.modal.border}`, ...modalStyle, ...sx }}>
{displayErrorIcon && <ErrorOutline color="error" sx={{ mb: 3 }} />}
<Stack direction="row" justifyContent="space-between" alignItems="center">
{typeof header === 'string' ? (
nym-wallet/src/components/Receive/ReceiveModal.tsx
+46 -19
View File
@@ -4,30 +4,57 @@ import { Box, Stack, Typography, SxProps, Dialog, DialogTitle, DialogContent } f
import QRCode from 'qrcode.react';
import { ClientAddress } from '../ClientAddress';
import { ModalListItem } from '../Modals/ModalListItem';
import { Close as CloseIcon } from '@mui/icons-material';
import { SimpleModal } from '../Modals/SimpleModal';
export const ReceiveModal = ({ onClose }: { onClose: () => void; sx?: SxProps; backdropProps?: object }) => {
export const ReceiveModal = ({
onClose,
sx,
backdropProps,
}: {
onClose: () => void;
sx?: SxProps;
backdropProps?: object;
}) => {
const { clientDetails } = useContext(AppContext);
return (
<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 }}>
<SimpleModal
header="Receive"
subHeader="Provide your address to receive tokens"
open
onClose={onClose}
okLabel=""
sx={sx}
backdropProps={backdropProps}
subHeaderStyles={{ mb: 0 }}
>
<Stack gap={3} sx={{ position: 'relative', top: '32px' }}>
<ModalListItem label="Your address" value={<ClientAddress withCopy showEntireAddress />} />
<Stack
alignItems="center"
sx={{
position: 'relative',
left: '-32px',
width: '598px',
py: 4,
bgcolor: (t) => (t.palette.mode === 'dark' ? t.palette.background.default : 'rgba(251, 110, 78, 5%)'),
borderRadius: '0px 0px 16px 16px',
}}
>
<Box
sx={{
border: (t) =>
t.palette.mode === 'dark'
? `1px solid ${t.palette.nym.nymWallet.modal.border}`
: `1px solid ${t.palette.nym.highlight}`,
bgcolor: (t) => (t.palette.mode === 'dark' ? 'transparent' : 'white'),
borderRadius: 2,
p: 3,
}}
>
{clientDetails && <QRCode data-testid="qr-code" value={clientDetails?.client_address} />}
</Box>
</Stack>
</DialogContent>
</Dialog>
</Stack>
</SimpleModal>
);
};
nym-wallet/src/theme/mui-theme.d.ts
Vendored
+8 -5
View File
@@ -67,6 +67,9 @@ declare module '@mui/material/styles' {
hover: {
background: string;
};
modal: {
border: string;
};
}
/**
@@ -85,7 +88,7 @@ declare module '@mui/material/styles' {
/**
* Add anything not palette related to the theme here
*/
interface NymTheme {}
interface NymTheme { }
/**
* This augments the definitions of the MUI Theme with the Nym theme, as well as
@@ -93,8 +96,8 @@ declare module '@mui/material/styles' {
*
* IMPORTANT: only add extensions to the interfaces above, do not modify the lines below
*/
interface Theme extends NymTheme {}
interface ThemeOptions extends Partial<NymTheme> {}
interface Palette extends NymPaletteAndNymWalletPalette {}
interface PaletteOptions extends NymPaletteAndNymWalletPaletteOptions {}
interface Theme extends NymTheme { }
interface ThemeOptions extends Partial<NymTheme> { }
interface Palette extends NymPaletteAndNymWalletPalette { }
interface PaletteOptions extends NymPaletteAndNymWalletPaletteOptions { }
}
nym-wallet/src/theme/theme.tsx
+6
View File
@@ -59,6 +59,9 @@ const darkMode: NymPaletteVariant = {
hover: {
background: '#36393E',
},
modal: {
border: '#484d53',
},
};
const lightMode: NymPaletteVariant = {
@@ -86,6 +89,9 @@ const lightMode: NymPaletteVariant = {
hover: {
background: '#F9F9F9',
},
modal: {
border: 'transparent',
},
};
/**