Skip to content

Commit 93b7667

Browse files
payamnjpayamnj
authored
Merge pull request #350 from AvaCodeSolutions/renovate/major-material-ui-monorepo
fix(deps): update material-ui monorepo to v9 (major)
2 parents 88689ab + cb3c2c8 commit 93b7667

25 files changed

Lines changed: 868 additions & 472 deletions

File tree

‎frontend/package-lock.json‎

Lines changed: 728 additions & 361 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,10 @@
1313
"@emotion/react": "^11.14.0",
1414
"@emotion/styled": "^11.14.1",
1515
"@fontsource/roboto": "^5.2.6",
16-
"@mui/icons-material": "^7.3.2",
17-
"@mui/lab": "^7.0.1-beta.21",
18-
"@mui/material": "^7.3.2",
19-
"@mui/x-charts": "^8.26.0",
16+
"@mui/icons-material": "^9.0.0",
17+
"@mui/lab": "^9.0.0-beta.2",
18+
"@mui/material": "^9.0.0",
19+
"@mui/x-charts": "^9.0.0",
2020
"@tiptap/core": "^3.13.0",
2121
"@tiptap/extension-blockquote": "^3.19.0",
2222
"@tiptap/extension-bold": "^3.13.0",

‎frontend/personalised/certificate/Certificate.jsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -133,25 +133,25 @@ const CertificateContent = () => {
133133
<Typography
134134
variant="h3"
135135
align="center"
136-
mt={4}
137136
sx={{
137+
mt: 4,
138138
fontWeight: 500,
139139
maxWidth: '80%',
140140
}}
141141
dangerouslySetInnerHTML={{ __html: localeMessages['description'].replace(name, "<div style='font-size: 2em; padding: 0.5em; font-weight: 700;'>" + name + "</div>") }}
142142
>
143143
</Typography>
144-
<Grid container spacing={2} sx={{pt: 2, mt: 4, width: '100%', minHeight: '100px' }} alignItems="flex-end">
145-
<Grid item size={4} sx={{ textAlign: 'center' }} >
144+
<Grid container spacing={2} sx={{ pt: 2, mt: 4, width: '100%', minHeight: '100px', alignItems: 'flex-end' }}>
145+
<Grid size={4} sx={{ textAlign: 'center' }} >
146146
<Typography variant="body2">
147147
{ logoUrl && <><img src={logoUrl} alt="Organization Logo" style={{ width: 80, height: 80, objectFit: 'contain' }} /><br /></> }
148148
<b>{localeMessages['organization_team']}</b><br />
149149
{localeMessages['issue_date']}: {issueDate}
150150
</Typography>
151151
</Grid>
152-
<Grid item size={4} sx={{ textAlign: 'center' }} >
152+
<Grid size={4} sx={{ textAlign: 'center' }} >
153153
</Grid>
154-
<Grid item size={4} sx={{ textAlign: 'center' }} >
154+
<Grid size={4} sx={{ textAlign: 'center' }} >
155155
<Typography variant="body2">
156156
<img src={qrcodeUrl} alt="QR Code" style={{ width: 80, height: 80 }} />
157157
<br />

‎frontend/personalised/certificate_form/CertificateForm.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ const CertificateForm = () => {
6363
bgcolor: "background.paper",
6464
}}
6565
>
66-
<Box display="flex" alignItems="center" my={4} justifyContent="center">
66+
<Box sx={{ display: 'flex', alignItems: 'center', my: 4, justifyContent: 'center' }}>
6767
<WorkspacePremiumIcon color="secondary" sx={{ fontSize: 50, mr: 1 }} />
6868
<Typography variant="h4" component="h1">
6969
{localeMessages['form_title']}

