From 103010679accd850bfe23bea0c7171b63ba8a103 Mon Sep 17 00:00:00 2001
From: mikwee <mikwee@protonmail.ch>
Date: Mon, 8 Nov 2021 17:00:03 +0200
Subject: [PATCH] Styling the YouTube, LinkedIn & Pinterest buttons

---
 src/App.js            | 4 ++--
 src/styles/roots.scss | 9 +++++++++
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/App.js b/src/App.js
index ca8d852..a302b24 100644
--- a/src/App.js
+++ b/src/App.js
@@ -5,13 +5,13 @@ import './styles/roots.scss';
 import data from './roots.json'
 
 function App() {
-  const socialTypes = ["facebook", "instagram", "twitter", "github", "youtube", "linkedin", "pinterest", "messenger", "whatsapp"];
+  const socialTypes = ["facebook", "instagram", "twitter", "github", "youtube", "linkedin", "pinterest"];
 
   return (
     <div className="App">
       <h1 id="title">{data.title}</h1>
       <div id="container">
-        <Button id="github" variant="primary">Facebook</Button>
+        <Button id="pinterest" variant="primary">Facebook</Button>
         {/*{data.links.map((rootDetail, index)=>{
           if(rootDetail.type == "facebook") {
             res = <AwesomeButton className="roots"></AwesomeButton>
diff --git a/src/styles/roots.scss b/src/styles/roots.scss
index a6da23e..35afa57 100644
--- a/src/styles/roots.scss
+++ b/src/styles/roots.scss
@@ -14,5 +14,14 @@ $btn-border-width: 0px;
     background-color: #fafafa;
     color: #333;
 }
+#youtube {
+    background-color: #ff0000;
+}
+#linkedin {
+    background-color: #0077b5;
+}
+#pinterest {
+    background-color: #e60023;
+}
 
 @import "./node_modules/bootstrap/scss/bootstrap.scss";
\ No newline at end of file