From d846fc524d3d14e815e390503aa80a1301c31d44 Mon Sep 17 00:00:00 2001
From: "Mr. Singleton" <terrell.singleton@gmail.com>
Date: Sun, 3 Dec 2023 07:51:34 -0500
Subject: [PATCH] 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          | 23 +++++++
 sanityIo/schemas/mui/MuiColorPalatte.js       | 62 ++++++++++---------
 .../schemas/sections/web-dev/FooterSection.js | 16 +++++
 src/components/BlockContentTypes.ts           |  2 +
 .../FooterBlockContentLayoutContainer.tsx     |  2 +
 .../animated/AnimatedAboutUsSection.tsx       |  2 +-
 .../animated/AnimatedPortfolioSection.tsx     |  2 +-
 .../animated/HeroAnimatedContentSection.tsx   |  8 ++-
 src/components/animated/MapSection.tsx        |  3 +-
 .../CustomizedThemeProvider.tsx               |  5 +-
 src/components/logo/AlternatingText.tsx       |  3 +-
 src/components/logo/Logo.tsx                  |  3 +-
 .../mackenzies-mind/footer/Footer.tsx         | 34 ++++++++--
 .../footer/FooterMenuContainer.tsx            | 60 +++++++++++-------
 .../footer/FooterMenuGroup.tsx                |  5 +-
 .../mackenzies-mind/header/EnhancedHeader.tsx |  2 +-
 .../mackenzies-mind/header/Header.tsx         |  6 +-
 .../social-media-block/SocialMediaBlock.tsx   | 30 +++++----
 src/theme/common/ColorPalette.ts              |  1 +
 19 files changed, 182 insertions(+), 87 deletions(-)
 create mode 100644 sanityIo/schemas/mui/ColorListing.js

diff --git a/sanityIo/schemas/mui/ColorListing.js b/sanityIo/schemas/mui/ColorListing.js
new file mode 100644
index 00000000..8ecd980c
--- /dev/null
+++ 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"},
+]
\ No newline at end of file
diff --git a/sanityIo/schemas/mui/MuiColorPalatte.js b/sanityIo/schemas/mui/MuiColorPalatte.js
index 869e1a9d..38bbdc82 100644
--- 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
index e67ab604..b515c20a 100644
--- 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
index 06772a55..36a622d9 100644
--- 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
index 7a494e8c..2c636815 100644
--- 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
index 6627eb35..753b0312 100644
--- 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
index 5d3e06d3..7681e48f 100644
--- 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
index 57de6678..5a2976f2 100644
--- 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,6 +48,8 @@ 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(() => {
@@ -55,8 +57,10 @@ const HeroAnimatedContentSection: FunctionComponent<IProps> = (props) => {
             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
index 0bac9c92..c1689693 100644
--- 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
index 4de270b4..73aa5de6 100644
--- 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
index e0ca05c9..6e421da4 100644
--- 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
index 241afcdf..cccaf0c0 100644
--- 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
index da920e6a..3dd26bef 100644
--- 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>
     )
 }
 
diff --git a/src/components/templates/mackenzies-mind/footer/FooterMenuContainer.tsx b/src/components/templates/mackenzies-mind/footer/FooterMenuContainer.tsx
index 21c7bd42..34126c18 100644
--- a/src/components/templates/mackenzies-mind/footer/FooterMenuContainer.tsx
+++ b/src/components/templates/mackenzies-mind/footer/FooterMenuContainer.tsx
@@ -8,6 +8,9 @@ import MailTo from "../../../mail-to/MailTo";
 import Logo from "../../../logo/Logo";
 import AlternatingText from "../../../logo/AlternatingText";
 import SocialMediaBlock from "../../my-digital-resume/social-media-block/SocialMediaBlock";
+import {urlFor} from "../../../block-content-ui/static-pages/cmsStaticPagesClient";
+import {SanityImageAsset} from "../../../BlockContentTypes";
+import {COLORS} from "../../../../theme/common/ColorPalette";
 
 interface IProps {
     pageFooterMenu?: SanityMenuContainer
@@ -28,19 +31,19 @@ const FooterMenuContainer: FunctionComponent<IProps> = (props: IProps) => {
     }))
     const classes = useStyles(customizedThemeContext)
 
