From c4307d2ceb74624c074d3aa8fa8380411a1dc14f Mon Sep 17 00:00:00 2001 From: Ram Reddy Date: Wed, 17 Feb 2021 08:42:24 -0800 Subject: [PATCH] Make icons look better --- package-lock.json | 10 ++++ package.json | 3 ++ src/components/Contact.js | 32 ++++++------ src/components/assets/StyledContactForm.js | 26 ++++++---- src/components/assets/contact.scss | 57 +++++----------------- 5 files changed, 60 insertions(+), 68 deletions(-) diff --git a/package-lock.json b/package-lock.json index 387fd85..fa0f87e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12999,6 +12999,16 @@ } } }, + "react-spring": { + "version": "8.0.27", + "resolved": "https://registry.npmjs.org/react-spring/-/react-spring-8.0.27.tgz", + "integrity": "sha512-nDpWBe3ZVezukNRandTeLSPcwwTMjNVu1IDq9qA/AMiUqHuRN4BeSWvKr3eIxxg1vtiYiOLy4FqdfCP5IoP77g==", + "dev": true, + "requires": { + "@babel/runtime": "^7.3.1", + "prop-types": "^15.5.8" + } + }, "read-pkg": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz", diff --git a/package.json b/package.json index bf44699..d8abe7d 100644 --- a/package.json +++ b/package.json @@ -46,5 +46,8 @@ "last 1 firefox version", "last 1 safari version" ] + }, + "devDependencies": { + "react-spring": "^8.0.27" } } diff --git a/src/components/Contact.js b/src/components/Contact.js index fdb0b35..cdf1fe3 100644 --- a/src/components/Contact.js +++ b/src/components/Contact.js @@ -1,6 +1,7 @@ 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' @@ -102,7 +103,7 @@ class ContactForm extends Component { render() { return ( - <> + @@ -136,21 +137,24 @@ class ContactForm extends Component { Send Message - this.scrollDown("goHere")}>⤋ Or Find Us At ⤋ - -

- -

- -

- -

- -

- + + { props=> ( +
+ + + + + +
+ )} + - + ); } } diff --git a/src/components/assets/StyledContactForm.js b/src/components/assets/StyledContactForm.js index 0fbdaba..05b4fdf 100644 --- a/src/components/assets/StyledContactForm.js +++ b/src/components/assets/StyledContactForm.js @@ -2,7 +2,7 @@ import styled, { css } from 'styled-components'; const sharedStyles = css` background-color: #ccc; - height: 40px; + height: .5vw; border-radius: 5px; border: 1px solid #ddd; margin: 10px 0 20px 0; @@ -14,14 +14,14 @@ const StyledFormWrapper = styled.div` display: flex; justify-content: center; align-items: center; - height: 100vh; - margin-top: -3.7vw; + height: 150%; + margin-top: 4vw; padding: 0 20px; `; const StyledForm = styled.form` - width: 100%; - max-width: 700px; + width: 50%; + height:130%; padding: 40px; background-color: #eee; color: #3d5a80; @@ -40,7 +40,7 @@ const StyledInput = styled.input` const StyledTextAreaSubject = styled.textarea` background-color: #98c1d9; width: 100%; - min-height: 60px; + min-height: 5%; resize: none; ${sharedStyles} `; @@ -48,7 +48,7 @@ const StyledTextAreaSubject = styled.textarea` const StyledTextArea = styled.textarea` background-color: #98c1d9; width: 100%; - min-height: 100px; + min-height: 20%; resize: none; ${sharedStyles} `; @@ -59,7 +59,7 @@ const StyledButton = styled.button` font-size: 0.9rem; border: 0; border-radius: 5px; - height: 40px; + height: 40%; padding: 0 20px; cursor: pointer; box-sizing: border-box; @@ -78,8 +78,14 @@ const StyledError = styled.div` `; const ButtonSet = styled.div` - margin-top: 2vw; - vertical-align: middle; + 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; `; diff --git a/src/components/assets/contact.scss b/src/components/assets/contact.scss index ae9dcdb..c152ea3 100644 --- a/src/components/assets/contact.scss +++ b/src/components/assets/contact.scss @@ -2,37 +2,16 @@ button { cursor:pointer; } -button2 { - display:block; - width:40%; - margin:0 auto; - position:relative; - font-size:2vw; - margin-top: -6vw; - 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; - } - button2:hover { - background-color: #3D5A80; - cursor: pointer; - opacity:0.7; - } +body { + padding: 0; + margin: 0; +} + .fa { - padding: 1vw; - font-size: 5vw; + font-size: 1.5rem; width: 10%; - text-align: center; text-decoration: none; - margin: 0.2vw 0.2vw; + margin: -0vw 0.8vw; } .fa:hover { @@ -40,35 +19,25 @@ button2 { } .fa-linkedin { - background: #0077b5; - color: white; + color: #e0fbfc; } .fa-youtube { - background: #FF0000; - color: white; + color: #e0fbfc; } .fa-github { - background: #000000; - color: white; + color: #e0fbfc; } .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; + color: #e0fbfc; } .fa-facebook { - background: #43609C; - color: white; + color: #e0fbfc; } .fa-envelope { - background: #da3939; - color: white; + color: #e0fbfc; } \ No newline at end of file