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

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>
+  );
+}

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,