Merge branch 'main' into austin/dc-hackathon

2022-10-12 13:30:36 -06:00 · 2022-10-12 13:30:36 -06:00 · c6066a3a99
commit c6066a3a99
parent 2adba0fb90 d9f57b7daa
41 changed files with 629 additions and 591 deletions
--- a/common/payouts-fixed.ts
+++ b/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)

--- a/common/util/parse.ts
+++ b/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,
-
-  Image,
+  // other extensions
  Link,
+  Image.extend({ renderText: () => '[image]' }),
  Mention, // user @mention
  Mention.extend({ name: 'contract-mention' }), // market %mention
-  Iframe,
-  TiptapTweet,
-  TiptapSpoiler,
+  Iframe.extend({
+    renderText: ({ node }) =>
+      '[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.
-  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)
+  return generateText(text, stringParseExts)
 }

 export function htmlToRichText(html: string) {
--- a/web/components/amount-input.tsx
+++ b/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}
--- a/web/components/answers/answer-bet-panel.tsx
+++ b/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"
--- a/web/components/answers/answer-resolve-panel.tsx
+++ b/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
-              className="btn btn-ghost"
+            <Button
+              color="gray-white"
              onClick={() => {
                setResolveOption(undefined)
              }}
            >
              Clear
-            </button>
+            </Button>
          )}

          <ResolveConfirmationButton
--- a/web/components/answers/answers-panel.tsx
+++ b/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>
--- a/web/components/answers/create-answer-panel.tsx
+++ b/web/components/answers/create-answer-panel.tsx
@ -197,17 +197,15 @@ export function CreateAnswerPanel(props: { contract: FreeResponseContract }) {
            </>
          )}
          {user ? (
-            <button
-              className={clsx(
-                'btn mt-2',
-                canSubmit ? 'btn-outline' : 'btn-disabled',
-                isSubmitting && 'loading'
-              )}
+            <Button
+              color="green"
+              size="lg"
+              loading={isSubmitting}
              disabled={!canSubmit}
              onClick={withTracking(submitAnswer, 'submit answer')}
            >
              Submit
-            </button>
+            </Button>
          ) : (
            text && (
              <Button
--- a/web/components/bet-panel.tsx
+++ b/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...'
--- a/web/components/button.tsx
+++ b/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',
-    color === 'highlight-blue' &&
-      'text-highlight-blue disabled:bg-greyscale-2 border-none shadow-none'
+      'text-greyscale-6 hover:bg-greyscale-2 shadow-none disabled:opacity-50'
  )
 }

--- a/web/components/comment-input.tsx
+++ b/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
--- a/web/components/comments/reply-toggle.tsx
+++ b/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>
+  )
+}
--- a/web/components/contract/comment-bounty-dialog.tsx
+++ b/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'}
--- a/web/components/contract/contract-card.tsx
+++ b/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 {
-  formatLargeNumber,
-  formatMoney,
-  formatPercent,
-} from 'common/util/format'
+import { formatLargeNumber, 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 && (
--- a/web/components/contract/contract-tabs.tsx
+++ b/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 &&
-    (contract.outcomeType === 'FREE_RESPONSE'
-      ? c.betId === undefined && c.answerOutcome == undefined
-      : true)
+    c.replyToCommentId == undefined

  // 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">
-      <Button
-        size={'xs'}
-        color={'gray-white'}
-        onClick={() => setSort(sort === 'Newest' ? 'Best' : 'Newest')}
-      >
-        <Tooltip
-          text={
-            sort === 'Best'
-              ? 'Highest tips + bounties first. Your new comments briefly appear to you first.'
-              : ''
-          }
-        >
-          Sort by: {sort}
-        </Tooltip>
-      </Button>
-
+    <Row className="mb-4 items-center justify-end gap-4">
      <BountiedContractSmallBadge contract={contract} showAmount />
+      <Row className="items-center gap-1">
+        <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={sort === 'Best' ? 'Highest tips + bounties first.' : ''}
+          >
+            <Row className="items-center gap-1">
+              {sort}
+              <TriangleDownFillIcon className=" h-2 w-2" />
+            </Row>
+          </Tooltip>
+        </button>
+      </Row>
    </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) => (
-          <div key={answer.id} className="relative pb-4">
-            <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}
-              answerComments={commentsByOutcome[answer.number.toString()] ?? []}
-              tips={tips}
-            />
-          </div>
-        ))}
-        <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>
+        {answerResponse && (
+          <AnswerCommentInput
+            contract={contract}
+            answerResponse={answerResponse}
+            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>
+            </>
+          )
+        })}
      </>
    )
  } else {
--- a/web/components/contract/tip-button.tsx
+++ b/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' : ''
            )}
