fix social icons sizes

starknet-io · Apr 1, 2024 · 9604103 · 9604103
1 parent c4a5f55
commit 9604103
Showing 1 changed file with 21 additions and 19 deletions.
diff --git a/workspaces/website/src/pages/content/@slug/SocialShare/SocialShare.tsx b/workspaces/website/src/pages/content/@slug/SocialShare/SocialShare.tsx
@@ -1,5 +1,9 @@
 import { Flex, Icon, Text } from "@chakra-ui/react";
-import { TwitterShareButton, TelegramShareButton } from "react-share";
+import {
+  TwitterShareButton,
+  TelegramShareButton,
+  LinkedinShareButton,
+} from "react-share";
 import { FaTelegram } from "react-icons/fa";
 import { FaTwitter } from "react-icons/fa";
 import { FaLinkedin } from "react-icons/fa";
@@ -11,7 +15,7 @@ interface Props {
 }
 
 const SocialShare = ({ params: { slug, locale } }: Props) => {
-  const shareUrl = `${import.meta.env.VITE_SITE_URL}${locale}/content/${slug}`;
+  const shareUrl = `${import.meta.env.VITE_SITE_URL}/${locale}/content/${slug}`;
   const encodedUrl = encodeURIComponent(shareUrl);
   const linkedinShareUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${encodedUrl}`;
   const handleLinkedinShare = () => window.open(linkedinShareUrl, "_blank");
@@ -27,38 +31,36 @@ const SocialShare = ({ params: { slug, locale } }: Props) => {
 
       <Flex
         alignItems={"center"}
-        gap={"8px"}
+        mt={{ base: "unset", xl: "4px" }}
+        gap="8px"
         flexDir={{ base: "row", xl: "column" }}
       >
-        <TwitterShareButton url={shareUrl}>
+        <TwitterShareButton url={shareUrl} title="Twitter share">
           <Icon
-            title="TwitterShareButton"
-            boxSize="26px"
-            pt="1"
+            boxSize="24px"
             color="grey.coolText"
             _dark={{ color: "grey.morning" }}
             as={FaTwitter}
           />
         </TwitterShareButton>
-        <TelegramShareButton url={shareUrl}>
+        <TelegramShareButton url={shareUrl} title="Telegram share">
           <Icon
             title="TelegramShareButton"
-            boxSize="26px"
-            pt="1"
+            boxSize="24px"
             color="grey.coolText"
             _dark={{ color: "grey.morning" }}
             as={FaTelegram}
           />
         </TelegramShareButton>
-        <Icon
-          title="LinkedinShareButton"
-          boxSize="22px"
-          padding="0"
-          color="grey.coolText"
-          _dark={{ color: "grey.morning" }}
-          as={FaLinkedin}
-          onClick={handleLinkedinShare}
-        />
+        <LinkedinShareButton url={shareUrl} title="Linkedin share">
+          <Icon
+            title="TelegramShareButton"
+            boxSize="24px"
+            color="grey.coolText"
+            _dark={{ color: "grey.morning" }}
+            as={FaLinkedin}
+          />
+        </LinkedinShareButton>
       </Flex>
     </Flex>
   );