Skip to content

Commit 54eaf56

Browse files
authored
Merge branch 'develop' into capflow-revamp
2 parents 5c7c2c5 + 25b8b57 commit 54eaf56

19 files changed

+422
-115
lines changed
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.

src/components/action/ActionDescriptionBox.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const CustomBoxContainer = styled.div<CustomBoxContainerProps>`
1616
min-height: 100px;
1717
height: auto;
1818
border-radius: 5px;
19-
background-color: ${({ isDarkMode }) => (isDarkMode ? '#313438' : 'white')};
19+
background-color: ${({ isDarkMode }) => (isDarkMode ? '#1d1c1cff' : 'white')};
2020
color: ${({ isDarkMode }) => (isDarkMode ? 'white' : 'black')};
2121
margin: 80px 13px 25px 13px;
2222
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
@@ -31,7 +31,7 @@ const Triangle = styled.div<CustomBoxContainerProps>`
3131
height: 0;
3232
border-left: 20px solid transparent;
3333
border-right: 20px solid transparent;
34-
border-bottom: 20px solid ${({ isDarkMode }) => (isDarkMode ? '#313438' : 'white')};
34+
border-bottom: 20px solid ${({ isDarkMode }) => (isDarkMode ? '#1d1c1cff' : 'white')};
3535
`;
3636

3737
const Logo = styled.img`
@@ -102,7 +102,7 @@ const ActionDescriptionBox = ({ isDarkMode }: { isDarkMode: boolean }) => {
102102
sx={{
103103
color: isDarkMode ? 'white' : 'default',
104104
'&.Mui-checked': {
105-
color: '#ff33cc',
105+
color: '#ff00c3',
106106
},
107107
}}
108108
/>
@@ -138,4 +138,4 @@ const ActionDescriptionBox = ({ isDarkMode }: { isDarkMode: boolean }) => {
138138
);
139139
};
140140

141-
export default ActionDescriptionBox;
141+
export default ActionDescriptionBox;

src/components/browser/BrowserNavBar.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,18 +14,18 @@ import { useThemeMode } from '../../context/theme-provider';
1414
const StyledNavBar = styled.div<{ browserWidth: number; isDarkMode: boolean }>`
1515
display: flex;
1616
padding: 12px 0px;
17-
background-color: ${({ isDarkMode }) => (isDarkMode ? '#2C2F33' : '#f6f6f6')};
17+
background-color: ${({ isDarkMode }) => (isDarkMode ? '#1d1c1cff' : '#f6f6f6')};
1818
width: ${({ browserWidth }) => browserWidth}px;
1919
border-radius: 0px 5px 0px 0px;
2020
`;
2121

2222
const IconButton = styled(NavBarButton) <{ mode: string }>`
23-
background-color: ${({ mode }) => (mode === 'dark' ? '#2C2F33' : '#f6f6f6')};
23+
background-color: ${({ mode }) => (mode === 'dark' ? '#1d1c1cff' : '#f6f6f6')};
2424
transition: background-color 0.3s ease, transform 0.1s ease;
2525
color: ${({ mode }) => (mode === 'dark' ? '#FFFFFF' : '#333')};
2626
cursor: pointer;
2727
&:hover {
28-
background-color: ${({ mode }) => (mode === 'dark' ? '#586069' : '#D0D0D0')};
28+
background-color: ${({ mode }) => (mode === 'dark' ? '#1d1c1cff' : '#D0D0D0')};
2929
}
3030
`;
3131

src/components/browser/BrowserTabs.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ export const BrowserTabs = (
4949
background: 'white',
5050
borderRadius: '5px 5px 0px 0px',
5151
'&.Mui-selected': {
52-
backgroundColor: ` ${isDarkMode ? "#2a2a2a" : "#f5f5f5"}`,
52+
backgroundColor: ` ${isDarkMode ? "#121111ff" : "#f5f5f5"}`,
5353
color: '#ff00c3', // Slightly lighter text when selected
5454
},
5555
}}

src/components/dashboard/MainMenu.tsx

