feat: include logo and change style of triangle

src/components/molecules/ActionDescriptionBox.tsx

@@ -1,30 +1,40 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
 import styled from 'styled-components';
-import { PaginationType, useActionContext, LimitType } from '../../context/browserActions';
 import { Typography, FormControlLabel, Checkbox, Box } from '@mui/material';
+import { useActionContext } from '../../context/browserActions';
 
+// Styled components
 const CustomBoxContainer = styled.div`
   position: relative;
   min-width: 250px;
-  width: auto; 
+  width: auto;
   min-height: 100px;
   height: auto;
-  border: 2px solid #ff00c3;
+  // border: 2px solid #ff00c3;
   border-radius: 5px;
   background-color: white;
-  margin: 30px 15px;
+  margin: 70px 15px 30px 15px; /* Increased top margin to move the box down */
 `;
 
 const Triangle = styled.div`
   position: absolute;
-  top: -20px;
+  top: -20px; /* Moved the triangle down */
   left: 50%;
   transform: translateX(-50%);
   width: 0;
   height: 0;
   border-left: 20px solid transparent;
   border-right: 20px solid transparent;
-  border-bottom: 20px solid #ff00c3;
+  border-bottom: 20px solid white;
+`;
+
+const Logo = styled.img`
+  position: absolute;
+  top: -70px; /* Adjusted to move the logo further above the box */
+  left: 50%;
+  transform: translateX(-50%);
+  width: 60px; /* Increased logo size */
+  height: auto;
 `;
 
 const Content = styled.div`
@@ -36,22 +46,10 @@ const ActionDescriptionBox = () => {
   const { getText, getScreenshot, getList, captureStage } = useActionContext();
 
   const messages = [
-    {
+    { stage: 'initial' as const, text: 'Select the list you want to extract along with the texts inside it' },
-      stage: 'initial' as const,
+    { stage: 'pagination' as const, text: 'Select how the robot can capture the rest of the list' },
-      text: 'Select the list you want to extract along with the texts inside it',
+    { stage: 'limit' as const, text: 'Choose the number of items to extract' },
-    },
+    { stage: 'complete' as const, text: 'Capture is complete' },
-    {
-      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',
-    },
   ];
 
   const renderActionDescription = () => {
@@ -61,14 +59,14 @@ const ActionDescriptionBox = () => {
           <Typography variant="subtitle2" gutterBottom>Capture Text</Typography>
           <Typography variant="body2" gutterBottom>Hover over the texts you want to extract and click to select them</Typography>
         </>
-      )
+      );
     } else if (getScreenshot) {
       return (
         <>
           <Typography variant="subtitle2" gutterBottom>Capture Screenshot</Typography>
-          <Typography variant="body2" gutterBottom>Capture a partial or full page screenshot of the current page. </Typography>
+          <Typography variant="body2" gutterBottom>Capture a partial or full page screenshot of the current page.</Typography>
         </>
-      )
+      );
     } else if (getList) {
       return (
         <>
@@ -77,23 +75,21 @@ const ActionDescriptionBox = () => {
             Hover over the list you want to extract. Once selected, you can hover over all texts inside the list you selected. Click to select them.
           </Typography>
           <Box>
-            {messages.map(({ stage, text }, index) => (
+            {messages.map(({ stage, text }) => (
               <FormControlLabel
                 key={stage}
                 control={
                   <Checkbox
                     checked={
-                      (stage === 'initial' && captureStage !== '') || // Checked if captureStage is at least 'initial'
+                      (stage === 'initial' && captureStage !== '') ||
-                      (stage === 'pagination' && (captureStage === 'pagination' || captureStage === 'limit' || captureStage === 'complete')) || // captureStage is at least 'pagination'
+                      (stage === 'pagination' && (captureStage === 'pagination' || captureStage === 'limit' || captureStage === 'complete')) ||
-                      (stage === 'limit' && (captureStage === 'limit' || captureStage === 'complete')) || // captureStage is at least 'limit'
+                      (stage === 'limit' && (captureStage === 'limit' || captureStage === 'complete')) ||
-                      (stage === 'complete' && captureStage === 'complete') // captureStage is 'complete'
+                      (stage === 'complete' && captureStage === 'complete')
                     }
                     disabled
                   />
                 }
-                label={
+                label={<Typography variant="body2" gutterBottom>{text}</Typography>}
-                  <Typography variant="body2" gutterBottom>{text}</Typography>
-                }
               />
             ))}
           </Box>
@@ -105,12 +101,13 @@ const ActionDescriptionBox = () => {
           <Typography variant="subtitle2" gutterBottom>What data do you want to extract?</Typography>
           <Typography variant="body2" gutterBottom>A robot is designed to perform one action at a time. You can choose any of the options below.</Typography>
         </>
-      )
+      );
     }
-  }
+  };
 
   return (
     <CustomBoxContainer>
+      <Logo src="https://ik.imagekit.io/9owqhz0po/Screenshot%202024-10-20%20232710.png" alt="Logo" />
       <Triangle />
       <Content>
         {renderActionDescription()}