responsive padding on resume sections

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

Hide file tree

Showing 6 changed files with 16 additions and 17 deletions.
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
@@ -21,7 +21,7 @@ const ResumeBioSection: FunctionComponent<IProps> = (props: IProps) => {
     const smDown = useMediaQuery(theme.breakpoints.down('sm'))
 
     return (
-        <Grid container item style={{padding: theme.spacing(4)}} justifyContent='center'
+        <Grid container item style={{padding: theme.spacing(4,smDown?1:4)}} justifyContent='center'
               className={classes.resumeSection} spacing={3}>
             <Grid item xs={12} style={{paddingTop: "64px"}}>
                 <BusinessCardSubmitEmail

diff --git a/...omponents/templates/my-digital-resume/resume-education-section/ResumeEducationSection.tsx b/...omponents/templates/my-digital-resume/resume-education-section/ResumeEducationSection.tsx
@@ -15,9 +15,10 @@ const ResumeEducationSection: FunctionComponent<IProps> = (props: IProps) => {
 
 
     const xsOnly = useMediaQuery(theme.breakpoints.only('xs'))
+    const smDown = useMediaQuery(theme.breakpoints.down('sm'))
 
     return (
-        <Grid container item style={{padding: theme.spacing(4)}} className={globalClasses.resumeSection}>
+        <Grid container item style={{padding: theme.spacing(4,smDown?1:4)}} className={globalClasses.resumeSection}>
             <Grid
                 container item spacing={3}>
                 <Grid item container md={4} alignContent='flex-start' spacing={1}>

diff --git a/...ponents/templates/my-digital-resume/resume-experience-section/ResumeExperienceSection.tsx b/...ponents/templates/my-digital-resume/resume-experience-section/ResumeExperienceSection.tsx
@@ -13,15 +13,14 @@ const ResumeExperienceSection: FunctionComponent<IProps> = (props: IProps) => {
     const classes = useThwCommonStyles()
     const theme = useTheme()
 
+    const smDown = useMediaQuery(theme.breakpoints.down('sm'))
 
     const xsOnly = useMediaQuery(theme.breakpoints.only('xs'))
     return (
         <Grid
             container
             item
-            style={{
-                padding: theme.spacing(4)
-            }}
+            style={{padding: theme.spacing(4,smDown?1:4)}}
             className={classes.resumeSection}
         >
             <Grid container item spacing={3}>

diff --git a/src/components/templates/my-digital-resume/resume-feedback-section/ResumeFeedbackSection.tsx b/src/components/templates/my-digital-resume/resume-feedback-section/ResumeFeedbackSection.tsx
@@ -12,19 +12,17 @@ interface IProps {
 
 const ResumeFeedbackSection: FunctionComponent<IProps> = (props: IProps) => {
     const globalClasses = useThwCommonStyles()
-    // const theme = useTheme()
+    const theme = useTheme()
 
     const customizedThemeContext = useTheme()
+    const smDown = useMediaQuery(theme.breakpoints.down('sm'))
 
     const xsOnly = useMediaQuery(customizedThemeContext.breakpoints.only('xs'))
     return (
         <Grid
             container
             item
-            style={{
-                padding: customizedThemeContext
-                    .spacing(4)
-            }}
+            style={{padding: theme.spacing(4,smDown?1:4)}}
             className={globalClasses.resumeSection}
         >
             <Grid container item spacing={3}>

diff --git a/...omponents/templates/my-digital-resume/resume-portfolio-section/ResumePortfolioSection.tsx b/...omponents/templates/my-digital-resume/resume-portfolio-section/ResumePortfolioSection.tsx
@@ -1,5 +1,5 @@
 import React, {FunctionComponent} from 'react'
-import {Button, ButtonGroup, Chip, Grid, IconButton, Modal, Typography, useTheme} from '@mui/material'
+import {Button, ButtonGroup, Chip, Grid, IconButton, Modal, Typography, useMediaQuery, useTheme} from '@mui/material'
 import {ResumePortfolioItem, ResumePortfolioSectionType} from "../../../BlockContentTypes";
 import useThwCommonStyles from "../../../../common/sanityIo/ThwCommonStyles";
 import {urlFor} from "../../../block-content-ui/static-pages/cmsStaticPagesClient";
@@ -25,9 +25,11 @@ const ResumePortfolioSection: FunctionComponent<IProps> = (props: IProps) => {
     //
     //     setIsOpen(true)
     // }
+    const smDown = useMediaQuery(theme.breakpoints.down('sm'))
+
 
     return (
-        <Grid container item style={{padding: theme.spacing(4)}}
+        <Grid container item style={{padding: theme.spacing(4,smDown?1:4)}}
               className={globalClasses.resumeSection} justifyContent={'center'}>
             <Grid
                 container item spacing={3} justifyContent='center'>

diff --git a/src/components/templates/my-digital-resume/resume-skills-section/ResumeSkillsSection.tsx b/src/components/templates/my-digital-resume/resume-skills-section/ResumeSkillsSection.tsx
@@ -1,7 +1,7 @@
 import React, {FunctionComponent, useContext} from 'react'
 import {Theme, ThemeProvider, useTheme} from "@mui/material/styles";
 import makeStyles from '@mui/styles/makeStyles';
-import {Grid, Typography} from '@mui/material'
+import {Grid, Typography, useMediaQuery} from '@mui/material'
 import {ResumeSkillSectionType, ResumeSkillSet} from "../../../BlockContentTypes";
 import useThwCommonStyles from "../../../../common/sanityIo/ThwCommonStyles";
 import {COLORS} from "../../../../theme/common/ColorPalette";
@@ -20,16 +20,15 @@ interface IProps {
 const ResumeSkillsSection: FunctionComponent<IProps> = (props: IProps) => {
     // const classes = useStyles()
     const globalClasses = useThwCommonStyles()
+    const theme = useTheme()
 
+    const smDown = useMediaQuery(theme.breakpoints.down('sm'))
 
-    const theme = useTheme()
     return (
             <Grid
                 container
                 item
-                style={{
-                    padding: theme.spacing(4)
-                }}
+                style={{padding: theme.spacing(4,smDown?1:4)}}
                 className={globalClasses.resumeSection}
             >
                 <Grid container item spacing={3}>