Qortal/Qortal-Hub
1
0
Fork 0
mirror of https://github.com/Qortal/Qortal-Hub.git synced 2025-06-18 13:51:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor button style in wallets

Browse Source
This commit is contained in:
Nicola Benaglia 2025-04-16 20:45:24 +02:00
parent ae078095b8
commit 6621527e82
5 changed files with 361 additions and 342 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/Wallets.tsx
View File

@ -16,6 +16,7 @@ import {
DialogTitle, DialogTitle,
IconButton, IconButton,
Input, Input,
useTheme,
} from '@mui/material'; } from '@mui/material';
import { CustomButton } from './styles/App-styles'; import { CustomButton } from './styles/App-styles';
import { useDropzone } from 'react-dropzone'; import { useDropzone } from 'react-dropzone';
@ -266,6 +267,7 @@ export const Wallets = ({ setExtState, setRawWallet, rawWallet }) => {
onClick={handleSetSeedValue} onClick={handleSetSeedValue}
sx={{ sx={{
padding: '10px', padding: '10px',
display: 'inline',
}} }}
> >
Add seed-phrase Add seed-phrase
@ -401,6 +403,7 @@ const WalletItem = ({ wallet, updateWalletItem, idx, setSelectedWallet }) => {
const [name, setName] = useState(''); const [name, setName] = useState('');
const [note, setNote] = useState(''); const [note, setNote] = useState('');
const [isEdit, setIsEdit] = useState(false); const [isEdit, setIsEdit] = useState(false);
const theme = useTheme();
useEffect(() => { useEffect(() => {
if (wallet?.name) { if (wallet?.name) {
@ -423,10 +426,10 @@ const WalletItem = ({ wallet, updateWalletItem, idx, setSelectedWallet }) => {
> >
<ListItem <ListItem
sx={{ sx={{
bgcolor: 'background.paper', // TODO: set background color bgcolor: theme.palette.background.default,
flexGrow: 1, flexGrow: 1,
'&:hover': { '&:hover': {
backgroundColor: 'secondary.main', backgroundColor: theme.palette.background.paper,
transform: 'scale(1.01)', transform: 'scale(1.01)',
}, },
transition: 'all 0.1s ease-in-out', transition: 'all 0.1s ease-in-out',
@ -471,6 +474,7 @@ const WalletItem = ({ wallet, updateWalletItem, idx, setSelectedWallet }) => {
} }
/> />
</ListItem> </ListItem>
<IconButton <IconButton
sx={{ sx={{
alignSelf: 'flex-start', alignSelf: 'flex-start',

26
src/common/Spacer.tsx
View File

@ -1,15 +1,15 @@
import { Box } from "@mui/material"; import { Box } from '@mui/material';
export const Spacer = ({ height, width, ...props }: any) => { export const Spacer = ({ height, width, ...props }: any) => {
return ( return (
<Box <Box
sx={{ sx={{
height: height ? height : '0px', height: height ? height : '0px',
display: 'flex', display: 'flex',
flexShrink: 0, flexShrink: 0,
width: width ? width : '0px', width: width ? width : '0px',
...(props || {}) ...(props || {}),
}} }}
/> />
); );
}; };

634
src/components/Group/AddGroup.tsx
View File

@ -1,19 +1,15 @@
import * as React from "react"; import * as React from 'react';
import Button from "@mui/material/Button"; import Button from '@mui/material/Button';
import Dialog from "@mui/material/Dialog"; import Dialog from '@mui/material/Dialog';
import ListItemText from "@mui/material/ListItemText"; import AppBar from '@mui/material/AppBar';
import ListItemButton from "@mui/material/ListItemButton"; import Toolbar from '@mui/material/Toolbar';
import List from "@mui/material/List"; import IconButton from '@mui/material/IconButton';
import Divider from "@mui/material/Divider"; import Typography from '@mui/material/Typography';
import AppBar from "@mui/material/AppBar"; import CloseIcon from '@mui/icons-material/Close';
import Toolbar from "@mui/material/Toolbar"; import ExpandLess from '@mui/icons-material/ExpandLess';
import IconButton from "@mui/material/IconButton"; import ExpandMore from '@mui/icons-material/ExpandMore';
import Typography from "@mui/material/Typography"; import Slide from '@mui/material/Slide';
import CloseIcon from "@mui/icons-material/Close"; import { TransitionProps } from '@mui/material/transitions';
import ExpandLess from "@mui/icons-material/ExpandLess";
import ExpandMore from "@mui/icons-material/ExpandMore";
import Slide from "@mui/material/Slide";
import { TransitionProps } from "@mui/material/transitions";
import { import {
Box, Box,
Collapse, Collapse,
@ -24,15 +20,15 @@ import {
Tab, Tab,
Tabs, Tabs,
styled, styled,
} from "@mui/material"; } from '@mui/material';
import { AddGroupList } from "./AddGroupList"; import { AddGroupList } from './AddGroupList';
import { UserListOfInvites } from "./UserListOfInvites"; import { UserListOfInvites } from './UserListOfInvites';
import { CustomizedSnackbars } from "../Snackbar/Snackbar"; import { CustomizedSnackbars } from '../Snackbar/Snackbar';
import { getFee } from "../../background"; import { getFee } from '../../background';
import { MyContext, isMobile } from "../../App"; import { MyContext, isMobile } from '../../App';
import { subscribeToEvent, unsubscribeFromEvent } from "../../utils/events"; import { subscribeToEvent, unsubscribeFromEvent } from '../../utils/events';
export const Label = styled("label")( export const Label = styled('label')(
({ theme }) => ` ({ theme }) => `
font-family: 'IBM Plex Sans', sans-serif; font-family: 'IBM Plex Sans', sans-serif;
font-size: 14px; font-size: 14px;
@ -51,17 +47,15 @@ const Transition = React.forwardRef(function Transition(
}); });
export const AddGroup = ({ address, open, setOpen }) => { export const AddGroup = ({ address, open, setOpen }) => {
const {show, setTxList} = React.useContext(MyContext) const { show, setTxList } = React.useContext(MyContext);
const [tab, setTab] = React.useState('create');
const [tab, setTab] = React.useState("create");
const [openAdvance, setOpenAdvance] = React.useState(false); const [openAdvance, setOpenAdvance] = React.useState(false);
const [name, setName] = React.useState('');
const [name, setName] = React.useState(""); const [description, setDescription] = React.useState('');
const [description, setDescription] = React.useState(""); const [groupType, setGroupType] = React.useState('1');
const [groupType, setGroupType] = React.useState("1"); const [approvalThreshold, setApprovalThreshold] = React.useState('40');
const [approvalThreshold, setApprovalThreshold] = React.useState("40"); const [minBlock, setMinBlock] = React.useState('5');
const [minBlock, setMinBlock] = React.useState("5"); const [maxBlock, setMaxBlock] = React.useState('21600');
const [maxBlock, setMaxBlock] = React.useState("21600");
const [value, setValue] = React.useState(0); const [value, setValue] = React.useState(0);
const [openSnack, setOpenSnack] = React.useState(false); const [openSnack, setOpenSnack] = React.useState(false);
const [infoSnack, setInfoSnack] = React.useState(null); const [infoSnack, setInfoSnack] = React.useState(null);
@ -69,6 +63,7 @@ export const AddGroup = ({ address, open, setOpen }) => {
const handleChange = (event: React.SyntheticEvent, newValue: number) => { const handleChange = (event: React.SyntheticEvent, newValue: number) => {
setValue(newValue); setValue(newValue);
}; };
const handleClose = () => { const handleClose = () => {
setOpen(false); setOpen(false);
}; };
@ -89,58 +84,57 @@ export const AddGroup = ({ address, open, setOpen }) => {
setMaxBlock(event.target.value as string); setMaxBlock(event.target.value as string);
}; };
const handleCreateGroup = async () => { const handleCreateGroup = async () => {
try { try {
if(!name) throw new Error('Please provide a name') if (!name) throw new Error('Please provide a name');
if(!description) throw new Error('Please provide a description') if (!description) throw new Error('Please provide a description');
const fee = await getFee('CREATE_GROUP') const fee = await getFee('CREATE_GROUP');
await show({ await show({
message: "Would you like to perform an CREATE_GROUP transaction?" , message: 'Would you like to perform an CREATE_GROUP transaction?',
publishFee: fee.fee + ' QORT' publishFee: fee.fee + ' QORT',
}) });
await new Promise((res, rej) => { await new Promise((res, rej) => {
window.sendMessage("createGroup", { window
groupName: name, .sendMessage('createGroup', {
groupDescription: description, groupName: name,
groupType: +groupType, groupDescription: description,
groupApprovalThreshold: +approvalThreshold, groupType: +groupType,
minBlock: +minBlock, groupApprovalThreshold: +approvalThreshold,
maxBlock: +maxBlock, minBlock: +minBlock,
}) maxBlock: +maxBlock,
.then((response) => { })
if (!response?.error) { .then((response) => {
setInfoSnack({ if (!response?.error) {
type: "success", setInfoSnack({
message: "Successfully created group. It may take a couple of minutes for the changes to propagate", type: 'success',
}); message:
setOpenSnack(true); 'Successfully created group. It may take a couple of minutes for the changes to propagate',
setTxList((prev) => [ });
{ setOpenSnack(true);
...response, setTxList((prev) => [
type: 'created-group', {
label: `Created group ${name}: awaiting confirmation`, ...response,
labelDone: `Created group ${name}: success!`, type: 'created-group',
done: false, label: `Created group ${name}: awaiting confirmation`,
}, labelDone: `Created group ${name}: success!`,
...prev, done: false,
]); },
res(response); ...prev,
return; ]);
} res(response);
rej({ message: response.error }); return;
}) }
.catch((error) => { rej({ message: response.error });
rej({ message: error.message || "An error occurred" }); })
}); .catch((error) => {
rej({ message: error.message || 'An error occurred' });
});
}); });
} catch (error) { } catch (error) {
setInfoSnack({ setInfoSnack({
type: "error", type: 'error',
message: error?.message, message: error?.message,
}); });
setOpenSnack(true); setOpenSnack(true);
@ -166,20 +160,22 @@ export const AddGroup = ({ address, open, setOpen }) => {
function a11yProps(index: number) { function a11yProps(index: number) {
return { return {
id: `simple-tab-${index}`, id: `simple-tab-${index}`,
"aria-controls": `simple-tabpanel-${index}`, 'aria-controls': `simple-tabpanel-${index}`,
}; };
} }
const openGroupInvitesRequestFunc = () => {
const openGroupInvitesRequestFunc = ()=> { setValue(2);
setValue(2) };
}
React.useEffect(() => { React.useEffect(() => {
subscribeToEvent("openGroupInvitesRequest", openGroupInvitesRequestFunc); subscribeToEvent('openGroupInvitesRequest', openGroupInvitesRequestFunc);
return () => { return () => {
unsubscribeFromEvent("openGroupInvitesRequest", openGroupInvitesRequestFunc); unsubscribeFromEvent(
'openGroupInvitesRequest',
openGroupInvitesRequestFunc
);
}; };
}, []); }, []);
@ -191,7 +187,7 @@ export const AddGroup = ({ address, open, setOpen }) => {
onClose={handleClose} onClose={handleClose}
TransitionComponent={Transition} TransitionComponent={Transition}
> >
<AppBar sx={{ position: "relative", bgcolor: "#232428" }}> <AppBar sx={{ position: 'relative', bgcolor: '#232428' }}>
<Toolbar> <Toolbar>
<Typography sx={{ ml: 2, flex: 1 }} variant="h6" component="div"> <Typography sx={{ ml: 2, flex: 1 }} variant="h6" component="div">
Group Mgmt Group Mgmt
@ -213,275 +209,289 @@ export const AddGroup = ({ address, open, setOpen }) => {
</AppBar> </AppBar>
<Box <Box
sx={{ sx={{
bgcolor: "#27282c", bgcolor: '#27282c',
flexGrow: 1, flexGrow: 1,
overflowY: "auto", overflowY: 'auto',
color: "white", color: 'white',
flexDirection: 'column', flexDirection: 'column',
display: 'flex' display: 'flex',
}} }}
> >
<Box sx={{ borderBottom: 1, borderColor: "divider" }}> <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
<Tabs <Tabs
value={value} value={value}
onChange={handleChange} onChange={handleChange}
aria-label="basic tabs example" aria-label="basic tabs example"
variant={isMobile ? 'scrollable' : 'fullWidth'} // Scrollable on mobile, full width on desktop variant={isMobile ? 'scrollable' : 'fullWidth'} // Scrollable on mobile, full width on desktop
scrollButtons="auto" scrollButtons="auto"
allowScrollButtonsMobile allowScrollButtonsMobile
sx={{ sx={{
"& .MuiTabs-indicator": { '& .MuiTabs-indicator': {
backgroundColor: "white", backgroundColor: 'white',
}, },
}} }}
> >
<Tab <Tab
label="Create Group" label="Create Group"
{...a11yProps(0)} {...a11yProps(0)}
sx={{ sx={{
"&.Mui-selected": { '&.Mui-selected': {
color: "white", color: 'white',
}, },
fontSize: isMobile ? '0.75rem' : '1rem', // Adjust font size for mobile fontSize: isMobile ? '0.75rem' : '1rem', // Adjust font size for mobile
}} }}
/> />
<Tab <Tab
label="Find Group" label="Find Group"
{...a11yProps(1)} {...a11yProps(1)}
sx={{ sx={{
"&.Mui-selected": { '&.Mui-selected': {
color: "white", color: 'white',
}, },
fontSize: isMobile ? '0.75rem' : '1rem', // Adjust font size for mobile fontSize: isMobile ? '0.75rem' : '1rem', // Adjust font size for mobile
}} }}
/> />
<Tab <Tab
label="Group Invites" label="Group Invites"
{...a11yProps(2)} {...a11yProps(2)}
sx={{ sx={{
"&.Mui-selected": { '&.Mui-selected': {
color: "white", color: 'white',
}, },
fontSize: isMobile ? '0.75rem' : '1rem', // Adjust font size for mobile fontSize: isMobile ? '0.75rem' : '1rem', // Adjust font size for mobile
}} }}
/> />
</Tabs> </Tabs>
</Box> </Box>
{value === 0 && ( {value === 0 && (
<Box sx={{
width: '100%',
padding: '25px'
}}>
<Box <Box
sx={{ sx={{
display: "flex", width: '100%',
flexDirection: "column", padding: '25px',
gap: "20px",
maxWidth: "500px",
}} }}
> >
<Box <Box
sx={{ sx={{
display: "flex", display: 'flex',
flexDirection: "column", flexDirection: 'column',
gap: "5px", gap: '20px',
maxWidth: '500px',
}} }}
> >
<Label>Name of group</Label>
<Input
placeholder="Name of group"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</Box>
<Box
sx={{
display: "flex",
flexDirection: "column",
gap: "5px",
}}
>
<Label>Description of group</Label>
<Input
placeholder="Description of group"
value={description}
onChange={(e) => setDescription(e.target.value)}
/>
</Box>
<Box
sx={{
display: "flex",
flexDirection: "column",
gap: "5px",
}}
>
<Label>Group type</Label>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={groupType}
label="Group Type"
onChange={handleChangeGroupType}
>
<MenuItem value={1}>Open (public)</MenuItem>
<MenuItem value={0}>
Closed (private) - users need permission to join
</MenuItem>
</Select>
</Box>
<Box
sx={{
display: "flex",
gap: "15px",
alignItems: "center",
cursor: "pointer",
}}
onClick={() => setOpenAdvance((prev) => !prev)}
>
<Typography>Advanced options</Typography>
{openAdvance ? <ExpandLess /> : <ExpandMore />}
</Box>
<Collapse in={openAdvance} timeout="auto" unmountOnExit>
<Box <Box
sx={{ sx={{
display: "flex", display: 'flex',
flexDirection: "column", flexDirection: 'column',
gap: "5px", gap: '5px',
}} }}
> >
<Label> <Label>Name of group</Label>
Group Approval Threshold (number / percentage of Admins that <Input
must approve a transaction) placeholder="Name of group"
</Label> value={name}
onChange={(e) => setName(e.target.value)}
/>
</Box>
<Box
sx={{
display: 'flex',
flexDirection: 'column',
gap: '5px',
}}
>
<Label>Description of group</Label>
<Input
placeholder="Description of group"
value={description}
onChange={(e) => setDescription(e.target.value)}
/>
</Box>
<Box
sx={{
display: 'flex',
flexDirection: 'column',
gap: '5px',
}}
>
<Label>Group type</Label>
<Select <Select
labelId="demo-simple-select-label" labelId="demo-simple-select-label"
id="demo-simple-select" id="demo-simple-select"
value={approvalThreshold} value={groupType}
label="Group Approval Threshold" label="Group Type"
onChange={handleChangeApprovalThreshold} onChange={handleChangeGroupType}
> >
<MenuItem value={0}>NONE</MenuItem> <MenuItem value={1}>Open (public)</MenuItem>
<MenuItem value={1}>ONE </MenuItem> <MenuItem value={0}>
Closed (private) - users need permission to join
<MenuItem value={20}>20% </MenuItem> </MenuItem>
<MenuItem value={40}>40% </MenuItem>
<MenuItem value={60}>60% </MenuItem>
<MenuItem value={80}>80% </MenuItem>
<MenuItem value={100}>100% </MenuItem>
</Select> </Select>
</Box> </Box>
<Box <Box
sx={{ sx={{
display: "flex", display: 'flex',
flexDirection: "column", gap: '15px',
gap: "5px", alignItems: 'center',
cursor: 'pointer',
}} }}
onClick={() => setOpenAdvance((prev) => !prev)}
> >
<Label> <Typography>Advanced options</Typography>
Minimum Block delay for Group Transaction Approvals
</Label> {openAdvance ? <ExpandLess /> : <ExpandMore />}
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={minBlock}
label="Minimum Block delay"
onChange={handleChangeMinBlock}
>
<MenuItem value={5}>5 minutes</MenuItem>
<MenuItem value={10}>10 minutes</MenuItem>
<MenuItem value={30}>30 minutes</MenuItem>
<MenuItem value={60}>1 hour</MenuItem>
<MenuItem value={180}>3 hours</MenuItem>
<MenuItem value={300}>5 hours</MenuItem>
<MenuItem value={420}>7 hours</MenuItem>
<MenuItem value={720}>12 hours</MenuItem>
<MenuItem value={1440}>1 day</MenuItem>
<MenuItem value={4320}>3 days</MenuItem>
<MenuItem value={7200}>5 days</MenuItem>
<MenuItem value={10080}>7 days</MenuItem>
</Select>
</Box> </Box>
<Collapse in={openAdvance} timeout="auto" unmountOnExit>
<Box
sx={{
display: 'flex',
flexDirection: 'column',
gap: '5px',
}}
>
<Label>
Group Approval Threshold (number / percentage of Admins
that must approve a transaction)
</Label>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={approvalThreshold}
label="Group Approval Threshold"
onChange={handleChangeApprovalThreshold}
>
<MenuItem value={0}>NONE</MenuItem>
<MenuItem value={1}>ONE </MenuItem>
<MenuItem value={20}>20% </MenuItem>
<MenuItem value={40}>40% </MenuItem>
<MenuItem value={60}>60% </MenuItem>
<MenuItem value={80}>80% </MenuItem>
<MenuItem value={100}>100% </MenuItem>
</Select>
</Box>
<Box
sx={{
display: 'flex',
flexDirection: 'column',
gap: '5px',
}}
>
<Label>
Minimum Block delay for Group Transaction Approvals
</Label>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={minBlock}
label="Minimum Block delay"
onChange={handleChangeMinBlock}
>
<MenuItem value={5}>5 minutes</MenuItem>
<MenuItem value={10}>10 minutes</MenuItem>
<MenuItem value={30}>30 minutes</MenuItem>
<MenuItem value={60}>1 hour</MenuItem>
<MenuItem value={180}>3 hours</MenuItem>
<MenuItem value={300}>5 hours</MenuItem>
<MenuItem value={420}>7 hours</MenuItem>
<MenuItem value={720}>12 hours</MenuItem>
<MenuItem value={1440}>1 day</MenuItem>
<MenuItem value={4320}>3 days</MenuItem>
<MenuItem value={7200}>5 days</MenuItem>
<MenuItem value={10080}>7 days</MenuItem>
</Select>
</Box>
<Box
sx={{
display: 'flex',
flexDirection: 'column',
gap: '5px',
}}
>
<Label>
Maximum Block delay for Group Transaction Approvals
</Label>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={maxBlock}
label="Maximum Block delay"
onChange={handleChangeMaxBlock}
>
<MenuItem value={60}>1 hour</MenuItem>
<MenuItem value={180}>3 hours</MenuItem>
<MenuItem value={300}>5 hours</MenuItem>
<MenuItem value={420}>7 hours</MenuItem>
<MenuItem value={720}>12 hours</MenuItem>
<MenuItem value={1440}>1 day</MenuItem>
<MenuItem value={4320}>3 days</MenuItem>
<MenuItem value={7200}>5 days</MenuItem>
<MenuItem value={10080}>7 days</MenuItem>
<MenuItem value={14400}>10 days</MenuItem>
<MenuItem value={21600}>15 days</MenuItem>
</Select>
</Box>
</Collapse>
<Box <Box
sx={{ sx={{
display: "flex", display: 'flex',
flexDirection: "column", width: '100%',
gap: "5px", justifyContent: 'center',
}} }}
> >
<Label> <Button
Maximum Block delay for Group Transaction Approvals variant="contained"
</Label> color="primary"
<Select onClick={handleCreateGroup}
labelId="demo-simple-select-label"
id="demo-simple-select"
value={maxBlock}
label="Maximum Block delay"
onChange={handleChangeMaxBlock}
> >
<MenuItem value={60}>1 hour</MenuItem> Create Group
<MenuItem value={180}>3 hours</MenuItem> </Button>
<MenuItem value={300}>5 hours</MenuItem>
<MenuItem value={420}>7 hours</MenuItem>
<MenuItem value={720}>12 hours</MenuItem>
<MenuItem value={1440}>1 day</MenuItem>
<MenuItem value={4320}>3 days</MenuItem>
<MenuItem value={7200}>5 days</MenuItem>
<MenuItem value={10080}>7 days</MenuItem>
<MenuItem value={14400}>10 days</MenuItem>
<MenuItem value={21600}>15 days</MenuItem>
</Select>
</Box> </Box>
</Collapse>
<Box
sx={{
display: "flex",
width: "100%",
justifyContent: "center",
}}
>
<Button
variant="contained"
color="primary"
onClick={handleCreateGroup}
>
Create Group
</Button>
</Box> </Box>
</Box> </Box>
</Box>
)} )}
{value === 1 && ( {value === 1 && (
<Box sx={{ <Box
width: '100%', sx={{
padding: '25px', width: '100%',
flexDirection: 'column', padding: '25px',
flexGrow: 1, flexDirection: 'column',
display: 'flex' flexGrow: 1,
}}> display: 'flex',
<AddGroupList setOpenSnack={setOpenSnack} setInfoSnack={setInfoSnack} /> }}
>
<AddGroupList
setOpenSnack={setOpenSnack}
setInfoSnack={setInfoSnack}
/>
</Box> </Box>
)} )}
{value === 2 && (
<Box sx={{
width: '100%',
padding: '25px',
flexDirection: 'column',
flexGrow: 1,
display: 'flex'
}}>
<UserListOfInvites myAddress={address} setOpenSnack={setOpenSnack} setInfoSnack={setInfoSnack} />
</Box>
)}
{value === 2 && (
<Box
sx={{
width: '100%',
padding: '25px',
flexDirection: 'column',
flexGrow: 1,
display: 'flex',
}}
>
<UserListOfInvites
myAddress={address}
setOpenSnack={setOpenSnack}
setInfoSnack={setInfoSnack}
/>
</Box>
)}
</Box> </Box>
<CustomizedSnackbars open={openSnack} setOpen={setOpenSnack} info={infoSnack} setInfo={setInfoSnack} /> <CustomizedSnackbars
open={openSnack}
setOpen={setOpenSnack}
info={infoSnack}
setInfo={setInfoSnack}
/>
</Dialog> </Dialog>
</React.Fragment> </React.Fragment>
); );

31
src/components/Snackbar/Snackbar.tsx
View File

@ -1,31 +1,36 @@
import * as React from 'react'; import * as React from 'react';
import Button from '@mui/material/Button';
import Snackbar, { SnackbarCloseReason } from '@mui/material/Snackbar'; import Snackbar, { SnackbarCloseReason } from '@mui/material/Snackbar';
import Alert from '@mui/material/Alert'; import Alert from '@mui/material/Alert';
export const CustomizedSnackbars = ({open, setOpen, info, setInfo, duration}) => { export const CustomizedSnackbars = ({
open,
setOpen,
info,
setInfo,
duration,
}) => {
const handleClose = ( const handleClose = (
event?: React.SyntheticEvent | Event, event?: React.SyntheticEvent | Event,
reason?: SnackbarCloseReason, reason?: SnackbarCloseReason
) => { ) => {
if (reason === 'clickaway') { if (reason === 'clickaway') {
return; return;
} }
setOpen(false); setOpen(false);
setInfo(null) setInfo(null);
}; };
if(!open) return null if (!open) return null;
return ( return (
<div> <div>
<Snackbar anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }} open={open} autoHideDuration={info?.duration === null ? null : (duration || 6000)} onClose={handleClose}> <Snackbar
anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
open={open}
autoHideDuration={info?.duration === null ? null : duration || 6000}
onClose={handleClose}
>
<Alert <Alert
onClose={handleClose} onClose={handleClose}
severity={info?.type} severity={info?.type}
variant="filled" variant="filled"
@ -36,4 +41,4 @@ export const CustomizedSnackbars = ({open, setOpen, info, setInfo, duration}) =
</Snackbar> </Snackbar>
</div> </div>
); );
} };

4
src/styles/App-styles.ts
View File

@ -146,8 +146,8 @@ export const CustomButton = styled(Box)(({ theme }) => ({
'&:hover': { '&:hover': {
backgroundColor: backgroundColor:
theme.palette.mode === 'dark' theme.palette.mode === 'dark'
? 'rgba(41, 41, 43, 1)' ? 'rgb(136, 130, 130)'
: 'rgba(230, 230, 230, 1)', : 'rgb(173, 173, 180)',
color: '#fff', color: '#fff',
'svg path': { 'svg path': {