feat: change styling for remote browser tab

src/components/molecules/BrowserTabs.tsx

@@ -32,30 +32,15 @@ export const BrowserTabs = (
 
   return (
     <Box sx={{
+      width: 800, // Fixed width
       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={{ borderColor: '#333' }}> {/* Synced border color */}
+      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}> {/* 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 (
@@ -63,15 +48,8 @@ export const BrowserTabs = (
                 key={`tab-${index}`}
                 id={`tab-${index}`}
                 sx={{
-                  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
-                  
+                  background: 'white',
+                  borderRadius: '5px 5px 0px 0px',                  
                   '&.Mui-selected': {
                     backgroundColor:` ${isDarkMode?"#2a2a2a":"#f5f5f5"}`, // Synced selected tab color
                     color: '#ff00c3', // Slightly lighter text when selected
@@ -94,18 +72,7 @@ export const BrowserTabs = (
           })}
         </Tabs>
       </Box>
-      {/* <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> */}
+      {/* <AddButton handleClick={handleAddNewTab} style={{ background: 'white' }} /> */}
     </Box>
   );
 }
@@ -123,22 +90,12 @@ const CloseButton = ({ closeTab, disabled }: CloseButtonProps) => {
       onClick={closeTab}
       disabled={disabled}
       sx={{
-        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',
+        height: '34px',
+        '&:hover': { color: 'white', backgroundColor: '#1976d2' }
       }}
+      component="span"
     >
-      <Close fontSize="small" />
+      <Close />
     </IconButton>
   );
 }