Add sx to IconButton

src/common/BoundedNumericTextField.tsx

@@ -135,6 +135,10 @@ export const BoundedNumericTextField = ({
             <IconButton
               size="small"
               onClick={() => changeValueWithIncDecButton(1)}
+              sx={{
+                bgcolor: theme.palette.background.default,
+                color: theme.palette.text.primary,
+              }}
             >
               <AddIcon
                 sx={{
@@ -145,6 +149,10 @@ export const BoundedNumericTextField = ({
             <IconButton
               size="small"
               onClick={() => changeValueWithIncDecButton(-1)}
+              sx={{
+                bgcolor: theme.palette.background.default,
+                color: theme.palette.text.primary,
+              }}
             >
               <RemoveIcon
                 sx={{

src/components/Embeds/ImageEmbed.tsx

@@ -269,11 +269,12 @@ export function ImageViewer({ src = null, alt = '' }) {
           <IconButton
             onClick={handleCloseFullscreen}
             sx={{
-              position: 'absolute',
+              bgcolor: theme.palette.background.default,
-              top: 8,
-              right: 8,
-              zIndex: 10,
               color: theme.palette.text.primary,
+              position: 'absolute',
+              right: 8,
+              top: 8,
+              zIndex: 10,
             }}
           >
             <CloseIcon />

src/components/Group/AddGroup.tsx

@@ -252,6 +252,10 @@ export const AddGroup = ({ address, open, setOpen }) => {
               color="inherit"
               edge="start"
               onClick={handleClose}
+              sx={{
+                bgcolor: theme.palette.background.default,
+                color: theme.palette.text.primary,
+              }}
             >
               <CloseIcon />
             </IconButton>

src/components/Group/BlockedUsersModal.tsx

@@ -406,10 +406,11 @@ export const BlockedUsersModal = () => {
           })}
           onClick={onCancel}
           sx={{
+            bgcolor: theme.palette.background.default,
+            color: theme.palette.text.primary,
             position: 'absolute',
             right: 8,
             top: 8,
-            color: theme.palette.text.primary,
           }}
         >
           <CloseIcon />

src/components/Group/GroupInvites.tsx

@@ -173,6 +173,10 @@ export const GroupInvites = ({ myAddress, setOpenAddGroup }) => {
                       aria-label={t('core:comment_other', {
                         postProcess: 'capitalizeFirstChar',
                       })}
+                      sx={{
+                        bgcolor: theme.palette.background.default,
+                        color: theme.palette.text.primary,
+                      }}
                     >
                       <GroupAddIcon
                         sx={{

src/components/Group/GroupJoinRequests.tsx

@@ -256,6 +256,10 @@ export const GroupJoinRequests = ({
                       aria-label={t('core:comment_other', {
                         postProcess: 'capitalizeFirstChar',
                       })}
+                      sx={{
+                        bgcolor: theme.palette.background.default,
+                        color: theme.palette.text.primary,
+                      }}
                     >
                       <GroupAddIcon
                         sx={{

src/components/Group/ListOfThreadPostsWatched.tsx

@@ -5,7 +5,7 @@ import ListItemButton from '@mui/material/ListItemButton';
 import ListItemText from '@mui/material/ListItemText';
 import IconButton from '@mui/material/IconButton';
 import { executeEvent } from '../../utils/events';
-import { Box, Typography } from '@mui/material';
+import { Box, Typography, useTheme } from '@mui/material';
 import { Spacer } from '../../common/Spacer';
 import { CustomLoader } from '../../common/CustomLoader';
 import VisibilityIcon from '@mui/icons-material/Visibility';
@@ -14,6 +14,7 @@ import { useTranslation } from 'react-i18next';
 export const ListOfThreadPostsWatched = () => {
   const [posts, setPosts] = useState([]);
   const [loading, setLoading] = useState(true);
+  const theme = useTheme();
   const { t } = useTranslation([
     'auth',
     'core',
@@ -175,6 +176,10 @@ export const ListOfThreadPostsWatched = () => {
                       aria-label={t('core:comment_other', {
                         postProcess: 'capitalizeFirstChar',
                       })}
+                      sx={{
+                        bgcolor: theme.palette.background.default,
+                        color: theme.palette.text.primary,
+                      }}
                     >
                       <VisibilityIcon
                         sx={{

src/components/Group/ManageMembers.tsx

@@ -229,6 +229,10 @@ export const ManageMembers = ({
               color="inherit"
               edge="start"
               onClick={handleClose}
+              sx={{
+                bgcolor: theme.palette.background.default,
+                color: theme.palette.text.primary,
+              }}
             >
               <CloseIcon />
             </IconButton>

src/components/Group/Settings.tsx

@@ -181,6 +181,10 @@ export const Settings = ({ open, setOpen, rawWallet }) => {
               aria-label={t('core:action.close', {
                 postProcess: 'capitalizeFirstChar',
               })}
+              sx={{
+                bgcolor: theme.palette.background.default,
+                color: theme.palette.text.primary,
+              }}
             >
               <CloseIcon />
             </IconButton>

src/components/Minting/Minting.tsx

@@ -565,6 +565,10 @@ export const Minting = ({ setIsOpenMinting, myAddress, show }) => {
             aria-label={t('core:action.close', {
               postProcess: 'capitalizeFirstChar',
             })}
+            sx={{
+              bgcolor: theme.palette.background.default,
+              color: theme.palette.text.primary,
+            }}
           >
             <CloseIcon />
           </IconButton>

src/components/Theme/ThemeSelector.tsx

@@ -22,7 +22,8 @@ const ThemeSelector = () => {
       <IconButton
         onClick={toggleTheme}
         sx={{
-          color: theme.palette.text.secondary,
+          bgcolor: theme.palette.background.default,
+          color: theme.palette.text.primary,
         }}
       >
         {themeMode === 'dark' ? <LightModeIcon /> : <DarkModeIcon />}

src/components/Tutorials/Tutorials.tsx

@@ -72,10 +72,11 @@ export const Tutorials = () => {
           })}
           onClick={handleClose}
           sx={{
+            bgcolor: theme.palette.background.default,
+            color: theme.palette.text.primary,
             position: 'absolute',
             right: 8,
             top: 8,
-            color: theme.palette.text.primary,
           }}
         >
           <CloseIcon />
@@ -120,10 +121,11 @@ export const Tutorials = () => {
           })}
           onClick={handleClose}
           sx={{
+            bgcolor: theme.palette.background.default,
+            color: theme.palette.text.primary,
             position: 'absolute',
             right: 8,
             top: 8,
-            color: theme.palette.text.primary,
           }}
         >
           <CloseIcon />

src/components/Wallets.tsx

@@ -562,6 +562,8 @@ const WalletItem = ({ wallet, updateWalletItem, idx, setSelectedWallet }) => {
         <IconButton
           sx={{
             alignSelf: 'flex-start',
+            bgcolor: theme.palette.background.default,
+            color: theme.palette.text.primary,
           }}
           onClick={(e) => {
             e.stopPropagation();