Skip to content

Commit

Permalink
Merge pull request #1393 from hackforla/1347-thematic-coloring-of-con…
Browse files Browse the repository at this point in the history 
…tent-pages-7-v2-contact

#7 v2 Contact
  • Loading branch information
@edwinjue
edwinjue authored Oct 7, 2022
2 parents 979ea61 + 7107c13 commit 71359f9
Show file tree
Hide file tree
Showing 4 changed files with 129 additions and 130 deletions.
11 changes: 7 additions & 4 deletions client/components/contact/Contact.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from 'react';
import { ToastContainer } from 'react-toastify';
import ContactImage from './ContactImage';
import TextHeading from '@components/common/TextHeading';
import ContentBody from '@components/common/ContentBody';
import ContactIntro from './ContactIntro';
import ContactForm from './ContactForm';

Expand All @@ -22,9 +23,11 @@ const Contact = () => (
/>
</div>
<div>
<ContactImage>Contact Us</ContactImage>
<ContactIntro />
<ContactForm />
<TextHeading>Contact Us</TextHeading>
<ContentBody maxWidth="sm">
<ContactIntro />
<ContactForm />
</ContentBody>
</div>
</>
);
Expand Down
195 changes: 88 additions & 107 deletions client/components/contact/ContactForm.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,22 +3,12 @@ import { useDispatch, useSelector } from 'react-redux';
import { sendGitRequest } from '@reducers/data';
import { showFeedbackSuccess, setErrorModal } from '@reducers/ui';
import { toast } from 'react-toastify';
import {
Container,
Grid,
Button,
TextField,
CircularProgress,
makeStyles,
} from '@material-ui/core';
import Grid from '@material-ui/core/Grid';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import CircularProgress from '@material-ui/core/CircularProgress';
import 'react-toastify/dist/ReactToastify.css';

const useStyles = makeStyles(theme => ({
footer: {
height: theme.footer.height,
},
}));

const initialFormValues = {
firstName: '',
lastName: '',
Expand Down Expand Up @@ -46,8 +36,6 @@ const toastEmitterSettings = {
};

const ContactForm = () => {
const classes = useStyles();

const dispatch = useDispatch();

// mapStateToProps equivalent.
Expand Down Expand Up @@ -172,102 +160,95 @@ const ContactForm = () => {
validateForm]);

return (
<Container maxWidth="sm">
<form id="contact-form" onSubmit={handleSubmit}>
<Grid container alignItems="center" justifyContent="center" direction="column" style={{ gap: '10px' }}>
<Grid container alignItems="center" justifyContent="center" direction="row" spacing={2}>
<Grid item xs={6}>
<TextField
id="contact-firstname"
name="firstName"
label="First Name *"
type="text"
autoComplete="off"
value={formValues.firstName}
onChange={onInputChange}
onFocus={clearErrors}
error={formValues.errors.missingFirstName}
helperText={formValues.errors.missingFirstName ? 'Please provide a first name.' : ''}
fullWidth
/>
</Grid>
<Grid item xs={6}>
<TextField
id="contact-lastname"
name="lastName"
label="Last Name *"
type="text"
autoComplete="off"
value={formValues.lastName}
onChange={onInputChange}
onFocus={clearErrors}
error={formValues.errors.missingLastName}
helperText={formValues.errors.missingLastName ? 'Please provide a last name.' : ''}
fullWidth
/>
</Grid>
<form id="contact-form" onSubmit={handleSubmit}>
<Grid container alignItems="center" justify="center" direction="column">
<Grid container alignItems="center" justify="center" direction="row" spacing={2}>
<Grid item xs={6}>
<TextField
id="contact-firstname"
name="firstName"
label="First Name *"
type="text"
autoComplete="off"
value={formValues.firstName}
onChange={onInputChange}
onFocus={clearErrors}
error={formValues.errors.missingFirstName}
helperText={formValues.errors.missingFirstName ? 'Please provide a first name.' : ''}
fullWidth
/>
</Grid>
<Grid container alignItems="center" justifyContent="center" direction="row">
<Grid item xs={12}>
<TextField
id="contact-email"
name="email"
label="Email *"
type="text"
autoComplete="off"
value={formValues.email}
onChange={onInputChange}
onFocus={clearErrors}
error={formValues.errors.missingEmail || formValues.errors.invalidEmail}
helperText={formValues.errors.missingEmail || formValues.errors.invalidEmail ? 'Please provide a valid email address.' : ''}
fullWidth
/>
</Grid>
<Grid item xs={12}>
<TextField
id="contact-association"
name="association"
label="Association"
type="text"
autoComplete="off"
value={formValues.association}
onChange={onInputChange}
fullWidth
/>
</Grid>
<Grid item xs={12} style={{ paddingTop: '8px' }}>
<TextField
id="contact-message"
name="message"
label="Message *"
type="text"
variant="outlined"
rows={4}
autoComplete="off"
value={formValues.message}
onChange={onInputChange}
onFocus={clearErrors}
error={formValues.errors.missingMessage}
helperText={formValues.errors.missingMessage ? 'Please provide a message.' : ''}
fullWidth
multiline
/>
</Grid>
<Grid item xs={6}>
<TextField
id="contact-lastname"
name="lastName"
label="Last Name *"
type="text"
autoComplete="off"
value={formValues.lastName}
onChange={onInputChange}
onFocus={clearErrors}
error={formValues.errors.missingLastName}
helperText={formValues.errors.missingLastName ? 'Please provide a last name.' : ''}
fullWidth
/>
</Grid>
<Grid container direction="column" alignItems="center" justifyContent="center" style={{ paddingTop: '8px' }}>
<CircularProgress style={{ display: formValues.loading ? 'block' : 'none' }} />
<Button variant="contained" color="primary" type="submit" style={{ display: formValues.loading ? 'none' : 'block' }}>
Submit
</Button>
</Grid>
<Grid container alignItems="center" justify="center" direction="row">
<Grid item xs={12}>
<TextField
id="contact-email"
name="email"
label="Email *"
type="text"
autoComplete="off"
value={formValues.email}
onChange={onInputChange}
onFocus={clearErrors}
error={formValues.errors.missingEmail || formValues.errors.invalidEmail}
helperText={formValues.errors.missingEmail || formValues.errors.invalidEmail ? 'Please provide a valid email address.' : ''}
fullWidth
/>
</Grid>
<Grid container className={classes.footer}>
{/* an empty grid container with footer height to prevent
* fixed positioned footer from obscuring submit button */}
<Grid item xs={12}>
<TextField
id="contact-association"
name="association"
label="Association"
type="text"
autoComplete="off"
value={formValues.association}
onChange={onInputChange}
fullWidth
/>
</Grid>
<Grid item xs={12} style={{ paddingTop: '12px' }}>
<TextField
id="contact-message"
name="message"
label="Message *"
type="text"
variant="outlined"
rows={8}
autoComplete="off"
value={formValues.message}
onChange={onInputChange}
onFocus={clearErrors}
error={formValues.errors.missingMessage}
helperText={formValues.errors.missingMessage ? 'Please provide a message.' : ''}
fullWidth
multiline
/>
</Grid>
</Grid>
</form>
</Container>

<Grid container direction="column" alignItems="center" justify="center" style={{ paddingTop: '20px' }}>
<CircularProgress style={{ display: formValues.loading ? 'block' : 'none' }} />
<Button variant="contained" color="secondary" type="submit" style={{ display: formValues.loading ? 'none' : 'block' }}>
Submit
</Button>
</Grid>
</Grid>
</form>
);
};

