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

Add theme

Browse Source
This commit is contained in:
Nicola Benaglia 2025-04-18 17:58:05 +02:00
parent 84ea9fbc92
commit dc6b9db7f1
3 changed files with 160 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

280
src/components/BuyQortInformation.tsx
View File

@ -1,154 +1,152 @@
import React, { useCallback, useContext, useEffect, useState } from 'react' import { useCallback, useEffect, useState } from 'react';
import { import {
Avatar, Box,
Box, Button,
Button, ButtonBase,
ButtonBase, Dialog,
Collapse, DialogActions,
Dialog, DialogContent,
DialogActions, DialogTitle,
DialogContent, ListItem,
DialogContentText, ListItemIcon,
DialogTitle, ListItemText,
Input, List,
ListItem, Typography,
ListItemAvatar, useTheme,
ListItemButton, } from '@mui/material';
ListItemIcon,
ListItemText,
List,
MenuItem,
Popover,
Select,
TextField,
Typography,
} from "@mui/material";
import { Label } from './Group/AddGroup';
import { Spacer } from '../common/Spacer'; import { Spacer } from '../common/Spacer';
import { LoadingButton } from '@mui/lab'; import qTradeLogo from '../assets/Icons/q-trade-logo.webp';
import { getBaseApiReact, MyContext } from '../App';
import { getFee } from '../background';
import qTradeLogo from "../assets/Icons/q-trade-logo.webp";
import RadioButtonCheckedIcon from '@mui/icons-material/RadioButtonChecked'; import RadioButtonCheckedIcon from '@mui/icons-material/RadioButtonChecked';
import { executeEvent, subscribeToEvent, unsubscribeFromEvent } from '../utils/events'; import {
import { BarSpinner } from '../common/Spinners/BarSpinner/BarSpinner'; executeEvent,
subscribeToEvent,
unsubscribeFromEvent,
} from '../utils/events';
export const BuyQortInformation = ({ balance }) => {
const [isOpen, setIsOpen] = useState(false);
const openBuyQortInfoFunc = useCallback(
(e) => {
setIsOpen(true);
},
[setIsOpen]
);
export const BuyQortInformation = ({balance}) => { const theme = useTheme();
const [isOpen, setIsOpen] = useState(false)
const openBuyQortInfoFunc = useCallback((e) => { useEffect(() => {
setIsOpen(true) subscribeToEvent('openBuyQortInfo', openBuyQortInfoFunc);
}, [ setIsOpen]); return () => {
unsubscribeFromEvent('openBuyQortInfo', openBuyQortInfoFunc);
useEffect(() => { };
subscribeToEvent("openBuyQortInfo", openBuyQortInfoFunc); }, [openBuyQortInfoFunc]);
return () => {
unsubscribeFromEvent("openBuyQortInfo", openBuyQortInfoFunc);
};
}, [openBuyQortInfoFunc]);
return ( return (
<Dialog <Dialog
open={isOpen} open={isOpen}
aria-labelledby="alert-dialog-title" aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description" aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">
{"Get QORT"}
</DialogTitle>
<DialogContent>
<Box
sx={{
width: "400px",
maxWidth: '90vw',
height: "400px",
maxHeight: '90vh',
display: "flex",
flexDirection: "column",
alignItems: "center",
gap: "10px",
padding: "10px",
}}
>
<Typography>Get QORT using Qortal's crosschain trade portal</Typography>
<ButtonBase
sx={{
"&:hover": { backgroundColor: "secondary.main" },
transition: "all 0.1s ease-in-out",
padding: "5px",
borderRadius: "5px",
gap: "5px",
}}
onClick={async () => {
executeEvent("addTab", {
data: { service: "APP", name: "q-trade" },
});
executeEvent("open-apps-mode", {});
setIsOpen(false)
}}
>
<img
style={{
borderRadius: "50%",
height: '30px'
}}
src={qTradeLogo}
/>
<Typography
sx={{
fontSize: "1rem",
}}
>
Trade QORT
</Typography>
</ButtonBase>
<Spacer height='40px' />
<Typography sx={{
textDecoration: 'underline'
}}>Benefits of having QORT</Typography>
<List
sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}
aria-label="contacts"
> >
<ListItem disablePadding> <DialogTitle id="alert-dialog-title">{'Get QORT'}</DialogTitle>
<DialogContent>
<ListItemIcon> <Box
<RadioButtonCheckedIcon sx={{ sx={{
color: 'white' alignItems: 'center',
}} /> display: 'flex',
</ListItemIcon> flexDirection: 'column',
<ListItemText primary="Create transactions on the Qortal Blockchain" /> gap: '10px',
height: '400px',
</ListItem> maxHeight: '90vh',
<ListItem disablePadding> maxWidth: '90vw',
padding: '10px',
<ListItemIcon> width: '400px',
<RadioButtonCheckedIcon sx={{ }}
color: 'white' >
}} /> <Typography>
</ListItemIcon> Get QORT using Qortal's crosschain trade portal
<ListItemText primary="Having at least 4 QORT in your balance allows you to send chat messages at near instant speed." /> </Typography>
<ButtonBase
</ListItem> sx={{
</List> '&:hover': { backgroundColor: theme.palette.secondary.main },
</Box> transition: 'all 0.1s ease-in-out',
</DialogContent> padding: '5px',
<DialogActions> borderRadius: '5px',
<Button gap: '5px',
variant="contained" }}
onClick={() => { onClick={async () => {
setIsOpen(false) executeEvent('addTab', {
data: { service: 'APP', name: 'q-trade' },
});
executeEvent('open-apps-mode', {});
setIsOpen(false);
}}
>
<img
style={{
borderRadius: '50%',
height: '30px',
}}
src={qTradeLogo}
/>
<Typography
sx={{
fontSize: '1rem',
}} }}
> >
Close Trade QORT
</Button> </Typography>
</ButtonBase>
</DialogActions> <Spacer height="40px" />
</Dialog> <Typography
) sx={{
} textDecoration: 'underline',
}}
>
Benefits of having QORT
</Typography>
<List
sx={{
width: '100%',
maxWidth: 360,
bgcolor: theme.palette.background.paper,
}}
aria-label="contacts"
>
<ListItem disablePadding>
<ListItemIcon>
<RadioButtonCheckedIcon
sx={{
color: theme.palette.primary.main,
}}
/>
</ListItemIcon>
<ListItemText primary="Create transactions on the Qortal Blockchain" />
</ListItem>
<ListItem disablePadding>
<ListItemIcon>
<RadioButtonCheckedIcon
sx={{
color: theme.palette.primary.main,
}}
/>
</ListItemIcon>
<ListItemText primary="Having at least 4 QORT in your balance allows you to send chat messages at near instant speed." />
</ListItem>
</List>
</Box>
</DialogContent>
<DialogActions>
<Button
variant="contained"
onClick={() => {
setIsOpen(false);
}}
>
Close
</Button>
</DialogActions>
</Dialog>
);
};

