From 77e9ba7c59c78c7fd04c382f0da5cf090f174ac7 Mon Sep 17 00:00:00 2001
From: iAmir <hhm6@yahoo.com>
Date: Fri, 10 Nov 2023 10:54:46 +0330
Subject: [PATCH] fix how social icons work and fix X logo

---
 frontend/public/images/assets/x.svg |  2 +-
 frontend/src/pages/index.tsx        | 61 +++++++++++++++++++++++------
 2 files changed, 49 insertions(+), 14 deletions(-)

diff --git a/frontend/public/images/assets/x.svg b/frontend/public/images/assets/x.svg
index 203542e9a..99c16c472 100644
--- a/frontend/public/images/assets/x.svg
+++ b/frontend/public/images/assets/x.svg
@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?>
 <svg viewBox="0 0 1200 1227" fill="none" xmlns="http://www.w3.org/2000/svg">
-	<path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" fill="#7466D4"/>
+	<path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" fill="#FFFFFF"/>
 </svg>
diff --git a/frontend/src/pages/index.tsx b/frontend/src/pages/index.tsx
index 5730cafcc..2912e615c 100644
--- a/frontend/src/pages/index.tsx
+++ b/frontend/src/pages/index.tsx
@@ -12,7 +12,7 @@ import {
   Text,
   useColorMode,
   useColorModeValue,
-  VStack,
+  VStack
 } from "@chakra-ui/react";
 import { GetStaticPropsContext } from "next";
 import Head from "next/head";
@@ -25,8 +25,9 @@ import { MarkdownContent } from "src/mdx-helpers/types";
 //Components
 import Card from "../components/site/Card";
 //Styles
-import heroStyles from "../styles/Hero.module.css";
+import React from "react";
 import Roads from "src/components/icons/Roads";
+import heroStyles from "../styles/Hero.module.css";
 
 const DownloadButton = (props: { link: string; title: string }) => {
   return (
@@ -137,31 +138,38 @@ const Home = () => {
       alt: "discord icon",
       src: "/images/assets/discord-icon.svg",
       href: "https://discord.com/invite/samp",
+      size: 36,
     },
     {
       alt: "facebook icon",
       src: "/images/assets/facebook.svg",
       href: "https://www.facebook.com/openmultiplayer",
+      size: 33,
     },
     {
       alt: "instagram icon",
       src: "/images/assets/instagram.svg",
       href: "https://instagram.com/openmultiplayer/",
+      size: 33,
     },
     {
       alt: "twitch icon",
       src: "/images/assets/twitch.svg",
       href: "https://twitch.tv/openmultiplayer",
+      size: 29,
     },
     {
       alt: "x icon",
       src: "/images/assets/x.svg",
       href: "https://x.com/openmultiplayer",
+      size: 17,
+      background: true,
     },
     {
       alt: "youtube icon",
       src: "/images/assets/youtube.svg",
       href: "https://youtube.com/openmultiplayer",
+      size: 35,
     },
   ];
 
@@ -238,20 +246,47 @@ const Home = () => {
           </Flex>
           <Center>
             <HStack
-              gridGap="1.2em"
+              gridGap="0.5em"
               color="#7466D4"
               mt={{ base: "3em", md: "0" }}
+              style={{ justifyContent: "space-around" }}
             >
-              {socials.map((social, index) => (
-                <a key={index} href={social.href} target="__blank">
-                  <Image
-                    src={social.src}
-                    alt={social.alt}
-                    width="24px"
-                    height="24px"
-                  />
-                </a>
-              ))}
+              {socials.map((social, index) => {
+                const iconSize = `${social.size}px`;
+                const style: React.CSSProperties = {
+                  display: "flex",
+                  justifyContent: "center",
+                  ...(social.background && {
+                    backgroundColor: "#7466d4",
+                    width: `${social.size + 12}px`,
+                    height: `${social.size + 12}px`,
+                    borderRadius: 5,
+                  }),
+                };
+
+                return (
+                  <Box
+                    boxSize={10}
+                    alignItems="center"
+                    justifyContent={"center"}
+                    display="flex"
+                  >
+                    <a
+                      key={index}
+                      href={social.href}
+                      style={style}
+                      target="__blank"
+                    >
+                      <Image
+                        src={social.src}
+                        alt={social.alt}
+                        width={iconSize}
+                        height={iconSize}
+                      />
+                    </a>
+                  </Box>
+                );
+              })}
             </HStack>
           </Center>
         </Box>