added theme to icons

src/common/BoundedNumericTextField.tsx

@@ -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 AddIcon from '@mui/icons-material/Add';
 import RemoveIcon from '@mui/icons-material/Remove';
@@ -39,7 +44,7 @@ export const BoundedNumericTextField = ({
   const stringIsEmpty = (value: string) => {
     return value === '';
   };
-
+  const theme = useTheme();
   const isAllZerosNum = /^0*\.?0*$/;
   const isFloatNum = /^-?[0-9]*\.?[0-9]*$/;
   const isIntegerNum = /^-?[0-9]+$/;
@@ -133,7 +138,7 @@ export const BoundedNumericTextField = ({
             >
               <AddIcon
                 sx={{
-                  color: 'white',
+                  color: theme.palette.text.primary,
                 }}
               />{' '}
             </IconButton>
@@ -143,7 +148,7 @@ export const BoundedNumericTextField = ({
             >
               <RemoveIcon
                 sx={{
-                  color: 'white',
+                  color: theme.palette.text.primary,
                 }}
               />{' '}
             </IconButton>

src/components/Apps/AppsDevModeNavBar.tsx

@@ -6,7 +6,7 @@ import {
 } from './Apps-styles';
 import { NavBack } from '../../assets/Icons/NavBack.tsx';
 import { NavAdd } from '../../assets/Icons/NavAdd.tsx';
-import { ButtonBase, Tab, Tabs } from '@mui/material';
+import { ButtonBase, Tab, Tabs, useTheme } from '@mui/material';
 import {
   executeEvent,
   subscribeToEvent,
@@ -23,7 +23,7 @@ export const AppsDevModeNavBar = () => {
   const [navigationController, setNavigationController] = useRecoilState(
     navigationControllerAtom
   );
-
+  const theme = useTheme();
   const [isNewTabWindow, setIsNewTabWindow] = useState(false);
   const tabsRef = useRef(null);
   const [anchorEl, setAnchorEl] = useState(null);
@@ -114,7 +114,7 @@ export const AppsDevModeNavBar = () => {
           scrollButtons={true}
           sx={{
             '& .MuiTabs-indicator': {
-              backgroundColor: 'white',
+              backgroundColor: theme.palette.text.primary,
             },
             maxHeight: `275px`, // Ensure the tabs container fits within the available space
             overflow: 'hidden', // Prevents overflow on small screens
@@ -133,7 +133,7 @@ export const AppsDevModeNavBar = () => {
               } // Pass custom component
               sx={{
                 '&.Mui-selected': {
-                  color: 'white',
+                  color: theme.palette.text.primary,
                 },
                 padding: '0px',
                 margin: '0px',

src/components/Apps/AppsHomeDesktop.tsx

@@ -69,10 +69,7 @@ export const AppsHomeDesktop = ({
             display: 'flex',
             gap: '20px',
             alignItems: 'center',
-            backgroundColor:
-              theme.palette.mode === 'dark'
-                ? 'rgba(41, 41, 43, 1)'
-                : 'rgb(209, 209, 209)',
+            backgroundColor: theme.palette.background.paper,
             padding: '7px',
             borderRadius: '20px',
             width: '100%',
@@ -91,9 +88,9 @@ export const AppsHomeDesktop = ({
             placeholder="qortal://"
             sx={{
               width: '100%',
-              color: theme.palette.mode === 'dark' ? 'white' : 'black',
+              color: theme.palette.text.primary,
               '& .MuiInput-input::placeholder': {
-                color: 'rgba(84, 84, 84, 0.70) !important',
+                color: theme.palette.text.secondary,
                 fontSize: '20px',
                 fontStyle: 'normal',
                 fontWeight: 400,
@@ -115,7 +112,9 @@ export const AppsHomeDesktop = ({
           <ButtonBase onClick={() => openQortalUrl()}>
             <ArrowOutwardIcon
               sx={{
-                color: qortalUrl ? 'white' : 'rgba(84, 84, 84, 0.70)',
+                color: qortalUrl
+                  ? theme.palette.text.primary
+                  : theme.palette.text.secondary,
               }}
             />
           </ButtonBase>

src/components/GeneralNotifications.tsx

@@ -149,7 +149,7 @@ export const GeneralNotifications = ({ address }) => {
                 >
                   <AccountBalanceWalletIcon
                     sx={{
-                      color: 'white',
+                      color: theme.palette.text.primary,
                     }}
                   />{' '}
                   {formatDate(latestTx?.timestamp)}

src/components/Group/Forum/ShowMessageWithoutModal.tsx

@@ -20,7 +20,7 @@ import { WrapperUserAction } from '../../WrapperUserAction';
 
 export const ShowMessage = ({ message, openNewPostWithQuote, myName }: any) => {
   const [expandAttachments, setExpandAttachments] = useState<boolean>(false);
-  console.log('message', message);
+
   let cleanHTML = '';
   if (message?.htmlContent) {
     cleanHTML = DOMPurify.sanitize(message.htmlContent);

src/components/Group/Group.tsx

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

src/components/Group/ListOfMembers.tsx

@@ -7,6 +7,7 @@ import {
   ListItemText,
   Popover,
   Typography,
+  useTheme,
 } from '@mui/material';
 import { useRef, useState } from 'react';
 import {
@@ -39,7 +40,7 @@ const ListOfMembers = ({
   const [isLoadingBan, setIsLoadingBan] = useState(false);
   const [isLoadingMakeAdmin, setIsLoadingMakeAdmin] = useState(false);
   const [isLoadingRemoveAdmin, setIsLoadingRemoveAdmin] = useState(false);
-
+  const theme = useTheme();
   const listRef = useRef();
 
   const handlePopoverOpen = (event, index) => {
@@ -354,7 +355,7 @@ const ListOfMembers = ({
                 {member?.isAdmin && (
                   <Typography
                     sx={{
-                      color: 'white',
+                      color: theme.palette.text.primary,
                       marginLeft: 'auto',
                     }}
                   >

src/components/Group/Settings.tsx

@@ -131,9 +131,7 @@ export const Settings = ({ address, open, setOpen }) => {
         onClose={handleClose}
         TransitionComponent={Transition}
       >
-        <AppBar
-          sx={{ position: 'relative', bgcolor: theme.palette.background }}
-        >
+        <AppBar sx={{ position: 'relative' }}>
           <Toolbar>
             <Typography sx={{ ml: 2, flex: 1 }} variant="h4" component="div">
               General Settings
@@ -152,7 +150,6 @@ export const Settings = ({ address, open, setOpen }) => {
 
         <Box
           sx={{
-            bgcolor: theme.palette.background,
             flexGrow: 1,
             overflowY: 'auto',
             color: theme.palette.text.primary,
@@ -173,9 +170,6 @@ export const Settings = ({ address, open, setOpen }) => {
           />
           {window?.electronAPI && (
             <FormControlLabel
-              sx={{
-                color: 'white',
-              }}
               control={
                 <LocalNodeSwitch
                   checked={isEnabledDevMode}

src/components/RegisterName.tsx

@@ -226,7 +226,7 @@ export const RegisterName = ({
               >
                 <ErrorIcon
                   sx={{
-                    color: 'white',
+                    color: theme.palette.text.primary,
                   }}
                 />
                 <Typography>
@@ -248,7 +248,7 @@ export const RegisterName = ({
             >
               <CheckIcon
                 sx={{
-                  color: 'white',
+                  color: theme.palette.text.primary,
                 }}
               />
               <Typography>{registerNameValue} is available</Typography>
@@ -264,7 +264,7 @@ export const RegisterName = ({
             >
               <ErrorIcon
                 sx={{
-                  color: 'white',
+                  color: theme.palette.text.primary,
                 }}
               />
               <Typography>{registerNameValue} is unavailable</Typography>
@@ -298,7 +298,7 @@ export const RegisterName = ({
               <ListItemIcon>
                 <RadioButtonCheckedIcon
                   sx={{
-                    color: 'white',
+                    color: theme.palette.text.primary,
                   }}
                 />
               </ListItemIcon>
@@ -308,7 +308,7 @@ export const RegisterName = ({
               <ListItemIcon>
                 <RadioButtonCheckedIcon
                   sx={{
-                    color: 'white',
+                    color: theme.palette.text.primary,
                   }}
                 />
               </ListItemIcon>