fix for about us sizing

theHandsomestNerd · 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%",