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" > - + + + + +