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: 'initial', 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: 'pagination', 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: 'limit', text: 'Choose the number of items to extract' },
-    { stage: 'complete' as const, text: 'Capture is complete' },
+    { stage: 'complete', text: 'Capture is complete' },
   ];
 
-  const stages = messages.map(({ stage }) => stage); // Create a list of stages
+  const stages = messages.map(({ stage }) => stage);
-  const currentStageIndex = stages.indexOf(captureStage); // Get the index of the current 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>

src/components/molecules/ActionSettings.tsx

@@ -1,16 +1,15 @@
 import React, { useRef } from 'react';
 import styled from "styled-components";
 import { Button } from "@mui/material";
-//import { ActionDescription } from "../organisms/RightSidePanel";
 import * as Settings from "./action-settings";
 import { useSocketStore } from "../../context/socket";
 
 interface ActionSettingsProps {
   action: string;
+  darkMode?: boolean;
 }
 
-export const ActionSettings = ({ action }: ActionSettingsProps) => {
+export const ActionSettings = ({ action, darkMode = false }: ActionSettingsProps) => {
-
   const settingsRef = useRef<{ getSettings: () => object }>(null);
   const { socket } = useSocketStore();
 
@@ -20,30 +19,27 @@ export const ActionSettings = ({ action }: ActionSettingsProps) => {
         return <Settings.ScreenshotSettings ref={settingsRef} />;
       case 'scroll':
         return <Settings.ScrollSettings ref={settingsRef} />;
-        case 'scrape':
+      case 'scrape':
-          return <Settings.ScrapeSettings ref={settingsRef} />;
+        return <Settings.ScrapeSettings ref={settingsRef} />;
       case 'scrapeSchema':
         return <Settings.ScrapeSchemaSettings ref={settingsRef} />;
       default:
         return null;
     }
-  }
+  };
 
   const handleSubmit = (event: React.SyntheticEvent) => {
     event.preventDefault();
-    //get the data from settings
     const settings = settingsRef.current?.getSettings();
-    //Send notification to the server and generate the pair
     socket?.emit(`action`, {
       action,
       settings
     });
-  }
+  };
 
   return (
     <div>
-      {/* <ActionDescription>Action settings:</ActionDescription> */}
+      <ActionSettingsWrapper action={action} darkMode={darkMode}>
-      <ActionSettingsWrapper action={action}>
         <form onSubmit={handleSubmit}>
           <DisplaySettings />
           <Button
@@ -64,10 +60,13 @@ export const ActionSettings = ({ action }: ActionSettingsProps) => {
   );
 };
 
-const ActionSettingsWrapper = styled.div<{ action: string }>`
+// Ensure that the Wrapper accepts the darkMode prop for styling adjustments.
+const ActionSettingsWrapper = styled.div<{ action: string; darkMode: boolean }>`
   display: flex;
   flex-direction: column;
-  align-items: ${({ action }) => action === 'script' ? 'stretch' : 'center'};;
+  align-items: ${({ action }) => (action === 'script' ? 'stretch' : 'center')};
   justify-content: center;
   margin-top: 20px;
+  background-color: ${({ darkMode }) => (darkMode ? '#1E1E1E' : 'white')};
+  color: ${({ darkMode }) => (darkMode ? 'white' : 'black')};
 `;

src/components/organisms/RightSidePanel.tsx

@@ -395,8 +395,8 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
       {/* <SimpleBox height={60} width='100%' background='lightGray' radius='0%'>
         <Typography sx={{ padding: '10px' }}>Last action: {` ${lastAction}`}</Typography>
       </SimpleBox> */}
-      <ActionDescriptionBox />
+      <ActionDescriptionBox  isDarkMode={isDarkMode} />
-      <Box display="flex" flexDirection="column" gap={2} style={{ margin: '13px' }}>
+      <Box display="flex" flexDirection="column" gap={2} style={{ margin: '13px',background: isDarkMode?'#1E2124': 'inherit',color: isDarkMode ? 'white' : 'inherit' }}>
         {!getText && !getScreenshot && !getList && showCaptureList && <Button variant="contained" onClick={startGetList}>Capture List</Button>}
         {getList && (
           <>
@@ -426,7 +426,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
         )}
         {showLimitOptions && (
           <FormControl>
-            <FormLabel>
+            <FormLabel style={{ marginBottom: '10px', background: isDarkMode ? "#1E2124" : 'white', color: isDarkMode ? "white" : 'black' }}>
               <h4>What is the maximum number of rows you want to extract?</h4>
             </FormLabel>
             <RadioGroup
@@ -452,9 +452,11 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
                     marginLeft: '10px',
                     '& input': {
                     padding: '10px',
-                    background: 'white',
+                    
                     },
-                    width: '150px', // Ensure the text field does not go outside the panel
+                    width: '150px',
+                    background: isDarkMode ? "#1E2124" : 'white',
+                    color: isDarkMode ? "white" : 'black', // Ensure the text field does not go outside the panel
                   }}
                   />
                 )}
@@ -503,6 +505,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
                         </InputAdornment>
                       )
                     }}
+                    sx={{ background: isDarkMode ? "#1E2124" : 'white', color: isDarkMode ? "white" : 'black' }}
                   />
                   <TextField
                     label="Data"
@@ -517,6 +520,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
                         </InputAdornment>
                       )
                     }}
+                    sx={{ background: isDarkMode ? "#1E2124" : 'white', color: isDarkMode ? "white" : 'black' }}
                   />
                   {!confirmedTextSteps[step.id] && (
                     <Box display="flex" justifyContent="space-between" gap={2}>
@@ -553,6 +557,8 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
                           </InputAdornment>
                         )
                       }}
+
+                      style={{ background: isDarkMode ? "#1E2124" : 'white' }}
                     />
                     <TextField
                       label="Field Data"
@@ -567,6 +573,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
                           </InputAdornment>
                         )
                       }}
+                      style={{ background: isDarkMode ? "#1E2124" : 'white' }}
                     />
                     {!confirmedListTextFields[step.id]?.[key] && (
                       <Box display="flex" justifyContent="space-between" gap={2}>