From f4a0327c9a37f90b4d9775df17c07624ee81a15b Mon Sep 17 00:00:00 2001 From: amit Date: Thu, 7 Nov 2024 00:46:47 +0530 Subject: [PATCH 01/52] dark theme added --- src/App.tsx | 84 +--------------- src/components/molecules/NavBar.tsx | 139 +++++++++++++------------- src/components/organisms/MainMenu.tsx | 50 +++------ src/context/theme-provider.tsx | 64 ++++++++++++ 4 files changed, 154 insertions(+), 183 deletions(-) create mode 100644 src/context/theme-provider.tsx diff --git a/src/App.tsx b/src/App.tsx index c37de9ea..896723a1 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,96 +1,22 @@ import React from 'react'; import { Routes, Route } from 'react-router-dom'; -import { ThemeProvider, createTheme } from "@mui/material/styles"; +import { createTheme } from "@mui/material/styles"; import { GlobalInfoProvider } from "./context/globalInfo"; import { PageWrapper } from "./pages/PageWrappper"; +import ThemeModeProvider from './context/theme-provider'; + -const theme = createTheme({ - palette: { - primary: { - main: "#ff00c3", - contrastText: "#ffffff", - }, - }, - components: { - MuiButton: { - styleOverrides: { - root: { - // Default styles for all buttons (optional) - textTransform: "none", - }, - containedPrimary: { - // Styles for 'contained' variant with 'primary' color - '&:hover': { - backgroundColor: "#ff66d9", - }, - }, - outlined: { - // Apply white background for all 'outlined' variant buttons - backgroundColor: "#ffffff", - '&:hover': { - backgroundColor: "#f0f0f0", // Optional lighter background on hover - }, - }, - }, - }, - MuiLink: { - styleOverrides: { - root: { - '&:hover': { - color: "#ff00c3", - }, - }, - }, - }, - MuiIconButton: { - styleOverrides: { - root: { - // '&:hover': { - // color: "#ff66d9", - // }, - }, - }, - }, - MuiTab: { - styleOverrides: { - root: { - textTransform: "none", - }, - }, - }, - MuiAlert: { - styleOverrides: { - standardInfo: { - backgroundColor: "#fce1f4", - color: "#ff00c3", - '& .MuiAlert-icon': { - color: "#ff00c3", - }, - }, - }, - }, - MuiAlertTitle: { - styleOverrides: { - root: { - '& .MuiAlert-icon': { - color: "#ffffff", - }, - }, - }, - }, - }, -}); function App() { return ( - + } /> - + ); } diff --git a/src/components/molecules/NavBar.tsx b/src/components/molecules/NavBar.tsx index 69fba352..b82f2a5d 100644 --- a/src/components/molecules/NavBar.tsx +++ b/src/components/molecules/NavBar.tsx @@ -3,14 +3,15 @@ import axios from 'axios'; import styled from "styled-components"; import { stopRecording } from "../../api/recording"; import { useGlobalInfoStore } from "../../context/globalInfo"; -import { IconButton, Menu, MenuItem, Typography, Avatar } from "@mui/material"; -import { AccountCircle, Logout, Clear } from "@mui/icons-material"; +import { IconButton, Menu, MenuItem, Typography, Avatar, Tooltip } from "@mui/material"; +import { AccountCircle, Logout, Clear, Brightness4, Brightness7 } from "@mui/icons-material"; import { useNavigate } from 'react-router-dom'; import { AuthContext } from '../../context/auth'; import { SaveRecording } from '../molecules/SaveRecording'; import DiscordIcon from '../atoms/DiscordIcon'; import { apiUrl } from '../../apiConfig'; import MaxunLogo from "../../assets/maxunlogo.png"; +import { useThemeMode } from '../../context/theme-provider'; interface NavBarProps { recordingName: string; @@ -18,10 +19,11 @@ interface NavBarProps { } export const NavBar: React.FC = ({ recordingName, isRecording }) => { - const { notify, browserId, setBrowserId, recordingUrl } = useGlobalInfoStore(); + const { notify, browserId, setBrowserId } = useGlobalInfoStore(); const { state, dispatch } = useContext(AuthContext); const { user } = state; const navigate = useNavigate(); + const { darkMode, toggleTheme } = useThemeMode(); const [anchorEl, setAnchorEl] = useState(null); @@ -51,20 +53,18 @@ export const NavBar: React.FC = ({ recordingName, isRecording }) => }; return ( - -
+ +
-
Maxun
+
+ Maxun +
- { - user ? ( -
- {!isRecording ? ( - <> - + {!isRecording ? ( + <> + = ({ recordingName, isRecording }) => padding: '8px', marginRight: '10px', }} - > + > - + - - - {user.email} + + + {user.email} + + + { handleMenuClose(); logout(); }}> + Logout + + + {/* Theme Toggle Button */} + + + {darkMode ? : } - - { handleMenuClose(); logout(); }}> - Logout - - - - ) : ( - <> - - - Discard - - - - )} -
- ) : "" - } + + + ) : ( + <> + + + Discard + + + + )} +
+ ) : null} ); }; -const NavBarWrapper = styled.div` +const NavBarWrapper = styled.div<{ mode: 'light' | 'dark' }>` grid-area: navbar; - background-color: white; - padding:5px; + background-color: ${({ mode }) => (mode === 'dark' ? '#1e2124' : '#ffffff')}; + padding: 5px; display: flex; justify-content: space-between; - border-bottom: 1px solid #e0e0e0; + border-bottom: 1px solid ${({ mode }) => (mode === 'dark' ? '#333' : '#e0e0e0')}; `; -const ProjectName = styled.b` - color: #3f4853; +const ProjectName = styled.b<{ mode: 'light' | 'dark' }>` + color: ${({ mode }) => (mode === 'dark' ? 'white' : 'black')}; font-size: 1.3em; `; diff --git a/src/components/organisms/MainMenu.tsx b/src/components/organisms/MainMenu.tsx index edb6ed29..c6bae196 100644 --- a/src/components/organisms/MainMenu.tsx +++ b/src/components/organisms/MainMenu.tsx @@ -1,10 +1,9 @@ -import * as React from 'react'; +import React from 'react'; import Tabs from '@mui/material/Tabs'; import Tab from '@mui/material/Tab'; import Box from '@mui/material/Box'; -import { Paper, Button } from "@mui/material"; -import { AutoAwesome, FormatListBulleted, VpnKey, Usb, Article, Link, CloudQueue } from "@mui/icons-material"; -import { apiUrl } from "../../apiConfig"; +import { Paper, Button, useTheme } from "@mui/material"; +import { AutoAwesome, FormatListBulleted, VpnKey, Usb, Article, CloudQueue } from "@mui/icons-material"; interface MainMenuProps { value: string; @@ -12,6 +11,7 @@ interface MainMenuProps { } export const MainMenu = ({ value = 'recordings', handleChangeContent }: MainMenuProps) => { + const theme = useTheme(); const handleChange = (event: React.SyntheticEvent, newValue: string) => { handleChangeContent(newValue); @@ -22,16 +22,14 @@ export const MainMenu = ({ value = 'recordings', handleChangeContent }: MainMenu sx={{ height: 'auto', width: '250px', - backgroundColor: 'white', + backgroundColor: theme.palette.background.paper, paddingTop: '0.5rem', + color: theme.palette.text.primary, }} variant="outlined" square > - + } iconPosition="start" /> } iconPosition="start" /> } iconPosition="start" /> } @@ -87,7 +69,7 @@ export const MainMenu = ({ value = 'recordings', handleChangeContent }: MainMenu
- } {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] && ( From f71822f844e4b88a27c47b613da6589d734dc32d Mon Sep 17 00:00:00 2001 From: AmitChauhan63390 Date: Sun, 24 Nov 2024 00:49:39 +0530 Subject: [PATCH 09/52] some fixes --- src/components/atoms/Loader.tsx | 6 +- src/components/atoms/buttons/buttons.tsx | 19 +- src/components/atoms/canvas.tsx | 2 +- .../molecules/ActionDescriptionBox.tsx | 1 + src/components/molecules/BrowserNavBar.tsx | 64 ++-- .../molecules/BrowserRecordingSave.tsx | 7 +- src/components/molecules/BrowserTabs.tsx | 71 ++++- .../molecules/InterpretationLog.tsx | 11 +- src/components/molecules/NavBar.tsx | 288 ++++++++++++------ src/components/molecules/RunContent.tsx | 49 ++- src/components/molecules/SaveRecording.tsx | 2 +- src/components/organisms/BrowserContent.tsx | 12 +- src/components/organisms/BrowserWindow.tsx | 2 +- src/components/organisms/RightSidePanel.tsx | 27 +- src/pages/RecordingPage.tsx | 2 + 15 files changed, 399 insertions(+), 164 deletions(-) diff --git a/src/components/atoms/Loader.tsx b/src/components/atoms/Loader.tsx index 35f9a506..529068a7 100644 --- a/src/components/atoms/Loader.tsx +++ b/src/components/atoms/Loader.tsx @@ -2,16 +2,13 @@ import styled from "styled-components"; import { Stack } from "@mui/material"; import { useThemeMode } from "../../context/theme-provider"; - interface LoaderProps { text: string; } export const Loader: React.FC = ({ text }) => { - const { darkMode } = useThemeMode(); - return ( @@ -29,14 +26,13 @@ interface StyledParagraphProps { darkMode: boolean; } - - const StyledParagraph = styled.p` font-size: medium; font-weight: 700; font-family: inherit; color: ${({ darkMode }) => (darkMode ? 'white' : 'black')}; margin-top: 20px; + flex-wrap: wrap; `; const DotsContainer = styled.div` diff --git a/src/components/atoms/buttons/buttons.tsx b/src/components/atoms/buttons/buttons.tsx index afc4a483..0dd72e0c 100644 --- a/src/components/atoms/buttons/buttons.tsx +++ b/src/components/atoms/buttons/buttons.tsx @@ -1,26 +1,23 @@ import styled from 'styled-components'; +import { useThemeMode } from '../../../context/theme-provider'; -export const NavBarButton = styled.button<{ disabled: boolean }>` + + +export const NavBarButton = styled.button<{ disabled: boolean, mode: 'light' | 'dark' }>` margin-left: 10px; margin-right: 5px; padding: 0; border: none; - background-color: transparent; + background-color: ${mode => mode ? '#333' : '#ffffff'}; cursor: ${({ disabled }) => disabled ? 'default' : 'pointer'}; width: 24px; height: 24px; border-radius: 12px; outline: none; - color: ${({ disabled }) => disabled ? '#999' : '#333'}; + color: ${mode => mode ? '#ffffff' : '#333333'}; + + - ${({ disabled }) => disabled ? null : ` - &:hover { - background-color: #ddd; - } - &:active { - background-color: #d0d0d0; - } - `}; `; export const UrlFormButton = styled.button` diff --git a/src/components/atoms/canvas.tsx b/src/components/atoms/canvas.tsx index 1dd88e19..e31a7094 100644 --- a/src/components/atoms/canvas.tsx +++ b/src/components/atoms/canvas.tsx @@ -142,7 +142,7 @@ const Canvas = ({ width, height, onCreateRef }: CanvasProps) => { diff --git a/src/components/molecules/ActionDescriptionBox.tsx b/src/components/molecules/ActionDescriptionBox.tsx index e064c01b..747cad18 100644 --- a/src/components/molecules/ActionDescriptionBox.tsx +++ b/src/components/molecules/ActionDescriptionBox.tsx @@ -18,6 +18,7 @@ const CustomBoxContainer = styled.div` background-color: ${({ isDarkMode }) => (isDarkMode ? '#313438' : 'white')}; color: ${({ isDarkMode }) => (isDarkMode ? 'white' : 'black')}; margin: 80px 13px 25px 13px; + box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); `; const Triangle = styled.div` diff --git a/src/components/molecules/BrowserNavBar.tsx b/src/components/molecules/BrowserNavBar.tsx index 8fe1ba05..d3cb781f 100644 --- a/src/components/molecules/BrowserNavBar.tsx +++ b/src/components/molecules/BrowserNavBar.tsx @@ -1,6 +1,4 @@ -import type { - FC, -} from 'react'; +import type { FC } from 'react'; import styled from 'styled-components'; import ReplayIcon from '@mui/icons-material/Replay'; @@ -13,13 +11,39 @@ import { useCallback, useEffect, useState } from "react"; import { useSocketStore } from "../../context/socket"; import { getCurrentUrl } from "../../api/recording"; import { useGlobalInfoStore } from '../../context/globalInfo'; +import { useThemeMode } from '../../context/theme-provider'; -const StyledNavBar = styled.div<{ browserWidth: number }>` - display: flex; - padding: 12px 0px; - background-color: theme.palette.background.paper; - width: ${({ browserWidth }) => browserWidth}px; - border-radius: 0px 5px 0px 0px; +const StyledNavBar = styled.div<{ browserWidth: number; isDarkMode: boolean }>` + display: flex; + align-items: center; + padding: 10px 20px; + background-color: ${({ isDarkMode }) => (isDarkMode ? '#2C2F33' : '#F5F5F5')}; + width: ${({ browserWidth }) => `${browserWidth}px`}; + border-radius: 0px 0px 8px 8px; + box-shadow: ${({ isDarkMode }) => (isDarkMode ? '0px 2px 10px rgba(0, 0, 0, 0.2)' : '0px 2px 10px rgba(0, 0, 0, 0.1)')}; + transition: background-color 0.3s ease, box-shadow 0.3s ease; + margin-bottom: 15px; +`; + +const IconButton = styled(NavBarButton)<{ mode: string }>` + display: flex; + align-items: center; + justify-content: center; + padding: 8px; + margin-right: 12px; + background-color: ${({ mode }) => (mode === 'dark' ? '#40444B' : '#E0E0E0')}; + border-radius: 50%; + 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')}; + } + + &:active { + transform: scale(0.95); + } `; interface NavBarProps { @@ -31,6 +55,7 @@ const BrowserNavBar: FC = ({ browserWidth, handleUrlChanged, }) => { + const isDarkMode = useThemeMode().darkMode; const { socket } = useSocketStore(); const { recordingUrl, setRecordingUrl } = useGlobalInfoStore(); @@ -67,7 +92,7 @@ const BrowserNavBar: FC = ({ socket.off('urlChanged', handleCurrentUrlChange); } } - }, [socket, handleCurrentUrlChange]) + }, [socket, handleCurrentUrlChange]); const addAddress = (address: string) => { if (socket) { @@ -78,38 +103,41 @@ const BrowserNavBar: FC = ({ }; return ( - - + { socket?.emit('input:back'); }} disabled={false} + mode={isDarkMode ? 'dark' : 'light'} > - + - { socket?.emit('input:forward'); }} disabled={false} + mode={isDarkMode ? 'dark' : 'light'} > - + - { if (socket) { - handleRefresh() + handleRefresh(); } }} disabled={false} + mode={isDarkMode ? 'dark' : 'light'} > - + {
- ) : null} + + )} ); }; +// Styles +const styles = { + socialButton: { + display: 'flex', + alignItems: 'center', + borderRadius: '5px', + padding: '8px', + marginRight: '30px', + color: '#333333', + '&:hover': { + color: '#ff00c3' + } + }, + userButton: (darkMode: boolean) => ({ + display: 'flex', + alignItems: 'center', + borderRadius: '5px', + padding: '8px', + marginRight: '10px', + color: darkMode ? '#ffffff' : '#333333', + '&:hover': { + backgroundColor: darkMode ? '#333' : '#F5F5F5', + color: '#ff00c3' + } + }), + discardButton: { + borderRadius: '5px', + padding: '8px', + background: 'red', + color: 'white', + marginRight: '10px', + '&:hover': { + color: 'white', + backgroundColor: '#ff0000' + } + } +}; + +// Styled Components const NavBarWrapper = styled.div<{ mode: 'light' | 'dark' }>` grid-area: navbar; background-color: ${({ mode }) => (mode === 'dark' ? '#1e2124' : '#ffffff')}; @@ -159,7 +235,27 @@ const NavBarWrapper = styled.div<{ mode: 'light' | 'dark' }>` border-bottom: 1px solid ${({ mode }) => (mode === 'dark' ? '#333' : '#e0e0e0')}; `; -const ProjectName = styled.b<{ mode: 'light' | 'dark' }>` - color: ${({ mode }) => (mode === 'dark' ? 'white' : 'black')}; - font-size: 1.3em; +const BrandContainer = styled.div` + display: flex; + justify-content: flex-start; `; + +const LogoImage = styled.img.attrs({ + width: 45, + height: 40, +})` + border-radius: 5px; + margin: 5px 0px 5px 15px; +`; + +const ProjectName = styled.b<{ mode: 'light' | 'dark' }>` + color: ${({ mode }) => (mode === 'dark' ? 'white' : '#333333')}; + font-size: 1.3em; + padding: 11px; +`; + +const ControlsContainer = styled.div` + display: flex; + align-items: center; + justify-content: flex-end; +`; \ No newline at end of file diff --git a/src/components/molecules/RunContent.tsx b/src/components/molecules/RunContent.tsx index ff414628..b9c0f5fe 100644 --- a/src/components/molecules/RunContent.tsx +++ b/src/components/molecules/RunContent.tsx @@ -75,10 +75,50 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe - setTab(newTab)} aria-label="run-content-tabs"> - - - + setTab(newTab)} + aria-label="run-content-tabs" + sx={{ + // Remove the default blue indicator + '& .MuiTabs-indicator': { + backgroundColor: '#FF00C3', // Change to pink + }, + // Remove default transition effects + '& .MuiTab-root': { + '&.Mui-selected': { + color: '#FF00C3', + }, + } + }} +> + theme.palette.mode === 'dark' ? '#fff' : '#000', + '&:hover': { + color: '#FF00C3' + }, + '&.Mui-selected': { + color: '#FF00C3', + } + }} + /> + theme.palette.mode === 'dark' ? '#fff' : '#000', + '&:hover': { + color: '#FF00C3' + }, + '&.Mui-selected': { + color: '#FF00C3', + } + }} + /> + 
                     {JSON.stringify(row.serializableOutput, null, 2)}
