From 44e05b5d60e6e47718876ef91e5a315918c3e4a9 Mon Sep 17 00:00:00 2001
From: 87Prashant <87KumarPrashant@gmail.com>
Date: Mon, 4 Jul 2022 07:32:29 +0530
Subject: [PATCH] [Style]: Make ShareProfile component responsive

---
 src/Components/ShareIcon.js    |  2 +-
 src/Components/ShareProfile.js | 11 ++++++++---
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/Components/ShareIcon.js b/src/Components/ShareIcon.js
index b0c8cf0d827..5f13c0d9935 100644
--- a/src/Components/ShareIcon.js
+++ b/src/Components/ShareIcon.js
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types'
 function ShareIcon({ link, label, iconName }) {
   return (
     <a
-      className="mx-5"
+      className="mx-4 sm:mx-5"
       href={link}
       target="_blank"
       rel="noopener noreferrer"
diff --git a/src/Components/ShareProfile.js b/src/Components/ShareProfile.js
index 31eed2eac33..67de6a12991 100644
--- a/src/Components/ShareProfile.js
+++ b/src/Components/ShareProfile.js
@@ -17,6 +17,8 @@ export default function ShareProfile({ username }) {
     })
   }
 
+  document.querySelector('body').style.overflow = show ? 'hidden' : 'visible'
+
   return (
     <div className="flex justify-content-center">
       <Toast ref={toast} />
@@ -41,7 +43,7 @@ export default function ShareProfile({ username }) {
 
           <div
             style={{ marginTop: '40vh', borderRadius: '1rem' }}
-            className="flex bg-white justify-content-center z-5 p-6 absolute mx-auto align-items-center"
+            className="flex bg-white justify-content-center z-5 absolute mx-auto align-items-center p-3 sm:p-6"
           >
             <ShareIcon
               link={`https://www.facebook.com/sharer/sharer.php?u=${profileUrl}`}
@@ -54,17 +56,20 @@ export default function ShareProfile({ username }) {
               iconName="twitter"
             />
             <ShareIcon
-              link={`https://www.linkedin.com/sharing/share-offsite?url=${encodeURIComponent(profileUrl)}`}
+              link={`https://www.linkedin.com/sharing/share-offsite?url=${encodeURIComponent(
+                profileUrl,
+              )}`}
               label="Share on LinkedIn"
               iconName="linkedin"
             />
             <a
+              className="mx-4 sm:mx-5"
               role="button"
               onClick={CopyLink}
               aria-label="Copy link to profile"
             >
               <GetIcons
-                className="w-2rem h-2rem my-2rem cursor-pointer mx-5 share-icons copyLink"
+                className="w-2rem h-2rem my-2rem cursor-pointer share-icons copyLink"
                 iconName="link"
                 size={20}
               />