priyatham
/
Locaft
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

footer icon revamp

This commit is contained in:
Priyatham Sai Chand 2020-12-24 22:14:08 +05:30
parent 19e5905fa0
commit 6d36ea4bb6
1 changed files with 29 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/Footer.js
View File

@ -3,6 +3,9 @@ import styled from 'styled-components';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faFacebook, faTwitter, faInstagram } from "@fortawesome/free-brands-svg-icons"; import { faFacebook, faTwitter, faInstagram } from "@fortawesome/free-brands-svg-icons";
import { faEnvelope } from "@fortawesome/free-solid-svg-icons"; import { faEnvelope } from "@fortawesome/free-solid-svg-icons";
import { Facebook,Twitter, Instagram } from "@styled-icons/fa-brands";
import { Envelope } from "@styled-icons/fa-solid";
import { import {
Container Container
} from 'react-bootstrap'; } from 'react-bootstrap';
@ -16,19 +19,38 @@ const WhiteSection = styled.footer`
background: ${ props => props.background || "white"}; background: ${ props => props.background || "white"};
`; `;
const FontIcon = styled(FontAwesomeIcon)` const FacebookIcon = styled(Facebook)`
margin: 20px 10px; margin: 20px 10px;
width: 16px;
height: 16px;
`; `;
const TwitterIcon = styled(Twitter)`
margin: 20px 10px;
width: 16px;
height: 16px;
`;
const InstagramIcon = styled(Instagram)`
margin: 20px 10px;
width: 16px;
height: 16px;
color:#66bfbf;
`;
const EnvelopeIcon = styled(Envelope)`
margin: 20px 10px;
width: 16px;
height: 16px;
`;
const Footer = (props) => { const Footer = (props) => {
return ( return (
<WhiteSection> <WhiteSection>
<ContainerPadded fluid> <ContainerPadded fluid>
<FontIcon icon={faFacebook} /> <FacebookIcon />
<FontIcon icon={faTwitter} /> <TwitterIcon />
<FontIcon icon={faInstagram} /> <InstagramIcon />
<FontIcon icon={faEnvelope} /> <EnvelopeIcon />
<p>© Copyright 2020 Locaft</p> <p>© Copyright 2020 Locaft</p>
<p><a href="/tc">Terms and Conditions</a></p> <p><a href="/tc">Terms and Conditions</a></p>