Merge pull request #1087 from civictechindex/genSubheadTypo-global-style

Created global style for all subheading used on GlobalHeaderComponent

Author: maxskewes

src/components/Dropdown.js

@@ -5,19 +5,18 @@ import { DropdownArrow } from './DropdownArrow';
 import Grid from '@material-ui/core/Grid';
 import clsx from 'clsx';
 
-const useStyles = makeStyles(theme => ({
-
+const useStyles = makeStyles((theme) => ({
   dropdown: {
     margin: '24px auto',
     display: 'flex',
     alignItems: 'center',
     backgroundColor: theme.palette.background.default,
     boxSizing: 'border-box',
     border: '1px solid',
-    borderColor:theme.palette.outline.gray,
+    borderColor: theme.palette.outline.gray,
     borderRadius: '6px',
-    height:'80px',
-    padding:'12px 16px',
+    height: '80px',
+    padding: '12px 16px',
     [theme.breakpoints.down('sm')]: {
       height: '49px',
     },
@@ -30,7 +29,7 @@ const useStyles = makeStyles(theme => ({
       height: '49px',
     },
   },
-  flexGrid:{
+  flexGrid: {
     flexGrow: 1,
     justifyContent: 'flex-end',
   },
@@ -54,38 +53,56 @@ export const Dropdown = ({
     setColor(!colorStyle);
   };
 
-
-  useEffect(()=>{
+  useEffect(() => {
     setOpenChild(isOpen);
     setColor(isOpen);
-  },[isOpen])
-
+  }, [isOpen]);
 
   return (
-
     <Grid data-cy='thumbnail-dropdown'>
       {dropdownLength > 0 ? (
-        <Grid item xs={10} className={clsx(classes.dropdown, { [classes.open]: colorStyle === true })} >
+        <Grid
+          item
+          xs={10}
+          className={clsx(classes.dropdown, {
+            [classes.open]: colorStyle === true,
+          })}
+        >
           <Grid>
-            <ContributorThumbnail organization={organization}  filtersActive={filtersActive} checkboxValue={checkboxValue} dropdownLength={dropdownLength} isOpen={colorStyle} isChildThumbnail={false}/>
+            <ContributorThumbnail
+              organization={organization}
+              filtersActive={filtersActive}
+              checkboxValue={checkboxValue}
+              dropdownLength={dropdownLength}
+              isOpen={colorStyle}
+              isChildThumbnail={false}
+            />
           </Grid>
           <Grid className={classes.flexGrid}></Grid>
-          <Grid item container className={classes.flexGrid} onClick={handleOpen}>
-            <DropdownArrow  open={openChild} setOpenFunction={setOpenChild}  handleArrow={handleOpen} />
+          <Grid
+            item
+            container
+            className={classes.flexGrid}
+            onClick={handleOpen}
+          >
+            <DropdownArrow
+              open={openChild}
+              setOpenFunction={setOpenChild}
+              handleArrow={handleOpen}
+            />
           </Grid>
         </Grid>
-      )
-
-        :
+      ) : (
         <Grid item xs={10} className={classes.dropdown}>
-          <ContributorThumbnail organization={organization}  checkboxValue={checkboxValue} isChildThumbnail={false}/>
+          <ContributorThumbnail
+            organization={organization}
+            checkboxValue={checkboxValue}
+            isChildThumbnail={false}
+          />
         </Grid>
-
-      }
+      )}
       {openChild && children}
-
     </Grid>
-
   );
 };
 export default Dropdown;

src/components/common/Text.js

@@ -87,11 +87,11 @@ const Text = (props) => {
       classes={
         variant === 'body2'
           ? {
-              colorPrimary: classes.colorPrimary,
-              colorSecondary: classes.colorSecondary,
-              colorTextPrimary: classes.colorTextPrimary,
-              colorTextSecondary: classes.colorTextSecondary,
-            }
+            colorPrimary: classes.colorPrimary,
+            colorSecondary: classes.colorSecondary,
+            colorTextPrimary: classes.colorTextPrimary,
+            colorTextSecondary: classes.colorTextSecondary,
+          }
           : {}
       }
       className={isCustom ? clsx(classes[variant], className) : className}

src/pages/About/index.js

@@ -47,7 +47,7 @@ const About = () => {
             mainTitle='A movement to index every open source civic tech project on GitHub'
             breadCrumbLinks={breadCrumbLinks}
           >
-            <Grid container justify='center'>
+            <Grid container className={classes.movieGrid}>
               <iframe
                 className={classes.frameStyle}
                 justify='center'
@@ -60,11 +60,7 @@ const About = () => {
                 webkitallowfullscreen='true'
               ></iframe>
             </Grid>
-            <Typography
-              variant='h6'
-              color='textSecondary'
-              className={classes.subHeaderStyle}
-            >
+            <Typography className='genSubheadTypo'>
               With your help, we can create a continuously updated repository
               for all civic tech enthusiasts to find open source projects to
               model, connect with, and learn from.

src/pages/About/styles.js

@@ -1,18 +1,9 @@
 import makeStyles from '@material-ui/core/styles/makeStyles';
 
 const useStyles = makeStyles((theme) => ({
-  subHeaderStyle: {
-    fontWeight: '400',
-    textAlign: 'center',
-    [theme.breakpoints.down('sm')]: {
-      padding: '48px 30px',
-    },
-    [theme.breakpoints.up('sm')]: {
-      padding: '48px 100px',
-    },
-    [theme.breakpoints.up('md')]: {
-      padding: '48px 200px',
-    },
+  movieGrid: {
+    justifyContent: 'center',
+    marginBottom: theme.spacing(2),
   },
   frameStyle: {
     border: 'none',

src/pages/Collaborate/index.js

@@ -6,44 +6,34 @@ import Container from '@material-ui/core/Container';
 import Link from '../../components/common/Link';
 import BottomCallToAction from '../../components/BottomCallToAction';
 import { GenericHeaderSection } from '../../components/';
-import makeStyles from '@material-ui/core/styles/makeStyles';
 import LeftTextRightImage from './LeftTextRightImage';
 import RightTextLeftImage from './RightTextLeftImage';
-
-const useStyles = makeStyles((theme) => ({
-  titleStyle: {
-    textAlign: 'center',
-    [theme.breakpoints.down('sm')]: {
-      fontSize: '13px',
-    },
-    [theme.breakpoints.up('md')]: {
-      fontSize: '16px',
-    },
-    [theme.breakpoints.up('lg')]: {
-      fontSize: '28px',
-    },
-  },
-}));
+import { Typography } from '@material-ui/core';
 
 const Collaborate = () => {
   const breadCrumbLinks = [
     { name: 'Home', href: '/home' },
     { name: 'Collaborate with Us', href: '/support/collaborate' },
   ];
-  const classes = useStyles();
+
   return (
     <Box className='pageContainer'>
       <Box className='boxBackground'>
         <Container className='containerDefault'>
           <GenericHeaderSection
             mainTitle='Your help goes a long way'
             breadCrumbLinks={breadCrumbLinks}
-          />
+          >
+            <Typography className='genSubheadTypo'>
+              We would love to hear your thoughts or feedback on how we can
+              improve your experience with the Civic Tech Index!
+            </Typography>
+          </GenericHeaderSection>
         </Container>
       </Box>
       <Box className='containerGray'>
         <Container>
-          <Grid container item className={classes.LinkText} xs={12} spacing={4}>
+          <Grid container item xs={12} spacing={4}>
             <LeftTextRightImage
               mainHeading='Donate'
               subHeading='Every gift helps us continue our work.'

src/pages/Contact/index.js

@@ -1,37 +1,12 @@
 import React from 'react';
 import Box from '@material-ui/core/Box';
 import Container from '@material-ui/core/Container';
-import makeStyles from '@material-ui/core/styles/makeStyles';
 import Typography from '@material-ui/core/Typography';
 import Card from '@material-ui/core/Card';
 import CardMedia from '@material-ui/core/CardMedia';
 import { GenericHeaderSection } from '../../components/';
 
-const useStyles = makeStyles((theme) => ({
-  headerStyle: {
-    color: theme.palette.text.secondary,
-    maxWidth: '1150px',
-    textAlign: 'center',
-    fontWeight: '400',
-    [theme.breakpoints.down('sm')]: {
-      padding: '0px 32px',
-    },
-    [theme.breakpoints.up('md')]: {
-      padding: '0px 100px',
-    },
-    '& h6': {
-      [theme.breakpoints.down('sm')]: {
-        margin: '0px 0px 71px 0px',
-      },
-      [theme.breakpoints.up('md')]: {
-        margin: '0px 0px 86px 0px',
-      },
-    },
-  },
-}));
-
 const Contact = () => {
-  const classes = useStyles();
   const breadCrumbLinks = [
     { name: 'Home', href: '/home' },
     { name: 'Contact', href: '/about/contact' },
@@ -45,7 +20,7 @@ const Contact = () => {
             mainTitle='Contact Us'
             breadCrumbLinks={breadCrumbLinks}
           >
-            <Typography variant='h6' className={classes.headerStyle}>
+            <Typography className='genSubheadTypo'>
               We would love to hear your thoughts or feedback on how we can
               improve your experience with the Civic Tech Index!
             </Typography>

src/pages/Contributors/index.js

@@ -103,15 +103,13 @@ export default function Contributors() {
     if (location.pathname.indexOf('all') > -1) {
       setTabValue(0);
     }
-    if (location.pathname.indexOf('contributors') > -1)
-    {
+    if (location.pathname.indexOf('contributors') > -1) {
       setShowIndexContrib(true);
       setTabValue(0);
     }
     if (location.pathname.indexOf('unaffiliated') > -1) {
       setTabValue(1);
-    }
-    else if (location.pathname.indexOf('affiliated') > -1) {
+    } else if (location.pathname.indexOf('affiliated') > -1) {
       setTabValue(2);
     }
   }, [location]);
@@ -169,12 +167,7 @@ export default function Contributors() {
           <Grid container>
             <TitleSection>Civic Tech Organizations</TitleSection>
             <Grid item xs={12}>
-              <Typography
-                variant='h6'
-                color='textSecondary'
-                className={classes.textStyle}
-                gutterBottom
-              >
+              <Typography className='genSubheadTypo'>
                 View all Civic Tech Organizations with open-source repositories.
               </Typography>
             </Grid>

src/pages/HowToAdd/index.js

@@ -17,28 +17,6 @@ const useStyles = makeStyles((theme) => ({
       padding: '32px 0',
     },
   },
-  summary: {
-    color: theme.palette.text.secondary,
-    fontSize: '24px',
-    margin: '1em auto',
-    textAlign: 'justify',
-    width: '66%',
-    '& a:link': {
-      color: theme.palette.text.secondary,
-      fontWeight:'400',
-    },
-    '& a:visited': {
-      color: theme.palette.text.secondary,
-    },
-    [theme.breakpoints.down('md')]: {
-      fontSize: '20px',
-      margin: '0px auto 1em',
-      width: '66%',
-    },
-    [theme.breakpoints.down('sm')]: {
-      width: '90%',
-    },
-  },
   typoStyle: {
     textAlign: 'justify',
     '& a:visited': {
@@ -72,7 +50,7 @@ const HowToAdd = () => {
             mainTitle='How to Add Your Project'
             breadCrumbLinks={breadCrumbLinks}
           />
-          <Typography variant='body1' className={classes.summary}>
+          <Typography className='genSubheadTypo'>
             By adding the <b>&apos;civictechindex&apos; </b>
             topic tag to your project, we can create a continuously updated
             repository for all civic tech enthusiasts to find open source