Skip to content

Commit

Permalink
spacing fixes for header and animated services section (#4)
Browse files Browse the repository at this point in the history
  • Loading branch information
@tmanundercover
tmanundercover authored Nov 28, 2023
1 parent 7506bfa commit 738b1fd
Show file tree
Hide file tree
Showing 4 changed files with 65 additions and 70 deletions.
5 changes: 2 additions & 3 deletions src/components/animated/AnimatedServiceItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,8 @@ const AnimatedServiceItem: FunctionComponent<IProps> = (props: IProps) => {
}

return (
<ThemeProvider theme={customizedTheme.customizedTheme} key={uuidv4()}>
<motion.div
style={{width:"100%"}}
onHoverStart={async () => {
await animateShrinkIcon()
}}
Expand All @@ -38,7 +38,7 @@ const AnimatedServiceItem: FunctionComponent<IProps> = (props: IProps) => {
}}
>
<Card>
<Grid item container xs={12} md={6}
<Grid container item
padding={customizedTheme.customizedTheme.spacing(3, 2)}
style={{backgroundColor: "#000000", position: "relative"}}
justifyContent='center'>
Expand Down Expand Up @@ -95,7 +95,6 @@ const AnimatedServiceItem: FunctionComponent<IProps> = (props: IProps) => {
</Grid>
</Card>
</motion.div>
</ThemeProvider>
)
}

