diff --git a/src/view/com/Tag.tsx b/src/view/com/Tag.tsx index cd71a73ac0..8dbceb5357 100644 --- a/src/view/com/Tag.tsx +++ b/src/view/com/Tag.tsx @@ -6,15 +6,61 @@ import { } from '@fortawesome/react-native-fontawesome' import {usePalette} from 'lib/hooks/usePalette' -import {Text} from 'view/com/util/text/Text' +import {Text, CustomTextProps} from 'view/com/util/text/Text' +import {Link} from 'view/com/util/Link' -export function Tag({value}: {value: string}) { +export function Tag({ + value, + textSize, +}: { + value: string + textSize?: CustomTextProps['type'] +}) { const pal = usePalette('default') + const type = textSize || 'xs-medium' return ( - - #{value} - + + + #{value} + + + ) +} + +export function InlineTag({ + value, + textSize, +}: { + value: string + textSize?: CustomTextProps['type'] +}) { + const pal = usePalette('default') + const type = textSize || 'xs-medium' + + return ( + + + #{value} + + ) } @@ -74,8 +120,9 @@ const styles = StyleSheet.create({ flexDirection: 'row', alignItems: 'center', gap: 4, - paddingVertical: 3, - paddingHorizontal: 8, + paddingTop: 1, + paddingBottom: 2, + paddingHorizontal: 6, borderRadius: 20, overflow: 'hidden', borderWidth: 1, diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx index bc51a06d6d..16833363a8 100644 --- a/src/view/com/post-thread/PostThreadItem.tsx +++ b/src/view/com/post-thread/PostThreadItem.tsx @@ -36,6 +36,7 @@ import {TimeElapsed} from 'view/com/util/TimeElapsed' import {makeProfileLink} from 'lib/routes/links' import {isDesktopWeb} from 'platform/detection' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {Tag} from 'view/com/Tag' export const PostThreadItem = observer(function PostThreadItem({ item, @@ -339,18 +340,7 @@ export const PostThreadItem = observer(function PostThreadItem({ paddingBottom: 12, }}> {item.post.record.tags.map(tag => ( - - - #{tag} - - + ))} ) : null} diff --git a/src/view/com/util/text/RichText.tsx b/src/view/com/util/text/RichText.tsx index b17cf1eb94..e8812cce10 100644 --- a/src/view/com/util/text/RichText.tsx +++ b/src/view/com/util/text/RichText.tsx @@ -7,6 +7,7 @@ import {lh} from 'lib/styles' import {toShortUrl} from 'lib/strings/url-helpers' import {useTheme, TypographyVariant} from 'lib/ThemeContext' import {usePalette} from 'lib/hooks/usePalette' +import {InlineTag} from 'view/com/Tag' const WORD_WRAP = {wordWrap: 1} @@ -93,16 +94,7 @@ export function RichText({ />, ) } else if (tag && AppBskyRichtextFacet.validateTag(tag).success) { - els.push( - , - ) + els.push() } else { els.push(segment.text) } diff --git a/web/index.html b/web/index.html index 05eafeb53e..7634a4f5e8 100644 --- a/web/index.html +++ b/web/index.html @@ -116,6 +116,7 @@ } .ProseMirror p { margin: 0; + line-height: 1.5; } .ProseMirror p.is-editor-empty:first-child::before { color: #8d8e96; @@ -155,8 +156,8 @@ .ProseMirror .mention::after { content: ''; position: absolute; - top: -1px; - bottom: -3px; + top: 0; + bottom: -2px; left: -8px; right: -8px; z-index: -1;