Skip to content

Commit 3d33536

Browse files
dylanjeffersdylanjeffers
authored
[C-5270 C-5269 C-5268 C-5629] Comment layout improvements (#11360)
1 parent 73d3ad1 commit 3d33536

File tree

13 files changed

+177
-172
lines changed

13 files changed

+177
-172
lines changed

‎packages/common/src/messages/comments.ts

+4-3
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,11 @@ export const commentsMessages = {
55
title: 'Comments',
66
postComment: 'Post Comment',
77
addComment: 'Add a comment',
8-
noComments: 'Nothing here yet. Be the first to comment!',
9-
noCommentsOwner:
8+
noComments: 'Nothing here yet',
9+
noCommentsPreview: 'Nothing here yet. Be the first to comment!',
10+
noCommentsPreviewOwner:
1011
'Get the conversation started! Leave a comment to encourage others to join in.',
11-
noCommentsDescription: 'Be the first to comment on this track',
12+
noCommentsDescription: 'Be the first to comment on this track!',
1213
viewAll: 'View All',
1314
showMoreReplies: 'Show More Replies',
1415
reply: 'Reply',

‎packages/harmony/src/components/button/IconButton/IconButton.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
4040
background: 'transparent',
4141
border: 'none',
4242
borderRadius: '50%',
43-
padding: spacing.xs,
43+
padding: ripple ? spacing.xs : 0,
4444
overflow: 'unset',
4545
svg: {
4646
transition: `

‎packages/harmony/src/components/icon-text/IconText.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@ import { IconTextProps } from './types'
77

88
export const IconText = ({
99
children,
10-
color = 'default',
10+
color = 'subdued',
1111
icons = []
1212
}: IconTextProps) => {
1313
const separator = (
14-
<Text variant='body' color='default' css={{ fontSize: 8, lineHeight: 20 }}>
14+
<Text variant='body' color={color} css={{ fontSize: 8, lineHeight: 20 }}>
1515
•
1616
</Text>
1717
)

‎packages/harmony/src/components/send-icon/SendIcon.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export const SendIcon = ({ disabled = false, onClick }: SendIconProps) => {
1515
size='2xl'
1616
onClick={onClick}
1717
css={{
18-
cursor: 'pointer',
18+
padding: 0,
1919
pointerEvents: disabled ? 'none' : 'all',
2020
opacity: disabled ? 0.5 : 1,
2121
path: {

‎packages/mobile/src/components/comments/CommentBlock.tsx

+55-62
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import type { GestureResponderEvent } from 'react-native'
1616
import { TouchableOpacity } from 'react-native'
1717
import Animated, { FadeIn } from 'react-native-reanimated'
1818

19-
import { Box, Flex, Text } from '@audius/harmony-native'
19+
import { Flex, Text } from '@audius/harmony-native'
2020
import { make, track as trackEvent } from 'app/services/analytics'
2121

2222
import { ProfilePicture } from '../core/ProfilePicture'
@@ -97,76 +97,69 @@ export const CommentBlockInternal = (
9797
{...profilePicLinkProps}
9898
onPress={handlePressProfilePic}
9999
>
100-
{isLoadingUser ? (
101-
<Skeleton
102-
width={32}
103-
height={32}
104-
style={{ borderRadius: 100, flexShrink: 0 }}
105-
/>
106-
) : (
107-
<ProfilePicture
108-
style={{ width: 32, height: 32, flexShrink: 0 }}
109-
userId={userId}
110-
/>
111-
)}
100+
<ProfilePicture
101+
style={{ width: 32, height: 32, flexShrink: 0 }}
102+
userId={userId}
103+
borderWidth='thin'
104+
/>
112105
</TouchableOpacity>
113106
<Flex
114-
gap='xs'
107+
gap='s'
115108
w='100%'
116109
alignItems='flex-start'
117110
style={{ flexShrink: 1 }}
118111
>
119-
<Box style={{ position: 'absolute', top: 0, right: 0 }}>
120-
{userId !== undefined ? (
121-
<CommentBadge
122-
isArtist={isCommentByArtist}
123-
commentUserId={userId}
124-
/>
125-
) : null}
126-
</Box>
127-
{isPinned || isArtistReacted ? (
128-
<Flex direction='row' justifyContent='space-between' w='100%'>
129-
<ArtistPick isLiked={isArtistReacted} isPinned={isPinned} />
130-
</Flex>
131-
) : null}
132-
{!isTombstone ? (
133-
<Flex direction='row' gap='s' alignItems='center' w='65%'>
134-
{isLoadingUser ? <Skeleton width={80} height={18} /> : null}
135-
{userId !== undefined && !isLoadingUser ? (
136-
<UserLink
137-
userId={userId}
138-
strength='strong'
139-
onPress={closeDrawer}
140-
lineHeight='single'
141-
textLinkStyle={{ lineHeight: 20 }}
142-
/>
112+
<Flex gap='2xs'>
113+
<Flex row justifyContent='space-between' w='100%'>
114+
{isPinned || isArtistReacted ? (
115+
<ArtistPick isLiked={isArtistReacted} isPinned={isPinned} />
143116
) : null}
144-
<Flex direction='row' gap='xs' alignItems='center' h='100%'>
145-
<Timestamp time={dayjs.utc(createdAt).toDate()} />
146-
{trackTimestampS !== undefined ? (
147-
<>
148-
<Text color='subdued' size='s'>
149-
•
150-
</Text>
151-
152-
<TimestampLink
153-
size='s'
154-
timestampSeconds={trackTimestampS}
155-
onPress={handlePressTimestamp}
117+
{!isTombstone ? (
118+
<Flex direction='row' gap='s' alignItems='center'>
119+
{isLoadingUser ? <Skeleton width={80} height={18} /> : null}
120+
{userId !== undefined && !isLoadingUser ? (
121+
<UserLink
122+
userId={userId}
123+
strength='strong'
124+
onPress={closeDrawer}
125+
lineHeight='single'
126+
textLinkStyle={{ lineHeight: 20 }}
156127
/>
157-
</>
158-
) : null}
159-
</Flex>
128+
) : null}
129+
<Flex direction='row' gap='xs' alignItems='center' h='100%'>
130+
<Timestamp time={dayjs.utc(createdAt).toDate()} />
131+
{trackTimestampS !== undefined ? (
132+
<>
133+
<Text color='subdued' size='s'>
134+
•
135+
</Text>
136+
137+
<TimestampLink
138+
size='s'
139+
timestampSeconds={trackTimestampS}
140+
onPress={handlePressTimestamp}
141+
/>
142+
</>
143+
) : null}
144+
</Flex>
145+
</Flex>
146+
) : null}
147+
{userId !== undefined ? (
148+
<CommentBadge
149+
isArtist={isCommentByArtist}
150+
commentUserId={userId}
151+
/>
152+
) : null}
160153
</Flex>
161-
) : null}
162-
<CommentText
163-
isEdited={isEdited && !isTombstone}
164-
isPreview={isPreview}
165-
commentId={commentId}
166-
mentions={mentions}
167-
>
168-
{message}
169-
</CommentText>
154+
<CommentText
155+
isEdited={isEdited && !isTombstone}
156+
isPreview={isPreview}
157+
commentId={commentId}
158+
mentions={mentions}
159+
>
160+
{message}
161+
</CommentText>
162+
</Flex>
170163
{!isPreview ? (
171164
<CommentActionBar
172165
comment={comment}

‎packages/mobile/src/components/comments/CommentPreview.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,9 @@ const CommentPreviewContent = (props: CommentPreviewContentProps) => {
115115
return (
116116
<Flex gap='m'>
117117
<Text variant='body'>
118-
{isEntityOwner ? messages.noCommentsOwner : messages.noComments}
118+
{isEntityOwner
119+
? messages.noCommentsPreviewOwner
120+
: messages.noCommentsPreview}
119121
</Text>
120122
<TouchableWithoutFeedback onPress={handleFormPress}>
121123
<View>

‎packages/mobile/src/harmony-native/components/IconText/IconText.tsx

+2-6
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,11 @@ import type { IconTextProps } from './types'
66

77
export const IconText = ({
88
children,
9-
color = 'default',
9+
color = 'subdued',
1010
icons = []
1111
}: IconTextProps) => {
1212
const separator = (
13-
<Text
14-
variant='body'
15-
color='default'
16-
style={{ fontSize: 8, lineHeight: 20 }}
17-
>
13+
<Text variant='body' color={color} style={{ fontSize: 8, lineHeight: 20 }}>
1814
•
1915
</Text>
2016
)

‎packages/web/src/components/comments/CommentActionBar.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -316,7 +316,7 @@ export const CommentActionBar = ({
316316

317317
return (
318318
<Flex gap='l' alignItems='center'>
319-
<Flex alignItems='center'>
319+
<Flex alignItems='center' gap='xs'>
320320
{/* TODO: we should use FavoriteButton here */}
321321
<IconButton
322322
icon={IconHeart}

0 commit comments

Comments
 (0)