some fixes

2024-11-24 00:49:39 +05:30
parent 965044a173
commit f71822f844
15 changed files with 399 additions and 164 deletions
--- 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`
--- 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`
--- 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' }}
            />
--- 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>`
--- 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}
--- 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
--- 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>
  );
 }
--- 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,
--- 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;
+`;
--- 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)}
--- 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>

--- 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;`;
--- 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
--- 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}>
--- 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%)';
    }