feat: match proxy layout w new menu layout

This commit is contained in:
amhsirak
2025-11-05 20:39:35 +05:30
parent a515c9046a
commit fb7c37dab9

View File

@@ -156,19 +156,30 @@ const ProxyForm: React.FC = () => {
}, []); }, []);
return ( return (
<> <Box sx={{
<FormContainer> display: 'flex',
<Typography variant="h6" gutterBottom component="div" style={{ marginTop: '20px' }}> gap: 4,
p: 5,
width: '100%',
maxWidth: '100%',
boxSizing: 'border-box'
}}>
<Box sx={{
flex: 1,
minWidth: 0,
maxWidth: 600
}}>
<Typography variant="h6" gutterBottom component="div">
{t('proxy.title')} {t('proxy.title')}
</Typography> </Typography>
<Tabs value={tabIndex} onChange={handleTabChange} style={{ marginBottom: '10px' }}> <Tabs value={tabIndex} onChange={handleTabChange} sx={{ mb: 2 }}>
<Tab label={t('proxy.tab_standard')} /> <Tab label={t('proxy.tab_standard')} />
</Tabs> </Tabs>
{tabIndex === 0 && ( {tabIndex === 0 && (
isProxyConfigured ? ( isProxyConfigured ? (
<Box sx={{ maxWidth: 600, width: '100%', marginTop: '5px' }}> <Box sx={{ width: '100%', mt: 1 }}>
<TableContainer component={Paper} sx={{ marginBottom: '20px' }}> <TableContainer component={Paper} sx={{ mb: 2 }}>
<Table> <Table>
<TableHead> <TableHead>
<TableRow> <TableRow>
@@ -187,13 +198,13 @@ const ProxyForm: React.FC = () => {
<Button variant="outlined" color="primary" onClick={testProxy}> <Button variant="outlined" color="primary" onClick={testProxy}>
{t('proxy.test_proxy')} {t('proxy.test_proxy')}
</Button> </Button>
<Button variant="outlined" color="error" onClick={removeProxy} sx={{ marginLeft: '10px' }}> <Button variant="outlined" color="error" onClick={removeProxy} sx={{ ml: 1 }}>
{t('proxy.remove_proxy')} {t('proxy.remove_proxy')}
</Button> </Button>
</Box> </Box>
) : ( ) : (
<Box component="form" onSubmit={handleSubmit} sx={{ maxWidth: 500, width: '100%' }}> <Box component="form" onSubmit={handleSubmit} sx={{ width: '100%' }}>
<FormControl> <Box sx={{ mb: 2 }}>
<TextField <TextField
label={t('proxy.server_url')} label={t('proxy.server_url')}
name="server_url" name="server_url"
@@ -208,16 +219,16 @@ const ProxyForm: React.FC = () => {
</span> </span>
} }
/> />
</FormControl> </Box>
<FormControl> <Box sx={{ mb: 2 }}>
<FormControlLabel <FormControlLabel
control={<Switch checked={requiresAuth} onChange={handleAuthToggle} />} control={<Switch checked={requiresAuth} onChange={handleAuthToggle} />}
label={t('proxy.requires_auth')} label={t('proxy.requires_auth')}
/> />
</FormControl> </Box>
{requiresAuth && ( {requiresAuth && (
<> <>
<FormControl> <Box sx={{ mb: 2 }}>
<TextField <TextField
label={t('proxy.username')} label={t('proxy.username')}
name="username" name="username"
@@ -228,8 +239,8 @@ const ProxyForm: React.FC = () => {
error={!!errors.username} error={!!errors.username}
helperText={errors.username || ''} helperText={errors.username || ''}
/> />
</FormControl> </Box>
<FormControl> <Box sx={{ mb: 2 }}>
<TextField <TextField
label={t('proxy.password')} label={t('proxy.password')}
name="password" name="password"
@@ -241,7 +252,7 @@ const ProxyForm: React.FC = () => {
error={!!errors.password} error={!!errors.password}
helperText={errors.password || ''} helperText={errors.password || ''}
/> />
</FormControl> </Box>
</> </>
)} )}
<Button <Button
@@ -255,27 +266,34 @@ const ProxyForm: React.FC = () => {
</Button> </Button>
</Box> </Box>
))} ))}
</FormContainer> </Box>
<Alert severity="info" sx={{ marginTop: '80px', marginLeft: '50px', height: '250px', width: '600px' }}> {/* Instructions Section */}
<AlertTitle>{t('proxy.alert.title')}</AlertTitle> <Box sx={{
<br /> flex: 1,
<b>{t('proxy.alert.right_way')}</b> minWidth: 0,
<br /> maxWidth: 600
{t('proxy.alert.proxy_url')} http://proxy.com:1337 }}>
<br /> <Alert severity="info" sx={{ height: 'auto', minHeight: 250 }}>
{t('proxy.alert.username')} myusername <AlertTitle>{t('proxy.alert.title')}</AlertTitle>
<br /> <br />
{t('proxy.alert.password')} mypassword <b>{t('proxy.alert.right_way')}</b>
<br /> <br />
<br /> {t('proxy.alert.proxy_url')} http://proxy.com:1337
<b>{t('proxy.alert.wrong_way')}</b> <br />
<br /> {t('proxy.alert.username')} myusername
<br />
{t('proxy.alert.proxy_url')} http://myusername:mypassword@proxy.com:1337 {t('proxy.alert.password')} mypassword
</Alert> <br />
</> <br />
<b>{t('proxy.alert.wrong_way')}</b>
<br />
{t('proxy.alert.proxy_url')} http://myusername:mypassword@proxy.com:1337
</Alert>
</Box>
</Box>
); );
}; };
export default ProxyForm; export default ProxyForm;