mirror of
https://github.com/PotentiaRobotics/website.git
synced 2025-04-20 20:30:18 -04:00
Revamped look of form
This commit is contained in:
Ram Reddy
parent
4eec1baabf
commit
109a4839cb
96
package-lock.json
generated
96
package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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
72
src/components/assets/StyledContactForm.js
Normal 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
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user