From 5354282aefa50efad1bdf0026034c908e3fe7177 Mon Sep 17 00:00:00 2001 From: amit Date: Sun, 10 Nov 2024 14:30:33 +0530 Subject: [PATCH] rightpanel theme changed --- .../molecules/ActionDescriptionBox.tsx | 46 ++++++++++++------- src/components/molecules/ActionSettings.tsx | 25 +++++----- src/components/organisms/RightSidePanel.tsx | 17 +++++-- 3 files changed, 54 insertions(+), 34 deletions(-) diff --git a/src/components/molecules/ActionDescriptionBox.tsx b/src/components/molecules/ActionDescriptionBox.tsx index cad962c7..e064c01b 100644 --- a/src/components/molecules/ActionDescriptionBox.tsx +++ b/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` 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` 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={ } - label={{text}} + label={ + + {text} + + } /> ))} @@ -110,9 +124,9 @@ const ActionDescriptionBox = () => { }; return ( - + - + {renderActionDescription()} diff --git a/src/components/molecules/ActionSettings.tsx b/src/components/molecules/ActionSettings.tsx index 79e120b8..a0a3aa59 100644 --- a/src/components/molecules/ActionSettings.tsx +++ b/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 ; case 'scroll': return ; - case 'scrape': - return ; + case 'scrape': + return ; case 'scrapeSchema': return ; 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 (
- {/* Action settings: */} - +
} {getList && ( <> @@ -426,7 +426,7 @@ export const RightSidePanel: React.FC = ({ onFinishCapture )} {showLimitOptions && ( - +

What is the maximum number of rows you want to extract?

 = ({ 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 = ({ onFinishCapture ) }} + sx={{ background: isDarkMode ? "#1E2124" : 'white', color: isDarkMode ? "white" : 'black' }} /> = ({ onFinishCapture ) }} + sx={{ background: isDarkMode ? "#1E2124" : 'white', color: isDarkMode ? "white" : 'black' }} /> {!confirmedTextSteps[step.id] && ( @@ -553,6 +557,8 @@ export const RightSidePanel: React.FC = ({ onFinishCapture ) }} + + style={{ background: isDarkMode ? "#1E2124" : 'white' }} /> = ({ onFinishCapture ) }} + style={{ background: isDarkMode ? "#1E2124" : 'white' }} /> {!confirmedListTextFields[step.id]?.[key] && (