-    const smDown = useMediaQuery(customizedThemeContext.breakpoints.down('sm'))
     const mdDown = useMediaQuery(customizedThemeContext.breakpoints.down('md'))
-    const mdOnly = useMediaQuery(customizedThemeContext.breakpoints.only('md'))
     const mdUp = useMediaQuery(customizedThemeContext.breakpoints.up('md'))
     return (
-        <Grid container item className={classes.root}>
+        <Grid container item className={classes.root}
+
+        >
             <Grid container item xs={12} md={4}
-                  sx={smDown ? {
+                  sx={mdDown ? {
                       paddingLeft: "16px",
                       paddingTop: "16px",
                       paddingBottom: "16px",
                       borderLeft: `4px solid ${customizedThemeContext.palette.primary.main}`,
-                      backgroundColor: "rgba(117,117,117,.5)",
+                      backgroundColor: COLORS.TRANSPARENTERWHITE,
                       borderRight: `4px solid ${customizedThemeContext.palette.primary.main}`,
                   } : {}}
             >
@@ -97,27 +100,38 @@ const FooterMenuContainer: FunctionComponent<IProps> = (props: IProps) => {
                     </Grid>
                 </Grid>
             </Grid>
-            <Grid item container xs={12} md={4} spacing={2} alignItems='center' alignContent='center'>
-                {!mdDown && <Grid container item justifyContent='flex-end' xs={6} md={12}>
-                    <Typography variant='body2'>Social Media</Typography>
-                </Grid>}
-                <Grid container item xs={12} md={12} sx={{paddingTop:"4px !important", marginTop:mdDown?4:0,borderTop:"1px solid "+theme.palette.primary.main}}>
-                    {mdDown && <Grid container item justifyContent='flex-end' >
+            {
+                <Grid item container xs={12} md={4} spacing={2} alignItems='center' alignContent='center'>
+                {!mdDown &&
+                    props.isSocialMediaBlock && <Grid container item justifyContent='flex-end' xs={6} md={12}>
                         <Typography variant='body2'>Social Media</Typography>
                     </Grid>}
+                <Grid container item xs={12} md={12} sx={{
+                    paddingTop: "4px !important",
+                    marginTop: mdDown ? 4 : 0,
+                    borderTop: "1px solid " + theme.palette.primary.main
+                }}>
+                    {mdDown &&
+                        props.isSocialMediaBlock &&
+                        <Grid container item justifyContent='flex-end'>
+                            <Typography variant='body2'>Social Media</Typography>
+                        </Grid>}
                     {
-                    props.isSocialMediaBlock && <SocialMediaBlock
-                        bgColor={true}
-                        color='secondary'
-                        spacing={1}
-                        facebook={pageContext.page?.businessContact?.facebook}
-                        twitter={pageContext.page?.businessContact?.twitter}
-                        instagram={pageContext.page?.businessContact?.instagram}
-                        linkedIn={pageContext.page?.businessContact?.linkedIn}
-                        github={pageContext.page?.businessContact?.linkedIn}
-                    />
-                }</Grid>
-            </Grid>
+                        props.isSocialMediaBlock && <SocialMediaBlock
+                            bgColor={true}
+                            theBackgroundColor={'white'}
+                            iconColor={'rgba(0,0,0,0.85)'}
+                            // isBackgroundColor={true}
+                            color='primary'
+                            spacing={1}
+                            facebook={pageContext.page?.businessContact?.facebook}
+                            twitter={pageContext.page?.businessContact?.twitter}
+                            instagram={pageContext.page?.businessContact?.instagram}
+                            linkedIn={pageContext.page?.businessContact?.linkedIn}
+                            github={pageContext.page?.businessContact?.linkedIn}
+                        />}
+                </Grid>
+            </Grid>}
         </Grid>
     )
 }
diff --git a/src/components/templates/mackenzies-mind/footer/FooterMenuGroup.tsx b/src/components/templates/mackenzies-mind/footer/FooterMenuGroup.tsx
index d822c05b..c94045eb 100644
--- a/src/components/templates/mackenzies-mind/footer/FooterMenuGroup.tsx
+++ b/src/components/templates/mackenzies-mind/footer/FooterMenuGroup.tsx
@@ -56,17 +56,16 @@ const FooterMenuGroup: FunctionComponent<LandingPagesFooterMenuGroupProps> = ({m
     }, [menuGroup])
 
     const mdOnly = useMediaQuery(theme.breakpoints.only('sm'))
-    const lgUp = useMediaQuery(theme.breakpoints.up('md'))
     const mdUp = useMediaQuery(theme.breakpoints.up('md'))
 
     return (
         <Grid container direction="column" spacing={2} className={classes.root} >
-            <Grid container item justifyContent={lgUp?'flex-start':'center'}>
+            <Grid container item justifyContent={mdUp?'flex-start':'center'}>
                 <Typography color='primary' variant="body2"
                             className={classes.menuTitle}>{menuGroupContents && menuGroupContents.menuGroupTitle}</Typography>
             </Grid>
             <Grid item container>
-                <Grid container item xs={12} direction={mdOnly ? 'row' : 'column'} spacing={2} alignItems={lgUp?'flex-start':'center'} alignContent={lgUp?'flex-start':'center'} justifyContent={mdUp?'flex-start':'center'} >
+                <Grid container item xs={12} direction={mdOnly ? 'row' : 'column'} spacing={2} alignItems={mdUp?'flex-start':'center'} alignContent={mdUp?'flex-start':'center'} justifyContent={mdUp?'flex-start':'center'} >
                     {
                         menuGroup?.links && menuGroup.links.map((menuLink: any, index: any) => {
                             return (
diff --git a/src/components/templates/mackenzies-mind/header/EnhancedHeader.tsx b/src/components/templates/mackenzies-mind/header/EnhancedHeader.tsx
index 5fdc3990..3449144c 100644
--- a/src/components/templates/mackenzies-mind/header/EnhancedHeader.tsx
+++ b/src/components/templates/mackenzies-mind/header/EnhancedHeader.tsx
@@ -16,7 +16,7 @@ export const useStyles = makeStyles((theme: Theme) => ({
         paddingLeft: "32px",
         paddingRight: "56px",
         paddingTop: "32px",
-        height: theme.mixins.toolbar.height,
+        height: "148px",
         position: "relative"
     },
     opaque: {
diff --git a/src/components/templates/mackenzies-mind/header/Header.tsx b/src/components/templates/mackenzies-mind/header/Header.tsx
index 8075aa11..7e0c04f0 100644
--- a/src/components/templates/mackenzies-mind/header/Header.tsx
+++ b/src/components/templates/mackenzies-mind/header/Header.tsx
@@ -25,11 +25,11 @@ const Header: FunctionComponent<HeaderProps> = (props) => {
             {props.pageHeader?.title ?
                 <Grid item container
                       alignContent='center' alignItems='center' style={{height:"100%",paddingLeft:"8px"}}>
-                    <Grid container item xs={2} sm={2} md={2} >
-                        <Logo logoText={props.pageHeader?.logoText}
+                    <Grid container item xs={4} sm={3} md={3} >
+                        <Logo noWrap logoText={props.pageHeader?.logoText}
                                          logoAccentText={props.pageHeader?.logoAccentText}/>
                     </Grid>
-                    <Grid item container xs={10} sm={10} md={10} justifyContent='flex-end' >
+                    <Grid item container xs={8} sm={9} md={9} justifyContent='flex-end' >
 
                             {
                                 !mdDown && <Grid xs={4} md={10} lg={10} container item justifyContent='flex-end'
diff --git a/src/components/templates/my-digital-resume/social-media-block/SocialMediaBlock.tsx b/src/components/templates/my-digital-resume/social-media-block/SocialMediaBlock.tsx
index c9506fa8..b0fc9174 100644
--- a/src/components/templates/my-digital-resume/social-media-block/SocialMediaBlock.tsx
+++ b/src/components/templates/my-digital-resume/social-media-block/SocialMediaBlock.tsx
@@ -18,6 +18,8 @@ interface IProps {
     github?: string
     color?: PropTypes.Color
     bgColor?: boolean
+    theBackgroundColor?: string
+    iconColor?: string
     spacing?: GridSpacing
 }
 
@@ -25,53 +27,55 @@ const SocialMediaBlock: FunctionComponent<IProps> = (props: IProps) => {
     const customizedThemeContext = useContext(CustomizedThemeContext)
      const useStyles = makeStyles(({
         buttonBackground: {
-            backgroundColor: customizedThemeContext.customizedTheme.palette.primary.main,
+            backgroundColor: props.bgColor ? props.theBackgroundColor:customizedThemeContext.customizedTheme.palette.primary.main,
             borderRadius: 40,
-            padding: customizedThemeContext.customizedTheme.spacing(1)
+            // padding: customizedThemeContext.customizedTheme.spacing(1),
+            color: props.iconColor ?? customizedThemeContext.customizedTheme.palette.primary.main
         },
     }))
     const classes = useStyles()
     return (
             <Grid data-testid='social-media-block' item xs={12} container alignItems='center' justifyContent='flex-end'
-                  spacing={props.spacing ? props.spacing : 0} wrap={'nowrap'}>
+                  spacing={props.spacing ? props.spacing : 0} wrap={'nowrap'} >
                 {props.facebook && <Grid item>
                     <Grid item className={clsx({[classes.buttonBackground]: props.bgColor})}>
                         <IconButton
-                            color={props.color ?? 'primary'}
+
+                            color={'inherit'}
                             href={`https://facebook.com/${props.facebook}`}
-                            size="medium"><Facebook/></IconButton>
+                            size="small"><Facebook/></IconButton>
                     </Grid>
                 </Grid>}
                 {props.twitter && <Grid item>
                     <Grid item className={clsx({[classes.buttonBackground]: props.bgColor})}>
                         <IconButton
-                            color={props.color ?? 'primary'}
+                            color={'inherit'}
                             href={`https://twitter.com/${props.twitter}`}
-                            size="medium"><Twitter/></IconButton>
+                            size="small"><Twitter/></IconButton>
                     </Grid>
                 </Grid>}
                 {props.instagram && <Grid item>
                     <Grid item className={clsx({[classes.buttonBackground]: props.bgColor})}>
                         <IconButton
-                            color={props.color ?? 'primary'}
+                            color={'inherit'}
                             href={`https://instagram.com/${props.instagram}`}
-                            size="medium"><Instagram/></IconButton>
+                            size="small"><Instagram/></IconButton>
                     </Grid>
                 </Grid>}
                 {props.linkedIn && <Grid item>
                     <Grid item className={clsx({[classes.buttonBackground]: props.bgColor})}>
                         <IconButton
-                            color={props.color ?? 'primary'}
+                            color={'inherit'}
                             href={`https://linkedIn.com/in/${props.linkedIn}`}
-                            size="medium"><LinkedIn/></IconButton>
+                            size="small"><LinkedIn/></IconButton>
                     </Grid>
                 </Grid>}
                 {props.github && <Grid item>
                     <Grid item className={clsx({[classes.buttonBackground]: props.bgColor})}>
                         <IconButton
-                            color={props.color ?? 'primary'}
+                            color={'inherit'}
                             href={`https://github.com/${props.github}`}
-                            size="medium"><GitHub/></IconButton>
+                            size="small"><GitHub/></IconButton>
                     </Grid>
                 </Grid>}
             </Grid>
diff --git a/src/theme/common/ColorPalette.ts b/src/theme/common/ColorPalette.ts
index 5cba4b6a..0c3370f9 100644
--- a/src/theme/common/ColorPalette.ts
+++ b/src/theme/common/ColorPalette.ts
@@ -6,6 +6,7 @@ export enum COLORS {
     GRAY = 'rgba(207, 207, 207, 1)',
     LIGHT_GRAY = '#949495',
     TRANSPARENTWHITE = 'rgba(255,255,255,0.75)',
+    TRANSPARENTERWHITE = 'rgba(255,255,255,0.55)',
     LIGHTBLUE = '#2CC4D7',
     ALMOSTPURPLE = "#331BAD",
     LIGHTGRAY = "#F4F3F5",