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
chowworks · Dec 3, 2023 · d846fc5 · d846fc5
1 parent 00a9f22
commit d846fc5
Show file tree

Hide file tree

Showing 19 changed files with 182 additions and 87 deletions.
diff --git a/sanityIo/schemas/mui/ColorListing.js b/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"},
+]
diff --git a/sanityIo/schemas/mui/MuiColorPalatte.js b/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}
         },
 
     ]

diff --git a/sanityIo/schemas/sections/web-dev/FooterSection.js b/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',

diff --git a/src/components/BlockContentTypes.ts b/src/components/BlockContentTypes.ts
@@ -615,6 +615,8 @@ export type DevelopmentFooterSectionType = {
 }
 export type FooterSectionType = {
     name: string
+    backgroundImgSrc?: SanityImageAsset
+    backgroundColor?: string
     isSocialMediaBlock: boolean
     footerMenuRef: SanityMenuContainer
 }

diff --git a/src/components/FooterBlockContentLayoutContainer.tsx b/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}
                                 />

diff --git a/src/components/animated/AnimatedAboutUsSection.tsx b/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>
                             })}

diff --git a/src/components/animated/AnimatedPortfolioSection.tsx b/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>

diff --git a/src/components/animated/HeroAnimatedContentSection.tsx b/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',

diff --git a/src/components/animated/MapSection.tsx b/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}

diff --git a/src/components/customized-theme-provider/CustomizedThemeProvider.tsx b/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;

diff --git a/src/components/logo/AlternatingText.tsx b/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'

diff --git a/src/components/logo/Logo.tsx b/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>
 
 }

diff --git a/src/components/templates/mackenzies-mind/footer/Footer.tsx b/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>
     )
 }