feat: TAT-1659: Updated perps full screen modal announcement

app/components/UI/Perps/components/PerpsGTMModal/PerpsGTMModal.styles.ts

@@ -3,7 +3,7 @@ import { colors as importedColors } from '../../../../../styles/common';
 import Device from '../../../../../util/device';
 import { Theme } from '@metamask/design-tokens';
 
-const createStyles = (_theme: Theme) =>
+const createStyles = (theme: Theme, isDarkMode: boolean) =>
   StyleSheet.create({
     scroll: {
       flexGrow: 0,
@@ -12,30 +12,29 @@ const createStyles = (_theme: Theme) =>
       alignItems: 'center',
       paddingTop: 32,
     },
-    largeFoxWrapper: {
+    largeImageWrapper: {
       height: 330,
       alignItems: 'center',
     },
     title: {
-      fontSize: 60,
-      lineHeight: 60,
+      fontSize: Device.isLargeDevice() ? 50 : 45,
+      lineHeight: Device.isLargeDevice() ? 50 : 46,
       textAlign: 'center',
-      paddingTop: Device.isLargeDevice() ? 40 : 10,
-      fontFamily: 'MM Poly Regular',
-      color: importedColors.gettingStartedTextColor,
-      letterSpacing: -1,
+      paddingTop: Device.isLargeDevice() ? 45 : 30,
+      paddingHorizontal: 16,
+      fontFamily: Platform.OS === 'ios' ? 'MM Poly' : 'MM Poly Regular',
       ...(Platform.OS === 'ios' ? { fontWeight: '900' } : {}),
     },
     titleDescription: {
-      paddingTop: 20,
+      paddingTop: 16,
+      paddingHorizontal: Device.isLargeDevice() ? 5 : 10,
       textAlign: 'center',
       fontSize: 16,
-      fontFamily: 'MM Sans Regular',
-      color: importedColors.gettingStartedTextColor,
+      fontFamily: 'Geist-Regular',
       fontWeight: '500',
     },
-    foxImage: {
-      height: Device.isLargeDevice() ? 350 : 260,
+    image: {
+      height: Device.isLargeDevice() ? 500 : 380,
     },
     ctas: {
       flex: 1,
@@ -48,33 +47,27 @@ const createStyles = (_theme: Theme) =>
       flexDirection: 'column',
       justifyContent: 'flex-end',
       rowGap: 5,
-      marginBottom: 48,
+      marginBottom: 40,
       paddingHorizontal: 30,
     },
-    learnMoreButton: {
-      textDecorationLine: 'underline',
-      fontFamily: 'MMSans-Regular',
-      color: importedColors.gettingStartedTextColor,
-      textAlign: 'center',
-      paddingTop: 10,
-    },
     tryNowButton: {
       borderRadius: 12,
-      backgroundColor: importedColors.white,
+      backgroundColor: isDarkMode
+        ? importedColors.white
+        : importedColors.btnBlack,
     },
     tryNowButtonText: {
-      color: importedColors.gettingStartedTextColor,
+      color: isDarkMode ? importedColors.btnBlack : importedColors.white,
       fontWeight: '600',
       fontSize: 16,
     },
     notNowButton: {
       borderRadius: 12,
-      backgroundColor: importedColors.transparent,
+      backgroundColor: theme.colors.background.default,
       borderWidth: 1,
       borderColor: importedColors.transparent,
     },
     notNowButtonText: {
-      color: importedColors.gettingStartedTextColor,
       fontWeight: '500',
       fontSize: 16,
     },

app/components/UI/Perps/components/PerpsGTMModal/PerpsGTMModal.tsx

@@ -1,6 +1,6 @@
 import { useNavigation } from '@react-navigation/native';
 import React from 'react';
-import { Image, View } from 'react-native';
+import { Image, View, useColorScheme } from 'react-native';
 import { ScrollView } from 'react-native-gesture-handler';
 
 import { strings } from '../../../../../../locales/i18n';
@@ -16,12 +16,9 @@ import Text, {
 import { useMetrics } from '../../../../../components/hooks/useMetrics';
 import Routes from '../../../../../constants/navigation/Routes';
 import { MetaMetricsEvents } from '../../../../../core/Analytics';
-import Fox from '../../../../../images/branding/fox.png';
+import Character from '../../../../../images/character_1.png';
 import StorageWrapper from '../../../../../store/storage-wrapper';
-import {
-  baseStyles,
-  colors as importedColors,
-} from '../../../../../styles/common';
+import { baseStyles } from '../../../../../styles/common';
 import { PERPS_GTM_MODAL_SHOWN } from '../../../../../constants/storage';
 import { useTheme } from '../../../../../util/theme';
 import generateDeviceAnalyticsMetaData from '../../../../../util/metrics';
@@ -39,7 +36,9 @@ const PerpsGTMModal = () => {
   const { navigate } = useNavigation();
   const theme = useTheme();
 
-  const styles = createStyles(theme);
+  const isDarkMode = useColorScheme() === 'dark';
+
+  const styles = createStyles(theme, isDarkMode);
 
   const handleClose = async () => {
     await StorageWrapper.setItem(PERPS_GTM_MODAL_SHOWN, 'true');
@@ -83,7 +82,7 @@ const PerpsGTMModal = () => {
     <View
       style={[
         baseStyles.flexGrow,
-        { backgroundColor: importedColors.gettingStartedPageBackgroundColor },
+        { backgroundColor: theme.colors.background.default },
       ]}
       testID={PerpsGTMModalSelectorsIDs.PERPS_GTM_MODAL}
     >
@@ -103,10 +102,10 @@ const PerpsGTMModal = () => {
               {strings('perps.gtm_content.title_description')}
             </Text>
 
-            <View style={styles.largeFoxWrapper}>
+            <View style={styles.largeImageWrapper}>
               <Image
-                source={Fox}
-                style={styles.foxImage}
+                source={Character}
+                style={styles.image}
                 resizeMode="contain"
               />
             </View>

locales/languages/en.json

@@ -856,10 +856,10 @@
     "available_balance": "Available balance",
     "margin_used": "Margin Used",
     "gtm_content": {
-      "title": "WE'VE GOT PERPS",
-      "title_description": "Predict price moves with up to 40x leverage.",
+      "title": "PERPS ARE HERE",
+      "title_description": "Long or short tokens with up to 40x leverage. Fund your account with any EVM token in one click.",
       "not_now": "Not now",
-      "try_now": "Trade perps"
+      "try_now": "Get started"
     },
     "unrealized_pnl": "Unrealized PnL",
     "withdraw": "Withdraw",