archive.codeforcause.org/src/views/pages/common/Apply.js at 657c00dfb999fccbf39104115b9185e5dcde56a3 · codeforcauseorg/archive.codeforcause.org · GitHub

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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
import React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';

import {
  Box,
  Grid,
  Typography,
  makeStyles,
  TextField,
  Button
} from '@material-ui/core';

const useStyles = makeStyles(theme => ({
  root: {
    minHeight: '350px',
    color: '#FFF',
    padding: '100px 70px',
    [theme.breakpoints.down('md')]: {
      paddingLeft: 15,
      paddingRight: 15
    }
  },
  main: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    padding: '0px',
    color: '#FFF'
  },
  btn: {
    backgroundColor: '#A60000',
    color: '#ffffff',
    textTransform: 'capitalize',
    [theme.breakpoints.down('sm')]: {
      width: '100%'
    },
    '&:hover': {
      backgroundColor: 'rgba(166, 0, 0, 0.8)'
    }
  },
  applyleft: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center'
  },
  textDetails: {
    '& .MuiOutlinedInput-root': {
      '& fieldset': {
        borderColor: 'rgba(255, 255, 255, 0.2)'
      },
      '&:hover fieldset': {
        borderColor: 'rgba(255, 255, 255, 0.4)'
      },
      '&.Mui-focused fieldset': {
        borderColor: 'rgba(255, 255, 255, 0.6)'
      }
    }
  }
}));

function Apply({ className, ...rest }) {
  const classes = useStyles();

  return (
    <div
      className={clsx(classes.root, className)}
      style={{
        backgroundImage: 'url("/static/events/apply.png")',
        backgroundSize: 'cover',
        backgroundRepeat: 'no-repeat'
      }}
      {...rest}
    >
      <Grid container maxwidth="lg">
        <Grid
          item
          lg={12}
          md={12}
          sm={12}
          xs={12}
          className={classes.applyleft}
        >
          <div className={classes.main}>
            <Typography
              variant="h3"
              style={{
                marginBottom: '24px'
              }}
            >
              Tell Us What You Want To Learn Next
            </Typography>
            <TextField
              className={classes.textDetails}
              multiline
              variant="outlined"
              rows={5}
              style={{
                minWidth: '500px',
                background: 'rgba(255, 255, 255, 0.8)',
                borderRadius: '5px',
                color: 'white'
              }}
            />
            <Box mt={3}>
              <Button color="secondary" size="large" variant="contained">
                Submit
              </Button>
            </Box>
          </div>
        </Grid>
      </Grid>
    </div>
  );
}

Apply.propTypes = {
  className: PropTypes.string
};

export default Apply;