Update pricing page and container to MUI v6

Also made everything centered (buttons were crooked), added rounded
edges to the back button when hovered and made the long email wrap
instead of flowing over the container.

Author: julisod

frontend/src/components/generic/Container/index.js

@@ -1,27 +1,25 @@
 import React from 'react'
-import clsx from 'clsx'
+import { Box } from '@mui/material'
+import { styled } from '@mui/material/styles'
 
-const Container = ({
-    wrapperClass = null,
-    className = null,
-    small = false,
-    center = false,
-    children,
-}) => {
-    return (
-        <div className={clsx('px-8', wrapperClass)}>
-            <div
-                className={clsx(
-                    'mx-auto w-full max-w-[1120px]',
-                    small && 'w-3/5 md:w-4/5',
-                    center && 'text-center',
-                    className,
-                )}
-            >
-                {children}
-            </div>
-        </div>
-    )
+const Wrapper = styled(Box, {
+    // This specifies which props should not get passed down to the DOM,
+    // will throw a console error if you do.
+    shouldForwardProp: prop => prop !== 'center' && prop !== 'small',
+})(({ theme, center, small }) => ({
+    padding: theme.spacing(0, 2),
+    margin: '0 auto',
+    maxWidth: '1120px',
+
+    textAlign: center && 'center',
+    width: small ? '60%' : '100%',
+    [theme.breakpoints.down('md')]: {
+        width: small && '80%',
+    },
+}))
+
+const Container = ({ children, ...props }) => {
+    return <Wrapper {...props}>{children}</Wrapper>
 }
 
 export default Container

frontend/src/components/generic/PricingCard/index.js

@@ -1,8 +1,9 @@
 import React from 'react'
-import { Box, Typography, Grid } from '@mui/material'
+import { Box, Typography, Grid2 as Grid } from '@mui/material'
 import CheckIcon from '@mui/icons-material/Check'
 import List from '@mui/material/List'
 import ListItem from '@mui/material/ListItem'
+import { styled } from '@mui/material/styles'
 
 const PricingItem = ({ topic, price }) => {
     //TODO add plain text to locale to enable translation
@@ -17,34 +18,33 @@ const PricingItem = ({ topic, price }) => {
 
     const renderText = arr => {
         return arr.map((text, index) => (
-            <ListItem key={index} className="flex items-center">
-                <CheckIcon className="mr-2" />
+            <ListItem key={index}>
+                <CheckIcon sx={{ mr: '0.5rem' }} />
                 <Typography>{text}</Typography>
             </ListItem>
         ))
     }
 
+    const CardWrapper = styled(Box)({
+        background: '#fbfbfb',
+        borderWidth: '2px',
+        borderRadius: '16px',
+        borderColor: '#232323',
+        '&:hover': {
+            borderColor: '#73F9EC',
+        },
+        padding: '1rem',
+    })
+
     return (
-        <Grid item xs={12} md={4} lg={4}>
-            <Box
-                border={2}
-                className="bg-gray-50 rounded-lg border-gray-900 hover:border-teal-400"
-            >
-                <Box className="relative p-4 h-88">
-                    <Typography variant="h6" className="text-pink-500">
-                        {topic}
-                    </Typography>
-                    <List>{renderText(body)}</List>
-                    <Box mt={1} />
-                </Box>
-                <Box className="p-4">
-                    <Box className="flex flex-row flex-wrap">
-                        <Typography variant="h6" className="font-bold">
-                            {price}
-                        </Typography>
-                    </Box>
-                </Box>
-            </Box>
+        <Grid size={{ xs: 12, md: 4 }}>
+            <CardWrapper>
+                <Typography variant="h6">{topic}</Typography>
+                <List>{renderText(body)}</List>
+                <Typography variant="h6" sx={{ wordBreak: 'break-word' }}>
+                    {price}
+                </Typography>
+            </CardWrapper>
         </Grid>
     )
 }

frontend/src/pages/_pricing/index.js

@@ -1,35 +1,20 @@
 import React from 'react'
 
-import { Grid, Typography } from '@mui/material'
-
 import Footer from 'components/layouts/Footer'
 import PageWrapper from 'components/layouts/PageWrapper'
 
-import Divider from 'components/generic/Divider'
 import Button from 'components/generic/Button'
 
 import Container from 'components/generic/Container'
 import GlobalNavBar from 'components/navbars/GlobalNavBar'
 import PricingCard from 'components/generic/PricingCard'
+
+import { Grid2 as Grid, Typography } from '@mui/material'
 import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos'
 
 import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
 
-// const useStyles = styled(theme => ({
-//     backButtonWrapper: {
-//         position: 'absolute',
-//         zIndex: 10,
-//         width: '100%',
-//         paddingTop: theme.spacing(1),
-//     },
-
-//     pricingWrapper: {
-//         width: '100%',
-//         paddingTop: '2em',
-//     },
-// }))
-
 export default () => {
     const navigate = useNavigate()
     const { t } = useTranslation()
@@ -40,11 +25,13 @@ export default () => {
             footer={() => <Footer />}
             render={() => (
                 <>
-                    <Container
-                        center
-                        wrapperClass={'classes.backButtonWrapper'}
-                    >
-                        <Button onClick={() => navigate('/')}>
+                    <Container center sx={{ pt: 1 }}>
+                        <Button
+                            sx={{
+                                borderRadius: '10px',
+                            }}
+                            onClick={() => navigate('/')}
+                        >
                             <ArrowBackIosIcon style={{ color: 'black' }} />
                             <Typography
                                 variant="button"
@@ -54,38 +41,33 @@ export default () => {
                             </Typography>
                         </Button>
                     </Container>
-                    <Divider size={3} />
-                    <Container center wrapperClass={'classes.pricingWrapper'}>
+                    <Container center sx={{ pt: '0.5em', pb: '1.5em' }}>
                         <Grid
                             container
                             direction="row"
                             justifyContent="center"
-                            spacing={3}
+                            spacing={2}
                         >
                             <PricingCard
                                 topic="What we offer"
                                 price="Ask: hello@hackjunction.com"
                             />
-                            <Divider size={4} />
-                            <Typography variant="body1" justifyContent="center">
+                            <Typography variant="body1">
                                 Our expertise of organising hackathons combined
                                 with the power of a highly-customizable platform
                                 for events makes hosting diverse events
                                 possible.
                             </Typography>
-                            <Divider size={4} />
                             <Button
                                 variant="outlined"
                                 color="theme_lightgray"
                                 strong
-                                m={6}
                                 onClick={() => navigate('/contact')}
                             >
                                 {t('Contact_us_')}
                             </Button>
                         </Grid>
                     </Container>
-                    <Divider size={4} />
                 </>
             )}
         />