fix quote & feed padding not being pressable (#7694)

bluesky-social · Feb 12, 2025 · 521a764 · 521a764
1 parent 7d694f6
commit 521a764
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 47 deletions.
diff --git a/src/components/ListCard.tsx b/src/components/ListCard.tsx
@@ -26,6 +26,7 @@ import {
 import {Link as InternalLink, LinkProps} from '#/components/Link'
 import * as Hider from '#/components/moderation/Hider'
 import {Text} from '#/components/Typography'
+import {ButtonProps} from './Button'
 
 /*
  * This component is based on `FeedCard` and is tightly coupled with that
@@ -48,7 +49,7 @@ const MODLIST = 'app.bsky.graph.defs#modlist'
 type Props = {
   view: AppBskyGraphDefs.ListView
   showPinButton?: boolean
-}
+} & Omit<LinkProps, 'to' | 'label' | 'children'>
 
 export function Default(props: Props) {
   const {view, showPinButton} = props
@@ -82,7 +83,7 @@ export function Link({
   view,
   children,
   ...props
-}: Props & Omit<LinkProps, 'to' | 'label'>) {
+}: Props & Pick<ButtonProps, 'children'>) {
   const queryClient = useQueryClient()
 
   const href = React.useMemo(() => {

diff --git a/src/view/com/util/post-embeds/QuoteEmbed.tsx b/src/view/com/util/post-embeds/QuoteEmbed.tsx
@@ -221,16 +221,15 @@ export function QuoteEmbed({
         modui={moderation?.ui('contentList')}
         style={[
           a.rounded_md,
-          a.p_md,
           a.mt_sm,
           a.border,
           t.atoms.border_contrast_low,
           style,
-        ]}
-        childContainerStyle={[a.pt_sm]}>
+        ]}>
         <SubtleWebHover hover={hover} />
         <Link
           hoverStyle={{borderColor: pal.colors.borderLinkHover}}
+          style={[a.p_md, a.pt_sm]}
           href={itemHref}
           title={itemTitle}
           onBeforePress={onBeforePress}>

diff --git a/src/view/com/util/post-embeds/index.tsx b/src/view/com/util/post-embeds/index.tsx
@@ -1,11 +1,5 @@
 import React from 'react'
-import {
-  InteractionManager,
-  StyleProp,
-  StyleSheet,
-  View,
-  ViewStyle,
-} from 'react-native'
+import {InteractionManager, StyleProp, View, ViewStyle} from 'react-native'
 import {MeasuredDimensions, runOnJS, runOnUI} from 'react-native-reanimated'
 import {Image} from 'expo-image'
 import {
@@ -22,7 +16,6 @@ import {
 } from '@atproto/api'
 
 import {HandleRef, measureHandle} from '#/lib/hooks/useHandleRef'
-import {usePalette} from '#/lib/hooks/usePalette'
 import {useLightboxControls} from '#/state/lightbox'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {FeedSourceCard} from '#/view/com/feeds/FeedSourceCard'
@@ -255,7 +248,7 @@ export function PostEmbeds({
 }
 
 export function MaybeFeedCard({view}: {view: AppBskyFeedDefs.GeneratorView}) {
-  const pal = usePalette('default')
+  const t = useTheme()
   const moderationOpts = useModerationOpts()
   const moderation = React.useMemo(() => {
     return moderationOpts
@@ -267,7 +260,7 @@ export function MaybeFeedCard({view}: {view: AppBskyFeedDefs.GeneratorView}) {
     <ContentHider modui={moderation?.ui('contentList')}>
       <FeedSourceCard
         feedUri={view.uri}
-        style={[pal.view, pal.border, styles.customFeedOuter]}
+        style={[a.border, t.atoms.border_contrast_medium, a.p_md, a.rounded_sm]}
         showLikes
       />
     </ContentHider>
@@ -283,38 +276,10 @@ export function MaybeListCard({view}: {view: AppBskyGraphDefs.ListView}) {
 
   return (
     <ContentHider modui={moderation?.ui('contentList')}>
-      <View
-        style={[
-          a.border,
-          t.atoms.border_contrast_medium,
-          a.p_md,
-          a.rounded_sm,
-        ]}>
-        <ListCard.Default view={view} />
-      </View>
+      <ListCard.Default
+        view={view}
+        style={[a.border, t.atoms.border_contrast_medium, a.p_md, a.rounded_sm]}
+      />
     </ContentHider>
   )
 }
-
-const styles = StyleSheet.create({
-  altContainer: {
-    backgroundColor: 'rgba(0, 0, 0, 0.75)',
-    borderRadius: 6,
-    paddingHorizontal: 6,
-    paddingVertical: 3,
-    position: 'absolute',
-    right: 6,
-    bottom: 6,
-  },
-  alt: {
-    color: 'white',
-    fontSize: 7,
-    fontWeight: '600',
-  },
-  customFeedOuter: {
-    borderWidth: StyleSheet.hairlineWidth,
-    borderRadius: 8,
-    paddingHorizontal: 12,
-    paddingVertical: 12,
-  },
-})