Merge branch 'master' of https://github.com/tjhrc/website

package.json

@@ -17,6 +17,7 @@
     "popper.js": "^1.16.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-icons": "^4.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.0",
     "styled-components": "^5.2.1",

src/components/Contact.js

@@ -2,8 +2,8 @@ import React, {Component} from "react";
 import emailjs from "emailjs-com";
 import {createGlobalStyle} from 'styled-components';
 import {Spring} from 'react-spring/renderprops'
-import {StyledFormWrapper, StyledForm, StyledButton, StyledError, StyledInput, StyledTextArea, StyledTextAreaSubject, ButtonSet} from "./assets/StyledContactForm.js";
-import './assets/contact.scss'
+import {StyledFormWrapper, StyledForm, StyledButton, StyledError, StyledInput, StyledTextArea, StyledTextAreaSubject, ButtonSet, Modal} from "./assets/StyledContactForm.js";
+import './assets/contact.scss';
 
 // If you need anything for this ask Ram Reddy.
 
@@ -24,12 +24,14 @@ class ContactForm extends Component {
   
   constructor(props) {
     super(props);
+
     this.state = {
       name: '',
       email: '',
       subject: '',
       message: '',
-      error:''
+      error:'',
+      show:false
     };
 
     this.handleNameChange = this.handleNameChange.bind(this);
@@ -38,8 +40,18 @@ class ContactForm extends Component {
     this.handleMessageChange = this.handleMessageChange.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
     this.scrollDown = this.scrollDown.bind(this);
+    this.showModal = this.showModal.bind(this);
+    this.hideModal = this.hideModal.bind(this);
   }
 
+  showModal = () => {
+    this.setState({ show: true });
+  };
+
+  hideModal = () => {
+    this.setState({ show: false });
+  };
+
   handleNameChange(event) {
     this.setState({ 
       name: event.target.value 
@@ -76,20 +88,16 @@ class ContactForm extends Component {
     }
     this.setState({error: ``});
 
-    alert('You will get and email from us shortly!');
-    alert('These are the details you have submitted!');
-    alert(this.state.name);
-    alert(this.state.email);
-    alert(this.state.subject);
-    alert(this.state.message);
+    this.showModal()
+    // emailjs.sendForm('service_5ggwj8d', 'template_jirc6zm', event.target, 'user_XtSzEFFNtc4C6IEpGN9JS')
+    //   .then((result) => {
+    //       console.log(result.text);
+    //   }, (error) => {
+    //       console.log(error.text);
+    //   });
+    //   event.target.reset();
+
 
-    emailjs.sendForm('service_5ggwj8d', 'template_jirc6zm', event.target, 'user_XtSzEFFNtc4C6IEpGN9JS')
-      .then((result) => {
-          console.log(result.text);
-      }, (error) => {
-          console.log(error.text);
-      });
-      event.target.reset();
   }
 
   scrollDown(id) {
@@ -140,7 +148,15 @@ class ContactForm extends Component {
             <StyledButton type="submit">Send Message</StyledButton>
           </StyledForm>
         </StyledFormWrapper>
-
+        <Modal show={this.state.show} handleClose={this.hideModal}>
+          <h1>We have recieved your message!</h1>
+          <h2>You will recieve an email from us shortly.</h2>
+          <h2>Below are the details you have submitted:</h2>
+          <h3>Name: {this.state.name}</h3>
+          <h3>Email: {this.state.email}</h3>
+          <p>Subject: {this.state.subject}</p>
+          <p>Message: {this.state.message}</p>
+        </Modal>
       </body>
       <div className="buttonSet" id="goHere">
           <Spring

src/components/assets/StyledContactForm.js

@@ -1,4 +1,6 @@
 import styled, { css } from 'styled-components';
+import './contact.scss';
+import { MdClose } from 'react-icons/md';
 
 const sharedStyles = css`
   background-color: #ccc;
@@ -84,6 +86,73 @@ const StyledError = styled.div`
   margin: 0 0 5% 0;
 `;
 
+const Background = styled.div`
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.8);
+  position: fixed;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const ModalWrapper = styled.div`
+  justify-content: center;
+  align-items: center;
+  overflow: auto;
+  width: 40%;
+  height: 60%;
+  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.2);
+  background: #fff;
+  color: #000;
+  position: relative;
+  z-index: 10;
+  border-radius: 10px;
+`;
+
+const ModalContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  line-height: 1.8;
+  color: #141414;
+  p {
+    margin-bottom: 1rem;
+  }
+  button {
+    padding: 1em 2em ;
+    background: #141414;
+    color: #fff;
+    border: none;
+  }
+`;
+
+const CloseModalButton = styled(MdClose)`
+  cursor: pointer;
+  position: absolute;
+  top: 5%;
+  right: 2%;
+  width: 5%;
+  height: 5%;
+  padding: 0;
+  z-index: 10;
+`;
+
+const Modal = ({ handleClose, show, children }) => {
+  const showHideClassName = show ? "modal display-block" : "modal display-none";
+
+  return (
+    <div className={showHideClassName}>
+      <Background>
+      <ModalWrapper>
+        <ModalContent>{children}</ModalContent>
+        <CloseModalButton type="button" onClick={handleClose}></CloseModalButton>
+      </ModalWrapper>
+     </Background>
+    </div>
+  );
+};
 
 export default StyledFormWrapper;
 
@@ -96,4 +165,5 @@ export {
     StyledButton,
     StyledError,
     StyledTextAreaSubject,
+    Modal
 };

src/components/assets/contact.scss

@@ -4,6 +4,37 @@ $medium: 800px;
 button {
     cursor:pointer;
 }
+p {
+  word-break: break-all;
+  white-space: normal;
+  margin-block: 5%;
+}
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width:100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.6);
+}
+
+.modal-main {
+  position:fixed;
+  background: white;
+  width: 80%;
+  height: auto;
+  top:50%;
+  left:50%;
+  transform: translate(-50%,-50%);
+}
+
+.display-block {
+  display: block;
+}
+
+.display-none {
+  display: none;
+}
 
 body {
   padding: 0; 

yarn.lock

@@ -9881,6 +9881,11 @@ react-error-overlay@^6.0.9:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"
   integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==
 
+react-icons@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.2.0.tgz#6dda80c8a8f338ff96a1851424d63083282630d0"
+  integrity sha512-rmzEDFt+AVXRzD7zDE21gcxyBizD/3NqjbX6cmViAgdqfJ2UiLer8927/QhhrXQV7dEj/1EGuOTPp7JnLYVJKQ==
+
 react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"