diff --git a/.prettierrc b/.prettierrc index 33d2cfa..63d3a53 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,4 +1,7 @@ { + "printWidth": 80, + "singleQuote": true, + "tabWidth": 2, "arrowParens": "avoid", - "semi": false + "semi": false, } diff --git a/gatsby-node.js b/gatsby-node.js index 7081474..955b64e 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -1,17 +1,21 @@ exports.onCreateWebpackConfig = ({ stage, actions, getConfig }) => { - if (stage === 'build-html') { - actions.setWebpackConfig({ - // Don't bundle modules that reference browser globals such as `window` and `IDBIndex` during SSR. - // See: https://github.com/gatsbyjs/gatsby/issues/17725 - externals: getConfig().externals.concat(function(_context, request, callback) { - // Exclude bundling firebase* and react-firebase* - // These are instead required at runtime. - if (/^@?(react-)?firebase(.*)/.test(request)) { - console.log('Excluding bundling of: ' + request); - return callback(null, 'umd ' + request); - } - callback(); - }), - }); - } - }; \ No newline at end of file + if (stage === 'build-html') { + actions.setWebpackConfig({ + // Don't bundle modules that reference browser globals such as `window` and `IDBIndex` during SSR. + // See: https://github.com/gatsbyjs/gatsby/issues/17725 + externals: getConfig().externals.concat(function ( + _context, + request, + callback + ) { + // Exclude bundling firebase* and react-firebase* + // These are instead required at runtime. + if (/^@?(react-)?firebase(.*)/.test(request)) { + console.log('Excluding bundling of: ' + request) + return callback(null, 'umd ' + request) + } + callback() + }), + }) + } +} diff --git a/src/Routes.js b/src/Routes.js index 7d11698..cda2de5 100755 --- a/src/Routes.js +++ b/src/Routes.js @@ -1,18 +1,18 @@ /* eslint-disable react/no-array-index-key */ -import React, { lazy, Suspense, Fragment } from "react" -import { Switch, Redirect, Route } from "react-router-dom" -import HomeLayout from "./layouts/HomeLayout" -import AnotherLayout from "./layouts/AnotherLayout" +import React, { lazy, Suspense, Fragment } from 'react' +import { Switch, Redirect, Route } from 'react-router-dom' +import HomeLayout from './layouts/HomeLayout' +import AnotherLayout from './layouts/AnotherLayout' const routesConfig = [ { - path: "/", - component: lazy(() => import("./layouts/HomeLayout")), + path: '/', + component: lazy(() => import('./layouts/HomeLayout')), }, { exact: true, - path: "/another", - component: lazy(() => import("./layouts/AnotherLayout")), + path: '/another', + component: lazy(() => import('./layouts/AnotherLayout')), }, ] diff --git a/src/components/choices.js b/src/components/choices.js index 00326af..623ef39 100644 --- a/src/components/choices.js +++ b/src/components/choices.js @@ -1,9 +1,9 @@ -import React from "react" -import { makeStyles } from "@material-ui/core/styles" -import { Grid, Typography, CardMedia, Box } from "@material-ui/core" +import React from 'react' +import { makeStyles } from '@material-ui/core/styles' +import { Grid, Typography, CardMedia, Box } from '@material-ui/core' -import Img from "gatsby-image" -import { StaticQuery, graphql } from "gatsby" +import Img from 'gatsby-image' +import { StaticQuery, graphql } from 'gatsby' const useStyles = makeStyles(theme => ({ icon: { @@ -11,7 +11,7 @@ const useStyles = makeStyles(theme => ({ }, domainsContent: { padding: theme.spacing(5, 5, 5), - [theme.breakpoints.down("md")]: { + [theme.breakpoints.down('md')]: { padding: theme.spacing(5, 3, 5), }, }, @@ -20,53 +20,53 @@ const useStyles = makeStyles(theme => ({ paddingBottom: theme.spacing(8), }, card: { - height: "100%", - display: "flex", - flexDirection: "column", - borderRadius: "10px", + height: '100%', + display: 'flex', + flexDirection: 'column', + borderRadius: '10px', }, cardMedia: { - width: "100%", - height: "auto", + width: '100%', + height: 'auto', // paddingTop: "56.25%", // 16:9 }, cardContent: { flexGrow: 1, }, chipActions: { - display: "block", + display: 'block', }, chip: { - margin: "8px 0 3px 8px", + margin: '8px 0 3px 8px', }, extraMargin: { - marginTop: "15px", - marginBottom: "0", + marginTop: '15px', + marginBottom: '0', }, btn: { - textTransform: "none", + textTransform: 'none', }, root: { backgroundColor: theme.palette.primary.main, paddingTop: theme.spacing(3), paddingBottom: theme.spacing(3), - "& dt": { + '& dt': { marginTop: theme.spacing(2), }, - color: "#FFF", + color: '#FFF', }, paddingCls: { - paddingLeft: "10px", - paddingRight: "10px", + paddingLeft: '10px', + paddingRight: '10px', }, paddingClsxs: { padding: 0, }, iconSize: { - fontSize: "32px", + fontSize: '32px', }, text: { - color: "#FFFFFF", + color: '#FFFFFF', }, avatarLarge: { width: theme.spacing(16), @@ -75,11 +75,11 @@ const useStyles = makeStyles(theme => ({ }, avatarGrid: { - display: "flex", - flexDirection: "column", - alignItems: "center", - justifyContent: "center", - padding: "5px", + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + padding: '5px', }, })) @@ -111,38 +111,40 @@ export default function Choices() { const choiceImages = data.choiceImages const leftImage = choiceImages.nodes.find( - node => node.childImageSharp.fluid.originalName === "left.png" + node => node.childImageSharp.fluid.originalName === 'left.png' ) const rightImage = choiceImages.nodes.find( - node => node.childImageSharp.fluid.originalName === "right.png" + node => node.childImageSharp.fluid.originalName === 'right.png' ) return ( - - Make the Best Choice for Your Junior - + + Make the Best Choice for Your Junior + - - Give your junior chance to try the best, easing the journey - to get him/her closer to their dream - + + + Give your junior chance to try the best, easing the journey + + to get him/her closer to their dream + diff --git a/src/components/courses.js b/src/components/courses.js index 3f6524d..d4a6c9a 100644 --- a/src/components/courses.js +++ b/src/components/courses.js @@ -1,7 +1,7 @@ -import React, { Fragment } from "react" -import { makeStyles } from "@material-ui/core/styles" -import ParallaxSlide from "@mui-treasury/components/slide/parallax" -import PropTypes from "prop-types" +import React, { Fragment } from 'react' +import { makeStyles } from '@material-ui/core/styles' +import ParallaxSlide from '@mui-treasury/components/slide/parallax' +import PropTypes from 'prop-types' import { Grid, Typography, @@ -11,12 +11,12 @@ import { Card, CardContent, Chip, -} from "@material-ui/core" -import { insideTriangleTabsStylesHook } from "@mui-treasury/styles/tabs" -import useMediaQuery from "@material-ui/core/useMediaQuery" +} from '@material-ui/core' +import { insideTriangleTabsStylesHook } from '@mui-treasury/styles/tabs' +import useMediaQuery from '@material-ui/core/useMediaQuery' -import { StaticQuery, graphql } from "gatsby" -import BackgroundImage from "gatsby-background-image" +import { StaticQuery, graphql } from 'gatsby' +import BackgroundImage from 'gatsby-background-image' const useStyles = makeStyles(theme => ({ icon: { @@ -24,10 +24,10 @@ const useStyles = makeStyles(theme => ({ }, root: { padding: theme.spacing(10, 10, 10), - display: "flex", - justifyContent: "center", - alignItems: "center", - [theme.breakpoints.down("md")]: { + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + [theme.breakpoints.down('md')]: { padding: theme.spacing(10, 3, 10), }, }, @@ -36,43 +36,43 @@ const useStyles = makeStyles(theme => ({ paddingBottom: theme.spacing(8), }, card: { - height: "100%", - display: "flex", - flexDirection: "column", - borderRadius: "10px", - margin: "12px", + height: '100%', + display: 'flex', + flexDirection: 'column', + borderRadius: '10px', + margin: '12px', }, cardMedia: { - width: "100%", - height: "auto", + width: '100%', + height: 'auto', // paddingTop: "56.25%", // 16:9 }, cardContent: {}, chipActions: { - display: "block", + display: 'block', }, chip: { - margin: "8px 0 3px 8px", + margin: '8px 0 3px 8px', }, extraMargin: { - marginTop: "15px", - marginBottom: "0", + marginTop: '15px', + marginBottom: '0', }, btn: { - textTransform: "none", + textTransform: 'none', }, paddingCls: { - paddingLeft: "10px", - paddingRight: "10px", + paddingLeft: '10px', + paddingRight: '10px', }, paddingClsxs: { padding: 0, }, iconSize: { - fontSize: "32px", + fontSize: '32px', }, text: { - color: "#FFFFFF", + color: '#FFFFFF', }, avatarLarge: { width: theme.spacing(16), @@ -81,34 +81,34 @@ const useStyles = makeStyles(theme => ({ }, avatarGrid: { - display: "flex", - flexDirection: "column", - alignItems: "center", - justifyContent: "center", - padding: "5px", + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + padding: '5px', }, slide: { perspective: 0, // create perspective - overflow: "hidden", + overflow: 'hidden', // relative is a must if you want to create overlapping layers in children - position: "relative", + position: 'relative', }, background: { - width: "100%", - height: "auto", - backgroundPosition: "bottom center", - backgroundSize: "cover", + width: '100%', + height: 'auto', + backgroundPosition: 'bottom center', + backgroundSize: 'cover', }, })) export default function Courses() { const classes = useStyles() - const matches = useMediaQuery("(min-width:500px)") + const matches = useMediaQuery('(min-width:500px)') const tabsStyles = insideTriangleTabsStylesHook.useTabs() const tabItemStyles = insideTriangleTabsStylesHook.useTabItem({ - bgColor: "#FF4C00", + bgColor: '#FF4C00', }) const [value, setValue] = React.useState(0) @@ -199,7 +199,7 @@ export default function Courses() { align="center" color="textPrimary" style={{ - marginBottom: "20px", + marginBottom: '20px', }} > Explore Our Upcoming Courses @@ -212,8 +212,8 @@ export default function Courses() { align="center" color="textPrimary" style={{ - marginBottom: "30px", - color: "#848484", + marginBottom: '30px', + color: '#848484', }} > Our courses are designed according to his/her mental growth. @@ -235,8 +235,8 @@ export default function Courses() { variant="h1" align="center" style={{ - marginBottom: "50px", - color: "#FF4C00", + marginBottom: '50px', + color: '#FF4C00', }} > Junior’s Class? @@ -260,11 +260,11 @@ export default function Courses() { onChange={handleChange} aria-label="Tabs" centered={true} - variant={matches ? "standard" : "scrollable"} + variant={matches ? 'standard' : 'scrollable'} scrollButtons="auto" classes={tabsStyles} style={{ - marginBottom: "48px", + marginBottom: '48px', }} > { @@ -372,15 +372,15 @@ const CourseCard = ({ course, slideImages }) => { display="flex" flexDirection="row" style={{ - margin: "8px 0px 0px", + margin: '8px 0px 0px', }} > {course.difficulty} @@ -389,7 +389,7 @@ const CourseCard = ({ course, slideImages }) => { align="right" variant="body2" style={{ - width: "50%", + width: '50%', }} > {course.level} @@ -400,8 +400,8 @@ const CourseCard = ({ course, slideImages }) => { variant="h5" align="left" style={{ - marginBottom: "16px", - color: "#FF4C00", + marginBottom: '16px', + color: '#FF4C00', }} > {course.domain} @@ -421,13 +421,13 @@ const CourseCard = ({ course, slideImages }) => { display="flex" flexDirection="row" style={{ - marginTop: "4px 0px", + marginTop: '4px 0px', }} > Duration @@ -439,13 +439,13 @@ const CourseCard = ({ course, slideImages }) => { display="flex" flexDirection="row" style={{ - marginTop: "4px 0px", + marginTop: '4px 0px', }} > Upcoming @@ -453,16 +453,21 @@ const CourseCard = ({ course, slideImages }) => { No upcoming - + {course.tags.map((tag, index) => ( {tag} @@ -470,7 +475,7 @@ const CourseCard = ({ course, slideImages }) => { } variant="outlined" style={{ - margin: "4px", + margin: '4px', }} /> ))} @@ -482,8 +487,8 @@ const CourseCard = ({ course, slideImages }) => { display="flex" justifyContent="center" style={{ - background: "#F1F1F1", - color: "#FF4C00", + background: '#F1F1F1', + color: '#FF4C00', }} > @@ -516,10 +521,10 @@ const ParallaxCarousel = ({ slides, slideImages }) => { flexDirection="column" alignItems="bottom" style={{ - height: "141px", - width: "100%", - color: "#FFFFFF", - padding: "8px", + height: '141px', + width: '100%', + color: '#FFFFFF', + padding: '8px', }} > @@ -554,6 +559,6 @@ TabPanel.propTypes = { function a11yProps(index) { return { id: `scrollable-auto-tab-${index}`, - "aria-controls": `scrollable-auto-tabpanel-${index}`, + 'aria-controls': `scrollable-auto-tabpanel-${index}`, } } diff --git a/src/components/cta.js b/src/components/cta.js index a683990..45ed7ca 100644 --- a/src/components/cta.js +++ b/src/components/cta.js @@ -1,6 +1,6 @@ -import React from "react" +import React from 'react' -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from '@material-ui/core/styles' import { Grid, Typography, @@ -9,11 +9,11 @@ import { CardContent, TextField, Button, -} from "@material-ui/core" -import BackgroundImage from "gatsby-background-image" +} from '@material-ui/core' +import BackgroundImage from 'gatsby-background-image' -import { StaticQuery, graphql } from "gatsby" -import { withStyles } from "@material-ui/core/styles" +import { StaticQuery, graphql } from 'gatsby' +import { withStyles } from '@material-ui/core/styles' const useStyles = makeStyles(theme => ({ icon: { @@ -21,7 +21,7 @@ const useStyles = makeStyles(theme => ({ }, heroContent: { padding: theme.spacing(10, 10, 10), - [theme.breakpoints.down("md")]: { + [theme.breakpoints.down('md')]: { padding: theme.spacing(10, 3, 10), }, }, @@ -33,77 +33,77 @@ const useStyles = makeStyles(theme => ({ paddingBottom: theme.spacing(8), }, card: { - display: "flex", - flexDirection: "column", - borderRadius: "5px", + display: 'flex', + flexDirection: 'column', + borderRadius: '5px', }, cardMedia: { - width: "100%", - height: "auto", + width: '100%', + height: 'auto', }, cardContent: { flexGrow: 1, }, chipActions: { - display: "block", + display: 'block', }, chip: { - margin: "8px 0 3px 8px", + margin: '8px 0 3px 8px', }, extraMargin: { - marginTop: "15px", - marginBottom: "0", + marginTop: '15px', + marginBottom: '0', }, btn: { - textTransform: "none", - height: "30px", - backgroundColor: "#FF4C00", + textTransform: 'none', + height: '30px', + backgroundColor: '#FF4C00', }, input: { - backgroundColor: "rgba(255,255,255,0.5)", - borderRadius: "4px", - height: "30px", - width: "250px", - padding: "0px 10px", + backgroundColor: 'rgba(255,255,255,0.5)', + borderRadius: '4px', + height: '30px', + width: '250px', + padding: '0px 10px', marginRight: theme.spacing(1), }, root: { backgroundColor: theme.palette.primary.main, paddingTop: theme.spacing(3), paddingBottom: theme.spacing(3), - "& dt": { + '& dt': { marginTop: theme.spacing(2), }, - color: "#FFF", + color: '#FFF', }, paddingCls: { - paddingLeft: "10px", - paddingRight: "10px", + paddingLeft: '10px', + paddingRight: '10px', }, paddingClsxs: { padding: 0, }, iconSize: { - fontSize: "32px", + fontSize: '32px', }, text: { - color: "#FFFFFF", + color: '#FFFFFF', }, background: { - width: "100%", - backgroundPosition: "bottom center", - backgroundSize: "cover", + width: '100%', + backgroundPosition: 'bottom center', + backgroundSize: 'cover', }, textField: { - marginBottom: "16px", + marginBottom: '16px', }, btn: { - textTransform: "none", - height: "40px", - width: "100px", - background: "#FF4C00", - "&:hover": { - backgroundColor: "rgba(255,76,0,0.5)", + textTransform: 'none', + height: '40px', + width: '100px', + background: '#FF4C00', + '&:hover': { + backgroundColor: 'rgba(255,76,0,0.5)', }, }, })) @@ -112,21 +112,21 @@ export default function CTA() { const CssTextField = withStyles({ root: { - "& label.Mui-focused": { - color: "#FF4C00", + '& label.Mui-focused': { + color: '#FF4C00', }, - "& .MuiInput-underline:after": { - borderBottomColor: "yellow", + '& .MuiInput-underline:after': { + borderBottomColor: 'yellow', }, - "& .MuiOutlinedInput-root": { - "& fieldset": { - borderColor: "#717171", + '& .MuiOutlinedInput-root': { + '& fieldset': { + borderColor: '#717171', }, - "&:hover fieldset": { - borderColor: "#000000", + '&:hover fieldset': { + borderColor: '#000000', }, - "&.Mui-focused fieldset": { - borderColor: "#FF4C00", + '&.Mui-focused fieldset': { + borderColor: '#FF4C00', }, }, }, @@ -157,7 +157,7 @@ export default function CTA() { const ctaImages = data.ctaImages const bgImage = ctaImages.nodes.find( - node => node.childImageSharp.fluid.originalName === "cta_bg.png" + node => node.childImageSharp.fluid.originalName === 'cta_bg.png' ) return ( @@ -186,9 +186,9 @@ export default function CTA() { @@ -196,7 +196,7 @@ export default function CTA() { variant="h3" gutterBottom style={{ - marginBottom: "32px", + marginBottom: '32px', }} > @@ -208,8 +208,8 @@ export default function CTA() { variant="body1" gutterBottom style={{ - color: "#717171", - marginBottom: "24px", + color: '#717171', + marginBottom: '24px', }} > @@ -274,22 +274,21 @@ export default function CTA() { display="flex" flexDirection="column" > - Where To Start? @@ -299,8 +298,8 @@ export default function CTA() { variant="body1" gutterBottom style={{ - color: "#717171", - marginBottom: "24px", + color: '#717171', + marginBottom: '24px', }} > @@ -313,7 +312,7 @@ export default function CTA() { Take a Test @@ -323,18 +322,18 @@ export default function CTA() { @@ -346,8 +345,8 @@ export default function CTA() { variant="body1" gutterBottom style={{ - color: "#BABABA", - marginBottom: "24px", + color: '#BABABA', + marginBottom: '24px', }} > @@ -360,7 +359,7 @@ export default function CTA() { Try Now ! diff --git a/src/components/domains.js b/src/components/domains.js index 7d3e624..a8c01a3 100644 --- a/src/components/domains.js +++ b/src/components/domains.js @@ -1,19 +1,19 @@ -import React from "react" -import { makeStyles } from "@material-ui/core/styles" -import { domains } from "../data/domains" -import { Grid, Typography, Box } from "@material-ui/core" +import React from 'react' +import { makeStyles } from '@material-ui/core/styles' +import { domains } from '../data/domains' +import { Grid, Typography, Box } from '@material-ui/core' -import Img from "gatsby-image" -import { StaticQuery, graphql } from "gatsby" +import Img from 'gatsby-image' +import { StaticQuery, graphql } from 'gatsby' const useStyles = makeStyles(theme => ({ icon: { marginRight: theme.spacing(2), }, domainsContent: { - background: "", + background: '', padding: theme.spacing(5, 5, 5), - [theme.breakpoints.down("md")]: { + [theme.breakpoints.down('md')]: { padding: theme.spacing(5, 3, 5), }, }, @@ -22,53 +22,53 @@ const useStyles = makeStyles(theme => ({ paddingBottom: theme.spacing(8), }, card: { - height: "100%", - display: "flex", - flexDirection: "column", - borderRadius: "10px", + height: '100%', + display: 'flex', + flexDirection: 'column', + borderRadius: '10px', }, cardMedia: { - width: "100%", - height: "auto", + width: '100%', + height: 'auto', // paddingTop: "56.25%", // 16:9 }, cardContent: { flexGrow: 1, }, chipActions: { - display: "block", + display: 'block', }, chip: { - margin: "8px 0 3px 8px", + margin: '8px 0 3px 8px', }, extraMargin: { - marginTop: "15px", - marginBottom: "0", + marginTop: '15px', + marginBottom: '0', }, btn: { - textTransform: "none", + textTransform: 'none', }, root: { backgroundColor: theme.palette.primary.main, paddingTop: theme.spacing(3), paddingBottom: theme.spacing(3), - "& dt": { + '& dt': { marginTop: theme.spacing(2), }, - color: "#FFF", + color: '#FFF', }, paddingCls: { - paddingLeft: "10px", - paddingRight: "10px", + paddingLeft: '10px', + paddingRight: '10px', }, paddingClsxs: { padding: 0, }, iconSize: { - fontSize: "32px", + fontSize: '32px', }, text: { - color: "#FFFFFF", + color: '#FFFFFF', }, avatarLarge: { width: theme.spacing(16), @@ -77,10 +77,10 @@ const useStyles = makeStyles(theme => ({ }, avatarGrid: { - display: "flex", - flexDirection: "column", - alignItems: "center", - justifyContent: "center", + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', }, })) @@ -116,7 +116,7 @@ export default function Domains() { align="center" color="textPrimary" style={{ - marginBottom: "24px", + marginBottom: '24px', }} > We Start from Zero @@ -126,21 +126,22 @@ export default function Domains() { variant="body1" align="center" style={{ - marginBottom: "24px", - color: "#FF4C00", + marginBottom: '24px', + color: '#FF4C00', }} > Not assuming the basics to be clear we include - CODING with MATHS & LOGIC BUILDING into our courses. + + CODING with MATHS & LOGIC BUILDING into our courses.{' '} + - Courses Focused On @@ -149,7 +150,7 @@ export default function Domains() { {domains.map((domain, index) => { - const domainFileName = domain["img"] + const domainFileName = domain['img'] const domainImage = data.domainImages.nodes.find( node => node.childImageSharp.fixed.originalName === domainFileName diff --git a/src/components/footer.js b/src/components/footer.js index 8d7b029..61003af 100755 --- a/src/components/footer.js +++ b/src/components/footer.js @@ -1,76 +1,76 @@ -import React from "react" -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" -import PropTypes from "prop-types" -import clsx from "clsx" -import { Container, Grid, Typography, makeStyles } from "@material-ui/core" -import { WhiteLogo } from "./logo" -import List from "@material-ui/core/List" -import ListItem from "@material-ui/core/ListItem" -import ListItemIcon from "@material-ui/core/ListItemIcon" -import ListItemText from "@material-ui/core/ListItemText" -import { Link } from "gatsby" +import React from 'react' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import PropTypes from 'prop-types' +import clsx from 'clsx' +import { Container, Grid, Typography, makeStyles } from '@material-ui/core' +import { WhiteLogo } from './logo' +import List from '@material-ui/core/List' +import ListItem from '@material-ui/core/ListItem' +import ListItemIcon from '@material-ui/core/ListItemIcon' +import ListItemText from '@material-ui/core/ListItemText' +import { Link } from 'gatsby' -import { StaticQuery, graphql } from "gatsby" +import { StaticQuery, graphql } from 'gatsby' const useStyles = makeStyles(theme => ({ root: { - background: "#000000", + background: '#000000', paddingTop: theme.spacing(12), paddingLeft: 70, paddingRight: 70, - [theme.breakpoints.down("md")]: { + [theme.breakpoints.down('md')]: { paddingLeft: 15, paddingRight: 15, }, - color: "#FFFFFF", + color: '#FFFFFF', }, input: { color: theme.palette.secondary.main, - backgroundColor: "#fff", + backgroundColor: '#fff', }, registerBtn: { color: theme.palette.secondary.main, - backgroundColor: "#fff", - marginLeft: "10px", - padding: "7.5px 0px", + backgroundColor: '#fff', + marginLeft: '10px', + padding: '7.5px 0px', }, iconBtn: { - display: "inline-flex", - justifyContent: "center", - flexWrap: "wrap", - border: "2px solid #fff", + display: 'inline-flex', + justifyContent: 'center', + flexWrap: 'wrap', + border: '2px solid #fff', }, socialIcon: { color: theme.palette.secondary.main, - backgroundColor: "#fff", - marginLeft: "10px", - padding: "6px 0px", + backgroundColor: '#fff', + marginLeft: '10px', + padding: '6px 0px', }, logo: { width: 20, - height: "auto", + height: 'auto', // borderRadius: '50%' }, iconSocialMedia: { - color: "#FFFFFF", + color: '#FFFFFF', }, centerCls: { - paddingLeft: "5px", - paddingRight: "5px", + paddingLeft: '5px', + paddingRight: '5px', }, circleCls: { // padding: '10px', - backgroundColor: "#fff", - color: "#000", + backgroundColor: '#fff', + color: '#000', // border: '2px solid red', - borderRadius: "50%", + borderRadius: '50%', }, extraMarginTop: { paddingTop: theme.spacing(2), paddingBottom: theme.spacing(4), }, extraMargin: { - marginTop: "10px", + marginTop: '10px', }, copyRightPadding: { paddingTop: theme.spacing(8), @@ -81,8 +81,8 @@ const useStyles = makeStyles(theme => ({ function Footer({ className, logoWhiteImage, ...rest }) { const classes = useStyles() const flexContainer = { - display: "flex", - flexDirection: "row", + display: 'flex', + flexDirection: 'row', padding: 0, } @@ -146,7 +146,7 @@ function Footer({ className, logoWhiteImage, ...rest }) { target="_blank" > - + @@ -184,7 +184,7 @@ function Footer({ className, logoWhiteImage, ...rest }) { > @@ -197,7 +197,7 @@ function Footer({ className, logoWhiteImage, ...rest }) { > @@ -210,7 +210,7 @@ function Footer({ className, logoWhiteImage, ...rest }) { > @@ -223,7 +223,7 @@ function Footer({ className, logoWhiteImage, ...rest }) { > @@ -238,12 +238,12 @@ function Footer({ className, logoWhiteImage, ...rest }) { variant="body2" color="textSecondary" > - {"Copyright © "} - {new Date().getFullYear()}{" "} + {'Copyright © '} + {new Date().getFullYear()}{' '} Code For Cause - {". All rights reserved."} + {'. All rights reserved.'} Privacy Policy - {" | "} + {' | '} Terms of Use diff --git a/src/components/header.js b/src/components/header.js index 8dd2706..831e363 100644 --- a/src/components/header.js +++ b/src/components/header.js @@ -1,41 +1,41 @@ -import React from "react" -import clsx from "clsx" -import { makeStyles } from "@material-ui/core/styles" -import Drawer from "@material-ui/core/Drawer" -import AppBar from "@material-ui/core/AppBar" -import Toolbar from "@material-ui/core/Toolbar" -import CssBaseline from "@material-ui/core/CssBaseline" -import List from "@material-ui/core/List" -import Divider from "@material-ui/core/Divider" -import IconButton from "@material-ui/core/IconButton" -import MenuIcon from "@material-ui/icons/Menu" -import ChevronRightIcon from "@material-ui/icons/ChevronRight" -import ListItem from "@material-ui/core/ListItem" -import ListItemIcon from "@material-ui/core/ListItemIcon" -import ListItemText from "@material-ui/core/ListItemText" -import InboxIcon from "@material-ui/icons/MoveToInbox" -import MailIcon from "@material-ui/icons/Mail" -import { Hidden } from "@material-ui/core" -import { Logo } from "./logo" +import React from 'react' +import clsx from 'clsx' +import { makeStyles } from '@material-ui/core/styles' +import Drawer from '@material-ui/core/Drawer' +import AppBar from '@material-ui/core/AppBar' +import Toolbar from '@material-ui/core/Toolbar' +import CssBaseline from '@material-ui/core/CssBaseline' +import List from '@material-ui/core/List' +import Divider from '@material-ui/core/Divider' +import IconButton from '@material-ui/core/IconButton' +import MenuIcon from '@material-ui/icons/Menu' +import ChevronRightIcon from '@material-ui/icons/ChevronRight' +import ListItem from '@material-ui/core/ListItem' +import ListItemIcon from '@material-ui/core/ListItemIcon' +import ListItemText from '@material-ui/core/ListItemText' +import InboxIcon from '@material-ui/icons/MoveToInbox' +import MailIcon from '@material-ui/icons/Mail' +import { Hidden } from '@material-ui/core' +import { Logo } from './logo' -import { StaticQuery, graphql } from "gatsby" +import { StaticQuery, graphql } from 'gatsby' const drawerWidth = 240 const useStyles = makeStyles(theme => ({ root: { - display: "flex", + display: 'flex', }, appBar: { - transition: theme.transitions.create(["margin", "width"], { + transition: theme.transitions.create(['margin', 'width'], { easing: theme.transitions.easing.sharp, duration: theme.transitions.duration.leavingScreen, }), - background: "#FFFFFF", + background: '#FFFFFF', }, appBarShift: { width: `calc(100% - ${drawerWidth}px)`, - transition: theme.transitions.create(["margin", "width"], { + transition: theme.transitions.create(['margin', 'width'], { easing: theme.transitions.easing.easeOut, duration: theme.transitions.duration.enteringScreen, }), @@ -44,12 +44,12 @@ const useStyles = makeStyles(theme => ({ toolbar: { flexGrow: 1, padding: theme.spacing(0, 10), - [theme.breakpoints.down("md")]: { + [theme.breakpoints.down('md')]: { padding: theme.spacing(0, 3), }, }, hide: { - display: "none", + display: 'none', }, drawer: { width: drawerWidth, @@ -59,8 +59,8 @@ const useStyles = makeStyles(theme => ({ width: drawerWidth, }, drawerHeader: { - display: "flex", - alignItems: "center", + display: 'flex', + alignItems: 'center', padding: theme.spacing(0, 1), // necessary for content to be below app bar ...theme.mixins.toolbar, @@ -112,7 +112,7 @@ export default function Header() { edge="end" onClick={handleDrawerOpen} className={clsx(open && classes.hide)} - style={{ position: "absolute", right: 24 }} + style={{ position: 'absolute', right: 24 }} > @@ -135,7 +135,7 @@ export default function Header() { - {["Inbox", "Starred", "Send email", "Drafts"].map( + {['Inbox', 'Starred', 'Send email', 'Drafts'].map( (text, index) => ( @@ -148,7 +148,7 @@ export default function Header() { - {["All mail", "Trash", "Spam"].map((text, index) => ( + {['All mail', 'Trash', 'Spam'].map((text, index) => ( {index % 2 === 0 ? : } diff --git a/src/components/hero.js b/src/components/hero.js index 9d10674..494ca50 100644 --- a/src/components/hero.js +++ b/src/components/hero.js @@ -1,6 +1,6 @@ -import React from "react" +import React from 'react' -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from '@material-ui/core/styles' import { Button, Grid, @@ -9,11 +9,11 @@ import { Hidden, Input, Box, -} from "@material-ui/core" -import BackgroundImage from "gatsby-background-image" +} from '@material-ui/core' +import BackgroundImage from 'gatsby-background-image' -import Img from "gatsby-image" -import { StaticQuery, graphql } from "gatsby" +import Img from 'gatsby-image' +import { StaticQuery, graphql } from 'gatsby' const useStyles = makeStyles(theme => ({ icon: { @@ -21,7 +21,7 @@ const useStyles = makeStyles(theme => ({ }, heroContent: { padding: theme.spacing(20, 10, 15), - [theme.breakpoints.down("md")]: { + [theme.breakpoints.down('md')]: { padding: theme.spacing(15, 3, 15), }, }, @@ -33,50 +33,50 @@ const useStyles = makeStyles(theme => ({ paddingBottom: theme.spacing(8), }, card: { - display: "flex", - flexDirection: "column", - borderRadius: "10px", + display: 'flex', + flexDirection: 'column', + borderRadius: '10px', }, cardMedia: { - width: "100%", - height: "auto", + width: '100%', + height: 'auto', // paddingTop: "56.25%", // 16:9 }, cardContent: { flexGrow: 1, }, chipActions: { - display: "block", + display: 'block', }, chip: { - margin: "8px 0 3px 8px", + margin: '8px 0 3px 8px', }, extraMargin: { - marginTop: "15px", - marginBottom: "0", + marginTop: '15px', + marginBottom: '0', }, btn: { - textTransform: "none", - height: "40px", - width: "100px", - "&:hover": { - backgroundColor: "rgba(255,76,0,0.5)", + textTransform: 'none', + height: '40px', + width: '100px', + '&:hover': { + backgroundColor: 'rgba(255,76,0,0.5)', }, - backgroundColor: "#FF4C00", - [theme.breakpoints.down("xs")]: { - width: "100%", + backgroundColor: '#FF4C00', + [theme.breakpoints.down('xs')]: { + width: '100%', margin: theme.spacing(1, 0, 1, 0), }, }, input: { - backgroundColor: "rgba(255,255,255,0.5)", - borderRadius: "4px", - height: "40px", - width: "300px", - padding: "0px 10px", + backgroundColor: 'rgba(255,255,255,0.5)', + borderRadius: '4px', + height: '40px', + width: '300px', + padding: '0px 10px', margin: theme.spacing(0, 2, 0, 0), - [theme.breakpoints.down("xs")]: { - width: "100%", + [theme.breakpoints.down('xs')]: { + width: '100%', margin: theme.spacing(1, 0, 1, 0), }, }, @@ -84,37 +84,37 @@ const useStyles = makeStyles(theme => ({ backgroundColor: theme.palette.primary.main, paddingTop: theme.spacing(3), paddingBottom: theme.spacing(3), - "& dt": { + '& dt': { marginTop: theme.spacing(2), }, - color: "#FFF", + color: '#FFF', }, paddingCls: { - paddingLeft: "10px", - paddingRight: "10px", + paddingLeft: '10px', + paddingRight: '10px', }, paddingClsxs: { padding: 0, }, iconSize: { - fontSize: "32px", + fontSize: '32px', }, text: { - color: "#FFFFFF", + color: '#FFFFFF', marginBottom: theme.spacing(3), lineHeight: 1.5, }, textBig: { - color: "#FFFFFF", + color: '#FFFFFF', marginBottom: theme.spacing(5), lineHeight: 1.5, }, background: { - width: "100%", - backgroundPosition: "bottom center", - backgroundRepeat: "repeat-y", - backgroundSize: "cover", + width: '100%', + backgroundPosition: 'bottom center', + backgroundRepeat: 'repeat-y', + backgroundSize: 'cover', }, })) export default function Hero({ heroImages }) { @@ -145,11 +145,11 @@ export default function Hero({ heroImages }) { const heroImages = data.heroImages const bgImage = heroImages.nodes.find( - node => node.childImageSharp.fluid.originalName === "hero_bg.png" + node => node.childImageSharp.fluid.originalName === 'hero_bg.png' ) const actorImage = heroImages.nodes.find( - node => node.childImageSharp.fluid.originalName === "hero_actor.png" + node => node.childImageSharp.fluid.originalName === 'hero_actor.png' ) return ( @@ -172,7 +172,8 @@ export default function Hero({ heroImages }) { displayInline > - Get Your Junior Ready to Code for Future + Get Your Junior{' '} + Ready to Code for Future @@ -191,7 +192,7 @@ export default function Hero({ heroImages }) { Consult with our counsellor @@ -213,21 +214,27 @@ export default function Hero({ heroImages }) { color="primary" target="_blank" > - - Submit - + Submit - + diff --git a/src/components/logo.js b/src/components/logo.js index cfbefba..1d21d4e 100755 --- a/src/components/logo.js +++ b/src/components/logo.js @@ -1,5 +1,5 @@ -import React from "react" -import Img from "gatsby-image" +import React from 'react' +import Img from 'gatsby-image' export function Logo({ logoImage }) { return diff --git a/src/components/priciples.js b/src/components/priciples.js index 89ee6bb..ced6dfd 100644 --- a/src/components/priciples.js +++ b/src/components/priciples.js @@ -1,14 +1,14 @@ -import React from "react" -import { makeStyles } from "@material-ui/core/styles" -import { domains } from "../data/domains" -import { Grid, Typography, Box } from "@material-ui/core" -import Domains from "./domains" -import Choices from "./choices" +import React from 'react' +import { makeStyles } from '@material-ui/core/styles' +import { domains } from '../data/domains' +import { Grid, Typography, Box } from '@material-ui/core' +import Domains from './domains' +import Choices from './choices' const useStyles = makeStyles(theme => ({ principleContent: { padding: theme.spacing(10, 5, 5), - [theme.breakpoints.down("md")]: { + [theme.breakpoints.down('md')]: { padding: theme.spacing(10, 3, 5), }, }, @@ -25,18 +25,19 @@ export default function Principles() { align="center" color="textPrimary" style={{ - marginBottom: "32px", + marginBottom: '32px', }} > - Courses designed minding THE FIRST PRINCIPLES + Courses designed minding{' '} + THE FIRST PRINCIPLES diff --git a/src/components/promoters.js b/src/components/promoters.js index f7ae2c3..c0846ca 100755 --- a/src/components/promoters.js +++ b/src/components/promoters.js @@ -1,27 +1,27 @@ -import React from "react" -import PropTypes from "prop-types" -import clsx from "clsx" -import { Grid, Typography, makeStyles } from "@material-ui/core" -import { associations } from "../data/associations" -import Img from "gatsby-image" -import { StaticQuery, graphql } from "gatsby" +import React from 'react' +import PropTypes from 'prop-types' +import clsx from 'clsx' +import { Grid, Typography, makeStyles } from '@material-ui/core' +import { associations } from '../data/associations' +import Img from 'gatsby-image' +import { StaticQuery, graphql } from 'gatsby' const useStyles = makeStyles(theme => ({ root: { - backgroundColor: "#FFF7F3", + backgroundColor: '#FFF7F3', padding: theme.spacing(5, 10, 5), - [theme.breakpoints.down("md")]: { + [theme.breakpoints.down('md')]: { padding: theme.spacing(5, 3, 5), }, - [theme.breakpoints.down("sm")]: { + [theme.breakpoints.down('sm')]: { paddingTop: theme.spacing(6), }, - color: "#000000", + color: '#000000', }, centerCls: { - paddingLeft: "5px", - paddingRight: "5px", + paddingLeft: '5px', + paddingRight: '5px', }, })) @@ -59,16 +59,21 @@ function Promoters({ className, ...rest }) { justifyContent="center" alignItems="center" > - + Our mentors are associated with {associations.map((association, index) => { - const associationFileName = association["avatar"] + const associationFileName = association['avatar'] const associationImage = associationImages.nodes.find( node => node.childImageSharp.fixed.originalName === @@ -87,10 +92,10 @@ function Promoters({ className, ...rest }) { align="center" > {association["name"]} diff --git a/src/components/recommendations.js b/src/components/recommendations.js index 00cfbbb..a74a6e0 100644 --- a/src/components/recommendations.js +++ b/src/components/recommendations.js @@ -1,6 +1,6 @@ -import React from "react" +import React from 'react' -import { makeStyles } from "@material-ui/core/styles" +import { makeStyles } from '@material-ui/core/styles' import { Grid, Typography, @@ -9,11 +9,11 @@ import { CardContent, Avatar, Hidden, -} from "@material-ui/core" -import { StaticQuery, graphql } from "gatsby" +} from '@material-ui/core' +import { StaticQuery, graphql } from 'gatsby' -import { recommendations } from "../data/recommendations" -import Img from "gatsby-image" +import { recommendations } from '../data/recommendations' +import Img from 'gatsby-image' const useStyles = makeStyles(theme => ({ icon: { @@ -21,7 +21,7 @@ const useStyles = makeStyles(theme => ({ }, heroContent: { padding: theme.spacing(10, 10, 10), - [theme.breakpoints.down("md")]: { + [theme.breakpoints.down('md')]: { padding: theme.spacing(10, 3, 10), }, }, @@ -33,57 +33,57 @@ const useStyles = makeStyles(theme => ({ paddingBottom: theme.spacing(8), }, card: { - background: "#FFFBFA", - height: "100%", - display: "flex", - flexDirection: "column", - borderRadius: "10px", + background: '#FFFBFA', + height: '100%', + display: 'flex', + flexDirection: 'column', + borderRadius: '10px', }, cardMedia: { - width: "100%", - height: "auto", + width: '100%', + height: 'auto', // paddingTop: "56.25%", // 16:9 }, cardContent: { flexGrow: 1, }, chipActions: { - display: "block", + display: 'block', }, chip: { - margin: "8px 0 3px 8px", + margin: '8px 0 3px 8px', }, extraMargin: { - marginTop: "15px", - marginBottom: "0", + marginTop: '15px', + marginBottom: '0', }, btn: { - textTransform: "none", + textTransform: 'none', }, root: { backgroundColor: theme.palette.primary.main, paddingTop: theme.spacing(3), paddingBottom: theme.spacing(3), - "& dt": { + '& dt': { marginTop: theme.spacing(2), }, - color: "#FFF", + color: '#FFF', }, paddingCls: { - paddingLeft: "10px", - paddingRight: "10px", + paddingLeft: '10px', + paddingRight: '10px', }, paddingClsxs: { padding: 0, }, iconSize: { - fontSize: "32px", + fontSize: '32px', }, text: { - color: "#000", + color: '#000', }, textHighlight: { - color: "#FF4C00", + color: '#FF4C00', }, avatarLarge: { width: theme.spacing(6), @@ -91,11 +91,11 @@ const useStyles = makeStyles(theme => ({ marginRight: theme.spacing(2), }, recommenderTitle: { - color: "#FF4C00", + color: '#FF4C00', }, recommenderDetail: { - color: "#9C9C9C", - textAlign: "center", + color: '#9C9C9C', + textAlign: 'center', }, })) export default function Recommendations({ recommendationsImages }) { @@ -123,15 +123,15 @@ export default function Recommendations({ recommendationsImages }) { const recommendationsImages = data.recommendationsImages const grayQuote = recommendationsImages.nodes.find( - node => node.childImageSharp.fixed.originalName === "grayQuote.png" + node => node.childImageSharp.fixed.originalName === 'grayQuote.png' ) const highQuote = recommendationsImages.nodes.find( - node => node.childImageSharp.fixed.originalName === "highQuote.png" + node => node.childImageSharp.fixed.originalName === 'highQuote.png' ) const topQuote = recommendationsImages.nodes.find( - node => node.childImageSharp.fixed.originalName === "topQuote.png" + node => node.childImageSharp.fixed.originalName === 'topQuote.png' ) return ( @@ -141,7 +141,7 @@ export default function Recommendations({ recommendationsImages }) { @@ -162,7 +162,7 @@ export default function Recommendations({ recommendationsImages }) { {recommendations.map((recommendation, index) => { - const recommenderFileName = recommendation["avatar"] + const recommenderFileName = recommendation['avatar'] const recommenderImage = recommendationsImages.nodes.find( node => node.childImageSharp.fixed.originalName === diff --git a/src/components/team.js b/src/components/team.js index c2ec080..5be0ce6 100644 --- a/src/components/team.js +++ b/src/components/team.js @@ -1,6 +1,6 @@ -import React from "react" -import { makeStyles } from "@material-ui/core/styles" -import { members } from "../data/teamData" +import React from 'react' +import { makeStyles } from '@material-ui/core/styles' +import { members } from '../data/teamData' import { Grid, Typography, @@ -9,10 +9,10 @@ import { Card, Box, CardContent, -} from "@material-ui/core" +} from '@material-ui/core' -import Img from "gatsby-image" -import { StaticQuery, graphql } from "gatsby" +import Img from 'gatsby-image' +import { StaticQuery, graphql } from 'gatsby' const useStyles = makeStyles(theme => ({ icon: { @@ -20,9 +20,9 @@ const useStyles = makeStyles(theme => ({ }, heroContent: { background: - "linear-gradient(180deg, rgba(255, 76, 0, 0.9) 0%, #FFD8C8 100%)", + 'linear-gradient(180deg, rgba(255, 76, 0, 0.9) 0%, #FFD8C8 100%)', padding: theme.spacing(10, 10, 5), - [theme.breakpoints.down("md")]: { + [theme.breakpoints.down('md')]: { padding: theme.spacing(10, 3, 10), }, }, @@ -34,53 +34,53 @@ const useStyles = makeStyles(theme => ({ paddingBottom: theme.spacing(8), }, card: { - height: "100%", - display: "flex", - flexDirection: "column", - borderRadius: "10px", + height: '100%', + display: 'flex', + flexDirection: 'column', + borderRadius: '10px', }, cardMedia: { - width: "100%", - height: "auto", + width: '100%', + height: 'auto', // paddingTop: "56.25%", // 16:9 }, cardContent: { flexGrow: 1, }, chipActions: { - display: "block", + display: 'block', }, chip: { - margin: "8px 0 3px 8px", + margin: '8px 0 3px 8px', }, extraMargin: { - marginTop: "15px", - marginBottom: "0", + marginTop: '15px', + marginBottom: '0', }, btn: { - textTransform: "none", + textTransform: 'none', }, root: { backgroundColor: theme.palette.primary.main, paddingTop: theme.spacing(3), paddingBottom: theme.spacing(3), - "& dt": { + '& dt': { marginTop: theme.spacing(2), }, - color: "#FFF", + color: '#FFF', }, paddingCls: { - paddingLeft: "10px", - paddingRight: "10px", + paddingLeft: '10px', + paddingRight: '10px', }, paddingClsxs: { padding: 0, }, iconSize: { - fontSize: "32px", + fontSize: '32px', }, text: { - color: "#FFFFFF", + color: '#FFFFFF', }, avatarLarge: { width: theme.spacing(16), @@ -89,10 +89,10 @@ const useStyles = makeStyles(theme => ({ }, avatarGrid: { - display: "flex", - flexDirection: "column", - alignItems: "center", - justifyContent: "center", + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', }, })) export default function Team() { @@ -122,7 +122,7 @@ export default function Team() { align="center" color="textPrimary" style={{ - color: "#FFFFFF", + color: '#FFFFFF', }} > @@ -139,7 +139,7 @@ export default function Team() { {/* End hero unit */} {members.map((member, index) => { - const memberFileName = member["avatar"] + const memberFileName = member['avatar'] const memberImage = data.teamImages.nodes.find( node => node.childImageSharp.fixed.originalName === memberFileName @@ -151,7 +151,7 @@ export default function Team() { @@ -189,7 +189,7 @@ export default function Team() { alignItems="center" flexDirection="column" style={{ - marginTop: "20px", + marginTop: '20px', }} > diff --git a/src/constants/index.js b/src/constants/index.js index 9e79aa6..227ea5e 100755 --- a/src/constants/index.js +++ b/src/constants/index.js @@ -1,6 +1,6 @@ /* eslint-disable import/prefer-default-export */ export const THEMES = { - LIGHT: "LIGHT", - ONE_DARK: "ONE_DARK", - UNICORN: "UNICORN", + LIGHT: 'LIGHT', + ONE_DARK: 'ONE_DARK', + UNICORN: 'UNICORN', } diff --git a/src/data/associations.js b/src/data/associations.js index 5f4360b..f410f15 100644 --- a/src/data/associations.js +++ b/src/data/associations.js @@ -1,22 +1,22 @@ export const associations = [ { - id: "1", - name: "Microsoft", - avatar: "microsoft.png", + id: '1', + name: 'Microsoft', + avatar: 'microsoft.png', }, { - id: "2", - name: "Google", - avatar: "google.png", + id: '2', + name: 'Google', + avatar: 'google.png', }, { - id: "3", - name: "Red Hat", - avatar: "redhat.png", + id: '3', + name: 'Red Hat', + avatar: 'redhat.png', }, { - id: "4", - name: "IBM", - avatar: "ibm.png", + id: '4', + name: 'IBM', + avatar: 'ibm.png', }, ] diff --git a/src/data/domains.js b/src/data/domains.js index 90f09b8..f18753c 100644 --- a/src/data/domains.js +++ b/src/data/domains.js @@ -1,32 +1,32 @@ export const domains = [ { - id: "0", - img: "mobile.png", - title: "Mobile Development", + id: '0', + img: 'mobile.png', + title: 'Mobile Development', }, { - id: "1", - img: "ai.png", - title: "Artificial Intelligence", + id: '1', + img: 'ai.png', + title: 'Artificial Intelligence', }, { - id: "2", - img: "ar.png", - title: "Virtual Reality", + id: '2', + img: 'ar.png', + title: 'Virtual Reality', }, { - id: "3", - img: "web.png", - title: "Web Development", + id: '3', + img: 'web.png', + title: 'Web Development', }, { - id: "4", - img: "python.png", - title: "Python Programming", + id: '4', + img: 'python.png', + title: 'Python Programming', }, { - id: "5", - img: "game.png", - title: "Game Programming", + id: '5', + img: 'game.png', + title: 'Game Programming', }, ] diff --git a/src/data/recommendations.js b/src/data/recommendations.js index e2cc6cd..89300c4 100644 --- a/src/data/recommendations.js +++ b/src/data/recommendations.js @@ -1,34 +1,34 @@ export const recommendations = [ { - id: "1", - name: "Gaurav Beriwal", - avatar: "gaurav.png", - title: "Father to 9yr Old", + id: '1', + name: 'Gaurav Beriwal', + avatar: 'gaurav.png', + title: 'Father to 9yr Old', text: - "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.", + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', }, { - id: "2", - name: "Gaurav Beriwal", - avatar: "gaurav.png", - title: "Father to 9yr Old", + id: '2', + name: 'Gaurav Beriwal', + avatar: 'gaurav.png', + title: 'Father to 9yr Old', text: - "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.", + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', }, { - id: "3", - name: "Gaurav Beriwal", - avatar: "gaurav.png", - title: "Father to 9yr Old", + id: '3', + name: 'Gaurav Beriwal', + avatar: 'gaurav.png', + title: 'Father to 9yr Old', text: - "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.", + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', }, { - id: "4", - name: "Gaurav Beriwal", - avatar: "gaurav.png", - title: "Father to 9yr Old", + id: '4', + name: 'Gaurav Beriwal', + avatar: 'gaurav.png', + title: 'Father to 9yr Old', text: - "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.", + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', }, ] diff --git a/src/data/teamData.js b/src/data/teamData.js index f52dc7b..d044d09 100644 --- a/src/data/teamData.js +++ b/src/data/teamData.js @@ -1,56 +1,56 @@ export const members = [ { - id: "1", - name: "Anuj Garg", - avatar: "anuj.png", - linkedin: "https://www.linkedin.com/in/keenwarrior/", - title: "Founder", - line1: "Mentor @ Code For Cause", - line2: "GSoc Admin, GCI Admin", + id: '1', + name: 'Anuj Garg', + avatar: 'anuj.png', + linkedin: 'https://www.linkedin.com/in/keenwarrior/', + title: 'Founder', + line1: 'Mentor @ Code For Cause', + line2: 'GSoc Admin, GCI Admin', }, { - id: "2", - name: "Gaurav Beriwal", - avatar: "gaurav.png", - linkedin: "https://www.linkedin.com/in/gauravberiwal/", - title: "Founder", - line1: "Mentor @ Code For Cause", - line2: "GSoc Admin, GCI Admin", + id: '2', + name: 'Gaurav Beriwal', + avatar: 'gaurav.png', + linkedin: 'https://www.linkedin.com/in/gauravberiwal/', + title: 'Founder', + line1: 'Mentor @ Code For Cause', + line2: 'GSoc Admin, GCI Admin', }, { - id: "3", - name: "Kunal Kushwaha", - avatar: "kunal.png", - linkedin: "https://www.linkedin.com/in/kunal-kushwaha/", - title: "Founder", - line1: "Mentor @ Code For Cause", - line2: "GSoc Admin, GCI Admin", + id: '3', + name: 'Kunal Kushwaha', + avatar: 'kunal.png', + linkedin: 'https://www.linkedin.com/in/kunal-kushwaha/', + title: 'Founder', + line1: 'Mentor @ Code For Cause', + line2: 'GSoc Admin, GCI Admin', }, { - id: "4", - name: "Ganga Chaturvedi", - avatar: "ganga.png", - linkedin: "https://www.linkedin.com/in/gangachatrvedi/", - title: "Founder", - line1: "Mentor @ Code For Cause", - line2: "GSoc Admin, GCI Admin", + id: '4', + name: 'Ganga Chaturvedi', + avatar: 'ganga.png', + linkedin: 'https://www.linkedin.com/in/gangachatrvedi/', + title: 'Founder', + line1: 'Mentor @ Code For Cause', + line2: 'GSoc Admin, GCI Admin', }, { - id: "5", - name: "Ekta Mishra", - avatar: "ekta.png", - linkedin: "https://www.linkedin.com/in/darecoder/", - title: "Founder", - line1: "Mentor @ Code For Cause", - line2: "GSoc Admin, GCI Admin", + id: '5', + name: 'Ekta Mishra', + avatar: 'ekta.png', + linkedin: 'https://www.linkedin.com/in/darecoder/', + title: 'Founder', + line1: 'Mentor @ Code For Cause', + line2: 'GSoc Admin, GCI Admin', }, { - id: "6", - name: "Bharat Kumar", - avatar: "bharat.png", - linkedin: "https://www.linkedin.com/in/bharatbbhardwaj/", - title: "Founder", - line1: "Mentor @ Code For Cause", - line2: "GSoc Admin, GCI Admin", + id: '6', + name: 'Bharat Kumar', + avatar: 'bharat.png', + linkedin: 'https://www.linkedin.com/in/bharatbbhardwaj/', + title: 'Founder', + line1: 'Mentor @ Code For Cause', + line2: 'GSoc Admin, GCI Admin', }, ] diff --git a/src/layouts/CourseLayout.js b/src/layouts/CourseLayout.js index 909d18b..f7d8a5e 100644 --- a/src/layouts/CourseLayout.js +++ b/src/layouts/CourseLayout.js @@ -1,9 +1,9 @@ // src/layouts/index.js -import Header from "../components/header" -import Footer from "../components/footer" -import CTA from "../components/cta" -import React from "react" +import Header from '../components/header' +import Footer from '../components/footer' +import CTA from '../components/cta' +import React from 'react' const CourseLayout = ({ data }) => ( diff --git a/src/layouts/HomeLayout.js b/src/layouts/HomeLayout.js index 2f05c81..223166d 100644 --- a/src/layouts/HomeLayout.js +++ b/src/layouts/HomeLayout.js @@ -1,18 +1,18 @@ // src/layouts/index.js -import Header from "../components/header" -import Footer from "../components/footer" -import Hero from "../components/hero" -import CTA from "../components/cta" -import Team from "../components/team" -import Promoters from "../components/promoters" -import Courses from "../components/courses" +import Header from '../components/header' +import Footer from '../components/footer' +import Hero from '../components/hero' +import CTA from '../components/cta' +import Team from '../components/team' +import Promoters from '../components/promoters' +import Courses from '../components/courses' // import WatchVideosView from "../components/WatchVideos"; // import CTA from "../components/cta" -import React from "react" +import React from 'react' // import { graphql } from "gatsby" -import Principles from "../components/priciples" -import Recommendations from "../components/recommendations" +import Principles from '../components/priciples' +import Recommendations from '../components/recommendations' const HomeLayout = ({ data }) => ( diff --git a/src/pages/courses/augmentedreality.js b/src/pages/courses/augmentedreality.js index 524900c..a96cf11 100644 --- a/src/pages/courses/augmentedreality.js +++ b/src/pages/courses/augmentedreality.js @@ -1,5 +1,5 @@ -import React from "react" -import Domains from "../../components/domains" +import React from 'react' +import Domains from '../../components/domains' export default function Home({ data }) { return diff --git a/src/pages/index.js b/src/pages/index.js index b2760d6..c38267c 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -1,18 +1,17 @@ -import React, { useState, useEffect, Fragment } from "react" -import CssBaseline from "@material-ui/core/CssBaseline" -import { BrowserRouter } from "react-router-dom" -import { Helmet } from "react-helmet" -import favicon from "../../static/favicon.ico" -import loadergif from "../../static/loading-opaque.gif" +import React, { useState, useEffect, Fragment } from 'react' +import CssBaseline from '@material-ui/core/CssBaseline' +import { BrowserRouter } from 'react-router-dom' +import { Helmet } from 'react-helmet' +import favicon from '../../static/favicon.ico' +import loadergif from '../../static/loading-opaque.gif' -import { ThemeProvider } from "@material-ui/core" -import { createTheme } from "../theme" -import HomeLayout from "../layouts/HomeLayout" - -import { library } from "@fortawesome/fontawesome-svg-core" -import { fab } from "@fortawesome/free-brands-svg-icons" -import { faEnvelope } from "@fortawesome/free-solid-svg-icons" +import { ThemeProvider } from '@material-ui/core' +import { createTheme } from '../theme' +import HomeLayout from '../layouts/HomeLayout' +import { library } from '@fortawesome/fontawesome-svg-core' +import { fab } from '@fortawesome/free-brands-svg-icons' +import { faEnvelope } from '@fortawesome/free-solid-svg-icons' library.add(fab, faEnvelope) @@ -24,7 +23,7 @@ function Loader() { ... ) diff --git a/src/pages/sample.js b/src/pages/sample.js index e2a5a99..b59a6e5 100644 --- a/src/pages/sample.js +++ b/src/pages/sample.js @@ -1,22 +1,21 @@ // Import FirebaseAuth and firebase. -import React from 'react'; -import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth'; -import firebase from 'firebase'; +import React from 'react' +import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth' +import firebase from 'firebase' // Configure Firebase. const config = { apiKey: 'AIzaSyAcw_hxyjWeUJHV-bdLZa5_bAJeLG69i00', authDomain: 'codingjuniororg.firebaseapp.com', -}; +} -firebase.initializeApp(config); +firebase.initializeApp(config) export default class SignInScreen extends React.Component { - // The component's Local state. state = { - isSignedIn: false // Local signed-in state. - }; + isSignedIn: false, // Local signed-in state. + } // Configure FirebaseUI. uiConfig = { @@ -25,24 +24,24 @@ export default class SignInScreen extends React.Component { // We will display Google and Facebook as auth providers. signInOptions: [ firebase.auth.GoogleAuthProvider.PROVIDER_ID, - firebase.auth.FacebookAuthProvider.PROVIDER_ID + firebase.auth.FacebookAuthProvider.PROVIDER_ID, ], callbacks: { // Avoid redirects after sign-in. - signInSuccessWithAuthResult: () => false - } - }; + signInSuccessWithAuthResult: () => false, + }, + } // Listen to the Firebase Auth state and set the local state. componentDidMount() { - this.unregisterAuthObserver = firebase.auth().onAuthStateChanged( - (user) => this.setState({isSignedIn: !!user}) - ); + this.unregisterAuthObserver = firebase + .auth() + .onAuthStateChanged(user => this.setState({ isSignedIn: !!user })) } - + // Make sure we un-register Firebase observers when the component unmounts. componentWillUnmount() { - this.unregisterAuthObserver(); + this.unregisterAuthObserver() } render() { @@ -51,16 +50,22 @@ export default class SignInScreen extends React.Component {

My App

Please sign-in:

- +
- ); + ) } return (

My App

-

Welcome {firebase.auth().currentUser.displayName}! You are now signed-in!

+

+ Welcome {firebase.auth().currentUser.displayName}! You are now + signed-in! +

firebase.auth().signOut()}>Sign-out
- ); + ) } -} \ No newline at end of file +} diff --git a/src/theme/index.js b/src/theme/index.js index 529a422..cf0b5f5 100755 --- a/src/theme/index.js +++ b/src/theme/index.js @@ -1,12 +1,12 @@ /* eslint-disable no-console */ /* eslint-disable import/prefer-default-export */ -import _ from "lodash" -import { colors, createMuiTheme, responsiveFontSizes } from "@material-ui/core" -import typography from "./typography" -import { softShadows, strongShadows } from "./shadows" -import { THEMES } from "../constants" +import _ from 'lodash' +import { colors, createMuiTheme, responsiveFontSizes } from '@material-ui/core' +import typography from './typography' +import { softShadows, strongShadows } from './shadows' +import { THEMES } from '../constants' -import Montserrat from '../fonts/Montserrat-Regular.ttf'; +import Montserrat from '../fonts/Montserrat-Regular.ttf' const montserrat = { fontFamily: 'Montserrat', @@ -19,10 +19,10 @@ const montserrat = { `, unicodeRange: 'U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF', -}; +} const baseConfig = { - direction: "ltr", + direction: 'ltr', typography, overrides: { MuiCssBaseline: { @@ -33,7 +33,7 @@ const baseConfig = { MuiLinearProgress: { root: { borderRadius: 3, - overflow: "hidden", + overflow: 'hidden', }, }, MuiListItemIcon: { @@ -43,7 +43,7 @@ const baseConfig = { }, MuiChip: { root: { - backgroundColor: "rgba(0,0,0,0.075)", + backgroundColor: 'rgba(0,0,0,0.075)', }, }, }, @@ -54,7 +54,7 @@ const themeConfig = { overrides: { MuiInputBase: { input: { - "&::placeholder": { + '&::placeholder': { opacity: 1, color: colors.blueGrey[600], }, @@ -62,20 +62,20 @@ const themeConfig = { }, }, palette: { - type: "light", + type: 'light', action: { active: colors.blueGrey[600], //small icons }, background: { default: colors.common.white, - dark: "#f4f6f8", + dark: '#f4f6f8', paper: colors.common.white, // background }, primary: { main: colors.indigo[600], // for header and loader }, secondary: { - main: "#5850EC", // for button and selected + main: '#5850EC', // for button and selected }, text: { // for text classes @@ -88,7 +88,7 @@ const themeConfig = { export function createTheme(settings = {}) { let theme = createMuiTheme( - _.merge({}, baseConfig, themeConfig, { direction: "ltr" }) + _.merge({}, baseConfig, themeConfig, { direction: 'ltr' }) ) theme = responsiveFontSizes(theme) diff --git a/src/theme/shadows.js b/src/theme/shadows.js index 18f40d0..431ec26 100755 --- a/src/theme/shadows.js +++ b/src/theme/shadows.js @@ -1,55 +1,55 @@ export const softShadows = [ - "none", - "0 0 0 1px rgba(63,63,68,0.05), 0 1px 2px 0 rgba(63,63,68,0.15)", - "0 0 1px 0 rgba(0,0,0,0.31), 0 2px 2px -2px rgba(0,0,0,0.25)", - "0 0 1px 0 rgba(0,0,0,0.31), 0 3px 4px -2px rgba(0,0,0,0.25)", - "0 0 1px 0 rgba(0,0,0,0.31), 0 3px 4px -2px rgba(0,0,0,0.25)", - "0 0 1px 0 rgba(0,0,0,0.31), 0 4px 6px -2px rgba(0,0,0,0.25)", - "0 0 1px 0 rgba(0,0,0,0.31), 0 4px 6px -2px rgba(0,0,0,0.25)", - "0 0 1px 0 rgba(0,0,0,0.31), 0 4px 8px -2px rgba(0,0,0,0.25)", - "0 0 1px 0 rgba(0,0,0,0.31), 0 5px 8px -2px rgba(0,0,0,0.25)", - "0 0 1px 0 rgba(0,0,0,0.31), 0 6px 12px -4px rgba(0,0,0,0.25)", - "0 0 1px 0 rgba(0,0,0,0.31), 0 7px 12px -4px rgba(0,0,0,0.25)", - "0 0 1px 0 rgba(0,0,0,0.31), 0 6px 16px -4px rgba(0,0,0,0.25)", - "0 0 1px 0 rgba(0,0,0,0.31), 0 7px 16px -4px rgba(0,0,0,0.25)", - "0 0 1px 0 rgba(0,0,0,0.31), 0 8px 18px -8px rgba(0,0,0,0.25)", - "0 0 1px 0 rgba(0,0,0,0.31), 0 9px 18px -8px rgba(0,0,0,0.25)", - "0 0 1px 0 rgba(0,0,0,0.31), 0 10px 20px -8px rgba(0,0,0,0.25)", - "0 0 1px 0 rgba(0,0,0,0.31), 0 11px 20px -8px rgba(0,0,0,0.25)", - "0 0 1px 0 rgba(0,0,0,0.31), 0 12px 22px -8px rgba(0,0,0,0.25)", - "0 0 1px 0 rgba(0,0,0,0.31), 0 13px 22px -8px rgba(0,0,0,0.25)", - "0 0 1px 0 rgba(0,0,0,0.31), 0 14px 24px -8px rgba(0,0,0,0.25)", - "0 0 1px 0 rgba(0,0,0,0.31), 0 16px 28px -8px rgba(0,0,0,0.25)", - "0 0 1px 0 rgba(0,0,0,0.31), 0 18px 30px -8px rgba(0,0,0,0.25)", - "0 0 1px 0 rgba(0,0,0,0.31), 0 20px 32px -8px rgba(0,0,0,0.25)", - "0 0 1px 0 rgba(0,0,0,0.31), 0 22px 34px -8px rgba(0,0,0,0.25)", - "0 0 1px 0 rgba(0,0,0,0.31), 0 24px 36px -8px rgba(0,0,0,0.25)", + 'none', + '0 0 0 1px rgba(63,63,68,0.05), 0 1px 2px 0 rgba(63,63,68,0.15)', + '0 0 1px 0 rgba(0,0,0,0.31), 0 2px 2px -2px rgba(0,0,0,0.25)', + '0 0 1px 0 rgba(0,0,0,0.31), 0 3px 4px -2px rgba(0,0,0,0.25)', + '0 0 1px 0 rgba(0,0,0,0.31), 0 3px 4px -2px rgba(0,0,0,0.25)', + '0 0 1px 0 rgba(0,0,0,0.31), 0 4px 6px -2px rgba(0,0,0,0.25)', + '0 0 1px 0 rgba(0,0,0,0.31), 0 4px 6px -2px rgba(0,0,0,0.25)', + '0 0 1px 0 rgba(0,0,0,0.31), 0 4px 8px -2px rgba(0,0,0,0.25)', + '0 0 1px 0 rgba(0,0,0,0.31), 0 5px 8px -2px rgba(0,0,0,0.25)', + '0 0 1px 0 rgba(0,0,0,0.31), 0 6px 12px -4px rgba(0,0,0,0.25)', + '0 0 1px 0 rgba(0,0,0,0.31), 0 7px 12px -4px rgba(0,0,0,0.25)', + '0 0 1px 0 rgba(0,0,0,0.31), 0 6px 16px -4px rgba(0,0,0,0.25)', + '0 0 1px 0 rgba(0,0,0,0.31), 0 7px 16px -4px rgba(0,0,0,0.25)', + '0 0 1px 0 rgba(0,0,0,0.31), 0 8px 18px -8px rgba(0,0,0,0.25)', + '0 0 1px 0 rgba(0,0,0,0.31), 0 9px 18px -8px rgba(0,0,0,0.25)', + '0 0 1px 0 rgba(0,0,0,0.31), 0 10px 20px -8px rgba(0,0,0,0.25)', + '0 0 1px 0 rgba(0,0,0,0.31), 0 11px 20px -8px rgba(0,0,0,0.25)', + '0 0 1px 0 rgba(0,0,0,0.31), 0 12px 22px -8px rgba(0,0,0,0.25)', + '0 0 1px 0 rgba(0,0,0,0.31), 0 13px 22px -8px rgba(0,0,0,0.25)', + '0 0 1px 0 rgba(0,0,0,0.31), 0 14px 24px -8px rgba(0,0,0,0.25)', + '0 0 1px 0 rgba(0,0,0,0.31), 0 16px 28px -8px rgba(0,0,0,0.25)', + '0 0 1px 0 rgba(0,0,0,0.31), 0 18px 30px -8px rgba(0,0,0,0.25)', + '0 0 1px 0 rgba(0,0,0,0.31), 0 20px 32px -8px rgba(0,0,0,0.25)', + '0 0 1px 0 rgba(0,0,0,0.31), 0 22px 34px -8px rgba(0,0,0,0.25)', + '0 0 1px 0 rgba(0,0,0,0.31), 0 24px 36px -8px rgba(0,0,0,0.25)', ] export const strongShadows = [ - "none", - "0 0 1px 0 rgba(0,0,0,0.70), 0 3px 4px -2px rgba(0,0,0,0.50)", - "0 0 1px 0 rgba(0,0,0,0.70), 0 2px 2px -2px rgba(0,0,0,0.50)", - "0 0 1px 0 rgba(0,0,0,0.70), 0 3px 4px -2px rgba(0,0,0,0.50)", - "0 0 1px 0 rgba(0,0,0,0.70), 0 3px 4px -2px rgba(0,0,0,0.50)", - "0 0 1px 0 rgba(0,0,0,0.70), 0 4px 6px -2px rgba(0,0,0,0.50)", - "0 0 1px 0 rgba(0,0,0,0.70), 0 4px 6px -2px rgba(0,0,0,0.50)", - "0 0 1px 0 rgba(0,0,0,0.70), 0 4px 8px -2px rgba(0,0,0,0.50)", - "0 0 1px 0 rgba(0,0,0,0.70), 0 5px 8px -2px rgba(0,0,0,0.50)", - "0 0 1px 0 rgba(0,0,0,0.70), 0 6px 12px -4px rgba(0,0,0,0.50)", - "0 0 1px 0 rgba(0,0,0,0.70), 0 7px 12px -4px rgba(0,0,0,0.50)", - "0 0 1px 0 rgba(0,0,0,0.70), 0 6px 16px -4px rgba(0,0,0,0.50)", - "0 0 1px 0 rgba(0,0,0,0.70), 0 7px 16px -4px rgba(0,0,0,0.50)", - "0 0 1px 0 rgba(0,0,0,0.70), 0 8px 18px -8px rgba(0,0,0,0.50)", - "0 0 1px 0 rgba(0,0,0,0.70), 0 9px 18px -8px rgba(0,0,0,0.50)", - "0 0 1px 0 rgba(0,0,0,0.70), 0 10px 20px -8px rgba(0,0,0,0.50)", - "0 0 1px 0 rgba(0,0,0,0.70), 0 11px 20px -8px rgba(0,0,0,0.50)", - "0 0 1px 0 rgba(0,0,0,0.70), 0 12px 22px -8px rgba(0,0,0,0.50)", - "0 0 1px 0 rgba(0,0,0,0.70), 0 13px 22px -8px rgba(0,0,0,0.50)", - "0 0 1px 0 rgba(0,0,0,0.70), 0 14px 24px -8px rgba(0,0,0,0.50)", - "0 0 1px 0 rgba(0,0,0,0.70), 0 16px 28px -8px rgba(0,0,0,0.50)", - "0 0 1px 0 rgba(0,0,0,0.70), 0 18px 30px -8px rgba(0,0,0,0.50)", - "0 0 1px 0 rgba(0,0,0,0.70), 0 20px 32px -8px rgba(0,0,0,0.50)", - "0 0 1px 0 rgba(0,0,0,0.70), 0 22px 34px -8px rgba(0,0,0,0.50)", - "0 0 1px 0 rgba(0,0,0,0.70), 0 24px 36px -8px rgba(0,0,0,0.50)", + 'none', + '0 0 1px 0 rgba(0,0,0,0.70), 0 3px 4px -2px rgba(0,0,0,0.50)', + '0 0 1px 0 rgba(0,0,0,0.70), 0 2px 2px -2px rgba(0,0,0,0.50)', + '0 0 1px 0 rgba(0,0,0,0.70), 0 3px 4px -2px rgba(0,0,0,0.50)', + '0 0 1px 0 rgba(0,0,0,0.70), 0 3px 4px -2px rgba(0,0,0,0.50)', + '0 0 1px 0 rgba(0,0,0,0.70), 0 4px 6px -2px rgba(0,0,0,0.50)', + '0 0 1px 0 rgba(0,0,0,0.70), 0 4px 6px -2px rgba(0,0,0,0.50)', + '0 0 1px 0 rgba(0,0,0,0.70), 0 4px 8px -2px rgba(0,0,0,0.50)', + '0 0 1px 0 rgba(0,0,0,0.70), 0 5px 8px -2px rgba(0,0,0,0.50)', + '0 0 1px 0 rgba(0,0,0,0.70), 0 6px 12px -4px rgba(0,0,0,0.50)', + '0 0 1px 0 rgba(0,0,0,0.70), 0 7px 12px -4px rgba(0,0,0,0.50)', + '0 0 1px 0 rgba(0,0,0,0.70), 0 6px 16px -4px rgba(0,0,0,0.50)', + '0 0 1px 0 rgba(0,0,0,0.70), 0 7px 16px -4px rgba(0,0,0,0.50)', + '0 0 1px 0 rgba(0,0,0,0.70), 0 8px 18px -8px rgba(0,0,0,0.50)', + '0 0 1px 0 rgba(0,0,0,0.70), 0 9px 18px -8px rgba(0,0,0,0.50)', + '0 0 1px 0 rgba(0,0,0,0.70), 0 10px 20px -8px rgba(0,0,0,0.50)', + '0 0 1px 0 rgba(0,0,0,0.70), 0 11px 20px -8px rgba(0,0,0,0.50)', + '0 0 1px 0 rgba(0,0,0,0.70), 0 12px 22px -8px rgba(0,0,0,0.50)', + '0 0 1px 0 rgba(0,0,0,0.70), 0 13px 22px -8px rgba(0,0,0,0.50)', + '0 0 1px 0 rgba(0,0,0,0.70), 0 14px 24px -8px rgba(0,0,0,0.50)', + '0 0 1px 0 rgba(0,0,0,0.70), 0 16px 28px -8px rgba(0,0,0,0.50)', + '0 0 1px 0 rgba(0,0,0,0.70), 0 18px 30px -8px rgba(0,0,0,0.50)', + '0 0 1px 0 rgba(0,0,0,0.70), 0 20px 32px -8px rgba(0,0,0,0.50)', + '0 0 1px 0 rgba(0,0,0,0.70), 0 22px 34px -8px rgba(0,0,0,0.50)', + '0 0 1px 0 rgba(0,0,0,0.70), 0 24px 36px -8px rgba(0,0,0,0.50)', ] diff --git a/src/theme/typography.js b/src/theme/typography.js index 1ea11b4..77dbc99 100755 --- a/src/theme/typography.js +++ b/src/theme/typography.js @@ -3,34 +3,34 @@ export default { h1: { fontWeight: 600, fontSize: 40, - letterSpacing: "-0.24px", + letterSpacing: '-0.24px', }, h2: { fontWeight: 600, fontSize: 30, - letterSpacing: "-0.24px", + letterSpacing: '-0.24px', }, h3: { fontWeight: 600, fontSize: 24, - letterSpacing: "-0.06px", + letterSpacing: '-0.06px', }, h4: { fontWeight: 500, fontSize: 20, - letterSpacing: "-0.06px", + letterSpacing: '-0.06px', }, h5: { fontWeight: 500, fontSize: 16, - letterSpacing: "-0.05px", + letterSpacing: '-0.05px', }, h6: { fontWeight: 500, fontSize: 14, - letterSpacing: "-0.05px", + letterSpacing: '-0.05px', }, overline: { fontWeight: 500, }, -} \ No newline at end of file +}