Adjust source text in ContentHider

src/components/moderation/ContentHider.tsx

@@ -9,7 +9,7 @@ import {isJustAMute} from '#/lib/moderation'
 import {sanitizeDisplayName} from '#/lib/strings/display-names'
 
 import {atoms as a, useTheme, useBreakpoints, web} from '#/alf'
-import {Button, ButtonText} from '#/components/Button'
+import {Button} from '#/components/Button'
 import {Text} from '#/components/Typography'
 import {
   ModerationDetailsDialog,
@@ -116,28 +116,33 @@ export function ContentHider({
 
       {desc.source && blur.type === 'label' && !override && (
         <Button
-          variant="ghost"
-          size="tiny"
           onPress={() => {
             control.open()
           }}
           label={_(msg`Learn more`)}
-          style={[]}>
+          style={[a.pt_sm]}>
-          <ButtonText
+          {state => (
-            style={[
+            <Text
-              a.flex_1,
+              style={[
-              a.text_sm,
+                a.flex_1,
-              a.font_normal,
+                a.text_sm,
-              t.atoms.text_contrast_medium,
+                a.font_normal,
-              a.text_left,
+                t.atoms.text_contrast_medium,
-            ]}>
+                a.text_left,
-            <Trans>
+              ]}>
-              {sanitizeDisplayName(desc.source)}.{' '}
+              <Trans>
-              <Text style={[{color: t.palette.primary_500}, a.text_sm]}>
+                This post was labeled by {sanitizeDisplayName(desc.source!)}.{' '}
-                Learn more.
+                <Text
-              </Text>
+                  style={[
-            </Trans>
+                    {color: t.palette.primary_500},
-          </ButtonText>
+                    a.text_sm,
+                    state.hovered && [web({textDecoration: 'underline'})],
+                  ]}>
+                  Learn more.
+                </Text>
+              </Trans>
+            </Text>
+          )}
         </Button>
       )}