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 (
+
+ );
+}
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 {
{SOCIAL_LINKS.map((link) => (
-
+
))}
@@ -272,7 +273,7 @@ function LinkItemRow({
);
}
-function SocialIcon({
+function SocialLink({
iconName,
url,
testID,
@@ -291,18 +292,38 @@ function SocialIcon({
)}
testID={testID}
>
-
+
);
}
+function SocialIcon({
+ name,
+}: {
+ name: React.ComponentProps["name"];
+}) {
+ const { isLight } = useThemeContext();
+ if (name === "twitter") {
+ return (
+
+ );
+ }
+ return (
+
+ );
+}
+
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[` should match snapshot 1`] = `
}
testID="twitter_social"
>
-
+
+
+
+
+