changing comment looks

web/components/contract/contract-tabs.tsx

@@ -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}

web/components/feed/copy-link-date-time.tsx

@@ -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)}

web/components/feed/feed-answer-comment-group.tsx

@@ -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>
-        <Col className="min-w-0 flex-1 lg:gap-1">
+          <Avatar username={username} avatarUrl={avatarUrl} size="xs" />
-          <div className="text-sm text-gray-500">
+          {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

web/components/feed/feed-comments.tsx

@@ -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} />
+      <Avatar size="xs" username={userUsername} avatarUrl={userAvatarUrl} />
-      <div className="ml-1.5 min-w-0 flex-1 pl-0.5 sm:ml-3">
+      <div>
-        <div className="mt-0.5 text-sm text-gray-500">
+        <div className="text-greyscale-6 mt-0.5 text-xs">
-          <UserLink
+          <UserLink username={userUsername} name={userName} />{' '}
-            className="text-gray-500"
+          <span className="text-greyscale-4">
-            username={userUsername}
+            {comment.betId == null &&
-            name={userName}
+              commenterPositionProb != null &&
-          />{' '}
+              commenterPositionOutcome != null &&
-          {comment.betId == null &&
+              commenterPositionShares != null &&
-            commenterPositionProb != null &&
+              commenterPositionShares > 0 &&
-            commenterPositionOutcome != null &&
+              contract.outcomeType !== 'NUMERIC' && (
-            commenterPositionShares != null &&
+                <>
-            commenterPositionShares > 0 &&
+                  {'is '}
-            contract.outcomeType !== 'NUMERIC' && (
+                  <CommentStatus
+                    prob={commenterPositionProb}
+                    outcome={commenterPositionOutcome}
+                    contract={contract}
+                  />
+                </>
+              )}
+            {bought} {money}
+            {contract.outcomeType !== 'FREE_RESPONSE' && betOutcome && (
               <>
-                {'is '}
+                {' '}
-                <CommentStatus
+                of{' '}
-                  prob={commenterPositionProb}
+                <OutcomeLabel
-                  outcome={commenterPositionOutcome}
+                  outcome={betOutcome ? betOutcome : ''}
                   contract={contract}
+                  truncate="short"
                 />
               </>
             )}
-          {bought} {money}
+          </span>
-          {contract.outcomeType !== 'FREE_RESPONSE' && betOutcome && (
-            <>
-              {' '}
-              of{' '}
-              <OutcomeLabel
-                outcome={betOutcome ? betOutcome : ''}
-                contract={contract}
-                truncate="short"
-              />
-            </>
-          )}
           <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
         />