--- a/web/components/create-post.tsx
+++ b/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)
--- a/web/components/feed/copy-link-date-time.tsx
+++ b/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)}
--- a/web/components/feed/feed-answer-comment-group.tsx
+++ b/web/components/feed/feed-answer-comment-group.tsx
@ -1,46 +1,21 @@
 import { Answer } from 'common/answer'
-import { FreeResponseContract } from 'common/contract'
-import { ContractComment } from 'common/comment'
-import React, { useEffect, useRef, useState } from 'react'
-import { sum } from 'lodash'
+import { Contract } from 'common/contract'
+import React, { useEffect, useRef } from 'react'
 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: {
-  contract: FreeResponseContract
-  answer: Answer
-  answerComments: ContractComment[]
-  tips: CommentTipMap
-}) {
-  const { answer, contract, answerComments, tips } = props
+export function CommentsAnswer(props: { answer: Answer; contract: Contract }) {
+  const { answer, contract } = 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,83 +23,20 @@ export function FeedAnswerCommentGroup(props: {
  }, [highlighted])

  return (
-    <Col className="relative flex-1 items-stretch gap-3">
-      <Row
-        className={clsx(
-          'gap-3 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 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}
-              slug={contract.slug}
-              createdTime={answer.createdTime}
-              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">
-        {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}
+    <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>
  )
 }
--- a/web/components/feed/feed-comments.tsx
+++ b/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,28 +47,37 @@ export function FeedCommentThread(props: {

  return (
    <Col className="relative w-full items-stretch gap-3 pb-4">
-      <span
-        className="absolute top-5 left-4 -ml-px h-[calc(100%-2rem)] w-0.5 bg-gray-200"
-        aria-hidden="true"
+      <ParentFeedComment
+        key={parentComment.id}
+        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) => (
-        <FeedComment
-          key={comment.id}
-          indent={commentIdx != 0}
-          contract={contract}
-          comment={comment}
-          myTip={user ? tips[comment.id]?.[user.id] : undefined}
-          totalTip={sum(Object.values(tips[comment.id] ?? {}))}
-          showTip={true}
-          onReplyClick={onReplyClick}
-        />
-      ))}
+      {seeReplies &&
+        threadComments.map((comment, _commentIdx) => (
+          <FeedComment
+            key={comment.id}
+            contract={contract}
+            comment={comment}
+            myTip={user ? tips[comment.id]?.[user.id] : undefined}
+            totalTip={sum(Object.values(tips[comment.id] ?? {}))}
+            showTip={true}
+            onReplyClick={onReplyClick}
+          />
+        ))}
      {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 } =
-    props
-  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 { contract, comment, myTip, totalTip, showTip, onReplyClick } = props
+  const { text, content, userUsername, userAvatarUrl } = comment
  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',
-        indent ? 'ml-6' : '',
-        highlighted ? `-m-1.5 rounded bg-indigo-500/[0.2] px-2 py-4` : ''
+        'hover:bg-greyscale-1 ml-10 gap-2 transition-colors',
+        highlighted ? `-m-1.5 rounded bg-indigo-500/[0.2] p-1.5` : ''
      )}
    >
-      {/*draw a gray line from the comment to the left:*/}
-      {indent ? (
+      <Col className="-ml-3">
+        <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}
-      <Avatar size="sm" username={userUsername} avatarUrl={userAvatarUrl} />
-      <div className="ml-1.5 min-w-0 flex-1 pl-0.5 sm:ml-3">
-        <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>
+      </Col>
+      <Col className="w-full">
+        <FeedCommentHeader comment={comment} contract={contract} />
        <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
-              className="font-bold hover:underline"
+            <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)}
            >
