From 266023facffc497677421f7b797673196233d776 Mon Sep 17 00:00:00 2001
From: ingawei <ingawei@gmail.com>
Date: Thu, 13 Oct 2022 22:02:46 -0700
Subject: [PATCH] no more indent on answer response

---
 web/components/comment-input.tsx              | 27 ++++++-----
 web/components/contract/contract-tabs.tsx     |  2 +-
 .../feed/feed-answer-comment-group.tsx        | 48 +++++++++----------
 web/public/custom-components/curve.tsx        |  1 +
 4 files changed, 40 insertions(+), 38 deletions(-)

diff --git a/web/components/comment-input.tsx b/web/components/comment-input.tsx
index d90e1343..634fb7f0 100644
--- a/web/components/comment-input.tsx
+++ b/web/components/comment-input.tsx
@@ -13,6 +13,7 @@ import { Avatar } from './avatar'
 import { TextEditor, useTextEditor } from './editor'
 import { CommentsAnswer } from './feed/feed-answer-comment-group'
 import { ContractCommentInput } from './feed/feed-comments'
+import { Col } from './layout/col'
 import { Row } from './layout/row'
 import { LoadingIndicator } from './loading-indicator'
 
@@ -93,17 +94,19 @@ export function AnswerCommentInput(props: {
   const color = getAnswerColor(answerResponse, answersArray)
   return (
     <>
-      <div className="opacity-60">
-        <CommentsAnswer
-          answer={answerResponse}
-          contract={contract}
-          color={color}
-        />
-      </div>
-      <Row>
-        <div className="ml-1">
-          <Curve size={28} strokeWidth={1} color="#D8D8EB" />
-        </div>
+      <Col>
+        <Row className="relative">
+          <div className="absolute -bottom-1 left-1.5">
+            <Curve size={32} strokeWidth={1} color="#D8D8EB" />
+          </div>
+          <div className="ml-[38px]">
+            <CommentsAnswer
+              answer={answerResponse}
+              contract={contract}
+              color={color}
+            />
+          </div>
+        </Row>
         <div className="relative w-full pt-1">
           <ContractCommentInput
             contract={contract}
@@ -116,7 +119,7 @@ export function AnswerCommentInput(props: {
             <XCircleIcon className="text-greyscale-5 hover:text-greyscale-6 absolute -top-1 -right-2 h-5 w-5" />
           </button>
         </div>
-      </Row>
+      </Col>
     </>
   )
 }
diff --git a/web/components/contract/contract-tabs.tsx b/web/components/contract/contract-tabs.tsx
index 0965ea00..68fbb257 100644
--- a/web/components/contract/contract-tabs.tsx
+++ b/web/components/contract/contract-tabs.tsx
@@ -156,7 +156,7 @@ const CommentsTabContent = memo(function CommentsTabContent(props: {
           tips={tips}
         />
       )}
-      {contract.outcomeType != 'FREE_RESPONSE' &&
+      {contract.outcomeType !== 'FREE_RESPONSE' &&
         topLevelComments.map((parent) => (
           <FeedCommentThread
             key={parent.id}
diff --git a/web/components/feed/feed-answer-comment-group.tsx b/web/components/feed/feed-answer-comment-group.tsx
index c58e2e27..7ba974e3 100644
--- a/web/components/feed/feed-answer-comment-group.tsx
+++ b/web/components/feed/feed-answer-comment-group.tsx
@@ -53,10 +53,10 @@ export function CommentsAnswer(props: {
           background: color ? color : '#B1B1C7',
         }}
       />
-      <Col className="w-fit gap-1 bg-gray-100 py-2 pl-2 pr-4">
+      <Col className="w-fit bg-gray-100 py-1 pl-2 pr-2">
         <Row className="gap-2">
-          <Avatar username={username} avatarUrl={avatarUrl} size="xxs" />
-          <div className="text-greyscale-6 text-xs">
+          {/* <Avatar username={username} avatarUrl={avatarUrl} size="xxs" /> */}
+          <div className="text-greyscale-4 text-xs">
             <UserLink username={username} name={name} /> answered
             <CopyLinkDateTimeComponent
               prefix={contract.creatorUsername}
@@ -88,9 +88,7 @@ export function FreeResponseComments(props: {
     commentsByParent,
     tips,
   } = props
-  const answersArray = useChartAnswers(contract).map(
-    (answer, _index) => answer.text
-  )
+  const answersArray = useChartAnswers(contract).map((answer) => answer.text)
   return (
     <>
       {answerResponse && (
@@ -126,30 +124,30 @@ export function FreeResponseComments(props: {
         const color = getAnswerColor(answer, answersArray)
         return (
           <>
-            <Row className="gap-2">
-              <CommentsAnswer
-                answer={answer}
-                contract={contract}
-                color={color}
-              />
-            </Row>
-            <Row>
-              <div className="ml-1">
-                <Curve size={28} strokeWidth={1} color="#D8D8EB" />
+            <Row className="relative">
+              <div className="absolute -bottom-1 left-1.5">
+                <Curve size={32} strokeWidth={1} color="#D8D8EB" />
               </div>
-              <div className="w-full pt-1">
-                <FeedCommentThread
-                  key={parent.id}
+              <div className="ml-[38px]">
+                <CommentsAnswer
+                  answer={answer}
                   contract={contract}
-                  parentComment={parent}
-                  threadComments={sortBy(
-                    commentsByParent[parent.id] ?? [],
-                    (c) => c.createdTime
-                  )}
-                  tips={tips}
+                  color={color}
                 />
               </div>
             </Row>
+            <div className="w-full pt-1">
+              <FeedCommentThread
+                key={parent.id}
+                contract={contract}
+                parentComment={parent}
+                threadComments={sortBy(
+                  commentsByParent[parent.id] ?? [],
+                  (c) => c.createdTime
+                )}
+                tips={tips}
+              />
+            </div>
           </>
         )
       })}
diff --git a/web/public/custom-components/curve.tsx b/web/public/custom-components/curve.tsx
index 5a7b3437..3a8b0067 100644
--- a/web/public/custom-components/curve.tsx
+++ b/web/public/custom-components/curve.tsx
@@ -12,6 +12,7 @@ export default function Curve({
       fill="none"
       stroke={color}
       strokeWidth={strokeWidth}
+      transform="rotate(90)"
     >
       <path d="M5.02,0V5.24c0,4.3,3.49,7.79,7.79,7.79h5.2" />
     </svg>