added some colors and elaine sans

Fix for logo
theHandsomestNerd · Dec 7, 2023 · 0bf241e · 0bf241e
1 parent e869c11
commit 0bf241e
Show file tree

Hide file tree

Showing 16 changed files with 67 additions and 56 deletions.
diff --git a/functions/src/groqQueries.ts b/functions/src/groqQueries.ts
@@ -103,6 +103,7 @@ const HOMEPAGE = `_type,
               }
           },
           headerContent {
+          ...,
             "content": content[]->{
                 ...,
                 headerMenuRef->{

diff --git a/sanityIo/schemas/mui/ColorListing.js b/sanityIo/schemas/mui/ColorListing.js
@@ -19,5 +19,8 @@ export const ColorListing = [
     {value: "ALMOSTWHITE", title: "Almost White"},
     {value: "DARKERGRAY", title: "Darker Gray"},
     {value: "DARK_GRAY", title: "Dark Gray"},
-    {value: "LIGHTER_GRAY", title: "Lighter Gray"},
+    {value: "ALMOST_BLACK", title: "Almost Black"},
+    {value: "PURPLE", title: "Purple"},
+    {value: "LIGHT_WHITE", title: "Light White"},
+    {value: "DISABLED_GRAY", title: "Disabled Gray"},
 ]
diff --git a/sanityIo/schemas/mui/MuiTypography.js b/sanityIo/schemas/mui/MuiTypography.js
@@ -14,7 +14,8 @@ export default {
                         {value: "Prompt", title: "Prompt"},
                         {value: "Raleway", title: "Raleway"},
                         {value: "Poppins", title: "Poppins"},
-                        {value: "Monteserrat", title: "Monteserrat"}
+                        {value: "Monteserrat", title: "Monteserrat"},
+                        {value: "Elaine Sans", title: "Elaine Sans"}
                     ]
                 }}],
 

diff --git a/sanityIo/schemas/portfolio/PortfolioSection.js b/sanityIo/schemas/portfolio/PortfolioSection.js
@@ -30,7 +30,7 @@ export default {
             of: [
                 {type: "reference",
                     to:
-                        [{type: "portfolioItem"}],
+                        [{type: "PortfolioItem"}],
                 }
             ]
         },

diff --git a/sanityIo/schemas/schema.js b/sanityIo/schemas/schema.js
@@ -92,6 +92,7 @@ import AnimatedPortfolioItem from "./sections/animated/AnimatedPortfolioItem";
 import AnimatedPortfolioSection from "./sections/animated/AnimatedPortfolioSection";
 import HeadlineCTASection from "./HeadlineCTASection";
 import MapSection from "./sections/MapSection";
+import PortfolioItem from "./portfolio/PortfolioItem";
 
 // Then we give our schema to the builder and provide the result to Sanity
 export default [
@@ -165,7 +166,7 @@ export default [
     TestimonialsSection,
     Testimonials,
     PortfolioSection,
-    portfolioItem,
+    PortfolioItem,
     headerContentContainer,
     footerContentContainer,
     HeaderSection,

diff --git a/sanityIo/schemas/sections/HeaderSection.js b/sanityIo/schemas/sections/HeaderSection.js
@@ -1,3 +1,5 @@
+import {ColorListing} from "../mui/ColorListing";
+
 export default {
     name: 'HeaderSection',
     title: 'Header Section',
@@ -18,6 +20,17 @@ export default {
             title: 'CTA Button Text',
             type: 'string'
         },
+        {
+            name: 'logoImgSrc',
+            title: 'Logo Image',
+            type: 'image'
+        },
+        {
+            name: 'backgroundColor',
+            title: 'Background Color',
+            type: 'string',
+            options: {list: ColorListing}
+        },
         {
             name: 'isSearch',
             title: 'Is Search included in header',

diff --git a/src/common/sanityIo/groqQueries.ts b/src/common/sanityIo/groqQueries.ts
@@ -88,6 +88,7 @@ const HOMEPAGE = `_type,
           metaImage,
           theme->,
           headerContent {
+            ...,
             "content": content[]->{
                 ...,
                 headerMenuRef->{

diff --git a/src/components/BlockContentTypes.ts b/src/components/BlockContentTypes.ts
@@ -604,8 +604,10 @@ export type HeaderSectionType = {
     name: string
     isSearch: boolean
     isEnhanced: boolean
+    backgroundColor: string
     ctaButtonText: string
     ctaButtonLink: string
+    logoImgSrc: SanityImageAsset
     highlightedDetails: ServiceAmenityType[]
     headerMenuRef: SanityMenuContainer
 }

diff --git a/src/components/FooterBlockContentLayoutContainer.tsx b/src/components/FooterBlockContentLayoutContainer.tsx
@@ -63,20 +63,6 @@ const FooterBlockContentLayoutContainer: FunctionComponent<FooterBlockContentLay
                                     </Grid>
                                 </Card></Grid>
                         </Grid>
-                    case 'DevelopmentFooterSection':
-                        const developmentFooter: DevelopmentFooterSectionType = columnLayoutContainer
-
-                        return (
-                            <ThemeProvider key={'BOTTOM_OF_PAGE_DEV'} theme={WebDevSiteTheme}><Grid container item
-                                                                                                    xs={12}
-                            >
-                                <Link id={"BOTTOM_OF_PAGE"} underline="hover"><></>
-                                </Link>
-                                <WebDevFooter
-                                    pageFooter={developmentFooter.footerMenuRef}
-                                />
-                            </Grid></ThemeProvider>
-                        );
                     case 'FooterSection':
                         const footer: FooterSectionType = columnLayoutContainer
 

diff --git a/src/components/HeaderBlockContentLayoutContainer.tsx b/src/components/HeaderBlockContentLayoutContainer.tsx
@@ -10,6 +10,7 @@ import Header from "./templates/mackenzies-mind/header/Header";
 import WebDevSiteTheme from "../theme/WebDevSiteTheme";
 import EnhancedHeader from "./templates/mackenzies-mind/header/EnhancedHeader";
 import CustomizedThemeContext from "./customized-theme-provider/CustomizedThemeContext";
+import {convertToHexCode} from "../theme/common/ColorPalette";
 
 export type HeaderBlockContentLayoutContainerProps = {
     content?: any,
@@ -88,23 +89,6 @@ const HeaderBlockContentLayoutContainer: FunctionComponent<HeaderBlockContentLay
                                     </Grid>
                                 </Card></Grid>
                         </Grid>
-                    case 'DevelopmentHeaderSection':
-                        const developmentHeader: DevelopmentHeaderSectionType = columnLayoutContainer
-
-                        return (
-                            <ThemeProvider theme={WebDevSiteTheme} key={'TOP_OF_PAGE_DEV'}>
-                                <Grid container item xs={12}
-                                      style={{height: WebDevSiteTheme.mixins.toolbar.height}}
-                                      alignContent='center'
-                                      alignItems='center'>
-                                    <Link id={"TOP_OF_PAGE"} underline="hover"><></>
-                                    </Link>
-                                    <DevelopmentHeader
-                                        pageHeader={developmentHeader.headerMenuRef}
-                                    />
-                                </Grid>
-                            </ThemeProvider>
-                        );
                     case 'HeaderSection':
                         const header: HeaderSectionType = columnLayoutContainer
 
@@ -114,7 +98,7 @@ const HeaderBlockContentLayoutContainer: FunctionComponent<HeaderBlockContentLay
                                 </Link>
                                 {
                                     showBasicHeader || !header.isEnhanced ?
-                                        <Header isSearch={header.isSearch} isAppBar={true}
+                                        <Header backgroundColor={header.backgroundColor}  isSearch={header.isSearch} isAppBar={true}
                                                 pageHeader={header.headerMenuRef}/>
                                         : <EnhancedHeader pageHeader={header}/>
                                 }

diff --git a/src/components/logo/Logo.tsx b/src/components/logo/Logo.tsx
@@ -14,7 +14,7 @@ interface CssProps {
 
 export const useStyles = makeStyles((theme: Theme) => ({
     imageRoot: (props: CssProps) => ({
-        backgroundImage: `url(${props.logoImageSrc ? urlFor(props.logoImageSrc).height(props.height ?? 0).url() : logoImg})`,
+        backgroundImage: `url('${props.logoImageSrc ? urlFor(props.logoImageSrc).height(props.height ?? 68).url() : logoImg}')`,
         backgroundSize: "contain",
         backgroundRepeat: "no-repeat",
         minWidth: "100px",
@@ -41,7 +41,7 @@ interface LogoProps {
 
 const Logo: FunctionComponent<LogoProps> = (props) => {
     const classes = useStyles({logoImageSrc: props.logoImageSrc, height: props.height})
-
+console.log(props.logoImageSrc && urlFor(props.logoImageSrc).height(props.height ?? 0).url())
     return !props.logoText ?
         <Grid item container className={classes.imageRoot}
               style={{backgroundPosition: props.isCenter ? "center" : "left"}}/>

diff --git a/src/components/templates/mackenzies-mind/header/AppBarWrapper.tsx b/src/components/templates/mackenzies-mind/header/AppBarWrapper.tsx
@@ -3,7 +3,7 @@ import {AppBar} from "@mui/material";
 import CustomizedThemeContext from "../../../customized-theme-provider/CustomizedThemeContext";
 import makeStyles from "@mui/styles/makeStyles";
 import {Theme} from "@mui/material/styles";
-import {COLORS} from "../../../../theme/common/ColorPalette";
+import {COLORS, convertToHexCode} from "../../../../theme/common/ColorPalette";
 
 export const useStyles = makeStyles((theme: Theme) => ({
     root: (props: any) => ({
@@ -22,6 +22,7 @@ interface IProps {
     isAppBar?: boolean,
     children: any
     isEnhanced?: boolean
+    backgroundColor?:string
 }
 
 const AppBarWrapper: FunctionComponent<PropsWithChildren<IProps>> = (props: IProps) => {
@@ -34,7 +35,7 @@ const AppBarWrapper: FunctionComponent<PropsWithChildren<IProps>> = (props: IPro
 
     return (
         props.isAppBar ? <AppBar style={{
-            backgroundColor: `${props.isAppBar && props.isEnhanced ? "black" : "white"}`,
+            backgroundColor: `${props.isAppBar && props.isEnhanced ? "black" : convertToHexCode(props.backgroundColor)}`,
         }} className={classes.root}>
             {props.children}
         </AppBar> : <>{props.children}</>

diff --git a/src/components/templates/mackenzies-mind/header/Header.tsx b/src/components/templates/mackenzies-mind/header/Header.tsx
@@ -1,4 +1,4 @@
-import React, {FunctionComponent} from 'react'
+import React, {FunctionComponent, useContext} from 'react'
 import {Box, Grid, IconButton, Modal, useMediaQuery, useTheme} from '@mui/material'
 import MainMenu from "./MainMenu";
 import FilteredMenuItems from "../../../filtered-menu-items/FilteredMenuItems";
@@ -12,6 +12,7 @@ import {COLORS} from "../../../../theme/common/ColorPalette";
 
 import makeStyles from "@mui/styles/makeStyles";
 import {Theme} from "@mui/material/styles";
+import PageContext from "../../../page-context/PageContext";
 
 export const useStyles = makeStyles((theme: Theme) => ({
     hover:{
@@ -33,21 +34,23 @@ export type HeaderProps = {
     isSearch?: boolean
     updateIsLoading?: (value: boolean) => void
     isEnhanced?: boolean
+    backgroundColor?:string
 }
 
 const Header: FunctionComponent<HeaderProps> = (props) => {
     const classes = useStyles()
     const customizedTheme = useTheme()
+    const page = useContext(PageContext)
 
     const mdDown = useMediaQuery(customizedTheme.breakpoints.down('md'))
     const [isSearchOpen, setIsSearchOpen] = React.useState<boolean>(false)
 
-    return (<AppBarWrapper isAppBar={props.isAppBar} isEnhanced={props.isEnhanced}>
+    return (<AppBarWrapper backgroundColor={props.backgroundColor} isAppBar={props.isAppBar} isEnhanced={props.isEnhanced}>
             {props.pageHeader?.title ?
                 <Grid item container
                       alignContent='center' alignItems='center' style={{height: "100%", paddingLeft: "8px"}}>
                     <Grid container item xs={4} sm={3} md={3}>
-                        <Logo noWrap logoText={props.pageHeader?.logoText}
+                        <Logo logoImageSrc={props.pageHeader?.logoImageSrc} noWrap logoText={props.pageHeader?.logoText}
                               logoAccentText={props.pageHeader?.logoAccentText}/>
                     </Grid>
                     <Grid item container xs={8} sm={9} md={9} justifyContent='flex-end'>

diff --git a/src/components/templates/web-dev-site/WebDevPortfolioSection.tsx b/src/components/templates/web-dev-site/WebDevPortfolioSection.tsx
@@ -6,7 +6,6 @@ import {ResumePortfolioItem, ResumePortfolioSectionType} from "../../BlockConten
 import {COLORS} from "../../../theme/common/ColorPalette";
 import {urlFor} from "../../block-content-ui/static-pages/cmsStaticPagesClient";
 import {Close} from "@mui/icons-material";
-import WebDevSiteTheme from "../../../theme/WebDevSiteTheme";
 import firebaseAnalyticsClient from "../../../common/firebase/FirebaseAnalyticsClient";
 import PageContext from "../../page-context/PageContext";
 import CustomizedThemeContext from "../../customized-theme-provider/CustomizedThemeContext";
@@ -61,8 +60,7 @@ const WebDevPortfolioSection: FunctionComponent<IProps> = (props: IProps) => {
 
     const mdDown = useMediaQuery(customizedThemeContext.customizedTheme.breakpoints.down('md'))
     return (
-        <StyledEngineProvider injectFirst>
-            <ThemeProvider theme={WebDevSiteTheme}>
+
                 <Grid container item
                       className={classes.root}>
                     <Grid
@@ -90,12 +88,12 @@ const WebDevPortfolioSection: FunctionComponent<IProps> = (props: IProps) => {
                             {
                                 props.sectionData.portfolioEntries?.map((portfolioItem: ResumePortfolioItem, index2: number) => {
                                     return <Grid container item key={index2}>
-                                        <Grid container item>
+                                        <Grid container item direction={index2%2 == 0?"row":"row-reverse"}>
                                             <Grid container item md={6} style={{
                                                 backgroundImage: `url('${urlFor(portfolioItem.coverImage ?? "").url()}')`,
                                                 backgroundSize: "cover",
                                                 backgroundRepeat: "no-repeat",
-                                                minHeight: "100px"
+                                                minHeight: "400px"
                                             }}></Grid>
                                             <Grid container item md={6}
                                                   style={{
@@ -109,7 +107,7 @@ const WebDevPortfolioSection: FunctionComponent<IProps> = (props: IProps) => {
                                                                              width: "max-content",
                                                                              // padding: "0 !important",
                                                                              // backgroundColor: "red",
-                                                                             color: (index2) % 2 === 1 ? COLORS.AQUA : theme.palette.secondary.main,
+                                                                             color:COLORS.AQUA,
                                                                          }}>
                                                                 <Grid item container>
                                                                     <Typography variant='subtitle2'
@@ -239,8 +237,7 @@ const WebDevPortfolioSection: FunctionComponent<IProps> = (props: IProps) => {
                             </Grid>
                         </Grid>
                     </Modal>
-                </Grid></ThemeProvider>
-        </StyledEngineProvider>
+                </Grid>
     );
 }
 

diff --git a/src/components/templates/web-dev-site/WebDevTestimonialsSection.tsx b/src/components/templates/web-dev-site/WebDevTestimonialsSection.tsx
@@ -44,7 +44,6 @@ const WebDevTestimonialsSection: FunctionComponent<IProps> = (props: IProps) =>
                             <Grid item container wrap='nowrap'>
                                 <Grid item>
                                     <Typography color='primary' variant='h2' align='center'
-                                                style={{fontFamily: "Elaine Sans"}}
                                                 display='inline'>{props.sectionData?.title}</Typography>
                                 </Grid>
                             </Grid>
@@ -68,11 +67,12 @@ const WebDevTestimonialsSection: FunctionComponent<IProps> = (props: IProps) =>
                                     <Grid item container>
                                         <Grid container item>
                                             <Typography
-                                                variant='h6' gutterBottom
-                                                style={{fontFamily: "Elaine Sans"}}>{feedbackEntry.quoteSummary}</Typography>
+                                                color='textSecondary'
+                                                variant='h6' gutterBottom>{feedbackEntry.quoteSummary}</Typography>
                                         </Grid>
                                         <Grid container item>
                                             <Typography
+                                                color='textSecondary'
                                                 variant='body1' gutterBottom>"{feedbackEntry.quote}"</Typography>
                                         </Grid>
                                     </Grid>
@@ -85,17 +85,17 @@ const WebDevTestimonialsSection: FunctionComponent<IProps> = (props: IProps) =>
                                         <Grid item container xs={9}>
                                             <Grid container item>
                                                 <Typography display='inline'
-                                                            style={{fontFamily:"Elaine Sans"}}
+                                                            color='textSecondary'
                                                             variant='body2'>{feedbackEntry.customerName}</Typography>
                                             </Grid>
                                             <Grid item container style={{color: COLORS.AQUA}}>
                                                 <Typography display='inline'
                                                             color='inherit'
-                                                            style={{fontFamily:"Elaine Sans"}}
                                                             variant='subtitle2'>{feedbackEntry.customerTitle}</Typography>
                                             </Grid>
                                             <Grid item container>
                                                 <Typography display='inline'
+                                                            color='textSecondary'
                                                             variant='body1'>{feedbackEntry.companyName}</Typography>
                                             </Grid>
                                         </Grid>

diff --git a/src/theme/common/ColorPalette.ts b/src/theme/common/ColorPalette.ts
@@ -24,6 +24,10 @@ export enum COLORS {
     PINK = '#FFA9E7',
     DARKORANGE = '#462600',
     LIGHT_GRAY2 = '#E3E3E3',
+    ALMOST_BLACK='#131313',
+    PURPLE='#333784',
+    LIGHT_WHITE='#404040',
+    DISABLED_GRAY='#949495'
 }
 
 export const convertToHexCode = (value?: string) => {
@@ -95,6 +99,20 @@ export const convertToHexCode = (value?: string) => {
         case 'DARK_GRAY':
             defaultBg = COLORS.DARK_GRAY
             break;
+        case 'ALMOST_BLACK':
+            defaultBg = COLORS.ALMOST_BLACK
+            break;
+        case 'PURPLE':
+            defaultBg = COLORS.PURPLE
+            break;
+        case 'LIGHT_WHITE':
+            defaultBg = COLORS.LIGHT_WHITE
+            break;
+        case 'DISABLED_GRAY':
+            defaultBg = COLORS.DISABLED_GRAY
+            break;
+
+
         default:
             defaultBg = COLORS.WHITESMOKE
     }