Skip to content

Commit 674ce9a

Browse files
amhsirakamhsirak
authored
Merge pull request #865 from getmaxun/edit-page
feat: main layout revamp
2 parents bf9679e + 5a18f61 commit 674ce9a

File tree

8 files changed

+152
-107
lines changed

8 files changed

+152
-107
lines changed

‎public/locales/en.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -580,7 +580,7 @@
580580
"buttons": {
581581
"stop": "Stop"
582582
},
583-
"loading": "Loading data...",
583+
"loading": "Extracting data...",
584584
"empty_output": "No output data available",
585585
"captured_data": {
586586
"title": "Captured Data",

‎src/components/api/ApiKey.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,8 @@ const Container = styled(Box)`
2626
flex-direction: column;
2727
align-items: center;
2828
margin-top: 50px;
29-
margin-left: 50px;
29+
margin-left: 70px;
30+
margin-right: 70px;
3031
`;
3132

3233
const ApiKeyManager = () => {
@@ -108,7 +109,7 @@ const ApiKeyManager = () => {
108109

109110
return (
110111
<Container sx={{ alignSelf: 'flex-start' }}>
111-
<Typography variant="body1" sx={{ marginTop: '10px', marginBottom: '40px' }}>
112+
<Typography variant="body1" sx={{ marginBottom: '40px' }}>
112113
Start by creating an API key below. Then,
113114
<a href={`${apiUrl}/api-docs/`} target="_blank" rel="noopener noreferrer" style={{ textDecoration: 'none', marginLeft: '5px', marginRight: '5px' }}>
114115
test your API
@@ -139,7 +140,7 @@ const ApiKeyManager = () => {
139140
<TableRow>
140141
<TableCell>{apiKeyName}</TableCell>
141142
<TableCell>
142-
<Box sx={{ fontFamily: 'monospace', width: '10ch' }}>
143+
<Box sx={{ fontFamily: 'monospace', width: '20ch' }}>
143144
{showKey ? `${apiKey?.substring(0, 10)}...` : '**********'}
144145
</Box>
145146
</TableCell>
@@ -174,6 +175,5 @@ const ApiKeyManager = () => {
174175
)}
175176
</Container>
176177
);
177-
};
178-
178+
}
179179
export default ApiKeyManager;

‎src/components/dashboard/MainMenu.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ export const MainMenu = ({ value = 'robots', handleChangeContent }: MainMenuProp
7272
<Paper
7373
sx={{
7474
height: '100%',
75-
width: '250px',
75+
width: '230px',
7676
backgroundColor: theme.palette.background.paper,
7777
paddingTop: '0.5rem',
7878
color: defaultcolor,

‎src/components/proxy/ProxyForm.tsx‎

Lines changed: 53 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -156,19 +156,30 @@ const ProxyForm: React.FC = () => {
156156
}, []);
157157

158158
return (
159-
<>
160-
<FormContainer>
161-
<Typography variant="h6" gutterBottom component="div" style={{ marginTop: '20px' }}>
159+
<Box sx={{
160+
display: 'flex',
161+
gap: 4,
162+
p: 5,
163+
width: '100%',
164+
maxWidth: '100%',
165+
boxSizing: 'border-box'
166+
}}>
167+
<Box sx={{
168+
flex: 1,
169+
minWidth: 0,
170+
maxWidth: 600
171+
}}>
172+
<Typography variant="h6" gutterBottom component="div">
162173
{t('proxy.title')}
163174
</Typography>
164-
<Tabs value={tabIndex} onChange={handleTabChange} style={{ marginBottom: '10px' }}>
175+
<Tabs value={tabIndex} onChange={handleTabChange} sx={{ mb: 2 }}>
165176
<Tab label={t('proxy.tab_standard')} />
166177
</Tabs>
167178

168179
{tabIndex === 0 && (
169180
isProxyConfigured ? (
170-
<Box sx={{ maxWidth: 600, width: '100%', marginTop: '5px' }}>
171-
<TableContainer component={Paper} sx={{ marginBottom: '20px' }}>
181+
<Box sx={{ width: '100%', mt: 1 }}>
182+
<TableContainer component={Paper} sx={{ mb: 2 }}>
172183
<Table>
173184
<TableHead>
174185
<TableRow>
@@ -187,13 +198,13 @@ const ProxyForm: React.FC = () => {
187198
<Button variant="outlined" color="primary" onClick={testProxy}>
188199
{t('proxy.test_proxy')}
189200
</Button>
190-
<Button variant="outlined" color="error" onClick={removeProxy} sx={{ marginLeft: '10px' }}>
201+
<Button variant="outlined" color="error" onClick={removeProxy} sx={{ ml: 1 }}>
191202
{t('proxy.remove_proxy')}
192203
</Button>
193204
</Box>
194205
) : (
195-
<Box component="form" onSubmit={handleSubmit} sx={{ maxWidth: 500, width: '100%' }}>
196-
<FormControl>
206+
<Box component="form" onSubmit={handleSubmit} sx={{ width: '100%' }}>
207+
<Box sx={{ mb: 2 }}>
197208
<TextField
198209
label={t('proxy.server_url')}
199210
name="server_url"
@@ -208,16 +219,16 @@ const ProxyForm: React.FC = () => {
208219
</span>
209220
}
210221
/>
211-
</FormControl>
212-
<FormControl>
222+
</Box>
223+
<Box sx={{ mb: 2 }}>
213224
<FormControlLabel
214225
control={<Switch checked={requiresAuth} onChange={handleAuthToggle} />}
215226
label={t('proxy.requires_auth')}
216227
/>
217-
</FormControl>
228+
</Box>
218229
{requiresAuth && (
219230
<>
220-
<FormControl>
231+
<Box sx={{ mb: 2 }}>
221232
<TextField
222233
label={t('proxy.username')}
223234
name="username"
@@ -228,8 +239,8 @@ const ProxyForm: React.FC = () => {
228239
error={!!errors.username}
229240
helperText={errors.username || ''}
230241
/>
231-
</FormControl>
232-
<FormControl>
242+
</Box>
243+
<Box sx={{ mb: 2 }}>
233244
<TextField
234245
label={t('proxy.password')}
235246
name="password"
@@ -241,7 +252,7 @@ const ProxyForm: React.FC = () => {
241252
error={!!errors.password}
242253
helperText={errors.password || ''}
243254
/>
244-
</FormControl>
255+
</Box>
245256
</>
246257
)}
247258
<Button
@@ -255,27 +266,34 @@ const ProxyForm: React.FC = () => {
255266
</Button>
256267
</Box>
257268
))}
258-
</FormContainer>
269+
</Box>
259270

260-
<Alert severity="info" sx={{ marginTop: '80px', marginLeft: '50px', height: '250px', width: '600px' }}>
261-
<AlertTitle>{t('proxy.alert.title')}</AlertTitle>
262-
<br />
263-
<b>{t('proxy.alert.right_way')}</b>
264-
<br />
265-
{t('proxy.alert.proxy_url')} http://proxy.com:1337
266-
<br />
267-
{t('proxy.alert.username')} myusername
268-
<br />
269-
{t('proxy.alert.password')} mypassword
270-
<br />
271-
<br />
272-
<b>{t('proxy.alert.wrong_way')}</b>
273-
<br />
274-
275-
{t('proxy.alert.proxy_url')} http://myusername:[email protected]:1337
276-
</Alert>
277-
</>
271+
{/* Instructions Section */}
272+
<Box sx={{
273+
flex: 1,
274+
minWidth: 0,
275+
maxWidth: 600
276+
}}>
277+
<Alert severity="info" sx={{ height: 'auto', minHeight: 250 }}>
278+
<AlertTitle>{t('proxy.alert.title')}</AlertTitle>
279+
<br />
280+
<b>{t('proxy.alert.right_way')}</b>
281+
<br />
282+
{t('proxy.alert.proxy_url')} http://proxy.com:1337
283+
<br />
284+
{t('proxy.alert.username')} myusername
285+
<br />
286+
{t('proxy.alert.password')} mypassword
287+
<br />
288+
<br />
289+
<b>{t('proxy.alert.wrong_way')}</b>
290+
<br />
291+
{t('proxy.alert.proxy_url')} http://myusername:[email protected]:1337
292+
</Alert>
293+
</Box>
294+
</Box>
278295
);
279296
};
280297

298+
281299
export default ProxyForm;

‎src/components/robot/pages/RobotConfigPage.tsx‎

Lines changed: 8 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -64,11 +64,10 @@ export const RobotConfigPage: React.FC<RobotConfigPageProps> = ({
6464
margin: '50px auto',
6565
display: 'flex',
6666
flexDirection: 'column',
67-
width: '1000px',
68-
height: '100%',
69-
overflowY: 'auto', // Allow scrolling if content exceeds height
67+
width: '100%',
68+
height: 'auto',
69+
boxSizing: 'border-box'
7070
}}>
71-
{/* Header Section - Fixed Position */}
7271
<Box sx={{
7372
display: 'flex',
7473
alignItems: 'center',
@@ -117,32 +116,29 @@ export const RobotConfigPage: React.FC<RobotConfigPageProps> = ({
117116
</Box>
118117
<Divider sx={{ mb: 4, flexShrink: 0 }} />
119118

120-
{/* Content Section */}
121119
<Box sx={{
122120
flex: 1,
123121
display: 'flex',
124122
flexDirection: 'column',
125123
minHeight: 0,
126-
mt: 2,
127-
mb: 3,
124+
mt: 1.8,
125+
mb: 5,
128126
}}>
129127
{children}
130128
</Box>
131129

132-
{/* Action Buttons */}
133130
{(showSaveButton || showCancelButton || onBackToSelection) && (
134131
<Box
135132
sx={{
136133
display: 'flex',
137134
justifyContent: onBackToSelection ? 'space-between' : 'flex-start',
138135
gap: 2,
139-
pt: 3, // Reduce padding top to minimize space above
136+
pt: 3,
140137
borderTop: `1px solid ${theme.palette.divider}`,
141138
flexShrink: 0,
142139
width: '100%',
143140
}}
144141
>
145-
{/* Left side - Back to Selection button */}
146142
{onBackToSelection && (
147143
<Button
148144
variant="outlined"
@@ -157,17 +153,14 @@ export const RobotConfigPage: React.FC<RobotConfigPageProps> = ({
157153
</Button>
158154
)}
159155

160-
{/* Right side - Save/Cancel buttons */}
161156
<Box sx={{ display: 'flex', gap: 2 }}>
162157
{showCancelButton && (
163158
<Button
164159
variant="outlined"
165160
onClick={handleBack}
166161
disabled={isLoading}
167162
sx={{
168-
color: '#ff00c3 !important',
169-
borderColor: '#ff00c3 !important',
170-
backgroundColor: 'white !important',
163+
backgroundColor: 'inherit !important',
171164
}} >
172165
{cancelButtonText || t("buttons.cancel")}
173166
</Button>
@@ -197,4 +190,4 @@ export const RobotConfigPage: React.FC<RobotConfigPageProps> = ({
197190
)}
198191
</Box>
199192
);
200-
};
193+
}

‎src/components/robot/pages/ScheduleSettingsPage.tsx‎

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import {
77
Box,
88
Button,
99
} from "@mui/material";
10-
import { Schedule } from "@mui/icons-material";
1110
import { Dropdown } from "../../ui/DropdownMui";
1211
import { validMomentTimezones } from "../../../constants/const";
1312
import { useGlobalInfoStore } from "../../../context/globalInfo";
@@ -188,8 +187,8 @@ export const ScheduleSettingsPage = ({
188187
display: "flex",
189188
flexDirection: "column",
190189
alignItems: "flex-start",
191-
"& > *": { marginBottom: "20px" },
192-
marginTop: "-20px",
190+
gap: 3,
191+
width: "100%",
193192
}}
194193
>
195194
<>
@@ -215,7 +214,7 @@ export const ScheduleSettingsPage = ({
215214
{t("schedule_settings.at_around")}: {schedule.atTimeStart},{" "}
216215
{schedule.timezone} {t("schedule_settings.timezone")}
217216
</Typography>
218-
<Box mt={2} display="flex" justifyContent="space-between">
217+
<Box sx={{ mt: 2, width: "100%" }}>
219218
<Button
220219
onClick={deleteRobotSchedule}
221220
variant="outlined"
@@ -231,7 +230,7 @@ export const ScheduleSettingsPage = ({
231230
) : (
232231
<>
233232
<Box sx={{ display: "flex", alignItems: "center", width: "100%" }}>
234-
<Typography sx={{ marginRight: "10px" }}>
233+
<Typography sx={{ width: "200px", flexShrink: 0 }}>
235234
{t("schedule_settings.labels.run_once_every")}
236235
</Typography>
237236
<TextField
@@ -263,7 +262,7 @@ export const ScheduleSettingsPage = ({
263262
</Box>
264263

265264
<Box sx={{ display: "flex", alignItems: "center", width: "100%" }}>
266-
<Typography sx={{ marginBottom: "5px", marginRight: "25px" }}>
265+
<Typography sx={{ width: "200px", flexShrink: 0 }}>
267266
{["MONTHS", "WEEKS"].includes(settings.runEveryUnit)
268267
? t("schedule_settings.labels.start_from_label")
269268
: t("schedule_settings.labels.start_from_label")}
@@ -288,7 +287,7 @@ export const ScheduleSettingsPage = ({
288287

289288
{settings.runEveryUnit === "MONTHS" && (
290289
<Box sx={{ display: "flex", alignItems: "center", width: "100%" }}>
291-
<Typography sx={{ marginBottom: "5px", marginRight: "25px" }}>
290+
<Typography sx={{ width: "200px", flexShrink: 0 }}>
292291
{t("schedule_settings.labels.on_day_of_month")}
293292
</Typography>
294293
<TextField
@@ -305,10 +304,10 @@ export const ScheduleSettingsPage = ({
305304

306305
{["MINUTES", "HOURS"].includes(settings.runEveryUnit) ? (
307306
<Box sx={{ display: "flex", alignItems: "center", width: "100%" }}>
308-
<Box sx={{ marginRight: "20px" }}>
309-
<Typography sx={{ marginBottom: "5px" }}>
310-
{t("schedule_settings.labels.in_between")}
311-
</Typography>
307+
<Typography sx={{ width: "200px", flexShrink: 0 }}>
308+
{t("schedule_settings.labels.in_between")}
309+
</Typography>
310+
<Box sx={{ display: "flex", gap: 1 }}>
312311
<TextField
313312
type="time"
314313
value={settings.atTimeStart}
@@ -329,7 +328,7 @@ export const ScheduleSettingsPage = ({
329328
</Box>
330329
) : (
331330
<Box sx={{ display: "flex", alignItems: "center", width: "100%" }}>
332-
<Typography sx={{ marginBottom: "5px", marginRight: "10px" }}>
331+
<Typography sx={{ width: "200px", flexShrink: 0 }}>
333332
{t("schedule_settings.at_around")}
334333
</Typography>
335334
<TextField
@@ -344,7 +343,7 @@ export const ScheduleSettingsPage = ({
344343
)}
345344

346345
<Box sx={{ display: "flex", alignItems: "center", width: "100%" }}>
347-
<Typography sx={{ marginRight: "10px" }}>
346+
<Typography sx={{ width: "200px", flexShrink: 0 }}>
348347
{t("schedule_settings.timezone")}
349348
</Typography>
350349
<Dropdown
@@ -370,4 +369,4 @@ export const ScheduleSettingsPage = ({
370369
</Box>
371370
</RobotConfigPage>
372371
);
373-
};
372+
}

0 commit comments

Comments
 (0)