Expand Down
4 changes: 2 additions & 2 deletions client/components/contact/ContactImage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,17 @@ import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import coverImage from '@assets/contact_bg.png';

const useStyles = makeStyles(() => ({
const useStyles = makeStyles(theme => ({
contactImageCover: {
height: '25vh',
backgroundImage: `url(${coverImage})`,
backgroundPosition: 'top',
backgroundRepeat: 'no-repeat',
backgroundSize: 'cover',
position: 'relative',

},
contactImageOverlayText: {
color: theme.palette.background.default,
left: '50%',
fontSize: '40px',
fontWeight: 'bold',
Expand Down
49 changes: 32 additions & 17 deletions client/components/contact/ContactIntro.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,37 @@
import React from 'react';
import {
Grid,
} from '@material-ui/core';
import Grid from '@material-ui/core/Grid';
import { makeStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import sharedLayout from '@theme/layout';

const ContactIntro = () => (
<Grid container alignItems="center" justify="center" direction="column">
<Grid item style={{ width: '45%' }}>
<h1 style={{ textAlign: 'center' }}>
{'Don\'t See What You Need?'}
</h1>
<p>
We want to build a tool that works for you. We are open to suggestions and
feedback and would love the opportunity to get connected. Feel free to input
your information in the contact form below and we will be sure to get back to
you within 2-3 business days. Thank you!
</p>
const useStyles = makeStyles(theme => ({
contentTitle: {
fontWeight: theme.typography.fontWeightMedium,
},
}));

const ContactIntro = () => {
const classes = { ...useStyles(), ...sharedLayout() };

return (
<Grid container alignItems="center" justify="center" direction="column">
<Grid item>
<div align="center">
<Typography variant="h6" className={classes.contentTitle}>
{'Don\'t See What You Need?'}
</Typography>
</div>
<div className={classes.marginTopSmall}>
<Typography variant="body1">
We want to build a tool that works for you. We are open to suggestions and
feedback and would love the opportunity to get connected. Feel free to input
your information in the contact form below and we will be sure to get back to
you within 2-3 business days. Thank you!
</Typography>
</div>
</Grid>
</Grid>
</Grid>
);
);
};

export default ContactIntro;

0 comments on commit 71359f9

Please sign in to comment.