mirror of
https://github.com/Qortal/Qortal-Hub.git
synced 2025-06-07 08:56:58 +00:00
added theme to icons
This commit is contained in:
parent
08f38bad92
commit
efc83c89aa
@ -1,4 +1,9 @@
|
|||||||
import { IconButton, InputAdornment, TextFieldProps } from '@mui/material';
|
import {
|
||||||
|
IconButton,
|
||||||
|
InputAdornment,
|
||||||
|
TextFieldProps,
|
||||||
|
useTheme,
|
||||||
|
} from '@mui/material';
|
||||||
import React, { useRef, useState } from 'react';
|
import React, { useRef, useState } from 'react';
|
||||||
import AddIcon from '@mui/icons-material/Add';
|
import AddIcon from '@mui/icons-material/Add';
|
||||||
import RemoveIcon from '@mui/icons-material/Remove';
|
import RemoveIcon from '@mui/icons-material/Remove';
|
||||||
@ -39,7 +44,7 @@ export const BoundedNumericTextField = ({
|
|||||||
const stringIsEmpty = (value: string) => {
|
const stringIsEmpty = (value: string) => {
|
||||||
return value === '';
|
return value === '';
|
||||||
};
|
};
|
||||||
|
const theme = useTheme();
|
||||||
const isAllZerosNum = /^0*\.?0*$/;
|
const isAllZerosNum = /^0*\.?0*$/;
|
||||||
const isFloatNum = /^-?[0-9]*\.?[0-9]*$/;
|
const isFloatNum = /^-?[0-9]*\.?[0-9]*$/;
|
||||||
const isIntegerNum = /^-?[0-9]+$/;
|
const isIntegerNum = /^-?[0-9]+$/;
|
||||||
@ -133,7 +138,7 @@ export const BoundedNumericTextField = ({
|
|||||||
>
|
>
|
||||||
<AddIcon
|
<AddIcon
|
||||||
sx={{
|
sx={{
|
||||||
color: 'white',
|
color: theme.palette.text.primary,
|
||||||
}}
|
}}
|
||||||
/>{' '}
|
/>{' '}
|
||||||
</IconButton>
|
</IconButton>
|
||||||
@ -143,7 +148,7 @@ export const BoundedNumericTextField = ({
|
|||||||
>
|
>
|
||||||
<RemoveIcon
|
<RemoveIcon
|
||||||
sx={{
|
sx={{
|
||||||
color: 'white',
|
color: theme.palette.text.primary,
|
||||||
}}
|
}}
|
||||||
/>{' '}
|
/>{' '}
|
||||||
</IconButton>
|
</IconButton>
|
||||||
|
@ -6,7 +6,7 @@ import {
|
|||||||
} from './Apps-styles';
|
} from './Apps-styles';
|
||||||
import { NavBack } from '../../assets/Icons/NavBack.tsx';
|
import { NavBack } from '../../assets/Icons/NavBack.tsx';
|
||||||
import { NavAdd } from '../../assets/Icons/NavAdd.tsx';
|
import { NavAdd } from '../../assets/Icons/NavAdd.tsx';
|
||||||
import { ButtonBase, Tab, Tabs } from '@mui/material';
|
import { ButtonBase, Tab, Tabs, useTheme } from '@mui/material';
|
||||||
import {
|
import {
|
||||||
executeEvent,
|
executeEvent,
|
||||||
subscribeToEvent,
|
subscribeToEvent,
|
||||||
@ -23,7 +23,7 @@ export const AppsDevModeNavBar = () => {
|
|||||||
const [navigationController, setNavigationController] = useRecoilState(
|
const [navigationController, setNavigationController] = useRecoilState(
|
||||||
navigationControllerAtom
|
navigationControllerAtom
|
||||||
);
|
);
|
||||||
|
const theme = useTheme();
|
||||||
const [isNewTabWindow, setIsNewTabWindow] = useState(false);
|
const [isNewTabWindow, setIsNewTabWindow] = useState(false);
|
||||||
const tabsRef = useRef(null);
|
const tabsRef = useRef(null);
|
||||||
const [anchorEl, setAnchorEl] = useState(null);
|
const [anchorEl, setAnchorEl] = useState(null);
|
||||||
@ -114,7 +114,7 @@ export const AppsDevModeNavBar = () => {
|
|||||||
scrollButtons={true}
|
scrollButtons={true}
|
||||||
sx={{
|
sx={{
|
||||||
'& .MuiTabs-indicator': {
|
'& .MuiTabs-indicator': {
|
||||||
backgroundColor: 'white',
|
backgroundColor: theme.palette.text.primary,
|
||||||
},
|
},
|
||||||
maxHeight: `275px`, // Ensure the tabs container fits within the available space
|
maxHeight: `275px`, // Ensure the tabs container fits within the available space
|
||||||
overflow: 'hidden', // Prevents overflow on small screens
|
overflow: 'hidden', // Prevents overflow on small screens
|
||||||
@ -133,7 +133,7 @@ export const AppsDevModeNavBar = () => {
|
|||||||
} // Pass custom component
|
} // Pass custom component
|
||||||
sx={{
|
sx={{
|
||||||
'&.Mui-selected': {
|
'&.Mui-selected': {
|
||||||
color: 'white',
|
color: theme.palette.text.primary,
|
||||||
},
|
},
|
||||||
padding: '0px',
|
padding: '0px',
|
||||||
margin: '0px',
|
margin: '0px',
|
||||||
|
@ -69,10 +69,7 @@ export const AppsHomeDesktop = ({
|
|||||||
display: 'flex',
|
display: 'flex',
|
||||||
gap: '20px',
|
gap: '20px',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
backgroundColor:
|
backgroundColor: theme.palette.background.paper,
|
||||||
theme.palette.mode === 'dark'
|
|
||||||
? 'rgba(41, 41, 43, 1)'
|
|
||||||
: 'rgb(209, 209, 209)',
|
|
||||||
padding: '7px',
|
padding: '7px',
|
||||||
borderRadius: '20px',
|
borderRadius: '20px',
|
||||||
width: '100%',
|
width: '100%',
|
||||||
@ -91,9 +88,9 @@ export const AppsHomeDesktop = ({
|
|||||||
placeholder="qortal://"
|
placeholder="qortal://"
|
||||||
sx={{
|
sx={{
|
||||||
width: '100%',
|
width: '100%',
|
||||||
color: theme.palette.mode === 'dark' ? 'white' : 'black',
|
color: theme.palette.text.primary,
|
||||||
'& .MuiInput-input::placeholder': {
|
'& .MuiInput-input::placeholder': {
|
||||||
color: 'rgba(84, 84, 84, 0.70) !important',
|
color: theme.palette.text.secondary,
|
||||||
fontSize: '20px',
|
fontSize: '20px',
|
||||||
fontStyle: 'normal',
|
fontStyle: 'normal',
|
||||||
fontWeight: 400,
|
fontWeight: 400,
|
||||||
@ -115,7 +112,9 @@ export const AppsHomeDesktop = ({
|
|||||||
<ButtonBase onClick={() => openQortalUrl()}>
|
<ButtonBase onClick={() => openQortalUrl()}>
|
||||||
<ArrowOutwardIcon
|
<ArrowOutwardIcon
|
||||||
sx={{
|
sx={{
|
||||||
color: qortalUrl ? 'white' : 'rgba(84, 84, 84, 0.70)',
|
color: qortalUrl
|
||||||
|
? theme.palette.text.primary
|
||||||
|
: theme.palette.text.secondary,
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</ButtonBase>
|
</ButtonBase>
|
||||||
|
@ -149,7 +149,7 @@ export const GeneralNotifications = ({ address }) => {
|
|||||||
>
|
>
|
||||||
<AccountBalanceWalletIcon
|
<AccountBalanceWalletIcon
|
||||||
sx={{
|
sx={{
|
||||||
color: 'white',
|
color: theme.palette.text.primary,
|
||||||
}}
|
}}
|
||||||
/>{' '}
|
/>{' '}
|
||||||
{formatDate(latestTx?.timestamp)}
|
{formatDate(latestTx?.timestamp)}
|
||||||
|
@ -20,7 +20,7 @@ import { WrapperUserAction } from '../../WrapperUserAction';
|
|||||||
|
|
||||||
export const ShowMessage = ({ message, openNewPostWithQuote, myName }: any) => {
|
export const ShowMessage = ({ message, openNewPostWithQuote, myName }: any) => {
|
||||||
const [expandAttachments, setExpandAttachments] = useState<boolean>(false);
|
const [expandAttachments, setExpandAttachments] = useState<boolean>(false);
|
||||||
console.log('message', message);
|
|
||||||
let cleanHTML = '';
|
let cleanHTML = '';
|
||||||
if (message?.htmlContent) {
|
if (message?.htmlContent) {
|
||||||
cleanHTML = DOMPurify.sanitize(message.htmlContent);
|
cleanHTML = DOMPurify.sanitize(message.htmlContent);
|
||||||
|
@ -1780,7 +1780,7 @@ export const Group = ({
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
console.log('groupsProperties', groupsProperties);
|
|
||||||
const renderGroups = () => {
|
const renderGroups = () => {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
|
@ -7,6 +7,7 @@ import {
|
|||||||
ListItemText,
|
ListItemText,
|
||||||
Popover,
|
Popover,
|
||||||
Typography,
|
Typography,
|
||||||
|
useTheme,
|
||||||
} from '@mui/material';
|
} from '@mui/material';
|
||||||
import { useRef, useState } from 'react';
|
import { useRef, useState } from 'react';
|
||||||
import {
|
import {
|
||||||
@ -39,7 +40,7 @@ const ListOfMembers = ({
|
|||||||
const [isLoadingBan, setIsLoadingBan] = useState(false);
|
const [isLoadingBan, setIsLoadingBan] = useState(false);
|
||||||
const [isLoadingMakeAdmin, setIsLoadingMakeAdmin] = useState(false);
|
const [isLoadingMakeAdmin, setIsLoadingMakeAdmin] = useState(false);
|
||||||
const [isLoadingRemoveAdmin, setIsLoadingRemoveAdmin] = useState(false);
|
const [isLoadingRemoveAdmin, setIsLoadingRemoveAdmin] = useState(false);
|
||||||
|
const theme = useTheme();
|
||||||
const listRef = useRef();
|
const listRef = useRef();
|
||||||
|
|
||||||
const handlePopoverOpen = (event, index) => {
|
const handlePopoverOpen = (event, index) => {
|
||||||
@ -354,7 +355,7 @@ const ListOfMembers = ({
|
|||||||
{member?.isAdmin && (
|
{member?.isAdmin && (
|
||||||
<Typography
|
<Typography
|
||||||
sx={{
|
sx={{
|
||||||
color: 'white',
|
color: theme.palette.text.primary,
|
||||||
marginLeft: 'auto',
|
marginLeft: 'auto',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
@ -131,9 +131,7 @@ export const Settings = ({ address, open, setOpen }) => {
|
|||||||
onClose={handleClose}
|
onClose={handleClose}
|
||||||
TransitionComponent={Transition}
|
TransitionComponent={Transition}
|
||||||
>
|
>
|
||||||
<AppBar
|
<AppBar sx={{ position: 'relative' }}>
|
||||||
sx={{ position: 'relative', bgcolor: theme.palette.background }}
|
|
||||||
>
|
|
||||||
<Toolbar>
|
<Toolbar>
|
||||||
<Typography sx={{ ml: 2, flex: 1 }} variant="h4" component="div">
|
<Typography sx={{ ml: 2, flex: 1 }} variant="h4" component="div">
|
||||||
General Settings
|
General Settings
|
||||||
@ -152,7 +150,6 @@ export const Settings = ({ address, open, setOpen }) => {
|
|||||||
|
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
bgcolor: theme.palette.background,
|
|
||||||
flexGrow: 1,
|
flexGrow: 1,
|
||||||
overflowY: 'auto',
|
overflowY: 'auto',
|
||||||
color: theme.palette.text.primary,
|
color: theme.palette.text.primary,
|
||||||
@ -173,9 +170,6 @@ export const Settings = ({ address, open, setOpen }) => {
|
|||||||
/>
|
/>
|
||||||
{window?.electronAPI && (
|
{window?.electronAPI && (
|
||||||
<FormControlLabel
|
<FormControlLabel
|
||||||
sx={{
|
|
||||||
color: 'white',
|
|
||||||
}}
|
|
||||||
control={
|
control={
|
||||||
<LocalNodeSwitch
|
<LocalNodeSwitch
|
||||||
checked={isEnabledDevMode}
|
checked={isEnabledDevMode}
|
||||||
|
@ -226,7 +226,7 @@ export const RegisterName = ({
|
|||||||
>
|
>
|
||||||
<ErrorIcon
|
<ErrorIcon
|
||||||
sx={{
|
sx={{
|
||||||
color: 'white',
|
color: theme.palette.text.primary,
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<Typography>
|
<Typography>
|
||||||
@ -248,7 +248,7 @@ export const RegisterName = ({
|
|||||||
>
|
>
|
||||||
<CheckIcon
|
<CheckIcon
|
||||||
sx={{
|
sx={{
|
||||||
color: 'white',
|
color: theme.palette.text.primary,
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<Typography>{registerNameValue} is available</Typography>
|
<Typography>{registerNameValue} is available</Typography>
|
||||||
@ -264,7 +264,7 @@ export const RegisterName = ({
|
|||||||
>
|
>
|
||||||
<ErrorIcon
|
<ErrorIcon
|
||||||
sx={{
|
sx={{
|
||||||
color: 'white',
|
color: theme.palette.text.primary,
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<Typography>{registerNameValue} is unavailable</Typography>
|
<Typography>{registerNameValue} is unavailable</Typography>
|
||||||
@ -298,7 +298,7 @@ export const RegisterName = ({
|
|||||||
<ListItemIcon>
|
<ListItemIcon>
|
||||||
<RadioButtonCheckedIcon
|
<RadioButtonCheckedIcon
|
||||||
sx={{
|
sx={{
|
||||||
color: 'white',
|
color: theme.palette.text.primary,
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</ListItemIcon>
|
</ListItemIcon>
|
||||||
@ -308,7 +308,7 @@ export const RegisterName = ({
|
|||||||
<ListItemIcon>
|
<ListItemIcon>
|
||||||
<RadioButtonCheckedIcon
|
<RadioButtonCheckedIcon
|
||||||
sx={{
|
sx={{
|
||||||
color: 'white',
|
color: theme.palette.text.primary,
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</ListItemIcon>
|
</ListItemIcon>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user