Add theme

src/components/BuyQortInformation.tsx

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

src/components/Group/QMailMessages.tsx

@@ -5,7 +5,7 @@ import ListItemButton from '@mui/material/ListItemButton';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
 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 MailIcon from '@mui/icons-material/Mail';
 import MailOutlineIcon from '@mui/icons-material/MailOutline';
@@ -51,6 +51,7 @@ export const QMailMessages = ({ userName, userAddress }) => {
     qMailLastEnteredTimestampAtom
   );
   const [loading, setLoading] = useState(true);
+  const theme = useTheme();
 
   const getMails = useCallback(async () => {
     try {
@@ -175,14 +176,14 @@ export const QMailMessages = ({ userName, userAddress }) => {
         <Box
           className="scrollable-container"
           sx={{
-            width: '322px',
-            height: isMobile ? '165px' : '250px',
+            bgcolor: theme.palette.background.paper,
+            borderRadius: '19px',
             display: 'flex',
             flexDirection: 'column',
-            bgcolor: 'background.paper',
-            padding: '20px',
-            borderRadius: '19px',
+            height: isMobile ? '165px' : '250px',
             overflow: 'auto',
+            padding: '20px',
+            width: '322px',
           }}
         >
           {loading && mails.length === 0 && (
@@ -210,7 +211,7 @@ export const QMailMessages = ({ userName, userAddress }) => {
                 sx={{
                   fontSize: '11px',
                   fontWeight: 400,
-                  color: 'rgba(255, 255, 255, 0.2)',
+                  color: theme.palette.primary,
                 }}
               >
                 Nothing to display

src/components/TaskManager/TaskManager.tsx

@@ -5,6 +5,7 @@ import {
   ListItemText,
   Collapse,
   IconButton,
+  useTheme,
 } from '@mui/material';
 import React, { useContext, useEffect, useRef } from 'react';
 import PendingIcon from '@mui/icons-material/Pending';
@@ -18,6 +19,7 @@ export const TaskManager = ({ getUserInfo }) => {
   const { txList, setTxList, memberGroups } = useContext(MyContext);
   const [open, setOpen] = React.useState(false);
   const intervals = useRef({});
+  const theme = useTheme();
 
   const handleClick = () => {
     setOpen((prev) => !prev);
@@ -146,12 +148,9 @@ export const TaskManager = ({ getUserInfo }) => {
         <IconButton
           onClick={handleClick}
           sx={{
-            // position: "fixed",
-            // bottom: 16,
-            // right: 16,
-            bgcolor: 'primary.main',
-            color: 'white',
-            ':hover': { bgcolor: 'primary.dark' },
+            bgcolor: theme.palette.primary.main,
+            color: theme.palette.text.primary,
+            ':hover': { bgcolor: theme.palette.primary },
           }}
         >
           {txList.some((item) => !item.done) ? (
@@ -164,16 +163,16 @@ export const TaskManager = ({ getUserInfo }) => {
       {open && (
         <List
           sx={{
-            position: 'fixed',
+            bgcolor: theme.palette.background.paper,
             bottom: 16,
+            boxShadow: 4,
+            maxHeight: '400px',
+            overflow: 'auto',
+            padding: '0px',
+            position: 'fixed',
             right: 16,
             width: '300px',
-            maxHeight: '400px',
-            bgcolor: 'background.paper',
-            boxShadow: 4,
-            overflow: 'auto',
             zIndex: 10,
-            padding: '0px',
           }}
           component="nav"
         >
@@ -182,13 +181,13 @@ export const TaskManager = ({ getUserInfo }) => {
               {txList.some((item) => !item.done) ? (
                 <PendingIcon
                   sx={{
-                    color: 'white',
+                    color: theme.palette.primary,
                   }}
                 />
               ) : (
                 <TaskAltIcon
                   sx={{
-                    color: 'white',
+                    color: theme.palette.primary,
                   }}
                 />
               )}