Tweak design of individual trades

This commit is contained in:
Austin Chen 2022-01-02 23:35:33 -08:00
parent 3cd72bcc32
commit ac17e3f0a5

View File

@ -6,6 +6,7 @@ import { Bet } from '../lib/firebase/bets'
import dayjs from 'dayjs' import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime' import relativeTime from 'dayjs/plugin/relativeTime'
import { Contract } from '../lib/firebase/contracts' import { Contract } from '../lib/firebase/contracts'
import { OutcomeLabel } from './outcome-label'
dayjs.extend(relativeTime) dayjs.extend(relativeTime)
const activity = [ const activity = [
@ -96,7 +97,7 @@ function FeedBet(props: { activityItem: any }) {
<> <>
<div> <div>
<div className="relative px-1"> <div className="relative px-1">
<div className="h-8 w-8 bg-gray-100 rounded-full ring-8 ring-white flex items-center justify-center"> <div className="h-8 w-8 bg-gray-200 rounded-full ring-8 ring-gray-50 flex items-center justify-center">
<UserCircleIcon <UserCircleIcon
className="h-5 w-5 text-gray-500" className="h-5 w-5 text-gray-500"
aria-hidden="true" aria-hidden="true"
@ -107,7 +108,7 @@ function FeedBet(props: { activityItem: any }) {
<div className="min-w-0 flex-1 py-1.5"> <div className="min-w-0 flex-1 py-1.5">
<div className="text-sm text-gray-500"> <div className="text-sm text-gray-500">
<span className="text-gray-900">Someone</span> placed M$ {amount} on{' '} <span className="text-gray-900">Someone</span> placed M$ {amount} on{' '}
{outcome}{' '} <OutcomeLabel outcome={outcome} />{' '}
<span <span
className="whitespace-nowrap" className="whitespace-nowrap"
title={dayjs(createdTime).format('MMM D, h:mma')} title={dayjs(createdTime).format('MMM D, h:mma')}
@ -175,6 +176,7 @@ function FeedTags(props: { activityItem: any }) {
function toFeedBet(bet: Bet) { function toFeedBet(bet: Bet) {
return { return {
id: bet.id, id: bet.id,
userId: bet.userId,
type: 'bet', type: 'bet',
amount: bet.amount, amount: bet.amount,
outcome: bet.outcome, outcome: bet.outcome,
@ -193,6 +195,8 @@ export function ContractFeed(props: { contract: Contract }) {
// const allItems = [...bets.map(toFeedBet), ...activity] // const allItems = [...bets.map(toFeedBet), ...activity]
const allItems = bets.map(toFeedBet) const allItems = bets.map(toFeedBet)
// TODO: aggregate bets across each day window
return ( return (
<div className="flow-root"> <div className="flow-root">
<ul role="list" className="-mb-8"> <ul role="list" className="-mb-8">