Move transition in a separate file

src/common/Transitions.tsx

@@ -0,0 +1,12 @@
+import { Slide } from '@mui/material';
+import { TransitionProps } from '@mui/material/transitions';
+import { forwardRef, ReactElement, Ref } from 'react';
+
+export const TransitionUp = forwardRef(function Transition(
+  props: TransitionProps & {
+    children: ReactElement;
+  },
+  ref: Ref<unknown>
+) {
+  return <Slide direction="up" ref={ref} {...props} />;
+});

src/components/Apps/AppsDevModeNavBar.tsx

@@ -111,7 +111,7 @@ export const AppsDevModeNavBar = () => {
           variant="scrollable" // Make tabs scrollable
           scrollButtons={true}
           sx={{
-            '& .MuiTabs-indicator': {
+            '&.MuiTabs-indicator': {
               backgroundColor: theme.palette.text.primary,
             },
             maxHeight: `275px`, // Ensure the tabs container fits within the available space

src/components/Apps/AppsNavBarDesktop.tsx

@@ -193,7 +193,7 @@ export const AppsNavBarDesktop = ({ disableBack }) => {
           variant="scrollable" // Make tabs scrollable
           scrollButtons={true}
           sx={{
-            '& .MuiTabs-indicator': {
+            '&.MuiTabs-indicator': {
               backgroundColor: theme.palette.background.default,
             },
             maxHeight: `275px`, // Ensure the tabs container fits within the available space

src/components/Apps/AppsPrivate.tsx

@@ -357,7 +357,7 @@ export const AppsPrivate = ({ myName, myAddress }) => {
               variant={'fullWidth'}
               scrollButtons="auto"
               sx={{
-                '& .MuiTabs-indicator': {
+                '&.MuiTabs-indicator': {
                   backgroundColor: theme.palette.background.default,
                 },
               }}

src/components/Group/AddGroup.tsx

@@ -1,8 +1,5 @@
 import {
-  forwardRef,
   Fragment,
-  ReactElement,
-  Ref,
   SyntheticEvent,
   useContext,
   useEffect,
@@ -17,8 +14,6 @@ import Typography from '@mui/material/Typography';
 import CloseIcon from '@mui/icons-material/Close';
 import ExpandLess from '@mui/icons-material/ExpandLess';
 import ExpandMore from '@mui/icons-material/ExpandMore';
-import Slide from '@mui/material/Slide';
-import { TransitionProps } from '@mui/material/transitions';
 import {
   Box,
   Collapse,
@@ -40,6 +35,7 @@ import { subscribeToEvent, unsubscribeFromEvent } from '../../utils/events';
 import { useTranslation } from 'react-i18next';
 import { useSetAtom } from 'jotai';
 import { txListAtom } from '../../atoms/global';
+import { TransitionUp } from '../../common/Transitions.tsx';
 
 export const Label = styled('label')`
   display: block;
@@ -49,15 +45,6 @@ export const Label = styled('label')`
   margin-bottom: 4px;
 `;
 
-const Transition = forwardRef(function Transition(
-  props: TransitionProps & {
-    children: ReactElement;
-  },
-  ref: Ref<unknown>
-) {
-  return <Slide direction="up" ref={ref} {...props} />;
-});
-
 export const AddGroup = ({ address, open, setOpen }) => {
   const { show } = useContext(QORTAL_APP_CONTEXT);
   const setTxList = useSetAtom(txListAtom);
@@ -228,13 +215,12 @@ export const AddGroup = ({ address, open, setOpen }) => {
         open={open}
         onClose={handleClose}
         slots={{
-          transition: Transition,
+          transition: TransitionUp,
         }}
       >
         <AppBar
           sx={{
             position: 'relative',
-            bgcolor: theme.palette.background.default,
           }}
         >
           <Toolbar>
@@ -281,7 +267,7 @@ export const AddGroup = ({ address, open, setOpen }) => {
               scrollButtons="auto"
               allowScrollButtonsMobile
               sx={{
-                '& .MuiTabs-indicator': {
+                '&.MuiTabs-indicator': {
                   backgroundColor: theme.palette.background.default,
                 },
               }}
@@ -421,10 +407,10 @@ export const AddGroup = ({ address, open, setOpen }) => {
 
                 <Box
                   sx={{
-                    display: 'flex',
-                    gap: '15px',
                     alignItems: 'center',
                     cursor: 'pointer',
+                    display: 'flex',
+                    gap: '15px',
                   }}
                   onClick={() => setOpenAdvance((prev) => !prev)}
                 >

src/components/Group/ManageMembers.tsx

@@ -255,7 +255,7 @@ export const ManageMembers = ({
               scrollButtons="auto" // Show scroll buttons automatically
               allowScrollButtonsMobile // Show scroll buttons on mobile as well
               sx={{
-                '& .MuiTabs-indicator': {
+                '&.MuiTabs-indicator': {
                   backgroundColor: theme.palette.background.default,
                 },
                 maxWidth: '100%', // Ensure the tabs container fits within the available space

src/components/Group/Settings.tsx

@@ -40,6 +40,7 @@ import { walletVersion } from '../../background/background.ts';
 import Base58 from '../../encryption/Base58.ts';
 import { QORTAL_APP_CONTEXT } from '../../App';
 import { useTranslation } from 'react-i18next';
+import { TransitionUp } from '../../common/Transitions.tsx';
 
 const LocalNodeSwitch = styled(Switch)(({ theme }) => ({
   padding: 8,
@@ -74,15 +75,6 @@ const LocalNodeSwitch = styled(Switch)(({ theme }) => ({
   },
 }));
 
-const Transition = forwardRef(function Transition(
-  props: TransitionProps & {
-    children: ReactElement;
-  },
-  ref: Ref<unknown>
-) {
-  return <Slide direction="up" ref={ref} {...props} />;
-});
-
 export const Settings = ({ open, setOpen, rawWallet }) => {
   const [checked, setChecked] = useState(false);
   const [isEnabledDevMode, setIsEnabledDevMode] = useAtom(enabledDevModeAtom);
@@ -163,7 +155,7 @@ export const Settings = ({ open, setOpen, rawWallet }) => {
         open={open}
         onClose={handleClose}
         slots={{
-          transition: Transition,
+          transition: TransitionUp,
         }}
       >
         <AppBar sx={{ position: 'relative' }}>

src/components/Minting/Minting.tsx

@@ -41,6 +41,7 @@ import { useModal } from '../../hooks/useModal.tsx';
 import { useAtom, useSetAtom } from 'jotai';
 import { memberGroupsAtom, txListAtom } from '../../atoms/global';
 import { useTranslation } from 'react-i18next';
+import { TransitionUp } from '../../common/Transitions.tsx';
 
 export const Minting = ({ setIsOpenMinting, myAddress, show }) => {
   const setTxList = useSetAtom(txListAtom);
@@ -540,14 +541,8 @@ export const Minting = ({ setIsOpenMinting, myAddress, show }) => {
       maxWidth="lg"
       fullWidth
       fullScreen
-      sx={{
+      slots={{
-        '& .MuiDialog-paper': {
+        transition: TransitionUp,
-          height: '100vh',
-          margin: 0,
-          maxWidth: '100%',
-          overflow: 'hidden', // Prevent scrollbars
-          width: '100%',
-        },
       }}
     >
       <AppBar sx={{ position: 'relative' }}>
@@ -575,11 +570,51 @@ export const Minting = ({ setIsOpenMinting, myAddress, show }) => {
         </Toolbar>
       </AppBar>
 
-      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+      <Box
-        <Tabs value={setValueMintingTab} onChange={handleChange}>
+        sx={{
-          <Tab label="Minting Details" {...a11yProps(0)} />
+          bgcolor: theme.palette.background.default,
-          <Tab label="Item Two" {...a11yProps(1)} />
+          color: theme.palette.text.primary,
-          <Tab label="Item Three" {...a11yProps(2)} />
+          display: 'flex',
+          flexDirection: 'column',
+          flexGrow: 1,
+          overflowY: 'auto',
+        }}
+      >
+        <Box
+          sx={{ borderBottom: 1, borderColor: theme.palette.text.secondary }}
+        >
+          <Tabs
+            value={setValueMintingTab}
+            onChange={handleChange}
+            variant={'fullWidth'}
+            scrollButtons="auto"
+            allowScrollButtonsMobile
+            sx={{
+              '&.MuiTabs-indicator': {
+                backgroundColor: theme.palette.background.default,
+              },
+            }}
+          >
+            <Tab
+              label="Minting Details"
+              sx={{
+                '&.Mui-selected': {
+                  color: theme.palette.text.primary,
+                },
+                fontSize: '1rem',
+              }}
+              {...a11yProps(0)}
+            />
+            <Tab
+              label="Minting Actions"
+              sx={{
+                '&.Mui-selected': {
+                  color: theme.palette.text.primary,
+                },
+                fontSize: '1rem',
+              }}
+              {...a11yProps(1)}
+            />
           </Tabs>
         </Box>
 
@@ -640,7 +675,10 @@ export const Minting = ({ setIsOpenMinting, myAddress, show }) => {
                   </Typography>
 
                   <Grid container spacing={2}>
-                  <StatCard label="Current Tier" value="Tier 2 (Level 3 + 4)" />
+                    <StatCard
+                      label="Current Tier"
+                      value="Tier 2 (Level 3 + 4)"
+                    />
                     <StatCard
                       label="Total Minters in The Tier"
                       value="77 Minters"
@@ -858,9 +896,12 @@ export const Minting = ({ setIsOpenMinting, myAddress, show }) => {
 
                 {mintingAccounts?.length > 1 && (
                   <Typography>
-                  {t('group:message.generic.minting_keys_per_node_different', {
+                    {t(
+                      'group:message.generic.minting_keys_per_node_different',
+                      {
                         postProcess: 'capitalizeFirstChar',
-                  })}
+                      }
+                    )}
                   </Typography>
                 )}
               </Card>
@@ -987,6 +1028,7 @@ export const Minting = ({ setIsOpenMinting, myAddress, show }) => {
             </DialogContent>
           </>
         )}
+      </Box>
 
       <Snackbar
         anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}

src/components/TaskManager/TaskManager.tsx

@@ -16,15 +16,21 @@ import { getBaseApiReact } from '../../App';
 import { executeEvent } from '../../utils/events';
 import { useAtom } from 'jotai';
 import { memberGroupsAtom, txListAtom } from '../../atoms/global';
+import { useTranslation } from 'react-i18next';
 
 export const TaskManager = ({ getUserInfo }) => {
   const [memberGroups] = useAtom(memberGroupsAtom);
-
   const [txList, setTxList] = useAtom(txListAtom);
-
   const [open, setOpen] = React.useState(false);
   const intervals = useRef({});
   const theme = useTheme();
+  const { t } = useTranslation([
+    'auth',
+    'core',
+    'group',
+    'question',
+    'tutorial',
+  ]);
 
   const handleClick = () => {
     setOpen((prev) => !prev);
@@ -199,7 +205,11 @@ export const TaskManager = ({ getUserInfo }) => {
               )}
             </ListItemIcon>
 
-            <ListItemText primary="Ongoing Transactions" />
+            <ListItemText
+              primary={t('core:message.generic.ongoing_transactions', {
+                postProcess: 'capitalizeFirstChar',
+              })}
+            />
             {open ? <ExpandLess /> : <ExpandMore />}
           </ListItemButton>
 

src/components/Tutorials/Tutorials.tsx

@@ -41,7 +41,7 @@ export const Tutorials = () => {
       >
         <Tabs
           sx={{
-            '& .MuiTabs-indicator': {
+            '&.MuiTabs-indicator': {
               backgroundColor: theme.palette.background.default,
             },
           }}