diff --git a/src/components/Contact.js b/src/components/Contact.js
index 0b34510..d72f134 100644
--- a/src/components/Contact.js
+++ b/src/components/Contact.js
@@ -9,6 +9,7 @@ const GlobalStyle = createGlobalStyle`
height: 100%
}
body {
+ background-color: #293241;
font-family: Arial, Helvetica, sans-serif;
height: 100%;
margin: 0;
@@ -118,8 +119,7 @@ class ContactForm extends Component {
onChange={this.handleMessageChange}
/>
- {this.state.error}
-
+ {this.state.error}
Send Message
diff --git a/src/components/assets/StyledContactForm.js b/src/components/assets/StyledContactForm.js
index 7474ca8..4d70488 100644
--- a/src/components/assets/StyledContactForm.js
+++ b/src/components/assets/StyledContactForm.js
@@ -1,7 +1,7 @@
import styled, { createGlobalStyle, css } from 'styled-components';
const sharedStyles = css`
- background-color: #eee;
+ background-color: #ccc;
height: 40px;
border-radius: 5px;
border: 1px solid #ddd;
@@ -22,12 +22,14 @@ const StyledForm = styled.form`
width: 100%;
max-width: 700px;
padding: 40px;
- background-color: #fff;
- border-radius: 10px;
+ background-color: #eee;
+ color: #3d5a80;
box-sizing: border-box;
- box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
+ box-shadow: 0px 0px 20px 0px rgba(250, 250, 250, 0.4);
`;
+ // border-radius: 10px; (if we want a round form)
+
const StyledInput = styled.input`
display: block;
width: 100%;
@@ -35,7 +37,7 @@ const StyledInput = styled.input`
`;
const StyledTextAreaSubject = styled.textarea`
- background-color: #eee;
+ background-color: #98c1d9;
width: 100%;
min-height: 60px;
resize: none;
@@ -43,7 +45,7 @@ const StyledTextAreaSubject = styled.textarea`
`;
const StyledTextArea = styled.textarea`
- background-color: #eee;
+ background-color: #98c1d9;
width: 100%;
min-height: 100px;
resize: none;
@@ -51,7 +53,7 @@ const StyledTextArea = styled.textarea`
`;
const StyledButton = styled.button`
display: block;
- background-color: #f7797d;
+ background-color: #ee6c4d;
color: #fff;
font-size: 0.9rem;
border: 0;