diff options
author | Paul Frazee <pfrazee@gmail.com> | 2022-11-14 13:12:29 -0600 |
---|---|---|
committer | Paul Frazee <pfrazee@gmail.com> | 2022-11-14 13:12:29 -0600 |
commit | 837ec8308a8638781196ad5ddf6c3033b37fe1da (patch) | |
tree | 8c616364b4cc3a0099eaa38ec7158054edda0ec6 /src | |
parent | 210082be93cd369b868e748c7e89e95fc3ce6bbe (diff) | |
download | voidsky-837ec8308a8638781196ad5ddf6c3033b37fe1da.tar.zst |
Improvements to the feature explainer, including intro screen and screenshot of scenes
Diffstat (limited to 'src')
-rw-r--r-- | src/view/com/onboard/FeatureExplainer.tsx | 35 | ||||
-rw-r--r-- | src/view/lib/assets.native.ts | 1 | ||||
-rw-r--r-- | src/view/lib/assets.ts | 3 |
3 files changed, 36 insertions, 3 deletions
diff --git a/src/view/com/onboard/FeatureExplainer.tsx b/src/view/com/onboard/FeatureExplainer.tsx index 227ad73dc..0bc0876d1 100644 --- a/src/view/com/onboard/FeatureExplainer.tsx +++ b/src/view/com/onboard/FeatureExplainer.tsx @@ -1,6 +1,7 @@ import React, {useState} from 'react' import { Animated, + Image, SafeAreaView, StyleSheet, Text, @@ -12,6 +13,23 @@ import {TabView, SceneMap, Route, TabBarProps} from 'react-native-tab-view' import {UserGroupIcon} from '../../lib/icons' import {useStores} from '../../../state' import {s} from '../../lib/styles' +import {SCENE_EXPLAINER} from '../../lib/assets' + +const Intro = () => ( + <View style={styles.explainer}> + <Text + style={[ + styles.explainerHeading, + s.normal, + {lineHeight: 60, paddingTop: 50, paddingBottom: 50}, + ]}> + Welcome to <Text style={[s.bold, s.blue3, {fontSize: 56}]}>Bluesky</Text> + </Text> + <Text style={[styles.explainerDesc, {fontSize: 24}]}> + Let's do a quick tour through the new features. + </Text> + </View> +) const Scenes = () => ( <View style={styles.explainer}> @@ -25,11 +43,14 @@ const Scenes = () => ( Scenes are invite-only groups of users. Follow them to see what's trending with the scene's members. </Text> - <Text style={styles.explainerDesc}>[ TODO screenshot ]</Text> + <Text style={styles.explainerDesc}> + <Image source={SCENE_EXPLAINER} style={styles.explainerImg} /> + </Text> </View> ) const SCENE_MAP = { + intro: Intro, scenes: Scenes, } const renderScene = SceneMap(SCENE_MAP) @@ -38,7 +59,10 @@ export const FeatureExplainer = () => { const layout = useWindowDimensions() const store = useStores() const [index, setIndex] = useState(0) - const routes = [{key: 'scenes', title: 'Scenes'}] + const routes = [ + {key: 'intro', title: 'Intro'}, + {key: 'scenes', title: 'Scenes'}, + ] const onPressSkip = () => store.onboard.next() const onPressNext = () => { @@ -122,7 +146,7 @@ const styles = StyleSheet.create({ explainer: { flex: 1, paddingHorizontal: 16, - paddingVertical: 16, + paddingTop: 80, }, explainerIcon: { flexDirection: 'row', @@ -138,6 +162,11 @@ const styles = StyleSheet.create({ textAlign: 'center', marginBottom: 16, }, + explainerImg: { + resizeMode: 'contain', + maxWidth: '100%', + maxHeight: 330, + }, footer: { flexDirection: 'row', diff --git a/src/view/lib/assets.native.ts b/src/view/lib/assets.native.ts index 1655b6a0c..aa3c816b8 100644 --- a/src/view/lib/assets.native.ts +++ b/src/view/lib/assets.native.ts @@ -1,3 +1,4 @@ import {ImageSourcePropType} from 'react-native' export const DEF_AVATAR: ImageSourcePropType = require('../../../public/img/default-avatar.jpg') +export const SCENE_EXPLAINER: ImageSourcePropType = require('../../../public/img/scene-explainer.jpg') diff --git a/src/view/lib/assets.ts b/src/view/lib/assets.ts index 8e85b9489..ad425ca6f 100644 --- a/src/view/lib/assets.ts +++ b/src/view/lib/assets.ts @@ -1,3 +1,6 @@ import {ImageSourcePropType} from 'react-native' export const DEF_AVATAR: ImageSourcePropType = {uri: '/img/default-avatar.jpg'} +export const SCENE_EXPLAINER: ImageSourcePropType = { + uri: '/img/scene-explainer.jpg', +} |