parent
6f450b4982
commit
88f879ffe9
|
@ -186,19 +186,19 @@ export function createThemes({
|
|||
white: color.gray_0,
|
||||
black: color.trueBlack,
|
||||
|
||||
contrast_25: color.gray_1000,
|
||||
contrast_50: color.gray_975,
|
||||
contrast_100: color.gray_950,
|
||||
contrast_200: color.gray_900,
|
||||
contrast_300: color.gray_800,
|
||||
contrast_400: color.gray_700,
|
||||
contrast_500: color.gray_600,
|
||||
contrast_600: color.gray_500,
|
||||
contrast_700: color.gray_400,
|
||||
contrast_800: color.gray_300,
|
||||
contrast_900: color.gray_200,
|
||||
contrast_950: color.gray_100,
|
||||
contrast_975: color.gray_50,
|
||||
contrast_25: color.gray_975,
|
||||
contrast_50: color.gray_950,
|
||||
contrast_100: color.gray_900,
|
||||
contrast_200: color.gray_800,
|
||||
contrast_300: color.gray_700,
|
||||
contrast_400: color.gray_600,
|
||||
contrast_500: color.gray_500,
|
||||
contrast_600: color.gray_400,
|
||||
contrast_700: color.gray_300,
|
||||
contrast_800: color.gray_200,
|
||||
contrast_900: color.gray_100,
|
||||
contrast_950: color.gray_50,
|
||||
contrast_975: color.gray_25,
|
||||
|
||||
primary_25: color.primary_975,
|
||||
primary_50: color.primary_950,
|
||||
|
@ -400,7 +400,7 @@ export function createThemes({
|
|||
color: darkPalette.contrast_400,
|
||||
},
|
||||
text_contrast_medium: {
|
||||
color: darkPalette.contrast_700,
|
||||
color: darkPalette.contrast_600,
|
||||
},
|
||||
text_contrast_high: {
|
||||
color: darkPalette.contrast_900,
|
||||
|
|
|
@ -202,28 +202,10 @@ export const Button = React.forwardRef<View, ButtonProps>(
|
|||
} else if (color === 'secondary') {
|
||||
if (variant === 'solid') {
|
||||
if (!disabled) {
|
||||
baseStyles.push({
|
||||
backgroundColor: select(t.name, {
|
||||
light: t.palette.contrast_25,
|
||||
dim: t.palette.contrast_100,
|
||||
dark: t.palette.contrast_100,
|
||||
}),
|
||||
})
|
||||
hoverStyles.push({
|
||||
backgroundColor: select(t.name, {
|
||||
light: t.palette.contrast_50,
|
||||
dim: t.palette.contrast_200,
|
||||
dark: t.palette.contrast_200,
|
||||
}),
|
||||
})
|
||||
baseStyles.push(t.atoms.bg_contrast_25)
|
||||
hoverStyles.push(t.atoms.bg_contrast_50)
|
||||
} else {
|
||||
baseStyles.push({
|
||||
backgroundColor: select(t.name, {
|
||||
light: t.palette.contrast_100,
|
||||
dim: t.palette.contrast_25,
|
||||
dark: t.palette.contrast_25,
|
||||
}),
|
||||
})
|
||||
baseStyles.push(t.atoms.bg_contrast_100)
|
||||
}
|
||||
} else if (variant === 'outline') {
|
||||
baseStyles.push(a.border, t.atoms.bg, {
|
||||
|
|
|
@ -249,7 +249,9 @@ function DialogError({details}: {details?: string}) {
|
|||
const control = Dialog.useDialogContext()
|
||||
|
||||
return (
|
||||
<Dialog.ScrollableInner style={a.gap_md} label={_(msg`An error has occurred`)}>
|
||||
<Dialog.ScrollableInner
|
||||
style={a.gap_md}
|
||||
label={_(msg`An error has occurred`)}>
|
||||
<Dialog.Close />
|
||||
<ErrorScreen
|
||||
title={_(msg`Oh no!`)}
|
||||
|
|
|
@ -193,6 +193,7 @@ export function createInput(Component: typeof TextInput) {
|
|||
lineHeight: a.text_md.fontSize * 1.1875,
|
||||
textAlignVertical: rest.multiline ? 'top' : undefined,
|
||||
minHeight: rest.multiline ? 80 : undefined,
|
||||
minWidth: 0,
|
||||
},
|
||||
// fix for autofill styles covering border
|
||||
web({
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
import {Dimensions, StyleProp, StyleSheet, TextStyle} from 'react-native'
|
||||
import {Theme, TypographyVariant} from './ThemeContext'
|
||||
|
||||
import {isWeb} from 'platform/detection'
|
||||
import {Theme, TypographyVariant} from './ThemeContext'
|
||||
|
||||
// 1 is lightest, 2 is light, 3 is mid, 4 is dark, 5 is darkest
|
||||
export const colors = {
|
||||
|
|
|
@ -295,9 +295,9 @@ export const darkTheme: Theme = {
|
|||
...defaultTheme.palette,
|
||||
default: {
|
||||
background: darkPalette.black,
|
||||
backgroundLight: darkPalette.contrast_50,
|
||||
backgroundLight: darkPalette.contrast_25,
|
||||
text: darkPalette.white,
|
||||
textLight: darkPalette.contrast_700,
|
||||
textLight: darkPalette.contrast_600,
|
||||
textInverted: darkPalette.black,
|
||||
link: darkPalette.primary_500,
|
||||
border: darkPalette.contrast_100,
|
||||
|
@ -344,7 +344,7 @@ export const dimTheme: Theme = {
|
|||
default: {
|
||||
...darkTheme.palette.default,
|
||||
background: dimPalette.black,
|
||||
backgroundLight: dimPalette.contrast_50,
|
||||
backgroundLight: dimPalette.contrast_25,
|
||||
text: dimPalette.white,
|
||||
textLight: dimPalette.contrast_700,
|
||||
textInverted: dimPalette.black,
|
||||
|
|
|
@ -193,13 +193,11 @@ const styles = StyleSheet.create({
|
|||
tabBarContainer: {
|
||||
// @ts-ignore web-only
|
||||
position: 'sticky',
|
||||
overflow: 'hidden',
|
||||
top: 0,
|
||||
zIndex: 1,
|
||||
},
|
||||
tabBarContainerDesktop: {
|
||||
marginHorizontal: 'auto',
|
||||
paddingHorizontal: 2,
|
||||
width: 600,
|
||||
borderLeftWidth: 1,
|
||||
borderRightWidth: 1,
|
||||
|
|
|
@ -180,7 +180,7 @@ const desktopStyles = StyleSheet.create({
|
|||
left: 0,
|
||||
right: 0,
|
||||
top: '100%',
|
||||
borderBottomWidth: 1,
|
||||
borderBottomWidth: StyleSheet.hairlineWidth,
|
||||
},
|
||||
})
|
||||
|
||||
|
|
|
@ -660,7 +660,7 @@ function ExpandedPostDetails({
|
|||
a.flex_row,
|
||||
a.align_center,
|
||||
a.flex_wrap,
|
||||
a.gap_sm,
|
||||
a.gap_xs,
|
||||
s.mt2,
|
||||
s.mb10,
|
||||
]}>
|
||||
|
|
|
@ -480,9 +480,7 @@ let Feed = ({
|
|||
// -prf
|
||||
return <DiscoverFallbackHeader />
|
||||
}
|
||||
return (
|
||||
<FeedSlice slice={item.slice} hideTopBorder={index === 0 && !isWeb} />
|
||||
)
|
||||
return <FeedSlice slice={item.slice} hideTopBorder={index === 0} />
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
|
|
|
@ -91,11 +91,7 @@ let PostMeta = (opts: PostMetaOpts): React.ReactNode => {
|
|||
</Text>
|
||||
</ProfileHoverCard>
|
||||
{!isAndroid && (
|
||||
<Text
|
||||
type="md"
|
||||
style={pal.textLight}
|
||||
lineHeight={1.2}
|
||||
accessible={false}>
|
||||
<Text type="md" style={pal.textLight} accessible={false}>
|
||||
·
|
||||
</Text>
|
||||
)}
|
||||
|
@ -104,7 +100,6 @@ let PostMeta = (opts: PostMetaOpts): React.ReactNode => {
|
|||
<TextLinkOnWebOnly
|
||||
type="md"
|
||||
style={pal.textLight}
|
||||
lineHeight={1.2}
|
||||
text={timeElapsed}
|
||||
accessibilityLabel={niceDate(opts.timestamp)}
|
||||
title={niceDate(opts.timestamp)}
|
||||
|
|
|
@ -80,7 +80,7 @@ export function AccessibilitySettingsScreen({}: Props) {
|
|||
style={s.flex1}
|
||||
contentContainerStyle={[
|
||||
s.flex1,
|
||||
{paddingBottom: 200},
|
||||
{paddingBottom: 100},
|
||||
isMobile && pal.viewLight,
|
||||
]}>
|
||||
<Text type="xl-bold" style={[pal.text, styles.heading]}>
|
||||
|
|
|
@ -145,6 +145,7 @@ export function LanguageSettingsScreen(_props: Props) {
|
|||
backgroundColor: pal.viewLight.backgroundColor,
|
||||
color: pal.text.color,
|
||||
fontSize: 14,
|
||||
fontFamily: 'inherit',
|
||||
letterSpacing: 0.5,
|
||||
fontWeight: '500',
|
||||
paddingHorizontal: 14,
|
||||
|
@ -236,6 +237,7 @@ export function LanguageSettingsScreen(_props: Props) {
|
|||
backgroundColor: pal.viewLight.backgroundColor,
|
||||
color: pal.text.color,
|
||||
fontSize: 14,
|
||||
fontFamily: 'inherit',
|
||||
letterSpacing: 0.5,
|
||||
fontWeight: '500',
|
||||
paddingHorizontal: 14,
|
||||
|
|
|
@ -571,7 +571,7 @@ export function Explore() {
|
|||
keyExtractor={item => item.key}
|
||||
// @ts-ignore web only -prf
|
||||
desktopFixedHeight
|
||||
contentContainerStyle={{paddingBottom: 200}}
|
||||
contentContainerStyle={{paddingBottom: 100}}
|
||||
keyboardShouldPersistTaps="handled"
|
||||
keyboardDismissMode="on-drag"
|
||||
/>
|
||||
|
|
|
@ -783,7 +783,7 @@ let SearchInputBox = ({
|
|||
}}>
|
||||
<MagnifyingGlassIcon
|
||||
style={[pal.icon, styles.headerSearchIcon]}
|
||||
size={21}
|
||||
size={20}
|
||||
/>
|
||||
<TextInput
|
||||
testID="searchTextInput"
|
||||
|
@ -1071,6 +1071,7 @@ const styles = StyleSheet.create({
|
|||
headerSearchInput: {
|
||||
flex: 1,
|
||||
fontSize: 17,
|
||||
minWidth: 0,
|
||||
},
|
||||
headerCancelBtn: {
|
||||
paddingLeft: 10,
|
||||
|
|
|
@ -325,7 +325,7 @@ export function SettingsScreen({}: Props) {
|
|||
</View>
|
||||
</SimpleViewHeader>
|
||||
<ScrollView
|
||||
style={[s.hContentRegion, isMobile && pal.viewLight]}
|
||||
style={[isMobile && pal.viewLight]}
|
||||
scrollIndicatorInsets={{right: 1}}
|
||||
// @ts-ignore web only -prf
|
||||
dataSet={{'stable-gutters': 1}}>
|
||||
|
|
|
@ -36,7 +36,7 @@ function StorybookInner() {
|
|||
|
||||
return (
|
||||
<CenteredView style={[t.atoms.bg]}>
|
||||
<View style={[a.p_xl, a.gap_5xl, {paddingBottom: 200}]}>
|
||||
<View style={[a.p_xl, a.gap_5xl, {paddingBottom: 100}]}>
|
||||
{!showContainedList ? (
|
||||
<>
|
||||
<View style={[a.flex_row, a.align_start, a.gap_md]}>
|
||||
|
|
|
@ -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,7 +97,15 @@ let DrawerProfileCard = ({
|
|||
numberOfLines={1}>
|
||||
@{account.handle}
|
||||
</Text>
|
||||
<Text type="xl" style={[pal.textLight, styles.profileCardFollowers]}>
|
||||
<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)}
|
||||
|
@ -106,8 +115,12 @@ let DrawerProfileCard = ({
|
|||
one="follower"
|
||||
other="followers"
|
||||
/>
|
||||
</Trans>{' '}
|
||||
·{' '}
|
||||
</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)}
|
||||
|
@ -119,6 +132,7 @@ let DrawerProfileCard = ({
|
|||
/>
|
||||
</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,
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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]}
|
||||
<SearchInput
|
||||
query={query}
|
||||
onChangeQuery={onChangeText}
|
||||
onPressCancelSearch={onPressCancelSearch}
|
||||
onSubmitQuery={onSubmit}
|
||||
/>
|
||||
<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>
|
||||
|
||||
{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,
|
||||
},
|
||||
})
|
||||
|
|
Loading…
Reference in New Issue