rushilwiz/website
1
0
Fork 0
mirror of https://github.com/PotentiaRobotics/website.git synced 2025-04-20 12:20:19 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

Revamped look of form

Browse Source
This commit is contained in:
Ram Reddy 2021-02-03 22:38:20 -05:00
parent 4eec1baabf
commit 109a4839cb
4 changed files with 215 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
package-lock.json generated
View File

@ -1185,6 +1185,29 @@
"resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
"integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
},
"@emotion/is-prop-valid": {
"version": "0.8.8",
"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
"integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
"requires": {
"@emotion/memoize": "0.7.4"
}
},
"@emotion/memoize": {
"version": "0.7.4",
"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
"integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
},
"@emotion/stylis": {
"version": "0.8.5",
"resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
"integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
},
"@emotion/unitless": {
"version": "0.7.5",
"resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
"integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
},
"@eslint/eslintrc": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.3.0.tgz",
@ -3240,6 +3263,22 @@
"resolved": "https://registry.npmjs.org/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.7.tgz",
"integrity": "sha512-squySRkf+6JGnvjoUtDEjSREJEBirnXi9NqP6rjSYsylxQxqBTz+pkmf395i9E2zsvmYUaI40BHo6SqZUdydlw=="
},
"babel-plugin-styled-components": {
"version": "1.12.0",
"resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.12.0.tgz",
"integrity": "sha512-FEiD7l5ZABdJPpLssKXjBUJMYqzbcNzBowfXDCdJhOpbhWiewapUaY+LZGT8R4Jg2TwOjGjG4RKeyrO5p9sBkA==",
"requires": {
"@babel/helper-annotate-as-pure": "^7.0.0",
"@babel/helper-module-imports": "^7.0.0",
"babel-plugin-syntax-jsx": "^6.18.0",
"lodash": "^4.17.11"
}
},
"babel-plugin-syntax-jsx": {
"version": "6.18.0",
"resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
"integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
},
"babel-plugin-syntax-object-rest-spread": {
"version": "6.13.0",
"resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
@ -3966,6 +4005,11 @@
"map-obj": "^1.0.0"
}
},
"camelize": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
"integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs="
},
"caniuse-api": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@ -4600,6 +4644,11 @@
"postcss": "^7.0.5"
}
},
"css-color-keywords": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
"integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU="
},
"css-color-names": {
"version": "0.0.4",
"resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
@ -4711,6 +4760,16 @@
"resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
"integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
},
"css-to-react-native": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz",
"integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==",
"requires": {
"camelize": "^1.0.0",
"css-color-keywords": "^1.0.0",
"postcss-value-parser": "^4.0.2"
}
},
"css-tree": {
"version": "1.0.0-alpha.37",
"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
@ -13942,6 +14001,11 @@
"kind-of": "^6.0.2"
}
},
"shallowequal": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
"integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
},
"shebang-command": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
@ -14619,6 +14683,38 @@
"schema-utils": "^2.7.0"
}
},
"styled-components": {
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.2.1.tgz",
"integrity": "sha512-sBdgLWrCFTKtmZm/9x7jkIabjFNVzCUeKfoQsM6R3saImkUnjx0QYdLwJHBjY9ifEcmjDamJDVfknWm1yxZPxQ==",
"requires": {
"@babel/helper-module-imports": "^7.0.0",
"@babel/traverse": "^7.4.5",
"@emotion/is-prop-valid": "^0.8.8",
"@emotion/stylis": "^0.8.4",
"@emotion/unitless": "^0.7.4",
"babel-plugin-styled-components": ">= 1",
"css-to-react-native": "^3.0.0",
"hoist-non-react-statics": "^3.0.0",
"shallowequal": "^1.1.0",
"supports-color": "^5.5.0"
},
"dependencies": {
"has-flag": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
"integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
},
"supports-color": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
"requires": {
"has-flag": "^3.0.0"
}
}
}
},
"stylehacks": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz",

1
package.json
View File

@ -18,6 +18,7 @@
"react-dom": "^17.0.1",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"styled-components": "^5.2.1",
"tsutils": "^3.20.0",
"typescript": "^4.1.3",
"web-vitals": "^0.2.4"

