diff --git a/web/components/bet-panel.tsx b/web/components/bet-panel.tsx index d8ed5667..dc5a9bb7 100644 --- a/web/components/bet-panel.tsx +++ b/web/components/bet-panel.tsx @@ -128,7 +128,7 @@ export function BetPanel(props: { const currentReturn = betAmount ? (currentPayout - betAmount) / betAmount : 0 const currentReturnPercent = (currentReturn * 100).toFixed() + '%' - const panelTitle = title ?? `Buy ${betChoice || 'shares'}` + const panelTitle = title ?? 'Place a trade' if (title) { focusAmountInput() } @@ -138,13 +138,13 @@ export function BetPanel(props: { className={clsx('bg-gray-100 shadow-md px-8 py-6 rounded-md', className)} > - <div className="mt-2 mb-1 text-sm text-gray-500">Outcome</div> + {/* <div className="mt-2 mb-1 text-sm text-gray-500">Outcome</div> */} <YesNoSelector - className="my-2" + className="mb-4" selected={betChoice} onSelect={(choice) => onBetChoice(choice)} /> diff --git a/web/components/contract-card.tsx b/web/components/contract-card.tsx index c1390cac..9f91d272 100644 --- a/web/components/contract-card.tsx +++ b/web/components/contract-card.tsx @@ -13,7 +13,6 @@ import { parseTags } from '../../common/util/parse' import dayjs from 'dayjs' import { TrendingUpIcon } from '@heroicons/react/solid' import { DateTimeTooltip } from './datetime-tooltip' -import { CompactTagsList } from './tags-list' import { ClockIcon } from '@heroicons/react/outline' import { fromNow } from '../lib/util/time' diff --git a/web/components/follow-fold-button.tsx b/web/components/follow-fold-button.tsx index 97e29deb..62a68e9a 100644 --- a/web/components/follow-fold-button.tsx +++ b/web/components/follow-fold-button.tsx @@ -28,10 +28,7 @@ export function FollowFoldButton(props: { fold: Fold; className?: string }) { if (following) { return ( <button - className={clsx( - 'btn btn-primary btn-sm hover:bg-red-500 hover:border-red-500', - className - )} + className={clsx('btn btn-outline btn-sm', className)} onClick={onUnfollow} > Following diff --git a/web/hooks/use-fold.ts b/web/hooks/use-fold.ts index 8caa58d2..310d6c54 100644 --- a/web/hooks/use-fold.ts +++ b/web/hooks/use-fold.ts @@ -7,11 +7,11 @@ import { listenForFollow, } from '../lib/firebase/folds' -export const useFold = (foldId: string) => { +export const useFold = (foldId: string | undefined) => { const [fold, setFold] = useState<Fold | null | undefined>() useEffect(() => { - return listenForFold(foldId, setFold) + if (foldId) return listenForFold(foldId, setFold) }, [foldId]) return fold diff --git a/web/pages/fold/[...slugs]/index.tsx b/web/pages/fold/[...slugs]/index.tsx index 888ffd2d..a6f95b76 100644 --- a/web/pages/fold/[...slugs]/index.tsx +++ b/web/pages/fold/[...slugs]/index.tsx @@ -139,7 +139,7 @@ export default function FoldPage(props: { const page = (slugs[1] ?? 'activity') as typeof foldSubpages[number] - const fold = useFold(props.fold?.id ?? '') ?? props.fold + const fold = useFold(props.fold?.id) ?? props.fold const { query, setQuery, sort, setSort } = useQueryAndSortParams({ defaultSort: 'most-traded', @@ -237,7 +237,7 @@ export default function FoldPage(props: { /> )} </Col> - <Col className="hidden md:flex max-w-xs gap-10"> + <Col className="hidden md:flex max-w-xs w-full gap-10"> <FoldOverview fold={fold} curator={curator} /> <FoldLeaderboards topTraders={topTraders} @@ -268,7 +268,7 @@ function FoldOverview(props: { fold: Fold; curator: User }) { const { about, tags } = fold return ( - <Col className="max-w-sm"> + <Col> <div className="px-4 py-3 bg-indigo-500 text-white text-sm rounded-t"> About community </div> diff --git a/web/pages/folds.tsx b/web/pages/folds.tsx index eeda8435..f97880a0 100644 --- a/web/pages/folds.tsx +++ b/web/pages/folds.tsx @@ -93,7 +93,7 @@ function FoldCard(props: { fold: Fold; curator: User | undefined }) { return ( <Col key={fold.id} - className="bg-white p-4 rounded-xl gap-1 shadow-md relative" + className="bg-white hover:bg-gray-100 p-4 rounded-xl gap-1 shadow-md relative" > <Link href={foldPath(fold)}> <a className="absolute left-0 right-0 top-0 bottom-0" />