Manifold the Grey => Manifold the White (#3469)

* manifold the grey => manifold the white * button, card styling in dark mode * fix search bg * market page border * card styling
manifoldmarkets · Feb 7, 2025 · 7d183dc · 7d183dc
1 parent 3bda7f9
commit 7d183dc
Show file tree

Hide file tree

Showing 19 changed files with 29 additions and 25 deletions.
diff --git a/web/components/ai-content.tsx b/web/components/ai-content.tsx
@@ -180,7 +180,7 @@ export function AiContent() {
         </Col>
       )}
       <QueryUncontrolledTabs
-        className="bg-canvas-50 sticky top-[2.9rem] z-10"
+        className="bg-canvas-0 sticky top-[2.9rem] z-10"
         tabs={AI_TABS}
         defaultIndex={0}
         labelsParentClassName="mr-4"

diff --git a/web/components/bet/user-bets-table.tsx b/web/components/bet/user-bets-table.tsx
@@ -621,7 +621,7 @@ function BetsTable(props: {
       <Col className={'w-full'}>
         <div
           className={clsx(
-            'grid-cols-15 bg-canvas-50 sticky z-10 grid w-full py-2 pr-1',
+            'grid-cols-15 bg-canvas- sticky z-10 grid w-full py-2 pr-1',
             isMobile ? 'top-12' : 'top-0' // Sets it below sticky user profile header on mobile
           )}
         >

diff --git a/web/components/contract/contract-page.tsx b/web/components/contract/contract-page.tsx
@@ -267,7 +267,7 @@ export function ContractPageContent(props: ContractParams) {
       <Row className="w-full items-start justify-center gap-8">
         <Col
           className={clsx(
-            'bg-canvas-0 w-full max-w-3xl rounded-b xl:w-[70%]',
+            'bg-canvas-0 xl:w-[70%] lg:border dark:border-canvas-50 w-full max-w-3xl rounded-b-md  lg:border-t-0 ',
             // Keep content in view when scrolling related questions on desktop.
             'sticky bottom-0 min-h-screen self-end',
             // Accommodate scroll to top button at bottom of page.

diff --git a/web/components/contract/feed-contract-card.tsx b/web/components/contract/feed-contract-card.tsx
@@ -144,12 +144,15 @@ export function FeedContractCard(props: {
 
         'relative cursor-pointer rounded-xl transition-all ',
         'flex w-full flex-col gap-0.5 px-4',
-        className,
+
         size === 'sm'
           ? 'bg-canvas-50'
           : size === 'md'
-          ? 'bg-canvas-0 shadow-md sm:px-6'
-          : 'bg-canvas-0'
+          ? 'bg-canvas-0 dark:bg-canvas-50 dark:border-canvas-50 hover:border-primary-300 gap-2 rounded-lg border px-4 py-3 shadow-md transition-colors sm:px-6'
+          : 'bg-canvas-0',
+        // 'bg-canvas-0 dark:bg-canvas-50 dark:border-canvas-50 hover:border-primary-300 gap-2 rounded-lg border px-4 py-3 transition-colors',
+        // size === 'md' && 'sm:px-6',
+        className,
       )}
       onClick={(e) => {
         trackClick()

diff --git a/web/components/contract/related-contracts-widget.tsx b/web/components/contract/related-contracts-widget.tsx
@@ -26,8 +26,8 @@ export const SidebarRelatedContractsList = memo(function (props: {
   const { contracts, loadMore, className } = props
 
   return (
-    <Col className={clsx(className, 'flex-1')}>
-      <h2 className="text-ink-600 mb-2 text-xl">Related questions</h2>
+    <Col className={clsx('flex-1', className)}>
+      <h2 className="text-ink-600 my-2 ml-4 text-xl">Related questions</h2>
       <Col className="divide-ink-300 divide-y-[0.5px]">
         {contracts.map((contract) => (
           <SidebarRelatedContractCard

diff --git a/web/components/dashboard/header.tsx b/web/components/dashboard/header.tsx
@@ -25,7 +25,7 @@ export function HeadlineTabs(props: {
     <div
       className={clsx(
         className,
-        'bg-canvas-50 w-full',
+        'w-full bg-canvas-0',
         !notSticky && 'sticky top-0 z-50'
       )}
     >

diff --git a/web/components/feed/good-comment.tsx b/web/components/feed/good-comment.tsx
@@ -55,7 +55,8 @@ export const GoodComment = memo(function (props: {
   return (
     <Col
       className={clsx(
-        'bg-canvas-0 ring- ring-primary-200 group rounded-lg py-2',
+        'ring-primary-200 group rounded-lg py-2',
+        'bg-canvas-0 dark:bg-canvas-50 dark:border-canvas-50 hover:border-primary-300 gap-2 rounded-lg border px-4 py-3 shadow-md transition-colors sm:px-6',
         hoveringChildContract ? '' : 'hover:ring-1'
       )}
       ref={ref}

diff --git a/web/components/home/daily-stats.tsx b/web/components/home/daily-stats.tsx
@@ -7,7 +7,7 @@ import { DailyProfit } from './daily-profit'
 import { DailyLoan } from './daily-loan'
 
 export const dailyStatsClass =
-  'bg-canvas-0 rounded-lg px-2 sm:px-3 py-1 shadow min-w-[60px]'
+  'bg-canvas-0 dark:bg-canvas-50 rounded-lg px-2 sm:px-3 py-1 shadow min-w-[60px]'
 
 export function DailyStats(props: {
   user: User | null | undefined

diff --git a/web/components/layout/page.tsx b/web/components/layout/page.tsx
@@ -56,7 +56,7 @@ export function Page(props: {
         )}
         <main
           className={clsx(
-            'col-span-7 flex flex-1 flex-col lg:mt-6 xl:px-2',
+            'col-span-7 flex flex-1 flex-col l:px-2',
             className
           )}
         >

diff --git a/web/components/profile/user-contracts-list.tsx b/web/components/profile/user-contracts-list.tsx
@@ -147,7 +147,7 @@ export function UserContractsList(props: {
         />
       </Row>
 
-      <Col className="bg-canvas-50 sticky -top-px z-20">
+      <Col className="bg-canvas-0 sticky -top-px z-20">
         <SearchInput
           value={query}
           setValue={setQuery}

diff --git a/web/components/search.tsx b/web/components/search.tsx
@@ -345,8 +345,7 @@ export function Search(props: SearchProps) {
     <Col className="w-full">
       <Col
         className={clsx(
-          'sticky top-0 z-20',
-          !headerClassName && 'bg-canvas-50',
+          'sticky top-0 z-20 bg-canvas-0',
           headerClassName
         )}
       >

diff --git a/web/components/site-activity.tsx b/web/components/site-activity.tsx
@@ -97,7 +97,9 @@ export function SiteActivity(props: {
           return (
             <Col
               key={parentId}
-              className="bg-canvas-0 border-canvas-50 hover:border-primary-300 gap-2 rounded-lg border px-4 py-3 transition-colors"
+              className={clsx(
+                'bg-canvas-0 dark:bg-canvas-50 dark:border-canvas-50 hover:border-primary-300 gap-2 rounded-lg border px-4 py-3 shadow-md transition-colors sm:px-6'
+              )}
             >
               <Row className="gap-2">
                 <Col className="flex-1 gap-2">

diff --git a/web/pages/_document.tsx b/web/pages/_document.tsx
@@ -19,7 +19,7 @@ export default function Document() {
         <link rel="icon" href={ENV_CONFIG.faviconPath} />
         <Script src="/init-theme.js" strategy="beforeInteractive" />
       </Head>
-      <body className="bg-canvas-50 text-ink-1000">
+      <body className="bg-canvas-0 text-ink-1000">
         <Main />
         <NextScript />
       </body>

diff --git a/web/pages/browse/index.tsx b/web/pages/browse/index.tsx
@@ -70,7 +70,7 @@ export function BrowsePageContent() {
         }}
         useUrlParams
         isWholePage
-        headerClassName={'pt-0 px-2 bg-canvas-50'}
+        headerClassName={'pt-0 px-2'}
         defaultFilter="open"
         defaultSort="score"
         defaultForYou="1"

diff --git a/web/pages/explore/index.tsx b/web/pages/explore/index.tsx
@@ -182,7 +182,7 @@ function SportsTabs() {
   return (
     <Col className="w-full">
       <QueryUncontrolledTabs
-        className="bg-canvas-50 sticky top-[2.9rem] z-10"
+        className="bg-canvas-0 sticky top-[2.9rem] z-10"
         tabs={SPORTS_TABS}
         defaultIndex={0}
         labelsParentClassName="mr-4"
@@ -372,7 +372,7 @@ const OrganizableMarketsPage = (props: { user: User | null; tabs: Tab[] }) => {
           {(provided) => (
             <div ref={provided.innerRef} {...provided.droppableProps}>
               <QueryUncontrolledTabs
-                className="bg-canvas-50 sticky top-0 z-10"
+                className="bg-canvas-0 sticky top-0 z-10"
                 tabInUrlKey="top-tab"
                 tabs={tabs.map((tab, index) => ({
                   ...tab,

diff --git a/web/pages/feed.tsx b/web/pages/feed.tsx
@@ -18,7 +18,7 @@ export default function Explore() {
       <Welcome />
       {user && (
         <DailyStats
-          className="bg-canvas-50 z-50 mb-1 w-full px-2 py-2"
+          className="bg-canvas-0 z-50 mb-1 w-full px-2 py-2"
           user={user}
         />
       )}

diff --git a/web/pages/home/index.tsx b/web/pages/home/index.tsx
@@ -47,7 +47,7 @@ export default function Home(props: { headlines: Headline[] }) {
         notSticky
       />
       <DailyStats
-        className="bg-canvas-50 z-50 mb-1 w-full px-2 py-2"
+        className="z-50 mb-1 w-full px-2 py-2"
         user={user}
       />
       <BrowsePageContent />

diff --git a/web/pages/topic/[topicSlug].tsx b/web/pages/topic/[topicSlug].tsx
@@ -127,7 +127,6 @@ export default function TopicPage(props: {
                 title: 'Questions',
                 content: (
                   <Search
-                    headerClassName={'bg-canvas-50'}
                     persistPrefix="group-search"
                     additionalFilter={{
                       excludeContractIds: privateUser?.blockedContractIds,

diff --git a/web/styles/globals.css b/web/styles/globals.css
@@ -78,8 +78,8 @@
     --color-ink-50: 10 8 43;
     --color-ink-0: 0 0 0;
 
-    --color-canvas-0: 30 41 59;
-    --color-canvas-50: 15 23 41;
+    --color-canvas-0: 15 23 41;
+    --color-canvas-50: 30 41 59;
     --color-canvas-100: 51 65 85;
 
     --color-primary-950: 238 242 255;