91
src/components/Contact.js
View File

@ -1,35 +1,21 @@
import React, {Component} from "react";
import emailjs from "emailjs-com";
import styled, {createGlobalStyle} from 'styled-components';
import {StyledFormWrapper, StyledForm, StyledButton, StyledError, StyledInput, StyledTextArea, sharedStyles} from "./assets/StyledContactForm.js";
// export default function ContactForm() {
// function sendEmail(event) {
// event.preventDefault();
const GlobalStyle = createGlobalStyle`
html {
height: 100%
}
body {
font-family: Arial, Helvetica, sans-serif;
height: 100%;
margin: 0;
color: #555;
}
`;
// emailjs.sendForm('service_5ggwj8d', 'template_jirc6zm', event.target, 'user_XtSzEFFNtc4C6IEpGN9JS')
// .then((result) => {
// console.log(result.text);
// }, (error) => {
// console.log(error.text);
// });
// event.target.reset();
// }
// return (
// <form onSubmit={sendEmail}>
// <label>Name</label>
// <input type="text" name="name" />
// <label>Email</label>
// <input type="email" name="email" />
// <label>Subject</label>
// <textarea name="subject" />
// <label>Message</label>
// <textarea name="message" />
// <input type="submit" value="Send" />
// </form>
// );
// }
class ContactForm extends Component {
constructor(props) {
@ -91,26 +77,39 @@ class ContactForm extends Component {
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" name="name" onChange={this.handleNameChange} />
</label>
<label>
Email:
<input type="email" name="email" onChange={this.handleEmailChange} />
</label>
<label>
Subject:
<textarea name="subject" onChange={this.handleSubjectChange} />
</label>
<label>
Message:
<textarea name="message" onChange={this.handleMessageChange} />
</label>
<input type="submit" value="Submit" />
</form>
<>
<GlobalStyle />
<StyledFormWrapper>
<StyledForm onSubmit={this.handleSubmit}>
<h2>Contact Form</h2>
<label htmlFor="name">Name</label>
<StyledInput
type="text"
name="name"
onChange={this.handleNameChange}
/>
<label htmlFor="email">Email</label>
<StyledInput
type="email"
name="email"
onChange={this.handleEmailChange}
/>
<label htmlFor="subject">Subject</label>
<StyledTextArea
name="subject"
onChange={this.handleSubjectChange}
/>
<label htmlFor="message">Message</label>
<StyledTextArea
name="message"
onChange={this.handleMessageChange}
/>
<StyledButton type="submit">Send Message</StyledButton>
</StyledForm>
</StyledFormWrapper>
</>
);
}
}

72
src/components/assets/StyledContactForm.js Normal file
View File

@ -0,0 +1,72 @@
import styled, { createGlobalStyle, css } from 'styled-components';
const sharedStyles = css`
background-color: #eee;
height: 40px;
border-radius: 5px;
border: 1px solid #ddd;
margin: 10px 0 20px 0;
padding: 20px;
box-sizing: border-box;
`;
const StyledFormWrapper = styled.div`
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
padding: 0 20px;
`;
const StyledForm = styled.form`
width: 100%;
max-width: 700px;
padding: 40px;
background-color: #fff;
border-radius: 10px;
box-sizing: border-box;
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
`;
const StyledInput = styled.input`
display: block;
width: 100%;
${sharedStyles}
`;
const StyledTextArea = styled.textarea`
background-color: #eee;
width: 100%;
min-height: 100px;
resize: none;
${sharedStyles}
`;
const StyledButton = styled.button`
display: block;
background-color: #f7797d;
color: #fff;
font-size: 0.9rem;
border: 0;
border-radius: 5px;
height: 40px;
padding: 0 20px;
cursor: pointer;
box-sizing: border-box;
`;
const StyledError = styled.div`
color: red;
font-weight: 800;
margin: 0 0 40px 0;
`;
export default StyledFormWrapper;
export {
StyledFormWrapper,
StyledForm,
sharedStyles,
StyledInput,
StyledTextArea,
StyledButton,
StyledError
};