Merge branch 'main' into austin/dc-hackathon

common/payouts-fixed.ts

@@ -56,7 +56,8 @@ export const getLiquidityPoolPayouts = (
   liquidities: LiquidityProvision[]
 ) => {
   const { pool, subsidyPool } = contract
-  const finalPool = pool[outcome] + subsidyPool
+  const finalPool = pool[outcome] + (subsidyPool ?? 0)
+  if (finalPool < 1e-3) return []
 
   const weights = getCpmmLiquidityPoolWeights(liquidities)
 
@@ -95,7 +96,8 @@ export const getLiquidityPoolProbPayouts = (
   liquidities: LiquidityProvision[]
 ) => {
   const { pool, subsidyPool } = contract
-  const finalPool = p * pool.YES + (1 - p) * pool.NO + subsidyPool
+  const finalPool = p * pool.YES + (1 - p) * pool.NO + (subsidyPool ?? 0)
+  if (finalPool < 1e-3) return []
 
   const weights = getCpmmLiquidityPoolWeights(liquidities)
 

common/util/parse.ts

@@ -24,7 +24,7 @@ import { Mention } from '@tiptap/extension-mention'
 import Iframe from './tiptap-iframe'
 import TiptapTweet from './tiptap-tweet-type'
 import { find } from 'linkifyjs'
-import { cloneDeep, uniq } from 'lodash'
+import { uniq } from 'lodash'
 import { TiptapSpoiler } from './tiptap-spoiler'
 
 /** get first url in text. like "notion.so " -> "http://notion.so"; "notion" -> null */
@@ -52,8 +52,8 @@ export function parseMentions(data: JSONContent): string[] {
   return uniq(mentions)
 }
 
-// can't just do [StarterKit, Image...] because it doesn't work with cjs imports
 const stringParseExts = [
+  // StarterKit extensions
   Blockquote,
   Bold,
   BulletList,
@@ -70,40 +70,22 @@ const stringParseExts = [
   Paragraph,
   Strike,
   Text,
-
+  // other extensions
-  Image,
   Link,
+  Image.extend({ renderText: () => '[image]' }),
   Mention, // user @mention
   Mention.extend({ name: 'contract-mention' }), // market %mention
-  Iframe,
+  Iframe.extend({
-  TiptapTweet,
+    renderText: ({ node }) =>
-  TiptapSpoiler,
+      '[embed]' + node.attrs.src ? `(${node.attrs.src})` : '',
+  }),
+  TiptapTweet.extend({ renderText: () => '[tweet]' }),
+  TiptapSpoiler.extend({ renderHTML: () => ['span', '[spoiler]', 0] }),
 ]
 
 export function richTextToString(text?: JSONContent) {
   if (!text) return ''
-  // remove spoiler tags.
+  return generateText(text, stringParseExts)
-  const newText = cloneDeep(text)
-  dfs(newText, (current) => {
-    if (current.marks?.some((m) => m.type === TiptapSpoiler.name)) {
-      current.text = '[spoiler]'
-    } else if (current.type === 'image') {
-      current.text = '[Image]'
-      // This is a hack, I've no idea how to change a tiptap extenstion's schema
-      current.type = 'text'
-    } else if (current.type === 'iframe') {
-      const src = current.attrs?.['src'] ? current.attrs['src'] : ''
-      current.text = '[Iframe]' + (src ? ` url:${src}` : '')
-      // This is a hack, I've no idea how to change a tiptap extenstion's schema
-      current.type = 'text'
-    }
-  })
-  return generateText(newText, stringParseExts)
-}
-
-const dfs = (data: JSONContent, f: (current: JSONContent) => any) => {
-  data.content?.forEach((d) => dfs(d, f))
-  f(data)
 }
 
 export function htmlToRichText(html: string) {

web/components/amount-input.tsx

@@ -47,9 +47,8 @@ export function AmountInput(props: {
           </span>
           <Input
             className={clsx(
-              'pl-9',
+              'w-24 pl-9 !text-base md:w-auto',
               error && 'input-error',
-              'w-24 md:w-auto',
               inputClassName
             )}
             ref={inputRef}

web/components/answers/answer-bet-panel.tsx

@@ -126,7 +126,10 @@ export function AnswerBetPanel(props: {
         </div>
 
         {!isModal && (
-          <button className="btn-ghost btn-circle" onClick={closePanel}>
+          <button
+            className="hover:bg-greyscale-2 rounded-full"
+            onClick={closePanel}
+          >
             <XIcon
               className="mx-auto h-8 w-8 text-gray-500"
               aria-hidden="true"

web/components/answers/answer-resolve-panel.tsx

@@ -10,6 +10,7 @@ import { ChooseCancelSelector } from '../yes-no-selector'
 import { ResolveConfirmationButton } from '../confirmation-button'
 import { removeUndefinedProps } from 'common/util/object'
 import { BETTOR, PAST_BETS } from 'common/user'
+import { Button } from '../button'
 
 export function AnswerResolvePanel(props: {
   isAdmin: boolean
@@ -109,14 +110,14 @@ export function AnswerResolvePanel(props: {
           )}
         >
           {resolveOption && (
-            <button
+            <Button
-              className="btn btn-ghost"
+              color="gray-white"
               onClick={() => {
                 setResolveOption(undefined)
               }}
             >
               Clear
-            </button>
+            </Button>
           )}
 
           <ResolveConfirmationButton

web/components/answers/answers-panel.tsx

@@ -25,12 +25,14 @@ import { useAdmin } from 'web/hooks/use-admin'
 import { needsAdminToResolve } from 'web/pages/[username]/[contractSlug]'
 import { CHOICE_ANSWER_COLORS } from '../charts/contract/choice'
 import { useChartAnswers } from '../charts/contract/choice'
+import { ChatIcon } from '@heroicons/react/outline'
 
 export function AnswersPanel(props: {
   contract: FreeResponseContract | MultipleChoiceContract
+  onAnswerCommentClick: (answer: Answer) => void
 }) {
   const isAdmin = useAdmin()
-  const { contract } = props
+  const { contract, onAnswerCommentClick } = props
   const { creatorId, resolution, resolutions, totalBets, outcomeType } =
     contract
   const [showAllAnswers, setShowAllAnswers] = useState(false)
@@ -138,6 +140,7 @@ export function AnswersPanel(props: {
               answer={item}
               contract={contract}
               colorIndex={colorSortedAnswer.indexOf(item.text)}
+              onAnswerCommentClick={onAnswerCommentClick}
             />
           ))}
           {hasZeroBetAnswers && !showAllAnswers && (
@@ -183,8 +186,9 @@ function OpenAnswer(props: {
   contract: FreeResponseContract | MultipleChoiceContract
   answer: Answer
   colorIndex: number | undefined
+  onAnswerCommentClick: (answer: Answer) => void
 }) {
-  const { answer, contract, colorIndex } = props
+  const { answer, contract, colorIndex, onAnswerCommentClick } = props
   const { username, avatarUrl, text } = answer
   const prob = getDpmOutcomeProbability(contract.totalShares, answer.id)
   const probPercent = formatPercent(prob)
@@ -240,6 +244,14 @@ function OpenAnswer(props: {
                 BUY
               </Button>
             )}
+            {
+              <button
+                className="p-1"
+                onClick={() => onAnswerCommentClick(answer)}
+              >
+                <ChatIcon className="text-greyscale-4 hover:text-greyscale-6 h-5 w-5 transition-colors" />
+              </button>
+            }
           </Row>
         </Row>
       </Col>

web/components/answers/create-answer-panel.tsx

@@ -197,17 +197,15 @@ export function CreateAnswerPanel(props: { contract: FreeResponseContract }) {
             </>
           )}
           {user ? (
-            <button
+            <Button
-              className={clsx(
+              color="green"
-                'btn mt-2',
+              size="lg"
-                canSubmit ? 'btn-outline' : 'btn-disabled',
+              loading={isSubmitting}
-                isSubmitting && 'loading'
-              )}
               disabled={!canSubmit}
               onClick={withTracking(submitAnswer, 'submit answer')}
             >
               Submit
-            </button>
+            </Button>
           ) : (
             text && (
               <Button

web/components/bet-panel.tsx

@@ -271,7 +271,7 @@ export function BuyPanel(props: {
     })
   }
 
-  const betDisabled = isSubmitting || !betAmount || error
+  const betDisabled = isSubmitting || !betAmount || !!error
 
   const { newPool, newP, newBet } = getBinaryCpmmBetInfo(
     outcome ?? 'YES',
@@ -493,7 +493,7 @@ function LimitOrderPanel(props: {
     !betAmount ||
     rangeError ||
     outOfRangeError ||
-    error ||
+    !!error ||
     (!hasYesLimitBet && !hasNoLimitBet)
 
   const yesLimitProb =
@@ -785,11 +785,11 @@ function LimitOrderPanel(props: {
       {user && (
         <Button
           size="xl"
-          disabled={betDisabled ? true : false}
+          disabled={betDisabled}
           color={'indigo'}
           loading={isSubmitting}
           className="flex-1"
-          onClick={betDisabled ? undefined : submitBet}
+          onClick={submitBet}
         >
           {isSubmitting
             ? 'Submitting...'

web/components/button.tsx

@@ -13,7 +13,6 @@ export type ColorType =
   | 'gray-outline'
   | 'gradient'
   | 'gray-white'
-  | 'highlight-blue'
 
 const sizeClasses = {
   '2xs': 'px-2 py-1 text-xs',
@@ -27,7 +26,7 @@ const sizeClasses = {
 
 export function buttonClass(size: SizeType, color: ColorType | 'override') {
   return clsx(
-    'font-md inline-flex items-center justify-center rounded-md border border-transparent shadow-sm transition-colors disabled:cursor-not-allowed',
+    'font-md inline-flex items-center justify-center rounded-md ring-inset shadow-sm transition-colors disabled:cursor-not-allowed',
     sizeClasses[size],
     color === 'green' &&
       'disabled:bg-greyscale-2 bg-teal-500 text-white hover:bg-teal-600',
@@ -42,13 +41,11 @@ export function buttonClass(size: SizeType, color: ColorType | 'override') {
     color === 'gray' &&
       'bg-greyscale-1 text-greyscale-6 hover:bg-greyscale-2 disabled:opacity-50',
     color === 'gray-outline' &&
-      'border-greyscale-4 text-greyscale-4 hover:bg-greyscale-4 border-2 hover:text-white disabled:opacity-50',
+      'ring-2 ring-greyscale-4 text-greyscale-4 hover:bg-greyscale-4 hover:text-white disabled:opacity-50',
     color === 'gradient' &&
-      'disabled:bg-greyscale-2 border-none bg-gradient-to-r from-indigo-500 to-blue-500 text-white hover:from-indigo-700 hover:to-blue-700',
+      'disabled:bg-greyscale-2 bg-gradient-to-r from-indigo-500 to-blue-500 text-white hover:from-indigo-700 hover:to-blue-700',
     color === 'gray-white' &&
-      'text-greyscale-6 hover:bg-greyscale-2 border-none shadow-none disabled:opacity-50',
+      'text-greyscale-6 hover:bg-greyscale-2 shadow-none disabled:opacity-50'
-    color === 'highlight-blue' &&
-      'text-highlight-blue disabled:bg-greyscale-2 border-none shadow-none'
   )
 }
 

web/components/comment-input.tsx

@@ -1,12 +1,17 @@
-import { PaperAirplaneIcon } from '@heroicons/react/solid'
+import { PaperAirplaneIcon, XCircleIcon } from '@heroicons/react/solid'
 import { Editor } from '@tiptap/react'
 import clsx from 'clsx'
+import { Answer } from 'common/answer'
+import { AnyContractType, Contract } from 'common/contract'
 import { User } from 'common/user'
 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 { Avatar } from './avatar'
 import { TextEditor, useTextEditor } from './editor'
+import { CommentsAnswer } from './feed/feed-answer-comment-group'
+import { ContractCommentInput } from './feed/feed-comments'
 import { Row } from './layout/row'
 import { LoadingIndicator } from './loading-indicator'
 
@@ -72,6 +77,40 @@ export function CommentInput(props: {
     </Row>
   )
 }
+export function AnswerCommentInput(props: {
+  contract: Contract<AnyContractType>
+  answerResponse: Answer
+  onCancelAnswerResponse?: () => void
+}) {
+  const { contract, answerResponse, onCancelAnswerResponse } = props
+  const replyTo = {
+    id: answerResponse.id,
+    username: answerResponse.username,
+  }
+
+  return (
+    <>
+      <CommentsAnswer answer={answerResponse} contract={contract} />
+      <Row>
+        <div className="ml-1">
+          <Curve size={28} strokeWidth={1} color="#D8D8EB" />
+        </div>
+        <div className="relative w-full pt-1">
+          <ContractCommentInput
+            contract={contract}
+            parentAnswerOutcome={answerResponse.number.toString()}
+            replyTo={replyTo}
+            onSubmitComment={onCancelAnswerResponse}
+          />
+          <button onClick={onCancelAnswerResponse}>
+            <div className="absolute -top-1 -right-2 h-4 w-4 rounded-full bg-white" />
+            <XCircleIcon className="text-greyscale-5 hover:text-greyscale-6 absolute -top-1 -right-2 h-5 w-5" />
+          </button>
+        </div>
+      </Row>
+    </>
+  )
+}
 
 export function CommentInputTextArea(props: {
   user: User | undefined | null
@@ -123,7 +162,7 @@ export function CommentInputTextArea(props: {
           attrs: { label: replyTo.username, id: replyTo.id },
         })
         .insertContent(' ')
-        .focus()
+        .focus(undefined, { scrollIntoView: false })
         .run()
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps

web/components/comments/reply-toggle.tsx

@@ -0,0 +1,29 @@
+import clsx from 'clsx'
+import TriangleDownFillIcon from 'web/lib/icons/triangle-down-fill-icon'
+import { Row } from '../layout/row'
+
+export function ReplyToggle(props: {
+  seeReplies: boolean
+  numComments: number
+  onClick: () => void
+}) {
+  const { seeReplies, numComments, onClick } = props
+  return (
+    <button
+      className={clsx(
+        'text-left text-sm text-indigo-600',
+        numComments === 0 ? 'hidden' : ''
+      )}
+      onClick={onClick}
+    >
+      <Row className="items-center gap-1">
+        <div>
+          {numComments} {numComments === 1 ? 'Reply' : 'Replies'}
+        </div>
+        <TriangleDownFillIcon
+          className={clsx('h-2 w-2', seeReplies ? 'rotate-180' : '')}
+        />
+      </Row>
+    </button>
+  )
+}

web/components/contract/comment-bounty-dialog.tsx

@@ -4,7 +4,6 @@ import { useState } from 'react'
 import { addCommentBounty } from 'web/lib/firebase/api'
 import { track } from 'web/lib/service/analytics'
 import { Row } from 'web/components/layout/row'
-import clsx from 'clsx'
 import { formatMoney } from 'common/util/format'
 import { COMMENT_BOUNTY_AMOUNT } from 'common/economy'
 import { Button } from 'web/components/button'
@@ -64,7 +63,7 @@ export function CommentBountyDialog(props: {
 
         <Row className={'items-center gap-2'}>
           <Button
-            className={clsx('ml-2', isLoading && 'btn-disabled')}
+            className="ml-2"
             onClick={submit}
             disabled={isLoading}
             color={'blue'}

web/components/contract/contract-card.tsx

@@ -1,11 +1,7 @@
 import clsx from 'clsx'
 import Link from 'next/link'
 import { Row } from '../layout/row'
-import {
+import { formatLargeNumber, formatPercent } from 'common/util/format'
-  formatLargeNumber,
-  formatMoney,
-  formatPercent,
-} from 'common/util/format'
 import { contractPath, getBinaryProbPercent } from 'web/lib/firebase/contracts'
 import { Col } from '../layout/col'
 import {
@@ -42,6 +38,7 @@ import { SiteLink } from '../site-link'
 import { ProbChange } from './prob-change-table'
 import { Card } from '../card'
 import { ProfitBadgeMana } from '../profit-badge'
+import { floatingEqual } from 'common/util/math'
 
 export function ContractCard(props: {
   contract: Contract
@@ -405,7 +402,7 @@ export function ContractCardProbChange(props: {
   const metrics = useUserContractMetrics(user?.id, contract.id)
   const dayMetrics = metrics && metrics.from && metrics.from.day
   const outcome =
-    metrics && metrics.hasShares && metrics.totalShares.YES ? 'YES' : 'NO'
+    metrics && floatingEqual(metrics.totalShares.NO ?? 0, 0) ? 'YES' : 'NO'
 
   return (
     <Card className={clsx(className, 'mb-4')}>
@@ -423,7 +420,7 @@ export function ContractCardProbChange(props: {
         </SiteLink>
         <ProbChange className="py-2 pr-4" contract={contract} />
       </Row>
-      {showPosition && metrics && (
+      {showPosition && metrics && metrics.hasShares && (
         <Row
           className={clsx(
             'items-center justify-between gap-4 pl-6 pr-4 pb-2 text-sm'
@@ -431,7 +428,7 @@ export function ContractCardProbChange(props: {
         >
           <Row className="gap-1 text-gray-700">
             <div className="text-gray-500">Position</div>
-            {formatMoney(metrics.payout)} {outcome}
+            {Math.floor(metrics.totalShares[outcome])} {outcome}
           </Row>
 
           {dayMetrics && (

web/components/contract/contract-tabs.tsx

@@ -1,9 +1,8 @@
 import { memo, useState } from 'react'
-import { getOutcomeProbability } from 'common/calculate'
 import { Pagination } from 'web/components/pagination'
 import { FeedBet } from '../feed/feed-bets'
 import { FeedLiquidity } from '../feed/feed-liquidity'
-import { FeedAnswerCommentGroup } from '../feed/feed-answer-comment-group'
+import { CommentsAnswer } from '../feed/feed-answer-comment-group'
 import { FeedCommentThread, ContractCommentInput } from '../feed/feed-comments'
 import { groupBy, sortBy, sum } from 'lodash'
 import { Bet } from 'common/bet'
@@ -25,7 +24,6 @@ import {
 import { buildArray } from 'common/util/array'
 import { ContractComment } from 'common/comment'
 
-import { Button } from 'web/components/button'
 import { MINUTE_MS } from 'common/util/time'
 import { useUser } from 'web/hooks/use-user'
 import { Tooltip } from 'web/components/tooltip'
@@ -36,14 +34,27 @@ import {
   usePersistentState,
 } from 'web/hooks/use-persistent-state'
 import { safeLocalStorage } from 'web/lib/util/local'
+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'
 
 export function ContractTabs(props: {
   contract: Contract
   bets: Bet[]
   userBets: Bet[]
   comments: ContractComment[]
+  answerResponse?: Answer | undefined
+  onCancelAnswerResponse?: () => void
 }) {
-  const { contract, bets, userBets, comments } = props
+  const {
+    contract,
+    bets,
+    userBets,
+    comments,
+    answerResponse,
+    onCancelAnswerResponse,
+  } = props
 
   const yourTrades = (
     <div>
@@ -56,7 +67,14 @@ export function ContractTabs(props: {
   const tabs = buildArray(
     {
       title: 'Comments',
-      content: <CommentsTabContent contract={contract} comments={comments} />,
+      content: (
+        <CommentsTabContent
+          contract={contract}
+          comments={comments}
+          answerResponse={answerResponse}
+          onCancelAnswerResponse={onCancelAnswerResponse}
+        />
+      ),
     },
     bets.length > 0 && {
       title: capitalize(PAST_BETS),
@@ -76,8 +94,10 @@ export function ContractTabs(props: {
 const CommentsTabContent = memo(function CommentsTabContent(props: {
   contract: Contract
   comments: ContractComment[]
+  answerResponse?: Answer
+  onCancelAnswerResponse?: () => void
 }) {
-  const { contract } = props
+  const { contract, answerResponse, onCancelAnswerResponse } = props
   const tips = useTipTxns({ contractId: contract.id })
   const comments = useComments(contract.id) ?? props.comments
   const [sort, setSort] = usePersistentState<'Newest' | 'Best'>('Newest', {
@@ -95,10 +115,7 @@ const CommentsTabContent = memo(function CommentsTabContent(props: {
 
   // replied to answers/comments are NOT newest, otherwise newest first
   const shouldBeNewestFirst = (c: ContractComment) =>
-    c.replyToCommentId == undefined &&
+    c.replyToCommentId == undefined
-    (contract.outcomeType === 'FREE_RESPONSE'
-      ? c.betId === undefined && c.answerOutcome == undefined
-      : true)
 
   // TODO: links to comments are broken because tips load after render and
   //  comments will reorganize themselves if there are tips/bounties awarded
@@ -123,73 +140,85 @@ const CommentsTabContent = memo(function CommentsTabContent(props: {
   const topLevelComments = commentsByParent['_'] ?? []
 
   const sortRow = comments.length > 0 && (
-    <Row className="mb-4 items-center">
+    <Row className="mb-4 items-center justify-end gap-4">
-      <Button
+      <BountiedContractSmallBadge contract={contract} showAmount />
-        size={'xs'}
+      <Row className="items-center gap-1">
-        color={'gray-white'}
+        <div className="text-greyscale-4 text-sm">Sort by:</div>
+        <button
+          className="text-greyscale-6 w-20 text-sm"
           onClick={() => setSort(sort === 'Newest' ? 'Best' : 'Newest')}
         >
           <Tooltip
-          text={
+            text={sort === 'Best' ? 'Highest tips + bounties first.' : ''}
-            sort === 'Best'
-              ? 'Highest tips + bounties first. Your new comments briefly appear to you first.'
-              : ''
-          }
           >
-          Sort by: {sort}
+            <Row className="items-center gap-1">
+              {sort}
+              <TriangleDownFillIcon className=" h-2 w-2" />
+            </Row>
           </Tooltip>
-      </Button>
+        </button>
-
+      </Row>
-      <BountiedContractSmallBadge contract={contract} showAmount />
     </Row>
   )
-
   if (contract.outcomeType === 'FREE_RESPONSE') {
-    const sortedAnswers = sortBy(
-      contract.answers,
-      (a) => -getOutcomeProbability(contract, a.id)
-    )
-    const commentsByOutcome = groupBy(
-      sortedComments,
-      (c) => c.answerOutcome ?? c.betOutcome ?? '_'
-    )
-    const generalTopLevelComments = topLevelComments.filter(
-      (c) => c.answerOutcome === undefined && c.betId === undefined
-    )
-
     return (
       <>
+        <ContractCommentInput className="mb-5" contract={contract} />
         {sortRow}
-        {sortedAnswers.map((answer) => (
+        {answerResponse && (
-          <div key={answer.id} className="relative pb-4">
+          <AnswerCommentInput
-            <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}
+            answerResponse={answerResponse}
-              answerComments={commentsByOutcome[answer.number.toString()] ?? []}
+            onCancelAnswerResponse={onCancelAnswerResponse}
+          />
+        )}
+        {topLevelComments.map((parent) => {
+          if (parent.answerOutcome === undefined) {
+            return (
+              <FeedCommentThread
+                key={parent.id}
+                contract={contract}
+                parentComment={parent}
+                threadComments={sortBy(
+                  commentsByParent[parent.id] ?? [],
+                  (c) => c.createdTime
+                )}
+                tips={tips}
+              />
+            )
+          }
+          const answer = contract.answers.find(
+            (answer) => answer.id === parent.answerOutcome
+          )
+          if (answer === undefined) {
+            console.error('Could not find answer that matches ID')
+            return <></>
+          }
+          return (
+            <>
+              <Row className="gap-2">
+                <CommentsAnswer answer={answer} contract={contract} />
+              </Row>
+              <Row>
+                <div className="ml-1">
+                  <Curve size={28} strokeWidth={1} color="#D8D8EB" />
+                </div>
+                <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>
-        ))}
+              </Row>
-        <Col className="mt-8 flex w-full">
+            </>
-          <div className="text-md mt-8 mb-2 text-left">General Comments</div>
+          )
-          <div className="mb-4 w-full border-b border-gray-200" />
+        })}
-          <ContractCommentInput className="mb-5" contract={contract} />
-          {sortRow}
-
-          {generalTopLevelComments.map((comment) => (
-            <FeedCommentThread
-              key={comment.id}
-              contract={contract}
-              parentComment={comment}
-              threadComments={commentsByParent[comment.id] ?? []}
-              tips={tips}
-            />
-          ))}
-        </Col>
       </>
     )
   } else {

web/components/contract/tip-button.tsx

@@ -44,7 +44,7 @@ export function TipButton(props: {
         <Col className={'relative items-center sm:flex-row'}>
           <HeartIcon
             className={clsx(
-              'h-5 w-5 sm:h-6 sm:w-6',
+              'h-5 w-5',
               totalTipped > 0 ? 'mr-2' : '',
               userTipped ? 'fill-teal-500 text-teal-500' : ''
             )}

web/components/create-post.tsx

@@ -93,9 +93,10 @@ export function CreatePost(props: { group?: Group }) {
 
             <Button
               type="submit"
-              loading={isSubmitting}
+              color="green"
               size="xl"
-              disabled={isSubmitting || !isValid || upload.isLoading}
+              loading={isSubmitting}
+              disabled={!isValid || upload.isLoading}
               onClick={async () => {
                 setIsSubmitting(true)
                 await savePost(title)

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

@@ -1,46 +1,21 @@
 import { Answer } from 'common/answer'
-import { FreeResponseContract } from 'common/contract'
+import { Contract } from 'common/contract'
-import { ContractComment } from 'common/comment'
+import React, { useEffect, useRef } from 'react'
-import React, { useEffect, useRef, useState } from 'react'
-import { sum } from 'lodash'
 import { Col } from 'web/components/layout/col'
 import { Row } from 'web/components/layout/row'
 import { Avatar } from 'web/components/avatar'
-import { Linkify } from 'web/components/linkify'
-import clsx from 'clsx'
-import {
-  ContractCommentInput,
-  FeedComment,
-  ReplyTo,
-} from 'web/components/feed/feed-comments'
 import { CopyLinkDateTimeComponent } from 'web/components/feed/copy-link-date-time'
 import { useRouter } from 'next/router'
-import { useUser } from 'web/hooks/use-user'
-import { useEvent } from 'web/hooks/use-event'
-import { CommentTipMap } from 'web/hooks/use-tip-txns'
 import { UserLink } from 'web/components/user-link'
 
-export function FeedAnswerCommentGroup(props: {
+export function CommentsAnswer(props: { answer: Answer; contract: Contract }) {
-  contract: FreeResponseContract
+  const { answer, contract } = props
-  answer: Answer
-  answerComments: ContractComment[]
-  tips: CommentTipMap
-}) {
-  const { answer, contract, answerComments, tips } = props
   const { username, avatarUrl, name, text } = answer
-
-  const [replyTo, setReplyTo] = useState<ReplyTo>()
-  const user = useUser()
-  const router = useRouter()
   const answerElementId = `answer-${answer.id}`
+  const router = useRouter()
   const highlighted = router.asPath.endsWith(`#${answerElementId}`)
   const answerRef = useRef<HTMLDivElement>(null)
 
-  const onSubmitComment = useEvent(() => setReplyTo(undefined))
-  const onReplyClick = useEvent((comment: ContractComment) => {
-    setReplyTo({ id: comment.id, username: comment.userUsername })
-  })
-
   useEffect(() => {
     if (highlighted && answerRef.current != null) {
       answerRef.current.scrollIntoView(true)
@@ -48,19 +23,10 @@ export function FeedAnswerCommentGroup(props: {
   }, [highlighted])
 
   return (
-    <Col className="relative flex-1 items-stretch gap-3">
+    <Col className="bg-greyscale-2 w-fit gap-1 rounded-t-xl rounded-bl-xl py-2 px-4">
-      <Row
+      <Row className="gap-2">
-        className={clsx(
+        <Avatar username={username} avatarUrl={avatarUrl} size="xxs" />
-          'gap-3 space-x-3 pt-4 transition-all duration-1000',
+        <div className="text-greyscale-6 text-xs">
-          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">
           <UserLink username={username} name={name} /> answered
           <CopyLinkDateTimeComponent
             prefix={contract.creatorUsername}
@@ -69,62 +35,8 @@ export function FeedAnswerCommentGroup(props: {
             elementId={answerElementId}
           />
         </div>
-
-          <Col className="align-items justify-between gap-2 sm:flex-row">
-            <span className="whitespace-pre-line text-lg">
-              <Linkify text={text} />
-            </span>
-            <div className="sm:hidden">
-              <button
-                className="text-xs font-bold text-gray-500 hover:underline"
-                onClick={() =>
-                  setReplyTo({ id: answer.id, username: answer.username })
-                }
-              >
-                Reply
-              </button>
-            </div>
-          </Col>
-          <div className="justify-initial hidden sm:block">
-            <button
-              className="text-xs font-bold text-gray-500 hover:underline"
-              onClick={() =>
-                setReplyTo({ id: answer.id, username: answer.username })
-              }
-            >
-              Reply
-            </button>
-          </div>
-        </Col>
       </Row>
-      <Col className="gap-3 pl-1">
+      <div className="text-sm">{text}</div>
-        {answerComments.map((comment) => (
-          <FeedComment
-            key={comment.id}
-            indent={true}
-            contract={contract}
-            comment={comment}
-            myTip={user ? tips[comment.id]?.[user.id] : undefined}
-            totalTip={sum(Object.values(tips[comment.id] ?? {}))}
-            showTip={true}
-            onReplyClick={onReplyClick}
-          />
-        ))}
-      </Col>
-      {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"
-            aria-hidden="true"
-          />
-          <ContractCommentInput
-            contract={contract}
-            parentAnswerOutcome={answer.number.toString()}
-            replyTo={replyTo}
-            onSubmitComment={onSubmitComment}
-          />
-        </div>
-      )}
     </Col>
   )
 }

web/components/feed/feed-comments.tsx

@@ -23,6 +23,9 @@ import { Content } from '../editor'
 import { UserLink } from 'web/components/user-link'
 import { CommentInput } from '../comment-input'
 import { AwardBountyButton } from 'web/components/award-bounty-button'
+import { ReplyIcon } from '@heroicons/react/solid'
+import { Button } from '../button'
+import { ReplyToggle } from '../comments/reply-toggle'
 
 export type ReplyTo = { id: string; username: string }
 
@@ -34,6 +37,7 @@ export function FeedCommentThread(props: {
 }) {
   const { contract, threadComments, tips, parentComment } = props
   const [replyTo, setReplyTo] = useState<ReplyTo>()
+  const [seeReplies, setSeeReplies] = useState(false)
 
   const user = useUser()
   const onSubmitComment = useEvent(() => setReplyTo(undefined))
@@ -43,14 +47,27 @@ export function FeedCommentThread(props: {
 
   return (
     <Col className="relative w-full items-stretch gap-3 pb-4">
-      <span
+      <ParentFeedComment
-        className="absolute top-5 left-4 -ml-px h-[calc(100%-2rem)] w-0.5 bg-gray-200"
+        key={parentComment.id}
-        aria-hidden="true"
+        contract={contract}
+        comment={parentComment}
+        myTip={user ? tips[parentComment.id]?.[user.id] : undefined}
+        totalTip={sum(Object.values(tips[parentComment.id] ?? {}))}
+        showTip={true}
+        seeReplies={seeReplies}
+        numComments={threadComments.length}
+        onSeeReplyClick={() => setSeeReplies(!seeReplies)}
+        onReplyClick={() =>
+          setReplyTo({
+            id: parentComment.id,
+            username: parentComment.userUsername,
+          })
+        }
       />
-      {[parentComment].concat(threadComments).map((comment, commentIdx) => (
+      {seeReplies &&
+        threadComments.map((comment, _commentIdx) => (
           <FeedComment
             key={comment.id}
-          indent={commentIdx != 0}
             contract={contract}
             comment={comment}
             myTip={user ? tips[comment.id]?.[user.id] : undefined}
@@ -61,10 +78,6 @@ export function FeedCommentThread(props: {
         ))}
       {replyTo && (
         <Col className="-pb-2 relative ml-6">
-          <span
-            className="absolute -left-1 -ml-[1px] mt-[0.8rem] h-2 w-0.5 rotate-90 bg-gray-200"
-            aria-hidden="true"
-          />
           <ContractCommentInput
             contract={contract}
             parentCommentId={parentComment.id}
@@ -77,38 +90,110 @@ export function FeedCommentThread(props: {
   )
 }
 
+export function ParentFeedComment(props: {
+  contract: Contract
+  comment: ContractComment
+  showTip?: boolean
+  myTip?: number
+  totalTip?: number
+  seeReplies: boolean
+  numComments: number
+  onReplyClick?: (comment: ContractComment) => void
+  onSeeReplyClick: () => void
+}) {
+  const {
+    contract,
+    comment,
+    myTip,
+    totalTip,
+    showTip,
+    onReplyClick,
+    onSeeReplyClick,
+    seeReplies,
+    numComments,
+  } = props
+  const { text, content, userUsername, userAvatarUrl } = comment
+
+  const { isReady, asPath } = useRouter()
+  const [highlighted, setHighlighted] = useState(false)
+  const commentRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (isReady && asPath.endsWith(`#${comment.id}`)) {
+      setHighlighted(true)
+    }
+  }, [isReady, asPath, comment.id])
+
+  useEffect(() => {
+    if (highlighted && commentRef.current) {
+      commentRef.current.scrollIntoView(true)
+    }
+  }, [highlighted])
+  return (
+    <Row
+      ref={commentRef}
+      id={comment.id}
+      className={clsx(
+        'hover:bg-greyscale-1 ml-3 gap-2 transition-colors',
+        highlighted ? `-m-1.5 rounded bg-indigo-500/[0.2] p-1.5` : ''
+      )}
+    >
+      <Col className="-ml-3.5">
+        <Avatar size="sm" username={userUsername} avatarUrl={userAvatarUrl} />
+      </Col>
+      <Col className="w-full">
+        <FeedCommentHeader comment={comment} contract={contract} />
+        <Content
+          className="text-greyscale-7 mt-2 grow text-[14px]"
+          content={content || text}
+          smallImage
+        />
+        <Row className="justify-between">
+          <ReplyToggle
+            seeReplies={seeReplies}
+            numComments={numComments}
+            onClick={onSeeReplyClick}
+          />
+          <Row className="grow justify-end gap-2">
+            {onReplyClick && (
+              <Button
+                size={'sm'}
+                className={clsx(
+                  'hover:bg-greyscale-2 mt-0 mb-1 max-w-xs px-0 py-0'
+                )}
+                color={'gray-white'}
+                onClick={() => onReplyClick(comment)}
+              >
+                <ReplyIcon className="h-5 w-5" />
+              </Button>
+            )}
+            {showTip && (
+              <Tipper
+                comment={comment}
+                myTip={myTip ?? 0}
+                totalTip={totalTip ?? 0}
+              />
+            )}
+            {(contract.openCommentBounties ?? 0) > 0 && (
+              <AwardBountyButton comment={comment} contract={contract} />
+            )}
+          </Row>
+        </Row>
+      </Col>
+    </Row>
+  )
+}
+
 export const FeedComment = memo(function FeedComment(props: {
   contract: Contract
   comment: ContractComment
   showTip?: boolean
   myTip?: number
   totalTip?: number
-  indent?: boolean
   onReplyClick?: (comment: ContractComment) => void
 }) {
-  const { contract, comment, myTip, totalTip, showTip, indent, onReplyClick } =
+  const { contract, comment, myTip, totalTip, showTip, onReplyClick } = props
-    props
+  const { text, content, userUsername, userAvatarUrl } = comment
-  const {
-    text,
-    content,
-    userUsername,
-    userName,
-    userAvatarUrl,
-    commenterPositionProb,
-    commenterPositionShares,
-    commenterPositionOutcome,
-    createdTime,
-    bountiesAwarded,
-  } = comment
-  const betOutcome = comment.betOutcome
-  let bought: string | undefined
-  let money: string | undefined
-  if (comment.betAmount != null) {
-    bought = comment.betAmount >= 0 ? 'bought' : 'sold'
-    money = formatMoney(Math.abs(comment.betAmount))
-  }
-  const totalAwarded = bountiesAwarded ?? 0
-
   const { isReady, asPath } = useRouter()
   const [highlighted, setHighlighted] = useState(false)
   const commentRef = useRef<HTMLDivElement>(null)
@@ -130,78 +215,36 @@ export const FeedComment = memo(function FeedComment(props: {
       ref={commentRef}
       id={comment.id}
       className={clsx(
-        'relative',
+        'hover:bg-greyscale-1 ml-10 gap-2 transition-colors',
-        indent ? 'ml-6' : '',
+        highlighted ? `-m-1.5 rounded bg-indigo-500/[0.2] p-1.5` : ''
-        highlighted ? `-m-1.5 rounded bg-indigo-500/[0.2] px-2 py-4` : ''
       )}
     >
-      {/*draw a gray line from the comment to the left:*/}
+      <Col className="-ml-3">
-      {indent ? (
+        <Avatar size="xs" username={userUsername} avatarUrl={userAvatarUrl} />
         <span
-          className="absolute -left-1 -ml-[1px] mt-[0.8rem] h-2 w-0.5 rotate-90 bg-gray-200"
+          className="bg-greyscale-3 mx-auto h-full w-[1.5px]"
           aria-hidden="true"
         />
-      ) : null}
+      </Col>
-      <Avatar size="sm" username={userUsername} avatarUrl={userAvatarUrl} />
+      <Col className="w-full">
-      <div className="ml-1.5 min-w-0 flex-1 pl-0.5 sm:ml-3">
+        <FeedCommentHeader comment={comment} contract={contract} />
-        <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' && (
-              <>
-                {'is '}
-                <CommentStatus
-                  prob={commenterPositionProb}
-                  outcome={commenterPositionOutcome}
-                  contract={contract}
-                />
-              </>
-            )}
-          {bought} {money}
-          {contract.outcomeType !== 'FREE_RESPONSE' && betOutcome && (
-            <>
-              {' '}
-              of{' '}
-              <OutcomeLabel
-                outcome={betOutcome ? betOutcome : ''}
-                contract={contract}
-                truncate="short"
-              />
-            </>
-          )}
-          <CopyLinkDateTimeComponent
-            prefix={contract.creatorUsername}
-            slug={contract.slug}
-            createdTime={createdTime}
-            elementId={comment.id}
-          />
-          {totalAwarded > 0 && (
-            <span className=" text-primary ml-2 text-sm">
-              +{formatMoney(totalAwarded)}
-            </span>
-          )}
-        </div>
         <Content
-          className="mt-2 text-[15px] text-gray-700"
+          className="text-greyscale-7 mt-2 grow text-[14px]"
           content={content || text}
           smallImage
         />
-        <Row className="mt-2 items-center gap-6 text-xs text-gray-500">
+        <Row className="grow justify-end gap-2">
           {onReplyClick && (
-            <button
+            <Button
-              className="font-bold hover:underline"
+              size={'sm'}
+              className={clsx(
+                'hover:bg-greyscale-2 mt-0 mb-1 max-w-xs px-0 py-0'
+              )}
+              color={'gray-white'}
               onClick={() => onReplyClick(comment)}
             >
-              Reply
+              <ReplyIcon className="h-5 w-5" />
-            </button>
+            </Button>
           )}
           {showTip && (
             <Tipper
@@ -214,7 +257,7 @@ export const FeedComment = memo(function FeedComment(props: {
             <AwardBountyButton comment={comment} contract={contract} />
           )}
         </Row>
-      </div>
+      </Col>
     </Row>
   )
 })
@@ -273,3 +316,74 @@ export function ContractCommentInput(props: {
     />
   )
 }
+
+export function FeedCommentHeader(props: {
+  comment: ContractComment
+  contract: Contract
+}) {
+  const { comment, contract } = props
+  const {
+    userUsername,
+    userName,
+    commenterPositionProb,
+    commenterPositionShares,
+    commenterPositionOutcome,
+    createdTime,
+    bountiesAwarded,
+  } = comment
+  const betOutcome = comment.betOutcome
+  let bought: string | undefined
+  let money: string | undefined
+  if (comment.betAmount != null) {
+    bought = comment.betAmount >= 0 ? 'bought' : 'sold'
+    money = formatMoney(Math.abs(comment.betAmount))
+  }
+  const totalAwarded = bountiesAwarded ?? 0
+  return (
+    <Row>
+      <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 && (
+            <>
+              {' '}
+              of{' '}
+              <OutcomeLabel
+                outcome={betOutcome ? betOutcome : ''}
+                contract={contract}
+                truncate="short"
+              />
+            </>
+          )}
+        </span>
+        <CopyLinkDateTimeComponent
+          prefix={contract.creatorUsername}
+          slug={contract.slug}
+          createdTime={createdTime}
+          elementId={comment.id}
+        />
+        {totalAwarded > 0 && (
+          <span className=" text-primary ml-2 text-sm">
+            +{formatMoney(totalAwarded)}
+          </span>
+        )}
+      </div>
+    </Row>
+  )
+}

web/components/follow-button.tsx

@@ -11,25 +11,19 @@ export function FollowButton(props: {
   isFollowing: boolean | undefined
   onFollow: () => void
   onUnfollow: () => void
-  className?: string
 }) {
-  const { isFollowing, onFollow, onUnfollow, className } = props
+  const { isFollowing, onFollow, onUnfollow } = props
 
   const user = useUser()
 
-  if (!user || isFollowing === undefined)
+  if (!user || isFollowing === undefined) return <></>
-    return (
-      <Button size="sm" color="gray" className={clsx(className, 'invisible')}>
-        Follow
-      </Button>
-    )
 
   if (isFollowing) {
     return (
       <Button
         size="sm"
         color="gray-outline"
-        className={clsx('my-auto', className)}
+        className="my-auto"
         onClick={withTracking(onUnfollow, 'unfollow')}
       >
         Following
@@ -41,7 +35,7 @@ export function FollowButton(props: {
     <Button
       size="sm"
       color="indigo"
-      className={clsx(className, 'my-auto')}
+      className="my-auto"
       onClick={withTracking(onFollow, 'follow')}
     >
       Follow

web/components/following-button.tsx

@@ -1,5 +1,4 @@
 import clsx from 'clsx'
-import { PencilIcon } from '@heroicons/react/outline'
 
 import { User } from 'common/user'
 import { useState } from 'react'
@@ -11,7 +10,6 @@ import { Modal } from './layout/modal'
 import { Tabs } from './layout/tabs'
 import { useDiscoverUsers } from 'web/hooks/use-users'
 import { TextButton } from './text-button'
-import { track } from 'web/lib/service/analytics'
 
 export function FollowingButton(props: { user: User; className?: string }) {
   const { user, className } = props
@@ -40,37 +38,6 @@ export function FollowingButton(props: { user: User; className?: string }) {
   )
 }
 
-export function EditFollowingButton(props: { user: User; className?: string }) {
-  const { user, className } = props
-  const [isOpen, setIsOpen] = useState(false)
-  const followingIds = useFollows(user.id)
-  const followerIds = useFollowers(user.id)
-
-  return (
-    <div
-      className={clsx(
-        className,
-        'btn btn-sm btn-ghost cursor-pointer gap-2 whitespace-nowrap text-sm normal-case text-gray-700'
-      )}
-      onClick={() => {
-        setIsOpen(true)
-        track('edit following button')
-      }}
-    >
-      <PencilIcon className="inline h-4 w-4" />
-      Following
-      <FollowsDialog
-        user={user}
-        defaultTab="following"
-        followingIds={followingIds ?? []}
-        followerIds={followerIds ?? []}
-        isOpen={isOpen}
-        setIsOpen={setIsOpen}
-      />
-    </div>
-  )
-}
-
 export function FollowersButton(props: { user: User; className?: string }) {
   const { user, className } = props
   const [isOpen, setIsOpen] = useState(false)

web/components/groups/edit-group-button.tsx

@@ -11,6 +11,7 @@ import { FilterSelectUsers } from 'web/components/filter-select-users'
 import { User } from 'common/user'
 import { useMemberIds } from 'web/hooks/use-group'
 import { Input } from '../input'
+import { Button } from '../button'
 
 export function EditGroupButton(props: { group: Group; className?: string }) {
   const { group, className } = props
@@ -40,14 +41,14 @@ export function EditGroupButton(props: { group: Group; className?: string }) {
 
   return (
     <div className={clsx('flex p-1', className)}>
-      <div
+      <Button
-        className={clsx(
+        size="sm"
-          'btn-ghost cursor-pointer whitespace-nowrap rounded-md p-1 text-sm text-gray-700'
+        color="gray-white"
-        )}
+        className="whitespace-nowrap"
         onClick={() => updateOpen(!open)}
       >
         <PencilIcon className="inline h-4 w-4" /> Edit
-      </div>
+      </Button>
       <Modal open={open} setOpen={updateOpen}>
         <div className="h-full rounded-md bg-white p-8">
           <div className="form-control w-full">
@@ -77,8 +78,9 @@ export function EditGroupButton(props: { group: Group; className?: string }) {
           </div>
 
           <div className="modal-action">
-            <label
+            <Button
-              htmlFor="edit"
+              color="red"
+              size="xs"
               onClick={() => {
                 if (confirm('Are you sure you want to delete this group?')) {
                   deleteGroup(group)
@@ -86,30 +88,24 @@ export function EditGroupButton(props: { group: Group; className?: string }) {
                   router.replace('/groups')
                 }
               }}
-              className={clsx(
-                'btn btn-sm btn-outline mr-auto self-center hover:border-red-500 hover:bg-red-500'
-              )}
             >
               Delete
-            </label>
+            </Button>
-            <label
+            <Button
-              htmlFor="edit"
+              color="gray-white"
-              className={'btn'}
+              size="xs"
               onClick={() => updateOpen(false)}
             >
               Cancel
-            </label>
+            </Button>
-            <label
+            <Button
-              className={clsx(
+              color="green"
-                'btn',
+              disabled={saveDisabled}
-                saveDisabled ? 'btn-disabled' : 'btn-primary',
+              loading={isSubmitting}
-                isSubmitting && 'loading'
-              )}
-              htmlFor="edit"
               onClick={onSubmit}
             >
               Save
-            </label>
+            </Button>
           </div>
         </div>
       </Modal>

web/components/groups/group-overview.tsx

@@ -116,10 +116,7 @@ export function GroupPosts(props: { posts: Post[]; group: Group }) {
         </Col>
         <Col>
           {user && (
-            <Button
+            <Button onClick={() => setShowCreatePost(!showCreatePost)}>
-              className="btn-md"
-              onClick={() => setShowCreatePost(!showCreatePost)}
-            >
               Add a Post
             </Button>
           )}
@@ -192,7 +189,9 @@ function GroupOverviewPinned(props: {
     updateGroup(group, { pinnedItems: newPinned })
   }
 
-  return isEditable || (group.pinnedItems && group.pinnedItems.length > 0) ? (
+  if (!group.pinnedItems || group.pinnedItems.length == 0) return <></>
+
+  return isEditable || (group.pinnedItems && group?.pinnedItems.length > 0) ? (
     <PinnedItems
       posts={posts}
       group={group}
@@ -430,7 +429,7 @@ export function GroupAbout(props: {
             <CopyLinkButton
               url={shareUrl}
               tracking="copy group share link"
-              buttonClassName="btn-md rounded-l-none"
+              buttonClassName="rounded-l-none"
               toastClassName={'-left-28 mt-1'}
             />
           </Col>

web/components/groups/groups-button.tsx

@@ -125,9 +125,9 @@ export function JoinOrLeaveGroupButton(props: {
   if (isMember) {
     return (
       <Button
-        size="xs"
+        size="sm"
-        color="gray-white"
+        color="gray-outline"
-        className={`${className}  border-greyscale-4 border !border-solid`}
+        className={className}
         onClick={withTracking(onLeaveGroup, 'leave group')}
       >
         Unfollow
@@ -139,8 +139,8 @@ export function JoinOrLeaveGroupButton(props: {
     return <div className={clsx(className, 'text-gray-500')}>Closed</div>
   return (
     <Button
-      size="xs"
+      size="sm"
-      color="blue"
+      color="indigo"
       className={className}
       onClick={withTracking(onJoinGroup, 'join group')}
     >

web/components/numeric-bet-panel.tsx

@@ -20,6 +20,7 @@ import { Row } from './layout/row'
 import { Spacer } from './layout/spacer'
 import { BetSignUpPrompt } from './sign-up-prompt'
 import { track } from 'web/lib/service/analytics'
+import { Button } from './button'
 
 export function NumericBetPanel(props: {
   contract: NumericContract
@@ -108,7 +109,7 @@ function NumericBuyPanel(props: {
     })
   }
 
-  const betDisabled = isSubmitting || !betAmount || !bucketChoice || error
+  const betDisabled = isSubmitting || !betAmount || !bucketChoice || !!error
 
   const { newBet, newPool, newTotalShares, newTotalBets } = getNumericBetsInfo(
     value ?? 0,
@@ -195,16 +196,14 @@ function NumericBuyPanel(props: {
       <Spacer h={8} />
 
       {user && (
-        <button
+        <Button
-          className={clsx(
+          disabled={betDisabled}
-            'btn flex-1',
+          color="green"
-            betDisabled ? 'btn-disabled' : 'btn-primary',
+          loading={isSubmitting}
-            isSubmitting ? 'loading' : ''
+          onClick={submitBet}
-          )}
-          onClick={betDisabled ? undefined : submitBet}
         >
-          {isSubmitting ? 'Submitting...' : 'Submit'}
+          Submit
-        </button>
+        </Button>
       )}
 
       {wasSubmitted && <div className="mt-4">Bet submitted!</div>}

web/components/post-card.tsx

@@ -8,6 +8,7 @@ import { fromNow } from 'web/lib/util/time'
 import { Avatar } from './avatar'
 import { Card } from './card'
 import { CardHighlightOptions } from './contract/contracts-grid'
+import { Col } from './layout/col'
 import { Row } from './layout/row'
 import { UserLink } from './user-link'
 
@@ -22,39 +23,39 @@ export function PostCard(props: {
   return (
     <Card
       className={clsx(
-        'group relative flex gap-3 py-2 px-3',
+        'group relative flex gap-3 py-4 px-6',
         itemIds?.includes(post.id) && highlightClassName
       )}
     >
       <Row className="flex grow justify-between">
-        <div className="">
+        <Col className="gap-2">
-          <Row className="items-center text-sm ">
+          <Row className="items-center justify-between">
+            <Row className="items-center text-sm">
               <Avatar
                 className="mx-1 h-7 w-7"
                 username={post.creatorUsername}
                 avatarUrl={post.creatorAvatarUrl}
               />
               <UserLink
-              className=" text-gray-400"
+                className="text-gray-400"
                 name={post.creatorName}
                 username={post.creatorUsername}
               />
               <span className="mx-1 text-gray-400">•</span>
               <span className="text-gray-400">{fromNow(post.createdTime)}</span>
             </Row>
-          <div className=" break-words text-lg font-semibold  text-indigo-700 group-hover:underline group-hover:decoration-indigo-400 group-hover:decoration-2">
+            <div className="inline-flex items-center gap-1 whitespace-nowrap rounded-full bg-indigo-300 px-2 py-0.5 text-xs font-medium text-white">
+              <DocumentIcon className={'h3 w-3'} />
+              Post
+            </div>
+          </Row>
+          <div className="break-words text-lg font-semibold text-indigo-700 group-hover:underline group-hover:decoration-indigo-400 group-hover:decoration-2">
             {post.title}
           </div>
           <div className="font-small text-md break-words text-gray-500">
             {post.subtitle}
           </div>
-        </div>
+        </Col>
-        <div>
-          <span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full bg-indigo-300 px-2 py-0.5 text-xs font-medium text-white">
-            <DocumentIcon className={'h3 w-3'} />
-            Post
-          </span>
-        </div>
       </Row>
       {onPostClick ? (
         <a

web/components/referrals-button.tsx

@@ -12,6 +12,7 @@ import { FilterSelectUsers } from 'web/components/filter-select-users'
 import { getUser, updateUser } from 'web/lib/firebase/users'
 import { TextButton } from 'web/components/text-button'
 import { UserLink } from 'web/components/user-link'
+import { Button } from './button'
 
 export function ReferralsButton(props: {
   user: User
@@ -89,11 +90,9 @@ function ReferralsDialog(props: {
                         maxUsers={1}
                       />
                       <Row className={'mt-0 justify-end'}>
-                        <button
+                        <Button
                           className={
-                            referredBy.length === 0
+                            referredBy.length === 0 ? 'hidden' : 'my-2 w-24'
-                              ? 'hidden'
-                              : 'btn btn-primary btn-md my-2 w-24 normal-case'
                           }
                           disabled={referredBy.length === 0 || isSubmitting}
                           onClick={() => {
@@ -114,7 +113,7 @@ function ReferralsDialog(props: {
                           }}
                         >
                           Save
-                        </button>
+                        </Button>
                       </Row>
                       <span className={'text-warning'}>
                         {referredBy.length > 0 &&

web/components/resolution-panel.tsx

@@ -72,7 +72,6 @@ export function ResolutionPanel(props: {
         className="mx-auto my-2"
         selected={outcome}
         onSelect={setOutcome}
-        btnClassName={isSubmitting ? 'btn-disabled' : ''}
       />
       <Spacer h={4} />
       <div>

web/components/sell-button.tsx

@@ -1,59 +0,0 @@
-import { BinaryContract, PseudoNumericContract } from 'common/contract'
-import { User } from 'common/user'
-import { useUserContractBets } from 'web/hooks/use-user-bets'
-import { useState } from 'react'
-import { Col } from './layout/col'
-import clsx from 'clsx'
-import { SellSharesModal } from './sell-modal'
-
-export function SellButton(props: {
-  contract: BinaryContract | PseudoNumericContract
-  user: User | null | undefined
-  sharesOutcome: 'YES' | 'NO' | undefined
-  shares: number
-  panelClassName?: string
-}) {
-  const { contract, user, sharesOutcome, shares, panelClassName } = props
-  const userBets = useUserContractBets(user?.id, contract.id)
-  const [showSellModal, setShowSellModal] = useState(false)
-  const { mechanism, outcomeType } = contract
-  const isPseudoNumeric = outcomeType === 'PSEUDO_NUMERIC'
-
-  if (sharesOutcome && user && mechanism === 'cpmm-1') {
-    return (
-      <Col className={'items-center'}>
-        <button
-          className={clsx(
-            'btn-sm w-24 gap-1',
-            // from the yes-no-selector:
-            'inline-flex items-center justify-center rounded-3xl border-2 p-2',
-            sharesOutcome === 'NO'
-              ? 'hover:bg-primary-focus border-primary hover:border-primary-focus text-primary hover:text-white'
-              : 'border-red-400 text-red-500 hover:border-red-500 hover:bg-red-500 hover:text-white'
-          )}
-          onClick={() => setShowSellModal(true)}
-        >
-          Sell{' '}
-          {isPseudoNumeric
-            ? { YES: 'HIGH', NO: 'LOW' }[sharesOutcome]
-            : sharesOutcome}
-        </button>
-        <div className={'mt-1 w-24 text-center text-sm text-gray-500'}>
-          {'(' + Math.floor(shares) + ' shares)'}
-        </div>
-        {showSellModal && (
-          <SellSharesModal
-            className={panelClassName}
-            contract={contract}
-            user={user}
-            userBets={userBets ?? []}
-            shares={shares}
-            sharesOutcome={sharesOutcome}
-            setOpen={setShowSellModal}
-          />
-        )}
-      </Col>
-    )
-  }
-  return <div />
-}

web/components/user-page.tsx

@@ -95,7 +95,7 @@ export function UserPage(props: { user: User }) {
           )}
 
           <Col className="w-full gap-4 pl-5">
-            <div className="flex flex-col gap-2 sm:flex-row sm:justify-between">
+            <div className="flex flex-col items-start gap-2 sm:flex-row sm:justify-between">
               <Col>
                 <span className="break-anywhere text-lg font-bold sm:text-2xl">
                   {user.name}

web/components/yes-no-selector.tsx

@@ -101,7 +101,7 @@ export function YesNoCancelSelector(props: {
       <Button
         color={selected === 'MKT' ? 'blue' : 'gray'}
         onClick={() => onSelect('MKT')}
-        className={clsx(btnClassName, 'btn-sm')}
+        className={btnClassName}
       >
         PROB
       </Button>
@@ -109,7 +109,7 @@ export function YesNoCancelSelector(props: {
       <Button
         color={selected === 'CANCEL' ? 'yellow' : 'gray'}
         onClick={() => onSelect('CANCEL')}
-        className={clsx(btnClassName, 'btn-sm')}
+        className={btnClassName}
       >
         N/A
       </Button>

web/hooks/use-global-config.ts

@@ -7,6 +7,6 @@ export const useGlobalConfig = () => {
 
   useEffect(() => {
     listenForGlobalConfig(setGlobalConfig)
-  }, [globalConfig])
+  }, [])
   return globalConfig
 }

web/pages/[username]/[contractSlug].tsx

@@ -1,4 +1,4 @@
-import React, { memo, useEffect, useMemo, useState } from 'react'
+import React, { memo, useEffect, useMemo, useRef, useState } from 'react'
 import { ArrowLeftIcon } from '@heroicons/react/outline'
 import dayjs from 'dayjs'
 
@@ -46,6 +46,8 @@ import { BetsSummary } from 'web/components/bet-summary'
 import { listAllComments } from 'web/lib/firebase/comments'
 import { ContractComment } from 'common/comment'
 import { ScrollToTopButton } from 'web/components/scroll-to-top-button'
+import { Answer } from 'common/answer'
+import { useEvent } from 'web/hooks/use-event'
 
 export const getStaticProps = fromPropz(getStaticPropz)
 export async function getStaticPropz(props: {
@@ -204,6 +206,20 @@ export function ContractPageContent(
     contractId: contract.id,
   })
 
+  const [answerResponse, setAnswerResponse] = useState<Answer | undefined>(
+    undefined
+  )
+  const tabsContainerRef = useRef<null | HTMLDivElement>(null)
+  const onAnswerCommentClick = useEvent((answer: Answer) => {
+    setAnswerResponse(answer)
+    if (tabsContainerRef.current) {
+      tabsContainerRef.current.scrollIntoView({ behavior: 'smooth' })
+    } else {
+      console.error('no ref to scroll to')
+    }
+  })
+  const onCancelAnswerResponse = useEvent(() => setAnswerResponse(undefined))
+
   return (
     <Page
       rightSidebar={
@@ -232,10 +248,10 @@ export function ContractPageContent(
           ogCardProps={ogCardProps}
         />
       )}
-      <Col className="w-full justify-between rounded border-0 border-gray-100 bg-white py-6 pl-1 pr-2 sm:px-2 md:px-6 md:py-8">
+      <Col className="w-full justify-between rounded bg-white py-6 pl-1 pr-2 sm:px-2 md:px-6 md:py-8">
         {backToHome && (
           <button
-            className="btn btn-sm mb-4 items-center gap-2 self-start border-0 border-gray-700 bg-white normal-case text-gray-700 hover:bg-white hover:text-gray-700 lg:hidden"
+            className="mb-4 items-center gap-2 self-start bg-white text-gray-700 lg:hidden"
             onClick={backToHome}
           >
             <ArrowLeftIcon className="h-5 w-5 text-gray-700" />
@@ -257,7 +273,10 @@ export function ContractPageContent(
           outcomeType === 'MULTIPLE_CHOICE') && (
           <>
             <Spacer h={4} />
-            <AnswersPanel contract={contract} />
+            <AnswersPanel
+              contract={contract}
+              onAnswerCommentClick={onAnswerCommentClick}
+            />
             <Spacer h={4} />
           </>
         )}
@@ -286,12 +305,16 @@ export function ContractPageContent(
           userBets={userBets}
         />
 
+        <div ref={tabsContainerRef}>
           <ContractTabs
             contract={contract}
             bets={bets}
             userBets={userBets}
             comments={comments}
+            answerResponse={answerResponse}
+            onCancelAnswerResponse={onCancelAnswerResponse}
           />
+        </div>
       </Col>
       {!isCreator && <RecommendedContractsWidget contract={contract} />}
       <ScrollToTopButton className="fixed bottom-16 right-2 z-20 lg:bottom-2 xl:hidden" />

web/pages/admin.tsx

@@ -11,6 +11,7 @@ import { useAdmin } from 'web/hooks/use-admin'
 import { contractPath } from 'web/lib/firebase/contracts'
 import { redirectIfLoggedOut } from 'web/lib/firebase/server-auth'
 import { firestoreConsolePath } from 'common/envs/constants'
+import { Button } from 'web/components/button'
 
 export const getServerSideProps = redirectIfLoggedOut('/')
 
@@ -107,9 +108,7 @@ function UsersTable() {
           limit: 25,
         }}
       />
-      <button className="btn" onClick={exportCsv}>
+      <Button onClick={exportCsv}>Export emails to CSV</Button>
-        Export emails to CSV
-      </button>
     </>
   )
 }

web/pages/charity/[charitySlug].tsx

@@ -23,6 +23,7 @@ import { Donation } from 'web/components/charity/feed-items'
 import { manaToUSD } from 'common/util/format'
 import { track } from 'web/lib/service/analytics'
 import { SEO } from 'web/components/SEO'
+import { Button } from 'web/components/button'
 
 export default function CharityPageWrapper() {
   const router = useRouter()
@@ -126,15 +127,13 @@ function Blurb({ text }: { text: string }) {
       >
         {text}
       </div>
-      <button
+      <Button
+        color="indigo"
         onClick={() => setOpen(!open)}
-        className={clsx(
+        className={clsx('my-3', hideExpander && 'invisible')}
-          'btn btn-link capitalize-none my-3 normal-case text-indigo-700',
-          hideExpander && 'invisible'
-        )}
       >
         {open ? 'Hide' : 'Read more'}
-      </button>
+      </Button>
     </>
   )
 }
@@ -175,7 +174,7 @@ function DonationBox(props: {
   const [isSubmitting, setIsSubmitting] = useState(false)
   const [error, setError] = useState<string | undefined>()
 
-  const donateDisabled = isSubmitting || !amount || error
+  const donateDisabled = isSubmitting || !amount || !!error
 
   const onSubmit: React.FormEventHandler = async (e) => {
     if (!user || donateDisabled) return
@@ -230,16 +229,15 @@ function DonationBox(props: {
         <Spacer h={8} />
 
         {user && (
-          <button
+          <Button
             type="submit"
-            className={clsx(
+            color="green"
-              'btn w-full',
+            className="w-full"
-              donateDisabled ? 'btn-disabled' : 'btn-primary',
+            disabled={donateDisabled}
-              isSubmitting && 'loading'
+            loading={isSubmitting}
-            )}
           >
             Donate
-          </button>
+          </Button>
         )}
       </form>
     </div>

web/pages/create.tsx

@@ -1,6 +1,5 @@
 import router, { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
-import clsx from 'clsx'
 import dayjs from 'dayjs'
 import { Spacer } from 'web/components/layout/spacer'
 import { getUserAndPrivateUser } from 'web/lib/firebase/users'
@@ -519,20 +518,18 @@ export function NewContract(props: {
           )}
         </div>
 
-        <button
+        <Button
           type="submit"
-          className={clsx(
+          color="green"
-            'btn btn-primary normal-case',
+          loading={isSubmitting}
-            isSubmitting && 'loading disabled'
+          disabled={!isValid || upload.isLoading}
-          )}
-          disabled={isSubmitting || !isValid || upload.isLoading}
           onClick={(e) => {
             e.preventDefault()
             submit()
           }}
         >
           {isSubmitting ? 'Creating...' : 'Create question'}
-        </button>
+        </Button>
       </Row>
 
       <Spacer h={6} />

web/pages/group/[...slugs]/index.tsx

@@ -386,14 +386,9 @@ function JoinGroupButton(props: {
 
   return (
     <div>
-      <button
+      <Button onClick={follow} color="blue">
-        onClick={follow}
-        className={
-          'btn-md btn-outline btn w-full whitespace-nowrap normal-case'
-        }
-      >
         Follow
-      </button>
+      </Button>
     </div>
   )
 }

web/pages/profile.tsx

@@ -3,11 +3,13 @@ import { PrivateUser, User } from 'common/user'
 import { cleanDisplayName, cleanUsername } from 'common/util/clean-username'
 import Link from 'next/link'
 import React, { useState } from 'react'
+import { buttonClass } from 'web/components/button'
 import { ConfirmationButton } from 'web/components/confirmation-button'
 import { ExpandingInput } from 'web/components/expanding-input'
 import { Input } from 'web/components/input'
 import { Col } from 'web/components/layout/col'
 import { Row } from 'web/components/layout/row'
+import { LoadingIndicator } from 'web/components/loading-indicator'
 import { Page } from 'web/components/page'
 import { SEO } from 'web/components/SEO'
 import { SiteLink } from 'web/components/site-link'
@@ -129,14 +131,17 @@ export default function ProfilePage(props: {
       <Col className="max-w-lg rounded bg-white p-6 shadow-md sm:mx-auto">
         <Row className="justify-between">
           <Title className="!mt-0" text="Edit Profile" />
-          <SiteLink className="btn btn-primary" href={`/${user.username}`}>
+          <SiteLink
+            className={buttonClass('md', 'green')}
+            href={`/${user.username}`}
+          >
             Done
           </SiteLink>
         </Row>
         <Col className="gap-4">
           <Row className="items-center gap-4">
             {avatarLoading ? (
-              <button className="btn btn-ghost btn-lg btn-circle loading"></button>
+              <LoadingIndicator />
             ) : (
               <>
                 <img

web/pages/referrals.tsx

@@ -50,7 +50,7 @@ export default function ReferralsPage() {
           <CopyLinkButton
             url={url}
             tracking="copy referral link"
-            buttonClassName="btn-md rounded-l-none"
+            buttonClassName="rounded-l-none"
             toastClassName={'-left-28 mt-1'}
           />
 

web/pages/twitch.tsx

@@ -121,7 +121,7 @@ function TwitchPlaysManifoldMarkets(props: {
           <Button
             size="xl"
             color="green"
-            className="btn-disabled my-4 self-center !border-none"
+            className="my-4 self-center !border-none"
           >
             Account connected: {twitchUser}
           </Button>
@@ -331,25 +331,18 @@ function BotConnectButton(props: {
         <Button
           color="red"
           onClick={updateBotConnected(false)}
-          className={clsx(loading && '!btn-disabled', 'border-none')}
+          loading={loading}
         >
-          {loading ? (
+          Remove bot from channel
-            <LoadingIndicator spinnerClassName="!h-5 !w-5 border-white !border-2" />
-          ) : (
-            'Remove bot from channel'
-          )}
         </Button>
       ) : (
         <Button
           color="green"
           onClick={updateBotConnected(true)}
-          className={clsx(loading && '!btn-disabled', 'border-none')}
+          loading={loading}
+          className="border-none"
         >
-          {loading ? (
+          Add bot to your channel
-            <LoadingIndicator spinnerClassName="!h-5 !w-5 border-white !border-2" />
-          ) : (
-            'Add bot to your channel'
-          )}
         </Button>
       )}
     </>

web/public/custom-components/curve.tsx

@@ -0,0 +1,19 @@
+export default function Curve({
+  size = 24,
+  color = '#B1B1C7',
+  strokeWidth = 2,
+}) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 18 18"
+      width={size}
+      height={size}
+      fill="none"
+      stroke={color}
+      strokeWidth={strokeWidth}
+    >
+      <path d="M5.02,0V5.24c0,4.3,3.49,7.79,7.79,7.79h5.2" />
+    </svg>
+  )
+}