rushilwiz/website
1
0
Fork 0
mirror of https://github.com/PotentiaRobotics/website.git synced 2025-04-18 03:10:18 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

Updated CSS

Browse Source
This commit is contained in:
Ram Reddy 2021-02-17 15:28:48 -08:00
parent c4307d2ceb
commit d420f5f6b6
No known key found for this signature in database
GPG Key ID: 2CD6B38BE14BDE53
3 changed files with 43 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/Contact.js
View File

@ -103,6 +103,7 @@ class ContactForm extends Component {
render() {
return (
<>
<body>
<GlobalStyle />
<StyledFormWrapper id="backUp">
@ -137,7 +138,9 @@ class ContactForm extends Component {
<StyledButton type="submit">Send Message</StyledButton>
</StyledForm>
</StyledFormWrapper>
<ButtonSet id="goHere">
</body>
<div className="buttonSet" id="goHere">
<Spring
from= {{ opacity: 0 }}
to={{opacity: 1}}
@ -147,14 +150,14 @@ class ContactForm extends Component {
<div style={props}>
<a href="https://www.linkedin.com/in/potentia-robotics-790582204/" target="_blank" className="fa fa-linkedin"></a>
<a href="https://www.youtube.com/channel/UCKzWtwtWSejKt9THR_XlU7Q" target="_blank" className="fa fa-youtube"></a>
<a href="https://github.com/tjhrc" target="_blank" className="fa fa-github"></a>
<a href="https://github.com/PotentiaRobotics" target="_blank" className="fa fa-github"></a>
<a href="#" target="_blank" className="fa fa-instagram"></a>
<a href="https://www.facebook.com/potentiarobotics/" target="_blank" className="fa fa-facebook"></a>
</div>
)}
</Spring>
</ButtonSet>
</body>
</div>
</>
);
}
}

50
src/components/assets/StyledContactForm.js
View File

@ -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
};

16
src/components/assets/contact.scss
View File

@ -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 {