From 47e9a71cf2b3329fe1003ba9b7015ddf67cfa70a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julia=20S=C3=B6derlund?= <julia.soderlund@yandex.ru>
Date: Wed, 9 Jul 2025 21:26:11 +0300
Subject: [PATCH 1/6] Update ImageUpload to MUI v6

---
 .../components/inputs/ImageUpload/index.js    | 135 +++++++++++-------
 1 file changed, 84 insertions(+), 51 deletions(-)

diff --git a/frontend/src/components/inputs/ImageUpload/index.js b/frontend/src/components/inputs/ImageUpload/index.js
index 825a3be84..010bcf3de 100644
--- a/frontend/src/components/inputs/ImageUpload/index.js
+++ b/frontend/src/components/inputs/ImageUpload/index.js
@@ -1,12 +1,54 @@
 import React, { useState, useCallback } from 'react'
 import Upload from 'antd/es/upload'
 import { useDispatch, useSelector } from 'react-redux'
+
 import { Box, Typography, CircularProgress } from '@mui/material'
 import DeleteIcon from '@mui/icons-material/Delete'
 import VisibilityIcon from '@mui/icons-material/Visibility'
+import { styled } from '@mui/material/styles'
+
 import * as AuthSelectors from 'reducers/auth/selectors'
 import * as SnackbarActions from 'reducers/snackbar/actions'
