dark theme added
This commit is contained in:
@@ -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
|
||||
>
|
||||
<Box sx={{
|
||||
width: '100%',
|
||||
paddingBottom: '1rem',
|
||||
}}>
|
||||
<Box sx={{ width: '100%', paddingBottom: '1rem' }}>
|
||||
<Tabs
|
||||
value={value}
|
||||
onChange={handleChange}
|
||||
@@ -41,44 +39,28 @@ export const MainMenu = ({ value = 'recordings', handleChangeContent }: MainMenu
|
||||
sx={{ alignItems: 'flex-start' }}
|
||||
>
|
||||
<Tab
|
||||
sx={{
|
||||
justifyContent: 'flex-start',
|
||||
textAlign: 'left',
|
||||
fontSize: 'medium',
|
||||
}}
|
||||
sx={{ justifyContent: 'flex-start', textAlign: 'left', fontSize: 'medium', color: theme.palette.text.primary }}
|
||||
value="recordings"
|
||||
label="Robots"
|
||||
icon={<AutoAwesome />}
|
||||
iconPosition="start"
|
||||
/>
|
||||
<Tab
|
||||
sx={{
|
||||
justifyContent: 'flex-start',
|
||||
textAlign: 'left',
|
||||
fontSize: 'medium',
|
||||
}}
|
||||
sx={{ justifyContent: 'flex-start', textAlign: 'left', fontSize: 'medium', color: theme.palette.text.primary }}
|
||||
value="runs"
|
||||
label="Runs"
|
||||
icon={<FormatListBulleted />}
|
||||
iconPosition="start"
|
||||
/>
|
||||
<Tab
|
||||
sx={{
|
||||
justifyContent: 'flex-start',
|
||||
textAlign: 'left',
|
||||
fontSize: 'medium',
|
||||
}}
|
||||
sx={{ justifyContent: 'flex-start', textAlign: 'left', fontSize: 'medium', color: theme.palette.text.primary }}
|
||||
value="proxy"
|
||||
label="Proxy"
|
||||
icon={<Usb />}
|
||||
iconPosition="start"
|
||||
/>
|
||||
<Tab
|
||||
sx={{
|
||||
justifyContent: 'flex-start',
|
||||
textAlign: 'left',
|
||||
fontSize: 'medium',
|
||||
}}
|
||||
sx={{ justifyContent: 'flex-start', textAlign: 'left', fontSize: 'medium', color: theme.palette.text.primary }}
|
||||
value="apikey"
|
||||
label="API Key"
|
||||
icon={<VpnKey />}
|
||||
@@ -87,7 +69,7 @@ export const MainMenu = ({ value = 'recordings', handleChangeContent }: MainMenu
|
||||
</Tabs>
|
||||
<hr />
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: '1rem', textAlign: 'left' }}>
|
||||
<Button href={`${apiUrl}/api-docs/`} target="_blank" rel="noopener noreferrer" sx={buttonStyles} startIcon={<Article />}>
|
||||
<Button href="/api-docs" target="_blank" rel="noopener noreferrer" sx={buttonStyles} startIcon={<Article />}>
|
||||
API Docs
|
||||
</Button>
|
||||
<Button href="https://forms.gle/hXjgqDvkEhPcaBW76" target="_blank" rel="noopener noreferrer" sx={buttonStyles} startIcon={<CloudQueue />}>
|
||||
@@ -97,17 +79,17 @@ export const MainMenu = ({ value = 'recordings', handleChangeContent }: MainMenu
|
||||
</Box>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const buttonStyles = {
|
||||
justifyContent: 'flex-start',
|
||||
textAlign: 'left',
|
||||
fontSize: 'medium',
|
||||
padding: '6px 16px 6px 22px',
|
||||
padding: '6px 16px 6px 22px',
|
||||
minHeight: '48px',
|
||||
minWidth: '100%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
textTransform: 'none',
|
||||
color: '#6C6C6C !important',
|
||||
};
|
||||
color: 'inherit',
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user