Qortal/Qortal-Hub
1
0
Fork 0
mirror of https://github.com/Qortal/Qortal-Hub.git synced 2025-06-14 12:01:21 +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

142
src/components/BuyQortInformation.tsx
View File

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