15
src/components/Group/QMailMessages.tsx
View File

@ -5,7 +5,7 @@ import ListItemButton from '@mui/material/ListItemButton';
import ListItemIcon from '@mui/material/ListItemIcon'; import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText'; import ListItemText from '@mui/material/ListItemText';
import moment from 'moment'; import moment from 'moment';
import { Box, ButtonBase, Collapse, Typography } from '@mui/material'; import { Box, ButtonBase, Collapse, Typography, useTheme } from '@mui/material';
import { getBaseApiReact, isMobile } from '../../App'; import { getBaseApiReact, isMobile } from '../../App';
import MailIcon from '@mui/icons-material/Mail'; import MailIcon from '@mui/icons-material/Mail';
import MailOutlineIcon from '@mui/icons-material/MailOutline'; import MailOutlineIcon from '@mui/icons-material/MailOutline';
@ -51,6 +51,7 @@ export const QMailMessages = ({ userName, userAddress }) => {
qMailLastEnteredTimestampAtom qMailLastEnteredTimestampAtom
); );
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const theme = useTheme();
const getMails = useCallback(async () => { const getMails = useCallback(async () => {
try { try {
@ -175,14 +176,14 @@ export const QMailMessages = ({ userName, userAddress }) => {
<Box <Box
className="scrollable-container" className="scrollable-container"
sx={{ sx={{
width: '322px', bgcolor: theme.palette.background.paper,
height: isMobile ? '165px' : '250px', borderRadius: '19px',
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
bgcolor: 'background.paper', height: isMobile ? '165px' : '250px',
padding: '20px',
borderRadius: '19px',
overflow: 'auto', overflow: 'auto',
padding: '20px',
width: '322px',
}} }}
> >
{loading && mails.length === 0 && ( {loading && mails.length === 0 && (
@ -210,7 +211,7 @@ export const QMailMessages = ({ userName, userAddress }) => {
sx={{ sx={{
fontSize: '11px', fontSize: '11px',
fontWeight: 400, fontWeight: 400,
color: 'rgba(255, 255, 255, 0.2)', color: theme.palette.primary,
}} }}
> >
Nothing to display Nothing to display

27
src/components/TaskManager/TaskManager.tsx
View File

@ -5,6 +5,7 @@ import {
ListItemText, ListItemText,
Collapse, Collapse,
IconButton, IconButton,
useTheme,
} from '@mui/material'; } from '@mui/material';
import React, { useContext, useEffect, useRef } from 'react'; import React, { useContext, useEffect, useRef } from 'react';
import PendingIcon from '@mui/icons-material/Pending'; import PendingIcon from '@mui/icons-material/Pending';
@ -18,6 +19,7 @@ export const TaskManager = ({ getUserInfo }) => {
const { txList, setTxList, memberGroups } = useContext(MyContext); const { txList, setTxList, memberGroups } = useContext(MyContext);
const [open, setOpen] = React.useState(false); const [open, setOpen] = React.useState(false);
const intervals = useRef({}); const intervals = useRef({});
const theme = useTheme();
const handleClick = () => { const handleClick = () => {
setOpen((prev) => !prev); setOpen((prev) => !prev);
@ -146,12 +148,9 @@ export const TaskManager = ({ getUserInfo }) => {
<IconButton <IconButton
onClick={handleClick} onClick={handleClick}
sx={{ sx={{
// position: "fixed", bgcolor: theme.palette.primary.main,
// bottom: 16, color: theme.palette.text.primary,
// right: 16, ':hover': { bgcolor: theme.palette.primary },
bgcolor: 'primary.main',
color: 'white',
':hover': { bgcolor: 'primary.dark' },
}} }}
> >
{txList.some((item) => !item.done) ? ( {txList.some((item) => !item.done) ? (
@ -164,16 +163,16 @@ export const TaskManager = ({ getUserInfo }) => {
{open && ( {open && (
<List <List
sx={{ sx={{
position: 'fixed', bgcolor: theme.palette.background.paper,
bottom: 16, bottom: 16,
boxShadow: 4,
maxHeight: '400px',
overflow: 'auto',
padding: '0px',
position: 'fixed',
right: 16, right: 16,
width: '300px', width: '300px',
maxHeight: '400px',
bgcolor: 'background.paper',
boxShadow: 4,
overflow: 'auto',
zIndex: 10, zIndex: 10,
padding: '0px',
}} }}
component="nav" component="nav"
> >
@ -182,13 +181,13 @@ export const TaskManager = ({ getUserInfo }) => {
{txList.some((item) => !item.done) ? ( {txList.some((item) => !item.done) ? (
<PendingIcon <PendingIcon
sx={{ sx={{
color: 'white', color: theme.palette.primary,
}} }}
/> />
) : ( ) : (
<TaskAltIcon <TaskAltIcon
sx={{ sx={{
color: 'white', color: theme.palette.primary,
}} }}
/> />
)} )}