merge

web/components/add-funds-button.tsx

@@ -18,11 +18,11 @@ export function AddFundsButton(props: { className?: string }) {
       <label
         htmlFor="add-funds"
         className={clsx(
-          'btn btn-xs normal-case modal-button bg-gradient-to-r from-teal-500 to-green-500 hover:from-teal-600 hover:to-green-600 font-normal border-none',
+          'btn btn-xs btn-ghost normal-case modal-button font-normal border-none',
           className
         )}
       >
-        Add funds
+        (add funds)
       </label>
       <input type="checkbox" id="add-funds" className="modal-toggle" />
 

web/components/amount-input.tsx

@@ -57,23 +57,22 @@ export function AmountInput(props: {
           onChange={(e) => onAmountChange(e.target.value)}
         />
       </label>
-      {user && (
-        <Row className="text-sm text-gray-500 justify-between mt-3 gap-4 items-end">
-          {error ? (
-            <div className="font-medium tracking-wide text-red-500 text-xs whitespace-nowrap mr-auto self-center">
-              {error}
+      {user &&
+        (error ? (
+          <div className="font-medium tracking-wide text-red-500 text-xs whitespace-nowrap mr-auto self-center mt-4">
+            {error}
+          </div>
+        ) : (
+          <Col className="text-sm mt-3">
+            <div className="text-gray-500 whitespace-nowrap mb-2">
+              Remaining balance
             </div>
-          ) : (
-            <Col>
-              <div className="whitespace-nowrap">Remaining balance</div>
-              <div className="text-neutral mt-1">
-                {formatMoney(Math.floor(remainingBalance))}
-              </div>
-            </Col>
-          )}
-          {user.balance !== 1000 && <AddFundsButton className="mt-1" />}
-        </Row>
-      )}
+            <Row className="gap-4">
+              <div>{formatMoney(Math.floor(remainingBalance))}</div>
+              {user.balance !== 1000 && <AddFundsButton />}
+            </Row>
+          </Col>
+        ))}
     </Col>
   )
 }

web/components/contract-card.tsx

@@ -12,6 +12,7 @@ import {
 import { Col } from './layout/col'
 import { parseTags } from '../lib/util/parse'
 import dayjs from 'dayjs'
+import { TrendingUpIcon } from '@heroicons/react/solid'
 
 export function ContractCard(props: {
   contract: Contract
@@ -113,7 +114,8 @@ export function AbbrContractDetails(props: {
         <div>•</div>
         {showHotVolume ? (
           <div className="whitespace-nowrap">
-            {formatMoney(volume24Hours)} 24h vol
+            <TrendingUpIcon className="h-5 w-5 text-gray-500 inline" />{' '}
+            {formatMoney(volume24Hours)}
           </div>
         ) : (
           <div className="whitespace-nowrap">{formatMoney(truePool)} pool</div>

web/components/contract-feed.tsx

@@ -86,6 +86,8 @@ function FeedBet(props: { activityItem: any }) {
   const { id, contractId, amount, outcome, createdTime } = activityItem
   const user = useUser()
   const isCreator = user?.id == activityItem.userId
+  // The creator can comment if the bet was posted in the last hour
+  const canComment = isCreator && Date.now() - createdTime < 60 * 60 * 1000
 
   const [comment, setComment] = useState('')
   async function submitComment() {
@@ -106,7 +108,7 @@ function FeedBet(props: { activityItem: any }) {
           <span>{isCreator ? 'You' : 'A trader'}</span> placed{' '}
           {formatMoney(amount)} on <OutcomeLabel outcome={outcome} />{' '}
           <Timestamp time={createdTime} />
-          {isCreator && (
+          {canComment && (
             // Allow user to comment in an textarea if they are the creator
             <div className="mt-2">
               <textarea

web/components/linkify.tsx

@@ -31,7 +31,7 @@ export function Linkify(props: { text: string; gray?: boolean }) {
     )
   })
   return (
-    <span>
+    <span className="break-words">
       {text.split(regex).map((part, i) => (
         <Fragment key={i}>
           {part}

web/components/nav-bar.tsx

@@ -35,16 +35,18 @@ export function NavBar(props: {
         <Row className="items-center gap-6 sm:gap-8 md:ml-16 lg:ml-40">
           {children}
 
-          <Link href="/about">
-            <a
-              className={clsx(
-                'text-base hidden md:block whitespace-nowrap',
-                themeClasses
-              )}
-            >
-              About
-            </a>
-          </Link>
+          {!user && (
+            <Link href="/about">
+              <a
+                className={clsx(
+                  'text-base hidden md:block whitespace-nowrap',
+                  themeClasses
+                )}
+              >
+                About
+              </a>
+            </Link>
+          )}
 
           {!isLandingPage && (
             <Link href="/markets">

web/components/page.tsx

@@ -10,7 +10,7 @@ export function Page(props: { wide?: boolean; children?: any }) {
 
       <div
         className={clsx(
-          'w-full px-4 pb-8 mx-auto',
+          'w-full px-2 pb-8 mx-auto',
           wide ? 'max-w-6xl' : 'max-w-4xl'
         )}
       >

web/components/profile-menu.tsx

@@ -60,6 +60,10 @@ function getNavigationOptions(user: User, options: { mobile: boolean }) {
       href: 'https://discord.gg/eHQBNBqXuh',
     },
     ...(mobile ? [{ name: 'About', href: '/about' }] : []),
+    {
+      name: 'About',
+      href: '/about',
+    },
     {
       name: 'Sign out',
       href: '#',

web/pages/activity.tsx

@@ -10,11 +10,7 @@ import { Col } from '../components/layout/col'
 
 function FeedCard(props: { contract: Contract }) {
   const { contract } = props
-  return (
-    <div className="card bg-white shadow-md rounded-lg divide-y divide-gray-200 py-6 px-4 max-w-3xl">
-      <ContractFeed contract={contract} feedType="activity" />
-    </div>
-  )
+  return <ContractFeed contract={contract} feedType="activity" />
 }
 
 // This does NOT include comment times, since those aren't part of the contract atm.
@@ -80,10 +76,12 @@ export function ActivityFeed(props: {
 
   return contracts.length > 0 ? (
     <>
-      <Title text="Recent Activity" />
-      <Col className="gap-4">
+      <Title className="mb-0" text="Recent Activity" />
+      <Col className="divide-gray-300 divide-y">
         {activeContracts.map((contract) => (
-          <FeedCard contract={contract} />
+          <div className="py-6 px-1 hover:bg-gray-100">
+            <FeedCard contract={contract} />
+          </div>
         ))}
       </Col>
     </>

web/pages/create.tsx

@@ -31,7 +31,7 @@ export default function NewContract() {
   const [question, setQuestion] = useState('')
   const [description, setDescription] = useState('')
 
-  const [ante, setAnte] = useState<number | undefined>(0)
+  const [ante, setAnte] = useState<number | undefined>(undefined)
   const [anteError, setAnteError] = useState<string | undefined>()
   const [closeDate, setCloseDate] = useState('')
 
@@ -50,7 +50,8 @@ export default function NewContract() {
     question.length > 0 &&
     (ante === undefined || (ante >= 0 && ante <= remainingBalance)) &&
     // If set, closeTime must be in the future
-    (!closeTime || closeTime > Date.now())
+    closeTime &&
+    closeTime > Date.now()
 
   async function submit() {
     // TODO: Tell users why their contract is invalid
@@ -74,7 +75,8 @@ export default function NewContract() {
     await router.push(contractPath(result.contract as Contract))
   }
 
-  const descriptionPlaceholder = `e.g. This market will resolve to “Yes” if, by June 2, 2021, 11:59:59 PM ET, Paxlovid (also known under PF-07321332)...`
+  // const descriptionPlaceholder = `e.g. This market will resolve to “Yes” if, by June 2, 2021, 11:59:59 PM ET, Paxlovid (also known under PF-07321332)...`
+  const descriptionPlaceholder = `(Optional) Provide more detail on how you will resolve this market.`
 
   if (!creator) return <></>
 
@@ -82,7 +84,7 @@ export default function NewContract() {
     <Page>
       <Title text="Create a new prediction market" />
 
-      <div className="w-full max-w-3xl bg-gray-100 rounded-lg shadow-md px-6 py-4">
+      <div className="w-full max-w-4xl bg-gray-100 rounded-lg shadow-md px-6 py-4">
         {/* Create a Tailwind form that takes in all the fields needed for a new contract */}
         {/* When the form is submitted, create a new contract in the database */}
         <form>
@@ -111,7 +113,7 @@ export default function NewContract() {
                 <input
                   type="number"
                   value={initialProb}
-                  className="input input-bordered input-md text-primary text-3xl w-24"
+                  className="input input-bordered input-md text-3xl w-24"
                   disabled={isSubmitting}
                   min={1}
                   max={99}
@@ -134,6 +136,28 @@ export default function NewContract() {
 
           <Spacer h={4} />
 
+          <div className="form-control items-start mb-1">
+            <label className="label">
+              <span className="mb-1">Close date</span>
+            </label>
+            <input
+              type="date"
+              className="input input-bordered"
+              onClick={(e) => e.stopPropagation()}
+              onChange={(e) => setCloseDate(e.target.value || '')}
+              min={new Date().toISOString().split('T')[0]}
+              disabled={isSubmitting}
+              value={closeDate}
+            />
+          </div>
+          <label>
+            <span className="label-text text-gray-500 ml-1">
+              No trading after this date
+            </span>
+          </label>
+
+          <Spacer h={4} />
+
           <div className="form-control">
             <label className="label">
               <span className="mb-1">Description</span>
@@ -155,7 +179,6 @@ export default function NewContract() {
                 <span className="mb-1">Subsidize your market</span>
               </label>
               <AmountInput
-                className="items-start"
                 amount={ante}
                 onChange={setAnte}
                 error={anteError}
@@ -163,29 +186,6 @@ export default function NewContract() {
                 disabled={isSubmitting}
               />
             </div>
-
-            <Spacer h={4} />
-
-            <div className="form-control items-start mb-1">
-              <label className="label">
-                <span className="mb-1">Close date</span>
-              </label>
-              <input
-                type="date"
-                className="input input-bordered"
-                onClick={(e) => e.stopPropagation()}
-                onChange={(e) => setCloseDate(e.target.value || '')}
-                min={new Date().toISOString().split('T')[0]}
-                disabled={isSubmitting}
-                value={closeDate}
-              />
-            </div>
-            <label>
-              <span className="label-text text-gray-500 ml-1">
-                No trades allowed after this date
-                {/* {closeDate ? formattedCloseTime : 'this date'} */}
-              </span>
-            </label>
           </AdvancedPanel>
 
           <Spacer h={4} />