changing comment looks
This commit is contained in:
ingawei
parent
8dd5b477d9
commit
1a41619bd5
|
|
@ -172,10 +172,10 @@ const CommentsTabContent = memo(function CommentsTabContent(props: {
|
|||
if (answerComments.length > 0) {
|
||||
return (
|
||||
<div key={answer.id} className="relative pb-4">
|
||||
<span
|
||||
{/* <span
|
||||
className="absolute top-5 left-5 -ml-px h-[calc(100%-2rem)] w-0.5 bg-gray-200"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
/> */}
|
||||
<FeedAnswerCommentGroup
|
||||
contract={contract}
|
||||
answer={answer}
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ export function CopyLinkDateTimeComponent(props: {
|
|||
<a
|
||||
onClick={copyLinkToComment}
|
||||
className={
|
||||
'mx-1 whitespace-nowrap rounded-sm px-1 text-gray-400 hover:bg-gray-100'
|
||||
'text-greyscale-4 hover:bg-greyscale-1.5 mx-1 whitespace-nowrap rounded-sm px-1 text-xs transition-colors'
|
||||
}
|
||||
>
|
||||
{fromNow(createdTime)}
|
||||
|
|
|
|||
|
|
@ -45,15 +45,23 @@ export function FeedAnswerCommentGroup(props: {
|
|||
<Col className="relative flex-1 items-stretch gap-3">
|
||||
<Row
|
||||
className={clsx(
|
||||
'gap-3 space-x-3 pt-4 transition-all duration-1000',
|
||||
'gap- space-x-3 pt-4 transition-all duration-1000',
|
||||
highlighted ? `-m-2 my-3 rounded bg-indigo-500/[0.2] p-2` : ''
|
||||
)}
|
||||
ref={answerRef}
|
||||
id={answerElementId}
|
||||
>
|
||||
<Avatar username={username} avatarUrl={avatarUrl} />
|
||||
<Col className="min-w-0 flex-1 lg:gap-1">
|
||||
<div className="text-sm text-gray-500">
|
||||
<Col>
|
||||
<Avatar username={username} avatarUrl={avatarUrl} size="xs" />
|
||||
{seeReplies && (
|
||||
<span
|
||||
className="mx-auto h-full w-0.5 bg-gray-200"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
)}
|
||||
</Col>
|
||||
<Col className="min-w-0 flex-1">
|
||||
<div className="text-greyscale-6 text-xs">
|
||||
<UserLink username={username} name={name} /> answered
|
||||
<CopyLinkDateTimeComponent
|
||||
prefix={contract.creatorUsername}
|
||||
|
|
@ -63,7 +71,7 @@ export function FeedAnswerCommentGroup(props: {
|
|||
/>
|
||||
</div>
|
||||
<Row className="align-items justify-between gap-2 sm:flex-row">
|
||||
<span className="whitespace-pre-line text-lg">
|
||||
<span className="text-md whitespace-pre-line">
|
||||
<Linkify text={text} />
|
||||
</span>
|
||||
<div>
|
||||
|
|
@ -103,7 +111,7 @@ export function FeedAnswerCommentGroup(props: {
|
|||
{replyTo && (
|
||||
<div className="relative ml-7">
|
||||
<span
|
||||
className="absolute -left-1 -ml-[1px] mt-[1.25rem] h-2 w-0.5 rotate-90 bg-gray-200"
|
||||
className="bg-greyscale-2 absolute -left-1 -ml-[1px] mt-[1.25rem] h-2 w-0.5 rotate-90"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<ContractCommentInput
|
||||
|
|
|
|||
|
|
@ -112,7 +112,7 @@ export function FeedComment(props: {
|
|||
ref={commentRef}
|
||||
id={comment.id}
|
||||
className={clsx(
|
||||
'relative',
|
||||
'relative gap-1',
|
||||
indent ? 'ml-6' : '',
|
||||
highlighted ? `-m-1.5 rounded bg-indigo-500/[0.2] p-1.5` : ''
|
||||
)}
|
||||
|
|
@ -120,45 +120,43 @@ export function FeedComment(props: {
|
|||
{/*draw a gray line from the comment to the left:*/}
|
||||
{indent ? (
|
||||
<span
|
||||
className="absolute -left-1 -ml-[1px] mt-[0.8rem] h-2 w-0.5 rotate-90 bg-gray-200"
|
||||
className="bg-greyscale-2 absolute -left-1 -ml-[1px] mt-[0.8rem] h-2 w-0.5 rotate-90"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
) : null}
|
||||
<Avatar size="sm" username={userUsername} avatarUrl={userAvatarUrl} />
|
||||
<div className="ml-1.5 min-w-0 flex-1 pl-0.5 sm:ml-3">
|
||||
<div className="mt-0.5 text-sm text-gray-500">
|
||||
<UserLink
|
||||
className="text-gray-500"
|
||||
username={userUsername}
|
||||
name={userName}
|
||||
/>{' '}
|
||||
{comment.betId == null &&
|
||||
commenterPositionProb != null &&
|
||||
commenterPositionOutcome != null &&
|
||||
commenterPositionShares != null &&
|
||||
commenterPositionShares > 0 &&
|
||||
contract.outcomeType !== 'NUMERIC' && (
|
||||
<Avatar size="xs" username={userUsername} avatarUrl={userAvatarUrl} />
|
||||
<div>
|
||||
<div className="text-greyscale-6 mt-0.5 text-xs">
|
||||
<UserLink username={userUsername} name={userName} />{' '}
|
||||
<span className="text-greyscale-4">
|
||||
{comment.betId == null &&
|
||||
commenterPositionProb != null &&
|
||||
commenterPositionOutcome != null &&
|
||||
commenterPositionShares != null &&
|
||||
commenterPositionShares > 0 &&
|
||||
contract.outcomeType !== 'NUMERIC' && (
|
||||
<>
|
||||
{'is '}
|
||||
<CommentStatus
|
||||
prob={commenterPositionProb}
|
||||
outcome={commenterPositionOutcome}
|
||||
contract={contract}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
{bought} {money}
|
||||
{contract.outcomeType !== 'FREE_RESPONSE' && betOutcome && (
|
||||
<>
|
||||
{'is '}
|
||||
<CommentStatus
|
||||
prob={commenterPositionProb}
|
||||
outcome={commenterPositionOutcome}
|
||||
{' '}
|
||||
of{' '}
|
||||
<OutcomeLabel
|
||||
outcome={betOutcome ? betOutcome : ''}
|
||||
contract={contract}
|
||||
truncate="short"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
{bought} {money}
|
||||
{contract.outcomeType !== 'FREE_RESPONSE' && betOutcome && (
|
||||
<>
|
||||
{' '}
|
||||
of{' '}
|
||||
<OutcomeLabel
|
||||
outcome={betOutcome ? betOutcome : ''}
|
||||
contract={contract}
|
||||
truncate="short"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
<CopyLinkDateTimeComponent
|
||||
prefix={contract.creatorUsername}
|
||||
slug={contract.slug}
|
||||
|
|
@ -172,7 +170,7 @@ export function FeedComment(props: {
|
|||
)}
|
||||
</div>
|
||||
<Content
|
||||
className="mt-2 text-[15px] text-gray-700"
|
||||
className="text-greyscale-7"
|
||||
content={content || text}
|
||||
smallImage
|
||||
/>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user