feat: New onboarding

design-system/Text/Text.styles.ts

@@ -1,10 +1,11 @@
-import { TextStyle } from "react-native";
 import { typography } from "@theme/typography";
 import { Theme, ThemedStyle } from "@theme/useAppTheme";
+import { TextStyle } from "react-native";
 import { IInvertedTextColors, ITextColors, IWeights } from "./Text.props";
 
 export const textSizeStyles = {
-  xxl: { fontSize: 48, lineHeight: 60 } satisfies TextStyle,
+  ["3xl"]: { fontSize: 48, lineHeight: 60 } satisfies TextStyle,
+  xxl: { fontSize: 40, lineHeight: 44 } satisfies TextStyle,
   xl: { fontSize: 32, lineHeight: 36 } satisfies TextStyle, // Made up, need to confirm with Andrew once we have the design
   lg: { fontSize: 24, lineHeight: 28 } satisfies TextStyle, // Made up, need to confirm with Andrew once we have the design
   md: { fontSize: 20, lineHeight: 20 } satisfies TextStyle,

features/conversation/conversation-message/conversation-message-content-types/conversation-message-simple-text.tsx

@@ -33,7 +33,7 @@ export const MessageSimpleText = memo(function MessageSimpleText(props: {
           alignItems: fromMe ? "flex-end" : "flex-start",
         }}
       >
-        <Text style={textSizeStyles.xxl}>{textContent}</Text>
+        <Text style={textSizeStyles["3xl"]}>{textContent}</Text>
       </VStack>
     );
   }

features/onboarding/components/onboarding-subtitlte.tsx

@@ -0,0 +1,15 @@
+import { AnimatedText, IAnimatedTextProps } from "@/design-system/Text";
+import { memo } from "react";
+
+export const OnboardingSubtitle = memo(function OnboardingSubtitle(
+  props: IAnimatedTextProps
+) {
+  const { style, ...rest } = props;
+  return (
+    <AnimatedText
+      size="sm"
+      style={[{ textAlign: "center" }, style]}
+      {...rest}
+    />
+  );
+});

features/onboarding/components/onboarding-title.tsx

@@ -0,0 +1,16 @@
+import { AnimatedText, IAnimatedTextProps } from "@/design-system/Text";
+import { memo } from "react";
+
+export const OnboardingTitle = memo(function OnboardingTitle(
+  props: IAnimatedTextProps
+) {
+  const { style, ...rest } = props;
+  return (
+    <AnimatedText
+      weight="semiBold"
+      size="xxl"
+      style={[{ textAlign: "center" }, style]}
+      {...rest}
+    />
+  );
+});

features/onboarding/onboarding-get-started.screen.tsx

