Use Box

src/components/Group/Group.tsx

@@ -1763,7 +1763,7 @@ export const Group = ({
                 sx={{
                   background:
                     direct?.address === selectedDirect?.address &&
-                    theme.palette.background.default,
+                    theme.palette.background.paper,
                   borderRadius: '2px',
                   cursor: 'pointer',
                   display: 'flex',
@@ -1782,7 +1782,7 @@ export const Group = ({
                   <ListItemAvatar>
                     <Avatar
                       sx={{
-                        background: theme.palette.background.default,
+                        background: theme.palette.background.paper,
                         color: theme.palette.text.primary,
                       }}
                       alt={direct?.name || direct?.address}
@@ -1829,6 +1829,7 @@ export const Group = ({
                       fontSize: '16px',
                     }}
                   />
+
                   {direct?.sender !== myAddress &&
                     direct?.timestamp &&
                     ((!timestampEnterData[direct?.address] &&
@@ -1939,7 +1940,7 @@ export const Group = ({
         setInfo={setInfoSnack}
       />
 
-      <div // TODO use Box
+      <Box
         style={{
           alignItems: 'flex-start',
           display: 'flex',
@@ -2007,7 +2008,7 @@ export const Group = ({
             <>
               <Box
                 sx={{
-                  background: theme.palette.background.default,
+                  background: theme.palette.background.paper,
                   bottom: !(desktopViewMode === 'chat') ? 'unset' : '0px',
                   left: !(desktopViewMode === 'chat') ? '-100000px' : '0px',
                   opacity: !(desktopViewMode === 'chat') ? 0 : 1,
@@ -2461,7 +2462,7 @@ export const Group = ({
           }}
         />
         <WalletsAppWrapper />
-      </div>
+      </Box>
     </>
   );
 };

src/components/Minting/Minting.tsx

@@ -13,12 +13,20 @@ import {
   IconButton,
   Paper,
   Snackbar,
+  Tab,
+  Tabs,
   Toolbar,
   Typography,
   useTheme,
 } from '@mui/material';
 import Grid from '@mui/material/Grid';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+  SyntheticEvent,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
 import CloseIcon from '@mui/icons-material/Close';
 import { getBaseApiReact } from '../../App';
 import {
@@ -46,6 +54,7 @@ export const Minting = ({ setIsOpenMinting, myAddress, show }) => {
   const [openSnack, setOpenSnack] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [adminInfo, setAdminInfo] = useState({});
+  const [valueMintingTab, setValueMintingTab] = useState(0);
   const { isShow: isShowNext, onOk, show: showNext } = useModal();
   const theme = useTheme();
   const { t } = useTranslation([
@@ -110,6 +119,13 @@ export const Minting = ({ setIsOpenMinting, myAddress, show }) => {
     }
   };
 
+  function a11yProps(index: number) {
+    return {
+      id: `simple-tab-${index}`,
+      'aria-controls': `simple-tabpanel-${index}`,
+    };
+  }
+
   const getAccountInfo = async (address: string, others?: boolean) => {
     try {
       if (!others) {
@@ -514,6 +530,10 @@ export const Minting = ({ setIsOpenMinting, myAddress, show }) => {
     </Grid>
   );
 
+  const handleChange = (event: SyntheticEvent, newValue: number) => {
+    setValueMintingTab(newValue);
+  };
+
   return (
     <Dialog
       open={true}
@@ -551,6 +571,95 @@ export const Minting = ({ setIsOpenMinting, myAddress, show }) => {
         </Toolbar>
       </AppBar>
 
+      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+        <Tabs value={setValueMintingTab} onChange={handleChange}>
+          <Tab label="Minting Details" {...a11yProps(0)} />
+          <Tab label="Item Two" {...a11yProps(1)} />
+          <Tab label="Item Three" {...a11yProps(2)} />
+        </Tabs>
+      </Box>
+
+      {valueMintingTab === 0 && (
+        <>
+          <DialogContent
+            sx={{
+              position: 'relative',
+            }}
+          >
+            <Container maxWidth="md" sx={{ py: 4 }}>
+              <Paper elevation={3} sx={{ p: 3, mb: 4, borderRadius: '10px' }}>
+                <Typography variant="h6" gutterBottom>
+                  Blockchain Statistics
+                </Typography>
+
+                <Grid container spacing={2}>
+                  <StatCard
+                    label="Avg. Qortal Blocktime"
+                    value="72.84 Seconds"
+                  />
+                  <StatCard
+                    label="Avg. Blocks Per Day"
+                    value="1186.16 Blocks"
+                  />
+                  <StatCard
+                    label="Avg. Created QORT Per Day"
+                    value="3558.48 QORT"
+                  />
+                </Grid>
+              </Paper>
+
+              <Paper elevation={3} sx={{ p: 3, mb: 4, borderRadius: '10px' }}>
+                <Typography variant="h6" gutterBottom>
+                  Minting Account Details
+                </Typography>
+
+                <Grid container spacing={2}>
+                  <StatCard label="Current Status" value="(Minting)" />
+                  <StatCard label="Current Level" value="Level 4" />
+                  <StatCard
+                    label="Blocks To Next Level"
+                    value="139467 Blocks"
+                  />
+                </Grid>
+
+                <Box mt={2} textAlign="center">
+                  <Typography>
+                    With a 24/7 Minting you will reach level 5 in{' '}
+                    <strong>117.58 days</strong>!
+                  </Typography>
+                </Box>
+              </Paper>
+
+              <Paper elevation={3} sx={{ p: 3, borderRadius: '10px' }}>
+                <Typography variant="h6" gutterBottom>
+                  Minting Rewards Info
+                </Typography>
+
+                <Grid container spacing={2}>
+                  <StatCard label="Current Tier" value="Tier 2 (Level 3 + 4)" />
+                  <StatCard
+                    label="Total Minters in The Tier"
+                    value="77 Minters"
+                  />
+                  <StatCard label="Tier Share Per Block" value="13%" />
+                  <StatCard
+                    label="Est. Reward Per Block"
+                    value="0.00506494 QORT"
+                  />
+                  <StatCard
+                    label="Est. Reward Per Day"
+                    value="6.00782338 QORT"
+                  />
+                  {/* <StatCard label="AdminInfo" value={adminInfo} /> */}
+                </Grid>
+              </Paper>
+            </Container>
+          </DialogContent>
+        </>
+      )}
+
+      {valueMintingTab === 1 && (
+        <>
           <DialogContent
             sx={{
               position: 'relative',
@@ -815,61 +924,6 @@ export const Minting = ({ setIsOpenMinting, myAddress, show }) => {
               </Card>
             )}
 
-        <Container maxWidth="md" sx={{ py: 4 }}>
-          <Typography variant="h4" fontWeight="bold" gutterBottom>
-            General Minting Details
-          </Typography>
-
-          <Paper elevation={3} sx={{ p: 3, mb: 4, borderRadius: '10px' }}>
-            <Typography variant="h6" gutterBottom>
-              Blockchain Statistics
-            </Typography>
-
-            <Grid container spacing={2}>
-              <StatCard label="Avg. Qortal Blocktime" value="72.84 Seconds" />
-              <StatCard label="Avg. Blocks Per Day" value="1186.16 Blocks" />
-              <StatCard
-                label="Avg. Created QORT Per Day"
-                value="3558.48 QORT"
-              />
-            </Grid>
-          </Paper>
-
-          <Paper elevation={3} sx={{ p: 3, mb: 4, borderRadius: '10px' }}>
-            <Typography variant="h6" gutterBottom>
-              Minting Account Details
-            </Typography>
-
-            <Grid container spacing={2}>
-              <StatCard label="Current Status" value="(Minting)" />
-              <StatCard label="Current Level" value="Level 4" />
-              <StatCard label="Blocks To Next Level" value="139467 Blocks" />
-            </Grid>
-
-            <Box mt={2} textAlign="center">
-              <Typography>
-                With a 24/7 Minting you will reach level 5 in{' '}
-                <strong>117.58 days</strong>!
-              </Typography>
-            </Box>
-          </Paper>
-
-          <Paper elevation={3} sx={{ p: 3, borderRadius: '10px' }}>
-            <Typography variant="h6" gutterBottom>
-              Minting Rewards Info
-            </Typography>
-
-            <Grid container spacing={2}>
-              <StatCard label="Current Tier" value="Tier 2 (Level 3 + 4)" />
-              <StatCard label="Total Minters in The Tier" value="77 Minters" />
-              <StatCard label="Tier Share Per Block" value="13%" />
-              <StatCard label="Est. Reward Per Block" value="0.00506494 QORT" />
-              <StatCard label="Est. Reward Per Day" value="6.00782338 QORT" />
-              {/* <StatCard label="AdminInfo" value={adminInfo} /> */}
-            </Grid>
-          </Paper>
-        </Container>
-
             {showWaitDialog && (
               <Dialog
                 open={showWaitDialog}
@@ -919,12 +973,16 @@ export const Minting = ({ setIsOpenMinting, myAddress, show }) => {
                     onClick={onOk}
                     autoFocus
                   >
-                {t('core:page.next', { postProcess: 'capitalizeFirstChar' })}
+                    {t('core:page.next', {
+                      postProcess: 'capitalizeFirstChar',
+                    })}
                   </Button>
                 </DialogActions>
               </Dialog>
             )}
           </DialogContent>
+        </>
+      )}
 
       <Snackbar
         anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}

src/components/Wallets.tsx

@@ -207,7 +207,7 @@ export const Wallets = ({ setExtState, setRawWallet, rawWallet }) => {
   if (isLoading) return null;
 
   return (
-    <div>
+    <Box>
       {wallets?.length === 0 || !wallets ? (
         <>
           <Typography>
@@ -469,7 +469,7 @@ export const Wallets = ({ setExtState, setRawWallet, rawWallet }) => {
           </Typography>
         </DialogActions>
       </Dialog>
-    </div>
+    </Box>
   );
 };