From 65582457b75a430e6ec803af571f5a97b9b22858 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Mon, 12 Feb 2024 16:27:24 -0600 Subject: [PATCH] Migrate buttons --- .../circleBanSign_stroke2_corner0_rounded.svg | 1 + .../icons/group3_stroke2_corner0_rounded.svg | 1 + .../icons/person_stroke2_corner0_rounded.svg | 1 + src/alf/atoms.ts | 3 + src/components/icons/CircleBanSign.tsx | 5 + src/components/icons/Group.tsx | 5 + src/components/icons/Group3.tsx | 5 - src/components/icons/Person.tsx | 5 + src/screens/Moderation/index.tsx | 133 +++++++++--------- 9 files changed, 87 insertions(+), 72 deletions(-) create mode 100644 assets/icons/circleBanSign_stroke2_corner0_rounded.svg create mode 100644 assets/icons/group3_stroke2_corner0_rounded.svg create mode 100644 assets/icons/person_stroke2_corner0_rounded.svg create mode 100644 src/components/icons/CircleBanSign.tsx create mode 100644 src/components/icons/Group.tsx delete mode 100644 src/components/icons/Group3.tsx create mode 100644 src/components/icons/Person.tsx diff --git a/assets/icons/circleBanSign_stroke2_corner0_rounded.svg b/assets/icons/circleBanSign_stroke2_corner0_rounded.svg new file mode 100644 index 0000000000..73251477fa --- /dev/null +++ b/assets/icons/circleBanSign_stroke2_corner0_rounded.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/group3_stroke2_corner0_rounded.svg b/assets/icons/group3_stroke2_corner0_rounded.svg new file mode 100644 index 0000000000..2a8f43a8a4 --- /dev/null +++ b/assets/icons/group3_stroke2_corner0_rounded.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/person_stroke2_corner0_rounded.svg b/assets/icons/person_stroke2_corner0_rounded.svg new file mode 100644 index 0000000000..a23ad76071 --- /dev/null +++ b/assets/icons/person_stroke2_corner0_rounded.svg @@ -0,0 +1 @@ + diff --git a/src/alf/atoms.ts b/src/alf/atoms.ts index 478a1b13e9..64b62f47c3 100644 --- a/src/alf/atoms.ts +++ b/src/alf/atoms.ts @@ -223,6 +223,9 @@ export const atoms = { /* * Border */ + border_0: { + borderWidth: 0, + }, border: { borderWidth: 1, }, diff --git a/src/components/icons/CircleBanSign.tsx b/src/components/icons/CircleBanSign.tsx new file mode 100644 index 0000000000..543985d43a --- /dev/null +++ b/src/components/icons/CircleBanSign.tsx @@ -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', +}) diff --git a/src/components/icons/Group.tsx b/src/components/icons/Group.tsx new file mode 100644 index 0000000000..9e5ab8893a --- /dev/null +++ b/src/components/icons/Group.tsx @@ -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', +}) diff --git a/src/components/icons/Group3.tsx b/src/components/icons/Group3.tsx deleted file mode 100644 index 2bb16ba870..0000000000 --- a/src/components/icons/Group3.tsx +++ /dev/null @@ -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', -}) diff --git a/src/components/icons/Person.tsx b/src/components/icons/Person.tsx new file mode 100644 index 0000000000..6d09148c9d --- /dev/null +++ b/src/components/icons/Person.tsx @@ -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', +}) diff --git a/src/screens/Moderation/index.tsx b/src/screens/Moderation/index.tsx index 5020b6c988..a40ec29891 100644 --- a/src/screens/Moderation/index.tsx +++ b/src/screens/Moderation/index.tsx @@ -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 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 ( - - - - - - - - Content filtering - - + + + {!gtTablet && } + - - + + - + Moderation lists + + + - - + + - + Muted accounts + + + - - + + - + Blocked accounts - + + + + Logged-out visibility @@ -222,21 +221,21 @@ function PwiOptOut() { paddingBottom: 10, marginBottom: 64, }}> - + 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. - - + + 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. - +