fix for about us sizing

chowworks · Nov 21, 2023 · 13e1644 · 13e1644
1 parent 4b9f1b8
commit 13e1644
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 69 deletions.
diff --git a/src/components/animated/AnimatedAboutUsItem.tsx b/src/components/animated/AnimatedAboutUsItem.tsx
@@ -1,5 +1,5 @@
 import React, {FunctionComponent, useContext} from 'react'
-import {Card, Grid, ThemeProvider, Typography} from '@mui/material'
+import {Card, Grid, ThemeProvider, Typography, useMediaQuery} from '@mui/material'
 import {v4 as uuidv4} from 'uuid'
 import {AnimatedServiceItemNoRefType} from "../BlockContentTypes";
 import ImageWIthButtonOverlay from "../image-with-button-overlay/ImageWithButtonOverlay";
@@ -16,6 +16,7 @@ interface IProps {
     showAmenities?: boolean
 }
 
+
 const AnimatedAboutUsItem: FunctionComponent<IProps> = (props: IProps) => {
     const customizedTheme = useContext(CustomizedThemeContext)
     const controls = useAnimationControls()
@@ -34,83 +35,82 @@ const AnimatedAboutUsItem: FunctionComponent<IProps> = (props: IProps) => {
         textColorControls.start({color: customizedTheme.customizedTheme.palette.text.primary})
     }
 
+    const smDown = useMediaQuery(customizedTheme.customizedTheme.breakpoints.down('sm'))
+
     return (
         <ThemeProvider theme={customizedTheme.customizedTheme} key={uuidv4()}>
             <motion.div onHoverStart={async () => {
                 animateServiceHover()
             }} onHoverEnd={async () => {
                 animateServiceNoHover()
             }}>
-                <Card elevation={0} style={{border:"1px solid #e6e6e6"}}>
-                    <Grid item style={{position: "relative"}}>
-                        <Grid item>
-                            <Grid item style={{position: "relative", overflow: "hidden"}}>
-
-                                <ImageWIthButtonOverlay
-                                    source={props.service.slug?.current}
-                                    imageAltText={props.service.imageSrcAltText}
-                                    imageSrc={props.service.imageSrc} height={200}
-                                />
-                                <motion.div initial={{opacity: 0}} animate={overlayControl}>
-                                    <Grid item container
-                                          style={{
-                                              zIndex: 1,
-                                              top: -4,
-                                              backgroundColor: "rgba(0,0,0,.4)",
-                                              position: "absolute",
-                                              height: "100%",
-                                              width: "100%"
-                                          }}>
-                                    </Grid>
-                                </motion.div>
-                            </Grid>
+                <Grid item sx={{border: "1px solid #e6e6e6", position: "relative"}} maxWidth={smDown ? 550 : 450}>
+                    <Grid item>
+                        <Grid item style={{position: "relative", overflow: "hidden"}}>
+                            <ImageWIthButtonOverlay
+                                source={props.service.slug?.current}
+                                imageAltText={props.service.imageSrcAltText}
+                                imageSrc={props.service.imageSrc} height={200}
+                            />
+                            <motion.div initial={{opacity: 0}} animate={overlayControl}>
+                                <Grid item container
+                                      style={{
+                                          zIndex: 1,
+                                          top: -4,
+                                          backgroundColor: "rgba(0,0,0,.4)",
+                                          position: "absolute",
+                                          height: "100%",
+                                          width: "100%"
+                                      }}>
+                                </Grid>
+                            </motion.div>
+                        </Grid>
 
-                            <Grid container item justifyContent='center' alignItems='center'
-                                  style={{position: "absolute", top: "154px"}}>
-                                <Card elevation={0} style={{
-                                    borderRadius: "50%",
-                                    border: "1px solid #e6e6e6",
-                                    height: "90px",
-                                    width: "90px",
-                                    zIndex: 3
-                                }}>
-                                    <Grid container justifyContent='center' alignItems='center'
-                                          alignContent='center' style={{height: "100%"}}>
-                                        <motion.div animate={controls} initial={{scale: 1.1}}>
-                                            <img style={{zIndex: 2}} width={64} height={64}
-                                                 src={urlFor(props.service.iconImageSrc ?? "").url() ?? ""}/>
-                                        </motion.div>
-                                    </Grid>
-                                </Card>
-                                <Grid item container style={{
-                                    backgroundColor: customizedTheme.customizedTheme.palette.primary.main,
-                                    height: "8px",
-                                    zIndex: 2,
-                                    position: "absolute"
-                                }}>
+                        <Grid container item justifyContent='center' alignItems='center'
+                              style={{position: "absolute", top: "154px"}}>
+                            <Card elevation={0} style={{
+                                borderRadius: "50%",
+                                border: "1px solid #e6e6e6",
+                                height: "90px",
+                                width: "90px",
+                                zIndex: 3
+                            }}>
+                                <Grid container justifyContent='center' alignItems='center'
+                                      alignContent='center' style={{height: "100%"}}>
+                                    <motion.div animate={controls} initial={{scale: 1.1}}>
+                                        <img style={{zIndex: 2}} width={64} height={64}
+                                             src={urlFor(props.service.iconImageSrc ?? "").url() ?? ""}/>
+                                    </motion.div>
                                 </Grid>
+                            </Card>
+                            <Grid item container style={{
+                                backgroundColor: customizedTheme.customizedTheme.palette.primary.main,
+                                height: "8px",
+                                zIndex: 2,
+                                position: "absolute"
+                            }}>
                             </Grid>
                         </Grid>
-                        <Grid item style={{
-                            padding: customizedTheme.customizedTheme.spacing(4, 4, 4, 4),
-                            backgroundSize: "contain",
-                            backgroundRepeat: "no-repeat",
-                            backgroundPosition: "right",
-                            backgroundImage: `url(${urlFor(props.service.backgroundImageSrc ?? "").url() ?? ""})`,
-                        }} justifyContent='center'>
-                            <Grid item>
-                                <motion.div animate={textColorControls} initial={{color: 'initial'}}>
-                                    <Typography style={{marginTop: "16px", marginBottom: "16px",}}
-                                                variant='h6' align='center'>{props.service.contentTitle}</Typography>
-                                </motion.div>
-                            </Grid>
-                            <Grid item>
-                                <Typography variant='body1' align='center' style={{maxWidth: "220px"}}
-                                >{props.service.contentText}</Typography>
-                            </Grid>
+                    </Grid>
+                    <Grid item style={{
+                        padding: customizedTheme.customizedTheme.spacing(4, 4, 4, 4),
+                        backgroundSize: "contain",
+                        backgroundRepeat: "no-repeat",
+                        backgroundPosition: "right",
+                        backgroundImage: `url(${urlFor(props.service.backgroundImageSrc ?? "").url() ?? ""})`,
+                    }} justifyContent='center'>
+                        <Grid item>
+                            <motion.div animate={textColorControls} initial={{color: 'initial'}}>
+                                <Typography style={{marginTop: "16px", marginBottom: "16px",}}
+                                            variant='h6' align='center'>{props.service.contentTitle}</Typography>
+                            </motion.div>
+                        </Grid>
+                        <Grid item container justifyContent='center'>
+                            <Typography variant='body1' align='center'
+                            >{props.service.contentText}</Typography>
                         </Grid>
                     </Grid>
-                </Card>
+                </Grid>
             </motion.div>
         </ThemeProvider>
     )

diff --git a/src/components/animated/AnimatedAboutUsSection.tsx b/src/components/animated/AnimatedAboutUsSection.tsx
@@ -34,7 +34,7 @@ const AnimatedAboutUsSection: FunctionComponent<IProps> = (props) => {
             <Grid container item className={classes.root} xs={12} alignItems='center'>
                 <Grid item container justifyContent='center' spacing={2}>
                     {props.sectionData.servicesList?.map((service: AnimatedServiceItemNoRefType, index: number) => {
-                        return <Grid item xs={12} sm={3}><AnimatedAboutUsItem service={service}/></Grid>
+                        return <Grid item xs={12} sm={3} key={index}><AnimatedAboutUsItem service={service}/></Grid>
                     })}
                 </Grid>
                 <Grid item container style={{padding: customizedThemeContext.customizedTheme.spacing(8, 6)}}
@@ -90,9 +90,6 @@ const AnimatedAboutUsSection: FunctionComponent<IProps> = (props) => {
                                 <Grid
                                     container
                                     item
-                                    // justifyContent='center'
-                                    // alignContent='center'
-                                    // alignItems='center'
                                     style={{
                                         left: "200px",
                                         top: "50%",