fix discord button

Author: hunxjunedo

src/assets/images/icon_github_white.svg

@@ -1,7 +1,7 @@
-import { GitHub } from "@mui/icons-material";
 import { Box, Button, Typography } from "@mui/material";
-import { ArrowRight, MessageCircle } from "lucide-react";
+import { ArrowRight } from "lucide-react";
 import { useTranslation } from "react-i18next";
+import { FaDiscord, FaGithub } from "react-icons/fa";
 import { HeadingAndDescription } from "./FeaturesAndBenefitsSection";
 
 const GenericLinkButton = ({ icon, text, title }: { icon: React.ReactNode; text: string; title: string }) => (
@@ -13,7 +13,7 @@ const GenericLinkButton = ({ icon, text, title }: { icon: React.ReactNode; text:
         <Typography color="text.muted">{text}</Typography>
       </Box>
     </Box>
-    <ArrowRight size={22} style={{ color: "text.muted" }} />
+    <ArrowRight  size={22} style={{ color: "text.muted", justifySelf: 'end' }} />
   </Button>
 );
 
@@ -27,12 +27,12 @@ export default function CommunitySection() {
       />
       <Box sx={linkContainerStyles}>
         <GenericLinkButton
-          icon={<MessageCircle size={26} />}
+          icon={<FaDiscord size={26} />}
           title={t("community_section.discord.heading")}
           text={t("community_section.discord.body_text")}
         />
         <GenericLinkButton
-          icon={<GitHub sx={{ fontSize: 26 }} />}
+          icon={<FaGithub size={26} />}
           title={t("community_section.github.heading")}
           text={t("community_section.github.body_text")}
         />
@@ -43,9 +43,9 @@ export default function CommunitySection() {
 
 // Styles
 const buttonStyles = {
-  display: "flex",
-  justifyContent: "space-between",
+  display: "grid",
   alignItems: "center",
+  gridTemplateColumns: "90% 10%",
   p: 2,
   px: 3,
   borderRadius: "12px",

src/components/Home/CommunitySection.tsx

@@ -1,8 +1,9 @@
 import logo from "@/assets/images/logo.png";
 import { Box, Link, Stack, Typography } from "@mui/material";
-import { Gamepad2, Github } from "lucide-react";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
+import { FaDiscord, FaGithub } from "react-icons/fa";
+
 
 export default function Footer(): JSX.Element {
   const genericLinksStyles = { color: "text.muted", textDecoration: "none", ":hover": { color: "text.primary" } };
@@ -19,8 +20,8 @@ export default function Footer(): JSX.Element {
             <Typography fontWeight="bold" variant="h6">{t("essentials.name")}</Typography>
           </Stack>
           <Stack direction="row" spacing={3}>
-            <Link sx={genericLinksStyles} href="#"><Gamepad2 /></Link>
-            <Link sx={genericLinksStyles} href="#"><Github /></Link>
+            <Link sx={genericLinksStyles} href="#"><FaDiscord size={25} /></Link>
+            <Link sx={genericLinksStyles} href="#"><FaGithub size={25} /></Link>
           </Stack>
         </Stack>
         <Stack spacing={3}>