dark theme added

This commit is contained in:
amit
2024-11-07 00:46:47 +05:30
parent 04ed79b337
commit f4a0327c9a
4 changed files with 154 additions and 183 deletions

View File

@@ -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',
};