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

Migrate buttons

Browse Source
This commit is contained in:
Eric Bailey
2024-02-12 16:27:24 -06:00
parent a289b616b2
commit 65582457b7
9 changed files with 87 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/icons/circleBanSign_stroke2_corner0_rounded.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M12 4a8 8 0 0 0-6.32 12.906L16.906 5.68A7.962 7.962 0 0 0 12 4Zm6.32 3.094L7.094 18.32A8 8 0 0 0 18.32 7.094ZM2 12C2 6.477 6.477 2 12 2a9.972 9.972 0 0 1 7.071 2.929A9.972 9.972 0 0 1 22 12c0 5.523-4.477 10-10 10a9.972 9.972 0 0 1-7.071-2.929A9.972 9.972 0 0 1 2 12Z" clip-rule="evenodd"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 409 B

assets/icons/group3_stroke2_corner0_rounded.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M8 5a2 2 0 1 0 0 4 2 2 0 0 0 0-4ZM4 7a4 4 0 1 1 8 0 4 4 0 0 1-8 0Zm13-1a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm-3.5 1.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0Zm5.826 7.376c-.919-.779-2.052-1.03-3.1-.787a1 1 0 0 1-.451-1.949c1.671-.386 3.45.028 4.844 1.211 1.397 1.185 2.348 3.084 2.524 5.579a1 1 0 0 1-.997 1.07H18a1 1 0 1 1 0-2h3.007c-.29-1.47-.935-2.49-1.681-3.124ZM3.126 19h9.747c-.61-3.495-2.867-5-4.873-5-2.006 0-4.263 1.505-4.873 5ZM8 12c3.47 0 6.64 2.857 6.998 7.93A1 1 0 0 1 14 21H2a1 1 0 0 1-.998-1.07C1.36 14.857 4.53 12 8 12Z" clip-rule="evenodd"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 674 B

assets/icons/person_stroke2_corner0_rounded.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M12 4a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5ZM7.5 6.5a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM5.678 19h12.644c-.71-2.909-3.092-5-6.322-5s-5.613 2.091-6.322 5Zm-2.174.906C3.917 15.521 7.242 12 12 12c4.758 0 8.083 3.521 8.496 7.906A1 1 0 0 1 19.5 21h-15a1 1 0 0 1-.996-1.094Z" clip-rule="evenodd"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 410 B

