From de843902dc0bbf7b00f4f066e8d2d688635f86e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julia=20S=C3=B6derlund?= <julia.soderlund@yandex.ru>
Date: Fri, 1 Aug 2025 18:47:30 +0300
Subject: [PATCH 1/2] Update admin page inputs to MUI v6

Added an icon button for the event priority
---
 .../src/pages/_admin/default/EventPriority.js | 28 +++++++++----------
 .../src/pages/_admin/default/NewBannerForm.js |  8 +++---
 .../pages/_admin/default/NewHackerpackForm.js |  8 +++---
 .../_admin/default/NewOrganizationForm.js     |  8 +++---
 4 files changed, 25 insertions(+), 27 deletions(-)

diff --git a/frontend/src/pages/_admin/default/EventPriority.js b/frontend/src/pages/_admin/default/EventPriority.js
index 5d09bf3e..74ada20c 100644
--- a/frontend/src/pages/_admin/default/EventPriority.js
+++ b/frontend/src/pages/_admin/default/EventPriority.js
@@ -1,8 +1,9 @@
 import React, { useCallback, useState, useEffect } from 'react'
 import { useSelector } from 'react-redux'
 
-import { Grid, Box, Typography } from '@mui/material'
-import Divider from 'components/generic/Divider'
+import { Grid2 as Grid, Box, Typography, IconButton } from '@mui/material'
+import AddCircle from '@mui/icons-material/AddCircle'
+import RemoveCircleIcon from '@mui/icons-material/RemoveCircle'
 
 import { useTranslation } from 'react-i18next'
 
