From b82150c76c4fe488d20441a05684b85c0bc8235f Mon Sep 17 00:00:00 2001
From: Piyush Raj <11j21piyushraj@gmail.com>
Date: Mon, 24 Feb 2025 00:19:46 +0530
Subject: [PATCH] connect-social-ui-improved

---
 .../Profile/ConnectSocials/index.jsx          | 138 ++++++++++++------
 1 file changed, 92 insertions(+), 46 deletions(-)

diff --git a/src/components/Profile/ConnectSocials/index.jsx b/src/components/Profile/ConnectSocials/index.jsx
index f4af50d3..14f28a79 100644
--- a/src/components/Profile/ConnectSocials/index.jsx
+++ b/src/components/Profile/ConnectSocials/index.jsx
@@ -3,27 +3,95 @@ import Box from "@mui/material/Box";
 import Card from "@mui/material/Card";
 import CardContent from "@mui/material/CardContent";
 import Typography from "@mui/material/Typography";
+import Badge from "@mui/material/Badge";
 import GoogleImg from "../../../assets/orgs/google.png";
 import GitHubIcon from "@mui/icons-material/GitHub";
 import TwitterIcon from "@mui/icons-material/Twitter";
 import FacebookIcon from "@mui/icons-material/Facebook";
 import CheckCircleIcon from "@mui/icons-material/CheckCircle";
-import useStyles from "./styles";
-import { useDispatch, useSelector } from "react-redux";
+import { makeStyles } from "@mui/styles";
+import { useSelector } from "react-redux";
 import { useFirebase } from "react-redux-firebase";
 import { useHistory } from "react-router-dom";
 
-const SocialButton = ({ Icon, isLinked, ...props }) => {
+const useStyles = makeStyles((theme) => ({
+  root: {
+    maxWidth: 600,
+    margin: "auto",
+    borderRadius: theme.shape.borderRadius * 2,
+    boxShadow: "0 4px 20px rgba(0,0,0,0.1)",
+    backgroundColor: "#31363F",
+    padding: theme.spacing(3),
+  },
+  content: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+  },
+  row: {
+    display: "flex",
+    justifyContent: "space-evenly",
+    width: "100%",
+    marginBottom: theme.spacing(3),
+  },
+  link: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    padding: theme.spacing(2),
+    borderRadius: theme.shape.borderRadius,
+    border: "2px solid transparent",
+    transition: "all 0.3s ease",
+    cursor: "pointer",
+    "&:hover": {
+      borderColor: theme.palette.primary.light,
+      backgroundColor: theme.palette.action.hover,
+    },
+  },
+  isLinked: {
+    borderColor: theme.palette.success.main,
+  },
+  text: {
+    marginTop: theme.spacing(1),
+    fontWeight: 500,
+    fontSize: "1rem",
+    color: "#FFFFFF",
+  },
+  button: {
+    width: 40,
+    height: 40,
+    borderRadius: "50%",
+  },
+  fb: {
+    color: "#1877F2",
+    fontSize: 40,
+  },
+  git: {
+    color: "#FFFFFF",
+    fontSize: 40,
+  },
+  tw: {
+    color: "#1DA1F2",
+    fontSize: 40,
+  },
+  isLinkedImg: {
+    fontSize: 20,
+    color: theme.palette.success.main,
+  },
+}));
+
+const SocialButton = ({ icon, label, isLinked, ...props }) => {
   const classes = useStyles();
   return (
-    <Box
-      {...props}
-      className={`${classes.link} ${isLinked && classes.isLinked}`}
-    >
-      {Icon}
-      <Typography className={classes.text}>
-        {isLinked ? <CheckCircleIcon className={classes.isLinkedImg} /> : null}
-      </Typography>
+    <Box {...props} className={`${classes.link} ${isLinked ? classes.isLinked : ""}`}>
+      <Badge
+        overlap="circular"
+        anchorOrigin={{ vertical: "top", horizontal: "right" }}
+        badgeContent={isLinked ? <CheckCircleIcon className={classes.isLinkedImg} /> : null}
+      >
+        {icon}
+      </Badge>
+      <Typography className={classes.text}>{label}</Typography>
     </Box>
   );
 };
@@ -34,17 +102,13 @@ const ConnectSocials = () => {
   const history = useHistory();
 
   const providerData = useSelector(
-    ({
-      firebase: {
-        auth: { providerData }
-      }
-    }) => providerData
+    ({ firebase: { auth: { providerData } } }) => providerData || []
   );
 
-  const isProviderLinked = provider =>
-    providerData.some(item => item.providerId.includes(provider));
+  const isProviderLinked = (provider) =>
+    providerData.some((item) => item.providerId.includes(provider));
 
-  const linkWithProvider = provider =>
+  const linkWithProvider = (provider) =>
     firebase
       .auth()
       .currentUser.linkWithPopup(provider)
@@ -57,32 +121,23 @@ const ConnectSocials = () => {
   return (
     <Card className={classes.root} data-testId="socialMediaPage">
       <CardContent className={classes.content}>
-        <Box className={classes.row} sx={{ marginBottom: 15 }}>
+        <Box className={classes.row}>
           <SocialButton
             isLinked={isProviderLinked("facebook")}
             onClick={() =>
               linkWithProvider(new firebase.auth.FacebookAuthProvider())
             }
-            Icon={
-              <>
-                <FacebookIcon className={classes.fb}></FacebookIcon>
-                <span className={classes.text}>Facebook</span>
-              </>
-            }
+            icon={<FacebookIcon className={classes.fb} />}
+            label="Facebook"
             data-testId="facebookButton"
           />
-
           <SocialButton
             isLinked={isProviderLinked("github")}
             onClick={() =>
               linkWithProvider(new firebase.auth.GithubAuthProvider())
             }
-            Icon={
-              <>
-                <GitHubIcon className={classes.git}></GitHubIcon>
-                <span className={classes.text}>Github</span>
-              </>
-            }
+            icon={<GitHubIcon className={classes.git} />}
+            label="Github"
             data-testId="githubButton"
           />
         </Box>
@@ -92,12 +147,8 @@ const ConnectSocials = () => {
             onClick={() =>
               linkWithProvider(new firebase.auth.GoogleAuthProvider())
             }
-            Icon={
-              <>
-                <img src={GoogleImg} alt="google" className={classes.button} />
-                <span className={classes.text}>Google</span>
-              </>
-            }
+            icon={<img src={GoogleImg} alt="Google" className={classes.button} />}
+            label="Google"
             data-testId="googleButton"
           />
           <SocialButton
@@ -105,13 +156,8 @@ const ConnectSocials = () => {
             onClick={() =>
               linkWithProvider(new firebase.auth.TwitterAuthProvider())
             }
-            Icon={
-              <>
-                <TwitterIcon className={classes.tw}></TwitterIcon>
-
-                <span className={classes.text}>Twitter</span>
-              </>
-            }
+            icon={<TwitterIcon className={classes.tw} />}
+            label="Twitter"
             data-testId="twitterButton"
           />
         </Box>