From f71822f844e4b88a27c47b613da6589d734dc32d Mon Sep 17 00:00:00 2001
From: AmitChauhan63390 <amit63390@gmail.com>
Date: Sun, 24 Nov 2024 00:49:39 +0530
Subject: [PATCH] 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<LoaderProps> = ({ text }) => {
-
   const { darkMode } = useThemeMode();
 
-  
   return (
     <Stack direction="column" sx={{ margin: "30px 0px", alignItems: "center" }}>
       <DotsContainer>
@@ -29,14 +26,13 @@ interface StyledParagraphProps {
   darkMode: boolean;
 }
 
-
-
 const StyledParagraph = styled.p<StyledParagraphProps>`
   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) => {
             <canvas
                 tabIndex={0}
                 ref={canvasRef}
-                height={400}
+                height={1000}
                 width={900}
                 style={{ display: 'block' }}
             />
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<CustomBoxContainerProps>`
   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<CustomBoxContainerProps>`
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<NavBarProps> = ({
   browserWidth,
   handleUrlChanged,
 }) => {
+  const isDarkMode = useThemeMode().darkMode;
 
   const { socket } = useSocketStore();
   const { recordingUrl, setRecordingUrl } = useGlobalInfoStore();
@@ -67,7 +92,7 @@ const BrowserNavBar: FC<NavBarProps> = ({
         socket.off('urlChanged', handleCurrentUrlChange);
       }
     }
-  }, [socket, handleCurrentUrlChange])
+  }, [socket, handleCurrentUrlChange]);
 
   const addAddress = (address: string) => {
     if (socket) {
@@ -78,38 +103,41 @@ const BrowserNavBar: FC<NavBarProps> = ({
   };
 
   return (
-    <StyledNavBar browserWidth={900}>
-      <NavBarButton
+    <StyledNavBar browserWidth={browserWidth} isDarkMode={isDarkMode}>
+      <IconButton
         type="button"
         onClick={() => {
           socket?.emit('input:back');
         }}
         disabled={false}
+        mode={isDarkMode ? 'dark' : 'light'}
       >
         <ArrowBackIcon />
-      </NavBarButton>
+      </IconButton>
 
-      <NavBarButton
+      <IconButton
         type="button"
         onClick={() => {
           socket?.emit('input:forward');
         }}
         disabled={false}
+        mode={isDarkMode ? 'dark' : 'light'}
       >
         <ArrowForwardIcon />
-      </NavBarButton>
+      </IconButton>
 
-      <NavBarButton
+      <IconButton
         type="button"
         onClick={() => {
           if (socket) {
-            handleRefresh()
+            handleRefresh();
           }
         }}
         disabled={false}
+        mode={isDarkMode ? 'dark' : 'light'}
       >
         <ReplayIcon />
-      </NavBarButton>
+      </IconButton>
 
       <UrlForm
         currentAddress={recordingUrl}
diff --git a/src/components/molecules/BrowserRecordingSave.tsx b/src/components/molecules/BrowserRecordingSave.tsx
index 03758717..09c32f5c 100644
--- a/src/components/molecules/BrowserRecordingSave.tsx
+++ b/src/components/molecules/BrowserRecordingSave.tsx
@@ -24,18 +24,19 @@ const BrowserRecordingSave = () => {
     <Grid container>
       <Grid item xs={12} md={3} lg={3}>
         <div style={{
-          marginTop: '12px',
+          
           //  marginLeft: '10px',
           color: 'white',
           position: 'absolute',
           background: '#ff00c3',
           border: 'none',
-          borderRadius: '5px',
+          borderRadius: '0px 0px 8px 8px',
           padding: '7.5px',
-          width: 'calc(100% - 20px)',  // Ensure it takes full width but with padding
+          width: '100%',  // Ensure it takes full width but with padding
           overflow: 'hidden',
           display: 'flex',
           justifyContent: 'space-between',
+          height:"48px"
         }}>
           <Button onClick={() => setOpenModal(true)} variant="outlined" style={{ marginLeft: "25px" }} size="small" color="error">
             Discard
diff --git a/src/components/molecules/BrowserTabs.tsx b/src/components/molecules/BrowserTabs.tsx
index 0ee05dfc..09396ce8 100644
--- a/src/components/molecules/BrowserTabs.tsx
+++ b/src/components/molecules/BrowserTabs.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { Box, IconButton, Tab, Tabs } from "@mui/material";
-import { AddButton } from "../atoms/buttons/AddButton";
 import { useBrowserDimensionsStore } from "../../context/browserDimensions";
 import { Close } from "@mui/icons-material";
+import { useThemeMode } from '../../context/theme-provider';
 
 interface BrowserTabsProp {
   tabs: string[],
@@ -28,18 +28,34 @@ export const BrowserTabs = (
       handleChangeIndex(newValue);
     }
   };
+  const isDarkMode = useThemeMode().darkMode;
 
   return (
     <Box sx={{
-      width: 800,
       display: 'flex',
       overflow: 'auto',
       alignItems: 'center',
+      backgroundColor: `${isDarkMode? '#1e2124' : 'white'}`, // Dark background synced with BrowserNavbar
+      padding: '8px',
+      borderRadius: '8px 8px 0px 0px',
+      boxShadow: '0px 4px 10px rgba(0, 0, 0, 0.3)', // Synced shadow style
+      width: '900px', // Fixed width
     }}>
-      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+      <Box sx={{ borderColor: '#333' }}> {/* Synced border color */}
         <Tabs
           value={tabIndex}
           onChange={handleChange}
+          variant="scrollable"
+          scrollButtons="auto"
+          sx={{
+            backgroundColor: `${isDarkMode? '#1e2124' : 'white'}`, // Dark background synced with BrowserNavbar
+            minHeight: '48px',
+            '& .MuiTabs-indicator': {
+              backgroundColor: '#ff00c3', // Synced subtle indicator color
+              height: '3px',
+              borderRadius: '3px 3px 0 0',
+            },
+          }}
         >
           {tabs.map((tab, index) => {
             return (
@@ -47,8 +63,19 @@ export const BrowserTabs = (
                 key={`tab-${index}`}
                 id={`tab-${index}`}
                 sx={{
-                  background: 'white',
-                  borderRadius: '5px 5px 0px 0px'
+                  backgroundColor: '#f5f5f5', // Synced dark background for tabs
+                  borderRadius: '8px 8px 0px 0px',
+                  marginRight: '8px',
+                  minHeight: '48px',
+                  textTransform: 'none',
+                  fontWeight: '500',
+                  fontSize: '14px',
+                  color: 'black', // Synced light gray text color
+                  
+                  '&.Mui-selected': {
+                    backgroundColor:` ${isDarkMode?"#2a2a2a":"#f5f5f5"}`, // Synced selected tab color
+                    color: '#ff00c3', // Slightly lighter text when selected
+                  },
                 }}
                 icon={<CloseButton closeTab={() => {
                   tabWasClosed = true;
@@ -60,15 +87,25 @@ export const BrowserTabs = (
                   if (!tabWasClosed) {
                     handleTabChange(index)
                   }
-                }
-                }
+                }}
                 label={tab}
               />
             );
           })}
         </Tabs>
       </Box>
-      {/* <AddButton handleClick={handleAddNewTab} style={{ background: 'white' }} /> */}
+      {/* <IconButton
+        aria-label="add tab"
+        onClick={handleAddNewTab}
+        sx={{
+          backgroundColor: '#2A2A2A', // Synced dark button background
+          color: '#CFCFCF', // Synced light text color
+          marginLeft: '8px',
+          '&:hover': { backgroundColor: '#3A3A3A' }, // Synced hover color
+        }}
+      >
+        +
+      </IconButton> */}
     </Box>
   );
 }
@@ -86,12 +123,22 @@ const CloseButton = ({ closeTab, disabled }: CloseButtonProps) => {
       onClick={closeTab}
       disabled={disabled}
       sx={{
-        height: '34px',
-        '&:hover': { color: 'white', backgroundColor: '#1976d2' }
+        height: '28px',
+        width: '28px',
+        padding: '4px',
+        backgroundColor: '#3A3A3A', // Synced dark gray background
+        borderRadius: '50%',
+        '&:hover': {
+          backgroundColor: '#505050', // Synced hover color for close button
+          color: '#FFFFFF',
+        },
+        '&.Mui-disabled': {
+          opacity: 0.4, // Lower opacity for disabled state
+        },
+        transition: 'background-color 0.3s ease, color 0.3s ease',
       }}
-      component="span"
     >
-      <Close />
+      <Close fontSize="small" />
     </IconButton>
   );
 }
diff --git a/src/components/molecules/InterpretationLog.tsx b/src/components/molecules/InterpretationLog.tsx
index 24ba848b..c384ca25 100644
--- a/src/components/molecules/InterpretationLog.tsx
+++ b/src/components/molecules/InterpretationLog.tsx
@@ -17,6 +17,7 @@ import StorageIcon from '@mui/icons-material/Storage';
 import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
 import { SidePanelHeader } from './SidePanelHeader';
 import { useGlobalInfoStore } from '../../context/globalInfo';
+import { useThemeMode } from '../../context/theme-provider';
 
 interface InterpretationLogProps {
   isOpen: boolean;
@@ -113,6 +114,8 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
     }
   }, [hasScrapeListAction, hasScrapeSchemaAction, hasScreenshotAction, setIsOpen]);
 
+  const isDarkMode = useThemeMode();
+
   return (
     <Grid container>
       <Grid item xs={12} md={9} lg={9}>
@@ -121,7 +124,9 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
           variant="contained"
           color="primary"
           sx={{
-            marginTop: '10px',
+
+            borderRadius: ' 0 0 10px 10px',
+           
             color: 'white',
             position: 'absolute',
             background: '#ff00c3',
@@ -145,8 +150,8 @@ export const InterpretationLog: React.FC<InterpretationLogProps> = ({ isOpen, se
           onOpen={toggleDrawer(true)}
           PaperProps={{
             sx: {
-              background: 'white',
-              color: 'black',
+              background: `${isDarkMode ? '#1e2124' : 'white'}`,
+              color: `${isDarkMode ? 'white' : 'black'}`,
               padding: '10px',
               height: 500,
               width: width - 10,
diff --git a/src/components/molecules/NavBar.tsx b/src/components/molecules/NavBar.tsx
index 11a76115..d8831ea6 100644
--- a/src/components/molecules/NavBar.tsx
+++ b/src/components/molecules/NavBar.tsx
@@ -1,15 +1,25 @@
 import React, { useState, useContext } 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, Avatar, Tooltip,Chip } from "@mui/material";
-import { AccountCircle, Logout, Clear, Brightness4, Brightness7 } from "@mui/icons-material";
-
-import { AccountCircle, Logout, Clear } 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';
@@ -23,13 +33,11 @@ interface NavBarProps {
 }
 
 export const NavBar: React.FC<NavBarProps> = ({ recordingName, isRecording }) => {
-  
   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 | HTMLElement>(null);
 
   const handleMenuOpen = (event: React.MouseEvent<HTMLElement>) => {
@@ -57,99 +65,167 @@ export const NavBar: React.FC<NavBarProps> = ({ recordingName, isRecording }) =>
     navigate('/');
   };
 
+  const renderBrandSection = () => (
+    <BrandContainer>
+      <LogoImage src={MaxunLogo} alt="Maxun Logo" />
+      <ProjectName mode={darkMode ? 'dark' : 'light'}>Maxun</ProjectName>
+      <Chip 
+        label="beta" 
+        variant="outlined" 
+        sx={{ 
+          marginTop: '10px',
+          borderColor: '#ff00c3',
+          color: '#ff00c3'
+        }} 
+      />
+    </BrandContainer>
+  );
+
+  const renderSocialButtons = () => (
+    <>
+      <IconButton
+        component="a"
+        href="https://discord.gg/5GbPjBUkws"
+        target="_blank"
+        rel="noopener noreferrer"
+        sx={{
+          ...styles.socialButton,
+          color: darkMode ? '#ffffff' : '#333333',
+          '&:hover': {
+            color: '#ff00c3'
+          }
+        }}
+      >
+        <DiscordIcon sx={{ marginRight: '5px' }} />
+      </IconButton>
+      <iframe 
+        src="https://ghbtns.com/github-btn.html?user=getmaxun&repo=maxun&type=star&count=true&size=large" 
+        frameBorder="0" 
+        scrolling="0" 
+        width="170" 
+        height="30" 
+        title="GitHub"
+      />
+    </>
+  );
+
+  const renderUserMenu = () => (
+    <>
+      <IconButton 
+        onClick={handleMenuOpen} 
+        sx={styles.userButton(darkMode)}
+      >
+        <AccountCircle sx={{ marginRight: '5px' }} />
+        <Typography variant="body1">{user?.email}</Typography>
+      </IconButton>
+      <Menu
+        anchorEl={anchorEl}
+        open={Boolean(anchorEl)}
+        onClose={handleMenuClose}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+        transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+        PaperProps={{
+          sx: {
+            backgroundColor: darkMode ? '#1e2124' : '#ffffff',
+            color: darkMode ? '#ffffff' : '#333333'
+          }
+        }}
+      >
+        <MenuItem onClick={() => { handleMenuClose(); logout(); }}>
+          <Logout sx={{ marginRight: '5px' }} /> Logout
+        </MenuItem>
+      </Menu>
+    </>
+  );
+
+  const renderThemeToggle = () => (
+    <Tooltip title="Toggle light/dark theme">
+      <IconButton 
+        onClick={toggleTheme} 
+        sx={{
+          color: darkMode ? '#ffffff' : '#333333',
+          '&:hover': {
+            color: '#ff00c3'
+          }
+        }}
+      >
+        {darkMode ? <Brightness7 /> : <Brightness4 />}
+      </IconButton>
+    </Tooltip>
+  );
+
+  const renderRecordingControls = () => (
+    <>
+      <IconButton 
+        onClick={goToMainMenu} 
+        sx={styles.discardButton}
+      >
+        <Clear sx={{ marginRight: '5px' }} />
+        Discard
+      </IconButton>
+      <SaveRecording fileName={recordingName} />
+    </>
+  );
+
   return (
     <NavBarWrapper mode={darkMode ? 'dark' : 'light'}>
-      <div style={{ display: 'flex', justifyContent: 'flex-start' }}>
-        <img src={MaxunLogo} width={45} height={40} style={{ borderRadius: '5px', margin: '5px 0px 5px 15px' }} />
-
-        <div style={{ padding: '11px' }}><ProjectName>Maxun</ProjectName></div>
-        <Chip label="beta" color="primary" variant="outlined" sx={{ marginTop: '10px' }} />
-      </div>
-      {
-        user ? (
-          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end' }}>
-            {!isRecording ? (
-              <>
-                <IconButton
-                  component="a"
-                  href="https://discord.gg/5GbPjBUkws"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  sx={{
-                    display: 'flex',
-                    alignItems: 'center',
-                    borderRadius: '5px',
-                    padding: '8px',
-                    marginRight: '30px',
-                  }}
-                >
-                  <DiscordIcon sx={{ marginRight: '5px' }} />
-                </IconButton>
-                <iframe src="https://ghbtns.com/github-btn.html?user=getmaxun&repo=maxun&type=star&count=true&size=large" frameBorder="0" scrolling="0" width="170" height="30" title="GitHub"></iframe>
-                <IconButton onClick={handleMenuOpen} sx={{
-
-                  display: 'flex',
-                  alignItems: 'center',
-                  borderRadius: '5px',
-                  padding: '8px',
-
-                }}
-              >
-                <DiscordIcon sx={{ marginRight: '5px' }} />
-              </IconButton>
-              <iframe src="https://ghbtns.com/github-btn.html?user=getmaxun&repo=maxun&type=star&count=true&size=large" frameBorder="0" scrolling="0" width="170" height="30" title="GitHub"></iframe>
-              <IconButton onClick={handleMenuOpen} sx={{
-                display: 'flex',
-                alignItems: 'center',
-                borderRadius: '5px',
-                padding: '8px',
-                marginRight: '10px',
-                '&:hover': { backgroundColor: darkMode ? '#333':'#F5F5F5', color: '#ff00c3' }
-              }}>
-                <AccountCircle sx={{ marginRight: '5px' }} />
-                <Typography variant="body1">{user.email}</Typography>
-              </IconButton>
-              <Menu
-                anchorEl={anchorEl}
-                open={Boolean(anchorEl)}
-                onClose={handleMenuClose}
-                anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
-                transformOrigin={{ vertical: 'top', horizontal: 'right' }}
-              >
-                <MenuItem onClick={() => { handleMenuClose(); logout(); }}>
-                  <Logout sx={{ marginRight: '5px' }} /> Logout
-                </MenuItem>
-              </Menu>
-              {/* Theme Toggle Button */}
-              <Tooltip title="Toggle light/dark theme">
-                <IconButton onClick={toggleTheme} color="inherit">
-                  {darkMode ? <Brightness7 /> : <Brightness4 />}
-
-                </IconButton>
-              </Tooltip>
+      {renderBrandSection()}
+      {user && (
+        <ControlsContainer>
+          {!isRecording ? (
+            <>
+              {renderSocialButtons()}
+              {renderUserMenu()}
+              {renderThemeToggle()}
             </>
           ) : (
-            <>
-              <IconButton onClick={goToMainMenu} sx={{
-                borderRadius: '5px',
-                padding: '8px',
-                background: 'red',
-                color: 'white',
-                marginRight: '10px',
-                '&:hover': { color: 'white', backgroundColor: 'red' }
-              }}>
-                <Clear sx={{ marginRight: '5px' }} />
-                Discard
-              </IconButton>
-              <SaveRecording fileName={recordingName} />
-            </>
+            renderRecordingControls()
           )}
-        </div>
-      ) : null}
+        </ControlsContainer>
+      )}
     </NavBarWrapper>
   );
 };
 
+// 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
     <Box sx={{ width: '100%' }}>
       <TabContext value={tab}>
         <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
-          <Tabs value={tab} onChange={(e, newTab) => setTab(newTab)} aria-label="run-content-tabs">
-            <Tab label="Output Data" value='output' />
-            <Tab label="Log" value='log' />
-          </Tabs>
+        <Tabs 
+  value={tab} 
+  onChange={(e, newTab) => 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',
+      },
+    }
+  }}
+>
+  <Tab 
+    label="Output Data" 
+    value='output' 
+    sx={{
+      color: (theme) => theme.palette.mode === 'dark' ? '#fff' : '#000',
+      '&:hover': {
+        color: '#FF00C3'
+      },
+      '&.Mui-selected': {
+        color: '#FF00C3',
+      }
+    }} 
+  />
+  <Tab 
+    label="Log" 
+    value='log' 
+    sx={{
+      color: (theme) => theme.palette.mode === 'dark' ? '#fff' : '#000',
+      '&:hover': {
+        color: '#FF00C3'
+      },
+      '&.Mui-selected': {
+        color: '#FF00C3',
+      }
+    }} 
+  />
+</Tabs>
         </Box>
         <TabPanel value='log'>
           <Box sx={{
@@ -159,6 +199,7 @@ export const RunContent = ({ row, currentLog, interpretationInProgress, logEndRe
                   background: 'rgba(0,0,0,0.06)',
                   maxHeight: '300px',
                   overflow: 'scroll',
+                  backgroundColor: '#19171c'
                 }}>
                   <pre>
                     {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 (
     <div>
-      <Button onClick={() => setOpenModal(true)} variant="outlined" sx={{ marginRight: '20px' }} size="small" color="success">
+      <Button onClick={() => setOpenModal(true)} variant='contained'  sx={{ marginRight: '20px',backgroundColor: '#ff00c3',color: 'white' }} size="small" color="success">
         Finish
       </Button>
 
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 (
-    <div id="browser">
+    <div id="browser" style={{ display: "flex", flexDirection: "column"}}  >
       <BrowserTabs
         tabs={tabs}
         handleTabChange={handleTabChange}
@@ -152,10 +153,15 @@ export const BrowserContent = () => {
         // todo: use width from browser dimension once fixed
         browserWidth={900}
         handleUrlChanged={handleUrlChanged}
+       
       />
-      <BrowserWindow />
+      <BrowserWindow  />
     </div>
   );
 };
 
-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 (
-        <div onClick={handleClick} style={{ width: '900px' }} id="browser-window">
+        <div onClick={handleClick} style={{ width: '900px', height: "400px" , borderRadius: '8px 8px 0px 0px '}} id="browser-window">
             {
                 getText === true || getList === true ? (
                     <GenericModal
diff --git a/src/components/organisms/RightSidePanel.tsx b/src/components/organisms/RightSidePanel.tsx
index f4c6352f..3b128868 100644
--- a/src/components/organisms/RightSidePanel.tsx
+++ b/src/components/organisms/RightSidePanel.tsx
@@ -391,7 +391,22 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
   const theme = useThemeMode();
   const isDarkMode = theme.darkMode;
   return (
-    <Paper sx={{ height: '520px', width: 'auto', alignItems: "center", background: isDarkMode?'#1E2124': 'inherit',color: isDarkMode ? 'black' : 'inherit' }} id="browser-actions" elevation={0}>
+    <Paper
+      sx={{
+        borderRadius: '8px 8px 0px 0px', // Slightly more rounded corners for a smoother look
+        height: '520px',
+        width: 'auto',
+        alignItems: "center",
+        padding: '16px', // Add padding for spacing inside the component
+        background: isDarkMode
+          ? 'linear-gradient(135deg, #1E2124 0%, #292C2F 100%)'  // Subtle gradient for dark mode
+          : 'linear-gradient(135deg, #f5f5f5 0%, #ffffff 100%)', // Subtle gradient for light mode
+        color: isDarkMode ? '#E0E0E0' : '#333333', // Adjusted color for better contrast
+        // Smooth transition for shadows and background changes
+      }}
+      id="browser-actions"
+      elevation={0}
+    >
       {/* <SimpleBox height={60} width='100%' background='lightGray' radius='0%'>
         <Typography sx={{ padding: '10px' }}>Last action: {` ${lastAction}`}</Typography>
       </SimpleBox> */}
@@ -484,7 +499,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
       </Box>
       <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: 'white' }}>
+          <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' }}>
             {
               step.type === 'text' && (
                 <>
@@ -520,7 +535,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}>
@@ -542,7 +557,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
               <>
                 <Typography>List Selected Successfully</Typography>
                 {Object.entries(step.fields).map(([key, field]) => (
-                  <Box key={key}>
+                  <Box key={key} sx={{ padding: '10px', margin: '11px', borderRadius: '5px', position: 'relative', background: `${isDarkMode ? "#1E2124" : 'white'}` }}>
                     <TextField
                       label="Field Label"
                       value={field.label || ''}
@@ -558,7 +573,7 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
                         )
                       }}
 
-                      style={{ background: isDarkMode ? "#1E2124" : 'white' }}
+                      
                     />
                     <TextField
                       label="Field Data"
@@ -573,7 +588,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}>
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%)';
     }