create md breakpoint theme

adjust fund project page layout

src/components/projects/FundProject.jsx

@@ -6,7 +6,6 @@ import { useQuery } from '@apollo/react-hooks'
 import LiquidPledging from '../../embarkArtifacts/contracts/LiquidPledging'
 import Button from '@material-ui/core/Button'
 import Typography from '@material-ui/core/Typography'
-import useWindowSize from '@rehooks/window-size'
 import { FundingContext } from '../../context'
 import TextDisplay from '../base/TextDisplay'
 import Icon from '../base/icons/IconByName'
@@ -56,8 +55,6 @@ const SubmissionSection = ({ classes, projectData, projectId, profileData, start
   const pledgesInfo = pledgesInfos[0]
   const tokenLabel = getTokenLabel(projectInfo.goalToken)
   const totalPledged = getAmountFromPledgesInfo(pledgesInfo)
-  const windowSize = useWindowSize()
-  const isSmall = windowSize.innerWidth < 800
   const isVideo = useMemo(() => getMediaType(projectAssets), [projectAssets, projectId])
   const mediaUrl = useMemo(() => getMediaSrc(projectAssets), [projectAssets, projectId])
   const createdDate = getDateCreated(projectAge)
@@ -115,9 +112,7 @@ const SubmissionSection = ({ classes, projectData, projectId, profileData, start
 
         return (
           <form onSubmit={handleSubmit} className={classes.submissionRoot}>
-            {manifest && <div className={classnames(firstHalf, {
-              [classes.fullWidth]: isSmall
-            })}>
+            {manifest && <div className={classnames(firstHalf)}>
               <BreadCrumb
                 className={fullWidth}
                 trail={[manifest.title]}
@@ -152,18 +147,14 @@ const SubmissionSection = ({ classes, projectData, projectId, profileData, start
                   <div className={classes.chatText}>{manifest.code}</div>
                 </a>
               </div>
-              <MediaView className={classes.fullWidth} isVideo={isVideo} source={mediaUrl} imgClass={classnames(classes.imgClass, {
-                [classes.imgSmallViewport]: isSmall
-              })} />
+              <MediaView className={classes.fullWidth} isVideo={isVideo} source={mediaUrl} imgClass={classnames(classes.imgClass)} />
               <TextDisplay
                 name="Full description"
                 text={manifest.description}
                 isMarkdown={true}
               />
             </div>}
-            {manifest && <div className={classnames(secondHalf, {
-              [classes.fullWidth]: isSmall
-            })}>
+            {manifest && <div className={classnames(secondHalf)}>
               <div className={classes.edit}>{isCreator ? 'Edit' : ''}</div>
               <Typography className={classes.projectTitle} component="h2" gutterBottom>
                 {`${totalPledged.toLocaleString()} ${tokenLabel}`} pledged

src/components/projects/styles/FundProject.js

@@ -82,8 +82,10 @@ const styles = theme => ({
     gridTemplateColumns: 'repeat(12, [col] 1fr)',
     gridTemplateRows: '7rem',
     gridRowGap: '2rem',
-    gridColumnStart: '1',
-    gridColumnEnd: '8',
+    gridColumn: '1 / 13',
+    [theme.breakpoints.up('md')]: {
+      gridColumn: '1 / 8'
+    }
   },
   chatRoom: {
     display: 'grid',
@@ -103,8 +105,11 @@ const styles = theme => ({
     gridColumnStart: 4
   },
   imgClass: {
+    maxWidth: '100%',
+    [theme.breakpoints.up('md')]: {
+      maxWidth: '30vw',
       maxHeight: '40vh',
-    maxWidth: '30vw'
+    }
   },
   imgSmallViewport: {
     maxWidth: '100%'
@@ -119,10 +124,12 @@ const styles = theme => ({
   secondHalf: {
     display: 'grid',
     gridTemplateColumns: 'repeat(12, [col] 1fr)',
-    gridTemplateRows: '9rem',
-    gridColumnStart: '8',
-    gridColumnEnd: '13',
-    height: 'fit-content'
+    gridColumn: '1 / 13',
+    height: 'fit-content',
+    [theme.breakpoints.up('md')]: {
+      gridColumn: '8 / 13',
+      gridTemplateRows: '9rem'
+    }
   },
   markdown: {
     display: 'grid',

src/index.js

@@ -12,6 +12,11 @@ const theme = createMuiTheme({
     useNextVariants: true,
     fontFamily: ['Inter', '-apple-system', 'BlinkMacSystemFont', "Segoe UI", 'Roboto', "Helvetica Neue", 'Arial', "Noto Sans", 'sans-serif', "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"].join(','),
   },
+  breakpoints: {
+    values: {
+      md: 860
+    }
+  },
   palette: {
     primary: { 500: '#4360DF' },
     common: {