clean up

Fix spacing in animated about us section

header height is pulled from theme

footer spacing fixes

social media block parameters for color

logo no wrap when text logo

sanityIo/schemas/mui/ColorListing.js

@@ -0,0 +1,23 @@
+export const ColorListing = [
+ {value: "WHITESMOKE", title: "Whitesmoke"},
+ {value: "DARKBLUE", title: "Dark Blue"},
+ {value: "TRANSPARENT_DARKBLUE", title: "Transparent Dark Blue"},
+ {value: "BLUE", title: "Blue"},
+ {value: "GRAY", title: "Gray"},
+ {value: "LIGHT_GRAY", title: "Light Gray"},
+ {value: "TRANSPARENTWHITE", title: "Transparent White"},
+ {value: "TRANSPARENTERWHITE", title: "Transparenter White"},
+ {value: "LIGHTBLUE", title: "Light Blue"},
+ {value: "ALMOST PURPLE", title: "Almost Purple"},
+ {value: "LIGHTGRAY", title: "Light Gray"},
+ {value: "TRANSPARENTLIGHTGRAY", title: "Transparent Light Gray"},
+ {value: "MEDIUMGRAY", title: "Medium Gray"},
+ {value: "DARKGRAY", title: "DarkGray"},
+ {value: "TRANSPARENTDARKGRAY", title: "Transparent Dark Gray"},
+ {value: "AQUA", title: "Aqua"},
+ {value: "RED", title: "Red"},
+ {value: "ALMOSTWHITE", title: "Almost White"},
+ {value: "DARKERGRAY", title: "Darker Gray"},
+ {value: "DARK_GRAY", title: "Dark Gray"},
+ {value: "LIGHTER_GRAY", title: "Lighter Gray"},
+]

sanityIo/schemas/mui/MuiColorPalatte.js

@@ -1,25 +1,27 @@
-const listing = [
- {value: "WHITESMOKE", title: "Whitesmoke"},
- {value: "DARKBLUE", title: "Dark Blue"},
- {value: "TRANSPARENT_DARKBLUE", title: "Transparent Dark Blue"},
- {value: "BLUE", title: "Blue"},
- {value: "GRAY", title: "Gray"},
- {value: "LIGHT_GRAY", title: "Light Gray"},
- {value: "TRANSPARENTWHITE", title: "Transparent White"},
- {value: "LIGHTBLUE", title: "Light Blue"},
- {value: "ALMOST PURPLE", title: "Almost Purple"},
- {value: "LIGHTGRAY", title: "Light Gray"},
- {value: "TRANSPARENTLIGHTGRAY", title: "Transparent Light Gray"},
- {value: "MEDIUMGRAY", title: "Medium Gray"},
- {value: "DARKGRAY", title: "DarkGray"},
- {value: "TRANSPARENTDARKGRAY", title: "Transparent Dark Gray"},
- {value: "AQUA", title: "Aqua"},
- {value: "RED", title: "Red"},
- {value: "ALMOSTWHITE", title: "Almost White"},
- {value: "DARKERGRAY", title: "Darker Gray"},
- {value: "DARK_GRAY", title: "Dark Gray"},
- {value: "LIGHTER_GRAY", title: "Lighter Gray"},
-]
+// const listing = [
+// {value: "WHITESMOKE", title: "Whitesmoke"},
+// {value: "DARKBLUE", title: "Dark Blue"},
+// {value: "TRANSPARENT_DARKBLUE", title: "Transparent Dark Blue"},
+// {value: "BLUE", title: "Blue"},
+// {value: "GRAY", title: "Gray"},
+// {value: "LIGHT_GRAY", title: "Light Gray"},
+// {value: "TRANSPARENTWHITE", title: "Transparent White"},
+// {value: "LIGHTBLUE", title: "Light Blue"},
+// {value: "ALMOST PURPLE", title: "Almost Purple"},
+// {value: "LIGHTGRAY", title: "Light Gray"},
+// {value: "TRANSPARENTLIGHTGRAY", title: "Transparent Light Gray"},
+// {value: "MEDIUMGRAY", title: "Medium Gray"},
+// {value: "DARKGRAY", title: "DarkGray"},
+// {value: "TRANSPARENTDARKGRAY", title: "Transparent Dark Gray"},
+// {value: "AQUA", title: "Aqua"},
+// {value: "RED", title: "Red"},
+// {value: "ALMOSTWHITE", title: "Almost White"},
+// {value: "DARKERGRAY", title: "Darker Gray"},
+// {value: "DARK_GRAY", title: "Dark Gray"},
+// {value: "LIGHTER_GRAY", title: "Lighter Gray"},
+// ]
+import {ColorListing} from "./ColorListing";
+
 export default {
  name: 'MuiColorPalette',
  title: 'MUI Color Palette',
@@ -29,49 +31,49 @@ export default {
  name: 'defaultBackground',
  title: 'Default Background Color',
  type: 'string',
- options: {list: listing}
+ options: {list: ColorListing}
  },
  {
  name: 'defaultPaperBackgroundColor',
  title: 'Default Paper Color',
  type: 'string',
- options: {list: listing}
+ options: {list: ColorListing}
  },
  {
  name: 'primaryColor',
  title: 'Primary Color',
  type: 'string',
- options: {list: listing}
+ options: {list: ColorListing}
  },
  {
  name: 'secondaryColor',
  title: 'Secondary Color',
  type: 'string',
- options: {list: listing}
+ options: {list: ColorListing}
  },
  {
  name: 'primaryTextColor',
  title: 'Primary Text Color',
  type: 'string',
- options: {list: listing}
+ options: {list: ColorListing}
  },
  {
  name: 'buttonOutlineColor',
  title: 'Button Outline Color',
  type: 'string',
- options: {list: listing}
+ options: {list: ColorListing}
  },
  {
  name: 'secondaryTextColor',
  title: 'Secondary Text Color',
  type: 'string',
- options: {list: listing}
+ options: {list: ColorListing}
  },
  {
  name: 'disabledTextColor',
  title: 'Disabled Text Color',
  type: 'string',
- options: {list: listing}
+ options: {list: ColorListing}
  },
 
  ]

