Final fixes and look changes for contact

src/components/Contact.js

@@ -1,8 +1,8 @@
 import React, {Component} from "react";
 import emailjs from "emailjs-com";
-import styled, {createGlobalStyle} from 'styled-components';
+import {createGlobalStyle} from 'styled-components';
-import {StyledFormWrapper, StyledForm, StyledButton, StyledError, StyledInput, StyledTextArea, sharedStyles, StyledTextAreaSubject, ButtonSet} from "./assets/StyledContactForm.js";
+import {StyledFormWrapper, StyledForm, StyledButton, StyledError, StyledInput, StyledTextArea, StyledTextAreaSubject, ButtonSet} from "./assets/StyledContactForm.js";
-import './assets/contact.css'
+import './assets/contact.scss'
 
 const GlobalStyle = createGlobalStyle`
   html {
@@ -104,7 +104,7 @@ class ContactForm extends Component {
     return (
       <>
         <GlobalStyle />
-        <StyledFormWrapper>
+        <StyledFormWrapper id="backUp">
           <StyledForm onSubmit={this.handleSubmit}>
             <h2>Contact Form</h2>
             <label htmlFor="name">Name</label>
@@ -136,11 +136,14 @@ class ContactForm extends Component {
             <StyledButton type="submit">Send Message</StyledButton>
           </StyledForm>
         </StyledFormWrapper>
-        <button2 onClick={() => this.scrollDown("goHere")}>⤋ Or Find Us At ⤋ <span><br></br></span>⤋</button2>
+        <button2 onClick={() => this.scrollDown("goHere")}>⤋ Or Find Us At ⤋</button2>
         <ButtonSet id="goHere">
-          <a href="#" class="fa fa-linkedin"></a>
+          <a href="#" className="fa fa-linkedin"></a>
-          <a href="#" class="fa fa-youtube"></a>
+          <a href="#" className="fa fa-youtube"></a>
-          <a href="#" class="fa fa-github"></a>
+          <a href="#" className="fa fa-github"></a>
+          <a href="#" className="fa fa-instagram"></a>
+          <a href="#" className="fa fa-facebook"></a>
+          <button onClick={() => this.scrollDown("backUp")} className="fa fa-envelope"></button>
         </ButtonSet>
       </>
   );

src/components/assets/StyledContactForm.js

@@ -1,4 +1,4 @@
-import styled, { createGlobalStyle, css } from 'styled-components';
+import styled, { css } from 'styled-components';
 
 const sharedStyles = css`
   background-color: #ccc;

src/components/assets/contact.css

@@ -1,46 +0,0 @@
-button2 {
-    display:block;
-    width:18%; 
-    margin:0 auto; 
-    position:relative;
-    font-size:40px;
-    margin-top: -125px;
-    outline:none;
-    color:#fff;
-    border:none;
-    text-decoration:none;
-    text-align:center;
-    cursor:pointer;
-    -webkit-border-radius:10px;
-    -moz-border-radius:2px;
-    border-radius:1px;
-    background-color:#ee6c4d;
-    border-bottom:1px solid #7b8b2f;
-  }
-  .fa {
-    padding: 20px;
-    font-size: 30px;
-    width: 100px;
-    text-align: center;
-    text-decoration: none;
-    margin: 5px 2px;
-  }
-  
-  .fa:hover {
-      opacity: 0.7;
-  }
-  
-  .fa-linkedin {
-    background: #0077b5;
-    color: white;
-  }
-
-  .fa-youtube {
-    background: #FF0000;
-    color: white;
-  }
-
-  .fa-github {
-    background: #000000;
-    color: white;
-  }

src/components/assets/contact.scss

@@ -0,0 +1,69 @@
+button {
+    cursor:pointer;
+}
+
+button2 {
+    display:block;
+    width:18%; 
+    margin:0 auto; 
+    position:relative;
+    font-size:40px;
+    margin-top: -125px;
+    outline:none;
+    color:#fff;
+    border:none;
+    text-decoration:none;
+    text-align:center;
+    cursor:pointer;
+    -webkit-border-radius:10px;
+    -moz-border-radius:2px;
+    border-radius:10px;
+    background-color:#ee6c4d;
+    border-bottom:1px solid #7b8b2f;
+  }
+  .fa {
+    padding: 20px;
+    font-size: 75px;
+    width: 10%;
+    text-align: center;
+    text-decoration: none;
+    margin: 5px 2px;
+  }
+  
+  .fa:hover {
+      opacity: 0.7;
+  }
+  
+  .fa-linkedin {
+    background: #0077b5;
+    color: white;
+  }
+
+  .fa-youtube {
+    background: #FF0000;
+    color: white;
+  }
+
+  .fa-github {
+    background: #000000;
+    color: white;
+  }
+
+  .fa-instagram {
+    background: -webkit-radial-gradient(32% 106%, circle cover, rgb(255, 225, 125) 0%, rgb(255, 205, 105) 10%, rgb(250, 145, 55) 28%, rgb(235, 65, 65) 42%, transparent 82%), -webkit-linear-gradient(-45deg, rgb(35, 75, 215) 12%, rgb(195, 60, 190) 58%);
+    background: -moz-radial-gradient(32% 106%, circle cover, rgb(255, 225, 125) 0%, rgb(255, 205, 105) 10%, rgb(250, 145, 55) 28%, rgb(235, 65, 65) 42%, transparent 82%), -moz-linear-gradient(-45deg, rgb(35, 75, 215) 12%, rgb(195, 60, 190) 58%);
+    background: -ms-radial-gradient(32% 106%, circle cover, rgb(255, 225, 125) 0%, rgb(255, 205, 105) 10%, rgb(250, 145, 55) 28%, rgb(235, 65, 65) 42%, transparent 82%), -ms-linear-gradient(-45deg, rgb(35, 75, 215) 12%, rgb(195, 60, 190) 58%);
+    background: -o-radial-gradient(32% 106%, circle cover, rgb(255, 225, 125) 0%, rgb(255, 205, 105) 10%, rgb(250, 145, 55) 28%, rgb(235, 65, 65) 42%, transparent 82%), -o-linear-gradient(-45deg, rgb(35, 75, 215) 12%, rgb(195, 60, 190) 58%);
+    background: radial-gradient(circle farthest-corner at 32% 106%, rgb(255, 225, 125) 0%, rgb(255, 205, 105) 10%, rgb(250, 145, 55) 28%, rgb(235, 65, 65) 42%, transparent 82%), linear-gradient(135deg, rgb(35, 75, 215) 12%, rgb(195, 60, 190) 58%);
+    color: white;
+  }
+
+  .fa-facebook {
+    background: #43609C;
+    color: white;
+  }
+
+  .fa-envelope {
+    background: #da3939;
+    color: white;
+  }