added theme to icons

This commit is contained in:
PhilReact 2025-04-28 10:24:14 +03:00
parent 08f38bad92
commit efc83c89aa
9 changed files with 31 additions and 32 deletions

View File

@ -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>

View File

@ -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',

View File

@ -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>

View File

@ -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)}

View File

@ -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);

View File

@ -1780,7 +1780,7 @@ export const Group = ({
</div> </div>
); );
}; };
console.log('groupsProperties', groupsProperties);
const renderGroups = () => { const renderGroups = () => {
return ( return (
<div <div

View File

@ -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',
}} }}
> >

View File

@ -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}

View File

@ -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>