@@ -37,20 +38,17 @@ export default ({ data = [] }) => {
             <Typography variant="h6" gutterBottom>
                 {t('event_priority_')}
             </Typography>
-            <Grid container spacing={3}>
+            <Grid container spacing={3} sx={{ p: 2 }}>
                 {events.map(event => (
-                    <Grid item key={event.slug}>
-                        <Box p={2}>
-                            {event.slug}
-                            <button onClick={() => handleClick(event, 1)}>
-                                +
-                            </button>
-                            {event.frontPagePriority}
-                            <button onClick={() => handleClick(event, -1)}>
-                                -
-                            </button>
-                        </Box>
-                        <Divider variant="middle" />
+                    <Grid key={event.slug}>
+                        {event.slug}
+                        <IconButton onClick={() => handleClick(event, 1)}>
+                            <AddCircle />
+                        </IconButton>
+                        {event.frontPagePriority}
+                        <IconButton onClick={() => handleClick(event, -1)}>
+                            <RemoveCircleIcon />
+                        </IconButton>
                     </Grid>
                 ))}
             </Grid>
diff --git a/frontend/src/pages/_admin/default/NewBannerForm.js b/frontend/src/pages/_admin/default/NewBannerForm.js
index 788a6285..e29a27be 100644
--- a/frontend/src/pages/_admin/default/NewBannerForm.js
+++ b/frontend/src/pages/_admin/default/NewBannerForm.js
@@ -1,7 +1,7 @@
 import React, { useState, useCallback, useEffect } from 'react'
 
 import { useSelector, useDispatch } from 'react-redux'
-import { Grid, Box, Typography } from '@mui/material'
+import { Grid2 as Grid, Box, Typography } from '@mui/material'
 
 import TextInput from 'components/inputs/TextInput'
 import Button from 'components/generic/Button'
@@ -71,12 +71,12 @@ export default () => {
                 Create new frontpage banner
             </Typography>
             <Grid container spacing={2} direction="row" alignItems="flex-end">
-                <Grid item xs={12}>
+                <Grid size={12}>
                     <Typography variant="caption" color="error">
                         {error}
                     </Typography>
                 </Grid>
-                <Grid item xs={12} sm={9}>
+                <Grid size={{ xs: 12, sm: 9 }}>
                     <TextInput
                         label="Banner name"
                         placeholder="Banner name"
@@ -85,7 +85,7 @@ export default () => {
                         disabled={loading}
                     />
                 </Grid>
-                <Grid item xs={12} sm={3}>
+                <Grid size={{ xs: 12, sm: 3 }}>
                     <Button
                         disabled={hasError}
                         onClick={handleCreate}
diff --git a/frontend/src/pages/_admin/default/NewHackerpackForm.js b/frontend/src/pages/_admin/default/NewHackerpackForm.js
index b4ba3344..9d2b6140 100644
--- a/frontend/src/pages/_admin/default/NewHackerpackForm.js
+++ b/frontend/src/pages/_admin/default/NewHackerpackForm.js
@@ -1,7 +1,7 @@
 import React, { useState, useCallback, useEffect } from 'react'
 
 import { useSelector, useDispatch } from 'react-redux'
-import { Grid, Box, Typography } from '@mui/material'
+import { Grid2 as Grid, Box, Typography } from '@mui/material'
 
 import TextInput from 'components/inputs/TextInput'
 import Button from 'components/generic/Button'
@@ -70,12 +70,12 @@ export default () => {
                 {t('Create_new_hackerpack_')}
             </Typography>
             <Grid container spacing={2} direction="row" alignItems="flex-end">
-                <Grid item xs={12}>
+                <Grid size={12}>
                     <Typography variant="caption" color="error">
                         {error}
                     </Typography>
                 </Grid>
-                <Grid item xs={12} sm={9}>
+                <Grid size={{ xs: 12, sm: 9 }}>
                     <TextInput
                         label={t('Hackerpack_name_')}
                         placeholder={t('Enter_hackerpack_name_')}
@@ -84,7 +84,7 @@ export default () => {
                         disabled={loading}
                     />
                 </Grid>
-                <Grid item xs={12} sm={3}>
+                <Grid size={{ xs: 12, sm: 3 }}>
                     <Button
                         disabled={hasError}
                         onClick={handleCreate}
diff --git a/frontend/src/pages/_admin/default/NewOrganizationForm.js b/frontend/src/pages/_admin/default/NewOrganizationForm.js
index c2acd8d1..54dab4d6 100644
--- a/frontend/src/pages/_admin/default/NewOrganizationForm.js
+++ b/frontend/src/pages/_admin/default/NewOrganizationForm.js
@@ -1,7 +1,7 @@
 import React, { useState, useCallback, useEffect } from 'react'
 
 import { useSelector, useDispatch } from 'react-redux'
-import { Grid, Box, Typography } from '@mui/material'
+import { Grid2 as Grid, Box, Typography } from '@mui/material'
 
 import TextInput from 'components/inputs/TextInput'
 import Button from 'components/generic/Button'
@@ -70,12 +70,12 @@ export default () => {
                 {t('Create_new_organization_')}
             </Typography>
             <Grid container spacing={2} direction="row" alignItems="flex-end">
-                <Grid item xs={12}>
+                <Grid size={12}>
                     <Typography variant="caption" color="error">
                         {error}
                     </Typography>
                 </Grid>
-                <Grid item xs={12} sm={9}>
+                <Grid size={{ xs: 12, sm: 9 }}>
                     <TextInput
                         label={t('Organization_name_')}
                         placeholder={t('Enter_organization_name_')}
@@ -84,7 +84,7 @@ export default () => {
                         disabled={loading}
                     />
                 </Grid>
-                <Grid item xs={12} sm={3}>
+                <Grid size={{ xs: 12, sm: 3 }}>
                     <Button
                         disabled={hasError}
                         onClick={handleCreate}

From 4bfbe61582d7a29ece46522294d96c6e7b5d1365 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julia=20S=C3=B6derlund?= <julia.soderlund@yandex.ru>
Date: Wed, 6 Aug 2025 17:15:51 +0300
Subject: [PATCH 2/2] Updated styles and routing on admin default page

---
 .../src/pages/_admin/default/BannerList.js    | 64 +++++++++----------
 .../pages/_admin/default/HackerpackList.js    |  7 +-
 .../pages/_admin/default/OrganizationList.js  | 46 ++++---------
 .../pages/_admin/default/UnapprovedEvents.js  | 59 ++++++++---------
 4 files changed, 70 insertions(+), 106 deletions(-)

diff --git a/frontend/src/pages/_admin/default/BannerList.js b/frontend/src/pages/_admin/default/BannerList.js
index df6bceae..9bc6b65c 100644
--- a/frontend/src/pages/_admin/default/BannerList.js
+++ b/frontend/src/pages/_admin/default/BannerList.js
@@ -1,9 +1,7 @@
 import React, { useCallback, useState, useEffect } from 'react'
-import { useSelector, useDispatch } from 'react-redux'
+import { useSelector } from 'react-redux'
 
-import { Grid, Box, Typography } from '@mui/material'
-
-import Divider from 'components/generic/Divider'
+import { Grid2 as Grid, Box, Typography } from '@mui/material'
 
 import { useTranslation } from 'react-i18next'
 import { IconButton } from '@mui/material'
@@ -12,9 +10,10 @@ import EditIcon from '@mui/icons-material/Edit'
 
 import BannerService from 'services/banner'
 import * as AuthSelectors from 'reducers/auth/selectors'
+import { useNavigate } from 'react-router-dom'
 
 export default ({ data = [] }) => {
-    const dispatch = useDispatch()
+    const navigate = useNavigate()
     const { t } = useTranslation()
     const idToken = useSelector(AuthSelectors.getIdToken)
     const [banner, setBanner] = useState(data)
@@ -43,36 +42,31 @@ export default ({ data = [] }) => {
             </Typography>
             <Grid container spacing={3}>
                 {banner.map(company => (
-                    <div key={company.slug}>
-                        <Box p={2}>
-                            <IconButton
-                                edge="end"
-                                aria-label="delete"
-                                onClick={() => handleRemove(company.slug)}
-                            >
-                                <DeleteIcon />
-                            </IconButton>
-                            <IconButton
-                                edge="end"
-                                aria-label="edit"
-                                onClick={() =>
-                                    dispatch(
-                                        push(`admin/banner/${company.slug}`),
-                                    )
-                                }
-                            >
-                                <EditIcon />
-                            </IconButton>
-                            <span>{company.name}</span>
-                            <span>{company.icon}</span>
-                            {company.buttons.map(i => (
-                                <>
-                                    <span>{i.text}</span> <span>{i.push}</span>
-                                </>
-                            ))}
-                        </Box>
-                        <Divider variant="middle" />
-                    </div>
+                    <Box p={2} key={company.slug}>
+                        <IconButton
+                            edge="end"
+                            aria-label="delete"
+                            onClick={() => handleRemove(company.slug)}
+                        >
+                            <DeleteIcon />
+                        </IconButton>
+                        <IconButton
+                            edge="end"
+                            aria-label="edit"
+                            onClick={() =>
+                                navigate(`admin/banner/${company.slug}`)
+                            }
+                        >
+                            <EditIcon />
+                        </IconButton>
+                        <span>{company.name}</span>
+                        <span>{company.icon}</span>
+                        {company.buttons.map(i => (
+                            <>
+                                <span>{i.text}</span> <span>{i.push}</span>
+                            </>
+                        ))}
+                    </Box>
                 ))}
             </Grid>
         </Box>
diff --git a/frontend/src/pages/_admin/default/HackerpackList.js b/frontend/src/pages/_admin/default/HackerpackList.js
index 97f98cad..11692539 100644
--- a/frontend/src/pages/_admin/default/HackerpackList.js
+++ b/frontend/src/pages/_admin/default/HackerpackList.js
@@ -1,9 +1,8 @@
 import React, { useCallback, useState, useEffect } from 'react'
-import { useSelector, useDispatch } from 'react-redux'
+import { useSelector } from 'react-redux'
 
-import { Grid, Box, Typography } from '@mui/material'
+import { Grid2 as Grid, Box, Typography } from '@mui/material'
 import CompanySection from 'components/hackerpack/CompanySection'
-import Divider from 'components/generic/Divider'
 
 import { useTranslation } from 'react-i18next'
 import { IconButton } from '@mui/material'
@@ -16,7 +15,6 @@ import { useNavigate } from 'react-router-dom'
 
 export default ({ data = [] }) => {
     const navigate = useNavigate()
-    const dispatch = useDispatch()
     const { t } = useTranslation()
     const idToken = useSelector(AuthSelectors.getIdToken)
     const [hackerpack, setHackerpack] = useState(data)
@@ -72,7 +70,6 @@ export default ({ data = [] }) => {
                                 link={company.link}
                             />
                         </Box>
-                        <Divider variant="middle" />
                     </>
                 ))}
             </Grid>
diff --git a/frontend/src/pages/_admin/default/OrganizationList.js b/frontend/src/pages/_admin/default/OrganizationList.js
index 907492a8..91379845 100644
--- a/frontend/src/pages/_admin/default/OrganizationList.js
+++ b/frontend/src/pages/_admin/default/OrganizationList.js
@@ -1,7 +1,7 @@
 import React, { useCallback, useState, useEffect } from 'react'
-import { useSelector, useDispatch } from 'react-redux'
+import { useSelector } from 'react-redux'
 
-import { Grid, Box, Typography } from '@mui/material'
+import { Grid2 as Grid, Box, Typography } from '@mui/material'
 
 import Button from 'components/generic/Button'
 
@@ -11,28 +11,15 @@ import GradientBox from 'components/generic/GradientBox'
 import { IconButton } from '@mui/material'
 import DeleteIcon from '@mui/icons-material/Delete'
 import EditIcon from '@mui/icons-material/Edit'
-import Divider from 'components/generic/Divider'
 
 import { useTranslation } from 'react-i18next'
 
 import OrganizationService from 'services/organization'
 import * as AuthSelectors from 'reducers/auth/selectors'
-
-// const useStyles = makeStyles(theme => ({
-//     outboundLink: {
-//         '& a': {
-//             textDecoration: 'none !important',
-//         },
-//     },
-//     companyLogo: {
-//         width: '200px',
-//         height: '50px;',
-//     },
-// }))
+import { useNavigate } from 'react-router-dom'
 
 export default ({ data = [] }) => {
-    const dispatch = useDispatch()
-    // const classes = useStyles()
+    const navigate = useNavigate()
     const { t } = useTranslation()
     const idToken = useSelector(AuthSelectors.getIdToken)
     const [organization, setOrganization] = useState(data)
@@ -65,29 +52,26 @@ export default ({ data = [] }) => {
             <Grid container spacing={3}>
                 {organization.map(org => (
                     <>
-                        <Grid item xs={12} md={12} xl={12}>
+                        <Grid size={12}>
                             <GradientBox color="theme_white" p={3}>
                                 <Grid container justifyContent="center">
-                                    <Grid item xs={3}>
+                                    <Grid size={3}>
                                         <img
                                             alt={org.name}
                                             src={org.icon}
-                                            // className={classes.companyLogo}
+                                            height={'50px'}
+                                            width={'200px'}
                                         />
                                     </Grid>
-                                    <Grid item xs={3}>
+                                    <Grid size={3}>
                                         <Typography variant="h5">
                                             {org.name}
                                         </Typography>
                                     </Grid>
-                                    <Grid item xs={3}>
+                                    <Grid size={3}>
                                         <Typography>{org.about}</Typography>
                                     </Grid>
-                                    <Grid
-                                        item
-                                        xs={3}
-                                        // className={classes.outboundLink}
-                                    >
+                                    <Grid size={3}>
                                         <OutboundLink
                                             eventLabel="myLabel"
                                             to={org.link}
@@ -105,10 +89,8 @@ export default ({ data = [] }) => {
                                             edge="end"
                                             aria-label="edit"
                                             onClick={() =>
-                                                dispatch(
-                                                    push(
-                                                        `admin/organization/${org.slug}`,
-                                                    ),
+                                                navigate(
+                                                    `admin/organization/${org.slug}`,
                                                 )
                                             }
                                         >
@@ -127,8 +109,6 @@ export default ({ data = [] }) => {
                                 </Grid>
                             </GradientBox>
                         </Grid>
-
-                        <Divider variant="middle" />
                     </>
                 ))}
             </Grid>
diff --git a/frontend/src/pages/_admin/default/UnapprovedEvents.js b/frontend/src/pages/_admin/default/UnapprovedEvents.js
index 0a4cbf51..dc142ef4 100644
--- a/frontend/src/pages/_admin/default/UnapprovedEvents.js
+++ b/frontend/src/pages/_admin/default/UnapprovedEvents.js
@@ -1,9 +1,8 @@
 import React, { useCallback, useState, useEffect } from 'react'
-import { useSelector, useDispatch } from 'react-redux'
+import { useSelector } from 'react-redux'
 
-import { Grid, Box, Typography } from '@mui/material'
+import { Grid2 as Grid, Box, Typography } from '@mui/material'
 import EventCardSmall from 'components/events/EventCardSmall'
-import Divider from 'components/generic/Divider'
 
 import { useTranslation } from 'react-i18next'
 import { IconButton } from '@mui/material'
@@ -12,9 +11,10 @@ import ThumbUpIcon from '@mui/icons-material/ThumbUp'
 
 import EventService from 'services/events'
 import * as AuthSelectors from 'reducers/auth/selectors'
+import { useNavigate } from 'react-router-dom'
 
 export default ({ data = [] }) => {
-    const dispatch = useDispatch()
+    const navigate = useNavigate()
     const { t } = useTranslation()
     const idToken = useSelector(AuthSelectors.getIdToken)
     const [events, setEvents] = useState(data)
@@ -54,35 +54,28 @@ export default ({ data = [] }) => {
             <Grid container spacing={3}>
                 {events.map(event =>
                     event.published ? (
-                        <div key={event.slug}>
-                            <Box p={2}>
-                                <IconButton
-                                    edge="end"
-                                    aria-label="delete"
-                                    onClick={() => handleRemove(event.slug)}
-                                >
-                                    <DeleteIcon />
-                                </IconButton>
-                                <IconButton
-                                    edge="end"
-                                    aria-label="Approve"
-                                    onClick={() => handleApprove(event.slug)}
-                                >
-                                    <ThumbUpIcon />
-                                </IconButton>
-                                <EventCardSmall
-                                    event={event}
-                                    handleClick={event =>
-                                        dispatch(
-                                            push(
-                                                `/organise/${event?.slug}/edit`,
-                                            ),
-                                        )
-                                    }
-                                />
-                            </Box>
-                            <Divider variant="middle" />
-                        </div>
+                        <Box p={2} key={event.slug}>
+                            <IconButton
+                                edge="end"
+                                aria-label="delete"
+                                onClick={() => handleRemove(event.slug)}
+                            >
+                                <DeleteIcon />
+                            </IconButton>
+                            <IconButton
+                                edge="end"
+                                aria-label="Approve"
+                                onClick={() => handleApprove(event.slug)}
+                            >
+                                <ThumbUpIcon />
+                            </IconButton>
+                            <EventCardSmall
+                                event={event}
+                                handleClick={event =>
+                                    navigate(`/organise/${event?.slug}/edit`)
+                                }
+                            />
+                        </Box>
                     ) : null,
                 )}
             </Grid>