From c1d94aec4f459e4b8b2824ebfc5a28f1c2f11201 Mon Sep 17 00:00:00 2001
From: kien-ngo <github@kien.ngo>
Date: Fri, 27 Sep 2024 01:23:58 +0000
Subject: [PATCH] [Dashboard] Replace SiGithub (#4811)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on replacing the usage of the `SiGithub` icon from `@react-icons` with a custom `GithubIcon` component across several files in the dashboard application.

### Detailed summary
- Replaced `SiGithub` with `GithubIcon` in:
  - `GameCard.tsx`
  - `app-footer.tsx`
  - `edit-profile.tsx`
  - `socialLinks.tsx`
  - `PublisherSocials.tsx`
- Added `GithubIcon` component in `GithubIcon.tsx` with SVG implementation.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
---
 .../src/@/components/blocks/app-footer.tsx     |  4 ++--
 .../publisher/PublisherSocials.tsx             |  4 ++--
 .../publisher/edit-profile.tsx                 |  4 ++--
 .../src/components/footer/socialLinks.tsx      |  4 ++--
 .../icons/brand-icons/GithubIcon.tsx           | 18 ++++++++++++++++++
 .../product-pages/common/GameCard.tsx          |  4 ++--
 6 files changed, 28 insertions(+), 10 deletions(-)
 create mode 100644 apps/dashboard/src/components/icons/brand-icons/GithubIcon.tsx

diff --git a/apps/dashboard/src/@/components/blocks/app-footer.tsx b/apps/dashboard/src/@/components/blocks/app-footer.tsx
index 77d1228a28a..fc960237148 100644
--- a/apps/dashboard/src/@/components/blocks/app-footer.tsx
+++ b/apps/dashboard/src/@/components/blocks/app-footer.tsx
@@ -1,10 +1,10 @@
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import { ThirdwebMiniLogo } from "app/components/ThirdwebMiniLogo";
+import { GithubIcon } from "components/icons/brand-icons/GithubIcon";
 import Link from "next/link";
 import {
   SiDiscord,
-  SiGithub,
   SiInstagram,
   SiLinkedin,
   SiReddit,
@@ -35,7 +35,7 @@ export function AppFooter(props: AppFooterProps) {
           <div className="flex flex-row gap-3">
             <Button size="icon" variant="ghost" asChild className="size-9">
               <Link href="https://github.com/thirdweb-dev" target="_blank">
-                <SiGithub className="size-5 text-muted-foreground" />
+                <GithubIcon className="size-5 text-muted-foreground" />
               </Link>
             </Button>
             <Button size="icon" variant="ghost" asChild className="size-9">
diff --git a/apps/dashboard/src/components/contract-components/publisher/PublisherSocials.tsx b/apps/dashboard/src/components/contract-components/publisher/PublisherSocials.tsx
index 7f01e837dd6..8713122199e 100644
--- a/apps/dashboard/src/components/contract-components/publisher/PublisherSocials.tsx
+++ b/apps/dashboard/src/components/contract-components/publisher/PublisherSocials.tsx
@@ -1,12 +1,12 @@
 import { ButtonGroup, type ButtonGroupProps, Icon } from "@chakra-ui/react";
 import { SiDiscord } from "@react-icons/all-files/si/SiDiscord";
 import { SiFacebook } from "@react-icons/all-files/si/SiFacebook";
-import { SiGithub } from "@react-icons/all-files/si/SiGithub";
 import { SiLinkedin } from "@react-icons/all-files/si/SiLinkedin";
 import { SiMedium } from "@react-icons/all-files/si/SiMedium";
 import { SiReddit } from "@react-icons/all-files/si/SiReddit";
 import { SiTelegram } from "@react-icons/all-files/si/SiTelegram";
 import { SiTwitter } from "@react-icons/all-files/si/SiTwitter";
+import { GithubIcon } from "components/icons/brand-icons/GithubIcon";
 import type { ProfileMetadata } from "constants/schemas";
 import { FiGlobe } from "react-icons/fi";
 import { LinkButton, TrackedIconButton } from "tw-components";
@@ -67,7 +67,7 @@ export const PublisherSocials: React.FC<PublisherSocialsProps> = ({
         }
         bg="transparent"
         aria-label="github"
-        icon={<Icon as={SiGithub} />}
+        icon={<GithubIcon className="size-4" />}
         category={TRACKING_CATEGORY}
         label="github"
       />
diff --git a/apps/dashboard/src/components/contract-components/publisher/edit-profile.tsx b/apps/dashboard/src/components/contract-components/publisher/edit-profile.tsx
index 3b4ad58989c..4d59aeef026 100644
--- a/apps/dashboard/src/components/contract-components/publisher/edit-profile.tsx
+++ b/apps/dashboard/src/components/contract-components/publisher/edit-profile.tsx
@@ -10,9 +10,9 @@ import {
   useDisclosure,
 } from "@chakra-ui/react";
 import { SiDiscord } from "@react-icons/all-files/si/SiDiscord";
-import { SiGithub } from "@react-icons/all-files/si/SiGithub";
 import { SiTwitter } from "@react-icons/all-files/si/SiTwitter";
 import { useQueryClient } from "@tanstack/react-query";
+import { GithubIcon } from "components/icons/brand-icons/GithubIcon";
 import { FileInput } from "components/shared/FileInput";
 import {
   DASHBOARD_ENGINE_RELAYER_URL,
@@ -214,7 +214,7 @@ export const EditProfile: React.FC<EditProfileProps> = ({
           <FormControl isInvalid={!!errors.github}>
             <FormLabel>
               <div className="flex flex-row gap-2">
-                <Icon as={SiGithub} boxSize={4} />
+                <GithubIcon className="size-4" />
                 GitHub
               </div>
             </FormLabel>
diff --git a/apps/dashboard/src/components/footer/socialLinks.tsx b/apps/dashboard/src/components/footer/socialLinks.tsx
index 5413e83c6b9..9eb227dd6d2 100644
--- a/apps/dashboard/src/components/footer/socialLinks.tsx
+++ b/apps/dashboard/src/components/footer/socialLinks.tsx
@@ -1,10 +1,10 @@
 import { SiDiscord } from "@react-icons/all-files/si/SiDiscord";
-import { SiGithub } from "@react-icons/all-files/si/SiGithub";
 import { SiInstagram } from "@react-icons/all-files/si/SiInstagram";
 import { SiLinkedin } from "@react-icons/all-files/si/SiLinkedin";
 import { SiTiktok } from "@react-icons/all-files/si/SiTiktok";
 import { SiTwitter } from "@react-icons/all-files/si/SiTwitter";
 import { SiYoutube } from "@react-icons/all-files/si/SiYoutube";
+import { GithubIcon } from "components/icons/brand-icons/GithubIcon";
 
 interface socialLinkInfo {
   link: string;
@@ -55,6 +55,6 @@ export const SOCIALS: socialLinkInfo[] = [
     link: "https://github.com/thirdweb-dev",
     ariaLabel: "GitHub",
     label: "gitHub",
-    icon: <SiGithub fontSize={socialIconSize} />,
+    icon: <GithubIcon fontSize={socialIconSize} className="size-5" />,
   },
 ];
diff --git a/apps/dashboard/src/components/icons/brand-icons/GithubIcon.tsx b/apps/dashboard/src/components/icons/brand-icons/GithubIcon.tsx
new file mode 100644
index 00000000000..cf06395ab38
--- /dev/null
+++ b/apps/dashboard/src/components/icons/brand-icons/GithubIcon.tsx
@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+
+export const GithubIcon = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      role="img"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      width={24}
+      height={24}
+      {...props}
+    >
+      <title>GitHub</title>
+      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+    </svg>
+  );
+};
diff --git a/apps/dashboard/src/components/product-pages/common/GameCard.tsx b/apps/dashboard/src/components/product-pages/common/GameCard.tsx
index c41ea9d6467..06fb787cd7a 100644
--- a/apps/dashboard/src/components/product-pages/common/GameCard.tsx
+++ b/apps/dashboard/src/components/product-pages/common/GameCard.tsx
@@ -1,5 +1,5 @@
 import { Box, Flex, useBreakpointValue } from "@chakra-ui/react";
-import { SiGithub } from "@react-icons/all-files/si/SiGithub";
+import { GithubIcon } from "components/icons/brand-icons/GithubIcon";
 import { useTrack } from "hooks/analytics/useTrack";
 import NextImage, { type StaticImageData } from "next/image";
 import { IoGameControllerOutline } from "react-icons/io5";
@@ -96,7 +96,7 @@ export const GameCard: React.FC<GameCardProps> = ({
             }}
             size="sm"
             variant="ghost"
-            icon={<SiGithub />}
+            icon={<GithubIcon className="size-4" />}
             aria-label="GitHub"
             category={TRACK_CATEGORY}
             label={game.id}