changing answers to be colors

web/components/answers/answers-panel.tsx

@@ -27,6 +27,13 @@ import { CHOICE_ANSWER_COLORS } from '../charts/contract/choice'
 import { useChartAnswers } from '../charts/contract/choice'
 import { ChatIcon } from '@heroicons/react/outline'
 
+export function getAnswerColor(answer: Answer, answersArray: Answer[]) {
+  const colorIndex = answersArray.indexOf(answer)
+  return colorIndex != undefined && colorIndex < CHOICE_ANSWER_COLORS.length
+    ? CHOICE_ANSWER_COLORS[colorIndex] + '90' // semi-transparent
+    : '#B1B1C755'
+}
+
 export function AnswersPanel(props: {
   contract: FreeResponseContract | MultipleChoiceContract
   onAnswerCommentClick: (answer: Answer) => void
@@ -107,10 +114,9 @@ export function AnswersPanel(props: {
     ? 'checkbox'
     : undefined
 
-  const colorSortedAnswer = useChartAnswers(contract).map(
-    (value, _index) => value.text
-  )
+  const answersArray = useChartAnswers(contract)
 
+  console.log(answersArray)
   return (
     <Col className="gap-3">
       {(resolveOption || resolution) &&
@@ -139,8 +145,8 @@ export function AnswersPanel(props: {
               key={item.id}
               answer={item}
               contract={contract}
-              colorIndex={colorSortedAnswer.indexOf(item.text)}
               onAnswerCommentClick={onAnswerCommentClick}
+              color={getAnswerColor(item, answersArray)}
             />
           ))}
           {hasZeroBetAnswers && !showAllAnswers && (
@@ -185,18 +191,14 @@ export function AnswersPanel(props: {
 function OpenAnswer(props: {
   contract: FreeResponseContract | MultipleChoiceContract
   answer: Answer
-  colorIndex: number | undefined
+  color: string
   onAnswerCommentClick: (answer: Answer) => void
 }) {
-  const { answer, contract, colorIndex, onAnswerCommentClick } = props
+  const { answer, contract, onAnswerCommentClick, color } = props
   const { username, avatarUrl, text } = answer
   const prob = getDpmOutcomeProbability(contract.totalShares, answer.id)
   const probPercent = formatPercent(prob)
   const [open, setOpen] = useState(false)
-  const color =
-    colorIndex != undefined && colorIndex < CHOICE_ANSWER_COLORS.length
-      ? CHOICE_ANSWER_COLORS[colorIndex] + '55' // semi-transparent
-      : '#B1B1C755'
   const colorWidth = 100 * Math.max(prob, 0.01)
 
   return (

web/components/comment-input.tsx

@@ -8,6 +8,7 @@ import { useEffect, useState } from 'react'
 import { useUser } from 'web/hooks/use-user'
 import { MAX_COMMENT_LENGTH } from 'web/lib/firebase/comments'
 import Curve from 'web/public/custom-components/curve'
+import { getAnswerColor } from './answers/answers-panel'
 import { Avatar } from './avatar'
 import { TextEditor, useTextEditor } from './editor'
 import { CommentsAnswer } from './feed/feed-answer-comment-group'
@@ -87,7 +88,6 @@ export function AnswerCommentInput(props: {
     id: answerResponse.id,
     username: answerResponse.username,
   }
-
   return (
     <>
       <CommentsAnswer answer={answerResponse} contract={contract} />

web/components/contract/contract-tabs.tsx

@@ -38,6 +38,8 @@ import TriangleDownFillIcon from 'web/lib/icons/triangle-down-fill-icon'
 import Curve from 'web/public/custom-components/curve'
 import { Answer } from 'common/answer'
 import { AnswerCommentInput } from '../comment-input'
+import { getAnswerColor } from '../answers/answers-panel'
+import { useChartAnswers } from '../charts/contract/choice'
 
 export function ContractTabs(props: {
   contract: Contract
@@ -161,6 +163,8 @@ const CommentsTabContent = memo(function CommentsTabContent(props: {
     </Row>
   )
   if (contract.outcomeType === 'FREE_RESPONSE') {
+    const answersArray = useChartAnswers(contract)
+
     return (
       <>
         <ContractCommentInput className="mb-5" contract={contract} />
@@ -194,10 +198,15 @@ const CommentsTabContent = memo(function CommentsTabContent(props: {
             console.error('Could not find answer that matches ID')
             return <></>
           }
+          const color = getAnswerColor(answer, answersArray)
           return (
             <>
               <Row className="gap-2">
-                <CommentsAnswer answer={answer} contract={contract} />
+                <CommentsAnswer
+                  answer={answer}
+                  contract={contract}
+                  color={color}
+                />
               </Row>
               <Row>
                 <div className="ml-1">

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

@@ -1,6 +1,6 @@
 import { Answer } from 'common/answer'
 import { Contract } from 'common/contract'
-import React, { useEffect, useRef } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { Col } from 'web/components/layout/col'
 import { Row } from 'web/components/layout/row'
 import { Avatar } from 'web/components/avatar'
@@ -8,35 +8,55 @@ import { CopyLinkDateTimeComponent } from 'web/components/feed/copy-link-date-ti
 import { useRouter } from 'next/router'
 import { UserLink } from 'web/components/user-link'
 
-export function CommentsAnswer(props: { answer: Answer; contract: Contract }) {
-  const { answer, contract } = props
+export function CommentsAnswer(props: {
+  answer: Answer
+  contract: Contract
+  color: string
+}) {
+  const { answer, contract, color } = props
   const { username, avatarUrl, name, text } = answer
   const answerElementId = `answer-${answer.id}`
-  const router = useRouter()
-  const highlighted = router.asPath.endsWith(`#${answerElementId}`)
+
+  const { isReady, asPath } = useRouter()
+  const [highlighted, setHighlighted] = useState(false)
   const answerRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
-    if (highlighted && answerRef.current != null) {
+    if (isReady && asPath.endsWith(`#${answerElementId}`)) {
+      setHighlighted(true)
+    }
+  }, [isReady, asPath, answerElementId])
+
+  useEffect(() => {
+    if (highlighted && answerRef.current) {
       answerRef.current.scrollIntoView(true)
     }
   }, [highlighted])
 
   return (
-    <Col className="bg-greyscale-2 w-fit gap-1 rounded-t-xl rounded-bl-xl py-2 px-4">
-      <Row className="gap-2">
-        <Avatar username={username} avatarUrl={avatarUrl} size="xxs" />
-        <div className="text-greyscale-6 text-xs">
-          <UserLink username={username} name={name} /> answered
-          <CopyLinkDateTimeComponent
-            prefix={contract.creatorUsername}
-            slug={contract.slug}
-            createdTime={answer.createdTime}
-            elementId={answerElementId}
-          />
-        </div>
-      </Row>
-      <div className="text-sm">{text}</div>
-    </Col>
+    <Row>
+      {/* TODO: known bug, doesn't grab color in time and it is gray */}
+      <div
+        className="w-2"
+        style={{
+          background: color ? color : '#B1B1C755',
+        }}
+      />
+      <Col className="w-fit gap-1 bg-gray-100 py-2 pl-2 pr-4">
+        <Row className="gap-2">
+          <Avatar username={username} avatarUrl={avatarUrl} size="xxs" />
+          <div className="text-greyscale-6 text-xs">
+            <UserLink username={username} name={name} /> answered
+            <CopyLinkDateTimeComponent
+              prefix={contract.creatorUsername}
+              slug={contract.slug}
+              createdTime={answer.createdTime}
+              elementId={answerElementId}
+            />
+          </div>
+        </Row>
+        <div className="text-sm">{text}</div>
+      </Col>
+    </Row>
   )
 }