Apply theme

src/components/Tutorials/Tutorials.tsx

@@ -1,72 +1,103 @@
-import React, { useContext, useState } from 'react'
+import { useContext, useState } from 'react';
-import { GlobalContext, MyContext } from '../../App';
+import { GlobalContext } from '../../App';
-import { Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, Tab, Tabs, Typography } from '@mui/material';
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  Tab,
+  Tabs,
+  useTheme,
+} from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
 import { VideoPlayer } from '../Embeds/VideoPlayer';
 
 export const Tutorials = () => {
-    const { openTutorialModal, setOpenTutorialModal  } = useContext(GlobalContext);
+  const { openTutorialModal, setOpenTutorialModal } = useContext(GlobalContext);
-    const [multiNumber, setMultiNumber] = useState(0)
+  const [multiNumber, setMultiNumber] = useState(0);
-    const handleClose = ()=> {
+  const theme = useTheme();
-        setOpenTutorialModal(null)
+
-        setMultiNumber(0)
+  const handleClose = () => {
-    }
+    setOpenTutorialModal(null);
-    if(!openTutorialModal) return null
+    setMultiNumber(0);
-    if(openTutorialModal?.multi){
+  };
-        const selectedTutorial = openTutorialModal?.multi[multiNumber]
+
-        return (
+  if (!openTutorialModal) return null;
-            <Dialog
+
+  if (openTutorialModal?.multi) {
+    const selectedTutorial = openTutorialModal?.multi[multiNumber];
+    return (
+      <Dialog
         onClose={handleClose}
         aria-labelledby="customized-dialog-title"
         open={!!openTutorialModal}
         fullWidth={true}
         maxWidth="xl"
       >
-         <Tabs  sx={{
+        <Tabs
-        "& .MuiTabs-indicator": {
+          sx={{
-          backgroundColor: "white",
+            '& .MuiTabs-indicator': {
-        },
+              backgroundColor: theme.palette.background.default,
-      }} value={multiNumber} onChange={(e, value)=> setMultiNumber(value)} aria-label="basic tabs example">
+            },
-            {openTutorialModal?.multi?.map((item, index)=> {
+          }}
-                return (
+          value={multiNumber}
-                    <Tab   sx={{
+          onChange={(e, value) => setMultiNumber(value)}
-                        "&.Mui-selected": {
+          aria-label="basic tabs example"
-                          color: "white",
+        >
-                        },
+          {openTutorialModal?.multi?.map((item, index) => {
-                      }} label={item?.title} value={index} />
+            return (
-                   
+              <Tab
-                )
+                sx={{
-            })}
+                  '&.Mui-selected': {
-  </Tabs>
+                    color: theme.palette.text.primary,
-        <DialogTitle sx={{ m: 0, p: 2 }} >
+                  },
+                }}
+                label={item?.title}
+                value={index}
+              />
+            );
+          })}
+        </Tabs>
+
+        <DialogTitle sx={{ m: 0, p: 2 }}>
           {selectedTutorial?.title} {` Tutorial`}
         </DialogTitle>
+
         <IconButton
           aria-label="close"
           onClick={handleClose}
-          sx={(theme) => ({
+          sx={{
             position: 'absolute',
             right: 8,
             top: 8,
-            color: theme.palette.grey[500],
+            color: theme.palette.text.primary,
-          })}
+          }}
         >
           <CloseIcon />
         </IconButton>
-        <DialogContent dividers sx={{
-            height: '85vh'
-        }}>
 
-          <VideoPlayer node="https://ext-node.qortal.link" {...selectedTutorial?.resource || {}} />
+        <DialogContent
+          dividers
+          sx={{
+            height: '85vh',
+          }}
+        >
+          <VideoPlayer
+            node="https://ext-node.qortal.link"
+            {...(selectedTutorial?.resource || {})}
+          />
         </DialogContent>
         <DialogActions>
           <Button variant="contained" onClick={handleClose}>
-           Close
+            Close
           </Button>
         </DialogActions>
       </Dialog>
-        )
+    );
-    }
+  }
+
   return (
     <>
       <Dialog
@@ -76,33 +107,41 @@ export const Tutorials = () => {
         fullWidth={true}
         maxWidth="xl"
       >
-        <DialogTitle sx={{ m: 0, p: 2 }} >
+        <DialogTitle sx={{ m: 0, p: 2 }}>
           {openTutorialModal?.title} {` Tutorial`}
         </DialogTitle>
+
         <IconButton
           aria-label="close"
           onClick={handleClose}
-          sx={(theme) => ({
+          sx={{
             position: 'absolute',
             right: 8,
             top: 8,
-            color: theme.palette.grey[500],
+            color: theme.palette.text.primary,
-          })}
+          }}
         >
           <CloseIcon />
         </IconButton>
-        <DialogContent dividers sx={{
-            height: '85vh'
-        }}>
 
-          <VideoPlayer node="https://ext-node.qortal.link" {...openTutorialModal?.resource || {}} />
+        <DialogContent
+          dividers
+          sx={{
+            height: '85vh',
+          }}
+        >
+          <VideoPlayer
+            node="https://ext-node.qortal.link"
+            {...(openTutorialModal?.resource || {})}
+          />
         </DialogContent>
+
         <DialogActions>
           <Button variant="contained" onClick={handleClose}>
-           Close
+            Close
           </Button>
         </DialogActions>
       </Dialog>
     </>
-  )
+  );
-}
+};