Apply theme

src/components/Tutorials/Tutorials.tsx

@@ -1,19 +1,33 @@
-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 [multiNumber, setMultiNumber] = useState(0)
+  const [multiNumber, setMultiNumber] = useState(0);
+  const theme = useTheme();
+
   const handleClose = () => {
-        setOpenTutorialModal(null)
+    setOpenTutorialModal(null);
-        setMultiNumber(0)
+    setMultiNumber(0);
-    }
+  };
-    if(!openTutorialModal) return null
+
+  if (!openTutorialModal) return null;
+
   if (openTutorialModal?.multi) {
-        const selectedTutorial = openTutorialModal?.multi[multiNumber]
+    const selectedTutorial = openTutorialModal?.multi[multiNumber];
     return (
       <Dialog
         onClose={handleClose}
@@ -22,42 +36,58 @@ export const Tutorials = () => {
         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">
+          }}
+          value={multiNumber}
+          onChange={(e, value) => setMultiNumber(value)}
+          aria-label="basic tabs example"
+        >
           {openTutorialModal?.multi?.map((item, index) => {
             return (
-                    <Tab   sx={{
+              <Tab
-                        "&.Mui-selected": {
+                sx={{
-                          color: "white",
+                  '&.Mui-selected': {
+                    color: theme.palette.text.primary,
                   },
-                      }} label={item?.title} value={index} />
+                }}
-                   
+                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}>
@@ -65,8 +95,9 @@ export const Tutorials = () => {
           </Button>
         </DialogActions>
       </Dialog>
-        )
+    );
   }
+
   return (
     <>
       <Dialog
@@ -79,24 +110,32 @@ export const Tutorials = () => {
         <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
@@ -104,5 +143,5 @@ export const Tutorials = () => {
         </DialogActions>
       </Dialog>
     </>
-  )
+  );
-}
+};