diff --git a/src/components/molecules/SaveRecording.tsx b/src/components/molecules/SaveRecording.tsx
index 60ef3fa6..da7d3198 100644
--- a/src/components/molecules/SaveRecording.tsx
+++ b/src/components/molecules/SaveRecording.tsx
@@ -76,7 +76,7 @@ export const SaveRecording = ({ fileName }: SaveRecordingProps) => {
 
   return (
     

-      
 
diff --git a/src/components/organisms/BrowserContent.tsx b/src/components/organisms/BrowserContent.tsx
index 11af4f2f..07410bd6 100644
--- a/src/components/organisms/BrowserContent.tsx
+++ b/src/components/organisms/BrowserContent.tsx
@@ -12,6 +12,7 @@ import {
 } from "../../api/recording";
 import { Box } from "@mui/material";
 import { InterpretationLog } from "../molecules/InterpretationLog";
+import { Height } from "@mui/icons-material";
 
 // TODO: Tab !show currentUrl after recordingUrl global state
 export const BrowserContent = () => {
@@ -139,7 +140,7 @@ export const BrowserContent = () => {
   }, [handleUrlChanged]);
 
   return (
-    

+    

        {
         // todo: use width from browser dimension once fixed
         browserWidth={900}
         handleUrlChanged={handleUrlChanged}
+       
       />
-      
+      
     

   );
 };
 
-const BrowserContentWrapper = styled.div``;
+const BrowserContentWrapper = styled.div`
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;`;
diff --git a/src/components/organisms/BrowserWindow.tsx b/src/components/organisms/BrowserWindow.tsx
index 697b4adb..30e67fa4 100644
--- a/src/components/organisms/BrowserWindow.tsx
+++ b/src/components/organisms/BrowserWindow.tsx
@@ -319,7 +319,7 @@ export const BrowserWindow = () => {
 
   
     return (
-        

+        

             {
                 getText === true || getList === true ? (
                      = ({ onFinishCapture
   const theme = useThemeMode();
   const isDarkMode = theme.darkMode;
   return (
-    
+    
       {/* 
         Last action: {` ${lastAction}`}
        */}
@@ -484,7 +499,7 @@ export const RightSidePanel: React.FC = ({ onFinishCapture
       
       
         {browserSteps.map(step => (
-           handleMouseEnter(step.id)} onMouseLeave={() => handleMouseLeave(step.id)} sx={{ padding: '10px', margin: '11px', borderRadius: '5px', position: 'relative', background: 'white' }}>
+           handleMouseEnter(step.id)} onMouseLeave={() => handleMouseLeave(step.id)} sx={{ padding: '10px', margin: '11px', borderRadius: '5px', position: 'relative', background: isDarkMode ? "#1E2124" : 'white', color: isDarkMode ? "white" : 'black' }}>
             {
               step.type === 'text' && (
                 <>
@@ -520,7 +535,7 @@ export const RightSidePanel: React.FC = ({ onFinishCapture
                         
                       )
                     }}
-                    sx={{ background: isDarkMode ? "#1E2124" : 'white', color: isDarkMode ? "white" : 'black' }}
+                    
                   />
                   {!confirmedTextSteps[step.id] && (
                     
@@ -542,7 +557,7 @@ export const RightSidePanel: React.FC = ({ onFinishCapture
               <>
                 List Selected Successfully
                 {Object.entries(step.fields).map(([key, field]) => (
-                  
+                  
                      = ({ onFinishCapture
                         )
                       }}
 
-                      style={{ background: isDarkMode ? "#1E2124" : 'white' }}
+                      
                     />
                      = ({ onFinishCapture
                           
                         )
                       }}
-                      style={{ background: isDarkMode ? "#1E2124" : 'white' }}
+                      
                     />
                     {!confirmedListTextFields[step.id]?.[key] && (
                       
diff --git a/src/pages/RecordingPage.tsx b/src/pages/RecordingPage.tsx
index e82d1f74..8f9eeda0 100644
--- a/src/pages/RecordingPage.tsx
+++ b/src/pages/RecordingPage.tsx
@@ -59,7 +59,9 @@ export const RecordingPage = ({ recordingName }: RecordingPageProps) => {
 
   useEffect(() => {
     if (darkMode) {
+
       document.body.style.background = 'rgba(18,18,18,1)';
+
     } else {
       document.body.style.background = 'radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(232, 191, 222, 1) 100%, rgba(255, 255, 255, 1) 100%)';
     }

From e9e9070fe23b2a7887c924f516a15842c59702a3 Mon Sep 17 00:00:00 2001
From: AmitChauhan63390 
Date: Sun, 24 Nov 2024 01:10:22 +0530
Subject: [PATCH 10/52] tab indicator default color changed to ff00c3

---
 src/components/organisms/MainMenu.tsx | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src/components/organisms/MainMenu.tsx b/src/components/organisms/MainMenu.tsx
index b8f2aaa8..27c42fe1 100644
--- a/src/components/organisms/MainMenu.tsx
+++ b/src/components/organisms/MainMenu.tsx
@@ -43,6 +43,13 @@ export const MainMenu = ({ value = 'recordings', handleChangeContent }: MainMenu
           value={value}
           onChange={handleChange}
           orientation="vertical"
+          TabIndicatorProps={{
+            style: {
+              backgroundColor: '#ff00c3', // Set the custom color for the indicator here
+              width: '2px',               // Ensure the indicator width is 2px as per your requirement
+              right: 0,                   // Position it on the right if needed
+            },
+          }}
           sx={{
             alignItems: 'flex-start',
             '& .MuiTab-root': {
@@ -54,6 +61,10 @@ export const MainMenu = ({ value = 'recordings', handleChangeContent }: MainMenu
               '&.Mui-selected': {
                 color: selectedPink, // Darker pink for selected tab
               },
+              '& .MuiTabs-indicator': {
+                backgroundColor: '#ff00c3', // Custom color for the indicator
+              },
+
             },
           }}
         >
@@ -62,24 +73,28 @@ export const MainMenu = ({ value = 'recordings', handleChangeContent }: MainMenu
             label="Robots"
             icon={}
             iconPosition="start"
+            
           />
           }
             iconPosition="start"
+           
           />
           }
             iconPosition="start"
+            
           />
           }
             iconPosition="start"
+            
           />
         
         


From 3cf0786389d00bbcaaea71f67d1ce7645c0babe4 Mon Sep 17 00:00:00 2001
From: AmitChauhan63390 
Date: Sun, 24 Nov 2024 19:36:07 +0530
Subject: [PATCH 11/52] pinkish buttons

---
 src/components/organisms/BrowserContent.tsx | 2 +-
 src/components/organisms/RightSidePanel.tsx | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/organisms/BrowserContent.tsx b/src/components/organisms/BrowserContent.tsx
index 07410bd6..fcb45087 100644
--- a/src/components/organisms/BrowserContent.tsx
+++ b/src/components/organisms/BrowserContent.tsx
@@ -140,7 +140,7 @@ export const BrowserContent = () => {
   }, [handleUrlChanged]);
 
   return (
-    

+    

        = ({ onFinishCapture
        */}
       
       
-        {!getText && !getScreenshot && !getList && showCaptureList && }
+        {!getText && !getScreenshot && !getList && showCaptureList && }
         {getList && (
           <>
             
@@ -479,7 +479,7 @@ export const RightSidePanel: React.FC = ({ onFinishCapture
             
           
         )}
-        {!getText && !getScreenshot && !getList && showCaptureText && }
+        {!getText && !getScreenshot && !getList && showCaptureText && }
         {getText &&
           <>
             
@@ -488,7 +488,7 @@ export const RightSidePanel: React.FC = ({ onFinishCapture
             
           
         }
-        {!getText && !getScreenshot && !getList && showCaptureScreenshot && }
+        {!getText && !getScreenshot && !getList && showCaptureScreenshot && }
         {getScreenshot && (
           
             

From 587dacdaf14cbba65c84321205d0b4c952045780 Mon Sep 17 00:00:00 2001
From: AmitChauhan63390 
Date: Sun, 8 Dec 2024 04:49:29 +0530
Subject: [PATCH 12/52] mui blue color fixes

---
 .../molecules/IntegrationSettings.tsx         | 30 +++++--
 src/components/organisms/MainMenu.tsx         |  5 ++
 src/components/organisms/ProxyForm.tsx        | 80 ++++++++++++++++---
 src/context/theme-provider.tsx                | 44 +++++++++-
 src/pages/Login.tsx                           |  2 +-
 src/pages/Register.tsx                        |  2 +
 6 files changed, 143 insertions(+), 20 deletions(-)

diff --git a/src/components/molecules/IntegrationSettings.tsx b/src/components/molecules/IntegrationSettings.tsx
index c31605de..8e38b5a0 100644
--- a/src/components/molecules/IntegrationSettings.tsx
+++ b/src/components/molecules/IntegrationSettings.tsx
@@ -14,18 +14,33 @@ import axios from "axios";
 import { useGlobalInfoStore } from "../../context/globalInfo";
 import { getStoredRecording } from "../../api/storage";
 import { apiUrl } from "../../apiConfig.js";
-import Cookies from 'js-cookie';
+
 interface IntegrationProps {
   isOpen: boolean;
   handleStart: (data: IntegrationSettings) => void;
   handleClose: () => void;
 }
+
 export interface IntegrationSettings {
   spreadsheetId: string;
   spreadsheetName: string;
   data: string;
 }
 
+// Helper functions to replace js-cookie functionality
+const getCookie = (name: string): string | null => {
+  const value = `; ${document.cookie}`;
+  const parts = value.split(`; ${name}=`);
+  if (parts.length === 2) {
+    return parts.pop()?.split(';').shift() || null;
+  }
+  return null;
+};
+
+const removeCookie = (name: string): void => {
+  document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`;
+};
+
 export const IntegrationSettingsModal = ({
   isOpen,
   handleStart,
@@ -106,7 +121,7 @@ export const IntegrationSettingsModal = ({
         },
         { withCredentials: true }
       );
-      notify(`success`, `Google Sheet selected successfully`)
+      notify(`success`, `Google Sheet selected successfully`);
       console.log("Google Sheet ID updated:", response.data);
     } catch (error: any) {
       console.error(
@@ -137,14 +152,14 @@ export const IntegrationSettingsModal = ({
 
   useEffect(() => {
     // Check if there is a success message in cookies
-    const status = Cookies.get("robot_auth_status");
-    const message = Cookies.get("robot_auth_message");
+    const status = getCookie("robot_auth_status");
+    const message = getCookie("robot_auth_message");
 
     if (status === "success" && message) {
       notify("success", message);
       // Clear the cookies after reading
-      Cookies.remove("robot_auth_status");
-      Cookies.remove("robot_auth_message");
+      removeCookie("robot_auth_status");
+      removeCookie("robot_auth_message");
     }
 
     // Check if we're on the callback URL
@@ -177,7 +192,6 @@ export const IntegrationSettingsModal = ({
       >
         
           Integrate with Google Sheet{" "}
-          {/*  */}
         
 
         {recording && recording.google_sheet_id ? (
@@ -320,4 +334,4 @@ export const modalStyle = {
   height: "fit-content",
   display: "block",
   padding: "20px",
-};
+};
\ No newline at end of file
diff --git a/src/components/organisms/MainMenu.tsx b/src/components/organisms/MainMenu.tsx
index 27c42fe1..60c9a082 100644
--- a/src/components/organisms/MainMenu.tsx
+++ b/src/components/organisms/MainMenu.tsx
@@ -124,4 +124,9 @@ const buttonStyles = {
   alignItems: 'center',
   textTransform: 'none',
   color: 'inherit',
+  backgroundColor: 'transparent',
+  '&:hover': {
+    backgroundColor: 'rgba(255, 0, 195, 0.1)',
+    color: '#ff00c3',
+  },
 };
diff --git a/src/components/organisms/ProxyForm.tsx b/src/components/organisms/ProxyForm.tsx
index a581144b..acd71e4e 100644
--- a/src/components/organisms/ProxyForm.tsx
+++ b/src/components/organisms/ProxyForm.tsx
@@ -1,8 +1,48 @@
 import React, { useState, useEffect } from 'react';
 import { styled } from '@mui/system';
-import { Alert, AlertTitle, TextField, Button, Switch, FormControlLabel, Box, Typography, Tabs, Tab, Table, TableContainer, TableHead, TableRow, TableBody, TableCell, Paper } from '@mui/material';
+import { 
+    Alert, 
+    AlertTitle, 
+    TextField, 
+    Button, 
+    Switch, 
+    FormControlLabel, 
+    Box, 
+    Typography, 
+    Tabs, 
+    Tab, 
+    Table, 
+    TableContainer, 
+    TableHead, 
+    TableRow, 
+    TableBody, 
+    TableCell, 
+    Paper 
+} from '@mui/material';
 import { sendProxyConfig, getProxyConfig, testProxyConfig, deleteProxyConfig } from '../../api/proxy';
 import { useGlobalInfoStore } from '../../context/globalInfo';
+import { useThemeMode } from '../../context/theme-provider';
+
+// Custom styled Tabs component
+const CustomTabs = styled(Tabs)(({ theme }) => ({
+    '& .MuiTabs-indicator': {
+        backgroundColor: '#ff00c3', // Pink indicator
+    },
+}));
+
+// Custom styled Tab component
+const CustomTab = styled(Tab)(({ theme }) => ({
+    '&.Mui-selected': {
+        color: '#ff00c3', // Pink for selected tab
+    },
+    '&:hover': {
+        color: '#ff00c3', // Pink on hover
+         // Subtle hover effect
+    },
+    '&.MuiTab-root': {
+        textTransform: 'none', // Removes uppercase transformation
+    },
+}));
 
 const FormContainer = styled(Box)({
     display: 'flex',
@@ -132,16 +172,37 @@ const ProxyForm: React.FC = () => {
         fetchProxyConfig();
     }, []);
 
+    const theme = useThemeMode();
+    const isDarkMode = theme.darkMode;
+
     return (
         <>
             
                 
                     Proxy Configuration
                 
-                
-                    
-                    
-                
+                
+                    
+                    
+                
                 {tabIndex === 0 && (
                     isProxyConfigured ? (
                         
@@ -236,15 +297,15 @@ const ProxyForm: React.FC = () => {
                             
                                 Coming Soon - In Open Source (Basic Rotation) & Cloud (Advanced Rotation). If you don't want to manage the infrastructure, join our cloud waitlist to get early access.
                             
-                            
                         
                     
                 )}
             
-            
-            If your proxy requires a username and password, always provide them separately from the proxy URL. 
+            
+                If your proxy requires a username and password, always provide them separately from the proxy URL. 
                 

                 The right way
                 

@@ -258,9 +319,10 @@ const ProxyForm: React.FC = () => {
                 The wrong way
                 

                 Proxy URL: http://myusername:mypassword@proxy.com:1337
+                

             
         
     );
 };
 
-export default ProxyForm;
+export default ProxyForm;
\ No newline at end of file
diff --git a/src/context/theme-provider.tsx b/src/context/theme-provider.tsx
index 02052cf5..a6097f95 100644
--- a/src/context/theme-provider.tsx
+++ b/src/context/theme-provider.tsx
@@ -6,7 +6,7 @@ const lightTheme = createTheme({
   palette: {
     mode: 'light',
     primary: {
-      main: '#1e88e5',
+      main: '#ff00c3', // Pink as the primary color
     },
     background: {
       default: '#ffffff',
@@ -16,13 +16,33 @@ const lightTheme = createTheme({
       primary: '#000000',
     },
   },
+  components: {
+    MuiTabs: {
+      styleOverrides: {
+        indicator: {
+          backgroundColor: '#ff00c3', // Pink for tab indicators
+        },
+      },
+    },
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          backgroundColor: '#ff00c3', // Pink button background
+          color: '#ffffff',
+          '&:hover': {
+            backgroundColor: '#e600b3', // Slightly darker pink on hover
+          },
+        },
+      },
+    },
+  },
 });
 
 const darkTheme = createTheme({
   palette: {
     mode: 'dark',
     primary: {
-      main: '#90caf9',
+      main: '#ff00c3', // Pink as the primary color
     },
     background: {
       default: '#121212',
@@ -32,6 +52,26 @@ const darkTheme = createTheme({
       primary: '#ffffff',
     },
   },
+  components: {
+    MuiTabs: {
+      styleOverrides: {
+        indicator: {
+          backgroundColor: '#ff00c3', // Pink for tab indicators
+        },
+      },
+    },
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          backgroundColor: '#ff00c3', // Pink button background
+          color: '#ffffff',
+          '&:hover': {
+            backgroundColor: '#e600b3', // Slightly darker pink on hover
+          },
+        },
+      },
+    },
+  },
 });
 
 const ThemeModeContext = createContext({
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
index 87f90b53..de5f4838 100644
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -38,7 +38,7 @@ const Login = () => {
       const { data } = await axios.post(`${apiUrl}/auth/login`, {
         email,
         password,
-      });
+      }, { withCredentials: true });
       dispatch({ type: "LOGIN", payload: data });
       notify("success", "Welcome to Maxun!");
       window.localStorage.setItem("user", JSON.stringify(data));
diff --git a/src/pages/Register.tsx b/src/pages/Register.tsx
index b2a3eebf..ad7fb89f 100644
--- a/src/pages/Register.tsx
+++ b/src/pages/Register.tsx
@@ -39,6 +39,8 @@ const Register = () => {
         email,
         password,
       });
+
+      console.log(data)
       dispatch({ type: "LOGIN", payload: data });
       notify("success", "Registration Successful!");
       window.localStorage.setItem("user", JSON.stringify(data));

From 655eadc068820b34504226ba51d32b012f5760a0 Mon Sep 17 00:00:00 2001
From: AmitChauhan63390 
Date: Sun, 8 Dec 2024 05:41:11 +0530
Subject: [PATCH 13/52] forms

---
 src/components/molecules/NavBar.tsx |   2 +-
 src/pages/Login.tsx                 | 186 +++++++++++++++++-----------
 src/pages/PageWrappper.tsx          |   3 +
 src/pages/Register.tsx              |  87 +++++++++----
 4 files changed, 175 insertions(+), 103 deletions(-)

diff --git a/src/components/molecules/NavBar.tsx b/src/components/molecules/NavBar.tsx
index d8831ea6..d7cb726c 100644
--- a/src/components/molecules/NavBar.tsx
+++ b/src/components/molecules/NavBar.tsx
@@ -258,4 +258,4 @@ const ControlsContainer = styled.div`
   display: flex;
   align-items: center;
   justify-content: flex-end;
-`;
\ No newline at end of file
+`;
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
index de5f4838..12f49e57 100644
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -1,22 +1,21 @@
 import axios from "axios";
-import { useState, useContext, useEffect, FormEvent } from "react";
+import { useState, useContext, useEffect } from "react";
 import { useNavigate, Link } from "react-router-dom";
 import { AuthContext } from "../context/auth";
-import { Box, Typography, TextField, Button, CircularProgress, Grid } from "@mui/material";
+import { Box, Typography, TextField, Button, CircularProgress } from "@mui/material";
 import { useGlobalInfoStore } from "../context/globalInfo";
 import { apiUrl } from "../apiConfig";
+import { useThemeMode } from "../context/theme-provider";
 
 const Login = () => {
-  const [form, setForm] = useState({
-    email: "",
-    password: "",
-  });
+  const [form, setForm] = useState({ email: "", password: "" });
   const [loading, setLoading] = useState(false);
   const { notify } = useGlobalInfoStore();
   const { email, password } = form;
 
   const { state, dispatch } = useContext(AuthContext);
   const { user } = state;
+  const { darkMode } = useThemeMode();
 
   const navigate = useNavigate();
 
@@ -35,10 +34,11 @@ const Login = () => {
     e.preventDefault();
     setLoading(true);
     try {
-      const { data } = await axios.post(`${apiUrl}/auth/login`, {
-        email,
-        password,
-      }, { withCredentials: true });
+      const { data } = await axios.post(
+        `${apiUrl}/auth/login`,
+        { email, password },
+        { withCredentials: true }
+      );
       dispatch({ type: "LOGIN", payload: data });
       notify("success", "Welcome to Maxun!");
       window.localStorage.setItem("user", JSON.stringify(data));
@@ -58,76 +58,112 @@ const Login = () => {
         maxHeight: "100vh",
         mt: 6,
         padding: 4,
+        backgroundColor: darkMode ? "#121212" : "#ffffff",
+        
       }}
     >
-    
-        
+        logo
+        
+          Welcome Back!
+        
+        
+        
+        
-          
-            Don’t have an account?{" "}
-            
-              Register
-            
-          
-        
-        
-     
+          {loading ? (
+            <>
+              
+              Loading
+            
+          ) : (
+            "Login"
+          )}
+        
+        
+          Don’t have an account?{" "}
+          
+            Register
+          
+        
+      
+    
   );
 };
 
diff --git a/src/pages/PageWrappper.tsx b/src/pages/PageWrappper.tsx
index 87157349..5a00cc4a 100644
--- a/src/pages/PageWrappper.tsx
+++ b/src/pages/PageWrappper.tsx
@@ -12,6 +12,7 @@ import Login from './Login';
 import Register from './Register';
 import UserRoute from '../routes/userRoute';
 import { Routes, Route, useNavigate } from 'react-router-dom';
+import { AppBar } from '@mui/material';
 
 export const PageWrapper = () => {
   const [open, setOpen] = useState(false);
@@ -50,7 +51,9 @@ export const PageWrapper = () => {
       
         
           
+         
             {!browserId && }
+           
             
               }>
                 } />
diff --git a/src/pages/Register.tsx b/src/pages/Register.tsx
index ad7fb89f..474f0182 100644
--- a/src/pages/Register.tsx
+++ b/src/pages/Register.tsx
@@ -5,18 +5,17 @@ import { AuthContext } from "../context/auth";
 import { Box, Typography, TextField, Button, CircularProgress } from "@mui/material";
 import { useGlobalInfoStore } from "../context/globalInfo";
 import { apiUrl } from "../apiConfig";
+import { useThemeMode } from "../context/theme-provider";
 
 const Register = () => {
-  const [form, setForm] = useState({
-    email: "",
-    password: "",
-  });
+  const [form, setForm] = useState({ email: "", password: "" });
   const [loading, setLoading] = useState(false);
   const { notify } = useGlobalInfoStore();
   const { email, password } = form;
 
   const { state, dispatch } = useContext(AuthContext);
   const { user } = state;
+  const { darkMode } = useThemeMode();
 
   const navigate = useNavigate();
 
@@ -35,18 +34,14 @@ const Register = () => {
     e.preventDefault();
     setLoading(true);
     try {
-      const { data } = await axios.post(`${apiUrl}/auth/register`, {
-        email,
-        password,
-      });
-
-      console.log(data)
+      const { data } = await axios.post(`${apiUrl}/auth/register`, { email, password });
+      console.log(data);
       dispatch({ type: "LOGIN", payload: data });
       notify("success", "Registration Successful!");
       window.localStorage.setItem("user", JSON.stringify(data));
       navigate("/");
-    } catch (error:any) {
-      notify("error", error.response.data || "Registration Failed. Please try again.");
+    } catch (error: any) {
+      notify("error", error.response?.data || "Registration Failed. Please try again.");
       setLoading(false);
     }
   };
@@ -60,25 +55,38 @@ const Register = () => {
         maxHeight: "100vh",
         mt: 6,
         padding: 4,
+        backgroundColor: darkMode ? "#121212" : "#ffffff",
+       
       }}
     >
       
-        logo
+        logo
         
           Create an Account
         
@@ -91,6 +99,15 @@ const Register = () => {
           margin="normal"
           variant="outlined"
           required
+          sx={{
+            input: { color: darkMode ? "#ffffff" : "#000000" },
+            label: { color: darkMode ? "#bbbbbb" : "#000000" },
+            "& .MuiOutlinedInput-root": {
+              "& fieldset": { borderColor: darkMode ? "#555555" : "#cccccc" },
+              "&:hover fieldset": { borderColor: darkMode ? "#ffffff" : "#000000" },
+              "&.Mui-focused fieldset": { borderColor: "#ff33cc" },
+            },
+          }}
         />
          {
           margin="normal"
           variant="outlined"
           required
+          sx={{
+            input: { color: darkMode ? "#ffffff" : "#000000" },
+            label: { color: darkMode ? "#bbbbbb" : "#000000" },
+            "& .MuiOutlinedInput-root": {
+              "& fieldset": { borderColor: darkMode ? "#555555" : "#cccccc" },
+              "&:hover fieldset": { borderColor: darkMode ? "#ffffff" : "#000000" },
+              "&.Mui-focused fieldset": { borderColor: "#ff33cc" },
+            },
+          }}
         />
         
-        
+        
           Already have an account?{" "}
           
             Login

From f11b36ba4ef04d691e88ef6b979bb143a00fbfa4 Mon Sep 17 00:00:00 2001
From: AmitChauhan63390 
Date: Sun, 8 Dec 2024 05:50:25 +0530
Subject: [PATCH 14/52] forms

---
 src/pages/Register.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/pages/Register.tsx b/src/pages/Register.tsx
index 626921f0..474f0182 100644
--- a/src/pages/Register.tsx
+++ b/src/pages/Register.tsx
@@ -40,10 +40,8 @@ const Register = () => {
       notify("success", "Registration Successful!");
       window.localStorage.setItem("user", JSON.stringify(data));
       navigate("/");
-
     } catch (error: any) {
       notify("error", error.response?.data || "Registration Failed. Please try again.");
-    } 
       setLoading(false);
     }
   };

From 3134edf385742327867514e8ac36ae60591ee356 Mon Sep 17 00:00:00 2001
From: RohitR311 
Date: Wed, 8 Jan 2025 12:58:08 +0530
Subject: [PATCH 15/52] feat: rm ThemeProvider

---
 src/App.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 3b6a1ccd..cdee8d40 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -94,15 +94,15 @@ function App() {
       
     
 
-
+    //  
   );
 }
 

From 0d5ac2b8a123f8a71e7a78f6ebdb01642edf0749 Mon Sep 17 00:00:00 2001
From: RohitR311 
Date: Wed, 8 Jan 2025 13:03:02 +0530
Subject: [PATCH 16/52] feat: add dark mode to project name

---
 src/components/molecules/NavBar.tsx | 19 +------------------
 1 file changed, 1 insertion(+), 18 deletions(-)

diff --git a/src/components/molecules/NavBar.tsx b/src/components/molecules/NavBar.tsx
index 3bb8d758..72c72724 100644
--- a/src/components/molecules/NavBar.tsx
+++ b/src/components/molecules/NavBar.tsx
@@ -1,24 +1,7 @@
 import { useTranslation } from "react-i18next";
 import React, { useState, useContext, useEffect } from 'react';
 import axios from 'axios';
-import { useNavigate } from 'react-router-dom';
-import { 
-  IconButton, 
-  Menu, 
-  MenuItem, 
-  Typography, 
-  Tooltip,
-  Chip
-} from "@mui/material";
-import { 
-  AccountCircle, 
-  Logout, 
-  Clear, 
-  Brightness4, 
-  Brightness7 
-} from "@mui/icons-material";
 import styled from "styled-components";
-
 import { stopRecording } from "../../api/recording";
 import { useGlobalInfoStore } from "../../context/globalInfo";
 import { IconButton, Menu, MenuItem, Typography, Chip, Button, Modal, Tabs, Tab, Box, Snackbar } from "@mui/material";
@@ -305,7 +288,7 @@ export const NavBar: React.FC = ({
           justifyContent: 'flex-start',
         }}>
           
-          
{t('navbar.project_name')}

+          
{t('navbar.project_name')}

           
Date: Wed, 8 Jan 2025 13:09:00 +0530
Subject: [PATCH 17/52] feat: add toggle dark theme button

---
 src/components/molecules/NavBar.tsx | 37 +++++++++++++++--------------
 1 file changed, 19 insertions(+), 18 deletions(-)

diff --git a/src/components/molecules/NavBar.tsx b/src/components/molecules/NavBar.tsx
index 72c72724..01fa01b7 100644
--- a/src/components/molecules/NavBar.tsx
+++ b/src/components/molecules/NavBar.tsx
@@ -4,8 +4,8 @@ import axios from 'axios';
 import styled from "styled-components";
 import { stopRecording } from "../../api/recording";
 import { useGlobalInfoStore } from "../../context/globalInfo";
-import { IconButton, Menu, MenuItem, Typography, Chip, Button, Modal, Tabs, Tab, Box, Snackbar } from "@mui/material";
-import { AccountCircle, Logout, Clear, YouTube, X, Update, Close, Language } from "@mui/icons-material";
+import { IconButton, Menu, MenuItem, Typography, Chip, Button, Modal, Tabs, Tab, Box, Snackbar, Tooltip } from "@mui/material";
+import { AccountCircle, Logout, Clear, YouTube, X, Update, Close, Language, Brightness7, Brightness4 } from "@mui/icons-material";
 import { useNavigate } from 'react-router-dom';
 import { AuthContext } from '../../context/auth';
 import { SaveRecording } from '../molecules/SaveRecording';
@@ -176,21 +176,21 @@ export const NavBar: React.FC = ({
 //     
 //   );
 
-//   const renderThemeToggle = () => (
-//     
-//       
-//         {darkMode ?  : }
-//       
-//     
-//   );
+  const renderThemeToggle = () => (
+    
+      
+        {darkMode ?  : }
+      
+    
+  );
 
 //   const renderRecordingControls = () => (
 //     <>
@@ -502,6 +502,7 @@ export const NavBar: React.FC = ({
                       
                     
                   
+                  {renderThemeToggle()}
                 
               ) : (
                 <>
@@ -587,7 +588,7 @@ export const NavBar: React.FC = ({
                   Deutsch
                 
               
-          )}
+          )}  
       
     
   );

From 65cdef3c3becaef2bf7b55cf0be1af0ef6de4808 Mon Sep 17 00:00:00 2001
From: RohitR311 
Date: Wed, 8 Jan 2025 13:14:41 +0530
Subject: [PATCH 18/52] feat: change comment for button

---
 src/components/molecules/SaveRecording.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/molecules/SaveRecording.tsx b/src/components/molecules/SaveRecording.tsx
index f0919239..1d03bcf4 100644
--- a/src/components/molecules/SaveRecording.tsx
+++ b/src/components/molecules/SaveRecording.tsx
@@ -77,8 +77,8 @@ export const SaveRecording = ({ fileName }: SaveRecordingProps) => {
 
   return (
     

-
+       {/* }
-      
+        {!getText && !getScreenshot && !getList && showCaptureList && } */}
+        
         {getList && (
           <>
             
@@ -533,8 +533,8 @@ export const RightSidePanel: React.FC = ({ onFinishCapture
           
             
               
{t('right_panel.limit.title')}

-
+             {/* 
+              
{t('right_panel.limit.title')}
  */}
             
             
Date: Wed, 8 Jan 2025 13:30:20 +0530
Subject: [PATCH 21/52] feat: reset light theme

---
 src/context/theme-provider.tsx | 81 +++++++++++++++++++++++++---------
 1 file changed, 61 insertions(+), 20 deletions(-)

diff --git a/src/context/theme-provider.tsx b/src/context/theme-provider.tsx
index a6097f95..fdf9fef5 100644
--- a/src/context/theme-provider.tsx
+++ b/src/context/theme-provider.tsx
@@ -4,33 +4,74 @@ import CssBaseline from '@mui/material/CssBaseline';
 
 const lightTheme = createTheme({
   palette: {
-    mode: 'light',
     primary: {
-      main: '#ff00c3', // Pink as the primary color
-    },
-    background: {
-      default: '#ffffff',
-      paper: '#f5f5f5',
-    },
-    text: {
-      primary: '#000000',
+      main: "#ff00c3",
+      contrastText: "#ffffff",
     },
   },
   components: {
-    MuiTabs: {
-      styleOverrides: {
-        indicator: {
-          backgroundColor: '#ff00c3', // Pink for tab indicators
-        },
-      },
-    },
     MuiButton: {
       styleOverrides: {
         root: {
-          backgroundColor: '#ff00c3', // Pink button background
-          color: '#ffffff',
-          '&:hover': {
-            backgroundColor: '#e600b3', // Slightly darker pink on hover
+          // Default styles for all buttons (optional)
+          textTransform: "none",
+        },
+        containedPrimary: {
+          // Styles for 'contained' variant with 'primary' color
+          "&:hover": {
+            backgroundColor: "#ff66d9",
+          },
+        },
+        outlined: {
+          // Apply white background for all 'outlined' variant buttons
+          backgroundColor: "#ffffff",
+          "&:hover": {
+            backgroundColor: "#f0f0f0", // Optional lighter background on hover
+          },
+        },
+      },
+    },
+    MuiLink: {
+      styleOverrides: {
+        root: {
+          "&:hover": {
+            color: "#ff00c3",
+          },
+        },
+      },
+    },
+    MuiIconButton: {
+      styleOverrides: {
+        root: {
+          // '&:hover': {
+          //   color: "#ff66d9",
+          // },
+        },
+      },
+    },
+    MuiTab: {
+      styleOverrides: {
+        root: {
+          textTransform: "none",
+        },
+      },
+    },
+    MuiAlert: {
+      styleOverrides: {
+        standardInfo: {
+          backgroundColor: "#fce1f4",
+          color: "#ff00c3",
+          "& .MuiAlert-icon": {
+            color: "#ff00c3",
+          },
+        },
+      },
+    },
+    MuiAlertTitle: {
+      styleOverrides: {
+        root: {
+          "& .MuiAlert-icon": {
+            color: "#ffffff",
           },
         },
       },

From 70086dd520a21011d2ea6ae457f4c55633666edf Mon Sep 17 00:00:00 2001
From: RohitR311 
Date: Wed, 8 Jan 2025 15:04:05 +0530
Subject: [PATCH 22/52] feat: change dark theme config for navbar

---
 src/context/theme-provider.tsx | 126 +++++++++++++++++++++++++++++----
 1 file changed, 114 insertions(+), 12 deletions(-)

diff --git a/src/context/theme-provider.tsx b/src/context/theme-provider.tsx
index fdf9fef5..d53ced24 100644
--- a/src/context/theme-provider.tsx
+++ b/src/context/theme-provider.tsx
@@ -83,33 +83,135 @@ const darkTheme = createTheme({
   palette: {
     mode: 'dark',
     primary: {
-      main: '#ff00c3', // Pink as the primary color
+      main: "#ff00c3",
+      contrastText: "#ffffff",
     },
     background: {
       default: '#121212',
-      paper: '#1e2124',
+      paper: '#1e1e1e',
     },
     text: {
       primary: '#ffffff',
+      secondary: '#b3b3b3',
     },
   },
   components: {
-    MuiTabs: {
-      styleOverrides: {
-        indicator: {
-          backgroundColor: '#ff00c3', // Pink for tab indicators
-        },
-      },
-    },
     MuiButton: {
       styleOverrides: {
         root: {
-          backgroundColor: '#ff00c3', // Pink button background
+          textTransform: "none",
           color: '#ffffff',
-          '&:hover': {
-            backgroundColor: '#e600b3', // Slightly darker pink on hover
+          '&.MuiButton-outlined': {
+            borderColor: '#ffffff',
+            color: '#ffffff',
+            "&:hover": {
+              borderColor: '#ffffff',
+              backgroundColor: 'rgba(255, 255, 255, 0.08)',
+            },
           },
         },
+        containedPrimary: {
+          "&:hover": {
+            backgroundColor: "#ff66d9",
+          },
+        },
+        outlined: {
+          // Dark mode outlined buttons
+          backgroundColor: '#1e1e1e',
+          borderColor: '#ff00c3',
+          color: '#ff00c3',
+          "&:hover": {
+            backgroundColor: 'rgba(255, 0, 195, 0.08)',
+            borderColor: '#ff66d9',
+          },
+        },
+      },
+    },
+    MuiLink: {
+      styleOverrides: {
+        root: {
+          color: '#ff66d9',
+          "&:hover": {
+            color: "#ff00c3",
+          },
+        },
+      },
+    },
+    MuiIconButton: {
+      styleOverrides: {
+        root: {
+          color: '#ffffff',
+          "&:hover": {
+            backgroundColor: 'rgba(255, 0, 195, 0.08)',
+          },
+        },
+      },
+    },
+    MuiTab: {
+      styleOverrides: {
+        root: {
+          textTransform: "none",
+          color: '#ffffff',
+          "&.Mui-selected": {
+            color: '#ff00c3',
+          },
+        },
+      },
+    },
+    MuiAlert: {
+      styleOverrides: {
+        standardInfo: {
+          backgroundColor: "rgba(255, 0, 195, 0.15)",
+          color: "#ff66d9",
+          "& .MuiAlert-icon": {
+            color: "#ff66d9",
+          },
+        },
+      },
+    },
+    MuiAlertTitle: {
+      styleOverrides: {
+        root: {
+          "& .MuiAlert-icon": {
+            color: "#ff66d9",
+          },
+        },
+      },
+    },
+    // Additional dark mode specific components
+    MuiPaper: {
+      styleOverrides: {
+        root: {
+          backgroundColor: '#1e1e1e',
+        },
+      },
+    },
+    MuiAppBar: {
+      styleOverrides: {
+        root: {
+          backgroundColor: '#121212',
+        },
+      },
+    },
+    MuiDrawer: {
+      styleOverrides: {
+        paper: {
+          backgroundColor: '#121212',
+        },
+      },
+    },
+    MuiTableCell: {
+      styleOverrides: {
+        root: {
+          borderBottom: '1px solid rgba(255, 255, 255, 0.12)',
+        },
+      },
+    },
+    MuiDivider: {
+      styleOverrides: {
+        root: {
+          borderColor: 'rgba(255, 255, 255, 0.12)',
+        },
       },
     },
   },

From eb50f4f1b48939b95a1b0cfcba24044d9e143662 Mon Sep 17 00:00:00 2001
From: RohitR311 
Date: Wed, 8 Jan 2025 16:02:27 +0530
Subject: [PATCH 23/52] feat: rm bg color for right side panel

---
 src/components/organisms/RightSidePanel.tsx | 31 +++++++++++----------
 1 file changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/components/organisms/RightSidePanel.tsx b/src/components/organisms/RightSidePanel.tsx
index 3efb38d7..2eb41947 100644
--- a/src/components/organisms/RightSidePanel.tsx
+++ b/src/components/organisms/RightSidePanel.tsx
@@ -468,15 +468,16 @@ export const RightSidePanel: React.FC = ({ onFinishCapture
   return (
      = ({ onFinishCapture
         Last action: {` ${lastAction}`}
        */}
       
-      
-        {!getText && !getScreenshot && !getList && showCaptureList && }
-       {/* 
-      
-        {!getText && !getScreenshot && !getList && showCaptureList && } */}
+      {/*  */}
+        {/* {!getText && !getScreenshot && !getList && showCaptureList && } */}
+        {/*  */}
+       
+        {!getText && !getScreenshot && !getList && showCaptureList && } 
         
         {getList && (
           <>
@@ -586,9 +587,9 @@ export const RightSidePanel: React.FC = ({ onFinishCapture
             
           
         )}
-        {!getText && !getScreenshot && !getList && showCaptureText && }
+        {/* {!getText && !getScreenshot && !getList && showCaptureText && } */}
 
-//         {!getText && !getScreenshot && !getList && showCaptureText && }
+        {!getText && !getScreenshot && !getList && showCaptureText && }
         {getText &&
           <>
             
@@ -597,8 +598,8 @@ export const RightSidePanel: React.FC = ({ onFinishCapture
             
           
         }
-        {!getText && !getScreenshot && !getList && showCaptureScreenshot && }
-//         {!getText && !getScreenshot && !getList && showCaptureScreenshot && }
+        {/* {!getText && !getScreenshot && !getList && showCaptureScreenshot && } */}
+        {!getText && !getScreenshot && !getList && showCaptureScreenshot && }
         {getScreenshot && (
           
             

From f9644d3d636e2cc61298e870b28e52437ac02b5a Mon Sep 17 00:00:00 2001
From: RohitR311 
Date: Wed, 8 Jan 2025 16:42:57 +0530
Subject: [PATCH 24/52] feat: change finish button color

---
 src/components/molecules/SaveRecording.tsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/molecules/SaveRecording.tsx b/src/components/molecules/SaveRecording.tsx
index 1d03bcf4..38720d07 100644
--- a/src/components/molecules/SaveRecording.tsx
+++ b/src/components/molecules/SaveRecording.tsx
@@ -80,7 +80,19 @@ export const SaveRecording = ({ fileName }: SaveRecordingProps) => {
        {/* 
 

From afcd69b61788d254b4035abdcc85e50473d37818 Mon Sep 17 00:00:00 2001
From: RohitR311 
Date: Wed, 8 Jan 2025 16:43:19 +0530
Subject: [PATCH 25/52] feat: change finish button border color

---
 src/components/molecules/SaveRecording.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/molecules/SaveRecording.tsx b/src/components/molecules/SaveRecording.tsx
index 38720d07..80685841 100644
--- a/src/components/molecules/SaveRecording.tsx
+++ b/src/components/molecules/SaveRecording.tsx
@@ -87,6 +87,7 @@ export const SaveRecording = ({ fileName }: SaveRecordingProps) => {
         sx={{ 
           marginRight: '20px',
           color: '#00c853 !important',
+          borderColor: '#00c853 !important',
           '&:hover': {
             borderColor: '#00c853 !important',
           }

From 5b891114311e5670ac52d3d5f9312ac89b074c25 Mon Sep 17 00:00:00 2001
From: RohitR311 
Date: Wed, 8 Jan 2025 16:44:40 +0530
Subject: [PATCH 26/52] feat: change navbar icons styling

---
 src/components/molecules/BrowserNavBar.tsx | 39 ++++++++++------------
 1 file changed, 18 insertions(+), 21 deletions(-)

diff --git a/src/components/molecules/BrowserNavBar.tsx b/src/components/molecules/BrowserNavBar.tsx
index d3cb781f..0f821d56 100644
--- a/src/components/molecules/BrowserNavBar.tsx
+++ b/src/components/molecules/BrowserNavBar.tsx
@@ -13,37 +13,34 @@ import { getCurrentUrl } from "../../api/recording";
 import { useGlobalInfoStore } from '../../context/globalInfo';
 import { useThemeMode } from '../../context/theme-provider';
 
+// const StyledNavBar = styled.div<{ browserWidth: number; isDarkMode: boolean }>`
+//   display: flex;
+//   align-items: center;
+//   padding: 10px 20px;
+//   background-color: ${({ isDarkMode }) => (isDarkMode ? '#2C2F33' : '#F5F5F5')};
+//   width: ${({ browserWidth }) => `${browserWidth}px`};
+//   border-radius: 0px 0px 8px 8px;
+//   box-shadow: ${({ isDarkMode }) => (isDarkMode ? '0px 2px 10px rgba(0, 0, 0, 0.2)' : '0px 2px 10px rgba(0, 0, 0, 0.1)')};
+//   transition: background-color 0.3s ease, box-shadow 0.3s ease;
+//   margin-bottom: 15px;
+// `;
+
 const StyledNavBar = styled.div<{ browserWidth: number; isDarkMode: boolean }>`
-  display: flex;
-  align-items: center;
-  padding: 10px 20px;
-  background-color: ${({ isDarkMode }) => (isDarkMode ? '#2C2F33' : '#F5F5F5')};
-  width: ${({ browserWidth }) => `${browserWidth}px`};
-  border-radius: 0px 0px 8px 8px;
-  box-shadow: ${({ isDarkMode }) => (isDarkMode ? '0px 2px 10px rgba(0, 0, 0, 0.2)' : '0px 2px 10px rgba(0, 0, 0, 0.1)')};
-  transition: background-color 0.3s ease, box-shadow 0.3s ease;
-  margin-bottom: 15px;
+    display: flex;
+    padding: 12px 0px;
+    background-color: ${({ isDarkMode }) => (isDarkMode ? '#2C2F33' : '#f6f6f6')};
+    width: ${({ browserWidth }) => browserWidth}px;
+    border-radius: 0px 5px 0px 0px;
 `;
 
 const IconButton = styled(NavBarButton)<{ mode: string }>`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 8px;
-  margin-right: 12px;
-  background-color: ${({ mode }) => (mode === 'dark' ? '#40444B' : '#E0E0E0')};
-  border-radius: 50%;
+  background-color: ${({ mode }) => (mode === 'dark' ? '#2C2F33' : '#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')};
   }
-
-  &:active {
-    transform: scale(0.95);
-  }
 `;
 
 interface NavBarProps {

From cefa5dfa108b819e1b5c8e18c2d228c2ec292390 Mon Sep 17 00:00:00 2001
From: RohitR311 
Date: Wed, 8 Jan 2025 16:50:15 +0530
Subject: [PATCH 27/52] feat: change bg color on hover

---
 src/components/molecules/SaveRecording.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/molecules/SaveRecording.tsx b/src/components/molecules/SaveRecording.tsx
index 80685841..51b4143b 100644
--- a/src/components/molecules/SaveRecording.tsx
+++ b/src/components/molecules/SaveRecording.tsx
@@ -83,13 +83,14 @@ export const SaveRecording = ({ fileName }: SaveRecordingProps) => {
       
            setOpenModal(false)} modalStyle={modalStyle}>

From 843db677731e74611c448833e3f90f0c7ea2e6a2 Mon Sep 17 00:00:00 2001
From: RohitR311 
Date: Wed, 8 Jan 2025 17:44:17 +0530
Subject: [PATCH 29/52] feat: add styling to right side panel buttons

---
 src/components/organisms/RightSidePanel.tsx | 103 ++++++++++++++++++--
 1 file changed, 97 insertions(+), 6 deletions(-)

diff --git a/src/components/organisms/RightSidePanel.tsx b/src/components/organisms/RightSidePanel.tsx
index 2eb41947..30d976d9 100644
--- a/src/components/organisms/RightSidePanel.tsx
+++ b/src/components/organisms/RightSidePanel.tsx
@@ -500,6 +500,14 @@ export const RightSidePanel: React.FC = ({ onFinishCapture
                 
@@ -508,13 +516,32 @@ export const RightSidePanel: React.FC = ({ onFinishCapture
                 variant="outlined"
                 onClick={handleConfirmListCapture}
                 disabled={captureStage === 'initial' ? isConfirmCaptureDisabled : hasUnconfirmedListTextFields}
+                sx={{ 
+                  color: '#ff00c3 !important',
+                  borderColor: '#ff00c3 !important',
+                  '&:hover': {
+                    borderColor: '#ff00c3 !important',
+                    backgroundColor: 'whitesmoke !important',
+                  }
+                }} 
               >
                 {captureStage === 'initial' ? t('right_panel.buttons.confirm_capture') :
                 captureStage === 'pagination' ? t('right_panel.buttons.confirm_pagination') :
                 captureStage === 'limit' ? t('right_panel.buttons.confirm_limit') : 
                 t('right_panel.buttons.finish_capture')}
               
-              
             
@@ -523,11 +550,75 @@ export const RightSidePanel: React.FC = ({ onFinishCapture
         {showPaginationOptions && (
           
             {t('right_panel.pagination.title')}
-            
-            
-            
-            
-            
+            
+            
+            
+            
+            
           
         )}
         {showLimitOptions && (

From 8ea90a7c2a2a3ac5d4d29a061eac2efdf882e7c4 Mon Sep 17 00:00:00 2001
From: RohitR311 
Date: Wed, 8 Jan 2025 17:47:11 +0530
Subject: [PATCH 30/52] feat: add style to select attribute button

---
 src/components/organisms/BrowserWindow.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/components/organisms/BrowserWindow.tsx b/src/components/organisms/BrowserWindow.tsx
index 409079a9..9e8902ba 100644
--- a/src/components/organisms/BrowserWindow.tsx
+++ b/src/components/organisms/BrowserWindow.tsx
@@ -403,6 +403,14 @@ export const BrowserWindow = () => {
                                             overflow: 'hidden',
                                             padding: '5px 10px',
                                         }}
+                                        sx={{ 
+                                            color: '#ff00c3 !important',
+                                            borderColor: '#ff00c3 !important',
+                                            '&:hover': {
+                                                borderColor: '#ff00c3 !important',
+                                                backgroundColor: 'whitesmoke !important',
+                                            }
+                                        }}
                                     >
                                         
Date: Wed, 8 Jan 2025 17:59:36 +0530
Subject: [PATCH 31/52] feat: add default bg color on selection

---
 src/components/organisms/RightSidePanel.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/organisms/RightSidePanel.tsx b/src/components/organisms/RightSidePanel.tsx
index 30d976d9..430377d8 100644
--- a/src/components/organisms/RightSidePanel.tsx
+++ b/src/components/organisms/RightSidePanel.tsx
@@ -556,7 +556,7 @@ export const RightSidePanel: React.FC = ({ onFinishCapture
               sx={{ 
                 color: '#ff00c3 !important',
                 borderColor: '#ff00c3 !important',
-                backgroundColor: paginationType === 'clickNext' && isDarkMode ? 'whitesmoke !important' : 'transparent !important',
+                backgroundColor: paginationType === 'clickNext' ? 'whitesmoke !important' : 'transparent !important',
                 '&:hover': {
                   borderColor: '#ff00c3 !important',
                   backgroundColor: 'whitesmoke !important',
@@ -570,7 +570,7 @@ export const RightSidePanel: React.FC = ({ onFinishCapture
               sx={{ 
                 color: '#ff00c3 !important',
                 borderColor: '#ff00c3 !important',
-                backgroundColor: paginationType === 'clickLoadMore' && isDarkMode ? 'whitesmoke !important' : 'transparent !important',
+                backgroundColor: paginationType === 'clickLoadMore' ? 'whitesmoke !important' : 'transparent !important',
                 '&:hover': {
                   borderColor: '#ff00c3 !important',
                   backgroundColor: 'whitesmoke !important',
@@ -584,7 +584,7 @@ export const RightSidePanel: React.FC = ({ onFinishCapture
               sx={{ 
                 color: '#ff00c3 !important',
                 borderColor: '#ff00c3 !important',
-                backgroundColor: paginationType === 'scrollDown' && isDarkMode ? 'whitesmoke !important' : 'transparent !important',
+                backgroundColor: paginationType === 'scrollDown' ? 'whitesmoke !important' : 'transparent !important',
                 '&:hover': {
                   borderColor: '#ff00c3 !important',
                   backgroundColor: 'whitesmoke !important',
@@ -598,7 +598,7 @@ export const RightSidePanel: React.FC = ({ onFinishCapture
               sx={{ 
                 color: '#ff00c3 !important',
                 borderColor: '#ff00c3 !important',
-                backgroundColor: paginationType === 'scrollUp' && isDarkMode ? 'whitesmoke !important' : 'transparent !important',
+                backgroundColor: paginationType === 'scrollUp' ? 'whitesmoke !important' : 'transparent !important',
                 '&:hover': {
                   borderColor: '#ff00c3 !important',
                   backgroundColor: 'whitesmoke !important',
@@ -612,7 +612,7 @@ export const RightSidePanel: React.FC = ({ onFinishCapture
               sx={{ 
                 color: '#ff00c3 !important',
                 borderColor: '#ff00c3 !important',
-                backgroundColor: paginationType === 'none' && isDarkMode ? 'whitesmoke !important' : 'transparent !important',
+                backgroundColor: paginationType === 'none' ? 'whitesmoke !important' : 'transparent !important',
                 '&:hover': {
                   borderColor: '#ff00c3 !important',
                   backgroundColor: 'whitesmoke !important',

From 8cb72691d1b688e743c290bd764b4278c1aab38a Mon Sep 17 00:00:00 2001
From: RohitR311 
Date: Wed, 8 Jan 2025 18:06:18 +0530
Subject: [PATCH 32/52] feat: add styling for cancel button

---
 src/components/molecules/BrowserRecordingSave.tsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/components/molecules/BrowserRecordingSave.tsx b/src/components/molecules/BrowserRecordingSave.tsx
index f2ededea..4eda4ec4 100644
--- a/src/components/molecules/BrowserRecordingSave.tsx
+++ b/src/components/molecules/BrowserRecordingSave.tsx
@@ -63,7 +63,17 @@ const BrowserRecordingSave = () => {
                 
-                
               

From e0c3cf7f55970098378d2d85aedd03b113ad357e Mon Sep 17 00:00:00 2001
From: RohitR311 
Date: Wed, 8 Jan 2025 18:11:23 +0530
Subject: [PATCH 33/52] feat: add styling for cancel button

---
 src/components/molecules/ScheduleSettings.tsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/molecules/ScheduleSettings.tsx b/src/components/molecules/ScheduleSettings.tsx
index 917696c9..95282163 100644
--- a/src/components/molecules/ScheduleSettings.tsx
+++ b/src/components/molecules/ScheduleSettings.tsx
@@ -273,7 +273,19 @@ export const ScheduleSettingsModal = ({ isOpen, handleStart, handleClose, initia
                 
-                
               

From baf0845f67bb9fa1bd6d01c0831889b4092dec87 Mon Sep 17 00:00:00 2001
From: RohitR311 
Date: Wed, 8 Jan 2025 18:11:43 +0530
Subject: [PATCH 34/52] feat: add styling for cancel button

---
 src/components/molecules/RobotEdit.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/components/molecules/RobotEdit.tsx b/src/components/molecules/RobotEdit.tsx
index 6547d93b..30878f77 100644
--- a/src/components/molecules/RobotEdit.tsx
+++ b/src/components/molecules/RobotEdit.tsx
@@ -179,6 +179,14 @@ export const RobotEditModal = ({ isOpen, handleStart, handleClose, initialSettin
                                         color="primary" 
                                         variant="outlined" 
                                         style={{ marginLeft: '10px' }}
+                                        sx={{ 
+                                            color: '#ff00c3 !important',
+                                            borderColor: '#ff00c3 !important',
+                                            '&:hover': {
+                                              borderColor: '#ff00c3 !important',
+                                              backgroundColor: 'whitesmoke !important',
+                                            }
+                                        }} 
                                     >
                                         {t('robot_edit.cancel')}
                                     

From 9210d2f9ee579b78f871eb699cf2c21c2c240586 Mon Sep 17 00:00:00 2001
From: RohitR311 
Date: Wed, 8 Jan 2025 18:12:00 +0530
Subject: [PATCH 35/52] feat: add styling for cancel button

---
 src/components/molecules/RobotDuplicate.tsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/molecules/RobotDuplicate.tsx b/src/components/molecules/RobotDuplicate.tsx
index ce3ee5ca..68711aa0 100644
--- a/src/components/molecules/RobotDuplicate.tsx
+++ b/src/components/molecules/RobotDuplicate.tsx
@@ -152,7 +152,19 @@ export const RobotDuplicationModal = ({ isOpen, handleStart, handleClose, initia
                                     
-                                    
                                 

From 94bb35cc8c0282adb5f5a061e909b4f91db8ed12 Mon Sep 17 00:00:00 2001
From: RohitR311 
Date: Wed, 8 Jan 2025 19:58:50 +0530
Subject: [PATCH 36/52] feat: add theme icon and change colors

---
 src/components/molecules/NavBar.tsx | 174 ++--------------------------
 1 file changed, 10 insertions(+), 164 deletions(-)

diff --git a/src/components/molecules/NavBar.tsx b/src/components/molecules/NavBar.tsx
index 01fa01b7..c68873ff 100644
--- a/src/components/molecules/NavBar.tsx
+++ b/src/components/molecules/NavBar.tsx
@@ -103,79 +103,6 @@ export const NavBar: React.FC = ({
     localStorage.setItem("language", lang);
   };
 
-//   const renderBrandSection = () => (
-//     
-//       
-//       Maxun
-//       
-//     
-//   );
-
-//   const renderSocialButtons = () => (
-//     <>
-//       
-//         
-//       
-//