-import clsx from 'clsx'
+
+const EmptyWrapper = styled('div')({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+})
+
+const ButtonOverlay = styled('div')({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    background: 'rgba(0,0,0,0.6)',
+    opacity: 0,
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    transition: 'opacity 0.2s ease',
+    '&:hover': {
+        opacity: 1,
+    },
+    color: 'white',
+})
+
+const ImageButton = styled('div')({
+    padding: '8px',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '16px',
+    '&:hover': {
+        background: 'rgba(255,255,255,0.2)',
+    },
+})
 
 const ImageUpload = ({
     value,
@@ -75,65 +117,56 @@ const ImageUpload = ({
     )
 
     const renderLoading = () => (
-        <Box className="absolute top-0 left-0 w-full h-full flex flex-col justify-center items-center cursor-pointer bg-gray-200">
-            <CircularProgress size={24} className="text-black" />
-        </Box>
+        <EmptyWrapper>
+            <CircularProgress size={24} />
+        </EmptyWrapper>
+    )
+
+    const renderEmpty = () => (
+        <EmptyWrapper>
+            <Typography>Click or drag a file to upload</Typography>
+        </EmptyWrapper>
     )
 
     const renderImage = () => (
-        <Box className="relative w-full h-full">
-            <img
-                className={clsx(
-                    'absolute top-0 left-0 w-full h-full object-contain',
-                    {
-                        'object-contain': resizeMode === 'contain',
-                        'object-cover': resizeMode === 'cover',
-                    },
-                )}
+        <>
+            <Box
+                component="img"
+                sx={{
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    width: '100%',
+                    height: '100%',
+                    objectFit: resizeMode,
+                }}
                 src={value.url}
                 alt="upload"
             />
-            <Box className="absolute top-0 left-0 w-full h-full bg-black bg-opacity-60 flex flex-col justify-center items-center opacity-0 transition-opacity duration-200 hover:opacity-100 cursor-pointer">
-                <Box
-                    className="flex flex-row items-center p-2 hover:bg-white hover:bg-opacity-20"
-                    onClick={handleRemove}
-                >
-                    <DeleteIcon className="text-white" />
-                    <Box p={1} />
-                    <Typography
-                        variant="button"
-                        className="text-white select-none"
-                    >
-                        Remove image
-                    </Typography>
-                </Box>
-                <Box
-                    className="flex flex-row items-center p-2 hover:bg-white hover:bg-opacity-20"
-                    onClick={() => window.open(value.url, '_blank')}
-                >
-                    <VisibilityIcon className="text-white" />
-                    <Box p={1} />
-                    <Typography
-                        variant="button"
-                        className="text-white select-none"
-                    >
-                        View original
-                    </Typography>
-                </Box>
-            </Box>
-        </Box>
-    )
-
-    const renderEmpty = () => (
-        <Box className="absolute top-0 left-0 w-full h-full flex flex-col justify-center items-center cursor-pointer bg-gray-200">
-            <Typography className="text-center text-black select-none">
-                Click or drag a file to upload
-            </Typography>
-        </Box>
+            <ButtonOverlay>
+                <ImageButton onClick={handleRemove}>
+                    <DeleteIcon />
+                    <Typography variant="button">Remove image</Typography>
+                </ImageButton>
+                <ImageButton onClick={() => window.open(value.url, '_blank')}>
+                    <VisibilityIcon />
+                    <Typography variant="button">View original</Typography>
+                </ImageButton>
+            </ButtonOverlay>
+        </>
     )
 
     return (
-        <Box className="relative w-full h-full bg-gray-100">
+        <Box
+            sx={{
+                backgroundColor: '#f7fafc',
+                width: '100%',
+                height: '100%',
+                position: 'relative',
+                cursor: 'pointer',
+                userSelect: 'none',
+            }}
+        >
             <Upload
                 name="image"
                 listType="picture"

From df39e68bfa4b8070c9cef4800f28b19fc6022bee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julia=20S=C3=B6derlund?= <julia.soderlund@yandex.ru>
Date: Wed, 9 Jul 2025 22:27:34 +0300
Subject: [PATCH 2/6] Delete old /account page and account navbar

---
 .../components/navbars/AccountNavBar/index.js | 24 ---------
 .../src/pages/_account/dashboard/index.js     | 49 -------------------
 frontend/src/pages/_account/index.js          | 48 ------------------
 frontend/src/routes.js                        |  5 --
 4 files changed, 126 deletions(-)
 delete mode 100644 frontend/src/components/navbars/AccountNavBar/index.js
 delete mode 100644 frontend/src/pages/_account/dashboard/index.js
 delete mode 100644 frontend/src/pages/_account/index.js

diff --git a/frontend/src/components/navbars/AccountNavBar/index.js b/frontend/src/components/navbars/AccountNavBar/index.js
deleted file mode 100644
index 3379c201a..000000000
--- a/frontend/src/components/navbars/AccountNavBar/index.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react'
-import { useSelector } from 'react-redux'
-import UserMenu from 'components/UserMenu'
-import * as UserSelectors from 'reducers/user/selectors'
-
-const Header = () => {
-    const userProfile = useSelector(UserSelectors.userProfile)
-    return (
-        <div className="w-full h-20 bg-white px-4">
-            <div className="flex flex-row items-center justify-between h-full">
-                <div>
-                    <span className="text-lg text-black uppercase">
-                        Hi, {userProfile?.firstName}
-                    </span>
-                </div>
-                <div className="flex flex-row items-center">
-                    <UserMenu />
-                </div>
-            </div>
-        </div>
-    )
-}
-
-export default Header
diff --git a/frontend/src/pages/_account/dashboard/index.js b/frontend/src/pages/_account/dashboard/index.js
deleted file mode 100644
index 0aae93693..000000000
--- a/frontend/src/pages/_account/dashboard/index.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from 'react'
-
-import { useSelector } from 'react-redux'
-import { Grid, Box, Typography } from '@mui/material'
-
-import * as AuthSelectors from 'reducers/auth/selectors'
-
-import EventCardSmall from 'components/events/EventCardSmall'
-import PageWrapper from 'components/layouts/PageWrapper'
-
-import { useRegistrationsByUser } from 'graphql/queries/registrations'
-import { useTranslation } from 'react-i18next'
-import { useNavigate } from 'react-router-dom'
-
-export default () => {
-    const navigate = useNavigate()
-    const userId = useSelector(AuthSelectors.getUserId)
-    const [registrations = [], loading, error] = useRegistrationsByUser(userId)
-    const { t } = useTranslation()
-
-    return (
-        <PageWrapper loading={loading} error={Boolean(error)}>
-            <Box p={2}>
-                <Grid container spacing={3}>
-                    <Grid item xs={12}>
-                        <Typography variant="h6" gutterBottom>
-                            {t('Your_registrations_')}
-                        </Typography>
-                        {registrations.length === 0 && (
-                            <Typography variant="body1">
-                                {t('Looks_like_register_')}
-                            </Typography>
-                        )}
-                    </Grid>
-                    {registrations.map(registration => (
-                        <Grid key={registration.id} item xs={12} md={6}>
-                            <EventCardSmall
-                                event={registration.event}
-                                handleClick={event =>
-                                    navigate(`/dashboard/event/${event?.slug}`)
-                                }
-                            />
-                        </Grid>
-                    ))}
-                </Grid>
-            </Box>
-        </PageWrapper>
-    )
-}
diff --git a/frontend/src/pages/_account/index.js b/frontend/src/pages/_account/index.js
deleted file mode 100644
index f04a6a675..000000000
--- a/frontend/src/pages/_account/index.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import React from 'react'
-
-import { useResolvedPath, useLocation } from 'react-router'
-
-import MaterialTabsLayout from 'components/layouts/MaterialTabsLayout'
-// import AccountNavBar from 'components/navbars/AccountNavBar'
-import GlobalNavBar from 'components/navbars/GlobalNavBar'
-
-import Footer from 'components/layouts/Footer'
-import PageWrapper from 'components/layouts/PageWrapper'
-
-import Dashboard from './dashboard'
-import Profile from './profile'
-
-import { useTranslation } from 'react-i18next'
-
-export default () => {
-    const url = useResolvedPath('').pathname
-    const location = useLocation()
-    const { t } = useTranslation()
-    return (
-        <PageWrapper
-            header={() => <GlobalNavBar />}
-            footer={() => <Footer />}
-            render={() => (
-                <MaterialTabsLayout
-                    transparent
-                    tabs={[
-                        {
-                            label: t('Dashboard_'),
-                            key: 'dashboard',
-                            path: '',
-                            component: Dashboard,
-                        },
-                        {
-                            label: t('Profile_'),
-                            key: 'profile',
-                            path: '/profile',
-                            component: Profile,
-                        },
-                    ]}
-                    baseRoute={url}
-                    location={location}
-                />
-            )}
-        />
-    )
-}
diff --git a/frontend/src/routes.js b/frontend/src/routes.js
index da927bcf7..d879b0388 100644
--- a/frontend/src/routes.js
+++ b/frontend/src/routes.js
@@ -23,7 +23,6 @@ const DashboardRouter = lazy(() => import('./pages/_dashboard'))
 const OrganiserRouter = lazy(
     () => import('./pages/_dashboard/renderDashboard/organiser/router'),
 )
-const AccountRouter = lazy(() => import('./pages/_account'))
 const RecruitmentEvents = lazy(
     () => import('./pages/_dashboard/renderDashboard/default/events/Partner'),
 )
@@ -77,10 +76,6 @@ const routes = [
         path: '/dashboard/*',
         element: <RequiresPermission ComposedComponent={DashboardRouter} />,
     },
-    {
-        path: '/account/*',
-        element: <RequiresPermission ComposedComponent={AccountRouter} />,
-    },
     {
         path: '/recruitment',
         element: (

From 2b975631a85d3d394ad946ce52c32a7f54d2fb36 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julia=20S=C3=B6derlund?= <julia.soderlund@yandex.ru>
Date: Thu, 17 Jul 2025 19:52:52 +0300
Subject: [PATCH 3/6] Update select box to MUI v6

- Removed the Menu component
- Removed the NoOptions component (default looks
better)
---
 .../src/components/inputs/Select/index.js     | 150 +++++++-----------
 1 file changed, 54 insertions(+), 96 deletions(-)

diff --git a/frontend/src/components/inputs/Select/index.js b/frontend/src/components/inputs/Select/index.js
index 2d8b53ff3..7ef877726 100644
--- a/frontend/src/components/inputs/Select/index.js
+++ b/frontend/src/components/inputs/Select/index.js
@@ -1,32 +1,15 @@
 import React, { useMemo, useCallback } from 'react'
 import PropTypes from 'prop-types'
-import clsx from 'clsx'
 import Select from 'react-select'
 import CreatableSelect from 'react-select/creatable'
-import { SelectOptions } from '@hackjunction/shared'
 import Typography from '@mui/material/Typography'
 import TextField from '@mui/material/TextField'
-import Paper from '@mui/material/Paper'
 import Chip from '@mui/material/Chip'
 import Avatar from '@mui/material/Avatar'
 import MenuItem from '@mui/material/MenuItem'
+import Box from '@mui/material/Box'
 import CancelIcon from '@mui/icons-material/Cancel'
-
-const NoOptionsMessage = props => (
-    // <Typography
-    //     color="textSecondary"
-    //     className={props.selectProps.classes.noOptionsMessage}
-    //     {...props.innerProps}
-    // >
-    <div>{props.children}</div>
-)
-// {/* </Typography> */}
-
-NoOptionsMessage.propTypes = {
-    children: PropTypes.node,
-    innerProps: PropTypes.object.isRequired,
-    selectProps: PropTypes.object.isRequired,
-}
+import { SelectOptions } from '@hackjunction/shared'
 
 const inputComponent = ({ inputRef, ...props }) => (
     <div ref={inputRef} {...props} />
@@ -52,16 +35,19 @@ const Control = props => {
     return (
         <TextField
             fullWidth
-            InputProps={{
-                inputComponent,
-                inputProps: {
-                    className: 'flex p-0 h-auto',
-                    ref: innerRef,
-                    children,
-                    ...innerProps,
+            variant="standard"
+            {...TextFieldProps}
+            slotProps={{
+                input: {
+                    inputComponent,
+                    inputProps: {
+                        sx: { display: 'flex', p: 0, height: 'auto' },
+                        ref: innerRef,
+                        children,
+                        ...innerProps,
+                    },
                 },
             }}
-            {...TextFieldProps}
         />
     )
 }
@@ -116,30 +102,25 @@ Option.propTypes = {
     isSelected: PropTypes.bool.isRequired,
 }
 
-// const Placeholder = props => (
-//     <Typography
-//         color="textSecondary"
-//         className={props.selectProps.classes.placeholder}
-//         {...props.innerProps}
-//     >
-//         {props.children}
-//     </Typography>
-// )
+const Placeholder = props => (
+    <Typography
+        color="textSecondary"
+        sx={{ position: 'absolute', left: 2, bottom: 6, fontSize: 16 }}
+        {...props.innerProps}
+    >
+        {props.children}
+    </Typography>
+)
 
-// Placeholder.propTypes = {
-//     children: PropTypes.node,
-//     innerProps: PropTypes.object,
-//     selectProps: PropTypes.object.isRequired,
-// }
+Placeholder.propTypes = {
+    children: PropTypes.node,
+    innerProps: PropTypes.object,
+    selectProps: PropTypes.object.isRequired,
+}
 
 const SingleValue = props => (
-    // <Typography
-    //     className={props.selectProps.classes.singleValue}
-    //     {...props.innerProps}
-    // >
-    <div>{props.children}</div>
+    <Typography {...props.innerProps}>{props.children}</Typography>
 )
-// {/* </Typography> */}
 
 SingleValue.propTypes = {
     children: PropTypes.node,
@@ -147,25 +128,31 @@ SingleValue.propTypes = {
     selectProps: PropTypes.object.isRequired,
 }
 
-// const ValueContainer = props => (
-//     <div className={props.selectProps.classes.valueContainer}>
-//         {props.children}
-//     </div>
-// )
+const ValueContainer = props => (
+    <Box
+        sx={{
+            display: 'flex',
+            flexWrap: 'wrap',
+            flex: 1,
+            alignItems: 'center',
+            overflow: 'hidden',
+        }}
+    >
+        {props.children}
+    </Box>
+)
 
-// ValueContainer.propTypes = {
-//     children: PropTypes.node,
-//     selectProps: PropTypes.object.isRequired,
-// }
+ValueContainer.propTypes = {
+    children: PropTypes.node,
+    selectProps: PropTypes.object.isRequired,
+}
 
 const MultiValue = props => (
     <Chip
         avatar={props.data.icon ? <Avatar src={props.data.icon} /> : null}
         tabIndex={-1}
         label={props.children}
-        className={clsx(props.selectProps.classes?.chip, {
-            [props.selectProps.classes?.chipFocused]: props.isFocused,
-        })}
+        sx={{ margin: '0.25rem 0.125rem' }}
         onDelete={props.removeProps.onClick}
         deleteIcon={<CancelIcon {...props.removeProps} />}
     />
@@ -182,31 +169,14 @@ MultiValue.propTypes = {
     selectProps: PropTypes.object.isRequired,
 }
 
-const Menu = props => (
-    // <Paper
-    //     square
-    //     className={props.selectProps.classes.paper}
-    //     {...props.innerProps}
-    // >
-    <div>{props.children}</div>
-)
-
-// {/* </Paper> */}
-Menu.propTypes = {
-    children: PropTypes.element.isRequired,
-    innerProps: PropTypes.object.isRequired,
-    selectProps: PropTypes.object.isRequired,
-}
-
+//https://react-select.com/components
 const components = {
     Control,
-    Menu,
     MultiValue,
-    NoOptionsMessage,
     Option,
-    // Placeholder,
+    Placeholder,
     SingleValue,
-    // ValueContainer,
+    ValueContainer,
 }
 
 const IntegrationReactSelect = ({
@@ -220,23 +190,12 @@ const IntegrationReactSelect = ({
     onBlur,
     onChange,
     options = [],
-    // placeholder,
+    placeholder,
     value,
     allowCreate = false,
 }) => {
-    // const theme = useTheme()
     const inputId = 'select-' + name
 
-    // const selectStyles = {
-    //     input: base => ({
-    //         ...base,
-    //         color: theme.palette.text.primary,
-    //         '& input': {
-    //             font: 'inherit',
-    //         },
-    //     }),
-    // }
-
     const _options = useMemo(() => {
         if (Array.isArray(options)) {
             return options
@@ -335,7 +294,6 @@ const IntegrationReactSelect = ({
     const SelectProps = {
         isDisabled: disabled,
         autoFocus,
-        // styles: selectStyles,
         inputId,
         TextFieldProps: {
             label,
@@ -344,7 +302,7 @@ const IntegrationReactSelect = ({
                 shrink: true,
             },
         },
-        // placeholder,
+        placeholder,
         options: _options,
         components,
         value: transformedInput,
@@ -356,13 +314,13 @@ const IntegrationReactSelect = ({
     }
 
     return (
-        <div className="flex-grow">
+        <Box sx={{ flexGrow: 1 }}>
             {allowCreate ? (
                 <CreatableSelect {...SelectProps} />
             ) : (
                 <Select {...SelectProps} />
             )}
-        </div>
+        </Box>
     )
 }
 
@@ -378,7 +336,7 @@ IntegrationReactSelect.propTypes = {
     onChange: PropTypes.func.isRequired,
     options: PropTypes.oneOfType([PropTypes.array, PropTypes.string])
         .isRequired,
-    // placeholder: PropTypes.string,
+    placeholder: PropTypes.string,
     value: PropTypes.any,
     allowCreate: PropTypes.bool,
 }

From 11fb1662e7831c95277578db70f3149f3878bd9b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julia=20S=C3=B6derlund?= <julia.soderlund@yandex.ru>
Date: Sat, 19 Jul 2025 23:54:57 +0300
Subject: [PATCH 4/6] Update inputs on the profile page to MUI v6

---
 .../components/inputs/BooleanInput/index.js   |  5 +-
 .../src/components/inputs/DateInput/index.js  | 23 +++++--
 .../components/inputs/EducationInput/index.js | 12 ++--
 .../components/inputs/JobRoleInput/index.js   | 35 ++++++-----
 .../inputs/PhoneNumberInput/index.js          | 16 ++++-
 .../inputs/RecruitmentOptionInput/index.js    |  8 +--
 .../components/inputs/SkillsInput/index.js    | 62 ++++++++++---------
 .../components/inputs/TextAreaInput/index.js  |  8 ++-
 .../src/components/inputs/TextInput/index.js  |  3 +
 9 files changed, 105 insertions(+), 67 deletions(-)

diff --git a/frontend/src/components/inputs/BooleanInput/index.js b/frontend/src/components/inputs/BooleanInput/index.js
index bbfb10fbc..046750ad5 100644
--- a/frontend/src/components/inputs/BooleanInput/index.js
+++ b/frontend/src/components/inputs/BooleanInput/index.js
@@ -43,9 +43,8 @@ const BooleanInput = ({ value, onChange, alignCenter = false }) => {
     return (
         <Box>
             <RadioGroup
-                className={`flex flex-row flex-wrap ${
-                    alignCenter ? 'justify-center' : 'justify-start'
-                }`}
+                row
+                sx={{ justifyContent: alignCenter ? 'center' : 'start' }}
                 aria-label="yes-no"
                 value={value}
                 onChange={handleChange}
diff --git a/frontend/src/components/inputs/DateInput/index.js b/frontend/src/components/inputs/DateInput/index.js
index 1b014b039..44409df17 100644
--- a/frontend/src/components/inputs/DateInput/index.js
+++ b/frontend/src/components/inputs/DateInput/index.js
@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react'
 
-import { Grid, Box, Typography } from '@mui/material'
+import { Grid2 as Grid, Box, Typography } from '@mui/material'
 import moment from 'moment'
 import Select from 'components/inputs/Select'
 
@@ -38,7 +38,12 @@ const DateInput = ({ label, value, onChange, onBlur, disableFutureYears }) => {
         <Box>
             {label && <Typography variant="subtitle1">{label}</Typography>}
             <Grid container spacing={3}>
-                <Grid item xs={4} md={4}>
+                <Grid
+                    size={{
+                        xs: 4,
+                        md: 4,
+                    }}
+                >
                     <Select
                         label="Day"
                         options="day"
@@ -46,7 +51,12 @@ const DateInput = ({ label, value, onChange, onBlur, disableFutureYears }) => {
                         onChange={handleDateChange}
                     />
                 </Grid>
-                <Grid item xs={8} md={4}>
+                <Grid
+                    size={{
+                        xs: 8,
+                        md: 4,
+                    }}
+                >
                     <Select
                         label="Month"
                         options="month"
@@ -54,7 +64,12 @@ const DateInput = ({ label, value, onChange, onBlur, disableFutureYears }) => {
                         onChange={handleMonthChange}
                     />
                 </Grid>
-                <Grid item xs={12} md={4}>
+                <Grid
+                    size={{
+                        xs: 12,
+                        md: 4,
+                    }}
+                >
                     <Select
                         label="Year"
                         options={disableFutureYears ? 'year' : 'year-future'}
diff --git a/frontend/src/components/inputs/EducationInput/index.js b/frontend/src/components/inputs/EducationInput/index.js
index 4ee4ec438..65bd7860d 100644
--- a/frontend/src/components/inputs/EducationInput/index.js
+++ b/frontend/src/components/inputs/EducationInput/index.js
@@ -1,7 +1,7 @@
 import React, { useRef, useMemo, useCallback } from 'react'
 
 import { Universities, Countries } from '@hackjunction/shared'
-import { Grid } from '@mui/material'
+import { Grid2 as Grid } from '@mui/material'
 
 import TextInput from 'components/inputs/TextInput'
 import Select from 'components/inputs/Select'
@@ -93,7 +93,7 @@ const EducationInput = ({ value = {}, onChange, onBlur, autoFocus }) => {
     // console.log('counry here', value, country)
     return (
         <Grid container spacing={3}>
-            <Grid item xs={12}>
+            <Grid size={12}>
                 <Select
                     autoFocus={autoFocus}
                     innerRef={selectEl}
@@ -106,7 +106,7 @@ const EducationInput = ({ value = {}, onChange, onBlur, autoFocus }) => {
             </Grid>
             {!fieldsDisabled && (
                 <>
-                    <Grid item xs={6}>
+                    <Grid size={6}>
                         <Select
                             label="Country of study"
                             placeholder="Choose country"
@@ -117,7 +117,7 @@ const EducationInput = ({ value = {}, onChange, onBlur, autoFocus }) => {
                             }
                         />
                     </Grid>
-                    <Grid item xs={6}>
+                    <Grid size={6}>
                         <Select
                             disabled={fieldsDisabled}
                             label="University"
@@ -134,7 +134,7 @@ const EducationInput = ({ value = {}, onChange, onBlur, autoFocus }) => {
                             allowCreate
                         />
                     </Grid>
-                    <Grid item xs={6}>
+                    <Grid size={6}>
                         <TextInput
                             disabled={fieldsDisabled}
                             label="Field of study"
@@ -143,7 +143,7 @@ const EducationInput = ({ value = {}, onChange, onBlur, autoFocus }) => {
                             onChange={degree => handleChange('degree', degree)}
                         />
                     </Grid>
-                    <Grid item xs={6}>
+                    <Grid size={6}>
                         <Select
                             disabled={fieldsDisabled}
                             label="Graduation year"
diff --git a/frontend/src/components/inputs/JobRoleInput/index.js b/frontend/src/components/inputs/JobRoleInput/index.js
index b006a6efc..9b5cf0e1b 100644
--- a/frontend/src/components/inputs/JobRoleInput/index.js
+++ b/frontend/src/components/inputs/JobRoleInput/index.js
@@ -1,6 +1,6 @@
 import React, { useCallback, useState, useRef } from 'react'
 import {
-    Grid,
+    Grid2 as Grid,
     Typography,
     Button,
     Box,
@@ -10,7 +10,6 @@ import {
     List,
     ListItem,
     ListItemText,
-    ListItemSecondaryAction,
     Divider,
 } from '@mui/material'
 import { Roles } from '@hackjunction/shared'
@@ -64,7 +63,7 @@ export default ({ value = [], onChange, autoFocus }) => {
 
     return (
         <Grid container spacing={3}>
-            <Grid item xs={12}>
+            <Grid size={12}>
                 <Select
                     autoFocus={autoFocus}
                     innerRef={selectEl}
@@ -75,12 +74,12 @@ export default ({ value = [], onChange, autoFocus }) => {
                     onChange={setRole}
                 />
             </Grid>
-            <Grid item xs={4}>
+            <Grid size={4}>
                 <Typography variant="subtitle1">Years of experience</Typography>
             </Grid>
-            <Grid item xs={8}>
+            <Grid size={8}>
                 <RadioGroup
-                    className="flex flex-row flex-wrap"
+                    row
                     aria-label="Years of experience"
                     value={years}
                     onChange={handleYearsChange}
@@ -96,7 +95,7 @@ export default ({ value = [], onChange, autoFocus }) => {
                     ))}
                 </RadioGroup>
             </Grid>
-            <Grid item xs={12}>
+            <Grid size={12}>
                 <Box
                     display="flex"
                     flexDirection="row"
@@ -112,25 +111,27 @@ export default ({ value = [], onChange, autoFocus }) => {
                     </Button>
                 </Box>
             </Grid>
-            <Grid item xs={12}>
+            <Grid size={12}>
                 <List>
                     {value.map(({ role, years }, index) => [
                         <Divider key={role + '-divider'} />,
-                        <ListItem key={role}>
+                        <ListItem
+                            key={role}
+                            secondaryAction={
+                                <Button
+                                    color="error"
+                                    onClick={() => handleRemove(index)}
+                                >
+                                    {t('Remove_')}
+                                </Button>
+                            }
+                        >
                             <ListItemText
                                 primary={role}
                                 secondary={Roles.getLabelForExperienceLevel(
                                     years,
                                 )}
                             />
-                            <ListItemSecondaryAction>
-                                <Button
-                                    onClick={() => handleRemove(index)}
-                                    color="default" //TODO this should be red
-                                >
-                                    {t('Remove_')}
-                                </Button>
-                            </ListItemSecondaryAction>
                         </ListItem>,
                     ])}
                 </List>
diff --git a/frontend/src/components/inputs/PhoneNumberInput/index.js b/frontend/src/components/inputs/PhoneNumberInput/index.js
index 0f1595472..a1ebfb0af 100644
--- a/frontend/src/components/inputs/PhoneNumberInput/index.js
+++ b/frontend/src/components/inputs/PhoneNumberInput/index.js
@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react'
 
-import { Grid, InputAdornment, Box, Typography } from '@mui/material'
+import { Grid2 as Grid, InputAdornment, Box, Typography } from '@mui/material'
 import Select from 'components/inputs/Select'
 import TextInput from 'components/inputs/TextInput'
 
@@ -34,7 +34,12 @@ const PhoneNumberInput = React.memo(
                     direction="row"
                     alignItems="flex-end"
                 >
-                    <Grid item xs={12} md={4}>
+                    <Grid
+                        size={{
+                            xs: 12,
+                            md: 4,
+                        }}
+                    >
                         <Select
                             options="countryCode"
                             label="Country code"
@@ -43,7 +48,12 @@ const PhoneNumberInput = React.memo(
                             onBlur={onBlur}
                         />
                     </Grid>
-                    <Grid item xs={12} md={8}>
+                    <Grid
+                        size={{
+                            xs: 12,
+                            md: 8,
+                        }}
+                    >
                         <TextInput
                             label="Phone number"
                             type="number"
diff --git a/frontend/src/components/inputs/RecruitmentOptionInput/index.js b/frontend/src/components/inputs/RecruitmentOptionInput/index.js
index 7c0da282e..2f807e643 100644
--- a/frontend/src/components/inputs/RecruitmentOptionInput/index.js
+++ b/frontend/src/components/inputs/RecruitmentOptionInput/index.js
@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react'
 
 import { Misc } from '@hackjunction/shared'
-import { Grid, Typography } from '@mui/material'
+import { Grid2 as Grid, Typography } from '@mui/material'
 
 import Select from 'components/inputs/Select'
 import BooleanInput from 'components/inputs/BooleanInput'
@@ -50,7 +50,7 @@ const RecruitmentOptionInput = ({
 
     return (
         <Grid container spacing={3}>
-            <Grid item xs={12}>
+            <Grid size={12}>
                 <Typography variant="body1" gutterBottom>
                     {t('Current_pro_situation_')}
                 </Typography>
@@ -65,7 +65,7 @@ const RecruitmentOptionInput = ({
             </Grid>
             {value.status && value.status !== 'not-interested' ? (
                 <>
-                    <Grid item xs={12}>
+                    <Grid size={12}>
                         <Typography variant="body1">
                             {t('Cool_partners_')}
                         </Typography>
@@ -81,7 +81,7 @@ const RecruitmentOptionInput = ({
                             }
                         />
                     </Grid>
-                    <Grid item xs={12}>
+                    <Grid size={12}>
                         <Typography variant="body1" gutterBottom>
                             {t('Relocation_option_')}
                         </Typography>
diff --git a/frontend/src/components/inputs/SkillsInput/index.js b/frontend/src/components/inputs/SkillsInput/index.js
index 44c0ac0fd..0c80d3727 100644
--- a/frontend/src/components/inputs/SkillsInput/index.js
+++ b/frontend/src/components/inputs/SkillsInput/index.js
@@ -1,16 +1,14 @@
 import React, { useCallback, useState, useRef } from 'react'
 import {
-    Grid,
+    Grid2 as Grid,
     Typography,
     Button,
-    Box,
     FormControlLabel,
     RadioGroup,
     Radio,
     List,
     ListItem,
     ListItemText,
-    ListItemSecondaryAction,
     Divider,
 } from '@mui/material'
 import { Skills } from '@hackjunction/shared'
@@ -59,7 +57,7 @@ export default React.memo(({ value = [], onChange, onBlur, autoFocus }) => {
 
     return (
         <Grid container spacing={3}>
-            <Grid item xs={12}>
+            <Grid size={12}>
                 <Select
                     autoFocus={autoFocus}
                     onBlur={onBlur}
@@ -71,14 +69,14 @@ export default React.memo(({ value = [], onChange, onBlur, autoFocus }) => {
                     onChange={setSkill}
                 />
             </Grid>
-            <Grid item xs={4}>
+            <Grid size={4}>
                 <Typography variant="subtitle1">
                     {t('Level_of_expertise_')}
                 </Typography>
             </Grid>
-            <Grid item xs={8}>
+            <Grid size={8}>
                 <RadioGroup
-                    className="flex flex-row flex-wrap"
+                    row
                     aria-label="Level of expertise"
                     value={level}
                     onChange={handleLevelChange}
@@ -94,27 +92,38 @@ export default React.memo(({ value = [], onChange, onBlur, autoFocus }) => {
                     ))}
                 </RadioGroup>
             </Grid>
-            <Grid item xs={12}>
-                <Box
-                    display="flex"
-                    flexDirection="row"
-                    justifyContent="flex-end"
+            <Grid
+                size={12}
+                sx={{
+                    display: 'flex',
+                    flexDirection: 'row',
+                    justifyContent: 'flex-end',
+                }}
+            >
+                <Button
+                    onClick={handleAdd}
+                    disabled={buttonDisabled}
+                    color="primary"
+                    variant="contained"
                 >
-                    <Button
-                        onClick={handleAdd}
-                        disabled={buttonDisabled}
-                        color="primary"
-                        variant="contained"
-                    >
-                        {t('Add_')}
-                    </Button>
-                </Box>
+                    {t('Add_')}
+                </Button>
             </Grid>
-            <Grid item xs={12}>
+            <Grid size={12}>
                 <List>
                     {value.map(({ skill, level }, index) => [
                         <Divider key={skill + '-divider'} />,
-                        <ListItem key={skill}>
+                        <ListItem
+                            key={skill}
+                            secondaryAction={
+                                <Button
+                                    color="error"
+                                    onClick={() => handleRemove(index)}
+                                >
+                                    {t('Remove_')}
+                                </Button>
+                            }
+                        >
                             <ListItemText
                                 primary={
                                     <Typography>
@@ -125,7 +134,7 @@ export default React.memo(({ value = [], onChange, onBlur, autoFocus }) => {
                                 secondary={
                                     <Typography
                                         color="textSecondary"
-                                        style={{ marginRight: '50px' }}
+                                        sx={{ marginRight: '50px' }}
                                     >
                                         {Skills.getDescriptionForSkillLevel(
                                             level,
@@ -133,11 +142,6 @@ export default React.memo(({ value = [], onChange, onBlur, autoFocus }) => {
                                     </Typography>
                                 }
                             />
-                            <ListItemSecondaryAction>
-                                <Button onClick={() => handleRemove(index)}>
-                                    {t('Remove_')}
-                                </Button>
-                            </ListItemSecondaryAction>
                         </ListItem>,
                     ])}
                 </List>
diff --git a/frontend/src/components/inputs/TextAreaInput/index.js b/frontend/src/components/inputs/TextAreaInput/index.js
index 029925ba4..d0a706e64 100644
--- a/frontend/src/components/inputs/TextAreaInput/index.js
+++ b/frontend/src/components/inputs/TextAreaInput/index.js
@@ -43,7 +43,13 @@ const TextAreaInput = React.memo(
 
         return (
             <TextField
-                className="w-full bg-gray-100 border-2 border-gray-300 rounded-md"
+                sx={{
+                    '& .MuiFilledInput-root': {
+                        backgroundColor: '#f7fafc',
+                        border: `2px solid #e2e8f0`,
+                        borderRadius: '6px',
+                    },
+                }}
                 type="text"
                 variant="filled"
                 autoFocus={autoFocus}
diff --git a/frontend/src/components/inputs/TextInput/index.js b/frontend/src/components/inputs/TextInput/index.js
index 72769000c..1282de77f 100644
--- a/frontend/src/components/inputs/TextInput/index.js
+++ b/frontend/src/components/inputs/TextInput/index.js
@@ -21,6 +21,7 @@ const TextInput = React.memo(
         autoFocus,
         type = 'text',
         maxLength,
+        variant = 'standard',
     }) => {
         const [errorLength, setErrorLength] = useState(errorLengthBase)
         const handleChange = useCallback(
@@ -46,6 +47,7 @@ const TextInput = React.memo(
             textFieldFormat = (
                 <TextField
                     id={id}
+                    variant={variant}
                     autoFocus={autoFocus}
                     disabled={disabled}
                     fullWidth
@@ -65,6 +67,7 @@ const TextInput = React.memo(
             textFieldFormat = (
                 <TextField
                     id={id}
+                    variant={variant}
                     autoFocus={autoFocus}
                     disabled={disabled}
                     fullWidth

From 648c9622190d89a0cdc4b7a6300039a5128ed07d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julia=20S=C3=B6derlund?= <julia.soderlund@yandex.ru>
Date: Tue, 22 Jul 2025 18:02:59 +0300
Subject: [PATCH 5/6] Update profile page to MUI v6

---
 frontend/src/pages/_account/profile/index.js | 194 ++++++++++---------
 1 file changed, 99 insertions(+), 95 deletions(-)

diff --git a/frontend/src/pages/_account/profile/index.js b/frontend/src/pages/_account/profile/index.js
index ddd844f47..f6214e74f 100644
--- a/frontend/src/pages/_account/profile/index.js
+++ b/frontend/src/pages/_account/profile/index.js
@@ -1,7 +1,8 @@
 import React, { useCallback } from 'react'
 
 import { useDispatch, useSelector } from 'react-redux'
-import { Box, Grid, Typography } from '@mui/material'
+import { Box, Grid2 as Grid, Typography } from '@mui/material'
+import { styled } from '@mui/material/styles'
 
 import { Formik, FastField, Field } from 'formik'
 import { RegistrationFields } from '@hackjunction/shared'
@@ -26,32 +27,14 @@ import * as UserActions from 'reducers/user/actions'
 import * as SnackbarActions from 'reducers/snackbar/actions'
 
 import { useTranslation } from 'react-i18next'
-import { debugGroup } from 'utils/debuggingTools'
-// const useStyles = makeStyles(theme => ({
-//     topWrapper: {
-//         display: 'flex',
-//         flexDirection: 'column',
-//         alignItems: 'center',
-//         background: 'white',
-//         borderRadius: '7px',
-//         boxShadow: '2px 7px 15px rgba(0, 0, 0, 0.12)',
-//         padding: theme.spacing(3),
-//         [theme.breakpoints.up('md')]: {
-//             flexDirection: 'row',
-//             alignItems: 'flex-start',
-//         },
-//     },
-//     box: {
-//         background: 'white',
-//         borderRadius: '7px',
-//         boxShadow: '2px 7px 30px rgba(0, 0, 0, 0.12)',
-//         padding: theme.spacing(3),
-//     },
-//     imageUpload: {
-//         width: '300px',
-//         height: '300px',
-//     },
-// }))
+
+const ProfileBox = styled('div')(({ theme }) => ({
+    borderRadius: '7px',
+    boxShadow: '2px 7px 30px rgba(0, 0, 0, 0.12)',
+    padding: theme.spacing(3),
+    background: 'white',
+    marginBottom: '1.5rem',
+}))
 
 export default () => {
     const dispatch = useDispatch()
@@ -61,8 +44,6 @@ export default () => {
     const loading = userProfileLoading || !hasProfile
     const { t } = useTranslation()
 
-    // const classes = useStyles()
-
     const validationSchema = data => {
         const validations = {}
         Object.keys(data).forEach(field => {
@@ -114,17 +95,30 @@ export default () => {
             >
                 {formikProps => (
                     <>
-                        <Box className={'classes.topWrapper'}>
-                            <Box width="300px" height="300px" margin={3}>
+                        <ProfileBox
+                            sx={{
+                                display: 'flex',
+                                flexDirection: { xs: 'column', md: 'row' },
+                                alignItems: { xs: 'center', md: 'flex-start' },
+                            }}
+                        >
+                            <Box
+                                sx={{
+                                    width: '300px',
+                                    height: '300px',
+                                    margin: 3,
+                                }}
+                            >
                                 <FastField
                                     name="avatar"
                                     render={({ field, form }) => (
                                         <Box
-                                            width="100%"
-                                            height="100%"
-                                            borderRadius="50%"
-                                            overflow="hidden"
-                                            position="relative"
+                                            sx={{
+                                                width: '100%',
+                                                height: '100%',
+                                                borderRadius: '50%',
+                                                overflow: 'hidden',
+                                            }}
                                         >
                                             <ImageUpload
                                                 value={
@@ -149,9 +143,15 @@ export default () => {
                                     )}
                                 />
                             </Box>
-                            <Box flex="1" display="flex" flexDirection="column">
+                            <Box
+                                sx={{
+                                    flex: '1',
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                }}
+                            >
                                 <Grid container spacing={3}>
-                                    <Grid item xs={12} md={6}>
+                                    <Grid size={{ xs: 12, md: 6 }}>
                                         <FastField
                                             name="firstName"
                                             render={({ field, form }) => (
@@ -173,7 +173,7 @@ export default () => {
                                             )}
                                         />
                                     </Grid>
-                                    <Grid item xs={12} md={6}>
+                                    <Grid size={{ xs: 12, md: 6 }}>
                                         <FastField
                                             name="lastName"
                                             render={({ field, form }) => (
@@ -195,7 +195,7 @@ export default () => {
                                             )}
                                         />
                                     </Grid>
-                                    <Grid item xs={12}>
+                                    <Grid size={12}>
                                         <FastField
                                             name="email"
                                             render={({ field, form }) => (
@@ -223,7 +223,7 @@ export default () => {
                                             })}
                                         </Typography>
                                     </Grid>
-                                    <Grid item xs={12}>
+                                    <Grid size={12}>
                                         <FastField
                                             name="phoneNumber"
                                             render={({ field, form }) => (
@@ -248,7 +248,7 @@ export default () => {
                                             {t('Contact_phone_')}
                                         </Typography>
                                     </Grid>
-                                    <Grid item xs={12}>
+                                    <Grid size={12}>
                                         <FastField
                                             name="dateOfBirth"
                                             render={({ field, form }) => (
@@ -271,7 +271,7 @@ export default () => {
                                             )}
                                         />
                                     </Grid>
-                                    <Grid item xs={12}>
+                                    <Grid size={12}>
                                         <FastField
                                             name="gender"
                                             render={({ field, form }) => (
@@ -296,8 +296,9 @@ export default () => {
                                     </Grid>
                                 </Grid>
                             </Box>
-                        </Box>
-                        <Box className={'classes.box'} mt={3}>
+                        </ProfileBox>
+
+                        <ProfileBox>
                             <Typography variant="h6">
                                 {t('Profile_details_')}
                             </Typography>
@@ -308,7 +309,7 @@ export default () => {
                                 })}
                             </Typography>
                             <Grid container spacing={3}>
-                                <Grid item xs={12}>
+                                <Grid size={12}>
                                     <FastField
                                         name="headline"
                                         render={({ field, form }) => (
@@ -342,34 +343,32 @@ export default () => {
                                         }
                                     </Typography>
                                 </Grid>
-                                <Grid item xs={12}>
-                                    <Box>
-                                        <Field
-                                            name="biography"
-                                            render={({ field, form }) => (
-                                                <TextAreaInput
-                                                    label={
-                                                        RegistrationFields.getField(
-                                                            'biography',
-                                                        ).label
-                                                    }
-                                                    placeholder={`Hi my name is ${form.values.firstName} and...`}
-                                                    value={field.value}
-                                                    onChange={value =>
-                                                        form.setFieldValue(
-                                                            field.name,
-                                                            value,
-                                                        )
-                                                    }
-                                                    onBlur={() =>
-                                                        form.setFieldTouched(
-                                                            field.name,
-                                                        )
-                                                    }
-                                                />
-                                            )}
-                                        />
-                                    </Box>
+                                <Grid size={12}>
+                                    <Field
+                                        name="biography"
+                                        render={({ field, form }) => (
+                                            <TextAreaInput
+                                                label={
+                                                    RegistrationFields.getField(
+                                                        'biography',
+                                                    ).label
+                                                }
+                                                placeholder={`Hi my name is ${form.values.firstName} and...`}
+                                                value={field.value}
+                                                onChange={value =>
+                                                    form.setFieldValue(
+                                                        field.name,
+                                                        value,
+                                                    )
+                                                }
+                                                onBlur={() =>
+                                                    form.setFieldTouched(
+                                                        field.name,
+                                                    )
+                                                }
+                                            />
+                                        )}
+                                    />
                                     <Typography variant="caption">
                                         {
                                             RegistrationFields.getField(
@@ -378,7 +377,7 @@ export default () => {
                                         }
                                     </Typography>
                                 </Grid>
-                                <Grid item xs={12} md={6}>
+                                <Grid size={{ xs: 12, md: 6 }}>
                                     <FastField
                                         name="countryOfResidence"
                                         render={({ field, form }) => (
@@ -403,7 +402,7 @@ export default () => {
                                         )}
                                     />
                                 </Grid>
-                                <Grid item xs={12} md={6}>
+                                <Grid size={{ xs: 12, md: 6 }}>
                                     <FastField
                                         name="nationality"
                                         render={({ field, form }) => (
@@ -426,7 +425,7 @@ export default () => {
                                         )}
                                     />
                                 </Grid>
-                                <Grid item xs={12}>
+                                <Grid size={12}>
                                     <FastField
                                         name="spokenLanguages"
                                         render={({ field, form }) => (
@@ -450,7 +449,7 @@ export default () => {
                                         )}
                                     />
                                 </Grid>
-                                <Grid item xs={12}>
+                                <Grid size={12}>
                                     <FastField
                                         name="themesOfInterest"
                                         render={({ field, form }) => (
@@ -474,7 +473,7 @@ export default () => {
                                         )}
                                     />
                                 </Grid>
-                                <Grid item xs={12}>
+                                <Grid size={12}>
                                     <FastField
                                         name="industriesOfInterest"
                                         render={({ field, form }) => (
@@ -501,8 +500,9 @@ export default () => {
                                     />
                                 </Grid>
                             </Grid>
-                        </Box>
-                        <Box className={'classes.box'} mt={3}>
+                        </ProfileBox>
+
+                        <ProfileBox>
                             <Typography variant="h6">
                                 {t('Education_')}
                             </Typography>
@@ -527,8 +527,9 @@ export default () => {
                                     />
                                 )}
                             />
-                        </Box>
-                        <Box className={'classes.box'} mt={3}>
+                        </ProfileBox>
+
+                        <ProfileBox>
                             <Typography variant="h6">{t('Skills_')}</Typography>
                             <Typography variant="body1" gutterBottom>
                                 {t('Enter_skills_')}
@@ -547,8 +548,9 @@ export default () => {
                                     />
                                 )}
                             />
-                        </Box>
-                        <Box className={'classes.box'} mt={3}>
+                        </ProfileBox>
+
+                        <ProfileBox>
                             <Typography variant="h6">
                                 {t('Pro_roles_')}
                             </Typography>
@@ -569,8 +571,9 @@ export default () => {
                                     />
                                 )}
                             />
-                        </Box>
-                        <Box className={'classes.box'} mt={3}>
+                        </ProfileBox>
+
+                        <ProfileBox>
                             <Typography variant="h6">
                                 {t('Recruitment_pref_')}
                             </Typography>
@@ -592,8 +595,9 @@ export default () => {
                                     />
                                 )}
                             />
-                        </Box>
-                        <Box className={'classes.box'} mt={3}>
+                        </ProfileBox>
+
+                        <ProfileBox sx={{ marginBottom: '10rem' }}>
                             <Typography variant="h6">
                                 {t('Additional_links_')}
                             </Typography>
@@ -601,7 +605,7 @@ export default () => {
                                 {t('You_can_link_')}
                             </Typography>
                             <Grid container spacing={3}>
-                                <Grid item xs={12}>
+                                <Grid size={12}>
                                     <FastField
                                         name="curriculumVitae"
                                         render={({ field, form }) => (
@@ -635,7 +639,7 @@ export default () => {
                                         }
                                     </Typography>
                                 </Grid>
-                                <Grid item xs={12}>
+                                <Grid size={12}>
                                     <FastField
                                         name="portfolio"
                                         render={({ field, form }) => (
@@ -669,7 +673,7 @@ export default () => {
                                         }
                                     </Typography>
                                 </Grid>
-                                <Grid item xs={12}>
+                                <Grid size={12}>
                                     <FastField
                                         name="github"
                                         render={({ field, form }) => (
@@ -703,7 +707,7 @@ export default () => {
                                         }
                                     </Typography>
                                 </Grid>
-                                <Grid item xs={12}>
+                                <Grid size={12}>
                                     <FastField
                                         name="linkedin"
                                         render={({ field, form }) => (
@@ -738,8 +742,8 @@ export default () => {
                                     </Typography>
                                 </Grid>
                             </Grid>
-                        </Box>
-                        <Box height="300px" />
+                        </ProfileBox>
+
                         <BottomBar
                             onSubmit={formikProps.handleSubmit}
                             errors={formikProps.errors}

From 419f49af1a72c9c725419631bf6152153c21fbc3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julia=20S=C3=B6derlund?= <julia.soderlund@yandex.ru>
Date: Tue, 22 Jul 2025 21:09:16 +0300
Subject: [PATCH 6/6] Update the bar at the bottom of forms to MUI v6

---
 frontend/src/components/inputs/BottomBar.js  | 63 +++++++++++++-------
 frontend/src/pages/_account/profile/index.js |  6 +-
 2 files changed, 48 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/inputs/BottomBar.js b/frontend/src/components/inputs/BottomBar.js
index 5a49c3408..873eb35cb 100644
--- a/frontend/src/components/inputs/BottomBar.js
+++ b/frontend/src/components/inputs/BottomBar.js
@@ -1,7 +1,7 @@
 import React, { useState, useCallback } from 'react'
 import {
     Box,
-    Grid,
+    Grid2 as Grid,
     CircularProgress,
     ButtonBase,
     Typography,
@@ -11,10 +11,34 @@ import {
     ListItemText,
 } from '@mui/material'
 import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline'
+import { styled } from '@mui/material/styles'
+import { isArray } from 'lodash-es'
+
 import Button from 'components/generic/Button'
 import BlockExitIfDirty from 'components/inputs/BlockExitIfDirty/index'
-import { isArray } from 'lodash-es'
-import clsx from 'clsx'
+
+const SIDEBAR_WIDTH = '300px'
+
+const Wrapper = styled(Box)(({ theme, dirty, hasErrors }) => ({
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    backgroundColor: hasErrors
+        ? theme.palette.error.main
+        : theme.palette.primary.main,
+    padding: '1rem',
+    [theme.breakpoints.up('md')]: {
+        paddingLeft: `calc(${SIDEBAR_WIDTH} + 1rem)`,
+    },
+    position: 'fixed',
+    transition: 'bottom 0.33s ease',
+    width: '100%',
+    bottom: dirty ? 0 : '-100px',
+    right: 0,
+    zIndex: 500,
+    color: 'white',
+}))
 
 const BottomBar = ({
     errors,
@@ -36,35 +60,34 @@ const BottomBar = ({
     }, [])
 
     const renderErrorsButton = () => (
-        <ButtonBase className="p-2" onClick={handleShowErrors}>
-            <Typography variant="button" className="text-white">
+        <ButtonBase sx={{ padding: '8px' }} onClick={handleShowErrors}>
+            <Typography sx={{ textTransform: 'uppercase', mr: 1 }}>
                 {Object.keys(errors).length} errors
             </Typography>
-            <Box mr={1} />
-            <ErrorOutlineIcon className="text-white" />
+            <ErrorOutlineIcon />
         </ButtonBase>
     )
 
     return (
         <>
-            <Box
-                className={clsx(
-                    'fixed transition-all duration-300 flex flex-row justify-end items-center z-50 w-full p-4',
-                    dirty ? 'bottom-0' : '-bottom-24',
-                    hasErrors ? 'bg-red-500' : 'bg-blue-500',
-                )}
-            >
+            <Wrapper dirty={dirty} hasErrors={hasErrors}>
                 {loading && (
-                    <Grid container spacing={2}>
-                        <Grid item xs={8}>
-                            <Typography className="font-bold text-white inline-block mr-4 text-lg">
+                    <Grid
+                        container
+                        spacing={2}
+                        sx={{ alignItems: 'center', width: '100%', mr: '1rem' }}
+                    >
+                        <Grid size={{ xs: 10, sm: 11 }}>
+                            <Typography
+                                sx={{ fontWeight: 'bold', fontSize: '1.5rem' }}
+                            >
                                 {loadingText}
                             </Typography>
                         </Grid>
-                        <Grid item xs={4}>
+                        <Grid size={{ xs: 2, sm: 1 }}>
                             <CircularProgress
-                                className="text-white m-2 p-1"
                                 size={24}
+                                sx={{ color: 'inherit' }}
                             />
                         </Grid>
                     </Grid>
@@ -81,7 +104,7 @@ const BottomBar = ({
                     </Button>
                 )}
                 {!loading && hasErrors && renderErrorsButton()}
-            </Box>
+            </Wrapper>
             {dirty && <BlockExitIfDirty dirty={dirty} />}
             <Popover
                 open={showErrors}
diff --git a/frontend/src/pages/_account/profile/index.js b/frontend/src/pages/_account/profile/index.js
index f6214e74f..d5f1b999e 100644
--- a/frontend/src/pages/_account/profile/index.js
+++ b/frontend/src/pages/_account/profile/index.js
@@ -302,7 +302,11 @@ export default () => {
                             <Typography variant="h6">
                                 {t('Profile_details_')}
                             </Typography>
-                            <Typography variant="body1" gutterBottom>
+                            <Typography
+                                variant="body1"
+                                gutterBottom
+                                sx={{ wordBreak: 'break-word' }}
+                            >
                                 {t('Pre_filled_details_', {
                                     owner: config.PLATFORM_OWNER_NAME,
                                     privacy: config.PRIVACY_URL,