Expand Down
5 changes: 3 additions & 2 deletions src/components/templates/mackenzies-mind/header/AppBarWrapper.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@ export const useStyles = makeStyles((theme: Theme) => ({
backgroundColor: COLORS.TRANSPARENTWHITE,
transition: 'background-color .5s ease 0s',
paddingLeft: props.paddingLeft,
height: props.appBarHeight
height: props.appBarHeight,
width: "100%"
}),
opaque: {
backgroundColor: `black !important`,
Expand All @@ -32,7 +33,7 @@ const AppBarWrapper: FunctionComponent<PropsWithChildren<IProps>> = (props: IPro

return (
props.isAppBar ? <AppBar style={{
backgroundColor: `${props.isAppBar ? "white" : "white"}`,
backgroundColor: `${props.isAppBar ? "black" : "white"}`,
}} className={classes.root}>
{props.children}
</AppBar> : <>{props.children}</>
Expand Down
36 changes: 13 additions & 23 deletions src/components/templates/mackenzies-mind/header/EnhancedHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,15 @@ import {HeaderSectionType} from "../../../BlockContentTypes";
import {urlFor} from "../../../block-content-ui/static-pages/cmsStaticPagesClient";

export const useStyles = makeStyles((theme: Theme) => ({
root: (props: any) => ({
root: {
backgroundColor: COLORS.TRANSPARENTWHITE,
transition: 'background-color .5s ease 0s',
paddingLeft: "32px",
paddingRight: "56px",
paddingTop: "32px",
height: props.appBarHeight,
height: theme.mixins.toolbar.height,
position: "relative"
}),
},
opaque: {
backgroundColor: `${COLORS.LIGHTGRAY} !important`,
}
Expand All @@ -34,30 +34,20 @@ const EnhancedHeader: FunctionComponent<EnhancedHeaderProps> = (props) => {

const classes = useStyles({
paddingLeft: customizedTheme.customizedTheme.spacing(4),
appBarHeight: customizedTheme.customizedTheme.mixins.toolbar.height
})

// const mdDown = widthUtils.useIsWidthDown('md')

// const theme = useTheme()
// React.useEffect(() => {
// console.log("Page header in the header", props.pageHeader)
// }, [props.pageHeader])

// const lgUp = widthUtils.useIsWidthUp('md')

return (
<AppBar className={clsx({[classes.opaque]: true}, classes.root)}>{props.pageHeader?.headerMenuRef.title ?

<Grid container item>
<Grid container item spacing={4} justifyContent='space-between' wrap='nowrap'>
<Grid item xs={3}>
<Button variant='contained'
<Button fullWidth variant='contained'
href={props.pageHeader?.ctaButtonLink}><Typography variant='button' noWrap>{props.pageHeader?.ctaButtonText}</Typography></Button>
</Grid>
{
props.pageHeader.highlightedDetails.map((detail, index)=><Grid key={index} item xs={3}>
<Grid item container xs={12} sm={6} maxWidth={350} spacing={1} wrap='nowrap'>
props.pageHeader.highlightedDetails.map((detail, index)=><Grid key={index} xs={3} container justifyContent='flex-end' alignItems='flex-end' alignContent='flex-end'>
<Grid item container xs={12} sm={3} maxWidth={350} minWidth={270} spacing={1} wrap='nowrap' justifyContent='flex-end' alignItems='center'>
<Grid item maxWidth={64} style={{position: "relative"}}>

<Card elevation={0} style={{
Expand All @@ -77,26 +67,26 @@ const EnhancedHeader: FunctionComponent<EnhancedHeaderProps> = (props) => {
{/*>*/}
{/*</motion.div>*/}
</Grid>
<Grid item maxWidth={250}>
<Grid item maxWidth={260}>
<Grid item>
<Typography variant='body1' color='textPrimary' noWrap>{detail.name}</Typography>
</Grid>
<Grid item>
<Typography variant='body2' color='textPrimary' noWrap>{detail.description}</Typography>
<Typography fontWeight='bold' fontSize='16px' variant='body2' color='textPrimary'>{detail.description}</Typography>
</Grid>
</Grid>
</Grid>
</Grid>)
}
</Grid>
<Grid container item justifyContent='center'>
<Grid container item>
{/*enhanced*/}
<Grid item style={{
padding: "16px",
// padding:"16px",
<Grid xs={12} container item style={{
// padding: "16px",
padding:"8px",
// maxWidth: "calc(100%-100px)",
// marginRight: "8px",
width: "100%",
// width: "100%",
position: "relative",
top: "16px",
borderRadius: 4,
Expand Down
89 changes: 47 additions & 42 deletions src/components/templates/mackenzies-mind/header/Header.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, {FunctionComponent} from 'react'
import {Grid, IconButton, Modal, useMediaQuery, useTheme} from '@mui/material'
import {Box, Grid, IconButton, Modal, useMediaQuery, useTheme} from '@mui/material'
import MainMenu from "./MainMenu";
import FilteredMenuItems from "../../../filtered-menu-items/FilteredMenuItems";
import Logo from "../../../logo/Logo";
Expand All @@ -23,50 +23,55 @@ const Header: FunctionComponent<HeaderProps> = (props) => {

return (<AppBarWrapper isAppBar={props.isAppBar}>
{props.pageHeader?.title ?
<Grid item xs={12} container justifyContent="space-between"
alignContent='center' alignItems='center' wrap={'nowrap'}>
<Grid container item xs={3} sm={2} md={1} alignItems='center' alignContent='center' wrap={'nowrap'}>
<Grid item><Logo logoText={props.pageHeader?.logoText}
logoAccentText={props.pageHeader?.logoAccentText}/></Grid>
<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}
logoAccentText={props.pageHeader?.logoAccentText}/>
</Grid>
<Grid item xs={props.isSearch ? 8 : 6} sm={props.isSearch ? 9 : 7} md={props.isSearch ? 6 : 8}
justifyContent='flex-end' alignItems='center' container
alignContent='center' wrap={'nowrap'}>
{
!mdDown && <Grid xs={4} md={10} lg={10} container item justifyContent='flex-end'
alignItems='center'
alignContent='center'
sx={{
height: "100%",
paddingRight: mdDown ? customizedTheme.spacing(0) : customizedTheme.spacing(4)
}}>
<FilteredMenuItems
// bgColor={!mdDown ? TransformHWTheme.palette.primary.main : COLORS.TRANSPARENTWHITE}
subMenus={props.pageHeader?.subMenus ?? []} onlyButtons={mdDown}
includeMenuItems={!mdDown}
includeMenuGroups={!mdDown}/>
<Grid item container xs={10} sm={10} md={10} justifyContent='flex-end' >

</Grid>
}
{
mdDown && <Grid item xs={11} sm={2} container justifyContent='flex-end'>
{props.pageHeader && <MainMenu menu={props.pageHeader} anchor='top'/>}
</Grid>
}
{
!mdDown && <Grid xs={4} md={10} lg={10} container item justifyContent='flex-end'
alignItems='center'
alignContent='center'
sx={{
height: "100%",
paddingRight: mdDown ? customizedTheme.spacing(0) : customizedTheme.spacing(4)
}}>
<FilteredMenuItems
// bgColor={!mdDown ? TransformHWTheme.palette.primary.main : COLORS.TRANSPARENTWHITE}
subMenus={props.pageHeader?.subMenus ?? []} onlyButtons={mdDown}
includeMenuItems={!mdDown}
includeMenuGroups={!mdDown}/>

</Grid>
}
{
mdDown && <Grid item xs={5} sm={4} container justifyContent='flex-end'>
{props.pageHeader && <MainMenu menu={props.pageHeader} anchor='top'/>}
</Grid>
}
{props.isSearch && <Grid container item maxWidth={96}
// style={{backgroundColor: "blue"}}
justifyContent='flex-end'
alignContent='center' alignItems='center'>
<Grid item><Box sx={{
// maxWidth: "64px",
paddingLeft:"16px",
paddingRight: mdDown?"16px":"8px",
borderLeft: `1px solid ${customizedTheme.palette.primary.main}`
}}><IconButton color='secondary' sx={{
// marginLeft: "32px",
// marginRight: "32px",
backgroundColor: customizedTheme.palette.primary.main
}}>
<Search color='secondary' fontSize='large' onClick={() => {
setIsSearchOpen((state) => !state)
}}/>
</IconButton></Box></Grid>
</Grid>}
</Grid>
{props.isSearch && <Grid item xs={2} sm={2} md={2}
sx={{borderLeft: `1px solid ${customizedTheme.palette.primary.main}`}}
alignContent='center' alignItems='center'>
<IconButton color='secondary' sx={{
marginLeft: "32px",
marginRight: "32px",
backgroundColor: customizedTheme.palette.primary.main
}}>
<Search color='secondary' fontSize='large' onClick={() => {
setIsSearchOpen((state) => !state)
}}/>
</IconButton>
</Grid>}
</Grid>
: <></>
}
Expand Down

0 comments on commit 738b1fd

Please sign in to comment.