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

---
 .../components/icons/assets/TwitterIcon.tsx   | 23 ++++++++
 .../screens/Settings/screens/AboutScreen.tsx  | 43 +++++++++++----
 .../__snapshots__/AboutScreen.test.tsx.snap   | 52 ++++++++++++++++++-
 3 files changed, 106 insertions(+), 12 deletions(-)
 create mode 100644 mobile-app/app/components/icons/assets/TwitterIcon.tsx

diff --git a/mobile-app/app/components/icons/assets/TwitterIcon.tsx b/mobile-app/app/components/icons/assets/TwitterIcon.tsx
new file mode 100644
index 0000000000..bfa869969e
--- /dev/null
+++ b/mobile-app/app/components/icons/assets/TwitterIcon.tsx
@@ -0,0 +1,23 @@
+import Svg, { Path, SvgProps } from "react-native-svg";
+
+export function TwitterIcon({
+  testID,
+  color,
+  ...props
+}: SvgProps): JSX.Element {
+  return (
+    <Svg
+      width="48"
+      height="48"
+      viewBox="0 0 48 48"
+      fill="none"
+      testID={testID}
+      {...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={color}
+      />
+    </Svg>
+  );
+}
diff --git a/mobile-app/app/screens/AppNavigator/screens/Settings/screens/AboutScreen.tsx b/mobile-app/app/screens/AppNavigator/screens/Settings/screens/AboutScreen.tsx
index 05caf715a6..447b1b566d 100644
--- a/mobile-app/app/screens/AppNavigator/screens/Settings/screens/AboutScreen.tsx
+++ b/mobile-app/app/screens/AppNavigator/screens/Settings/screens/AboutScreen.tsx
@@ -10,7 +10,7 @@ import {
   ThemedTouchableOpacityV2,
   ThemedViewV2,
 } from "@components/themed";
-import { tailwind } from "@tailwind";
+import { getColor, tailwind } from "@tailwind";
 import { translate } from "@translations";
 import { NavigationProp, useNavigation } from "@react-navigation/native";
 import { openURL } from "@api/linking";
@@ -21,6 +21,7 @@ import DeFiChainWalletImageDark from "@assets/images/DeFiChainWallet-dark.png";
 import GridBackgroundImageLight from "@assets/images/about-grid-bg-light.png";
 import GridBackgroundImageDark from "@assets/images/about-grid-bg-dark.png";
 import { VersionTag } from "@components/VersionTag";
+import { TwitterIcon } from "@components/icons/assets/TwitterIcon";
 import { SettingsParamList } from "../SettingsNavigator";
 
 interface AboutScreenLinks {
@@ -177,7 +178,7 @@ export function AboutScreen(): JSX.Element {
 
           <View style={tailwind("flex-row justify-center pt-11")}>
             {SOCIAL_LINKS.map((link) => (
-              <SocialIcon {...link} key={link.testID} />
+              <SocialLink {...link} key={link.testID} />
             ))}
           </View>
         </ImageBackground>
@@ -272,7 +273,7 @@ function LinkItemRow({
   );
 }
 
-function SocialIcon({
+function SocialLink({
   iconName,
   url,
   testID,
@@ -291,18 +292,38 @@ function SocialIcon({
       )}
       testID={testID}
     >
-      <ThemedIcon
-        dark={tailwind("text-mono-dark-v2-00")}
-        light={tailwind("text-mono-light-v2-00")}
-        style={tailwind("pl-px")}
-        iconType="MaterialCommunityIcons"
-        name={iconName}
-        size={24}
-      />
+      <SocialIcon name={iconName} />
     </ThemedTouchableOpacityV2>
   );
 }
 
+function SocialIcon({
+  name,
+}: {
+  name: React.ComponentProps<typeof MaterialCommunityIcons>["name"];
+}) {
+  const { isLight } = useThemeContext();
+  if (name === "twitter") {
+    return (
+      <TwitterIcon
+        color={getColor(isLight ? "mono-light-v2-00" : "mono-dark-v2-00")}
+        width={24}
+        height={24}
+      />
+    );
+  }
+  return (
+    <ThemedIcon
+      dark={tailwind("text-mono-dark-v2-00")}
+      light={tailwind("text-mono-light-v2-00")}
+      style={tailwind("pl-px")}
+      iconType="MaterialCommunityIcons"
+      name={name}
+      size={24}
+    />
+  );
+}
+
 function AboutLinkItem({
   link,
   isLast,
diff --git a/mobile-app/app/screens/AppNavigator/screens/Settings/screens/__snapshots__/AboutScreen.test.tsx.snap b/mobile-app/app/screens/AppNavigator/screens/Settings/screens/__snapshots__/AboutScreen.test.tsx.snap
index 2021669964..5117d6ba43 100644
--- a/mobile-app/app/screens/AppNavigator/screens/Settings/screens/__snapshots__/AboutScreen.test.tsx.snap
+++ b/mobile-app/app/screens/AppNavigator/screens/Settings/screens/__snapshots__/AboutScreen.test.tsx.snap
@@ -356,7 +356,57 @@ exports[`<AboutScreen /> should match snapshot 1`] = `
             }
             testID="twitter_social"
           >
-            <Text />
+            <RNSVGSvgView
+              align="xMidYMid"
+              bbHeight="24"
+              bbWidth="24"
+              fill="none"
+              focusable={false}
+              height={24}
+              meetOrSlice={0}
+              minX={0}
+              minY={0}
+              style={
+                [
+                  {
+                    "backgroundColor": "transparent",
+                    "borderWidth": 0,
+                  },
+                  {
+                    "flex": 0,
+                    "height": 24,
+                    "width": 24,
+                  },
+                ]
+              }
+              vbHeight={48}
+              vbWidth={48}
+              width={24}
+            >
+              <RNSVGGroup
+                fill={null}
+                propList={
+                  [
+                    "fill",
+                  ]
+                }
+              >
+                <RNSVGPath
+                  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={
+                    {
+                      "payload": 4294967295,
+                      "type": 0,
+                    }
+                  }
+                  propList={
+                    [
+                      "fill",
+                    ]
+                  }
+                />
+              </RNSVGGroup>
+            </RNSVGSvgView>
           </View>
           <View
             accessibilityState={