Skip to content

Commit

Permalink
Merge pull request #4337 from tloncorp/ja/welcome-modal
Browse files Browse the repository at this point in the history
  • Loading branch information
@jamesacklin
jamesacklin authored Jan 15, 2025
2 parents ad3aa65 + a66637f commit b8f15dd
Show file tree
Hide file tree
Showing 2 changed files with 134 additions and 92 deletions.
2 changes: 2 additions & 0 deletions packages/ui/src/components/MessageInput/AttachmentButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,8 @@ export default function AttachmentButton({
<Button
backgroundColor="unset"
borderColor="transparent"
marginBottom={2}
padding={0}
onPress={() => setShowInputSelector(true)}
>
<Icon type="Add" />
Expand Down
224 changes: 132 additions & 92 deletions packages/ui/src/components/WelcomeSheet.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import React, { useCallback } from 'react';
import { Image } from 'react-native';
import { Image, Modal } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { Text, View, XStack, YStack, isWeb } from 'tamagui';

import { Dialog, View, XStack, YStack, isWeb, VisuallyHidden } from 'tamagui';
import { Text } from './TextV2';
import { Icon } from './Icon';
import { Sheet } from './Sheet';
import useIsWindowNarrow from '../hooks/useIsWindowNarrow';

function WelcomeSheetComponent({
open,
Expand All @@ -18,99 +19,138 @@ function WelcomeSheetComponent({
}, [onOpenChange]);

const inset = useSafeAreaInsets();
const isWindowNarrow = useIsWindowNarrow();

const content = (
<YStack gap="$2xl">
<View borderRadius="$xl" overflow="hidden">
<Image
style={{ width: '100%', height: 188 }}
resizeMode={'cover'}
source={
isWeb
? './welcome_flowers.jpg'
: require('../assets/raster/welcome_flowers.jpg')
}
/>
</View>
<YStack gap="$l">
<Text fontSize="$xl">Welcome to TM</Text>
<Text fontSize="$m" color="$tertiaryText">
A messenger you can finally trust.
</Text>
</YStack>
<XStack gap="$l">
<View>
<View
backgroundColor={'$secondaryBackground'}
borderRadius={'$3xl'}
padding="$m"
>
<Icon type="ChannelTalk" />
</View>
</View>
<YStack gap="$xs" flex={1}>
<Text fontWeight="$xl">Control every bit</Text>
<Text color="$tertiaryText" fontSize={'$xs'} lineHeight={'$xs'}>
Whatever you do, say, and make on Tlon is yours to keep
</Text>
</YStack>
</XStack>
<XStack gap="$l">
<View>
<View
backgroundColor={'$secondaryBackground'}
borderRadius={'$3xl'}
padding="$m"
>
<Icon type="Clock" />
</View>
</View>
<YStack gap="$xs" flex={1}>
<Text fontWeight="$xl">From now until forever</Text>
<Text color="$tertiaryText" fontSize={'$xs'} lineHeight={'$xs'}>
With Tlon you can always take your data with you and continue
using it elsewhere
</Text>
</YStack>
</XStack>
<XStack gap="$l">
<View>
<View
backgroundColor={'$secondaryBackground'}
borderRadius={'$3xl'}
padding="$m"
>
<Icon type="Muted" />
</View>
</View>
<YStack gap="$xs" flex={1}>
<Text fontWeight="$xl">Connect with calm</Text>
<Text color="$tertiaryText" fontSize={'$xs'} lineHeight={'$xs'}>
Tlon is designed to maximize genuine connection, not addictive
engagement
</Text>
</YStack>
</XStack>
</YStack>
);

if (!isWindowNarrow) {
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<Dialog.Portal>
<VisuallyHidden>
<Dialog.Title>Welcome to TM</Dialog.Title>
</VisuallyHidden>
<Dialog.Overlay
backgroundColor="$overlayBackground"
key="overlay"
opacity={0.4}
/>
<Dialog.Content
borderWidth={1}
borderColor="$border"
padding="$2xl"
width="90%"
maxWidth={500}
key="content"
>
{content}
</Dialog.Content>
</Dialog.Portal>
</Dialog>
);
}

return (
<Sheet
open={open}
onOpenChange={handleDismiss}
snapPointsMode="fit"
modal
dismissOnSnapToBottom
animation="quick"
<Modal
visible={open}
onRequestClose={handleDismiss}
transparent
animationType="none"
>
<Sheet.Overlay />
<Sheet.LazyFrame
paddingTop="$s"
paddingBottom={inset.bottom}
paddingHorizontal="$2xl"
<Sheet
open={open}
onOpenChange={handleDismiss}
snapPointsMode="fit"
modal
dismissOnSnapToBottom
animation="quick"
>
<Sheet.Handle marginBottom="$l" />
<View paddingHorizontal="$2xl" paddingBottom="$2xl">
<YStack gap="$2xl">
<View borderRadius="$xl" overflow="hidden">
<Image
style={{ width: '100%', height: 188 }}
resizeMode={'cover'}
source={
isWeb
? './welcome_flowers.jpg'
: require('../assets/raster/welcome_flowers.jpg')
}
/>
</View>
<YStack gap="$xs">
<Text fontSize="$l2">Welcome to TM</Text>
<Text fontSize="$l" color="$tertiaryText">
A messenger you can finally trust.
</Text>
</YStack>
<XStack gap="$l">
<View>
<View
backgroundColor={'$secondaryBackground'}
borderRadius={'$3xl'}
padding="$m"
>
<Icon type="ChannelTalk" />
</View>
</View>
<YStack gap="$xs" flex={1}>
<Text fontWeight="$xl">Control every bit</Text>
<Text color="$tertiaryText" fontSize={'$xs'} lineHeight={'$xs'}>
Whatever you do, say, and make on Tlon is yours to keep
</Text>
</YStack>
</XStack>
<XStack gap="$l">
<View>
<View
backgroundColor={'$secondaryBackground'}
borderRadius={'$3xl'}
padding="$m"
>
<Icon type="Clock" />
</View>
</View>
<YStack gap="$xs" flex={1}>
<Text fontWeight="$xl">From now until forever</Text>
<Text color="$tertiaryText" fontSize={'$xs'} lineHeight={'$xs'}>
With Tlon you can always take your data with you and continue
using it elsewhere
</Text>
</YStack>
</XStack>
<XStack gap="$l">
<View>
<View
backgroundColor={'$secondaryBackground'}
borderRadius={'$3xl'}
padding="$m"
>
<Icon type="Muted" />
</View>
</View>
<YStack gap="$xs" flex={1}>
<Text fontWeight="$xl">Connect with calm</Text>
<Text color="$tertiaryText" fontSize={'$xs'} lineHeight={'$xs'}>
Tlon is designed to maximize genuine connection, not addictive
engagement
</Text>
</YStack>
</XStack>
</YStack>
</View>
</Sheet.LazyFrame>
</Sheet>
<Sheet.Overlay />
<Sheet.LazyFrame
paddingTop="$s"
paddingBottom={inset.bottom}
paddingHorizontal="$2xl"
>
<Sheet.Handle marginBottom="$l" />
<View paddingHorizontal="$2xl" paddingBottom="$2xl">
{content}
</View>
</Sheet.LazyFrame>
</Sheet>
</Modal>
);
}

Expand Down

0 comments on commit b8f15dd

Please sign in to comment.