mikwee/linkroots
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Styling the YouTube, LinkedIn & Pinterest buttons

Browse source
This commit is contained in:
mikwee 2021-11-08 17:00:03 +02:00
parent 06a1a44b31
commit 103010679a
2 changed files with 11 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/App.js
View file

@ -5,13 +5,13 @@ import './styles/roots.scss';
import data from './roots.json' import data from './roots.json'
function App() { function App() {
const socialTypes = ["facebook", "instagram", "twitter", "github", "youtube", "linkedin", "pinterest", "messenger", "whatsapp"]; const socialTypes = ["facebook", "instagram", "twitter", "github", "youtube", "linkedin", "pinterest"];
return ( return (
<div className="App"> <div className="App">
<h1 id="title">{data.title}</h1> <h1 id="title">{data.title}</h1>
<div id="container"> <div id="container">
<Button id="github" variant="primary">Facebook</Button> <Button id="pinterest" variant="primary">Facebook</Button>
{/*{data.links.map((rootDetail, index)=>{ {/*{data.links.map((rootDetail, index)=>{
if(rootDetail.type == "facebook") { if(rootDetail.type == "facebook") {
res = <AwesomeButton className="roots"></AwesomeButton> res = <AwesomeButton className="roots"></AwesomeButton>

9
src/styles/roots.scss
View file

@ -14,5 +14,14 @@ $btn-border-width: 0px;
background-color: #fafafa; background-color: #fafafa;
color: #333; color: #333;
} }
#youtube {
background-color: #ff0000;
}
#linkedin {
background-color: #0077b5;
}
#pinterest {
background-color: #e60023;
}
@import "./node_modules/bootstrap/scss/bootstrap.scss"; @import "./node_modules/bootstrap/scss/bootstrap.scss";