From f2c4d3e9c16e23cf1967c6de6b161d96911fde7f Mon Sep 17 00:00:00 2001 From: jahooma Date: Thu, 27 Jan 2022 16:37:43 -0600 Subject: [PATCH] Change to white backgrounds for content. Remove page's margin, set individually. --- web/components/bet-panel.tsx | 6 ++---- web/components/bets-list.tsx | 2 +- web/components/contract-feed.tsx | 2 +- web/components/page.tsx | 13 +++++++++---- web/components/resolution-panel.tsx | 6 ++---- web/components/user-page.tsx | 2 +- web/pages/[username]/[contractSlug].tsx | 6 +++--- web/pages/about.tsx | 2 +- web/pages/folds.tsx | 20 +++++++++++--------- web/pages/home.tsx | 18 ++++++++---------- web/pages/index.tsx | 4 +--- web/pages/trades.tsx | 2 +- 12 files changed, 41 insertions(+), 42 deletions(-) diff --git a/web/components/bet-panel.tsx b/web/components/bet-panel.tsx index dc5a9bb7..12a094fb 100644 --- a/web/components/bet-panel.tsx +++ b/web/components/bet-panel.tsx @@ -134,11 +134,9 @@ export function BetPanel(props: { } return ( - + diff --git a/web/components/bets-list.tsx b/web/components/bets-list.tsx index c237d17c..85a4fe71 100644 --- a/web/components/bets-list.tsx +++ b/web/components/bets-list.tsx @@ -94,7 +94,7 @@ export function BetsList(props: { user: User }) { return ( <Col className="mt-6 gap-6"> - <Row className="gap-8"> + <Row className="mx-4 md:mx-0 gap-8"> <Col> <div className="text-sm text-gray-500">Currently invested</div> <div>{formatMoney(currentBets)}</div> diff --git a/web/components/contract-feed.tsx b/web/components/contract-feed.tsx index 5627c71a..2bc40ddb 100644 --- a/web/components/contract-feed.tsx +++ b/web/components/contract-feed.tsx @@ -673,7 +673,7 @@ export function ContractFeed(props: { } return ( - <div className="flow-root"> + <div className="flow-root pr-2 md:pr-0"> <ul role="list" className={clsx(tradingAllowed(contract) ? '' : '-mb-8')}> {items.map((activityItem, activityItemIdx) => ( <li key={activityItem.id}> diff --git a/web/components/page.tsx b/web/components/page.tsx index 5efc93d9..84cb9343 100644 --- a/web/components/page.tsx +++ b/web/components/page.tsx @@ -1,8 +1,12 @@ import clsx from 'clsx' import { NavBar } from './nav-bar' -export function Page(props: { wide?: boolean; children?: any }) { - const { wide, children } = props +export function Page(props: { + wide?: boolean + margin?: boolean + children?: any +}) { + const { wide, margin, children } = props return ( <div> @@ -10,8 +14,9 @@ export function Page(props: { wide?: boolean; children?: any }) { <div className={clsx( - 'w-full px-2 pb-8 mx-auto', - wide ? 'max-w-6xl' : 'max-w-4xl' + 'w-full mx-auto', + wide ? 'max-w-6xl' : 'max-w-4xl', + margin && 'px-4' )} > {children} diff --git a/web/components/resolution-panel.tsx b/web/components/resolution-panel.tsx index dec0d436..64e643a3 100644 --- a/web/components/resolution-panel.tsx +++ b/web/components/resolution-panel.tsx @@ -57,10 +57,8 @@ export function ResolutionPanel(props: { : 'btn-disabled' return ( - <Col - className={clsx('bg-gray-100 shadow-md px-8 py-6 rounded-md', className)} - > - <Title className="mt-0 text-neutral" text="Your market" /> + <Col className={clsx('bg-white px-8 py-6 rounded-md', className)}> + <Title className="mt-0" text="Your market" /> <div className="pt-2 pb-1 text-sm text-gray-500">Resolve outcome</div> diff --git a/web/components/user-page.tsx b/web/components/user-page.tsx index a5c225c7..a780c109 100644 --- a/web/components/user-page.tsx +++ b/web/components/user-page.tsx @@ -37,7 +37,7 @@ export function UserPage(props: { user: User; currentUser?: User }) { url={`/@${user.username}`} /> - <Title text={possesive + 'markets'} /> + <Title className="mx-4 md:mx-0" text={possesive + 'markets'} /> <CreatorContractsList creator={user} /> </Page> diff --git a/web/pages/[username]/[contractSlug].tsx b/web/pages/[username]/[contractSlug].tsx index ab2356bd..015506a8 100644 --- a/web/pages/[username]/[contractSlug].tsx +++ b/web/pages/[username]/[contractSlug].tsx @@ -97,8 +97,8 @@ export default function ContractPage(props: { ogCardProps={ogCardProps} /> - <Col className="w-full md:flex-row justify-between mt-6"> - <div className="flex-[3]"> + <Col className="w-full md:flex-row justify-between"> + <div className="flex-[3] bg-white px-2 py-6 md:px-6 md:py-8 rounded border-0 border-gray-100"> <ContractOverview contract={contract} bets={bets ?? []} @@ -109,7 +109,7 @@ export default function ContractPage(props: { {(allowTrade || allowResolve) && ( <> - <div className="md:ml-8" /> + <div className="md:ml-6" /> <Col className="flex-1"> {allowTrade && ( diff --git a/web/pages/about.tsx b/web/pages/about.tsx index 9dfcbecb..1f3de3b1 100644 --- a/web/pages/about.tsx +++ b/web/pages/about.tsx @@ -5,7 +5,7 @@ import styles from './about.module.css' export default function About() { return ( - <Page> + <Page margin> <SEO title="About" description="About" url="/about" /> <Contents /> </Page> diff --git a/web/pages/folds.tsx b/web/pages/folds.tsx index 110706cc..bdb90b0e 100644 --- a/web/pages/folds.tsx +++ b/web/pages/folds.tsx @@ -63,16 +63,18 @@ export default function Folds(props: { return ( <Page> <Col className="items-center"> - <Col className="max-w-lg w-full px-2 sm:px-0"> - <Row className="justify-between items-center"> - <Title text="Explore folds" /> - {user && <CreateFoldButton />} - </Row> + <Col className="max-w-lg w-full"> + <Col className="px-4 sm:px-0"> + <Row className="justify-between items-center"> + <Title text="Explore folds" /> + {user && <CreateFoldButton />} + </Row> - <div className="text-gray-500 mb-6"> - Folds are communities on Manifold centered around a collection of - markets. - </div> + <div className="text-gray-500 mb-6"> + Folds are communities on Manifold centered around a collection of + markets. + </div> + </Col> <Col className="gap-2"> {folds.map((fold) => ( diff --git a/web/pages/home.tsx b/web/pages/home.tsx index 99e1dfa9..7025b840 100644 --- a/web/pages/home.tsx +++ b/web/pages/home.tsx @@ -87,22 +87,20 @@ const Home = (props: { <Page> <Col className="items-center"> <Col className="max-w-3xl"> - <div className="-mx-2 sm:mx-0"> - <FeedCreate user={user ?? undefined} /> - <Spacer h={4} /> + <FeedCreate user={user ?? undefined} /> + <Spacer h={4} /> - {/* <HotMarkets contracts={hotContracts?.slice(0, 4) ?? []} /> + {/* <HotMarkets contracts={hotContracts?.slice(0, 4) ?? []} /> <Spacer h={4} /> <ClosingSoonMarkets contracts={closingSoonContracts ?? []} /> <Spacer h={10} /> */} - <ActivityFeed - contracts={activeContracts ?? []} - contractBets={activeContractBets ?? []} - contractComments={activeContractComments ?? []} - /> - </div> + <ActivityFeed + contracts={activeContracts ?? []} + contractBets={activeContractBets ?? []} + contractComments={activeContractComments ?? []} + /> </Col> </Col> </Page> diff --git a/web/pages/index.tsx b/web/pages/index.tsx index aeb7a502..8cc0f2d3 100644 --- a/web/pages/index.tsx +++ b/web/pages/index.tsx @@ -30,9 +30,7 @@ const Home = (props: { hotContracts: Contract[] }) => { <Page> <Col className="items-center"> <Col className="max-w-3xl"> - <div className="-mx-2 sm:mx-0"> - <FeedPromo hotContracts={hotContracts ?? []} /> - </div> + <FeedPromo hotContracts={hotContracts ?? []} /> </Col> </Col> </Page> diff --git a/web/pages/trades.tsx b/web/pages/trades.tsx index 6e66d001..14923712 100644 --- a/web/pages/trades.tsx +++ b/web/pages/trades.tsx @@ -10,7 +10,7 @@ export default function TradesPage() { return ( <Page> <SEO title="Your trades" description="Your trades" url="/trades" /> - <Title text="Your trades" /> + <Title className="mx-4 md:mx-0" text="Your trades" /> {user && <BetsList user={user} />} </Page> )