From ea8d6ffdf820b3fe72c0feb0766ee1707b45f909 Mon Sep 17 00:00:00 2001
From: Harsh R <53080940+fullstackninja864@users.noreply.github.com>
Date: Thu, 3 Aug 2023 05:25:38 +0530
Subject: [PATCH] chore(ui-ux): updated twitter logo to its latest version
 (#1843)

* chore(ui-ux): updated twitter logo to its latest version

* trigger GitHub actions

---------

Co-authored-by: pierregee <pierre@cakedefi.com>
---
 src/components/icons/assets/TwitterIcon.tsx | 18 ++++++++++++++++++
 src/layouts/components/Footer.tsx           |  4 ++--
 2 files changed, 20 insertions(+), 2 deletions(-)
 create mode 100644 src/components/icons/assets/TwitterIcon.tsx

diff --git a/src/components/icons/assets/TwitterIcon.tsx b/src/components/icons/assets/TwitterIcon.tsx
new file mode 100644
index 000000000..6ff19009e
--- /dev/null
+++ b/src/components/icons/assets/TwitterIcon.tsx
@@ -0,0 +1,18 @@
+import { SVGProps } from "react";
+import { useTheme } from "@contexts/ThemeContext";
+
+export function TwitterIcon({
+  color,
+  ...props
+}: SVGProps<SVGSVGElement>): JSX.Element {
+  const { theme } = useTheme();
+  const fill = theme === "dark" ? "#ffffff" : "#000000";
+  return (
+    <svg width="48" height="48" viewBox="0 0 48 48" fill="none" {...props}>
+      <path
+        d="M10.0681 10.8965L20.8786 25.3514L10 37.1035H12.4485L21.9729 26.8141L29.6681 37.1035H38L26.581 21.8358L36.7069 10.8965H34.2584L25.4872 20.3726L18.4 10.8965H10.0681ZM13.6688 12.7004H17.4964L34.3989 35.3001H30.5712L13.6688 12.7004Z"
+        fill={fill}
+      />
+    </svg>
+  );
+}
diff --git a/src/layouts/components/Footer.tsx b/src/layouts/components/Footer.tsx
index 0dfbe1ee7..b11d5902e 100644
--- a/src/layouts/components/Footer.tsx
+++ b/src/layouts/components/Footer.tsx
@@ -8,7 +8,6 @@ import {
   FaLinkedin,
   FaReddit,
   FaTelegram,
-  FaTwitterSquare,
   FaYoutube,
 } from "react-icons/fa";
 import { Container } from "@components/commons/Container";
@@ -16,6 +15,7 @@ import { NetlifyLightLogo } from "@components/icons/NetlifyLightLogo";
 import { useSelector } from "react-redux";
 import { RootState } from "@store/index";
 import { HoverPopover } from "@components/commons/popover/HoverPopover";
+import { TwitterIcon } from "@components/icons/assets/TwitterIcon";
 
 export function Footer(): JSX.Element {
   return (
@@ -79,7 +79,7 @@ function FooterSectionSocial(): JSX.Element {
           text="Twitter"
           testId="FooterSectionSocial.Twitter"
         >
-          <FaTwitterSquare size={24} />
+          <TwitterIcon width={24} height={24} />
         </FooterSocialRow>
         <FooterSocialRow
           url="https://github.com/DeFiCh"