src/alf/atoms.ts
+3
View File
@@ -223,6 +223,9 @@ export const atoms = {
/*
* Border
*/
border_0: {
borderWidth: 0,
},
border: {
borderWidth: 1,
},
src/components/icons/CircleBanSign.tsx
+5
View File
@@ -0,0 +1,5 @@
import {createSinglePathSVG} from './TEMPLATE'
export const CircleBanSign_Stroke2_Corner0_Rounded = createSinglePathSVG({
path: 'M12 4a8 8 0 0 0-6.32 12.906L16.906 5.68A7.962 7.962 0 0 0 12 4Zm6.32 3.094L7.094 18.32A8 8 0 0 0 18.32 7.094ZM2 12C2 6.477 6.477 2 12 2a9.972 9.972 0 0 1 7.071 2.929A9.972 9.972 0 0 1 22 12c0 5.523-4.477 10-10 10a9.972 9.972 0 0 1-7.071-2.929A9.972 9.972 0 0 1 2 12Z',
})
src/components/icons/Group.tsx
+5
View File
@@ -0,0 +1,5 @@
import {createSinglePathSVG} from './TEMPLATE'
export const Group3_Stroke2_Corner0_Rounded = createSinglePathSVG({
path: 'M8 5a2 2 0 1 0 0 4 2 2 0 0 0 0-4ZM4 7a4 4 0 1 1 8 0 4 4 0 0 1-8 0Zm13-1a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm-3.5 1.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0Zm5.826 7.376c-.919-.779-2.052-1.03-3.1-.787a1 1 0 0 1-.451-1.949c1.671-.386 3.45.028 4.844 1.211 1.397 1.185 2.348 3.084 2.524 5.579a1 1 0 0 1-.997 1.07H18a1 1 0 1 1 0-2h3.007c-.29-1.47-.935-2.49-1.681-3.124ZM3.126 19h9.747c-.61-3.495-2.867-5-4.873-5-2.006 0-4.263 1.505-4.873 5ZM8 12c3.47 0 6.64 2.857 6.998 7.93A1 1 0 0 1 14 21H2a1 1 0 0 1-.998-1.07C1.36 14.857 4.53 12 8 12Z',
})
src/components/icons/Group3.tsx
-5
View File
@@ -1,5 +0,0 @@
import {createSinglePathSVG} from './TEMPLATE'
export const Group3_Stroke2_Corner0_Rounded = createSinglePathSVG({
path: 'M17 16H21.1456C20.8246 11.4468 17.7199 9.48509 15.0001 10.1147M10 4C10 5.65685 8.65685 7 7 7C5.34315 7 4 5.65685 4 4C4 2.34315 5.34315 1 7 1C8.65685 1 10 2.34315 10 4ZM18.5 4.5C18.5 5.88071 17.3807 7 16 7C14.6193 7 13.5 5.88071 13.5 4.5C13.5 3.11929 14.6193 2 16 2C17.3807 2 18.5 3.11929 18.5 4.5ZM1 17H13C12.3421 7.66667 1.65792 7.66667 1 17Z',
})
src/components/icons/Person.tsx
+5
View File
@@ -0,0 +1,5 @@
import {createSinglePathSVG} from './TEMPLATE'
export const Person_Stroke2_Corner0_Rounded = createSinglePathSVG({
path: 'M12 4a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5ZM7.5 6.5a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM5.678 19h12.644c-.71-2.909-3.092-5-6.322-5s-5.613 2.091-6.322 5Zm-2.174.906C3.917 15.521 7.242 12 12 12c4.758 0 8.083 3.521 8.496 7.906A1 1 0 0 1 19.5 21h-15a1 1 0 0 1-.996-1.094Z',
})
src/screens/Moderation/index.tsx
+66 -67
View File
@@ -16,7 +16,7 @@ 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} from '#/view/com/util/text/Text'
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'
@@ -32,14 +32,20 @@ import {
} from '#/state/queries/profile'
import {ScrollView} from '#/view/com/util/Views'
import {useTheme, atoms as a, useBreakpoints} from '#/alf'
import {Divider} from '#/components/Divider'
import {CircleBanSign_Stroke2_Corner0_Rounded as CircleBanSign} from '#/components/icons/CircleBanSign'
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'
type Props = NativeStackScreenProps<CommonNavigatorParams, 'Moderation'>
export function ModerationScreen({}: Props) {
const pal = usePalette('default')
const t = useTheme()
const {_} = useLingui()
const setMinimalShellMode = useSetMinimalShellMode()
const {screen, track} = useAnalytics()
const {isTabletOrDesktop} = useWebMediaQueries()
const {openModal} = useModalControls()
const {screen} = useAnalytics()
const {gtMobile, gtTablet} = useBreakpoints()
useFocusEffect(
React.useCallback(() => {
@@ -48,91 +54,84 @@ export function ModerationScreen({}: Props) {
}, [screen, setMinimalShellMode]),
)
const onPressContentFiltering = React.useCallback(() => {
track('Moderation:ContentfilteringButtonClicked')
openModal({name: 'content-filtering-settings'})
}, [track, openModal])
return (
<CenteredView
style={[
s.hContentRegion,
pal.border,
isTabletOrDesktop ? styles.desktopContainer : pal.viewLight,
a.border,
t.atoms.border_contrast_low,
t.atoms.bg,
...(gtMobile ? [a.border_l, a.border_r] : []),
]}
testID="moderationScreen">
<ViewHeader title={_(msg`Moderation`)} showOnDesktop />
<ScrollView contentContainerStyle={[styles.noBorder]}>
<View style={styles.spacer} />
<TouchableOpacity
testID="contentFilteringBtn"
style={[styles.linkCard, pal.view]}
onPress={onPressContentFiltering}
accessibilityRole="tab"
accessibilityHint="Content filtering"
accessibilityLabel="">
<View style={[styles.iconContainer, pal.btn]}>
<FontAwesomeIcon
icon="eye"
style={pal.text as FontAwesomeIconStyle}
/>
</View>
<Text type="lg" style={pal.text}>
<Trans>Content filtering</Trans>
</Text>
</TouchableOpacity>
<ScrollView contentContainerStyle={[a.border_0]}>
{!gtTablet && <Divider />}
<Link
testID="moderationlistsBtn"
style={[styles.linkCard, pal.view]}
style={[a.flex_row, a.align_center, a.py_md, a.px_lg, a.gap_md]}
href="/moderation/modlists">
<View style={[styles.iconContainer, pal.btn]}>
<FontAwesomeIcon
icon="users-slash"
style={pal.text as FontAwesomeIconStyle}
/>
<View
style={[
a.align_center,
a.justify_center,
a.p_md,
a.rounded_full,
t.atoms.bg_contrast_50,
]}>
<Group size="md" style={[t.atoms.text_contrast_medium]} />
</View>
<Text type="lg" style={pal.text}>
<Text style={[a.text_md]}>
<Trans>Moderation lists</Trans>
</Text>
</Link>
<Divider />
<Link
testID="mutedAccountsBtn"
style={[styles.linkCard, pal.view]}
style={[a.flex_row, a.align_center, a.py_md, a.px_lg, a.gap_md]}
href="/moderation/muted-accounts">
<View style={[styles.iconContainer, pal.btn]}>
<FontAwesomeIcon
icon="user-slash"
style={pal.text as FontAwesomeIconStyle}
/>
<View
style={[
a.align_center,
a.justify_center,
a.p_md,
a.rounded_full,
t.atoms.bg_contrast_50,
]}>
<Person size="md" style={[t.atoms.text_contrast_medium]} />
</View>
<Text type="lg" style={pal.text}>
<Text style={[a.text_md]}>
<Trans>Muted accounts</Trans>
</Text>
</Link>
<Divider />
<Link
testID="blockedAccountsBtn"
style={[styles.linkCard, pal.view]}
style={[a.flex_row, a.align_center, a.py_md, a.px_lg, a.gap_md]}
href="/moderation/blocked-accounts">
<View style={[styles.iconContainer, pal.btn]}>
<FontAwesomeIcon
icon="ban"
style={pal.text as FontAwesomeIconStyle}
/>
<View
style={[
a.align_center,
a.justify_center,
a.p_md,
a.rounded_full,
t.atoms.bg_contrast_50,
]}>
<CircleBanSign size="md" style={[t.atoms.text_contrast_medium]} />
</View>
<Text type="lg" style={pal.text}>
<Text style={[a.text_md]}>
<Trans>Blocked accounts</Trans>
</Text>
</Link>
<Text
type="xl-bold"
style={[
pal.text,
{
paddingHorizontal: 18,
paddingTop: 18,
paddingBottom: 6,
},
]}>
<Divider />
<Text style={[a.text_lg, a.font_bold, a.pl_lg, a.pt_lg, a.pb_sm]}>
<Trans>Logged-out visibility</Trans>
</Text>
<PwiOptOut />
@@ -222,21 +221,21 @@ function PwiOptOut() {
paddingBottom: 10,
marginBottom: 64,
}}>
<Text style={pal.textLight}>
<OldText style={pal.textLight}>
<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>
</Text>
<Text style={[pal.textLight, {fontWeight: '500'}]}>
</OldText>
<OldText style={[pal.textLight, {fontWeight: '500'}]}>
<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>
</Text>
</OldText>
<TextLink
style={pal.link}
href="https://blueskyweb.zendesk.com/hc/en-us/articles/15835264007693-Data-Privacy"