Lines changed: 33 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import Tabs from '@mui/material/Tabs';
33
import Tab from '@mui/material/Tab';
44
import Box from '@mui/material/Box';
55
import { useNavigate, useLocation } from 'react-router-dom';
6-
import { Paper, Button, useTheme, Modal, Typography, Stack, TextField, InputAdornment, IconButton } from "@mui/material";
7-
import { AutoAwesome, FormatListBulleted, VpnKey, Usb, CloudQueue, Description, Favorite, ContentCopy, SlowMotionVideo } from "@mui/icons-material";
6+
import { Paper, Button, useTheme, Modal, Typography, Stack, Divider } from "@mui/material";
7+
import { AutoAwesome, FormatListBulleted, VpnKey, Usb, CloudQueue, Description, Favorite, SlowMotionVideo } from "@mui/icons-material";
88
import { useTranslation } from 'react-i18next';
99
import { useGlobalInfoStore } from "../../context/globalInfo";
1010

@@ -87,19 +87,41 @@ export const MainMenu = ({ value = 'robots', handleChangeContent }: MainMenuProp
8787
textColor="primary"
8888
indicatorColor="primary"
8989
orientation="vertical"
90-
sx={{ alignItems: 'flex-start' }}
90+
sx={{ alignItems: 'flex-start', '& .MuiTabs-indicator': { display: 'none' }}
9191
>
92-
<Tab value="robots" label={t('mainmenu.recordings')} icon={<AutoAwesome />} iconPosition="start" sx={{ justifyContent: 'flex-start', textAlign: 'left', fontSize: 'medium' }} onClick={handleRobotsClick} />
93-
<Tab value="runs" label={t('mainmenu.runs')} icon={<FormatListBulleted />} iconPosition="start" sx={{ justifyContent: 'flex-start', textAlign: 'left', fontSize: 'medium' }} />
94-
<Tab value="proxy" label={t('mainmenu.proxy')} icon={<Usb />} iconPosition="start" sx={{ justifyContent: 'flex-start', textAlign: 'left', fontSize: 'medium' }} />
95-
<Tab value="apikey" label={t('mainmenu.apikey')} icon={<VpnKey />} iconPosition="start" sx={{ justifyContent: 'flex-start', textAlign: 'left', fontSize: 'medium' }} />
92+
<Tab
93+
value="robots"
94+
label={t('mainmenu.recordings')}
95+
icon={<AutoAwesome />}
96+
iconPosition="start"
97+
disableRipple={true}
98+
sx={{ justifyContent: 'flex-start', textAlign: 'left', fontSize: 'medium' }}
99+
onClick={handleRobotsClick} />
100+
<Tab value="runs"
101+
label={t('mainmenu.runs')}
102+
icon={<FormatListBulleted />}
103+
iconPosition="start"
104+
disableRipple={true}
105+
sx={{ justifyContent: 'flex-start', textAlign: 'left', fontSize: 'medium' }} />
106+
<Tab value="proxy"
107+
label={t('mainmenu.proxy')}
108+
icon={<Usb />}
109+
iconPosition="start"
110+
disableRipple={true}
111+
sx={{ justifyContent: 'flex-start', textAlign: 'left', fontSize: 'medium' }} />
112+
<Tab value="apikey"
113+
label={t('mainmenu.apikey')}
114+
icon={<VpnKey />}
115+
iconPosition="start"
116+
disableRipple={true}
117+
sx={{ justifyContent: 'flex-start', textAlign: 'left', fontSize: 'medium' }} />
96118
</Tabs>
97-
<hr />
119+
<Divider sx={{ borderColor: theme.palette.mode === 'dark' ? "#080808ff" : "" }} />
98120
<Box sx={{ display: 'flex', flexDirection: 'column', textAlign: 'left' }}>
99121
<Button
100122
onClick={() => setDocModalOpen(true)}
101123
sx={buttonStyles}
102-
startIcon={<Description />}
124+
startIcon={<Description sx={{ fontSize: 20 }} />}
103125
>
104126
Documentation
105127
</Button>
@@ -133,10 +155,10 @@ export const MainMenu = ({ value = 'robots', handleChangeContent }: MainMenuProp
133155
href='https://app.maxun.dev/'
134156
target="_blank"
135157
rel="noopener noreferrer"
136-
sx={buttonStyles} startIcon={<CloudQueue />}>
158+
sx={buttonStyles} startIcon={<CloudQueue sx={{ fontSize: 20 }} />}>
137159
Join Maxun Cloud
138160
</Button>
139-
<Button onClick={() => setSponsorModalOpen(true)} sx={buttonStyles} startIcon={<Favorite />}>
161+
<Button onClick={() => setSponsorModalOpen(true)} sx={buttonStyles} startIcon={<Favorite sx={{ fontSize: 20 }} />}>
140162
Sponsor Us
141163
</Button>
142164
</Box>

src/components/dashboard/NavBar.tsx

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,10 @@ import {
2727
GitHub,
2828
Update,
2929
Close,
30-
Language,
3130
Description,
3231
LightMode,
33-
DarkMode
32+
DarkMode,
33+
Translate
3434
} from "@mui/icons-material";
3535
import { useNavigate } from 'react-router-dom';
3636
import { AuthContext } from '../../context/auth';
@@ -158,14 +158,11 @@ export const NavBar: React.FC<NavBarProps> = ({
158158
};
159159

160160
const renderThemeToggle = () => (
161-
<Tooltip title="Toggle Mode">
161+
<Tooltip title="Change Mode">
162162
<IconButton
163163
onClick={toggleTheme}
164164
sx={{
165165
color: darkMode ? '#ffffff' : '#0000008A',
166-
'&:hover': {
167-
background: 'inherit'
168-
}
169166
}}
170167
>
171168
{darkMode ? <LightMode /> : <DarkMode />}
@@ -236,7 +233,7 @@ export const NavBar: React.FC<NavBarProps> = ({
236233
cursor: 'pointer'
237234
}}
238235
onClick={() => navigate('/')}>
239-
<img src={MaxunLogo} width={45} height={40} style={{ borderRadius: '5px', margin: '5px 0px 5px 15px' }} />
236+
<img src={MaxunLogo} width={48} height={40} style={{ borderRadius: '5px', margin: '5px 0px 5px 15px' }} />
240237
<div style={{ padding: '11px' }}><ProjectName mode={darkMode ? 'dark' : 'light'}>{t('navbar.project_name')}</ProjectName></div>
241238
<Chip
242239
label={`${currentVersion}`}
@@ -394,7 +391,7 @@ export const NavBar: React.FC<NavBarProps> = ({
394391
<Logout sx={{ marginRight: '5px' }} /> {t('navbar.menu_items.logout')}
395392
</MenuItem>
396393
<MenuItem onClick={handleLangMenuOpen}>
397-
<Language sx={{ marginRight: '5px' }} /> {t('navbar.menu_items.language')}
394+
<Translate sx={{ marginRight: '5px' }} /> {t('navbar.menu_items.language')}
398395
</MenuItem>
399396
<hr />
400397
<MenuItem onClick={() => {
@@ -516,10 +513,10 @@ export const NavBar: React.FC<NavBarProps> = ({
516513
alignItems: "center",
517514
borderRadius: "5px",
518515
padding: "8px",
519-
marginRight: "8px",
516+
marginRight: "4px",
520517
}}
521518
>
522-
<Language sx={{ marginRight: '5px' }} /><Typography variant="body1">{t("Language")}</Typography>
519+
<Translate />
523520
</IconButton>
524521
<Menu
525522
anchorEl={langAnchorEl}
@@ -601,11 +598,11 @@ export const NavBar: React.FC<NavBarProps> = ({
601598

602599
const NavBarWrapper = styled.div<{ mode: 'light' | 'dark' }>`
603600
grid-area: navbar;
604-
background-color: ${({ mode }) => (mode === 'dark' ? '#1e2124' : '#ffffff')};
601+
background-color: ${({ mode }) => (mode === 'dark' ? '#000000ff' : '#ffffff')};
605602
padding: 5px;
606603
display: flex;
607604
justify-content: space-between;
608-
border-bottom: 1px solid ${({ mode }) => (mode === 'dark' ? '#333' : '#e0e0e0')};
605+
border-bottom: 1px solid ${({ mode }) => (mode === 'dark' ? '#000000ff' : '#e0e0e0')};
609606
`;
610607

611608
const ProjectName = styled.b<{ mode: 'light' | 'dark' }>`

src/components/recorder/DOMBrowserRenderer.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -902,6 +902,7 @@ export const DOMBrowserRenderer: React.FC<RRWebDOMBrowserRendererProps> = ({
902902
rebuild(snapshotData.snapshot, {
903903
doc: iframeDoc,
904904
mirror: mirror,
905+
hackCss: false,
905906
cache: { stylesWithHoverClass: new Map() },
906907
afterAppend: (node) => {
907908
if (node.nodeType === Node.TEXT_NODE && node.textContent) {

0 commit comments

Comments
 (0)