diff options
Diffstat (limited to 'src/view/shell')
| -rw-r--r-- | src/view/shell/Drawer.tsx | 64 | ||||
| -rw-r--r-- | src/view/shell/desktop/RightNav.tsx | 9 | ||||
| -rw-r--r-- | src/view/shell/desktop/Search.tsx | 83 |
3 files changed, 51 insertions, 105 deletions
diff --git a/src/view/shell/Drawer.tsx b/src/view/shell/Drawer.tsx index 4b765962a..0e852edd1 100644 --- a/src/view/shell/Drawer.tsx +++ b/src/view/shell/Drawer.tsx @@ -33,6 +33,7 @@ import {NavSignupCard} from '#/view/shell/NavSignupCard' import {formatCountShortOnly} from 'view/com/util/numeric/format' import {Text} from 'view/com/util/text/Text' import {UserAvatar} from 'view/com/util/UserAvatar' +import {atoms as a} from '#/alf' import {useTheme as useAlfTheme} from '#/alf' import {Button, ButtonIcon, ButtonText} from '#/components/Button' import { @@ -96,29 +97,42 @@ let DrawerProfileCard = ({ numberOfLines={1}> @{account.handle} </Text> - <Text type="xl" style={[pal.textLight, styles.profileCardFollowers]}> - <Trans> - <Text type="xl-medium" style={pal.text}> - {formatCountShortOnly(profile?.followersCount ?? 0)} - </Text>{' '} - <Plural - value={profile?.followersCount || 0} - one="follower" - other="followers" - /> - </Trans>{' '} - ·{' '} - <Trans> - <Text type="xl-medium" style={pal.text}> - {formatCountShortOnly(profile?.followsCount ?? 0)} - </Text>{' '} - <Plural - value={profile?.followsCount || 0} - one="following" - other="following" - /> - </Trans> - </Text> + <View + style={[ + styles.profileCardFollowers, + a.gap_xs, + a.flex_row, + a.align_center, + a.flex_wrap, + ]}> + <Text type="xl" style={pal.textLight}> + <Trans> + <Text type="xl-medium" style={pal.text}> + {formatCountShortOnly(profile?.followersCount ?? 0)} + </Text>{' '} + <Plural + value={profile?.followersCount || 0} + one="follower" + other="followers" + /> + </Trans> + </Text> + <Text type="xl" style={pal.textLight}> + · + </Text> + <Text type="xl" style={pal.textLight}> + <Trans> + <Text type="xl-medium" style={pal.text}> + {formatCountShortOnly(profile?.followsCount ?? 0)} + </Text>{' '} + <Plural + value={profile?.followsCount || 0} + one="following" + other="following" + /> + </Trans> + </Text> + </View> </TouchableOpacity> ) } @@ -610,7 +624,7 @@ const styles = StyleSheet.create({ backgroundColor: '#1B1919', }, main: { - paddingLeft: 20, + paddingHorizontal: 20, paddingTop: 20, }, smallSpacer: { @@ -627,14 +641,12 @@ const styles = StyleSheet.create({ }, profileCardFollowers: { marginTop: 16, - paddingRight: 10, }, menuItem: { flexDirection: 'row', alignItems: 'center', paddingVertical: 16, - paddingRight: 10, }, menuItemIconWrapper: { width: 24, diff --git a/src/view/shell/desktop/RightNav.tsx b/src/view/shell/desktop/RightNav.tsx index ed3d8212c..fb8e6c26c 100644 --- a/src/view/shell/desktop/RightNav.tsx +++ b/src/view/shell/desktop/RightNav.tsx @@ -11,6 +11,7 @@ import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {s} from 'lib/styles' import {TextLink} from 'view/com/util/Link' import {Text} from 'view/com/util/text/Text' +import {atoms as a} from '#/alf' import {ProgressGuideList} from '#/components/ProgressGuide/List' import {DesktopFeeds} from './Feeds' import {DesktopSearch} from './Search' @@ -56,7 +57,7 @@ export function DesktopRightNav({routeName}: {routeName: string}) { paddingTop: hasSession ? 0 : 18, }, ]}> - <View style={[{flexWrap: 'wrap'}, s.flexRow]}> + <View style={[{flexWrap: 'wrap'}, s.flexRow, a.gap_xs]}> {hasSession && ( <> <TextLink @@ -69,7 +70,7 @@ export function DesktopRightNav({routeName}: {routeName: string}) { text={_(msg`Feedback`)} /> <Text type="md" style={pal.textLight}> - · + · </Text> </> )} @@ -80,7 +81,7 @@ export function DesktopRightNav({routeName}: {routeName: string}) { text={_(msg`Privacy`)} /> <Text type="md" style={pal.textLight}> - · + · </Text> <TextLink type="md" @@ -89,7 +90,7 @@ export function DesktopRightNav({routeName}: {routeName: string}) { text={_(msg`Terms`)} /> <Text type="md" style={pal.textLight}> - · + · </Text> <TextLink type="md" diff --git a/src/view/shell/desktop/Search.tsx b/src/view/shell/desktop/Search.tsx index d8aa51899..1ba2d3f3d 100644 --- a/src/view/shell/desktop/Search.tsx +++ b/src/view/shell/desktop/Search.tsx @@ -2,7 +2,6 @@ import React from 'react' import { ActivityIndicator, StyleSheet, - TextInput, TouchableOpacity, View, ViewStyle, @@ -12,7 +11,7 @@ import { moderateProfile, ModerationDecision, } from '@atproto/api' -import {msg, Trans} from '@lingui/macro' +import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' import {StackActions, useNavigation} from '@react-navigation/native' import {useQueryClient} from '@tanstack/react-query' @@ -24,11 +23,11 @@ import {s} from '#/lib/styles' import {useModerationOpts} from '#/state/preferences/moderation-opts' import {useActorAutocompleteQuery} from '#/state/queries/actor-autocomplete' import {usePalette} from 'lib/hooks/usePalette' -import {MagnifyingGlassIcon2} from 'lib/icons' import {NavigationProp} from 'lib/routes/types' import {precacheProfile} from 'state/queries/profile' import {Link} from '#/view/com/util/Link' import {UserAvatar} from '#/view/com/util/UserAvatar' +import {SearchInput} from 'view/com/util/forms/SearchInput' import {Text} from 'view/com/util/text/Text' import {atoms as a} from '#/alf' @@ -183,47 +182,12 @@ export function DesktopSearch() { return ( <View style={[styles.container, pal.view]}> - <View - style={[{backgroundColor: pal.colors.backgroundLight}, styles.search]}> - <View style={[styles.inputContainer]}> - <MagnifyingGlassIcon2 - size={18} - style={[pal.textLight, styles.iconWrapper]} - /> - <TextInput - testID="searchTextInput" - placeholder={_(msg`Search`)} - placeholderTextColor={pal.colors.textLight} - selectTextOnFocus - returnKeyType="search" - value={query} - style={[pal.textLight, styles.input]} - onChangeText={onChangeText} - onSubmitEditing={onSubmit} - accessibilityRole="search" - accessibilityLabel={_(msg`Search`)} - accessibilityHint="" - autoCorrect={false} - autoComplete="off" - autoCapitalize="none" - /> - {query ? ( - <View style={styles.cancelBtn}> - <TouchableOpacity - onPress={onPressCancelSearch} - accessibilityRole="button" - accessibilityLabel={_(msg`Cancel search`)} - accessibilityHint={_(msg`Exits inputting search query`)} - onAccessibilityEscape={onPressCancelSearch}> - <Text type="lg" style={[pal.link]}> - <Trans>Cancel</Trans> - </Text> - </TouchableOpacity> - </View> - ) : undefined} - </View> - </View> - + <SearchInput + query={query} + onChangeQuery={onChangeText} + onPressCancelSearch={onPressCancelSearch} + onSubmitQuery={onSubmit} + /> {query !== '' && isActive && moderationOpts && ( <View style={[pal.view, pal.borderDark, styles.resultsContainer]}> {isFetching && !autocompleteData?.length ? ( @@ -262,33 +226,6 @@ const styles = StyleSheet.create({ position: 'relative', width: 300, }, - search: { - paddingHorizontal: 16, - paddingVertical: 2, - width: 300, - borderRadius: 20, - }, - inputContainer: { - flexDirection: 'row', - }, - iconWrapper: { - position: 'relative', - top: 2, - paddingVertical: 7, - marginRight: 8, - }, - input: { - flex: 1, - fontSize: 18, - width: '100%', - paddingTop: 7, - paddingBottom: 7, - }, - cancelBtn: { - paddingRight: 4, - paddingLeft: 10, - paddingVertical: 7, - }, resultsContainer: { marginTop: 10, flexDirection: 'column', @@ -296,8 +233,4 @@ const styles = StyleSheet.create({ borderWidth: 1, borderRadius: 6, }, - noResults: { - textAlign: 'center', - paddingVertical: 10, - }, }) |