@@ -0,0 +1,133 @@
+import { Screen } from "@/components/Screen/ScreenComp/Screen";
+import { AnimatedCenter } from "@/design-system/Center";
+import { Icon } from "@/design-system/Icon/Icon";
+import { Pressable } from "@/design-system/Pressable";
+import { AnimatedText } from "@/design-system/Text";
+import { AnimatedVStack, VStack } from "@/design-system/VStack";
+import { PressableScale } from "@/design-system/pressable-scale";
+import { OnboardingSubtitle } from "@/features/onboarding/components/onboarding-subtitlte";
+import { OnboardingTitle } from "@/features/onboarding/components/onboarding-title";
+import { useAppTheme } from "@/theme/useAppTheme";
+import { getRandomId } from "@/utils/general";
+import { memo } from "react";
+import { FadeIn, FadeInUp } from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+export const OnboardingGetStartedScreen = memo(
+  function OnboardingGetStartedScreen() {
+    const { theme } = useAppTheme();
+    const insets = useSafeAreaInsets();
+
+    return (
+      <Screen
+        key={getRandomId()}
+        contentContainerStyle={{
+          flex: 1,
+        }}
+      >
+        <VStack
+          //   {...debugBorder()}
+          style={{
+            flex: 1,
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+        >
+          <VStack
+            // {...debugBorder()}
+            style={{
+              rowGap: theme.spacing.xs,
+              alignItems: "center",
+              justifyContent: "center",
+              paddingHorizontal: theme.spacing.lg,
+            }}
+          >
+            <OnboardingSubtitle
+              entering={
+                FadeInUp.springify().delay(200).duration(3000)
+                // .stiffness(theme.animation.spring.stiffness)
+                // .damping(theme.animation.spring.damping)
+              }
+            >
+              Welcome to Convos
+            </OnboardingSubtitle>
+            <OnboardingTitle
+              entering={FadeInUp.springify().delay(250).duration(3000)}
+            >
+              Become unspammable
+            </OnboardingTitle>
+          </VStack>
+          <AnimatedCenter
+            style={{
+              marginTop: theme.spacing.sm,
+              flexDirection: "row",
+              columnGap: theme.spacing.xxs,
+            }}
+          >
+            <AnimatedText
+              size="xs"
+              color="secondary"
+              entering={FadeIn.springify().delay(400).duration(3000)}
+            >
+              Simple
+            </AnimatedText>
+            <AnimatedText size="xs" color="secondary">
+              ⋅
+            </AnimatedText>
+            <AnimatedText
+              size="xs"
+              color="secondary"
+              entering={FadeIn.springify().delay(450).duration(3000)}
+            >
+              Secure
+            </AnimatedText>
+            <AnimatedText size="xs" color="secondary">
+              ⋅
+            </AnimatedText>
+            <AnimatedText
+              size="xs"
+              color="secondary"
+              entering={FadeIn.springify().delay(500).duration(3000)}
+            >
+              Universal
+            </AnimatedText>
+          </AnimatedCenter>
+        </VStack>
+
+        <Pressable>
+          <AnimatedVStack
+            entering={FadeIn.springify().delay(600).duration(3000)}
+            style={{
+              paddingBottom: insets.bottom + theme.spacing.sm,
+              justifyContent: "center",
+              alignItems: "center",
+              rowGap: theme.spacing.xxs,
+            }}
+          >
+            <PressableScale>
+              <AnimatedCenter
+                style={{
+                  borderRadius: 999,
+                  width: theme.avatarSize.lg,
+                  height: theme.avatarSize.lg,
+                  backgroundColor: theme.colors.fill.primary,
+                  justifyContent: "center",
+                  alignItems: "center",
+                }}
+              >
+                <Icon
+                  style={{
+                    color: "#A1F293",
+                  }}
+                  icon="checkmark"
+                  size={40}
+                />
+              </AnimatedCenter>
+            </PressableScale>
+            <AnimatedText size="xs">Create a Contact Card</AnimatedText>
+          </AnimatedVStack>
+        </Pressable>
+      </Screen>
+    );
+  }
+);

screens/Navigation/Navigation.tsx

@@ -27,7 +27,6 @@ import { NewAccountScreen } from "../NewAccount/NewAccountScreen";
 import { NewAccountUserProfileScreen } from "../NewAccount/NewAccountUserProfileScreen";
 import { OnboardingConnectWalletScreen } from "../Onboarding/OnboardingConnectWalletScreen";
 import { OnboardingEphemeraScreen } from "../Onboarding/OnboardingEphemeraScreen";
-import { OnboardingGetStartedScreen } from "../Onboarding/OnboardingGetStartedScreen";
 import { OnboardingNotificationsScreen } from "../Onboarding/OnboardingNotificationsScreen";
 import { OnboardingPrivateKeyScreen } from "../Onboarding/OnboardingPrivateKeyScreen";
 import { OnboardingPrivyScreen } from "../Onboarding/OnboardingPrivyScreen";
@@ -46,6 +45,7 @@ import WebviewPreviewNav, {
   WebviewPreviewNavParams,
 } from "./WebviewPreviewNav";
 import ConversationRequestsListNav from "@/screens/Navigation/ConversationRequestsListNav.ios";
+import { OnboardingGetStartedScreen } from "@/features/onboarding/onboarding-get-started.screen";
 
 export type NavigationParamList = {
   Idle: undefined;
@@ -195,20 +195,20 @@ export function SignedOutNavigation() {
       screenListeners={screenListeners("fullStackNavigation")}
     >
       <NativeStack.Group>
+        <NativeStack.Group screenOptions={{ headerShown: false }}>
+          <NativeStack.Screen
+            name="OnboardingGetStarted"
+            component={OnboardingGetStartedScreen}
+          />
+        </NativeStack.Group>
+
         {/* Auth / Onboarding */}
         <NativeStack.Group
           screenOptions={{
             ...stackGroupScreenOptions(colorScheme),
             ...authScreensSharedScreenOptions,
           }}
         >
-          <NativeStack.Screen
-            options={{
-              headerShown: false,
-            }}
-            name="OnboardingGetStarted"
-            component={OnboardingGetStartedScreen}
-          />
           <NativeStack.Screen
             name="OnboardingPrivy"
             component={OnboardingPrivyScreen}