diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/ContentSection/ContentSection.js | 14 | ||||
| -rw-r--r-- | src/index.js | 8 | ||||
| -rw-r--r-- | src/pages/Contribute/Contribute.js | 95 |
3 files changed, 114 insertions, 3 deletions
diff --git a/src/components/ContentSection/ContentSection.js b/src/components/ContentSection/ContentSection.js index d5b9340..fc431f3 100644 --- a/src/components/ContentSection/ContentSection.js +++ b/src/components/ContentSection/ContentSection.js @@ -9,8 +9,18 @@ import { const useStyles = makeStyles(theme => ({ content: { - padding: theme.spacing(2), - } + padding: theme.spacing(0, 2, 1, 2), + marginBottom: theme.spacing(1), + + '& a': { + color: theme.palette.secondary.light, + }, + '& .MuiButton-root': { + color: theme.palette.background.paper, + margin: theme.spacing(2, 2, 2, 0), + fontWeight: 'bold', + }, + }, })); const ContentSection = ({ sectionName, children }) => { diff --git a/src/index.js b/src/index.js index b14708e..f9d7e32 100644 --- a/src/index.js +++ b/src/index.js @@ -8,6 +8,7 @@ import theme from "./theme"; import Header from './components/Header/Header'; import Timer from "./pages/Timer/Timer"; import Scoreboard from "./pages/Scoreboard/Scoreboard"; +import Contribute from "./pages/Contribute/Contribute"; const App = () => { @@ -24,8 +25,13 @@ const App = () => { setRecentSolutions={setRecentSolutions} /> ); + case 'scoreboard': - return (<Scoreboard/>); + return (<Scoreboard />); + + case 'contribute': + return (<Contribute />); + default: return ( <p> diff --git a/src/pages/Contribute/Contribute.js b/src/pages/Contribute/Contribute.js new file mode 100644 index 0000000..b837021 --- /dev/null +++ b/src/pages/Contribute/Contribute.js @@ -0,0 +1,95 @@ +import React from 'react'; + +import { + Typography, + Link, + Button, + makeStyles, +} from "@material-ui/core"; + +import Window from "../../components/Window/Window"; +import ContentSection from "../../components/ContentSection/ContentSection"; + + +const useStyles = makeStyles(theme => ({ + mono: { + padding: theme.spacing(4), + } +})); + + +const Contribute = () => { + const classes = useStyles(); + + return ( + <Window type="mono"> + <div className={classes.mono}> + <ContentSection sectionName="Thank You for using ChronoCube!"> + <Typography> + <p> + ChronoCube is an Open-Source application, and we welcome anyone who desires to help our project! + </p> + </Typography> + </ContentSection> + <ContentSection sectionName="Technology stack"> + <Typography> + <p> We only use modern and most relevant technologies to achieve the best results! </p> + <p> + <ul> + <li><Typography><a href="#"> + Django REST Framework + </a></Typography></li> + <li><Typography><a href="#"> + React.js + </a></Typography></li> + <li><Typography><a href="#"> + Material UI components + </a></Typography></li> + </ul> + <Typography> Special thanks to other Open-Source projects which made ChronoCube possible: </Typography> + <ul> + <li><Typography><a href="#"> + react-window + </a></Typography></li> + <li><Typography><a href="#"> + react-virtualized-auto-sizer + </a></Typography></li> + </ul> + </p> + </Typography> + </ContentSection> + <ContentSection sectionName="How can I contribute to the project?"> + <Typography> + <p> Thank You for considering helping our project! </p> + <p> + All the development process is being tracked on + the <a href="https://github.com/users/Eug-VS/projects/3">KanBan board</a>. + You can always check it to see what is the current state of the project. + To contribute your code, fork our repository and then open + a <a href="https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/about-pull-requests"> + Pull Request</a>. We will carefully review and, hopefully, accept it! + If you are unfamiliar with this kind of workflow, we recommend + reading <a href="https://github.com/features/project-management/">GitHub guidelines</a>. + </p> + <p> + We always welcome newcomers! If you are unfamiliar with certain technologies or even with the + development in general, it is great time to start learning something new! + Our community will kindly assist every your step, and with us you can easily become + highly-evaluated developer! + </p> + </Typography> + <Button variant="contained" color="secondary" href="https://github.com/Eug-VS/chrono-cube/issues/new"> + Suggest feature + </Button> + <Button variant="contained" color="secondary" href="https://github.com/Eug-VS/chrono-cube/issues/new"> + Report a bug + </Button> + </ContentSection> + </div> + </Window> + ); + +}; + + +export default Contribute; |