From 109a4839cb46b854aebd15c9e91fcfc798136a2e Mon Sep 17 00:00:00 2001
From: Ram Reddy <69733662+ramnreddy15@users.noreply.github.com>
Date: Wed, 3 Feb 2021 22:38:20 -0500
Subject: [PATCH] Revamped look of form
---
package-lock.json | 96 ++++++++++++++++++++++
package.json | 1 +
src/components/Contact.js | 93 +++++++++++----------
src/components/assets/StyledContactForm.js | 72 ++++++++++++++++
4 files changed, 215 insertions(+), 47 deletions(-)
create mode 100644 src/components/assets/StyledContactForm.js
diff --git a/package-lock.json b/package-lock.json
index 82ddc27..387fd85 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -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",
diff --git a/package.json b/package.json
index 62a80e4..bf44699 100644
--- a/package.json
+++ b/package.json
@@ -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"
diff --git a/src/components/Contact.js b/src/components/Contact.js
index 7f383c1..386ff64 100644
--- a/src/components/Contact.js
+++ b/src/components/Contact.js
@@ -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 (
-//
-// );
-// }
class ContactForm extends Component {
constructor(props) {
@@ -91,27 +77,40 @@ class ContactForm extends Component {
}
render() {
+
return (
-
- );
+ <>
+
+
+
+ Contact Form
+
+
+
+
+
+
+
+
+ Send Message
+
+
+
+ );
}
}
diff --git a/src/components/assets/StyledContactForm.js b/src/components/assets/StyledContactForm.js
new file mode 100644
index 0000000..daf5158
--- /dev/null
+++ b/src/components/assets/StyledContactForm.js
@@ -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
+};
\ No newline at end of file