fix some overlapping text in experience section

theHandsomestNerd · Dec 6, 2023 · aee3041 · aee3041
1 parent 438d79c
commit aee3041
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 53 deletions.
diff --git a/src/components/templates/mackenzies-mind/header/Header.tsx b/src/components/templates/mackenzies-mind/header/Header.tsx
@@ -9,6 +9,24 @@ import FullTextSearch from "./FullTextSearch";
 import AppBarWrapper from './AppBarWrapper';
 import {COLORS} from "../../../../theme/common/ColorPalette";
 
+
+import makeStyles from "@mui/styles/makeStyles";
+import {Theme} from "@mui/material/styles";
+
+export const useStyles = makeStyles((theme: Theme) => ({
+ hover:{
+ "&:hover": {
+ backgroundColor: "lightgray !important",
+ color: "#383838"
+ }
+ },
+ hoverSearch:{
+ "&:hover": {
+ color: theme.palette.primary.main
+ }
+ }
+}))
+
 export type HeaderProps = {
  pageHeader?: SanityMenuContainer
  isAppBar?: boolean
@@ -18,6 +36,7 @@ export type HeaderProps = {
 }
 
 const Header: FunctionComponent<HeaderProps> = (props) => {
+ const classes = useStyles()
  const customizedTheme = useTheme()
 
  const mdDown = useMediaQuery(customizedTheme.breakpoints.down('md'))
@@ -26,69 +45,78 @@ const Header: FunctionComponent<HeaderProps> = (props) => {
  return (<AppBarWrapper 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} >
+ alignContent='center' alignItems='center' style={{height: "100%", paddingLeft: "8px"}}>
+ <Grid container item xs={4} sm={3} md={3}>
  <Logo noWrap logoText={props.pageHeader?.logoText}
-  logoAccentText={props.pageHeader?.logoAccentText}/>
+ logoAccentText={props.pageHeader?.logoAccentText}/>
  </Grid>
- <Grid item container xs={8} sm={9} md={9} 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'
-  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}/>
+ {
+ !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>
-  }
+ </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'
+  // style={{backgroundColor: "blue"}}
+ justifyContent='flex-end'
  alignContent='center' alignItems='center'>
  <Grid item><Box sx={{
  // maxWidth: "64px",
- paddingLeft:"16px",
- paddingRight: mdDown?"16px":"8px",
+ 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>
+ <IconButton color='secondary' sx={{
+ // marginLeft: "32px",
+ // marginRight: "32px",
+ color: customizedTheme.palette.text.secondary,
+ backgroundColor: customizedTheme.palette.primary.main
+ }} className={classes.hoverSearch}>
+ <Search color='inherit' fontSize='large' onClick={() => {
+ setIsSearchOpen((state) => !state)
+ }}/>
+ </IconButton></Box></Grid>
  </Grid>}
  </Grid>
  </Grid>
  : <></>
  }
  <Modal open={isSearchOpen}>
  <Grid container style={{height: "100%"}}>
- <Grid container item justifyContent='flex-end' >
- <IconButton sx={{marginTop: "4px", marginRight:"4px", width: "64px", height: "64px", backgroundColor: COLORS.WHITESMOKE}} onClick={() => {
+ <Grid container item justifyContent='flex-end'>
+ <IconButton sx={{
+ marginTop: "4px",
+ marginRight: "4px",
+ width: "64px",
+ height: "64px",
+ backgroundColor: COLORS.WHITESMOKE
+ }} onClick={() => {
  setIsSearchOpen(false)
- }}>
+ }} className={classes.hover}>
 
- <Close sx={{marginX: "16px", marginY: "16px"}} fontSize={"large"} color={'secondary'}
-  />
+  <Close sx={{marginX: "16px", marginY: "16px"}} fontSize={"large"} color={'secondary'}
+ />
  </IconButton>
  </Grid>
- <Grid container item justifyContent='center' paddingX={'8px'} alignContent='flex-start' alignItems='flex-start'>
+ <Grid container item justifyContent='center' paddingX={'8px'} alignContent='flex-start'
+ alignItems='flex-start'>
  <FullTextSearch/>
  </Grid>
  </Grid>

diff --git a/...components/templates/my-digital-resume/resume-experience-section/ResumeExperienceItem.tsx b/...components/templates/my-digital-resume/resume-experience-section/ResumeExperienceItem.tsx
@@ -5,6 +5,7 @@ import { Theme} from "@mui/material/styles";
 import {Chip, Grid, Typography, useTheme} from "@mui/material";
 import {COLORS} from "../../../../theme/common/ColorPalette";
 import {ResumeExperience} from "../../../BlockContentTypes";
+import dateUtils from "../../../../utils/dateUtils";
 
 export const useStyles = makeStyles((theme: Theme) => ({
  root: {
@@ -30,28 +31,25 @@ const ResumeExperienceItem: FunctionComponent<IProps> = (props:IProps) => {
  // // padding: theme.spacing(1.75, 0)
  // }}
  xs={12}>
- <Grid container item role={'experienceheader'}>
+ <Grid container item role={'experienceheader'} alignContent='center' alignItems='center'>
  <Grid item xs={12} md={4}>
  <Typography display='inline'
  variant='body2'>{props.experience.companyName}</Typography>
  </Grid>
- <Grid item xs={6} md={4}>
-
- <Typography display='inline'
- variant='body1'>{props.experience.title}</Typography>
+ <Grid item xs={12} sm={6} md={4} container sx={{paddingTop: "4px", paddingBottom: "4px"}}>
+ <Typography variant='subtitle1'>{props.experience.companySubtitle}</Typography>
  </Grid>
- <Grid item xs={6} md={4}>
-
- <Typography display='inline'
- variant='subtitle1'>{props.experience.companySubtitle}</Typography>
+ <Grid item xs={12} sm={6} md={4} >
+ <Typography
+ variant='body1'>{props.experience.title}</Typography>
  </Grid>
  </Grid>
  <Grid container item>
 
 
  <Grid item sm={4}>
  <Typography display='inline'
- variant='body1'>{props.experience.dateStart?.toString().replaceAll('-', '.')}</Typography>
+ variant='body1'>{dateUtils.YearMonth(new Date(props.experience.dateStart as string))}</Typography>
 
  {/*</Grid>*/}
  {/*<Grid item xs={1} container justifyContent='center'>*/}
@@ -61,7 +59,7 @@ const ResumeExperienceItem: FunctionComponent<IProps> = (props:IProps) => {
  {/*</Grid>*/}
  {/*<Grid item xs={2} container>*/}
  <Typography display='inline'
- variant='body1'>{props.experience.dateEnd?.toString().replaceAll('-', '.')}</Typography>
+ variant='body1'>{dateUtils.YearMonth(new Date(props.experience.dateEnd as string))}</Typography>
 
  </Grid>