Subheader

assets/icons/heart2_filled_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" d="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"/></svg>

assets/icons/heart2_stroke2_corner0_rounded.svg

@@ -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="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" clip-rule="evenodd"/></svg>

src/alf/atoms.ts

@@ -195,6 +195,9 @@ export const atoms = {
   font_bold: {
     fontWeight: tokens.fontWeight.semibold,
   },
+  italic: {
+    fontStyle: 'italic',
+  },
 
   /*
    * Border

src/components/Button.tsx

@@ -49,7 +49,7 @@ export type VariantProps = {
 }
 
 export type ButtonProps = React.PropsWithChildren<
-  Pick<PressableProps, 'disabled' | 'onPress'> &
+  Pick<PressableProps, 'disabled' | 'onPress' | 'testID'> &
     AccessibilityProps &
     VariantProps & {
       label: string

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',
+})

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,40 +179,36 @@ export function ProfileModserviceScreenInner({
     }
   }, [likeUri, isLiked, modInfo, likeMod, unlikeMod, track, _])
 
-  // render
-  // =
-
   return (
-    <View style={s.hContentRegion}>
     <ScrollView
       scrollEventThrottle={1}
       contentContainerStyle={{
         minHeight: Dimensions.get('window').height * 1.5,
+        borderWidth: 0,
       }}>
       <Header info={modInfo} />
-        <View
+
-          style={[
+      <View style={[a.gap_md]}>
-            {
+        {modInfo.description ? (
-              borderTopWidth: 1,
-              paddingVertical: 20,
-              paddingHorizontal: 14,
-              gap: 12,
-            },
-            pal.border,
-          ]}>
-          {descriptionRT ? (
           <RichText
             testID="modinfoDescription"
-              type="lg"
+            resolveFacets
-              style={pal.text}
+            value={modInfo.description}
-              richText={descriptionRT}
+            style={[a.text_md, a.leading_normal]}
           />
         ) : (
-            <RNText type="lg" style={[{fontStyle: 'italic'}, pal.textLight]}>
+          <Text
+            style={[
+              a.text_md,
+              a.leading_normal,
+              t.atoms.text_contrast_700,
+              {fontStyle: 'italic'},
+            ]}>
             <Trans>No description</Trans>
-            </RNText>
+          </Text>
         )}
-          <RNText type="lg" style={pal.textLight}>
+
+        <Text style={[a.text_md, a.leading_normal, a.italic, t.atoms.text_contrast_700]}>
           <Trans>
             Operated by{' '}
             <TextLink
@@ -228,61 +216,42 @@ export function ProfileModserviceScreenInner({
               text={sanitizeHandle(modInfo.creator.handle, '@')}
               style={pal.link}
             />
-              . Handles reports of anti-social behavior, illegal content,
+            . Handles reports of anti-social behavior, illegal content, unwanted
-              unwanted sexual content, and misinformation.
+            sexual content, and misinformation.
           </Trans>
-          </RNText>
+        </Text>
 
-          <View style={{flexDirection: 'row', alignItems: 'center', gap: 10}}>
+        <View style={[a.flex_row, a.gap_md, a.align_center]}>
-            <OldButton
+          <Button
-              type="default"
             testID="toggleLikeBtn"
-              accessibilityLabel={_(msg`Like this feed`)}
+            size='small'
-              accessibilityHint=""
+            color='secondary'
+            variant='solid'
+            shape='round'
+            label={_(msg`Like this feed`)}
             disabled={!hasSession || isLikePending || isUnlikePending}
-              onPress={onToggleLiked}
+            onPress={onToggleLiked}>
-              style={{paddingHorizontal: 10}}>
             {isLiked ? (
-                <HeartIconSolid size={19} style={s.likeColor} />
+              <HeartFilled fill={t.palette.negative_400} />
             ) : (
-                <HeartIcon strokeWidth={3} size={19} style={pal.textLight} />
+              <Heart fill={t.atoms.text_contrast_700.color} />
             )}
-            </OldButton>
+          </Button>
+
           {typeof modInfo.likeCount === 'number' && (
-              <TextLink
+            <InlineLink
-                href={'#todo'}
+              to={'#todo'}
-                text={_(
-                  msg`Liked by ${modInfo.likeCount} ${pluralize(
-                    modInfo.likeCount,
-                    'user',
-                  )}`,
-                )}
               style={[pal.textLight, s.semiBold]}
-              />
+            >
+              <Trans>Liked by {modInfo.likeCount} {pluralize(modInfo.likeCount, 'user')}</Trans>
+            </InlineLink>
           )}
         </View>
       </View>
+
       <ModServicePrefs />
+
       <View style={{height: 20}} />
     </ScrollView>
-    </View>
   )
 }
-
-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,
-  },
-})