Merge pull request #1005 from julisod/pre-STAG-node-22

Pricing page to MUI v6

Author: onnilinnala

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} />
                 </>
             )}
         />