diff --git a/src/components/Contact.js b/src/components/Contact.js
index cdf1fe3..8ababa5 100644
--- a/src/components/Contact.js
+++ b/src/components/Contact.js
@@ -103,6 +103,7 @@ class ContactForm extends Component {
render() {
return (
+ <>
@@ -137,7 +138,9 @@ class ContactForm extends Component {
Send Message
-
+
+
+
)}
-
-
+
+
);
}
}
diff --git a/src/components/assets/StyledContactForm.js b/src/components/assets/StyledContactForm.js
index 05b4fdf..ec73291 100644
--- a/src/components/assets/StyledContactForm.js
+++ b/src/components/assets/StyledContactForm.js
@@ -2,11 +2,9 @@ import styled, { css } from 'styled-components';
const sharedStyles = css`
background-color: #ccc;
- height: .5vw;
border-radius: 5px;
border: 1px solid #ddd;
margin: 10px 0 20px 0;
- padding: 20px;
box-sizing: border-box;
`;
@@ -14,53 +12,62 @@ const StyledFormWrapper = styled.div`
display: flex;
justify-content: center;
align-items: center;
- height: 150%;
- margin-top: 4vw;
- padding: 0 20px;
+ position:relative;
+ margin-top: 5vw;
+ padding: 0 2%;
`;
const StyledForm = styled.form`
width: 50%;
- height:130%;
- padding: 40px;
+ padding: 1.75%;
background-color: #eee;
color: #3d5a80;
box-sizing: border-box;
box-shadow: 0px 0px 20px 0px rgba(250, 250, 250, 0.4);
`;
-
+// height:100%;
// border-radius: 10px; (if we want a round form)
const StyledInput = styled.input`
display: block;
width: 100%;
+ rows: 1;
+ padding 1.5%;
${sharedStyles}
`;
const StyledTextAreaSubject = styled.textarea`
background-color: #98c1d9;
width: 100%;
- min-height: 5%;
- resize: none;
+ font-size:large;
+ rows: 2;
+ padding 1.5%;
+ overflow: auto;
+ spellcheck:true;
+ resize: vertical;
${sharedStyles}
`;
const StyledTextArea = styled.textarea`
background-color: #98c1d9;
width: 100%;
- min-height: 20%;
- resize: none;
+ resize: vertical;
+ rows: 2;
+ padding 1.5%;
+ font-size:large;
+ overflow: auto;
+ spellcheck:true;
${sharedStyles}
`;
const StyledButton = styled.button`
display: block;
background-color: #ee6c4d;
color: #fff;
- font-size: 0.9rem;
+ font-size: 1rem;
border: 0;
border-radius: 5px;
height: 40%;
- padding: 0 20px;
+ padding: 0 10%;
cursor: pointer;
box-sizing: border-box;
@@ -74,21 +81,9 @@ const StyledButton = styled.button`
const StyledError = styled.div`
color: red;
font-weight: 800;
- margin: 0 0 40px 0;
+ margin: 0 0 5% 0;
`;
-const ButtonSet = styled.div`
- background-color: #3d5a80;
- color: white;
- font-size:1.7em;
- position: absolute;
- border-radius:10px;
- bottom: 5%;
- width: 20%;
- left: 40%;
- text-align: center;
- padding: 0 20px;
-`;
export default StyledFormWrapper;
@@ -101,5 +96,4 @@ export {
StyledButton,
StyledError,
StyledTextAreaSubject,
- ButtonSet
};
\ No newline at end of file
diff --git a/src/components/assets/contact.scss b/src/components/assets/contact.scss
index c152ea3..9e77093 100644
--- a/src/components/assets/contact.scss
+++ b/src/components/assets/contact.scss
@@ -6,12 +6,24 @@ body {
padding: 0;
margin: 0;
}
+.buttonSet {
+ background-color: #3d5a80;
+ color: white;
+ font-size:1.7em;
+ border-radius:10px;
+ width: 20%;
+ left: 40%;
+ text-align: center;
+ padding: 0 2%;
+ position:relative;
+ top:3em;
+}
.fa {
- font-size: 1.5rem;
+ font-size: 100%;
width: 10%;
text-decoration: none;
- margin: -0vw 0.8vw;
+ margin: 0vw 0.8vw;
}
.fa:hover {