From 782042987b4f022c1d27fe1d61cfc685a8a79f15 Mon Sep 17 00:00:00 2001
From: karthxk07 <karthikkalyanam07@gmail.com>
Date: Fri, 29 Dec 2023 19:58:41 +0530
Subject: [PATCH] Improve UI for Profile>ConnectSocials

---
 .../Profile/ConnectSocials/index.jsx          |  9 +--
 .../Profile/ConnectSocials/styles.jsx         | 64 ++++++++-----------
 2 files changed, 30 insertions(+), 43 deletions(-)

diff --git a/src/components/Profile/ConnectSocials/index.jsx b/src/components/Profile/ConnectSocials/index.jsx
index f4af50d3..645cb730 100644
--- a/src/components/Profile/ConnectSocials/index.jsx
+++ b/src/components/Profile/ConnectSocials/index.jsx
@@ -21,9 +21,8 @@ const SocialButton = ({ Icon, isLinked, ...props }) => {
       className={`${classes.link} ${isLinked && classes.isLinked}`}
     >
       {Icon}
-      <Typography className={classes.text}>
-        {isLinked ? <CheckCircleIcon className={classes.isLinkedImg} /> : null}
-      </Typography>
+
+      {isLinked ? <CheckCircleIcon className={classes.isLinkedImg} /> : null}
     </Box>
   );
 };
@@ -57,7 +56,7 @@ const ConnectSocials = () => {
   return (
     <Card className={classes.root} data-testId="socialMediaPage">
       <CardContent className={classes.content}>
-        <Box className={classes.row} sx={{ marginBottom: 15 }}>
+        <Box className={classes.column}>
           <SocialButton
             isLinked={isProviderLinked("facebook")}
             onClick={() =>
@@ -85,8 +84,6 @@ const ConnectSocials = () => {
             }
             data-testId="githubButton"
           />
-        </Box>
-        <Box className={classes.row}>
           <SocialButton
             isLinked={isProviderLinked("google")}
             onClick={() =>
diff --git a/src/components/Profile/ConnectSocials/styles.jsx b/src/components/Profile/ConnectSocials/styles.jsx
index 90a5d476..db112df7 100644
--- a/src/components/Profile/ConnectSocials/styles.jsx
+++ b/src/components/Profile/ConnectSocials/styles.jsx
@@ -19,87 +19,77 @@ const useStyles = makeStyles(theme => ({
       padding: "15px 5px"
     }
   },
-  row: {
+  column: {
     display: "flex",
     justifyContent: "space-around",
-    alignItems: "center"
+    alignItems: "stretch",
+    flexDirection: "column",
+    margin: "0 5em 0 5em"
   },
+
   link: {
     display: "flex",
-    justifyContent: "center",
     alignItems: "center",
     borderRadius: 5,
     padding: "3px 0",
-    width: 245,
     "&:hover": {
       cursor: "pointer"
-    }
+    },
+    borderBottom: "0.1px solid #dfdfdf"
   },
   isLinked: {
-    opacity: "0.8",
-    cursor: "not-allowed"
+    opacity: 0.7,
+    "&:hover": {
+      cursor: "not-allowed"
+    }
   },
   isLinkedImg: {
     height: 18,
     width: 18,
     margin: "9px 0 0 5px",
+    marginLeft: "auto",
     color: "green"
   },
   button: {
-    height: 26,
+    height: 40,
     "&:hover": {
       transform: "scale(1.2)"
     },
-    marginLeft: 2,
-    marginRight: 23,
-    "@media (max-width: 500px)": {
-      marginLeft: 2,
-      marginRight: 10,
-      height: 20
-    }
+    transition: "200ms ease-in-out"
   },
   fb: {
-    fontSize: 31,
+    fontSize: 40,
     color: "#1877F2",
-    marginRight: 19,
     "&:hover": {
       transform: "scale(1.2)"
     },
-    "@media (max-width: 500px)": {
-      marginRight: 7,
-      fontSize: 24
-    }
+    transition: "200ms ease-in-out"
   },
   tw: {
     color: "#03A9F4",
-    fontSize: 30,
-    marginLeft: -3,
-    marginRight: 18,
+    fontSize: 40,
     "&:hover": {
       transform: "scale(1.2)"
     },
-    "@media (max-width: 500px)": {
-      marginRight: 6,
-      fontSize: 23
-    }
+    transition: "200ms ease-in-out"
   },
   git: {
-    fontSize: 26,
-    marginRight: 19,
+    fontSize: 40,
     "&:hover": {
       transform: "scale(1.2)"
     },
-    "@media (max-width: 500px)": {
-      marginRight: 7,
-      fontSize: 19
-    }
+    transition: "200ms ease-in-out"
   },
   text: {
-    fontFamily: "Poppins",
-    color: "#000",
+    fontFamily: "sans-serif",
+    fontSize: 15,
+    color: "black",
+
     "@media (max-width: 500px)": {
       fontSize: 12
-    }
+    },
+    flexGrow: 1,
+    marginLeft: 10
   }
 }));