sanityIo/schemas/sections/web-dev/FooterSection.js

@@ -1,3 +1,5 @@
+import {ColorListing} from "../../mui/ColorListing";
+
 export default {
  name: 'FooterSection',
  title: 'Footer Section',
@@ -8,6 +10,20 @@ export default {
  title: 'Name',
  type: 'string',
  },
+ {
+ name: 'backgroundImgSrc',
+ title: 'Background Image',
+ type: 'image',
+ options: {
+ hotspot: true,
+ },
+ },
+ {
+ name: 'backgroundColor',
+ title: 'Background Color',
+ type: 'string',
+ options: {list: ColorListing}
+ },
  {
  name: 'isSocialMediaBlock',
  title: 'Show Social Media Block',

src/components/BlockContentTypes.ts

@@ -615,6 +615,8 @@ export type DevelopmentFooterSectionType = {
 }
 export type FooterSectionType = {
  name: string
+ backgroundImgSrc?: SanityImageAsset
+ backgroundColor?: string
  isSocialMediaBlock: boolean
  footerMenuRef: SanityMenuContainer
 }

src/components/FooterBlockContentLayoutContainer.tsx

@@ -86,6 +86,8 @@ const FooterBlockContentLayoutContainer: FunctionComponent<FooterBlockContentLay
  <Link id={"BOTTOM_OF_PAGE"} underline="hover"><></>
  </Link>
  <Footer
+ backgroundColor={footer.backgroundColor}
+ backgroundImgSrc={footer.backgroundImgSrc}
  isSocialMediaBlock={footer.isSocialMediaBlock}
  pageFooter={footer.footerMenuRef}
  />

src/components/animated/AnimatedAboutUsSection.tsx

@@ -82,7 +82,7 @@ const AnimatedAboutUsSection: FunctionComponent<IProps> = (props) => {
  gutterBottom>{props.sectionData?.highlightedAmenitiesTitle}</Typography>
  </Grid>
  </Grid>
- <Grid item container style={{paddingBottom: "32px"}}>
+ <Grid item container style={{paddingBottom: "32px"}} spacing={2}>
  {props.sectionData.highlightedAmenities?.map((amenity: ServiceAmenityType, index: number) => {
  return <Grid container item key={index} xs={12} sm={6}><HorizontalAmenity amenity={amenity} /></Grid>
  })}

src/components/animated/AnimatedPortfolioSection.tsx

@@ -116,7 +116,7 @@ const AnimatedPortfolioSection: FunctionComponent<IProps> = (props: IProps) => {
  Back
  </Button>
  <Button variant='contained' color="primary" href={currentItem?.linkToProd}>
- Go to this Project
+ Goto Project
  </Button>
  </ButtonGroup>
  </Grid>

src/components/animated/HeroAnimatedContentSection.tsx

@@ -1,6 +1,6 @@
 import React, {FunctionComponent, useContext} from 'react'
 import {Theme, ThemeProvider} from "@mui/material/styles";
-import {Button, Grid, IconButton, Typography} from "@mui/material";
+import {Button, Grid, IconButton, Typography, useMediaQuery, useTheme} from "@mui/material";
 import makeStyles from "@mui/styles/makeStyles";
 import {HeroAnimatedContentSectionType, SanityHeroContentSlide} from "../BlockContentTypes";
 import {urlFor} from "../block-content-ui/static-pages/cmsStaticPagesClient";
@@ -48,15 +48,19 @@ const HeroAnimatedContentSection: FunctionComponent<IProps> = (props) => {
  const [pageNumber, setPageNumber] = React.useState<number>(0)
  const [contentSlide, setContentSlide] = React.useState<SanityHeroContentSlide | undefined>()
  const themeContext = useContext(CustomizedThemeContext)
+
+ const theme = useTheme()
  const pageContext: PageContextType = useContext(PageContext)
 
  React.useEffect(() => {
  if (props.sectionData.contentSlides[pageNumber])
  setContentSlide(props.sectionData.contentSlides[pageNumber])
  }, [props.sectionData.contentSlides, pageNumber])
 
+ const mdDown = useMediaQuery(theme.breakpoints.down('md'))
+
  return (
- <Grid container item style={{overflow: "hidden", paddingTop: "148px"}}>
+ <Grid container item style={{overflow: "hidden", paddingTop: mdDown?theme.mixins.toolbar.height:"148px"}}>
 
  <Grid container item style={{
  backgroundRepeat: 'no-repeat',

src/components/animated/MapSection.tsx

@@ -105,6 +105,7 @@ const MapSection: FunctionComponent<IProps> = (props: IProps) => {
  }}>
  <Grid item container
  sx={{
+ zIndex:2,
  backgroundColor: COLORS.TRANSPARENT_DARKBLUE,
  border: "1px solid white",
  padding: theme.spacing(4, 4, 2, 4)
@@ -120,7 +121,7 @@ const MapSection: FunctionComponent<IProps> = (props: IProps) => {
  >
  <Grid item container alignItems='center' maxWidth={380} minWidth={290}
  justifyContent='center'>
- <Grid item xs={12} md={3} style={{marginRight: "8px", marginBottom: "4px"}} container
+ <Grid item xs={12} md={3} style={{marginRight: mdDown?0:"8px", marginBottom: mdDown?0:"4px"}} container
  justifyContent='center'>
  <Card
  elevation={0}

src/components/customized-theme-provider/CustomizedThemeProvider.tsx

@@ -27,7 +27,7 @@ const capitalizeArray = (theString: string[]) => {
  return place
 }
 
-const convertToHexCode = (value?: string) => {
+export const convertToHexCode = (value?: string) => {
  let defaultBg = COLORS.WHITESMOKE;
  switch (value) {
  case 'WHITESMOKE':
@@ -51,6 +51,9 @@ const convertToHexCode = (value?: string) => {
  case 'TRANSPARENTWHITE':
  defaultBg = COLORS.TRANSPARENTWHITE
  break;
+ case 'TRANSPARENTERWHITE':
+ defaultBg = COLORS.TRANSPARENTERWHITE
+ break;
  case 'LIGHTBLUE':
  defaultBg = COLORS.LIGHTBLUE
  break;

src/components/logo/AlternatingText.tsx

@@ -6,6 +6,7 @@ interface IProps {
  logoText?: string
  logoAccentText?: string
  isLarge?: boolean
+ noWrap?: boolean
 }
 
 const AlternatingText: FunctionComponent<IProps> = (props: IProps) => {
@@ -18,7 +19,7 @@ const AlternatingText: FunctionComponent<IProps> = (props: IProps) => {
  }
  }, [props.logoText])
 
- return <Typography display='inline' component='div' align='center'>{textArray.map((textArrayItem, index) => {
+ return <Typography display='inline' component='div' align='center' >{textArray.map((textArrayItem, index) => {
  return <Typography
  key={index}
  display='inline'

src/components/logo/Logo.tsx

@@ -36,6 +36,7 @@ interface LogoProps {
  isCenter?: boolean
  logoText?: string
  logoAccentText?: string
+ noWrap?: boolean
 }
 
 const Logo: FunctionComponent<LogoProps> = (props) => {
@@ -48,7 +49,7 @@ const Logo: FunctionComponent<LogoProps> = (props) => {
  alignItems='center'
  alignContent='center'
  justifyContent={props.isCenter ? 'center' : 'flex-start'}>
- <AlternatingText logoText={props.logoText} logoAccentText={props.logoAccentText}/>
+ <AlternatingText noWrap logoText={props.logoText} logoAccentText={props.logoAccentText}/>
  </Grid>
 
 }

src/components/templates/mackenzies-mind/footer/Footer.tsx

@@ -5,14 +5,18 @@ import {Grid, useMediaQuery, useTheme} from '@mui/material'
 import FooterMenuContainer from './FooterMenuContainer'
 import {SanityMenuContainer} from "../../../../common/sanityIo/Types";
 import {COLORS} from "../../../../theme/common/ColorPalette";
+import {SanityImageAsset} from "../../../BlockContentTypes";
+import {urlFor} from "../../../block-content-ui/static-pages/cmsStaticPagesClient";
+import useCustomStyles from "../pages/Styles";
+import {convertToHexCode} from "../../../customized-theme-provider/CustomizedThemeProvider";
 
 export const useStyles = makeStyles((theme: Theme) => ({
  root: {
  // paddingTop: "32px",
- backgroundColor: COLORS.DARK_GRAY,
+ // backgroundColor: COLORS.DARK_GRAY,
  // color: '#FDF3EB',
  // marginLeft: -1 * theme.spacing(1),
- // zIndex: 1000,
+ zIndex: 1000,
  padding: theme.spacing(4, 4, 1, 4),
  '& .MuiFormLabel-root': {
  color: 'white',
@@ -43,25 +47,43 @@ interface IProps {
  footerMenuSlug?: string
  updateIsLoading?: (value: boolean) => void
  isSocialMediaBlock?: boolean
+ backgroundImgSrc?: SanityImageAsset
+ backgroundColor?:string
 }
 
 const Footer: FunctionComponent<IProps> = (props: IProps) => {
  const classes = useStyles()
 
+ const globalClasses = useCustomStyles({})
+
  const theme = useTheme()
 
  const mdDown = useMediaQuery(theme.breakpoints.down('md'))
  return (
- <Grid container className={classes.root}>
+ <Grid container
+ sx={{
+ zIndex: 1,
+ backgroundColor: props.backgroundColor?convertToHexCode(props.backgroundColor):COLORS.LIGHTGRAY,
+ position:"relative"
+ }}
+ >
+ <Grid container className={classes.root} sx={{
+ backgroundImage: `url(${urlFor(props.backgroundImgSrc ?? "").url()})`,
+ backgroundSize: "cover",}}>
  <Grid container justifyContent="flex-start" sx={{paddingTop: mdDown ? 0 : "56px"}}>
  <Grid item xs={12}>
- {props.pageFooter && <FooterMenuContainer isSocialMediaBlock={props.isSocialMediaBlock}
- pageFooterMenu={props.pageFooter}
- updateIsLoading={props.updateIsLoading}
+ {props.pageFooter && <FooterMenuContainer
+ isSocialMediaBlock={props.isSocialMediaBlock}
+ pageFooterMenu={props.pageFooter}
+ updateIsLoading={props.updateIsLoading}
  />}
  </Grid>
  </Grid>
  </Grid>
+ <Grid container item className={globalClasses.fullSectionOverlay}>
+ {/*Makes the background image darker*/}
+ </Grid>
+ </Grid>
  )
 }