From a74802d33afd2edd45cee240b0ee2120f1a533eb Mon Sep 17 00:00:00 2001
From: Sarbik Betal <sarbikb55@gmail.com>
Date: Fri, 25 Sep 2020 15:37:39 +0530
Subject: [PATCH] [Fix] Align social icons to the left

---
 src/components/markdown.js        | 19 +++++++++++++++++--
 src/components/markdownPreview.js |  3 ++-
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/components/markdown.js b/src/components/markdown.js
index 3c41c48..ed5e305 100644
--- a/src/components/markdown.js
+++ b/src/components/markdown.js
@@ -26,6 +26,18 @@ const Markdown = props => {
     }
     return ""
   }
+  const SectionTitle = props => {
+    if (props.label) {
+      return (
+        <>
+          {`<h3 align="left">${props.label}</h3>`}
+          <br />
+          <br />
+        </>
+      )
+    }
+    return ""
+  }
   const DisplayWork = props => {
     if (props.prefix && props.project) {
       if (props.link) {
@@ -61,7 +73,7 @@ const Markdown = props => {
     if (props.username) {
       return (
         <>
-          {`<a href="${props.base}/${props.username}" target="blank"><img align="center" src="${props.icon}" alt="${props.username}" height="30" width="30" /></a>`}
+          {`<a href="${props.base}/${props.username}" target="blank" style="margin:0.5rem"><img align="center" src="${props.icon}" alt="${props.username}" height="30" width="30" /></a>`}
           <br />
         </>
       )
@@ -273,7 +285,10 @@ const Markdown = props => {
           github={props.social.github}
         />
       </>
-      {isSocial(props.social) ? `<p align="center">` : ""} <br />
+      {isSocial(props.social) ? `<p align="left">` : ""} <br />
+      <>
+        <SectionTitle label="Connect with me:" />
+      </>
       <>
         <DisplaySocial
           base="https://codepen.io"
diff --git a/src/components/markdownPreview.js b/src/components/markdownPreview.js
index 8eb9737..2d87d9b 100644
--- a/src/components/markdownPreview.js
+++ b/src/components/markdownPreview.js
@@ -104,7 +104,8 @@ const MarkdownPreview = props => {
   }
   const SocialPreview = props => {
     return (
-      <div className="flex justify-center items-end">
+      <div className="flex justify-start items-end flex-wrap">
+        <h3 className="w-full text-lg sm:text-xl">Connect with me:</h3> 
         <DisplaySocial
           base="https://codepen.io"
           icon="https://cdn.jsdelivr.net/npm/simple-icons@3.0.1/icons/codepen.svg"