All files / src/pages/SearchProjects HelpModal.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
 
 
 
 
 
 
 
 
 
61x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
61x
112x
 
112x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React from 'react';
import Box from '@material-ui/core/Box';
import Modal from '@material-ui/core/Modal';
import Typography from '@material-ui/core/Typography';
import CloseIcon from '@material-ui/icons/Close';
import { makeStyles } from '@material-ui/styles';
 
import Link from '../../components/common/Link';
 
const useStyles = makeStyles((theme) => ({
  close: {
    '&:hover': {
      cursor: 'pointer',
    },
  },
  searchTips: {
    margin: '20rem auto',
    padding: theme.spacing(3),
    backgroundColor: theme.palette.background.default,
    '& h4': {
      textAlign: 'center',
      color: theme.palette.secondary.dark,
    },
    '& p': {
      color: theme.palette.primary.main,
    },
    '& a': {
      color: theme.palette.secondary.light,
    },
    '& a:hover': {
      cursor: 'pointer',
    },
    '& svg': {
      float: 'right',
    },
    [theme.breakpoints.up('md')]: {
      height: '22rem',
      width: '50vw',
    },
    [theme.breakpoints.down('md')]: {
      height: '24rem',
      width: '60vw',
    },
    [theme.breakpoints.down('sm')]: {
      height: '26rem',
      width: '70vw',
    },
    [theme.breakpoints.down('xs')]: {
      height: '28rem',
      width: '90vw',
    },
  },
}));
 
const HelpModal = ({ modalOpen, onClose }) => {
  const classes = useStyles();
 
  return (
    <Modal aria-labelledby='search-tips-title' className={classes.modal} open={modalOpen} onBackdropClick={onClose}>
      <Box className={classes.searchTips} data-cy='search-tips'>
        <Typography variant='h4' id='search-tips-title'>
          Search Tips
          <CloseIcon className={classes.close} onClick={onClose} />
        </Typography>
        <br />
        <br />
        <Typography variant='body2'>Need more search results?</Typography>
        <Typography variant='body1'>
          The repository search uses &apos;&amp;&apos; for multiple search terms. In order to get more results try reducing the number of search terms.
        </Typography>
        <br />
        <Typography variant='body2'>Want to search outside of the Civic Tech Index?</Typography>
        <Typography variant='body1'>
          All searches from this page include the tag &apos;civictechindex&apos;. Go to <a href='https://github.com/search'>GitHub’s repository search tool</a> to search
          outside of the civictechindex.
        </Typography>
        <br />
        <Typography variant='body2'>Don&apos;t see your project repository in the search results?</Typography>
        <Typography variant='body1'>
          Use the{' '}
          <Link to='/join-index' underline='always'>
            tag generator tool
          </Link>{' '}
          to add your project to the Civic Tech Index.
        </Typography>
      </Box>
    </Modal>
  );
};
 
export default HelpModal;