-              Reply
-            </button>
+              <ReplyIcon className="h-5 w-5" />
+            </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>
+  )
+}
--- a/web/components/follow-button.tsx
+++ b/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)
-    return (
-      <Button size="sm" color="gray" className={clsx(className, 'invisible')}>
-        Follow
-      </Button>
-    )
+  if (!user || isFollowing === undefined) return <></>

  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
--- a/web/components/following-button.tsx
+++ b/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)
--- a/web/components/groups/edit-group-button.tsx
+++ b/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
-        className={clsx(
-          'btn-ghost cursor-pointer whitespace-nowrap rounded-md p-1 text-sm text-gray-700'
-        )}
+      <Button
+        size="sm"
+        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
-              htmlFor="edit"
+            <Button
+              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>
-            <label
-              htmlFor="edit"
-              className={'btn'}
+            </Button>
+            <Button
+              color="gray-white"
+              size="xs"
              onClick={() => updateOpen(false)}
            >
              Cancel
-            </label>
-            <label
-              className={clsx(
-                'btn',
-                saveDisabled ? 'btn-disabled' : 'btn-primary',
-                isSubmitting && 'loading'
-              )}
-              htmlFor="edit"
+            </Button>
+            <Button
+              color="green"
+              disabled={saveDisabled}
+              loading={isSubmitting}
              onClick={onSubmit}
            >
              Save
-            </label>
+            </Button>
          </div>
        </div>
      </Modal>
--- a/web/components/groups/group-overview.tsx
+++ b/web/components/groups/group-overview.tsx
@ -116,10 +116,7 @@ export function GroupPosts(props: { posts: Post[]; group: Group }) {
        </Col>
        <Col>
          {user && (
-            <Button
-              className="btn-md"
-              onClick={() => setShowCreatePost(!showCreatePost)}
-            >
+            <Button 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>
--- a/web/components/groups/groups-button.tsx
+++ b/web/components/groups/groups-button.tsx
@ -125,9 +125,9 @@ export function JoinOrLeaveGroupButton(props: {
  if (isMember) {
    return (
      <Button
-        size="xs"
-        color="gray-white"
-        className={`${className}  border-greyscale-4 border !border-solid`}
+        size="sm"
+        color="gray-outline"
+        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"
-      color="blue"
+      size="sm"
+      color="indigo"
      className={className}
      onClick={withTracking(onJoinGroup, 'join group')}
    >
--- a/web/components/numeric-bet-panel.tsx
+++ b/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
-          className={clsx(
-            'btn flex-1',
-            betDisabled ? 'btn-disabled' : 'btn-primary',
-            isSubmitting ? 'loading' : ''
-          )}
-          onClick={betDisabled ? undefined : submitBet}
+        <Button
+          disabled={betDisabled}
+          color="green"
+          loading={isSubmitting}
+          onClick={submitBet}
        >
-          {isSubmitting ? 'Submitting...' : 'Submit'}
-        </button>
+          Submit
+        </Button>
      )}

      {wasSubmitted && <div className="mt-4">Bet submitted!</div>}
--- a/web/components/post-card.tsx
+++ b/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="">
-          <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"
-              name={post.creatorName}
-              username={post.creatorUsername}
-            />
-            <span className="mx-1 text-gray-400">•</span>
-            <span className="text-gray-400">{fromNow(post.createdTime)}</span>
+      <Row className="flex grow justify-between">
+        <Col className="gap-2">
+          <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"
+                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="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">
+          <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">
+          <div className="font-small text-md break-words text-gray-500">
            {post.subtitle}
          </div>
-        </div>
-        <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>
+        </Col>
      </Row>
      {onPostClick ? (
        <a
--- a/web/components/referrals-button.tsx
+++ b/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
-                              ? 'hidden'
-                              : 'btn btn-primary btn-md my-2 w-24 normal-case'
+                            referredBy.length === 0 ? 'hidden' : 'my-2 w-24'
                          }
                          disabled={referredBy.length === 0 || isSubmitting}
                          onClick={() => {
@ -114,7 +113,7 @@ function ReferralsDialog(props: {
                          }}
                        >
                          Save
-                        </button>
+                        </Button>
                      </Row>
                      <span className={'text-warning'}>
                        {referredBy.length > 0 &&
--- a/web/components/resolution-panel.tsx
+++ b/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>
--- a/web/components/sell-button.tsx
+++ b/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 />
-}
--- a/web/components/user-page.tsx
+++ b/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}
--- a/web/components/yes-no-selector.tsx
+++ b/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>
--- a/web/hooks/use-global-config.ts
+++ b/web/hooks/use-global-config.ts
@ -7,6 +7,6 @@ export const useGlobalConfig = () => {

  useEffect(() => {
    listenForGlobalConfig(setGlobalConfig)
-  }, [globalConfig])
+  }, [])
  return globalConfig
 }
--- a/web/pages/[username]/[contractSlug].tsx
+++ b/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}
        />

-        <ContractTabs
-          contract={contract}
-          bets={bets}
-          userBets={userBets}
-          comments={comments}
-        />
+        <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" />
--- a/web/pages/admin.tsx
+++ b/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}>
-        Export emails to CSV
-      </button>
+      <Button onClick={exportCsv}>Export emails to CSV</Button>
    </>
  )
 }
--- a/web/pages/charity/[charitySlug].tsx
+++ b/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(
-          'btn btn-link capitalize-none my-3 normal-case text-indigo-700',
-          hideExpander && 'invisible'
-        )}
+        className={clsx('my-3', 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(
-              'btn w-full',
-              donateDisabled ? 'btn-disabled' : 'btn-primary',
-              isSubmitting && 'loading'
-            )}
+            color="green"
+            className="w-full"
+            disabled={donateDisabled}
+            loading={isSubmitting}
          >
            Donate
-          </button>
+          </Button>
        )}
      </form>
    </div>
