fix some alignment issues

theHandsomestNerd · Dec 5, 2023 · f7ce737 · f7ce737
1 parent be96cb2
commit f7ce737
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 36 deletions.
diff --git a/src/components/templates/mackenzies-mind/header/FullTextSearch.tsx b/src/components/templates/mackenzies-mind/header/FullTextSearch.tsx
@@ -9,15 +9,14 @@ import makeStyles from "@mui/styles/makeStyles";
 import {Theme} from "@mui/material/styles";
 import {
     AnimatedAboutUsSectionType,
-    HeroAnimatedContentSectionType, ResumeExperience, ResumeExperienceSectionType, ResumeSkill, ResumeSkillSet,
+    HeroAnimatedContentSectionType,
+    ResumeExperience,
+    ResumeSkill,
     SanityHeroContentSlide,
     ServiceItemNoRefType
 } from "../../../BlockContentTypes";
-import ResumeExperienceSection from "../../my-digital-resume/resume-experience-section/ResumeExperienceSection";
 import ResumeExperienceItem from "../../my-digital-resume/resume-experience-section/ResumeExperienceItem";
 import {COLORS} from "../../../../theme/common/ColorPalette";
-import ResumeSkillsSection from "../../my-digital-resume/resume-skills-section/ResumeSkillsSection";
-import ResumeSkillSetItem from "../../my-digital-resume/resume-skills-section/ResumeSkillSetItem";
 import ResumeSkillReferences from "../../my-digital-resume/resume-skills-section/ResumeSkillReferences";
 
 export const useStyles = makeStyles((theme: Theme) => ({
@@ -67,8 +66,8 @@ const FullTextSearch: FunctionComponent<IProps> = (props: IProps) => {
         setSearchText(event.target.value)
     }
 
-    return (<Grid container item >
-        <Grid container>
+    return (<Grid container item>
+        <Grid container item>
 
             <TextField fullWidth
                        key={'full-text-search-field'}
@@ -94,7 +93,8 @@ const FullTextSearch: FunctionComponent<IProps> = (props: IProps) => {
                            ,
                        }}/>
         </Grid>
-        {<Grid container style={{overflow: "scroll", height: "800px"}}>
+        {<Grid container item style={{overflow: "scroll", height: "800px"}} alignContent='flex-start'
+               alignItems='flex-start'>
             <Grid item>
 
                 {results?.length && <Typography
@@ -174,7 +174,11 @@ const FullTextSearch: FunctionComponent<IProps> = (props: IProps) => {
                             const convertedResumeExperience: ResumeExperience = theResult;
 
                             console.log(convertedResumeExperience)
-                            return <Grid container sx={{marginBottom: "16px", backgroundColor:COLORS.LIGHTGRAY, padding: "16px"}}>
+                            return <Grid container sx={{
+                                marginBottom: "16px",
+                                backgroundColor: COLORS.LIGHTGRAY,
+                                padding: "16px"
+                            }}>
                                 <Grid container>
                                     <Typography variant='h6' gutterBottom color='primary'>My Experience</Typography>
                                 </Grid>
@@ -184,11 +188,16 @@ const FullTextSearch: FunctionComponent<IProps> = (props: IProps) => {
                             const convertedResumeSkill: ResumeSkill = theResult;
 
                             console.log(convertedResumeSkill)
-                            return <Grid container sx={{marginBottom: "16px", backgroundColor:COLORS.LIGHTGRAY, padding: "16px"}}>
+                            return <Grid container sx={{
+                                marginBottom: "16px",
+                                backgroundColor: COLORS.LIGHTGRAY,
+                                padding: "16px"
+                            }}>
                                 <Grid container>
-                                    <Typography variant='h6' gutterBottom color='primary'>My Skill - {convertedResumeSkill.title}</Typography>
+                                    <Typography variant='h6' gutterBottom color='primary'>My Skill
+                                        - {convertedResumeSkill.title}</Typography>
                                 </Grid>
-                                <ResumeSkillReferences skill={convertedResumeSkill} />
+                                <ResumeSkillReferences skill={convertedResumeSkill}/>
                             </Grid>
                         default:
                             return <Grid container sx={{marginBottom: "16px"}}><Typography

diff --git a/src/components/templates/mackenzies-mind/header/Header.tsx b/src/components/templates/mackenzies-mind/header/Header.tsx
@@ -7,6 +7,7 @@ import {SanityMenuContainer} from "../../../../common/sanityIo/Types";
 import {Close, Search} from "@mui/icons-material";
 import FullTextSearch from "./FullTextSearch";
 import AppBarWrapper from './AppBarWrapper';
+import {COLORS} from "../../../../theme/common/ColorPalette";
 
 export type HeaderProps = {
     pageHeader?: SanityMenuContainer
@@ -78,14 +79,16 @@ const Header: FunctionComponent<HeaderProps> = (props) => {
             }
             <Modal open={isSearchOpen}>
                 <Grid container style={{height: "100%"}}>
-                    <Grid container item justifyContent='flex-end'>
+                    <Grid container item justifyContent='flex-end' >
+                        <IconButton sx={{marginTop: "4px", marginRight:"4px", width: "64px", height: "64px", backgroundColor: COLORS.WHITESMOKE}} onClick={() => {
+                            setIsSearchOpen(false)
+                        }}>
+
                         <Close sx={{marginX: "16px", marginY: "16px"}} fontSize={"large"} color={'secondary'}
-                               onClick={() => {
-                                   setIsSearchOpen(false)
-                               }}/>
+                               />
+                        </IconButton>
                     </Grid>
-                    <Grid container item justifyContent='center' alignContent='center' alignItems='center' paddingX={'32px'}
-                          >
+                    <Grid container item justifyContent='center' paddingX={'8px'} alignContent='flex-start' alignItems='flex-start'>
                         <FullTextSearch/>
                     </Grid>
                 </Grid>

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
@@ -72,13 +72,15 @@ const ResumeBioSection: FunctionComponent<IProps> = (props: IProps) => {
                     />
                 </Grid>
             </Grid>
-            <Grid data-testid='bio-image' container item md={6} style={{
-                backgroundImage: `url(${urlFor(props.sectionData.mainImage ?? "").url()})`,
-                backgroundSize: "cover",
-                backgroundPosition: "top right",
-                backgroundRepeat: "no-repeat",
-                minHeight: "350px"
-            }}>
+            <Grid item container md={6}>
+                <Grid data-testid='bio-image' container item style={{
+                    backgroundImage: `url(${urlFor(props.sectionData.mainImage ?? "").url()})`,
+                    backgroundSize: "cover",
+                    backgroundPosition: "top right",
+                    backgroundRepeat: "no-repeat",
+                    minHeight: "350px"
+                }}>
+                </Grid>
             </Grid>
             <Grid container item xs={12} sm={10} spacing={1} style={{marginTop: theme.spacing(2)}}>
                 <Grid item container>

diff --git a/src/components/templates/my-digital-resume/resume-portfolio-section/ResumePortfolioEntry.tsx b/src/components/templates/my-digital-resume/resume-portfolio-section/ResumePortfolioEntry.tsx
@@ -28,7 +28,7 @@ const ResumePortfolioEntry: FunctionComponent<IProps> = (props:IProps) => {
     return (<Grid
                   role='portfoliobutton'
                   // style={{backgroundColor: index2 % 2 === 1 ? "whitesmoke" : "white"}}
-                  container item xs={6} sm={4} lg={4} xl={4} alignContent='flex-start'
+                  container item xs={12} sm={6} lg={4} xl={4} alignContent='flex-start'
                   justifyContent='center'>
         <Button fullWidth onClick={(e) => {
             setCurrentItem(props.portfolioItem)

diff --git a/...omponents/templates/my-digital-resume/resume-portfolio-section/ResumePortfolioSection.tsx b/...omponents/templates/my-digital-resume/resume-portfolio-section/ResumePortfolioSection.tsx
@@ -16,15 +16,15 @@ const ResumePortfolioSection: FunctionComponent<IProps> = (props: IProps) => {
     const globalClasses = useThwCommonStyles()
     const theme = useTheme()
 
-    const [isOpen, setIsOpen] = React.useState<boolean>(false)
-    const [currentItem, setCurrentItem] = React.useState<ResumePortfolioItem>()
+    // const [isOpen, setIsOpen] = React.useState<boolean>(false)
+    // const [currentItem, setCurrentItem] = React.useState<ResumePortfolioItem>()
 
-    const sendToModal = (portfolioItem?: ResumePortfolioItem) => {
-        console.log("The current Item", portfolioItem)
-        setCurrentItem(portfolioItem)
-
-        setIsOpen(true)
-    }
+    // const sendToModal = (portfolioItem?: ResumePortfolioItem) => {
+    //     console.log("The current Item", portfolioItem)
+    //     setCurrentItem(portfolioItem)
+    //
+    //     setIsOpen(true)
+    // }
 
     return (
         <Grid container item style={{padding: theme.spacing(4)}}
@@ -46,15 +46,15 @@ const ResumePortfolioSection: FunctionComponent<IProps> = (props: IProps) => {
                     <Grid item container>
                         <Typography variant='body1'>{props.sectionData.introduction}</Typography></Grid>
                 </Grid>
-                <Grid item container justifyContent={'center'} xs={10} justifySelf={'center'}>
+                <Grid item container justifyContent={'center'} xs={11} justifySelf={'center'}>
                     {
                         props.sectionData.portfolioEntries?.map((portfolioItem: ResumePortfolioItem, index2: number) => {
-                            return <ResumePortfolioEntry action={sendToModal} portfolioItem={portfolioItem} />
+                            return <ResumePortfolioEntry portfolioItem={portfolioItem} />
                         })
                     }
                 </Grid>
             </Grid>
-            <PortfolioItemModal currentItem={currentItem} isOpen={isOpen} setIsOpen={(value)=>{setIsOpen(value)}}/>
+            {/*<PortfolioItemModal currentItem={currentItem} isOpen={isOpen} setIsOpen={(value)=>{setIsOpen(value)}}/>*/}
         </Grid>
     );
 }