From 8e1575f5ba47c050da2e9023c7998b5b9cbe1980 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Wed, 7 Feb 2024 17:21:28 -0600 Subject: [PATCH] Subheader --- .../heart2_filled_stroke2_corner0_rounded.svg | 1 + .../icons/heart2_stroke2_corner0_rounded.svg | 1 + src/alf/atoms.ts | 3 + src/components/Button.tsx | 2 +- src/components/icons/Heart2.tsx | 9 + .../ProfileModerationService/index.tsx | 179 ++++++++---------- 6 files changed, 89 insertions(+), 106 deletions(-) create mode 100644 assets/icons/heart2_filled_stroke2_corner0_rounded.svg create mode 100644 assets/icons/heart2_stroke2_corner0_rounded.svg create mode 100644 src/components/icons/Heart2.tsx diff --git a/assets/icons/heart2_filled_stroke2_corner0_rounded.svg b/assets/icons/heart2_filled_stroke2_corner0_rounded.svg new file mode 100644 index 0000000000..1dfefb4c99 --- /dev/null +++ b/assets/icons/heart2_filled_stroke2_corner0_rounded.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/heart2_stroke2_corner0_rounded.svg b/assets/icons/heart2_stroke2_corner0_rounded.svg new file mode 100644 index 0000000000..5b3da8e00e --- /dev/null +++ b/assets/icons/heart2_stroke2_corner0_rounded.svg @@ -0,0 +1 @@ + diff --git a/src/alf/atoms.ts b/src/alf/atoms.ts index a86f8ae7f4..43ee3bd51f 100644 --- a/src/alf/atoms.ts +++ b/src/alf/atoms.ts @@ -195,6 +195,9 @@ export const atoms = { font_bold: { fontWeight: tokens.fontWeight.semibold, }, + italic: { + fontStyle: 'italic', + }, /* * Border diff --git a/src/components/Button.tsx b/src/components/Button.tsx index f88fbcbde2..9428b6a063 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -49,7 +49,7 @@ export type VariantProps = { } export type ButtonProps = React.PropsWithChildren< - Pick & + Pick & AccessibilityProps & VariantProps & { label: string diff --git a/src/components/icons/Heart2.tsx b/src/components/icons/Heart2.tsx new file mode 100644 index 0000000000..07f5a1d2c8 --- /dev/null +++ b/src/components/icons/Heart2.tsx @@ -0,0 +1,9 @@ +import {createSinglePathSVG} from './TEMPLATE' + +export const Heart2_Stroke2_Corner0_Rounded = createSinglePathSVG({ + path: 'M16.734 5.091c-1.238-.276-2.708.047-4.022 1.38a1 1 0 0 1-1.424 0C9.974 5.137 8.504 4.814 7.266 5.09c-1.263.282-2.379 1.206-2.92 2.556C3.33 10.18 4.252 14.84 12 19.348c7.747-4.508 8.67-9.168 7.654-11.7-.541-1.351-1.657-2.275-2.92-2.557Zm4.777 1.812c1.604 4-.494 9.69-9.022 14.47a1 1 0 0 1-.978 0C2.983 16.592.885 10.902 2.49 6.902c.779-1.942 2.414-3.334 4.342-3.764 1.697-.378 3.552.003 5.169 1.286 1.617-1.283 3.472-1.664 5.17-1.286 1.927.43 3.562 1.822 4.34 3.764Z', +}) + +export const Heart2_Filled_Stroke2_Corner0_Rounded = createSinglePathSVG({ + path: 'M12.489 21.372c8.528-4.78 10.626-10.47 9.022-14.47-.779-1.941-2.414-3.333-4.342-3.763-1.697-.378-3.552.003-5.169 1.287-1.617-1.284-3.472-1.665-5.17-1.287-1.927.43-3.562 1.822-4.34 3.764-1.605 4 .493 9.69 9.021 14.47a1 1 0 0 0 .978 0Z', +}) diff --git a/src/screens/ProfileModerationService/index.tsx b/src/screens/ProfileModerationService/index.tsx index b8ce5f807e..c5fd6d4e5b 100644 --- a/src/screens/ProfileModerationService/index.tsx +++ b/src/screens/ProfileModerationService/index.tsx @@ -13,7 +13,6 @@ import {ProfileSubpageHeader} from 'view/com/profile/ProfileSubpageHeader' import {TextLink} from 'view/com/util/Link' import {Button as OldButton} from 'view/com/util/forms/Button' import {Text as RNText} from 'view/com/util/text/Text' -import {RichText} from 'view/com/util/text/RichText' import {ModServicePrefs} from '#/view/com/moderation/ModServicePrefs' import * as Toast from 'view/com/util/Toast' import {useSetTitle} from 'lib/hooks/useSetTitle' @@ -43,6 +42,9 @@ import {Text} from '#/components/Typography' import {Loader} from '#/components/Loader' import {Button, ButtonText} from '#/components/Button' import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo' +import {Heart2_Stroke2_Corner0_Rounded as Heart, Heart2_Filled_Stroke2_Corner0_Rounded as HeartFilled} from '#/components/icons/Heart2' +import {RichText} from '#/components/RichText' +import {InlineLink} from '#/components/Link' import {ErrorState} from '#/screens/ProfileModerationService/ErrorState' import {Header} from '#/screens/ProfileModerationService/Header' @@ -130,6 +132,7 @@ export function ProfileModserviceScreenInner({ preferences: UsePreferencesQueryResponse modInfo: AppBskyModerationDefs.ModServiceViewDetailed }) { + const t = useTheme() const {_} = useLingui() const pal = usePalette('default') const {hasSession} = useSession() @@ -149,17 +152,6 @@ export function ProfileModserviceScreenInner({ // !unpinnedFeed && // (!!pinnedFeed || preferences.feeds.pinned.includes(feedInfo.uri)) - const descriptionRT = useMemo( - () => - modInfo.description - ? new RichTextAPI({ - text: modInfo.description, - facets: modInfo.descriptionFacets, - }) - : undefined, - [modInfo], - ) - useSetTitle(modInfo.creator.displayName || modInfo.creator.handle) // event handlers @@ -187,102 +179,79 @@ export function ProfileModserviceScreenInner({ } }, [likeUri, isLiked, modInfo, likeMod, unlikeMod, track, _]) - // render - // = - return ( - - -
- - {descriptionRT ? ( - - ) : ( - - No description - - )} - - - Operated by{' '} - - . Handles reports of anti-social behavior, illegal content, - unwanted sexual content, and misinformation. - - + +
- - - {isLiked ? ( - - ) : ( - - )} - - {typeof modInfo.likeCount === 'number' && ( - + + {modInfo.description ? ( + + ) : ( + + No description + + )} + + + + Operated by{' '} + + . Handles reports of anti-social behavior, illegal content, unwanted + sexual content, and misinformation. + + + + + + + {typeof modInfo.likeCount === 'number' && ( + + Liked by {modInfo.likeCount} {pluralize(modInfo.likeCount, 'user')} + + )} - - - - + + + + + + ) } - -const styles = StyleSheet.create({ - btn: { - flexDirection: 'row', - alignItems: 'center', - gap: 6, - paddingVertical: 7, - paddingHorizontal: 14, - borderRadius: 50, - marginLeft: 6, - }, - notFoundContainer: { - margin: 10, - paddingHorizontal: 18, - paddingVertical: 14, - borderRadius: 6, - }, -})