Change styles on contract tooltips to be more like portfolio graph (#966)

web/components/charts/contract/binary.tsx

@@ -34,10 +34,10 @@ const BinaryChartTooltip = (props: TooltipProps<HistoryPoint<Bet>>) => {
   const { x, y, datum } = p
   const [start, end] = xScale.domain()
   return (
-    <Row className="items-center gap-2 text-sm">
+    <Row className="items-center gap-2">
       {datum && <Avatar size="xs" avatarUrl={datum.userAvatarUrl} />}
-      <strong>{formatPct(y)}</strong>
-      <span>{formatDateInRange(x, start, end)}</span>
+      <span className="font-semibold">{formatDateInRange(x, start, end)}</span>
+      <span className="text-greyscale-6">{formatPct(y)}</span>
     </Row>
   )
 }

web/components/charts/contract/choice.tsx

@@ -9,7 +9,6 @@ import { getOutcomeProbability } from 'common/calculate'
 import { useIsMobile } from 'web/hooks/use-is-mobile'
 import { DAY_MS } from 'common/util/time'
 import {
-  Legend,
   TooltipProps,
   MARGIN_X,
   MARGIN_Y,
@@ -121,6 +120,29 @@ const getBetPoints = (answers: Answer[], bets: Bet[]) => {
   return points
 }
 
+type LegendItem = { color: string; label: string; value?: string }
+const Legend = (props: { className?: string; items: LegendItem[] }) => {
+  const { items, className } = props
+  return (
+    <ol className={className}>
+      {items.map((item) => (
+        <li key={item.label} className="flex flex-row justify-between gap-4">
+          <Row className="items-center gap-2 overflow-hidden">
+            <span
+              className="h-4 w-4 shrink-0"
+              style={{ backgroundColor: item.color }}
+            ></span>
+            <span className="text-semibold overflow-hidden text-ellipsis">
+              {item.label}
+            </span>
+          </Row>
+          <span className="text-greyscale-6">{item.value}</span>
+        </li>
+      ))}
+    </ol>
+  )
+}
+
 export const ChoiceContractChart = (props: {
   contract: FreeResponseContract | MultipleChoiceContract
   bets: Bet[]
@@ -173,13 +195,15 @@ export const ChoiceContractChart = (props: {
         (item) => -item.p
       ).slice(0, 10)
       return (
-        <div>
+        <>
           <Row className="items-center gap-2">
             {datum && <Avatar size="xxs" avatarUrl={datum.userAvatarUrl} />}
-            <span>{formatDateInRange(x, start, end)}</span>
+            <span className="text-semibold text-base">
+              {formatDateInRange(x, start, end)}
+            </span>
           </Row>
-          <Legend className="max-w-xs text-sm" items={legendItems} />
-        </div>
+          <Legend className="max-w-xs" items={legendItems} />
+        </>
       )
     },
     [answers]

web/components/charts/contract/numeric.tsx

@@ -24,9 +24,10 @@ const getNumericChartData = (contract: NumericContract) => {
 const NumericChartTooltip = (props: TooltipProps<DistributionPoint>) => {
   const { x, y } = props.p
   return (
-    <span className="text-sm">
-      <strong>{formatPct(y, 2)}</strong> {formatLargeNumber(x)}
-    </span>
+    <>
+      <span className="text-semibold">{formatLargeNumber(x)}</span>
+      <span className="text-greyscale-6">{formatPct(y, 2)}</span>
+    </>
   )
 }
 

web/components/charts/contract/pseudo-numeric.tsx

@@ -46,10 +46,10 @@ const PseudoNumericChartTooltip = (props: TooltipProps<HistoryPoint<Bet>>) => {
   const { x, y, datum } = p
   const [start, end] = xScale.domain()
   return (
-    <Row className="items-center gap-2 text-sm">
+    <Row className="items-center gap-2">
       {datum && <Avatar size="xs" avatarUrl={datum.userAvatarUrl} />}
-      <strong>{formatLargeNumber(y)}</strong>
-      <span>{formatDateInRange(x, start, end)}</span>
+      <span className="font-semibold">{formatDateInRange(x, start, end)}</span>
+      <span className="text-greyscale-6">{formatLargeNumber(y)}</span>
     </Row>
   )
 }

web/components/charts/helpers.tsx

@@ -16,7 +16,6 @@ import dayjs from 'dayjs'
 import clsx from 'clsx'
 
 import { Contract } from 'common/contract'
-import { Row } from 'web/components/layout/row'
 
 export type Point<X, Y, T = unknown> = { x: X; y: Y; datum?: T }
 export type XScale<P> = P extends Point<infer X, infer _> ? AxisScale<X> : never
@@ -256,7 +255,7 @@ export const TooltipContainer = (props: {
     <div
       className={clsx(
         className,
-        'pointer-events-none absolute z-10 whitespace-pre rounded border-2 border-black bg-white/90 p-2'
+        'pointer-events-none absolute z-10 whitespace-pre rounded bg-white/80 p-2 px-4 py-2 text-xs sm:text-sm'
       )}
       style={{ margin: MARGIN_STYLE, ...pos }}
     >
@@ -265,27 +264,6 @@ export const TooltipContainer = (props: {
   )
 }
 
-export type LegendItem = { color: string; label: string; value?: string }
-export const Legend = (props: { className?: string; items: LegendItem[] }) => {
-  const { items, className } = props
-  return (
-    <ol className={className}>
-      {items.map((item) => (
-        <li key={item.label} className="flex flex-row justify-between">
-          <Row className="mr-2 items-center overflow-hidden">
-            <span
-              className="mr-2 h-4 w-4 shrink-0"
-              style={{ backgroundColor: item.color }}
-            ></span>
-            <span className="overflow-hidden text-ellipsis">{item.label}</span>
-          </Row>
-          {item.value}
-        </li>
-      ))}
-    </ol>
-  )
-}
-
 export const getDateRange = (contract: Contract) => {
   const { createdTime, closeTime, resolutionTime } = contract
   const isClosed = !!closeTime && Date.now() > closeTime