--- a/web/pages/create.tsx
+++ b/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(
-            'btn btn-primary normal-case',
-            isSubmitting && 'loading disabled'
-          )}
-          disabled={isSubmitting || !isValid || upload.isLoading}
+          color="green"
+          loading={isSubmitting}
+          disabled={!isValid || upload.isLoading}
          onClick={(e) => {
            e.preventDefault()
            submit()
          }}
        >
          {isSubmitting ? 'Creating...' : 'Create question'}
-        </button>
+        </Button>
      </Row>

      <Spacer h={6} />
--- a/web/pages/group/[...slugs]/index.tsx
+++ b/web/pages/group/[...slugs]/index.tsx
@ -386,14 +386,9 @@ function JoinGroupButton(props: {

  return (
    <div>
-      <button
-        onClick={follow}
-        className={
-          'btn-md btn-outline btn w-full whitespace-nowrap normal-case'
-        }
-      >
+      <Button onClick={follow} color="blue">
        Follow
-      </button>
+      </Button>
    </div>
  )
 }
--- a/web/pages/profile.tsx
+++ b/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
--- a/web/pages/referrals.tsx
+++ b/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'}
          />

--- a/web/pages/twitch.tsx
+++ b/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 ? (
-            <LoadingIndicator spinnerClassName="!h-5 !w-5 border-white !border-2" />
-          ) : (
-            'Remove bot from channel'
-          )}
+          Remove bot from channel
        </Button>
      ) : (
        <Button
          color="green"
          onClick={updateBotConnected(true)}
-          className={clsx(loading && '!btn-disabled', 'border-none')}
+          loading={loading}
+          className="border-none"
        >
-          {loading ? (
-            <LoadingIndicator spinnerClassName="!h-5 !w-5 border-white !border-2" />
-          ) : (
-            'Add bot to your channel'
-          )}
+          Add bot to your channel
        </Button>
      )}
    </>
--- a/web/public/custom-components/curve.tsx
+++ b/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>
+  )
+}