rightpanel theme changed

src/components/molecules/ActionDescriptionBox.tsx

@@ -4,19 +4,23 @@ import { Typography, FormControlLabel, Checkbox, Box } from '@mui/material';
 import { useActionContext } from '../../context/browserActions';
 import MaxunLogo from "../../assets/maxunlogo.png";
 
-const CustomBoxContainer = styled.div`
+interface CustomBoxContainerProps {
+  isDarkMode: boolean;
+}
+
+const CustomBoxContainer = styled.div<CustomBoxContainerProps>`
   position: relative;
   min-width: 250px;
   width: auto;
   min-height: 100px;
   height: auto;
-  // border: 2px solid #ff00c3;
   border-radius: 5px;
-  background-color: white;
+  background-color: ${({ isDarkMode }) => (isDarkMode ? '#313438' : 'white')};
+  color: ${({ isDarkMode }) => (isDarkMode ? 'white' : 'black')};
   margin: 80px 13px 25px 13px;
 `;
 
-const Triangle = styled.div`
+const Triangle = styled.div<CustomBoxContainerProps>`
   position: absolute;
   top: -15px;
   left: 50%;
@@ -25,7 +29,7 @@ const Triangle = styled.div`
   height: 0;
   border-left: 20px solid transparent;
   border-right: 20px solid transparent;
-  border-bottom: 20px solid white;
+  border-bottom: 20px solid ${({ isDarkMode }) => (isDarkMode ? '#313438' : 'white')};
 `;
 
 const Logo = styled.img`
@@ -43,7 +47,7 @@ const Content = styled.div`
   text-align: left;
 `;
 
-const ActionDescriptionBox = () => {
+const ActionDescriptionBox = ({ isDarkMode }: { isDarkMode: boolean }) => {
   const { getText, getScreenshot, getList, captureStage } = useActionContext() as {
     getText: boolean;
     getScreenshot: boolean;
@@ -52,14 +56,14 @@ const ActionDescriptionBox = () => {
   };
 
   const messages = [
-    { stage: 'initial' as const, text: 'Select the list you want to extract along with the texts inside it' },
-    { stage: 'pagination' as const, text: 'Select how the robot can capture the rest of the list' },
-    { stage: 'limit' as const, text: 'Choose the number of items to extract' },
-    { stage: 'complete' as const, text: 'Capture is complete' },
+    { stage: 'initial', text: 'Select the list you want to extract along with the texts inside it' },
+    { stage: 'pagination', text: 'Select how the robot can capture the rest of the list' },
+    { stage: 'limit', text: 'Choose the number of items to extract' },
+    { stage: 'complete', text: 'Capture is complete' },
   ];
 
-  const stages = messages.map(({ stage }) => stage); // Create a list of stages
-  const currentStageIndex = stages.indexOf(captureStage); // Get the index of the current stage
+  const stages = messages.map(({ stage }) => stage);
+  const currentStageIndex = stages.indexOf(captureStage);
 
   const renderActionDescription = () => {
     if (getText) {
@@ -89,11 +93,21 @@ const ActionDescriptionBox = () => {
                 key={stage}
                 control={
                   <Checkbox
-                    checked={index < currentStageIndex} // Check the box if we are past this stage
+                    checked={index < currentStageIndex}
                     disabled
+                    sx={{
+                      color: isDarkMode ? 'white' : 'default',
+                      '&.Mui-checked': {
+                        color: isDarkMode ? '#90caf9' : '#1976d2',
+                      },
+                    }}
                   />
                 }
-                label={<Typography variant="body2" gutterBottom>{text}</Typography>}
+                label={
+                  <Typography variant="body2" gutterBottom color={isDarkMode ? 'white' : 'textPrimary'}>
+                    {text}
+                  </Typography>
+                }
               />
             ))}
           </Box>
@@ -110,9 +124,9 @@ const ActionDescriptionBox = () => {
   };
 
   return (
-    <CustomBoxContainer>
+    <CustomBoxContainer isDarkMode={isDarkMode}>
       <Logo src={MaxunLogo} alt="Maxun Logo" />
-      <Triangle />
+      <Triangle isDarkMode={isDarkMode} />
       <Content>
         {renderActionDescription()}
       </Content>