Merge pull request #829 from getmaxun/v1-dark-mode

wip: dark mode v1

Author: amhsirak

src/components/action/ActionDescriptionBox.tsx

@@ -16,7 +16,7 @@ const CustomBoxContainer = styled.div<CustomBoxContainerProps>`
   min-height: 100px;
   height: auto;
   border-radius: 5px;
-  background-color: ${({ isDarkMode }) => (isDarkMode ? '#313438' : 'white')};
+  background-color: ${({ isDarkMode }) => (isDarkMode ? '#1d1c1cff' : 'white')};
   color: ${({ isDarkMode }) => (isDarkMode ? 'white' : 'black')};
   margin: 80px 13px 25px 13px;
   box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
@@ -31,7 +31,7 @@ const Triangle = styled.div<CustomBoxContainerProps>`
   height: 0;
   border-left: 20px solid transparent;
   border-right: 20px solid transparent;
-  border-bottom: 20px solid ${({ isDarkMode }) => (isDarkMode ? '#313438' : 'white')};
+  border-bottom: 20px solid ${({ isDarkMode }) => (isDarkMode ? '#1d1c1cff' : 'white')};
 `;
 
 const Logo = styled.img`

src/components/browser/BrowserNavBar.tsx

@@ -14,18 +14,18 @@ import { useThemeMode } from '../../context/theme-provider';
 const StyledNavBar = styled.div<{ browserWidth: number; isDarkMode: boolean }>`
     display: flex;
     padding: 12px 0px;
-    background-color: ${({ isDarkMode }) => (isDarkMode ? '#2C2F33' : '#f6f6f6')};
+    background-color: ${({ isDarkMode }) => (isDarkMode ? '#1d1c1cff' : '#f6f6f6')};
     width: ${({ browserWidth }) => browserWidth}px;
     border-radius: 0px 5px 0px 0px;
 `;
 
 const IconButton = styled(NavBarButton) <{ mode: string }>`
-  background-color: ${({ mode }) => (mode === 'dark' ? '#2C2F33' : '#f6f6f6')};
+  background-color: ${({ mode }) => (mode === 'dark' ? '#1d1c1cff' : '#f6f6f6')};
   transition: background-color 0.3s ease, transform 0.1s ease;
   color: ${({ mode }) => (mode === 'dark' ? '#FFFFFF' : '#333')};
   cursor: pointer;
   &:hover {
-    background-color: ${({ mode }) => (mode === 'dark' ? '#586069' : '#D0D0D0')};
+    background-color: ${({ mode }) => (mode === 'dark' ? '#1d1c1cff' : '#D0D0D0')};
   }
 `;
 

src/components/browser/BrowserTabs.tsx

@@ -49,7 +49,7 @@ export const BrowserTabs = (
                   background: 'white',
                   borderRadius: '5px 5px 0px 0px',
                   '&.Mui-selected': {
-                    backgroundColor: ` ${isDarkMode ? "#2a2a2a" : "#f5f5f5"}`,
+                    backgroundColor: ` ${isDarkMode ? "#121111ff" : "#f5f5f5"}`,
                     color: '#ff00c3', // Slightly lighter text when selected
                   },
                 }}

src/components/dashboard/MainMenu.tsx

@@ -3,8 +3,8 @@ import Tabs from '@mui/material/Tabs';
 import Tab from '@mui/material/Tab';
 import Box from '@mui/material/Box';
 import { useNavigate, useLocation } from 'react-router-dom';
-import { Paper, Button, useTheme, Modal, Typography, Stack } from "@mui/material";
-import { AutoAwesome, VpnKey, Usb, CloudQueue, Description, Favorite, SlowMotionVideo, PlayArrow } from "@mui/icons-material";
+import { Paper, Button, useTheme, Modal, Typography, Stack, Divider } from "@mui/material";
+import { AutoAwesome, FormatListBulleted, VpnKey, Usb, CloudQueue, Description, Favorite, SlowMotionVideo } from "@mui/icons-material";
 import { useTranslation } from 'react-i18next';
 import { useGlobalInfoStore } from "../../context/globalInfo";
 
@@ -116,7 +116,7 @@ export const MainMenu = ({ value = 'robots', handleChangeContent }: MainMenuProp
               disableRipple={true}
               sx={{ justifyContent: 'flex-start', textAlign: 'left', fontSize: 'medium' }} />
           </Tabs>
-          <hr />
+          <Divider sx={{ borderColor: theme.palette.mode === 'dark' ? "#080808ff" : "" }} />
           <Box sx={{ display: 'flex', flexDirection: 'column', textAlign: 'left' }}>
             <Button
               onClick={() => setDocModalOpen(true)}

src/components/dashboard/NavBar.tsx

@@ -598,11 +598,11 @@ export const NavBar: React.FC<NavBarProps> = ({
 
 const NavBarWrapper = styled.div<{ mode: 'light' | 'dark' }>`
   grid-area: navbar;
-  background-color: ${({ mode }) => (mode === 'dark' ? '#1e2124' : '#ffffff')};
+  background-color: ${({ mode }) => (mode === 'dark' ? '#000000ff' : '#ffffff')};
   padding: 5px;
   display: flex;
   justify-content: space-between;
-  border-bottom: 1px solid ${({ mode }) => (mode === 'dark' ? '#333' : '#e0e0e0')};
+  border-bottom: 1px solid ${({ mode }) => (mode === 'dark' ? '#000000ff' : '#e0e0e0')};
 `;
 
 const ProjectName = styled.b<{ mode: 'light' | 'dark' }>`

src/components/recorder/RightSidePanel.tsx

@@ -1059,7 +1059,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
 
       <Box>
         {browserSteps.map(step => (
-          <Box key={step.id} onMouseEnter={() => handleMouseEnter(step.id)} onMouseLeave={() => handleMouseLeave(step.id)} sx={{ padding: '10px', margin: '11px', borderRadius: '5px', position: 'relative', background: isDarkMode ? "#1E2124" : 'white', color: isDarkMode ? "white" : 'black' }}>
+          <Box key={step.id} onMouseEnter={() => handleMouseEnter(step.id)} onMouseLeave={() => handleMouseLeave(step.id)} sx={{ padding: '10px', margin: '11px', borderRadius: '5px', position: 'relative', background: isDarkMode ? "#1d1c1cff" : 'white', color: isDarkMode ? "white" : 'black' }}>
             {
               step.type === 'text' && (
                 <>
@@ -1080,7 +1080,6 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
                         </InputAdornment>
                       )
                     }}
-                    sx={{ background: isDarkMode ? "#1E2124" : 'white', color: isDarkMode ? "white" : 'black' }}
                   />
                   <TextField
                     label={t('right_panel.fields.data')}

src/components/robot/RecordingsTable.tsx

@@ -533,7 +533,7 @@ export const RecordingsTable = ({
         <>
           <TableContainer component={Paper} sx={{ width: '100%', overflow: 'hidden', marginTop: '15px' }}>
             <Table stickyHeader aria-label="sticky table">
-              <TableHead>
+              {/* <TableHead> */}
                 <TableRow>
                   {columns.map((column) => (
                     <MemoizedTableCell
@@ -544,7 +544,7 @@ export const RecordingsTable = ({
                     </MemoizedTableCell>
                   ))}
                 </TableRow>
-              </TableHead>
+              {/* </TableHead> */}
               <TableBody>
                 {visibleRows.map((row) => (
                   <TableRowMemoized