From ebb1bc7359c42b516c9c814b908132931c62b2fc Mon Sep 17 00:00:00 2001 From: jahooma Date: Tue, 11 Jan 2022 14:57:44 -0600 Subject: [PATCH 01/13] Fix feed layout on mobile, adjust spacing, max width. --- web/components/contract-feed.tsx | 15 ++++++++++----- web/pages/activity.tsx | 18 ++++++++---------- web/pages/create.tsx | 3 +-- 3 files changed, 19 insertions(+), 17 deletions(-) diff --git a/web/components/contract-feed.tsx b/web/components/contract-feed.tsx index c6f31d1a..584b8e45 100644 --- a/web/components/contract-feed.tsx +++ b/web/components/contract-feed.tsx @@ -29,8 +29,8 @@ import { createComment } from '../lib/firebase/comments' import { useComments } from '../hooks/use-comments' import { formatMoney } from '../lib/util/format' import { ResolutionOrChance } from './contract-card' -import Link from 'next/link' import { SiteLink } from './site-link' +import { Col } from './layout/col' dayjs.extend(relativeTime) function FeedComment(props: { activityItem: any }) { @@ -149,6 +149,8 @@ export function ContractDescription(props: { setDescription(editStatement()) } + if (!isCreator && !contract.description.trim()) return null + return (
@@ -213,12 +215,15 @@ function FeedQuestion(props: { contract: Contract }) {
-
+
{contract.creatorName} asked{' '}
- - + + {contract.question} - +
diff --git a/web/pages/activity.tsx b/web/pages/activity.tsx index 4feb494c..24340ef0 100644 --- a/web/pages/activity.tsx +++ b/web/pages/activity.tsx @@ -1,17 +1,17 @@ import _ from 'lodash' import { ContractFeed } from '../components/contract-feed' -import { Row } from '../components/layout/row' import { Page } from '../components/page' import { Title } from '../components/title' import { useRecentComments } from '../hooks/use-comments' import { useContracts } from '../hooks/use-contracts' import { Contract } from '../lib/firebase/contracts' import { Comment } from '../lib/firebase/comments' +import { Col } from '../components/layout/col' function FeedCard(props: { contract: Contract }) { const { contract } = props return ( -
+
) @@ -74,16 +74,14 @@ export function ActivityFeed() { const recentComments = useRecentComments() || [] // TODO: Handle static props correctly? const activeContracts = findActiveContracts(contracts, recentComments) - return contracts ? ( + return contracts.length > 0 ? ( <> - <Row className="gap-4"> - <div> - {activeContracts.map((contract) => ( - <FeedCard contract={contract} /> - ))} - </div> - </Row> + <Col className="gap-4"> + {activeContracts.map((contract) => ( + <FeedCard contract={contract} /> + ))} + </Col> </> ) : ( <></> diff --git a/web/pages/create.tsx b/web/pages/create.tsx index 7e00191b..13c1a98d 100644 --- a/web/pages/create.tsx +++ b/web/pages/create.tsx @@ -4,7 +4,6 @@ import clsx from 'clsx' import dayjs from 'dayjs' import Textarea from 'react-expanding-textarea' -import { CreatorContractsList } from '../components/contracts-list' import { Spacer } from '../components/layout/spacer' import { Title } from '../components/title' import { useUser } from '../hooks/use-user' @@ -84,7 +83,7 @@ export default function NewContract() { <Page> <Title text="Create a new prediction market" /> - <div className="w-full bg-gray-100 rounded-lg shadow-md px-6 py-4"> + <div className="w-full max-w-3xl 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> From 19c0f83b85d0da0d7ce8c2ee47fca5a6121c3a49 Mon Sep 17 00:00:00 2001 From: jahooma <jahooma@gmail.com> Date: Tue, 11 Jan 2022 21:56:11 -0600 Subject: [PATCH 02/13] Activity feed on home page! All markets navbar option. --- web/components/nav-bar.tsx | 35 ++++++++++++++++++++--------- web/components/profile-menu.tsx | 8 +++++-- web/pages/activity.tsx | 12 ++++++---- web/pages/create.tsx | 2 +- web/pages/index.tsx | 40 +++++++++++++++++++++++++-------- web/pages/landing-page.tsx | 9 +------- web/pages/markets.tsx | 38 ++++++------------------------- 7 files changed, 78 insertions(+), 66 deletions(-) diff --git a/web/components/nav-bar.tsx b/web/components/nav-bar.tsx index cf2a20d3..210a1814 100644 --- a/web/components/nav-bar.tsx +++ b/web/components/nav-bar.tsx @@ -35,6 +35,30 @@ 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> + + {!isLandingPage && ( + <Link href="/markets"> + <a + className={clsx( + 'text-base hidden md:block whitespace-nowrap', + themeClasses + )} + > + All markets + </a> + </Link> + )} + {user ? ( <SignedInHeaders user={user} themeClasses={themeClasses} /> ) : ( @@ -51,17 +75,6 @@ function SignedInHeaders(props: { user: User; themeClasses?: string }) { return ( <> - <Link href="/about"> - <a - className={clsx( - 'text-base hidden md:block whitespace-nowrap', - themeClasses - )} - > - About - </a> - </Link> - <Link href="/create"> <a className={clsx( diff --git a/web/components/profile-menu.tsx b/web/components/profile-menu.tsx index d6c54e47..2ceb18e6 100644 --- a/web/components/profile-menu.tsx +++ b/web/components/profile-menu.tsx @@ -16,7 +16,7 @@ export function ProfileMenu(props: { user: User }) { /> <MenuButton - className="md:hidden" + className="md:hidden mr-2" menuItems={getNavigationOptions(user, { mobile: true })} buttonContent={<ProfileSummary user={user} />} /> @@ -33,7 +33,10 @@ function getNavigationOptions(user: User, options: { mobile: boolean }) { }, ...(mobile ? [ - { name: 'About', href: '/about' }, + { + name: 'All markets', + href: '/markets', + }, { name: 'Create a market', href: '/create', @@ -56,6 +59,7 @@ function getNavigationOptions(user: User, options: { mobile: boolean }) { name: 'Discord', href: 'https://discord.gg/eHQBNBqXuh', }, + ...(mobile ? [{ name: 'About', href: '/about' }] : []), { name: 'Sign out', href: '#', diff --git a/web/pages/activity.tsx b/web/pages/activity.tsx index 24340ef0..136b1425 100644 --- a/web/pages/activity.tsx +++ b/web/pages/activity.tsx @@ -69,11 +69,15 @@ function findActiveContracts( return contracts } -export function ActivityFeed() { - const contracts = useContracts() || [] - const recentComments = useRecentComments() || [] +export function ActivityFeed(props: { + contracts: Contract[] + recentComments: Comment[] +}) { + const contracts = useContracts() ?? props.contracts + const recentComments = useRecentComments() ?? props.recentComments // TODO: Handle static props correctly? const activeContracts = findActiveContracts(contracts, recentComments) + return contracts.length > 0 ? ( <> <Title text="Recent Activity" /> @@ -91,7 +95,7 @@ export function ActivityFeed() { export default function ActivityPage() { return ( <Page> - <ActivityFeed /> + <ActivityFeed contracts={[]} recentComments={[]} /> </Page> ) } diff --git a/web/pages/create.tsx b/web/pages/create.tsx index 13c1a98d..f0bab61a 100644 --- a/web/pages/create.tsx +++ b/web/pages/create.tsx @@ -212,7 +212,7 @@ export default function NewContract() { <Spacer h={6} /> - <ActivityFeed /> + <ActivityFeed contracts={[]} recentComments={[]} /> </Page> ) } diff --git a/web/pages/index.tsx b/web/pages/index.tsx index 80f9a7d3..a641b6b9 100644 --- a/web/pages/index.tsx +++ b/web/pages/index.tsx @@ -1,41 +1,63 @@ import React from 'react' import _ from 'lodash' import { useUser } from '../hooks/use-user' -import Markets from './markets' -import LandingPage from './landing-page' import { Contract, getHotContracts, listAllContracts, } from '../lib/firebase/contracts' +import LandingPage from './landing-page' +import { ContractsGrid } from '../components/contracts-list' +import { Spacer } from '../components/layout/spacer' +import { Page } from '../components/page' +import { Title } from '../components/title' +import { ActivityFeed } from './activity' +import { getRecentComments, Comment } from '../lib/firebase/comments' export async function getStaticProps() { - const [contracts, hotContracts] = await Promise.all([ + const [contracts, hotContracts, recentComments] = await Promise.all([ listAllContracts().catch((_) => []), getHotContracts().catch(() => []), + getRecentComments().catch(() => []), ]) return { props: { contracts, hotContracts, + recentComments, }, revalidate: 60, // regenerate after a minute } } -const Home = (props: { contracts: Contract[]; hotContracts: Contract[] }) => { +const Home = (props: { + contracts: Contract[] + hotContracts: Contract[] + recentComments: Comment[] +}) => { const user = useUser() if (user === undefined) return <></> - const { contracts, hotContracts } = props + const { contracts, hotContracts, recentComments } = props - return user ? ( - <Markets contracts={contracts} hotContracts={hotContracts} /> - ) : ( - <LandingPage hotContracts={hotContracts} /> + if (user === null) { + return <LandingPage hotContracts={hotContracts} /> + } + + return ( + <Page> + <div className="w-full bg-indigo-50 border-2 border-indigo-100 p-6 rounded-lg shadow-md"> + <Title className="mt-0" text="🔥 Markets" /> + <ContractsGrid contracts={hotContracts} showHotVolume /> + </div> + + <Spacer h={10} /> + + <ActivityFeed contracts={contracts} recentComments={recentComments} /> + </Page> ) } diff --git a/web/pages/landing-page.tsx b/web/pages/landing-page.tsx index f3379576..12f2e675 100644 --- a/web/pages/landing-page.tsx +++ b/web/pages/landing-page.tsx @@ -34,14 +34,7 @@ const scrollToAbout = () => { function Hero() { return ( <div className="overflow-hidden h-screen bg-world-trading bg-cover bg-gray-900 bg-center lg:bg-left"> - <NavBar isLandingPage darkBackground> - <div - className="text-base font-medium text-white ml-8 cursor-pointer hover:underline hover:decoration-teal-500 hover:decoration-2" - onClick={scrollToAbout} - > - About - </div> - </NavBar> + <NavBar isLandingPage darkBackground /> <main> <div className="pt-32 sm:pt-8 lg:pt-0 lg:pb-14 lg:overflow-hidden"> <div className="mx-auto max-w-7xl lg:px-8 xl:px-0"> diff --git a/web/pages/markets.tsx b/web/pages/markets.tsx index 5a3c70f8..961c318e 100644 --- a/web/pages/markets.tsx +++ b/web/pages/markets.tsx @@ -1,54 +1,30 @@ import _ from 'lodash' -import { ContractsGrid, SearchableGrid } from '../components/contracts-list' -import { Spacer } from '../components/layout/spacer' +import { SearchableGrid } from '../components/contracts-list' import { Page } from '../components/page' -import { Title } from '../components/title' -import { useContracts, useHotContracts } from '../hooks/use-contracts' +import { useContracts } from '../hooks/use-contracts' import { useQueryAndSortParams } from '../hooks/use-sort-and-query-params' -import { - Contract, - getHotContracts, - listAllContracts, -} from '../lib/firebase/contracts' +import { Contract, listAllContracts } from '../lib/firebase/contracts' export async function getStaticProps() { - const [contracts, hotContracts] = await Promise.all([ - listAllContracts().catch((_) => []), - getHotContracts().catch(() => []), - ]) + const contracts = await listAllContracts().catch((_) => {}) return { props: { contracts, - hotContracts, }, revalidate: 60, // regenerate after a minute } } -export default function Markets(props: { - contracts: Contract[] - hotContracts: Contract[] -}) { - const contracts = useContracts() - const hotContracts = useHotContracts() +export default function Markets(props: { contracts: Contract[] }) { + const contracts = useContracts() ?? props.contracts const { query, setQuery, sort, setSort } = useQueryAndSortParams() - const readyHotContracts = hotContracts ?? props.hotContracts - const readyContracts = contracts ?? props.contracts - return ( <Page> - <div className="w-full bg-indigo-50 border-2 border-indigo-100 p-6 rounded-lg shadow-md"> - <Title className="mt-0" text="🔥 Markets" /> - <ContractsGrid contracts={readyHotContracts} showHotVolume /> - </div> - - <Spacer h={10} /> - <SearchableGrid - contracts={readyContracts} + contracts={contracts} query={query} setQuery={setQuery} sort={sort} From 2f88a5cdab0ac396038b3ca646311fb1f817a5c4 Mon Sep 17 00:00:00 2001 From: jahooma <jahooma@gmail.com> Date: Tue, 11 Jan 2022 21:59:44 -0600 Subject: [PATCH 03/13] Remove Activity Feed from create page per Stephen --- web/pages/create.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/web/pages/create.tsx b/web/pages/create.tsx index f0bab61a..be632c3b 100644 --- a/web/pages/create.tsx +++ b/web/pages/create.tsx @@ -13,7 +13,6 @@ import { AdvancedPanel } from '../components/advanced-panel' import { createContract } from '../lib/firebase/api-call' import { Row } from '../components/layout/row' import { AmountInput } from '../components/amount-input' -import { ActivityFeed } from './activity' // Allow user to create a new contract export default function NewContract() { @@ -209,10 +208,6 @@ export default function NewContract() { </div> </form> </div> - - <Spacer h={6} /> - - <ActivityFeed contracts={[]} recentComments={[]} /> </Page> ) } From 5947be66476d4350287636dee82d23993e68511a Mon Sep 17 00:00:00 2001 From: jahooma <jahooma@gmail.com> Date: Tue, 11 Jan 2022 22:00:03 -0600 Subject: [PATCH 04/13] Darker timestamp on feed --- web/components/contract-feed.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/components/contract-feed.tsx b/web/components/contract-feed.tsx index 584b8e45..9021e8d6 100644 --- a/web/components/contract-feed.tsx +++ b/web/components/contract-feed.tsx @@ -73,7 +73,7 @@ function Timestamp(props: { time: number }) { const { time } = props return ( <span - className="whitespace-nowrap text-gray-300 ml-1" + className="whitespace-nowrap text-gray-400 ml-1" title={dayjs(time).format('MMM D, h:mma')} > {dayjs(time).fromNow()} From ca38640b891bca730fb2aec0e4d11f50b0c3aaf0 Mon Sep 17 00:00:00 2001 From: jahooma <jahooma@gmail.com> Date: Tue, 11 Jan 2022 23:29:50 -0600 Subject: [PATCH 05/13] Tweak positioning of add funds button, no green initial probability --- web/components/amount-input.tsx | 31 +++++++++++++++---------------- web/pages/create.tsx | 5 ++--- 2 files changed, 17 insertions(+), 19 deletions(-) diff --git a/web/components/amount-input.tsx b/web/components/amount-input.tsx index 5037f91f..205c68b6 100644 --- a/web/components/amount-input.tsx +++ b/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> ) } diff --git a/web/pages/create.tsx b/web/pages/create.tsx index be632c3b..36096990 100644 --- a/web/pages/create.tsx +++ b/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('') @@ -111,7 +111,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} @@ -155,7 +155,6 @@ export default function NewContract() { <span className="mb-1">Subsidize your market</span> </label> <AmountInput - className="items-start" amount={ante} onChange={setAnte} error={anteError} From 8839ffc492dbb026583278f02d9273ec034af424 Mon Sep 17 00:00:00 2001 From: jahooma <jahooma@gmail.com> Date: Tue, 11 Jan 2022 23:40:41 -0600 Subject: [PATCH 06/13] Require close date for new markets. Update description placeholder to say it's optional. --- web/pages/create.tsx | 51 ++++++++++++++++++++++---------------------- 1 file changed, 26 insertions(+), 25 deletions(-) diff --git a/web/pages/create.tsx b/web/pages/create.tsx index 36096990..3cd6430f 100644 --- a/web/pages/create.tsx +++ b/web/pages/create.tsx @@ -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(path(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 <></> @@ -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> @@ -162,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} /> From d121e59189200bc3a4e34a2efa83322c1d6ed083 Mon Sep 17 00:00:00 2001 From: Austin Chen <akrolsmir@gmail.com> Date: Wed, 12 Jan 2022 01:47:56 -0500 Subject: [PATCH 07/13] Only permit comments within an hour of betting --- web/components/contract-feed.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/web/components/contract-feed.tsx b/web/components/contract-feed.tsx index 9021e8d6..6c068116 100644 --- a/web/components/contract-feed.tsx +++ b/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 From edb3809f1c5afc63cbcc885a24c21ee9ddb932b0 Mon Sep 17 00:00:00 2001 From: Austin Chen <akrolsmir@gmail.com> Date: Wed, 12 Jan 2022 02:13:01 -0500 Subject: [PATCH 08/13] Standardize on max-w-4xl --- web/pages/activity.tsx | 2 +- web/pages/create.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/web/pages/activity.tsx b/web/pages/activity.tsx index 136b1425..dae5c152 100644 --- a/web/pages/activity.tsx +++ b/web/pages/activity.tsx @@ -11,7 +11,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"> + <div className="card bg-white shadow-md rounded-lg divide-y divide-gray-200 py-6 px-4 max-w-4xl"> <ContractFeed contract={contract} feedType="activity" /> </div> ) diff --git a/web/pages/create.tsx b/web/pages/create.tsx index 3cd6430f..1a4a19d2 100644 --- a/web/pages/create.tsx +++ b/web/pages/create.tsx @@ -84,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> From 344ce69fee51a32e92781de78867a3d104f7d222 Mon Sep 17 00:00:00 2001 From: Austin Chen <akrolsmir@gmail.com> Date: Wed, 12 Jan 2022 02:18:14 -0500 Subject: [PATCH 09/13] Move About page out of navbar --- web/components/nav-bar.tsx | 22 ++++++++++++---------- web/components/profile-menu.tsx | 5 ++++- 2 files changed, 16 insertions(+), 11 deletions(-) diff --git a/web/components/nav-bar.tsx b/web/components/nav-bar.tsx index 210a1814..216a626a 100644 --- a/web/components/nav-bar.tsx +++ b/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"> diff --git a/web/components/profile-menu.tsx b/web/components/profile-menu.tsx index 2ceb18e6..4f20a1a5 100644 --- a/web/components/profile-menu.tsx +++ b/web/components/profile-menu.tsx @@ -59,7 +59,10 @@ function getNavigationOptions(user: User, options: { mobile: boolean }) { name: 'Discord', href: 'https://discord.gg/eHQBNBqXuh', }, - ...(mobile ? [{ name: 'About', href: '/about' }] : []), + { + name: 'About', + href: '/about', + }, { name: 'Sign out', href: '#', From 2df96cc0b590ed693041842b338a2fd246920580 Mon Sep 17 00:00:00 2001 From: Austin Chen <akrolsmir@gmail.com> Date: Wed, 12 Jan 2022 12:51:46 -0500 Subject: [PATCH 10/13] Replace '24h vol' with trending icon --- web/components/contract-card.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/web/components/contract-card.tsx b/web/components/contract-card.tsx index 4571ab9e..a7c73b35 100644 --- a/web/components/contract-card.tsx +++ b/web/components/contract-card.tsx @@ -8,6 +8,7 @@ import { Contract, compute, path } from '../lib/firebase/contracts' 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 @@ -109,7 +110,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> From 5c4235a247c226f10b32dfb4ba34a5167a20c26b Mon Sep 17 00:00:00 2001 From: Austin Chen <akrolsmir@gmail.com> Date: Wed, 12 Jan 2022 12:57:35 -0500 Subject: [PATCH 11/13] Narrower padding for mobile --- web/components/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/components/page.tsx b/web/components/page.tsx index 2e424808..5efc93d9 100644 --- a/web/components/page.tsx +++ b/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' )} > From 7c1d70313b34229aa3ccb2092e66db147ac57545 Mon Sep 17 00:00:00 2001 From: Austin Chen <akrolsmir@gmail.com> Date: Wed, 12 Jan 2022 13:20:28 -0500 Subject: [PATCH 12/13] Uncardify activity feed --- web/components/linkify.tsx | 2 +- web/pages/activity.tsx | 14 ++++++-------- 2 files changed, 7 insertions(+), 9 deletions(-) diff --git a/web/components/linkify.tsx b/web/components/linkify.tsx index ccb63a61..35af391c 100644 --- a/web/components/linkify.tsx +++ b/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} diff --git a/web/pages/activity.tsx b/web/pages/activity.tsx index dae5c152..c5893272 100644 --- a/web/pages/activity.tsx +++ b/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-4xl"> - <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> </> From d38f1300c37dffa99120e7bb82a81cedf839f7a3 Mon Sep 17 00:00:00 2001 From: Austin Chen <akrolsmir@gmail.com> Date: Wed, 12 Jan 2022 13:35:11 -0500 Subject: [PATCH 13/13] Reduce visual weight of "add funds" button --- web/components/add-funds-button.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web/components/add-funds-button.tsx b/web/components/add-funds-button.tsx index 5fecde73..521bc045 100644 --- a/web/components/add-funds-button.tsx +++ b/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" />