acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Migrate everything

Browse Source
This commit is contained in:
Eric Bailey
2024-02-12 17:45:07 -06:00
parent 65582457b7
commit 53da8d7714
3 changed files with 58 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Link.tsx
+2 -10
View File
@@ -144,6 +144,7 @@ export function useLink({
displayText,
closeModal,
openModal,
outerOnPress,
],
)
@@ -181,10 +182,7 @@ export function Link({children, to, action = 'push', ...rest}: LinkProps) {
<Button
label={href}
{...rest}
style={[
a.justify_start,
flatten(rest.style),
]}
style={[a.justify_start, flatten(rest.style)]}
role="link"
accessibilityRole="link"
href={href}
@@ -265,12 +263,6 @@ export function InlineLink({
target: isExternal ? 'blank' : undefined,
rel: isExternal ? 'noopener noreferrer' : undefined,
},
dataSet: stringChildren
? {}
: {
// default to no underline, apply this ourselves
noUnderline: '1',
},
})}>
{children}
</Text>
src/components/forms/Toggle.tsx
+17 -3
View File
@@ -2,7 +2,15 @@ import React from 'react'
import {Pressable, View, ViewStyle} from 'react-native'
import {HITSLOP_10} from 'lib/constants'
import {useTheme, atoms as a, web, native, flatten, ViewStyleProp} from '#/alf'
import {
useTheme,
atoms as a,
web,
native,
flatten,
ViewStyleProp,
TextStyleProp,
} from '#/alf'
import {Text} from '#/components/Typography'
import {useInteractionState} from '#/components/hooks/useInteractionState'
@@ -232,7 +240,10 @@ export function Item({
)
}
export function Label({children}: React.PropsWithChildren<{}>) {
export function Label({
children,
style,
}: React.PropsWithChildren<TextStyleProp>) {
const t = useTheme()
const {disabled} = useItemContext()
return (
@@ -241,11 +252,14 @@ export function Label({children}: React.PropsWithChildren<{}>) {
a.font_bold,
{
userSelect: 'none',
color: disabled ? t.palette.contrast_400 : t.palette.contrast_600,
color: disabled
? t.atoms.text_contrast_low.color
: t.atoms.text_contrast_high.color,
},
native({
paddingTop: 3,
}),
flatten(style),
]}>
{children}
</Text>
src/screens/Moderation/index.tsx
+39 -93
View File
@@ -1,30 +1,15 @@
import React from 'react'
import {
ActivityIndicator,
StyleSheet,
TouchableOpacity,
View,
} from 'react-native'
import {View} from 'react-native'
import {useFocusEffect} from '@react-navigation/native'
import {
FontAwesomeIcon,
FontAwesomeIconStyle,
} from '@fortawesome/react-native-fontawesome'
import {ComAtprotoLabelDefs} from '@atproto/api'
import {NativeStackScreenProps, CommonNavigatorParams} from '#/lib/routes/types'
import {s} from '#/lib/styles'
import {CenteredView} from '#/view/com/util/Views'
import {ViewHeader} from '#/view/com/util/ViewHeader'
import {Link, TextLink} from '#/view/com/util/Link'
import {Text as OldText} from '#/view/com/util/text/Text'
import {usePalette} from 'lib/hooks/usePalette'
import {useAnalytics} from 'lib/analytics/analytics'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {useSetMinimalShellMode} from '#/state/shell'
import {useModalControls} from '#/state/modals'
import {Trans, msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {ToggleButton} from '#/view/com/util/forms/ToggleButton'
import {NativeStackScreenProps, CommonNavigatorParams} from '#/lib/routes/types'
import {CenteredView} from '#/view/com/util/Views'
import {ViewHeader} from '#/view/com/util/ViewHeader'
import {useAnalytics} from 'lib/analytics/analytics'
import {useSetMinimalShellMode} from '#/state/shell'
import {useSession} from '#/state/session'
import {
useProfileQuery,
@@ -38,6 +23,9 @@ import {CircleBanSign_Stroke2_Corner0_Rounded as CircleBanSign} from '#/componen
import {Group3_Stroke2_Corner0_Rounded as Group} from '#/components/icons/Group'
import {Person_Stroke2_Corner0_Rounded as Person} from '#/components/icons/Person'
import {Text} from '#/components/Typography'
import * as Toggle from '#/components/forms/Toggle'
import {InlineLink, Link} from '#/components/Link'
import {Loader} from '#/components/Loader'
type Props = NativeStackScreenProps<CommonNavigatorParams, 'Moderation'>
export function ModerationScreen({}: Props) {
@@ -71,7 +59,7 @@ export function ModerationScreen({}: Props) {
<Link
testID="moderationlistsBtn"
style={[a.flex_row, a.align_center, a.py_md, a.px_lg, a.gap_md]}
href="/moderation/modlists">
to="/moderation/modlists">
<View
style={[
a.align_center,
@@ -92,7 +80,7 @@ export function ModerationScreen({}: Props) {
<Link
testID="mutedAccountsBtn"
style={[a.flex_row, a.align_center, a.py_md, a.px_lg, a.gap_md]}
href="/moderation/muted-accounts">
to="/moderation/muted-accounts">
<View
style={[
a.align_center,
@@ -113,7 +101,7 @@ export function ModerationScreen({}: Props) {
<Link
testID="blockedAccountsBtn"
style={[a.flex_row, a.align_center, a.py_md, a.px_lg, a.gap_md]}
href="/moderation/blocked-accounts">
to="/moderation/blocked-accounts">
<View
style={[
a.align_center,
@@ -141,7 +129,7 @@ export function ModerationScreen({}: Props) {
}
function PwiOptOut() {
const pal = usePalette('default')
const t = useTheme()
const {_} = useLingui()
const {currentAccount} = useSession()
const {data: profile} = useProfileQuery({did: currentAccount?.did})
@@ -197,88 +185,46 @@ function PwiOptOut() {
}, [updateProfile, profile])
return (
<View style={[pal.view, styles.toggleCard]}>
<View
style={{flexDirection: 'row', alignItems: 'center', paddingRight: 14}}>
<ToggleButton
type="default-light"
<View style={[a.pt_sm, a.px_lg]}>
<View style={[a.flex_row, a.align_center, a.justify_between, a.gap_lg]}>
<Toggle.Item
disabled={!canToggle}
value={isOptedOut}
onChange={onToggleOptOut}
name="logged_out_visibility"
label={_(
msg`Discourage apps from showing my account to logged-out users`,
)}
labelType="lg"
isSelected={isOptedOut}
onPress={canToggle ? onToggleOptOut : undefined}
style={[canToggle ? undefined : {opacity: 0.5}, {flex: 1}]}
/>
{updateProfile.isPending && <ActivityIndicator />}
)}>
<Toggle.Switch />
<Toggle.Label style={[a.text_md]}>
Discourage apps from showing my account to logged-out users
</Toggle.Label>
</Toggle.Item>
{updateProfile.isPending && <Loader />}
</View>
<View
style={{
flexDirection: 'column',
gap: 10,
paddingLeft: 66,
paddingRight: 12,
paddingBottom: 10,
marginBottom: 64,
}}>
<OldText style={pal.textLight}>
<View style={[a.pt_md, a.gap_md, {paddingLeft: 38}]}>
<Text style={[a.leading_snug, t.atoms.text_contrast_high]}>
<Trans>
Bluesky will not show your profile and posts to logged-out users.
Other apps may not honor this request. This does not make your
account private.
</Trans>
</OldText>
<OldText style={[pal.textLight, {fontWeight: '500'}]}>
</Text>
<Text style={[a.font_bold, a.leading_snug, t.atoms.text_contrast_high]}>
<Trans>
Note: Bluesky is an open and public network. This setting only
limits the visibility of your content on the Bluesky app and
website, and other apps may not respect this setting. Your content
may still be shown to logged-out users by other apps and websites.
</Trans>
</OldText>
<TextLink
style={pal.link}
href="https://blueskyweb.zendesk.com/hc/en-us/articles/15835264007693-Data-Privacy"
text={_(msg`Learn more about what is public on Bluesky.`)}
/>
</Text>
<InlineLink to="https://blueskyweb.zendesk.com/hc/en-us/articles/15835264007693-Data-Privacy">
<Trans>Learn more about what is public on Bluesky.</Trans>
</InlineLink>
</View>
</View>
)
}
const styles = StyleSheet.create({
desktopContainer: {
borderLeftWidth: 1,
borderRightWidth: 1,
},
spacer: {
height: 6,
},
linkCard: {
flexDirection: 'row',
alignItems: 'center',
paddingVertical: 12,
paddingHorizontal: 18,
marginBottom: 1,
},
toggleCard: {
paddingVertical: 8,
paddingTop: 2,
paddingHorizontal: 6,
marginBottom: 1,
},
iconContainer: {
alignItems: 'center',
justifyContent: 'center',
width: 40,
height: 40,
borderRadius: 30,
marginRight: 12,
},
noBorder: {
borderBottomWidth: 0,
borderRightWidth: 0,
borderLeftWidth: 0,
borderTopWidth: 0,
},
})