diff options
Diffstat (limited to 'src/view/com')
32 files changed, 156 insertions, 152 deletions
diff --git a/src/view/com/composer/ComposePost.tsx b/src/view/com/composer/ComposePost.tsx index f0dec4b0a..02b7cae5c 100644 --- a/src/view/com/composer/ComposePost.tsx +++ b/src/view/com/composer/ComposePost.tsx @@ -297,7 +297,7 @@ export const ComposePost = observer(function ComposePost({ ) } }) - }, [text, pal.link]) + }, [text, pal.link, pal.text]) return ( <KeyboardAvoidingView @@ -393,7 +393,7 @@ export const ComposePost = observer(function ComposePost({ ref={textInput} multiline scrollEnabled - onChangeText={(text: string) => onChangeText(text)} + onChangeText={(str: string) => onChangeText(str)} onPaste={onPaste} placeholder={selectTextInputPlaceholder} placeholderTextColor={pal.colors.textLight} @@ -475,7 +475,7 @@ export const ComposePost = observer(function ComposePost({ ) }) -const atPrefixRegex = /@([a-z0-9\.]*)$/i +const atPrefixRegex = /@([a-z0-9.]*)$/i function extractTextAutocompletePrefix(text: string) { const match = atPrefixRegex.exec(text) if (match) { diff --git a/src/view/com/discover/SuggestedFollows.tsx b/src/view/com/discover/SuggestedFollows.tsx index 87886c652..d2afc4b33 100644 --- a/src/view/com/discover/SuggestedFollows.tsx +++ b/src/view/com/discover/SuggestedFollows.tsx @@ -39,7 +39,7 @@ export const SuggestedFollows = observer( // Using default import (React.use...) instead of named import (use...) to be able to mock store's data in jest environment const view = React.useMemo<SuggestedActorsViewModel>( () => new SuggestedActorsViewModel(store), - [], + [store], ) useEffect(() => { @@ -54,7 +54,7 @@ export const SuggestedFollows = observer( if (!view.isLoading && !view.hasError && !view.hasContent) { onNoSuggestions?.() } - }, [view, view.isLoading, view.hasError, view.hasContent]) + }, [view, view.isLoading, view.hasError, view.hasContent, onNoSuggestions]) const onPressTryAgain = () => view @@ -128,7 +128,7 @@ export const SuggestedFollows = observer( keyExtractor={item => item._reactKey} renderItem={renderItem} style={s.flex1} - contentContainerStyle={{paddingBottom: 200}} + contentContainerStyle={s.contentContainer} /> </View> )} diff --git a/src/view/com/login/Signin.tsx b/src/view/com/login/Signin.tsx index a39ea5e74..f0637db8d 100644 --- a/src/view/com/login/Signin.tsx +++ b/src/view/com/login/Signin.tsx @@ -207,12 +207,7 @@ const ChooseAccountForm = ({ style={[pal.borderDark, styles.group]} onPress={() => onSelectAccount(undefined)}> <View style={[pal.borderDark, styles.groupContent, styles.noTopBorder]}> - <View style={s.p10}> - <View - style={[pal.btn, {width: 30, height: 30, borderRadius: 15}]} - /> - </View> - <Text style={styles.accountText}> + <Text style={[styles.accountText, styles.accountTextOther]}> <Text type="lg" style={pal.text}> Other account </Text> @@ -556,7 +551,7 @@ const ForgotPasswordForm = ({ {!serviceDescription || isProcessing ? ( <ActivityIndicator /> ) : !email ? ( - <Text type="xl-bold" style={[pal.link, s.pr5, {opacity: 0.5}]}> + <Text type="xl-bold" style={[pal.link, s.pr5, styles.dimmed]}> Next </Text> ) : ( @@ -691,7 +686,7 @@ const SetNewPasswordForm = ({ {isProcessing ? ( <ActivityIndicator /> ) : !resetCode || !password ? ( - <Text type="xl-bold" style={[pal.link, s.pr5, {opacity: 0.5}]}> + <Text type="xl-bold" style={[pal.link, s.pr5, styles.dimmed]}> Next </Text> ) : ( @@ -810,6 +805,9 @@ const styles = StyleSheet.create({ alignItems: 'baseline', paddingVertical: 10, }, + accountTextOther: { + paddingLeft: 12, + }, error: { backgroundColor: colors.red4, flexDirection: 'row', @@ -832,4 +830,5 @@ const styles = StyleSheet.create({ justifyContent: 'center', marginRight: 5, }, + dimmed: {opacity: 0.5}, }) diff --git a/src/view/com/modals/EditProfile.tsx b/src/view/com/modals/EditProfile.tsx index f830f39e8..ba99feb32 100644 --- a/src/view/com/modals/EditProfile.tsx +++ b/src/view/com/modals/EditProfile.tsx @@ -121,7 +121,7 @@ export function Component({ </View> </View> {error !== '' && ( - <View style={{marginTop: 20}}> + <View style={styles.errorContainer}> <ErrorMessage message={error} /> </View> )} @@ -231,4 +231,5 @@ const styles = StyleSheet.create({ marginBottom: 36, marginHorizontal: -14, }, + errorContainer: {marginTop: 20}, }) diff --git a/src/view/com/modals/ServerInput.tsx b/src/view/com/modals/ServerInput.tsx index 8792d70f1..31ef4b12d 100644 --- a/src/view/com/modals/ServerInput.tsx +++ b/src/view/com/modals/ServerInput.tsx @@ -56,7 +56,7 @@ export function Component({onSelect}: {onSelect: (url: string) => void}) { </View> <View style={styles.group}> <Text style={styles.label}>Other service</Text> - <View style={{flexDirection: 'row'}}> + <View style={s.flexRow}> <BottomSheetTextInput testID="customServerTextInput" style={styles.textInput} diff --git a/src/view/com/notifications/Feed.tsx b/src/view/com/notifications/Feed.tsx index ea7695d93..5f9cb129d 100644 --- a/src/view/com/notifications/Feed.tsx +++ b/src/view/com/notifications/Feed.tsx @@ -1,12 +1,13 @@ import React from 'react' import {observer} from 'mobx-react-lite' -import {View, FlatList} from 'react-native' +import {FlatList, StyleSheet, View} from 'react-native' import {NotificationsViewModel} from '../../../state/models/notifications-view' import {FeedItem} from './FeedItem' import {NotificationFeedLoadingPlaceholder} from '../util/LoadingPlaceholder' import {ErrorMessage} from '../util/error/ErrorMessage' import {EmptyState} from '../util/EmptyState' import {OnScrollCb} from '../../lib/hooks/useOnMainScroll' +import {s} from '../../lib/styles' const EMPTY_FEED_ITEM = {_reactKey: '__empty__'} @@ -29,7 +30,7 @@ export const Feed = observer(function Feed({ <EmptyState icon="bell" message="No notifications yet!" - style={{paddingVertical: 40}} + style={styles.emptyState} /> ) } @@ -58,14 +59,10 @@ export const Feed = observer(function Feed({ } } return ( - <View style={{flex: 1}}> + <View style={s.h100pct}> {view.isLoading && !data && <NotificationFeedLoadingPlaceholder />} {view.hasError && ( - <ErrorMessage - message={view.error} - style={{margin: 6}} - onPressTryAgain={onPressTryAgain} - /> + <ErrorMessage message={view.error} onPressTryAgain={onPressTryAgain} /> )} {data && ( <FlatList @@ -76,9 +73,13 @@ export const Feed = observer(function Feed({ onRefresh={onRefresh} onEndReached={onEndReached} onScroll={onScroll} - contentContainerStyle={{paddingBottom: 200}} + contentContainerStyle={s.contentContainer} /> )} </View> ) }) + +const styles = StyleSheet.create({ + emptyState: {paddingVertical: 40}, +}) diff --git a/src/view/com/onboard/FeatureExplainer.tsx b/src/view/com/onboard/FeatureExplainer.tsx index 78ace5189..03e050883 100644 --- a/src/view/com/onboard/FeatureExplainer.tsx +++ b/src/view/com/onboard/FeatureExplainer.tsx @@ -19,14 +19,13 @@ import {TABS_ENABLED} from '../../../build-flags' 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> + style={[styles.explainerHeading, s.normal, styles.explainerHeadingIntro]}> + Welcome to{' '} + <Text style={[s.bold, s.blue3, styles.explainerHeadingBrand]}> + Bluesky + </Text> </Text> - <Text style={[styles.explainerDesc, {fontSize: 24}]}> + <Text style={[styles.explainerDesc, styles.explainerDescIntro]}> This is an early beta. Your feedback is appreciated! </Text> </View> @@ -161,11 +160,18 @@ const styles = StyleSheet.create({ textAlign: 'center', marginBottom: 16, }, + explainerHeadingIntro: { + lineHeight: 60, + paddingTop: 50, + paddingBottom: 50, + }, + explainerHeadingBrand: {fontSize: 56}, explainerDesc: { fontSize: 18, textAlign: 'center', marginBottom: 16, }, + explainerDescIntro: {fontSize: 24}, explainerImg: { resizeMode: 'contain', maxWidth: '100%', diff --git a/src/view/com/post-thread/PostRepostedBy.tsx b/src/view/com/post-thread/PostRepostedBy.tsx index c68ceee0b..02d61b47b 100644 --- a/src/view/com/post-thread/PostRepostedBy.tsx +++ b/src/view/com/post-thread/PostRepostedBy.tsx @@ -53,11 +53,7 @@ export const PostRepostedBy = observer(function PostRepostedBy({ if (view.hasError) { return ( <View> - <ErrorMessage - message={view.error} - style={{margin: 6}} - onPressTryAgain={onRefresh} - /> + <ErrorMessage message={view.error} onPressTryAgain={onRefresh} /> </View> ) } diff --git a/src/view/com/post-thread/PostThread.tsx b/src/view/com/post-thread/PostThread.tsx index dcdc1eb49..a52bc643c 100644 --- a/src/view/com/post-thread/PostThread.tsx +++ b/src/view/com/post-thread/PostThread.tsx @@ -7,6 +7,7 @@ import { } from '../../../state/models/post-thread-view' import {PostThreadItem} from './PostThreadItem' import {ErrorMessage} from '../util/error/ErrorMessage' +import {s} from '../../lib/styles' export const PostThread = observer(function PostThread({ uri, @@ -60,11 +61,7 @@ export const PostThread = observer(function PostThread({ if (view.hasError) { return ( <View> - <ErrorMessage - message={view.error} - style={{margin: 6}} - onPressTryAgain={onRefresh} - /> + <ErrorMessage message={view.error} onPressTryAgain={onRefresh} /> </View> ) } @@ -84,8 +81,8 @@ export const PostThread = observer(function PostThread({ onRefresh={onRefresh} onLayout={onLayout} onScrollToIndexFailed={onScrollToIndexFailed} - style={{flex: 1}} - contentContainerStyle={{paddingBottom: 200}} + style={s.h100pct} + contentContainerStyle={s.contentContainer} /> ) }) diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx index 2c7ab716c..92f7acc03 100644 --- a/src/view/com/post-thread/PostThreadItem.tsx +++ b/src/view/com/post-thread/PostThreadItem.tsx @@ -80,7 +80,7 @@ export const PostThreadItem = observer(function PostThreadItem({ .catch(e => store.log.error('Failed to toggle upvote', e)) } const onCopyPostText = () => { - Clipboard.setString(record.text) + Clipboard.setString(record?.text || '') Toast.show('Copied to clipboard') } const onDeletePost = () => { @@ -131,8 +131,8 @@ export const PostThreadItem = observer(function PostThreadItem({ </Link> </View> <View style={styles.layoutContent}> - <View style={[styles.meta, {paddingTop: 5, paddingBottom: 0}]}> - <View style={{flexDirection: 'row', alignItems: 'baseline'}}> + <View style={[styles.meta, styles.metaExpandedLine1]}> + <View style={[s.flexRow, s.alignBaseline]}> <Link style={styles.metaItem} href={authorHref} @@ -305,10 +305,8 @@ export const PostThreadItem = observer(function PostThreadItem({ lineHeight={1.3} /> </View> - ) : ( - <View style={{height: 5}} /> - )} - <PostEmbeds embed={item.post.embed} style={{marginBottom: 10}} /> + ) : undefined} + <PostEmbeds embed={item.post.embed} style={s.mb10} /> <PostCtrls itemHref={itemHref} itemTitle={itemTitle} @@ -389,6 +387,10 @@ const styles = StyleSheet.create({ paddingTop: 2, paddingBottom: 2, }, + metaExpandedLine1: { + paddingTop: 5, + paddingBottom: 0, + }, metaItem: { paddingRight: 5, maxWidth: 240, diff --git a/src/view/com/post-thread/PostVotedBy.tsx b/src/view/com/post-thread/PostVotedBy.tsx index 06fe53888..011df4aa1 100644 --- a/src/view/com/post-thread/PostVotedBy.tsx +++ b/src/view/com/post-thread/PostVotedBy.tsx @@ -48,11 +48,7 @@ export const PostVotedBy = observer(function PostVotedBy({ if (view.hasError) { return ( <View> - <ErrorMessage - message={view.error} - style={{margin: 6}} - onPressTryAgain={onRefresh} - /> + <ErrorMessage message={view.error} onPressTryAgain={onRefresh} /> </View> ) } diff --git a/src/view/com/post/Post.tsx b/src/view/com/post/Post.tsx index 08e560bda..d00cc83c2 100644 --- a/src/view/com/post/Post.tsx +++ b/src/view/com/post/Post.tsx @@ -156,7 +156,7 @@ export const Post = observer(function Post({ timestamp={item.post.indexedAt} /> {replyAuthorDid !== '' && ( - <View style={[s.flexRow, s.mb2, {alignItems: 'center'}]}> + <View style={[s.flexRow, s.mb2, s.alignCenter]}> <FontAwesomeIcon icon="reply" size={9} @@ -187,10 +187,8 @@ export const Post = observer(function Post({ lineHeight={1.3} /> </View> - ) : ( - <View style={{height: 5}} /> - )} - <PostEmbeds embed={item.post.embed} style={{marginBottom: 10}} /> + ) : undefined} + <PostEmbeds embed={item.post.embed} style={s.mb10} /> <PostCtrls itemHref={itemHref} itemTitle={itemTitle} diff --git a/src/view/com/post/PostText.tsx b/src/view/com/post/PostText.tsx index 44f9e4d20..0cdc875a9 100644 --- a/src/view/com/post/PostText.tsx +++ b/src/view/com/post/PostText.tsx @@ -1,6 +1,6 @@ import React, {useState, useEffect} from 'react' import {observer} from 'mobx-react-lite' -import {View} from 'react-native' +import {StyleSheet, View} from 'react-native' import {LoadingPlaceholder} from '../util/LoadingPlaceholder' import {ErrorMessage} from '../util/error/ErrorMessage' import {Text} from '../util/text/Text' @@ -31,9 +31,9 @@ export const PostText = observer(function PostText({ if (!model || model.isLoading || model.uri !== uri) { return ( <View> - <LoadingPlaceholder width="100%" height={8} style={{marginTop: 6}} /> - <LoadingPlaceholder width="100%" height={8} style={{marginTop: 6}} /> - <LoadingPlaceholder width={100} height={8} style={{marginTop: 6}} /> + <LoadingPlaceholder width="100%" height={8} style={styles.mt6} /> + <LoadingPlaceholder width="100%" height={8} style={styles.mt6} /> + <LoadingPlaceholder width={100} height={8} style={styles.mt6} /> </View> ) } @@ -56,3 +56,7 @@ export const PostText = observer(function PostText({ </View> ) }) + +const styles = StyleSheet.create({ + mt6: {marginTop: 6}, +}) diff --git a/src/view/com/posts/Feed.tsx b/src/view/com/posts/Feed.tsx index 726338f81..db6877660 100644 --- a/src/view/com/posts/Feed.tsx +++ b/src/view/com/posts/Feed.tsx @@ -5,6 +5,7 @@ import { View, FlatList, StyleProp, + StyleSheet, ViewStyle, } from 'react-native' import {PostFeedLoadingPlaceholder} from '../util/LoadingPlaceholder' @@ -14,6 +15,7 @@ import {FeedModel} from '../../../state/models/feed-view' import {FeedItem} from './FeedItem' import {PromptButtons} from './PromptButtons' import {OnScrollCb} from '../../lib/hooks/useOnMainScroll' +import {s} from '../../lib/styles' const COMPOSE_PROMPT_ITEM = {_reactKey: '__prompt__'} const EMPTY_FEED_ITEM = {_reactKey: '__empty__'} @@ -47,7 +49,7 @@ export const Feed = observer(function Feed({ <EmptyState icon="bars" message="This feed is empty!" - style={{paddingVertical: 40}} + style={styles.emptyState} /> ) } else { @@ -76,7 +78,7 @@ export const Feed = observer(function Feed({ } const FeedFooter = () => feed.isLoading ? ( - <View style={{paddingTop: 20}}> + <View style={styles.feedFooter}> <ActivityIndicator /> </View> ) : ( @@ -87,11 +89,7 @@ export const Feed = observer(function Feed({ {!data && <PromptButtons onPressCompose={onPressCompose} />} {feed.isLoading && !data && <PostFeedLoadingPlaceholder />} {feed.hasError && ( - <ErrorMessage - message={feed.error} - style={{margin: 6}} - onPressTryAgain={onPressTryAgain} - /> + <ErrorMessage message={feed.error} onPressTryAgain={onPressTryAgain} /> )} {feed.hasLoaded && data && ( <FlatList @@ -101,7 +99,7 @@ export const Feed = observer(function Feed({ renderItem={renderItem} ListFooterComponent={FeedFooter} refreshing={feed.isRefreshing} - contentContainerStyle={{paddingBottom: 100}} + contentContainerStyle={s.contentContainer} onScroll={onScroll} onRefresh={onRefresh} onEndReached={onEndReached} @@ -110,3 +108,8 @@ export const Feed = observer(function Feed({ </View> ) }) + +const styles = StyleSheet.create({ + feedFooter: {paddingTop: 20}, + emptyState: {paddingVertical: 40}, +}) diff --git a/src/view/com/posts/FeedItem.tsx b/src/view/com/posts/FeedItem.tsx index 4133c17d4..584fa0973 100644 --- a/src/view/com/posts/FeedItem.tsx +++ b/src/view/com/posts/FeedItem.tsx @@ -124,7 +124,7 @@ export const FeedItem = observer(function ({ style={[ styles.bottomReplyLine, {borderColor: pal.colors.replyLine}, - isNoTop ? {top: 64} : undefined, + isNoTop ? styles.bottomReplyLineNoTop : undefined, ]} /> )} @@ -163,7 +163,7 @@ export const FeedItem = observer(function ({ timestamp={item.post.indexedAt} /> {!isChild && replyAuthorDid !== '' && ( - <View style={[s.flexRow, s.mb2, {alignItems: 'center'}]}> + <View style={[s.flexRow, s.mb2, s.alignCenter]}> <FontAwesomeIcon icon="reply" size={9} @@ -195,9 +195,7 @@ export const FeedItem = observer(function ({ lineHeight={1.3} /> </View> - ) : ( - <View style={{height: 5}} /> - )} + ) : undefined} {item.post.embed ? ( <PostEmbeds embed={item.post.embed} style={styles.embed} /> ) : null} @@ -281,6 +279,7 @@ const styles = StyleSheet.create({ bottom: 0, borderLeftWidth: 2, }, + bottomReplyLineNoTop: {top: 64}, includeReason: { flexDirection: 'row', paddingLeft: 50, diff --git a/src/view/com/profile/ProfileFollowers.tsx b/src/view/com/profile/ProfileFollowers.tsx index b1dfbe996..00207c4d2 100644 --- a/src/view/com/profile/ProfileFollowers.tsx +++ b/src/view/com/profile/ProfileFollowers.tsx @@ -54,11 +54,7 @@ export const ProfileFollowers = observer(function ProfileFollowers({ if (view.hasError) { return ( <View> - <ErrorMessage - message={view.error} - style={{margin: 6}} - onPressTryAgain={onRefresh} - /> + <ErrorMessage message={view.error} onPressTryAgain={onRefresh} /> </View> ) } diff --git a/src/view/com/profile/ProfileFollows.tsx b/src/view/com/profile/ProfileFollows.tsx index fca12d11b..2e67873c8 100644 --- a/src/view/com/profile/ProfileFollows.tsx +++ b/src/view/com/profile/ProfileFollows.tsx @@ -54,11 +54,7 @@ export const ProfileFollows = observer(function ProfileFollows({ if (view.hasError) { return ( <View> - <ErrorMessage - message={view.error} - style={{margin: 6}} - onPressTryAgain={onRefresh} - /> + <ErrorMessage message={view.error} onPressTryAgain={onRefresh} /> </View> ) } diff --git a/src/view/com/profile/ProfileHeader.tsx b/src/view/com/profile/ProfileHeader.tsx index c14a5c827..2f98fce2d 100644 --- a/src/view/com/profile/ProfileHeader.tsx +++ b/src/view/com/profile/ProfileHeader.tsx @@ -100,22 +100,14 @@ export const ProfileHeader = observer(function ProfileHeader({ <LoadingPlaceholder width="100%" height={120} /> <View style={[pal.view, {borderColor: pal.colors.background}, styles.avi]}> - <LoadingPlaceholder - width={80} - height={80} - style={{borderRadius: 40}} - /> + <LoadingPlaceholder width={80} height={80} style={styles.br40} /> </View> <View style={styles.content}> <View style={[styles.buttonsLine]}> - <LoadingPlaceholder - width={100} - height={31} - style={{borderRadius: 50}} - /> + <LoadingPlaceholder width={100} height={31} style={styles.br50} /> </View> <View style={styles.displayNameLine}> - <Text type="title-xl" style={[pal.text, {lineHeight: 38}]}> + <Text type="title-xl" style={[pal.text, styles.title]}> {view.displayName || view.handle} </Text> </View> @@ -208,7 +200,7 @@ export const ProfileHeader = observer(function ProfileHeader({ ) : undefined} </View> <View style={styles.displayNameLine}> - <Text type="title-xl" style={[pal.text, {lineHeight: 38}]}> + <Text type="title-xl" style={[pal.text, styles.title]}> {view.displayName || view.handle} </Text> </View> @@ -349,6 +341,7 @@ const styles = StyleSheet.create({ // paddingLeft: 86, // marginBottom: 14, }, + title: {lineHeight: 38}, handleLine: { flexDirection: 'row', @@ -369,4 +362,7 @@ const styles = StyleSheet.create({ alignItems: 'center', marginBottom: 5, }, + + br40: {borderRadius: 40}, + br50: {borderRadius: 50}, }) diff --git a/src/view/com/util/Link.tsx b/src/view/com/util/Link.tsx index aacdc3272..1cbb1af83 100644 --- a/src/view/com/util/Link.tsx +++ b/src/view/com/util/Link.tsx @@ -57,7 +57,7 @@ export const Link = observer(function Link({ ) }) -export const TextLink = observer(function Link({ +export const TextLink = observer(function TextLink({ type = 'md', style, href, diff --git a/src/view/com/util/LoadingPlaceholder.tsx b/src/view/com/util/LoadingPlaceholder.tsx index 207a3f5d2..9828058e8 100644 --- a/src/view/com/util/LoadingPlaceholder.tsx +++ b/src/view/com/util/LoadingPlaceholder.tsx @@ -19,23 +19,15 @@ export function LoadingPlaceholder({ return ( <View style={[ + styles.loadingPlaceholder, { width, height, backgroundColor: theme.palette.default.backgroundLight, - borderRadius: 6, - overflow: 'hidden', }, style, - ]}> - <View - style={{ - width, - height, - backgroundColor: theme.palette.default.backgroundLight, - }} - /> - </View> + ]} + /> ) } @@ -137,6 +129,9 @@ export function NotificationFeedLoadingPlaceholder() { } const styles = StyleSheet.create({ + loadingPlaceholder: { + borderRadius: 6, + }, post: { flexDirection: 'row', padding: 10, diff --git a/src/view/com/util/PostCtrls.tsx b/src/view/com/util/PostCtrls.tsx index 0ca13b62f..bde44abab 100644 --- a/src/view/com/util/PostCtrls.tsx +++ b/src/view/com/util/PostCtrls.tsx @@ -128,10 +128,7 @@ export function PostCtrls(opts: PostCtrlsOpts) { hitSlop={HITSLOP} onPress={opts.onPressReply}> <CommentBottomArrow - style={[ - defaultCtrlColor, - opts.big ? {marginTop: 2} : {marginTop: 1}, - ]} + style={[defaultCtrlColor, opts.big ? s.mt2 : styles.mt1]} strokeWidth={3} size={opts.big ? 20 : 15} /> @@ -181,10 +178,7 @@ export function PostCtrls(opts: PostCtrlsOpts) { /> ) : ( <HeartIcon - style={[ - defaultCtrlColor, - opts.big ? {marginTop: 1} : undefined, - ]} + style={[defaultCtrlColor, opts.big ? styles.mt1 : undefined]} strokeWidth={3} size={opts.big ? 20 : 16} /> @@ -244,4 +238,7 @@ const styles = StyleSheet.create({ ctrlIconUpvoted: { color: colors.red3, }, + mt1: { + marginTop: 1, + }, }) diff --git a/src/view/com/util/PostEmbeds.tsx b/src/view/com/util/PostEmbeds.tsx index 65518470a..e3fca2538 100644 --- a/src/view/com/util/PostEmbeds.tsx +++ b/src/view/com/util/PostEmbeds.tsx @@ -67,7 +67,7 @@ export function PostEmbeds({ <AutoSizedImage uri={embed.images[0].thumb} onPress={() => openLightbox(0)} - containerStyle={{borderRadius: 8}} + containerStyle={styles.singleImage} /> </View> ) @@ -120,6 +120,9 @@ const styles = StyleSheet.create({ imagesContainer: { marginTop: 4, }, + singleImage: { + borderRadius: 8, + }, extOuter: { borderWidth: 1, borderRadius: 8, diff --git a/src/view/com/util/Selector.tsx b/src/view/com/util/Selector.tsx index 7a8b9b530..87540cf38 100644 --- a/src/view/com/util/Selector.tsx +++ b/src/view/com/util/Selector.tsx @@ -41,7 +41,7 @@ export function Selector({ width: middle.width, } return [left, middle, right] - }, [selectedIndex, items, itemLayouts]) + }, [selectedIndex, itemLayouts]) const underlineStyle = { backgroundColor: pal.colors.text, diff --git a/src/view/com/util/UserAvatar.tsx b/src/view/com/util/UserAvatar.tsx index bd4897ba8..c9c255f46 100644 --- a/src/view/com/util/UserAvatar.tsx +++ b/src/view/com/util/UserAvatar.tsx @@ -62,8 +62,8 @@ export function UserAvatar({ ]) }, [onSelectNewAvatar]) - const renderSvg = (size: number, initials: string) => ( - <Svg width={size} height={size} viewBox="0 0 100 100"> + const renderSvg = (svgSize: number, svgInitials: string) => ( + <Svg width={svgSize} height={svgSize} viewBox="0 0 100 100"> <Defs> <LinearGradient id="grad" x1="0" y1="0" x2="1" y2="1"> <Stop offset="0" stopColor={gradients.blue.start} stopOpacity="1" /> @@ -78,7 +78,7 @@ export function UserAvatar({ x="50" y="67" textAnchor="middle"> - {initials} + {svgInitials} </Text> </Svg> ) @@ -88,7 +88,11 @@ export function UserAvatar({ <TouchableOpacity onPress={handleEditAvatar}> {avatar ? ( <Image - style={{width: size, height: size, borderRadius: (size / 2) | 0}} + style={{ + width: size, + height: size, + borderRadius: Math.floor(size / 2), + }} source={{uri: avatar}} /> ) : ( @@ -104,7 +108,7 @@ export function UserAvatar({ </TouchableOpacity> ) : avatar ? ( <Image - style={{width: size, height: size, borderRadius: (size / 2) | 0}} + style={{width: size, height: size, borderRadius: Math.floor(size / 2)}} resizeMode="stretch" source={{uri: avatar}} /> diff --git a/src/view/com/util/UserInfoText.tsx b/src/view/com/util/UserInfoText.tsx index 151fa54d0..a6daf18b2 100644 --- a/src/view/com/util/UserInfoText.tsx +++ b/src/view/com/util/UserInfoText.tsx @@ -1,6 +1,6 @@ import React, {useState, useEffect} from 'react' import {AppBskyActorGetProfile as GetProfile} from '@atproto/api' -import {StyleProp, TextStyle} from 'react-native' +import {StyleProp, StyleSheet, TextStyle} from 'react-native' import {Link} from './Link' import {Text} from './text/Text' import {LoadingPlaceholder} from './LoadingPlaceholder' @@ -53,7 +53,7 @@ export function UserInfoText({ return () => { aborted = true } - }, [did, store.api.app.bsky]) + }, [did, store.profiles]) let inner if (didFail) { @@ -73,7 +73,7 @@ export function UserInfoText({ <LoadingPlaceholder width={80} height={8} - style={{position: 'relative', top: 1, left: 2}} + style={styles.loadingPlaceholder} /> ) } @@ -91,3 +91,7 @@ export function UserInfoText({ return inner } + +const styles = StyleSheet.create({ + loadingPlaceholder: {position: 'relative', top: 1, left: 2}, +}) diff --git a/src/view/com/util/ViewHeader.tsx b/src/view/com/util/ViewHeader.tsx index 761553cc5..c8b1b2d97 100644 --- a/src/view/com/util/ViewHeader.tsx +++ b/src/view/com/util/ViewHeader.tsx @@ -11,8 +11,8 @@ import {UserAvatar} from './UserAvatar' import {Text} from './text/Text' import {MagnifyingGlassIcon} from '../../lib/icons' import {useStores} from '../../../state' -import {useTheme} from '../../lib/ThemeContext' import {usePalette} from '../../lib/hooks/usePalette' +import {colors} from '../../lib/styles' const HITSLOP = {left: 10, top: 10, right: 10, bottom: 10} const BACK_HITSLOP = {left: 10, top: 10, right: 30, bottom: 10} @@ -26,7 +26,6 @@ export const ViewHeader = observer(function ViewHeader({ subtitle?: string canGoBack?: boolean }) { - const theme = useTheme() const pal = usePalette('default') const store = useStores() const onPressBack = () => { @@ -52,12 +51,12 @@ export const ViewHeader = observer(function ViewHeader({ testID="viewHeaderBackOrMenuBtn" onPress={canGoBack ? onPressBack : onPressMenu} hitSlop={BACK_HITSLOP} - style={canGoBack ? styles.backIcon : styles.backIconWide}> + style={canGoBack ? styles.backBtn : styles.backBtnWide}> {canGoBack ? ( <FontAwesomeIcon size={18} icon="angle-left" - style={[{marginTop: 6}, pal.text]} + style={[styles.backIcon, pal.text]} /> ) : ( <UserAvatar @@ -96,13 +95,10 @@ export const ViewHeader = observer(function ViewHeader({ <FontAwesomeIcon icon="signal" style={pal.text} size={16} /> <FontAwesomeIcon icon="x" - style={{ - backgroundColor: pal.colors.background, - color: theme.palette.error.background, - position: 'absolute', - right: 7, - bottom: 7, - }} + style={[ + styles.littleXIcon, + {backgroundColor: pal.colors.background}, + ]} size={8} /> </> @@ -136,15 +132,18 @@ const styles = StyleSheet.create({ fontWeight: 'normal', }, - backIcon: { + backBtn: { width: 30, height: 30, }, - backIconWide: { + backBtnWide: { width: 40, height: 30, marginLeft: 6, }, + backIcon: { + marginTop: 6, + }, btn: { flexDirection: 'row', alignItems: 'center', @@ -154,4 +153,10 @@ const styles = StyleSheet.create({ borderRadius: 20, marginLeft: 4, }, + littleXIcon: { + color: colors.red3, + position: 'absolute', + right: 7, + bottom: 7, + }, }) diff --git a/src/view/com/util/ViewSelector.tsx b/src/view/com/util/ViewSelector.tsx index 9ea7bc740..0dd93ec64 100644 --- a/src/view/com/util/ViewSelector.tsx +++ b/src/view/com/util/ViewSelector.tsx @@ -5,6 +5,7 @@ import {HorzSwipe} from './gestures/HorzSwipe' import {useAnimatedValue} from '../../lib/hooks/useAnimatedValue' import {OnScrollCb} from '../../lib/hooks/useOnMainScroll' import {clamp} from '../../../lib/numbers' +import {s} from '../../lib/styles' const HEADER_ITEM = {_reactKey: '__header__'} const SELECTOR_ITEM = {_reactKey: '__selector__'} @@ -54,7 +55,7 @@ export function ViewSelector({ setSelectedIndex(clamp(index, 0, sections.length)) useEffect(() => { onSelectView?.(selectedIndex) - }, [selectedIndex]) + }, [selectedIndex, onSelectView]) // rendering // = @@ -98,7 +99,7 @@ export function ViewSelector({ onScroll={onScroll} onRefresh={onRefresh} onEndReached={onEndReached} - contentContainerStyle={{paddingBottom: 200}} + contentContainerStyle={s.contentContainer} /> </HorzSwipe> ) diff --git a/src/view/com/util/forms/RadioGroup.tsx b/src/view/com/util/forms/RadioGroup.tsx index 9abc2345f..b33cd9831 100644 --- a/src/view/com/util/forms/RadioGroup.tsx +++ b/src/view/com/util/forms/RadioGroup.tsx @@ -2,6 +2,7 @@ import React, {useState} from 'react' import {View} from 'react-native' import {RadioButton} from './RadioButton' import {ButtonType} from './Button' +import {s} from '../../../lib/styles' export interface RadioGroupItem { label: string @@ -29,7 +30,7 @@ export function RadioGroup({ {items.map((item, i) => ( <RadioButton key={item.key} - style={i !== 0 ? {marginTop: 2} : undefined} + style={i !== 0 ? s.mt2 : undefined} type={type} label={item.label} isSelected={item.key === selection} diff --git a/src/view/com/util/gestures/HorzSwipe.tsx b/src/view/com/util/gestures/HorzSwipe.tsx index 6dcdcf918..22b15afe7 100644 --- a/src/view/com/util/gestures/HorzSwipe.tsx +++ b/src/view/com/util/gestures/HorzSwipe.tsx @@ -9,6 +9,7 @@ import { View, } from 'react-native' import {clamp} from 'lodash' +import {s} from '../../../lib/styles' interface Props { panX: Animated.Value @@ -111,7 +112,9 @@ export function HorzSwipe({ (Math.abs(gestureState.dx) > swipeDistanceThreshold / 4 || Math.abs(gestureState.vx) > swipeVelocityThreshold) ) { - const final = ((gestureState.dx / Math.abs(gestureState.dx)) * -1) | 0 + const final = Math.floor( + (gestureState.dx / Math.abs(gestureState.dx)) * -1, + ) Animated.timing(panX, { toValue: final, duration: 100, @@ -144,7 +147,7 @@ export function HorzSwipe({ }) return ( - <View {...panResponder.panHandlers} style={{flex: 1}}> + <View {...panResponder.panHandlers} style={s.h100pct}> {children} </View> ) diff --git a/src/view/com/util/gestures/SwipeAndZoom.tsx b/src/view/com/util/gestures/SwipeAndZoom.tsx index 881eea094..ee00edab7 100644 --- a/src/view/com/util/gestures/SwipeAndZoom.tsx +++ b/src/view/com/util/gestures/SwipeAndZoom.tsx @@ -9,6 +9,7 @@ import { View, } from 'react-native' import {clamp} from 'lodash' +import {s} from '../../../lib/styles' export enum Dir { None, @@ -294,7 +295,7 @@ export function SwipeAndZoom({ }) return ( - <View {...panResponder.panHandlers} style={{flex: 1}}> + <View {...panResponder.panHandlers} style={s.h100pct}> {children} </View> ) diff --git a/src/view/com/util/images/AutoSizedImage.tsx b/src/view/com/util/images/AutoSizedImage.tsx index a711323a9..648bb957f 100644 --- a/src/view/com/util/images/AutoSizedImage.tsx +++ b/src/view/com/util/images/AutoSizedImage.tsx @@ -47,9 +47,9 @@ export function AutoSizedImage({ setImgInfo({width, height}) } }, - (error: any) => { + (err: any) => { if (!aborted) { - setError(String(error)) + setError(String(err)) } }, ) diff --git a/src/view/com/util/images/ImageLayoutGrid.tsx b/src/view/com/util/images/ImageLayoutGrid.tsx index 5eb5b3c54..8acab7109 100644 --- a/src/view/com/util/images/ImageLayoutGrid.tsx +++ b/src/view/com/util/images/ImageLayoutGrid.tsx @@ -105,7 +105,7 @@ function ImageLayoutGridInner({ <TouchableWithoutFeedback onPress={() => onPress?.(1)}> <Image source={{uri: uris[1]}} style={size1} /> </TouchableWithoutFeedback> - <View style={{height: 5}} /> + <View style={styles.hSpace} /> <TouchableWithoutFeedback onPress={() => onPress?.(2)}> <Image source={{uri: uris[2]}} style={size1} /> </TouchableWithoutFeedback> |