‎frontend/personalised/command_result/CommandResult.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ const CommandResult = () => {
88
return <Layout>
99
{ !errorMessage && !confirmationMessage ?<Alert severity='success' sx={{ maxWidth: 800, margin: '0 auto', backgroundColor: "background.light" }}>
1010
{successMessage}
11-
</Alert> : confirmationMessage ? <Box sx={{my: 6}}><Typography variant='h6' align='center' sx={{ mt: 4, color: 'text.primary' }}>
11+
</Alert> : confirmationMessage ? <Box sx={{ my: 6 }}><Typography variant='h6' align='center' sx={{ mt: 4, color: 'text.primary' }}>
1212
{confirmationMessage}
13-
</Typography> <Box mt={6} sx={{ textAlign: 'center' }}><Button href={confirmUrl} variant='contained' mt={2} sx={{ mx: 'auto', px: 3, fontSize: '1rem'}}>{localeMessages["Confirm"]}</Button></Box></Box>: <Alert severity="error" sx={{ maxWidth: 800, margin: '20px auto' }}>
13+
</Typography> <Box sx={{ mt: 6, textAlign: 'center' }}><Button href={confirmUrl} variant='contained' sx={{ mt: 2, mx: 'auto', px: 3, fontSize: '1rem' }}>{localeMessages["Confirm"]}</Button></Box></Box>: <Alert severity="error" sx={{ maxWidth: 800, margin: '20px auto' }}>
1414
{errorMessage} (ref: {ref})
1515
</Alert>}
1616
</Layout>

‎frontend/personalised/quiz_public/Quiz.jsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -100,8 +100,8 @@ const Quiz = () => {
100100
return <Layout>
101101
<Box sx={{ width: '100%', maxWidth: 920, mx: 'auto', p: { xs: 2, md: 4 }, borderRadius: 2, backgroundColor: "background.paper" }} component="form" method="POST" action="">
102102
{ !errorMessage ? <Box>
103-
{showQuestions ? <><Box mb={3}>
104-
<Typography variant="h4" mb={1}>{quiz.title}</Typography>
103+
{showQuestions ? <><Box sx={{ mb: 3 }}>
104+
<Typography variant="h4" sx={{ mb: 1 }}>{quiz.title}</Typography>
105105
</Box>
106106
<Box>
107107
<Typography sx={{ mb: 3, color: 'text.secondary' }}>
@@ -111,7 +111,7 @@ const Quiz = () => {
111111

112112
{quiz.questions.map((question, index) => (
113113
<Box key={index} sx={{ mb: 2, py: 2, borderBottom: '1px solid', borderColor: 'divider' }}>
114-
<Box mb={1}><Typography sx={{ fontWeight: 'bold', lineHeight: 1.5 }}>{question.text}</Typography></Box>
114+
<Box sx={{ mb: 1 }}><Typography sx={{ fontWeight: 'bold', lineHeight: 1.5 }}>{question.text}</Typography></Box>
115115
{question.answers.map((answer, cIndex) => (
116116
<FormControlLabel control={<Checkbox onChange={(e) => { if (!e.target.checked) {
117117
const newSelectedAnswers = [...selectedAnswers];
@@ -127,13 +127,13 @@ const Quiz = () => {
127127
))}
128128
</Box>
129129
))}
130-
<Box mt={3.5} textAlign="center">
130+
<Box sx={{ mt: 3.5, textAlign: 'center' }}>
131131
<Button variant="contained" onClick={showSubmitDialog} sx={{px: 3, fontSize: '1.1rem'}}>{localeMessages['submit']}</Button>
132132
</Box>
133-
</Box></> : <Box textAlign="center">
133+
</Box></> : <Box sx={{ textAlign: 'center' }}>
134134
{isPassed !== null && (isPassed ? <>{ !quizData && <CelebrationIcon sx={{mb: 2, color: 'primary.main', fontSize: '3rem'}}/> }<Alert severity={ score == 100 ? "success" : "info" } sx={{justifyContent: 'center', alignItems: 'center'}} ><Typography variant='h6'>{message} {localeMessages['your_score']}: {score}%</Typography></Alert></> :
135135
<><Alert severity="error" sx={{ justifyContent: 'center', alignItems: 'center' }} ><Typography variant="h6">{message} {localeMessages['your_score']}: {score}%</Typography></Alert>
136-
{!isInvalidated && <Box mt={3} textAlign="center"><Button onClick={() => window.location.reload()} variant="contained">{localeMessages['try_again']}</Button></Box>}
136+
{!isInvalidated && <Box sx={{ mt: 3, textAlign: 'center' }}><Button onClick={() => window.location.reload()} variant="contained">{localeMessages['try_again']}</Button></Box>}
137137
</>)}
138138
{quizData && (
139139
<Box sx={{ mt: 3, textAlign: direction === 'rtl' ? 'right' : 'left', border: '1px solid', borderColor: 'divider', borderRadius: 2, p: { xs: 2, md: 3 }, backgroundColor: 'background.default' }}>
@@ -182,11 +182,11 @@ const Quiz = () => {
182182
</Box>}
183183
</Box> : <Alert severity="error"><Typography variant="h6">{localeMessages['error']}: {errorMessage} {ref && `(Ref: ${ref})`}</Typography></Alert>}
184184
<Dialog open={dialogOpen} onClose={() => setDialogOpen(false)} fullWidth maxWidth="sm">
185-
<Box p={4}>
186-
<Typography variant="h6" mb={2}>{localeMessages['ready_to_submit']}</Typography>
185+
<Box sx={{ p: 4 }}>
186+
<Typography variant="h6" sx={{ mb: 2 }}>{localeMessages['ready_to_submit']}</Typography>
187187
{warning ? <Alert severity="warning" sx={{ mb: 2 }}><Typography>{warning}</Typography></Alert> :
188188
<Typography>{localeMessages['submit_quiz_note']}</Typography>}
189-
<Box mt={4} textAlign="right">
189+
<Box sx={{ mt: 4, textAlign: 'right' }}>
190190
<Button variant="text" onClick={() => setDialogOpen(false)} sx={{ mr: 2 }}>{localeMessages['cancel']}</Button>
191191
<Button variant="contained" onClick={submitQuiz}>{localeMessages['submit']}</Button>
192192
</Box>

‎frontend/platform/course/Course.jsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -288,7 +288,7 @@ function Course() {
288288
</Alert>
289289
</Box>
290290
)}
291-
<Grid size={{xs: 12}} px={2} pt={2} pb={3}>
291+
<Grid size={{xs: 12}} sx={{ px: 2, pt: 2, pb: 3 }}>
292292
<Box
293293
sx={{
294294
mb: 3,
@@ -320,7 +320,7 @@ function Course() {
320320
</Grid>
321321
</Grid>
322322
</Box>
323-
<Box p={3} sx={{ border: '1px solid', borderColor: 'border.main', backgroundColor: 'background.box', borderRadius: 2, minHeight: 300 }}>
323+
<Box sx={{ p: 3, border: '1px solid', borderColor: 'border.main', backgroundColor: 'background.box', borderRadius: 2, minHeight: 300 }}>
324324
{userRole !== 'viewer' && <><Button variant="contained" startIcon={<DescriptionIcon sx={{ marginLeft: direction == 'rtl' ? 1 : 0 }} />} sx={{ marginBottom: 2 }} onClick={() => {
325325
setDialogContent(<Suspense fallback={<Box sx={{ p: 2 }}><LinearProgress /></Box>}><LessonForm
326326
header={localeMessages["new_lesson"]}
@@ -344,13 +344,13 @@ function Course() {
344344
</Box>
345345
<Grid container spacing={3}>
346346
<Grid size={{xs: 12, lg: 6}}>
347-
<Box py={3} sx={{ border: '1px solid', borderColor: 'border.main', borderRadius: 2, backgroundColor: 'background.box', height: '100%' }}>
347+
<Box sx={{ py: 3, border: '1px solid', borderColor: 'border.main', borderRadius: 2, backgroundColor: 'background.box', height: '100%' }}>
348348
<Typography variant="h6" align='center'>{localeMessages["enrollments_distribution"]}</Typography>
349349
<Typography variant="body2" align='center' sx={{ mt: 1, mb: 2, color: 'text.secondary' }}>
350350
{(localeMessages["total_enrollments"]) + ': ' + totalEnrollments}
351351
</Typography>
352352
{isEnrollmentsLoading ? (
353-
<Box px={2}>
353+
<Box sx={{ px: 2 }}>
354354
<Skeleton variant="circular" width={180} height={180} sx={{ mx: 'auto', my: 2 }} />
355355
<Skeleton variant="text" width="80%" sx={{ mx: 'auto' }} />
356356
<Skeleton variant="text" width="60%" sx={{ mx: 'auto' }} />
@@ -391,10 +391,10 @@ function Course() {
391391
</Box>
392392
</Grid>
393393
<Grid size={{xs: 12, lg: 6}}>
394-
<Box py={3} sx={{ border: '1px solid', borderColor: 'border.main', borderRadius: 2, backgroundColor: 'background.box', height: '100%' }}>
394+
<Box sx={{ py: 3, border: '1px solid', borderColor: 'border.main', borderRadius: 2, backgroundColor: 'background.box', height: '100%' }}>
395395
<Typography variant="h6" align='center'>{localeMessages["weekly_enrollments"]}</Typography>
396396
{isWeeklyStatsLoading ? (
397-
<Box px={2}>
397+
<Box sx={{ px: 2 }}>
398398
<Skeleton variant="rectangular" height={220} sx={{ borderRadius: 1, my: 2 }} />
399399
<Skeleton variant="text" width="75%" sx={{ mx: 'auto' }} />
400400
</Box>

‎frontend/platform/course/components/LessonForm.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -440,7 +440,7 @@ function LessonForm({ header, initialTitle, initialContent, cancelCallback, succ
440440
setSuccessMessage("");
441441
}}
442442
sx={{ width: '200px', mr: 2 }}
443-
inputProps={{ min: 1 }}
443+
slotProps={{ htmlInput: { min: 1 } }}
444444
disabled={userRole === 'viewer'}
445445
/>
446446
<Select size="small" value={waitingPeriodUnit} onChange={(e) => {
@@ -451,7 +451,7 @@ function LessonForm({ header, initialTitle, initialContent, cancelCallback, succ
451451
<MenuItem value="hours">{localeMessages["hours"]}</MenuItem>
452452
</Select>
453453
</Tooltip>
454-
<Box mt={2} textAlign="right" sx={{ position: 'sticky', bottom: 0, p: 1, pt: 2, backgroundColor: 'background.default', borderTop: '1px solid', borderColor: 'divider', zIndex: 2, display: 'flex', alignItems: 'center', gap: 1, flexWrap: 'wrap' }}>
454+
<Box sx={{ mt: 2, textAlign: 'right', position: 'sticky', bottom: 0, p: 1, pt: 2, backgroundColor: 'background.default', borderTop: '1px solid', borderColor: 'divider', zIndex: 2, display: 'flex', alignItems: 'center', gap: 1, flexWrap: 'wrap' }}>
455455
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexWrap: 'wrap', mr: 'auto' }}>
456456
{successMessage && (
457457
<Alert severity="success" sx={{ py: 0 }}>

‎frontend/platform/course/components/QuestionForm.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Box, Grid, Typography, Button, Switch, Table, TableHead, TableBody, Tab
33
import RuleIcon from '@mui/icons-material/Rule';
44
import EditIcon from '@mui/icons-material/Edit';
55
import ClearIcon from '@mui/icons-material/Clear';
6-
import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
6+
import AddCircleOutlinedIcon from '@mui/icons-material/AddCircleOutlined';
77
import { useAppContext } from '../../../src/render';
88

99

@@ -63,7 +63,7 @@ const QuestionForm = ({question, index, eventHandler}) => {
6363

6464
return (
6565
<Box key={index} sx={{ mb: 1, p: 2, border: '1px solid', borderColor: 'grey.300', borderRadius: 1 }}>
66-
<Grid container spacing={2} alignItems="center">
66+
<Grid container spacing={2} sx={{ alignItems: 'center' }}>
6767
<Grid size={{ xs: 12, md: 9 }}>
6868
{userRole !== 'viewer' && <EditIcon sx={{borderRadius: "50%", display: "inline-block", float: "left", mr: 1, fontSize: "0.9rem", border: 1, borderColor: "grey.200", color: "grey.400", padding: "4px", cursor: "pointer", ':hover': { backgroundColor: "secondary.main", color: "white", borderColor: "secondary.main" } }} onClick={editQuestion}/>}
6969
{!editMode ? (
@@ -106,14 +106,14 @@ const QuestionForm = ({question, index, eventHandler}) => {
106106
}}
107107
/>
108108
</Grid>
109-
<Grid size={{ xs: 3 }} sx={{ textAlign: 'left' }} alignItems={"center"}>
109+
<Grid size={{ xs: 3 }} sx={{ textAlign: 'left', alignItems: 'center' }}>
110110
<Button variant="outlined" sx={{ mt: 1, mr: 1 }} onClick={() => {
111111
if (optionInputRef.current) {
112112
console.log(optionInputRef.current);
113113
addToOptions(optionInputRef.current.value);
114114
}
115115
}}>
116-
<AddCircleOutlineIcon sx={{ mr: 1 }} />
116+
<AddCircleOutlinedIcon sx={{ mr: 1 }} />
117117
{ localeMessages["add"] }
118118
</Button>
119119
<Button variant="outlined" sx={{ mt: 1 }} onClick={() => setAddingOption(false)}>

‎frontend/platform/course/components/QuizForm.jsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -311,7 +311,7 @@ const QuizForm = ({cancelCallback, successCallback, courseId, quizId, contentId,
311311
<QuizIcon sx={{ mr: 1 }} /> {localeMessages["add_question"]}</Button>}
312312
{ showQuestionField && (
313313
<Box sx={{ mb: 2, border: '1px solid', borderColor: 'grey.300', borderRadius: 1, p: 2 }}>
314-
<Grid container spacing={2} alignItems="center">
314+
<Grid container spacing={2} sx={{ alignItems: 'center' }}>
315315
<Grid size={{ xs: 12, md: 8 }}>
316316
<RequiredTextField inputRef={questionInputRef} label="Question" value={newQuestion} onChange={(e) => setNewQuestion(e.target.value)} sx={{ width: '100%' }} onKeyDown={(e) => {
317317
if (e.key === 'Enter') {
@@ -338,7 +338,7 @@ const QuizForm = ({cancelCallback, successCallback, courseId, quizId, contentId,
338338
)) }
339339
</Box>
340340
{/* Quiz Settings Section */}
341-
<Box mt={3} mb={3}>
341+
<Box sx={{ mt: 3, mb: 3 }}>
342342
<Typography variant="h6" sx={{ mb: 2, fontSize: '1.1rem', color: 'secondary.main' }}>
343343
{localeMessages["quiz_settings"]}
344344
</Typography>
@@ -380,7 +380,7 @@ const QuizForm = ({cancelCallback, successCallback, courseId, quizId, contentId,
380380
value={requiredScore}
381381
onChange={(e) => setRequiredScore(e.target.value)}
382382
sx={{ width: '100%' }}
383-
inputProps={{ min: 0, max: 100 }}
383+
slotProps={{ htmlInput: { min: 0, max: 100 } }}
384384
disabled={userRole === 'viewer' || !isBlocking}
385385
/>
386386
</Tooltip>
@@ -402,7 +402,7 @@ const QuizForm = ({cancelCallback, successCallback, courseId, quizId, contentId,
402402
value={waitingPeriod}
403403
onChange={(e) => setWaitingPeriod(e.target.value)}
404404
sx={{ flex: 1 }}
405-
inputProps={{ min: 1 }}
405+
slotProps={{ htmlInput: { min: 1 } }}
406406
disabled={userRole === 'viewer'}
407407
/>
408408
<Select
@@ -461,7 +461,7 @@ const QuizForm = ({cancelCallback, successCallback, courseId, quizId, contentId,
461461
}
462462
}}
463463
sx={{ width: '100%' }}
464-
inputProps={{ min: hasDeadline ? 1 : 0 }}
464+
slotProps={{ htmlInput: { min: hasDeadline ? 1 : 0 } }}
465465
disabled={userRole === 'viewer' || !hasDeadline}
466466
/>
467467
</Tooltip>

0 commit comments

Comments
 (0)