From b4b5da13844123b78cb9e86e292622a5fd76d20d Mon Sep 17 00:00:00 2001 From: "Mr. Singleton" Date: Tue, 12 Dec 2023 09:15:02 -0500 Subject: [PATCH] Storybook pull request (#16) * added some colors and elaine sans Fix for logo * storybook stories for web consulting template --- .storybook/preview-head.html | 1 + functions/package.json | 2 +- functions/src/groqQueries.ts | 1 + package.json | 2 +- sanityIo/package.json | 4 +- sanityIo/schemas/mui/ColorListing.js | 5 +- sanityIo/schemas/mui/MuiTypography.js | 3 +- .../schemas/portfolio/PortfolioSection.js | 2 +- sanityIo/schemas/schema.js | 3 +- sanityIo/schemas/sections/HeaderSection.js | 13 + src/common/sanityIo/Types.ts | 28 +- src/common/sanityIo/groqQueries.ts | 1 + src/components/BlockContentTypes.ts | 81 +- .../FooterBlockContentLayoutContainer.tsx | 14 - .../HeaderBlockContentLayoutContainer.tsx | 20 +- .../animated/AnimatedAboutUsItem.tsx | 23 +- .../animated/AnimatedAboutUsSection.tsx | 19 +- .../animated/AnimatedPortfolioItem.tsx | 3 +- .../animated/AnimatedServiceItem.tsx | 148 +- .../animated/AnimatedServicesSection.tsx | 19 +- src/components/animated/BulletedHeader.tsx | 22 +- .../animated/HeroAnimatedContentSection.tsx | 17 +- src/components/animated/HorizontalAmenity.tsx | 18 +- .../AbstractShapesBackground.tsx | 10 +- src/components/colored-png/ColoredPng.tsx | 8 +- .../CustomizedThemeProvider.tsx | 174 +- .../getThemeFromSanity.ts | 181 ++ src/components/logo/Logo.tsx | 4 +- .../footer/FooterMenuContainer.tsx | 3 +- .../mackenzies-mind/header/AppBarWrapper.tsx | 5 +- .../mackenzies-mind/header/EnhancedHeader.tsx | 42 +- .../mackenzies-mind/header/Header.tsx | 10 +- .../resume-bio-section/ResumeBioSection.tsx | 5 +- .../web-dev-site/WebDevHeroContentSection.tsx | 10 +- .../web-dev-site/WebDevPortfolioSection.tsx | 13 +- .../WebDevTestimonialsSection.tsx | 10 +- .../data/AnimatedAboutUsSectionData.ts | 102 + src/stories/data/AnimatedHeroSectionData.ts | 29 + .../data/AnimatedPortfolioSectionData.ts | 87 + .../data/AnimatedServicesSectionData.ts | 86 + src/stories/data/CalculatedHomePageData.ts | 2408 +++++++++++++++++ .../data/ConsultingFooterSectionData.ts | 66 + .../data/ConsultingHeaderSectionData.ts | 73 + src/stories/data/DigitalResumeThemeData.ts | 172 +- src/stories/data/HomePageData.ts | 4 +- src/stories/data/MapSectionData.ts | 41 + src/stories/data/WebConsultingHomePageData.ts | 1050 +++++++ src/stories/data/WebConsultingThemeData.ts | 171 ++ src/stories/data/WebDevThemeData.ts | 136 + src/stories/digital-resume/Button.stories.tsx | 32 +- .../digital-resume/ResumeBio.stories.tsx | 11 +- .../ResumeBusinessCardFab.stories.tsx | 6 +- .../ResumeContactUs.stories.tsx | 7 +- .../ResumeEducation.stories.tsx | 6 +- .../ResumeExperience.stories.tsx | 6 +- .../digital-resume/ResumeFeedback.stories.tsx | 6 +- .../digital-resume/ResumeFooter.stories.tsx | 6 +- .../digital-resume/ResumeHeader.stories.tsx | 6 +- .../ResumePortfolio.stories.tsx | 6 +- .../digital-resume/ResumeSkills.stories.tsx | 6 +- .../SocialMediaBlock.stories.tsx | 6 +- .../AnimatedAboutUs.stories.tsx | 34 + .../AnimatedHeroSection.stories.tsx | 32 + .../AnimatedMapSection.stories.tsx | 38 + .../AnimatedPortfolioSection.stories.tsx | 38 + .../AnimatedServicesSection.stories.tsx | 36 + .../ConsultingFooter.stories.tsx | 38 + .../ConsultingHeader.stories.tsx | 35 + .../WebDevHeroSection.stories.tsx | 9 +- src/theme/common/ColorPalette.ts | 18 + 70 files changed, 5229 insertions(+), 502 deletions(-) create mode 100644 .storybook/preview-head.html create mode 100644 src/components/customized-theme-provider/getThemeFromSanity.ts create mode 100644 src/stories/data/AnimatedAboutUsSectionData.ts create mode 100644 src/stories/data/AnimatedHeroSectionData.ts create mode 100644 src/stories/data/AnimatedPortfolioSectionData.ts create mode 100644 src/stories/data/AnimatedServicesSectionData.ts create mode 100644 src/stories/data/CalculatedHomePageData.ts create mode 100644 src/stories/data/ConsultingFooterSectionData.ts create mode 100644 src/stories/data/ConsultingHeaderSectionData.ts create mode 100644 src/stories/data/MapSectionData.ts create mode 100644 src/stories/data/WebConsultingHomePageData.ts create mode 100644 src/stories/data/WebConsultingThemeData.ts create mode 100644 src/stories/data/WebDevThemeData.ts create mode 100644 src/stories/web-consulting/AnimatedAboutUs.stories.tsx create mode 100644 src/stories/web-consulting/AnimatedHeroSection.stories.tsx create mode 100644 src/stories/web-consulting/AnimatedMapSection.stories.tsx create mode 100644 src/stories/web-consulting/AnimatedPortfolioSection.stories.tsx create mode 100644 src/stories/web-consulting/AnimatedServicesSection.stories.tsx create mode 100644 src/stories/web-consulting/ConsultingFooter.stories.tsx create mode 100644 src/stories/web-consulting/ConsultingHeader.stories.tsx diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html new file mode 100644 index 00000000..29fc9518 --- /dev/null +++ b/.storybook/preview-head.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/functions/package.json b/functions/package.json index 56e3d5e3..ec65072f 100644 --- a/functions/package.json +++ b/functions/package.json @@ -1,6 +1,6 @@ { "name": "functions", - "version": "0.5.0", + "version": "0.6.0", "scripts": { "lint": "eslint --ext .js,.ts .", "build": "tsc", diff --git a/functions/src/groqQueries.ts b/functions/src/groqQueries.ts index 57c05153..a6cbc002 100644 --- a/functions/src/groqQueries.ts +++ b/functions/src/groqQueries.ts @@ -103,6 +103,7 @@ const HOMEPAGE = `_type, } }, headerContent { + ..., "content": content[]->{ ..., headerMenuRef->{ diff --git a/package.json b/package.json index 4a4f472f..d95ec8fa 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "chowworks-website", - "version": "0.5.0", + "version": "0.6.0", "license": "GPL-3.0-or-later", "private": true, "dependencies": { diff --git a/sanityIo/package.json b/sanityIo/package.json index 3ad7d9cc..b769f4e8 100644 --- a/sanityIo/package.json +++ b/sanityIo/package.json @@ -1,7 +1,7 @@ { - "name": "chow-works-sanity", + "name": "the-handsomest-nerd-sanity", "private": true, - "version": "0.5.0", + "version": "0.6.0", "description": "Sanity CMS for React Website Builder", "main": "package.json", "author": "theHandsomestNerd ", diff --git a/sanityIo/schemas/mui/ColorListing.js b/sanityIo/schemas/mui/ColorListing.js index 8ecd980c..bf937983 100644 --- 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"}, ] \ No newline at end of file diff --git a/sanityIo/schemas/mui/MuiTypography.js b/sanityIo/schemas/mui/MuiTypography.js index b6d4bb8c..754e542e 100644 --- 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 index 528893e4..7d0557a3 100644 --- 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 index 7ae83beb..b546d04e 100644 --- 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 index 2d6a52ca..f5b92800 100644 --- 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/Types.ts b/src/common/sanityIo/Types.ts index 5a93f1b7..6eca7261 100644 --- a/src/common/sanityIo/Types.ts +++ b/src/common/sanityIo/Types.ts @@ -32,6 +32,8 @@ export type SanityGroupSchedule = { } export type SanityBusinessContact = { + "_type"?: "BusinessContact" + title?:string email?: string address?: string phone?: string @@ -91,6 +93,7 @@ export type SanityUnderConstructionPageType = { } export type SanityMuiTheme = { + _type?: "MuiTheme" title?: string slug?: SanitySlug appBarHeight?: number @@ -109,27 +112,30 @@ export type SanityMuiBreakpoints = { export type SanityMuiFontFace = { - name: string - fontSize: string - fontStyle: string - fontWeight: string - lineHeight: string - letterSpacing: string + name?: string + fontSize?: string + fontStyle?: string + fontWeight?: string + lineHeight?: string + letterSpacing?: string textTransform?: any [key:string]: any - mediaQueries: SanityMuiMediaQuery[] + mediaQueries?: SanityMuiMediaQuery[] } export type SanityMuiMediaQuery = { - breakpoint: string + "_type"?: "MuiMediaQuery" + breakpoint: string[] typography: SanityMuiFontFace } export type SanityMuiTypography = { + "_type"?: "MuiTypography", fontFamily: string[] fontFaces?: SanityMuiFontFace[] } export type SanityMuiColorPalette = { + "_type"?: "MuiColorPalette", defaultBackground: string defaultPaperBackgroundColor: string primaryColor: string @@ -211,7 +217,7 @@ export type SanityModalType = { } export type SanityMenuItem = { - _type: string + _type?:string, title?: string, displayText?: string, url?: string, @@ -222,7 +228,7 @@ export type SanityMenuItem = { } export type SanityMenuGroup = { - _type: string + _type?:string, title?: string, slug?: SanitySlug, menuGroupTitle?: string, @@ -235,7 +241,7 @@ export type SanityMenuContainer = { title?: string, slug?: SanitySlug, displayText?: string, - subMenus?: SanityMenuGroup & SanityMenuItem[] + subMenus?: (SanityMenuGroup & SanityMenuItem)[] logoImageAltText?: string logoText?: string logoAccentText?: string diff --git a/src/common/sanityIo/groqQueries.ts b/src/common/sanityIo/groqQueries.ts index 21d5c314..76b45d6f 100644 --- 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 index ebcb2f87..aa01b6b7 100644 --- a/src/components/BlockContentTypes.ts +++ b/src/components/BlockContentTypes.ts @@ -17,20 +17,19 @@ export type HeroContentSectionType = { export type HeroAnimatedContentSectionType = { name: string title: string - theme: SanityMuiTheme contentSlides: SanityHeroContentSlide[] } export type SanityHeroContentSlide = { - heroImage: SanityImageAsset - heroBullet: SanityImageAsset - heroImageAltText: string - heroImageBackground: SanityImageAsset - contentTitle: string - contentWelcomeMessage: string - contentText: string - ctaButtonTitle: string - ctaButtonLink: string + heroImage?: SanityImageAsset + heroBullet?: SanityImageAsset + heroImageAltText?: string + heroImageBackground?: SanityImageAsset + contentTitle?: string + contentWelcomeMessage?: string + contentText?: string + ctaButtonTitle?: string + ctaButtonLink?: string } @@ -192,25 +191,25 @@ export type ThwServiceItemNoRefType = { } & SanityDocumentFields export type AnimatedServiceItemNoRefType = { - name: string + name?: string imageSrc?: SanityImageAsset iconImageSrc?: SanityImageAsset backgroundImageSrc?: SanityImageAsset - imageSrcAltText: string - contentTitle: string - contentText: string - ctaButtonText: string - ctaButtonLink: string - learnMoreLink: string - learnMoreText: string - educationPageTitle: string - educationPageSlimHeroImage: SanityImageAsset - extendedDescriptions: string[] - benefitsOfServiceTitle: string - benefitsOfServiceContents: string[] - benefitsOfServiceBullets: string[] - serviceAmenities: ServiceAmenityType[] - slug: SanitySlug + imageSrcAltText?: string + contentTitle?: string + contentText?: string + ctaButtonText?: string + ctaButtonLink?: string + learnMoreLink?: string + learnMoreText?: string + educationPageTitle?: string + educationPageSlimHeroImage?: SanityImageAsset + extendedDescriptions?: string[] + benefitsOfServiceTitle?: string + benefitsOfServiceContents?: string[] + benefitsOfServiceBullets?: string[] + serviceAmenities?: ServiceAmenityType[] | undefined + slug?: SanitySlug } & SanityDocumentFields export type AnimatedAboutUsSectionType = { @@ -221,13 +220,13 @@ export type AnimatedAboutUsSectionType = { contentPreTitle: string contentText: string contentTexts: string[] - servicesList: AnimatedServiceItemNoRefType[] + servicesList: AnimatedServiceItemNoRefType[] | undefined highlightedAmenities?: ServiceAmenityType[] highlightedAmenitiesTitle?: string highlightedAmenitiesTexts?: string[] highlightedAmenitiesBullets?: string[] - servicesImageSrcArr: SanityImageAsset[] - servicesMasonryAccentImageSrc: SanityImageAsset + servicesImageSrcArr: (SanityImageAsset| undefined)[] + servicesMasonryAccentImageSrc?: SanityImageAsset } export type AnimatedServicesSectionType = { @@ -241,9 +240,9 @@ export type AnimatedServicesSectionType = { contentSummaryTexts: string[] ctaButtonText: string ctaButtonLink: string - videoPreviewImageSrc:SanityImageAsset - videoPreviewSectionBackgroundImageSrc: SanityImageAsset - videoUrl:string + videoPreviewImageSrc?:SanityImageAsset + videoPreviewSectionBackgroundImageSrc?: SanityImageAsset + videoUrl?:string videoPreviewText:string } @@ -601,19 +600,23 @@ export type DevelopmentHeaderSectionType = { headerMenuRef: SanityMenuContainer } export type HeaderSectionType = { - name: string - isSearch: boolean - isEnhanced: boolean - ctaButtonText: string - ctaButtonLink: string - highlightedDetails: ServiceAmenityType[] - headerMenuRef: SanityMenuContainer + title?: string + name?: string + isSearch?: boolean + isEnhanced?: boolean + backgroundColor?: string + ctaButtonText?: string + ctaButtonLink?: string + logoImgSrc?: SanityImageAsset + highlightedDetails?: ServiceAmenityType[] + headerMenuRef?: SanityMenuContainer } export type DevelopmentFooterSectionType = { name: string footerMenuRef: SanityMenuContainer } export type FooterSectionType = { + _type:string name: string backgroundImgSrc?: SanityImageAsset backgroundColor?: string diff --git a/src/components/FooterBlockContentLayoutContainer.tsx b/src/components/FooterBlockContentLayoutContainer.tsx index e851791d..b18fc81a 100644 --- a/src/components/FooterBlockContentLayoutContainer.tsx +++ b/src/components/FooterBlockContentLayoutContainer.tsx @@ -63,20 +63,6 @@ const FooterBlockContentLayoutContainer: FunctionComponent - case 'DevelopmentFooterSection': - const developmentFooter: DevelopmentFooterSectionType = columnLayoutContainer - - return ( - - <> - - - - ); case 'FooterSection': const footer: FooterSectionType = columnLayoutContainer diff --git a/src/components/HeaderBlockContentLayoutContainer.tsx b/src/components/HeaderBlockContentLayoutContainer.tsx index cd3a920c..2cf4e36d 100644 --- 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 - case 'DevelopmentHeaderSection': - const developmentHeader: DevelopmentHeaderSectionType = columnLayoutContainer - - return ( - - - <> - - - - - ); case 'HeaderSection': const header: HeaderSectionType = columnLayoutContainer @@ -114,7 +98,7 @@ const HeaderBlockContentLayoutContainer: FunctionComponent { showBasicHeader || !header.isEnhanced ? -
: } diff --git a/src/components/animated/AnimatedAboutUsItem.tsx b/src/components/animated/AnimatedAboutUsItem.tsx index f055071b..9eff2288 100644 --- a/src/components/animated/AnimatedAboutUsItem.tsx +++ b/src/components/animated/AnimatedAboutUsItem.tsx @@ -1,11 +1,12 @@ import React, {FunctionComponent, useContext} from 'react' -import {Card, Grid, ThemeProvider, Typography, useMediaQuery} from '@mui/material' +import {Card, Grid, ThemeProvider, Typography, useMediaQuery, useTheme} from '@mui/material' import {v4 as uuidv4} from 'uuid' import {AnimatedServiceItemNoRefType} from "../BlockContentTypes"; import ImageWIthButtonOverlay from "../image-with-button-overlay/ImageWithButtonOverlay"; import CustomizedThemeContext from "../customized-theme-provider/CustomizedThemeContext"; import {urlFor} from "../block-content-ui/static-pages/cmsStaticPagesClient"; import {motion, useAnimationControls} from "framer-motion"; +import imagePlaceholderClient from "../../utils/imagePlaceholderClient"; interface IProps { @@ -18,28 +19,29 @@ interface IProps { const AnimatedAboutUsItem: FunctionComponent = (props: IProps) => { - const customizedTheme = useContext(CustomizedThemeContext) + // const customizedTheme = useContext(CustomizedThemeContext) const controls = useAnimationControls() const textColorControls = useAnimationControls() const overlayControl = useAnimationControls() + const theme = useTheme() + const animateServiceHover = async () => { overlayControl.start({opacity: 1}, {duration: .5}) controls.start({scale: 1}, {duration: .5}) - textColorControls.start({color: customizedTheme.customizedTheme.palette.primary.main}) + textColorControls.start({color: theme.palette.primary.main}) } const animateServiceNoHover = async () => { controls.start({scale: 1.1}, {duration: .25}) overlayControl.start({opacity: 0}, {duration: .5}) - textColorControls.start({color: customizedTheme.customizedTheme.palette.text.primary}) + textColorControls.start({color: theme.palette.text.primary}) } - const smDown = useMediaQuery(customizedTheme.customizedTheme.breakpoints.down('sm')) + const smDown = useMediaQuery(theme.breakpoints.down('sm')) return ( - - { + { animateServiceHover() }} onHoverEnd={async () => { animateServiceNoHover() @@ -79,12 +81,12 @@ const AnimatedAboutUsItem: FunctionComponent = (props: IProps) => { alignContent='center' style={{height: "100%"}}> + src={urlFor(props.service.iconImageSrc ?? "").url() ?? imagePlaceholderClient.placeholderOrImage(props.service.iconImageSrc, 64, 64)}/> = (props: IProps) => { = (props: IProps) => { - ) } diff --git a/src/components/animated/AnimatedAboutUsSection.tsx b/src/components/animated/AnimatedAboutUsSection.tsx index 753b0312..3fde580b 100644 --- a/src/components/animated/AnimatedAboutUsSection.tsx +++ b/src/components/animated/AnimatedAboutUsSection.tsx @@ -9,6 +9,7 @@ import {Circle} from "@mui/icons-material"; import {motion} from "framer-motion" import BulletedHeader from "./BulletedHeader"; import HorizontalAmenity from "./HorizontalAmenity"; +import imagePlaceholderClient from "../../utils/imagePlaceholderClient"; export const useStyles = makeStyles((theme: Theme) => ({ root: { @@ -47,7 +48,7 @@ const AnimatedAboutUsSection: FunctionComponent = (props) => { } @@ -56,8 +57,8 @@ const AnimatedAboutUsSection: FunctionComponent = (props) => { })} - + spacing={2} > + @@ -100,7 +101,7 @@ const AnimatedAboutUsSection: FunctionComponent = (props) => { variant='body1' gutterBottom>{segment} ))} - + @@ -132,7 +133,7 @@ const AnimatedAboutUsSection: FunctionComponent = (props) => { @@ -141,10 +142,10 @@ const AnimatedAboutUsSection: FunctionComponent = (props) => { } { props.sectionData?.servicesImageSrcArr && - + + src={urlFor(props.sectionData?.servicesImageSrcArr[0] ?? "").url() ?? imagePlaceholderClient.placeholderOrImage(props.sectionData?.servicesImageSrcArr[0], 485, 356)}/> } @@ -153,13 +154,13 @@ const AnimatedAboutUsSection: FunctionComponent = (props) => { + src={urlFor(props.sectionData?.servicesImageSrcArr[1] ?? "").url() ?? imagePlaceholderClient.placeholderOrImage(props.sectionData?.servicesImageSrcArr[1], 230, 265)}/> + src={urlFor(props.sectionData?.servicesImageSrcArr[2] ?? "").url() ?? imagePlaceholderClient.placeholderOrImage(props.sectionData?.servicesImageSrcArr[2], 260, 305)}/> } diff --git a/src/components/animated/AnimatedPortfolioItem.tsx b/src/components/animated/AnimatedPortfolioItem.tsx index ab09941f..732366cc 100644 --- a/src/components/animated/AnimatedPortfolioItem.tsx +++ b/src/components/animated/AnimatedPortfolioItem.tsx @@ -6,6 +6,7 @@ import makeStyles from "@mui/styles/makeStyles"; import {Theme} from "@mui/material/styles"; import {AnimatedPortfolioItemType} from "../BlockContentTypes"; import {motion, useAnimationControls} from 'framer-motion'; +import imagePlaceholderClient from "../../utils/imagePlaceholderClient"; export const useStyles = makeStyles((theme: Theme) => ({ root: { @@ -42,7 +43,7 @@ const AnimatedPortfolioItem: FunctionComponent = (props:IProps) => { console.log("not hovering") animateServiceNoHover() }}> + href={props.pageHeader?.ctaButtonLink}>{props.pageHeader?.ctaButtonText} { - props.pageHeader.highlightedDetails.map((detail, index)=> - + props.pageHeader.highlightedDetails?.map((detail, index) => + = (props) => { backgroundColor: "#e3e3e3", borderRadius: "50%" }}> - - + + {/* = (props) => { - {detail.name} + {detail.name} - {detail.description} + {detail.description} @@ -83,7 +88,7 @@ const EnhancedHeader: FunctionComponent = (props) => { {/*enhanced*/} = (props) => { borderRadius: 4, backgroundColor: "black" }}> -
+
: <> diff --git a/src/components/templates/mackenzies-mind/header/Header.tsx b/src/components/templates/mackenzies-mind/header/Header.tsx index 92f7e8f3..a65c7e4d 100644 --- 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,24 @@ export type HeaderProps = { isSearch?: boolean updateIsLoading?: (value: boolean) => void isEnhanced?: boolean + backgroundColor?:string } const Header: FunctionComponent = (props) => { const classes = useStyles() const customizedTheme = useTheme() + const page = useContext(PageContext) const mdDown = useMediaQuery(customizedTheme.breakpoints.down('md')) const [isSearchOpen, setIsSearchOpen] = React.useState(false) - return ( + return ( + {props.pageHeader?.title ? - diff --git a/src/components/templates/my-digital-resume/resume-bio-section/ResumeBioSection.tsx b/src/components/templates/my-digital-resume/resume-bio-section/ResumeBioSection.tsx index c5b626ac..96aa1a53 100644 --- a/src/components/templates/my-digital-resume/resume-bio-section/ResumeBioSection.tsx +++ b/src/components/templates/my-digital-resume/resume-bio-section/ResumeBioSection.tsx @@ -1,4 +1,4 @@ -import React, {FunctionComponent} from 'react' +import React, {FunctionComponent, useContext} from 'react' import {Button, ButtonGroup, Grid, Typography, useMediaQuery, useTheme,} from '@mui/material'; import {ResumeBioSectionType} from "../../../BlockContentTypes"; import {urlFor} from "../../../block-content-ui/static-pages/cmsStaticPagesClient"; @@ -6,6 +6,8 @@ import {SanityTransformHwHomePage} from "../../../../common/sanityIo/Types"; import useThwCommonStyles from "../../../../common/sanityIo/ThwCommonStyles"; import SocialMediaBlock from "../social-media-block/SocialMediaBlock"; import BusinessCardSubmitEmail from "../../transform-hw/pages/BusinessCardSubmitEmail"; +import CustomizedThemeProvider from "../../../customized-theme-provider/CustomizedThemeProvider"; +import CustomizedThemeContext from "../../../customized-theme-provider/CustomizedThemeContext"; interface IProps { @@ -20,6 +22,7 @@ const ResumeBioSection: FunctionComponent = (props: IProps) => { const smDown = useMediaQuery(theme.breakpoints.down('sm')) + const customizedthemeContext = useContext(CustomizedThemeContext) return ( diff --git a/src/components/templates/web-dev-site/WebDevHeroContentSection.tsx b/src/components/templates/web-dev-site/WebDevHeroContentSection.tsx index 4b8a94eb..021953c6 100644 --- a/src/components/templates/web-dev-site/WebDevHeroContentSection.tsx +++ b/src/components/templates/web-dev-site/WebDevHeroContentSection.tsx @@ -8,7 +8,7 @@ import PageContext from "../../page-context/PageContext"; import WebDevSiteTheme from "../../../theme/WebDevSiteTheme"; import makeStyles from "@mui/styles/makeStyles"; import {Theme, ThemeProvider} from "@mui/material/styles"; -import {Button, Grid, Typography} from "@mui/material"; +import {Button, Grid, Typography, useTheme} from "@mui/material"; // import FontFaces from "../../theme/common/FontFaces"; interface IProps { @@ -44,7 +44,7 @@ const WebDevHeroContentSection: FunctionComponent = (props) => { } const pageContext = useContext(PageContext) - +const theme= useTheme() const classes = useStyles(classParameters) const globalClasses = useCustomStyles({}) return ( @@ -58,13 +58,13 @@ const WebDevHeroContentSection: FunctionComponent = (props) => { {props.sectionData.contentTitle} + color={'textPrimary'}>{props.sectionData.contentTitle} {props.sectionData.contentText} + >{props.sectionData.contentText}