From e247f43864d17d219fb60196e88ed88635cd8b4a Mon Sep 17 00:00:00 2001
From: mikwee <mikwee@protonmail.ch>
Date: Sat, 20 Nov 2021 20:52:37 +0200
Subject: [PATCH] Button layout

---
 src/App.css           |  2 ++
 src/App.js            | 20 ++++++++++----------
 src/styles/roots.scss |  4 ++++
 3 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/App.css b/src/App.css
index 599c179..50702b0 100644
--- a/src/App.css
+++ b/src/App.css
@@ -20,6 +20,8 @@
 }
 #container {
   display: flex;
+  flex-direction: column;
+  align-items: flex-start;
   justify-content: center;
   margin-top: 3%;
 }
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index 5d3ec4b..35ae77a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -15,34 +15,34 @@ function App() {
       <div id="container">
         {data.links.map((rootDetail, index)=>{
           if(rootDetail.type === "facebook") {
-            res = <Button id="facebook" variant="primary" href={rootDetail.url}><Facebook/> {rootDetail.text}</Button>
+            res = <Button className="roots" id="facebook" variant="primary" href={rootDetail.url}><Facebook/> {rootDetail.text}</Button>
           }
           else if(rootDetail.type === "instagram") {
-            res = <Button id="instagram" variant="primary" href={rootDetail.url}><Instagram/> {rootDetail.text}</Button>
+            res = <Button className="roots" id="instagram" variant="primary" href={rootDetail.url}><Instagram/> {rootDetail.text}</Button>
           }
           else if (rootDetail.type === "twitter") {
-            res = <Button id="twitter" variant="primary" href={rootDetail.url}><Twitter/> {rootDetail.text}</Button>
+            res = <Button className="roots" id="twitter" variant="primary" href={rootDetail.url}><Twitter/> {rootDetail.text}</Button>
           }
           else if (rootDetail.type === "github") {
-            res = <Button id="github" variant="primary" href={rootDetail.url}><Github/> {rootDetail.text}</Button>
+            res = <Button className="roots" id="github" variant="primary" href={rootDetail.url}><Github/> {rootDetail.text}</Button>
           }
           else if (rootDetail.type === "youtube") {
-            res = <Button id="youtube" variant="primary" href={rootDetail.url}><Youtube/> {rootDetail.text}</Button>
+            res = <Button className="roots" id="youtube" variant="primary" href={rootDetail.url}><Youtube/> {rootDetail.text}</Button>
           }
           else if (rootDetail.type === "linkedin") {
-            res = <Button id="linkedin" variant="primary" href={rootDetail.url}><Linkedin/> {rootDetail.text}</Button>
+            res = <Button className="roots" id="linkedin" variant="primary" href={rootDetail.url}><Linkedin/> {rootDetail.text}</Button>
           }
           else if (rootDetail.type === "pinterest") {
-            res = <Button id="pinterest" variant="primary" href={rootDetail.url}><Pinterest/> {rootDetail.text}</Button>
+            res = <Button className="roots" id="pinterest" variant="primary" href={rootDetail.url}><Pinterest/> {rootDetail.text}</Button>
           }
           else if (rootDetail.type === "tumblr") {
-            res = <Button id="tumblr" variant="primary" href={rootDetail.url}><Tumblr viewBox="250 0 300 200" width="32px" height="32px"/> {rootDetail.text}</Button>
+            res = <Button className="roots" id="tumblr" variant="primary" href={rootDetail.url}><Tumblr viewBox="250 0 300 200" width="32px" height="32px"/> {rootDetail.text}</Button>
           }
           else if (rootDetail.type === "reddit") {
-            res = <Button id="reddit" variant="primary" href={rootDetail.url}><Reddit/> {rootDetail.text}</Button>
+            res = <Button className="roots" id="reddit" variant="primary" href={rootDetail.url}><Reddit/> {rootDetail.text}</Button>
           }
           else if (rootDetail.type === "basic") {
-            res = <Button variant="primary" href={rootDetail.url}>{rootDetail.text}</Button>
+            res = <Button className="roots" variant="primary" href={rootDetail.url}>{rootDetail.text}</Button>
           }
           else {
             // throw "One of your roots has an unrecognized type. Check out the documentation for the supported types.";
diff --git a/src/styles/roots.scss b/src/styles/roots.scss
index 5989aa4..9bb7f0c 100644
--- a/src/styles/roots.scss
+++ b/src/styles/roots.scss
@@ -1,6 +1,10 @@
 $btn-border-radius: 25px;
 $btn-border-width: 0px;
 
+.roots {
+    margin: 0 auto;
+    margin-bottom: 1%;
+}
 #facebook {
     background-color: #1877f2;
 }