pushing things to the side

web/components/answers/answers-panel.tsx

@@ -25,6 +25,9 @@ import { useAdmin } from 'web/hooks/use-admin'
 import { needsAdminToResolve } from 'web/pages/[username]/[contractSlug]'
 import { CATEGORY_COLORS } from '../charts/contract/choice'
 import { useChartAnswers } from '../charts/contract/choice'
+import { ChatAlt2Icon, ChatAltIcon } from '@heroicons/react/solid'
+import { ChatIcon } from '@heroicons/react/outline'
+import { ReplyTo } from '../feed/feed-comments'
 
 export function AnswersPanel(props: {
   contract: FreeResponseContract | MultipleChoiceContract
@@ -236,6 +239,16 @@ function OpenAnswer(props: {
                 BUY
               </Button>
             )}
+            {
+              <button
+                className="p-1"
+                //       onClick={() =>
+                //  //TODO: make replies
+                //       }
+              >
+                <ChatIcon className="text-greyscale-4 h-5 w-5" />
+              </button>
+            }
           </Row>
         </Row>
         <hr

web/components/contract/contract-tabs.tsx

@@ -181,7 +181,7 @@ const CommentsTabContent = memo(function CommentsTabContent(props: {
                   </Row>
                   <Row>
                     <div className="ml-1">
-                      <Curve size={28} strokeWidth={1} color="#B1B1C7" />
+                      <Curve size={28} strokeWidth={1} color="#D8D8EB" />
                     </div>
                     <div className="w-full pt-1">
                       <FeedCommentThread

web/components/feed/feed-comments.tsx

@@ -185,7 +185,7 @@ export function FeedComment(props: {
       ref={commentRef}
       id={comment.id}
       className={clsx(
-        'hover:bg-greyscale-1 ml-8 gap-2 transition-colors',
+        'hover:bg-greyscale-1 ml-10 gap-2 transition-colors',
         highlighted ? `-m-1.5 rounded bg-indigo-500/[0.2] p-1.5` : ''
       )}
       onMouseOver={() => setShowActions(true)}
@@ -194,7 +194,7 @@ export function FeedComment(props: {
       <Col className="-ml-3">
         <Avatar size="xs" username={userUsername} avatarUrl={userAvatarUrl} />
         <span
-          className="bg-greyscale-4 mx-auto h-full w-[1.5px]"
+          className="bg-greyscale-3 mx-auto h-full w-[1.5px]"
           aria-hidden="true"
         />
       </Col>