fixing socialIcons ui

starknet-io · Apr 1, 2024 · ab0b5b8 · ab0b5b8
1 parent 72b1555
commit ab0b5b8
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 33 deletions.
diff --git a/workspaces/website/src/pages/content/@slug/PostPage.tsx b/workspaces/website/src/pages/content/@slug/PostPage.tsx
@@ -188,8 +188,10 @@ export function PostPage(props: Props): JSX.Element {
                 {post.post_desc}
               </Heading>
             )}
-
-            <Divider mt="8px" mb="48px" />
+            <Flex alignItems={"center"} gap={"8px"}>
+              <SocialShare params={{ slug, locale }} />
+            </Flex>
+            <Divider mt={{ base: "56px", xl: "8px" }} mb="48px" />
 
             {post.post_type !== "article" && (
               <Flex mb={!post.blocks?.length ? "32px" : 0} direction="column">
@@ -219,7 +221,6 @@ export function PostPage(props: Props): JSX.Element {
                 </Flex>
               </Flex>
             )}
-
             {(post.blocks?.length ?? 0) > 0 && (
               <Flex direction="column" gap="32px" marginBottom={"96px"}>
                 {post.blocks?.map((block, i) => (
@@ -242,19 +243,15 @@ export function PostPage(props: Props): JSX.Element {
                 </Button>
               ))}
             </Flex>
-            <Flex gap={"24px"}>
-              <Flex alignItems={"center"} gap={"8px"}>
-                <SocialShare params={{ slug, locale }} />
-              </Flex>
-            </Flex>
+            <Flex gap={"24px"}></Flex>
           </Box>
         </Box>
       </Grid>
 
       <Divider mb={"96px"} mt={"80px"} />
 
-      <Heading color="heading-navy-fg" marginBottom={"48px"} variant={"h4"}>
-        {"May also interest you"}
+      <Heading color="heading-navy-fg" marginBottom="48px" variant="h4">
+        May also interest you
       </Heading>
 
       <InstantSearch

diff --git a/workspaces/website/src/pages/content/@slug/SocialShare/SocialShare.tsx b/workspaces/website/src/pages/content/@slug/SocialShare/SocialShare.tsx
@@ -1,30 +1,20 @@
 import { Flex, Icon, Text } from "@chakra-ui/react";
 import {
-  // FacebookShareButton,
   LinkedinShareButton,
   TwitterShareButton,
   TelegramShareButton,
 } from "react-share";
 import { FaTelegram } from "react-icons/fa";
 import { FaTwitter } from "react-icons/fa";
-// import { FaDiscord } from "react-icons/fa6";
 import { FaLinkedin } from "react-icons/fa";
 
 interface Props {
   readonly params: LocaleParams & {
     readonly slug: string;
   };
-  readonly env?: {
-    readonly ALGOLIA_INDEX: string;
-    readonly ALGOLIA_APP_ID: string;
-    readonly ALGOLIA_SEARCH_API_KEY: string;
-    readonly SITE_URL: string;
-  };
 }
-const SocialShare = ({ params: { slug, locale }, env }: Props) => {
-  const shareUrl = `${
-    env?.SITE_URL || "https://www.starknet.io"
-  }${locale}/content/${slug}`;
+const SocialShare = ({ params: { slug, locale } }: Props) => {
+  const shareUrl = `${import.meta.env.VITE_SITE_URL}${locale}/content/${slug}`;
   return (
     <Flex
       gap={"24px"}
@@ -41,31 +31,25 @@ const SocialShare = ({ params: { slug, locale }, env }: Props) => {
       >
         <TwitterShareButton url={shareUrl}>
           <Icon
-            boxSize="28px"
+            title="TwitterShareButton"
+            boxSize="22px"
             color="grey.coolText"
             _dark={{ color: "grey.morning" }}
             as={FaTwitter}
           />
         </TwitterShareButton>
         <TelegramShareButton url={shareUrl}>
           <Icon
-            boxSize="28px"
+            title="TelegramShareButton"
+            boxSize="22px"
             color="grey.coolText"
             _dark={{ color: "grey.morning" }}
             as={FaTelegram}
           />
         </TelegramShareButton>
-        {/* need to be discord */}
-        {/* <FacebookShareButton url={shareUrl}>
-          <Icon
-            boxSize="28px"
-            opacity={0.6}
-            color="text-hero-fg"
-            as={FaDiscord}
-          />
-        </FacebookShareButton> */}
         <LinkedinShareButton url={shareUrl}>
           <Icon
+            title="LinkedinShareButton"
             boxSize="28px"
             color="grey.coolText"
             _dark={{ color: "grey.morning" }}