Tweaks

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)}
     >
       <Title
-        className={clsx('!mt-0 text-neutral', title ? '!text-xl' : '')}
+        className={clsx('!mt-0', title ? '!text-xl' : '!text-neutral')}
         text={panelTitle}
       />
 
-      <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)}
       />

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'
 

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

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

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>

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" />