Tweaks

web/components/arrange-home.tsx

@@ -12,7 +12,7 @@ import { User } from 'common/user'
 import { Group } from 'common/group'
 
 export function ArrangeHome(props: {
-  user: User | null
+  user: User | null | undefined
   homeSections: { visible: string[]; hidden: string[] }
   setHomeSections: (homeSections: {
     visible: string[]

web/components/contract/prob-change-table.tsx

@@ -16,18 +16,27 @@ export function ProbChangeTable(props: { userId: string | undefined }) {
     return null
   }
 
-  const { positiveChanges, negativeChanges } = changes
+  const count = 4
 
-  const count = 3
+  const { positiveChanges, negativeChanges } = changes
+  const filteredPositiveChanges = positiveChanges.slice(0, count / 2)
+  const filteredNegativeChanges = negativeChanges.slice(0, count / 2)
+  const filteredChanges = [
+    ...filteredPositiveChanges,
+    ...filteredNegativeChanges,
+  ]
 
   return (
     <Row className="mb-4 w-full flex-wrap divide-x-2 rounded bg-white shadow-md">
       <Col className="min-w-[300px] flex-1 divide-y">
-        {positiveChanges.slice(0, count).map((contract) => (
+        {filteredChanges.slice(0, count / 2).map((contract) => (
-          <Row className="hover:bg-gray-100">
+          <Row className="items-center hover:bg-gray-100">
-            <ProbChange className="p-4 text-right" contract={contract} />
+            <ProbChange
+              className="p-4 text-right text-xl"
+              contract={contract}
+            />
             <SiteLink
-              className="p-4 font-semibold text-indigo-700"
+              className="p-4 pl-2 font-semibold text-indigo-700"
               href={contractPath(contract)}
             >
               <span className="line-clamp-2">{contract.question}</span>
@@ -36,11 +45,14 @@ export function ProbChangeTable(props: { userId: string | undefined }) {
         ))}
       </Col>
       <Col className="justify-content-stretch min-w-[300px] flex-1 divide-y">
-        {negativeChanges.slice(0, count).map((contract) => (
+        {filteredChanges.slice(count / 2).map((contract) => (
-          <Row className="hover:bg-gray-100">
+          <Row className="items-center hover:bg-gray-100">
-            <ProbChange className="p-4 text-right" contract={contract} />
+            <ProbChange
+              className="p-4 text-right text-xl"
+              contract={contract}
+            />
             <SiteLink
-              className="p-4 font-semibold text-indigo-700"
+              className="p-4 pl-2 font-semibold text-indigo-700"
               href={contractPath(contract)}
             >
               <span className="line-clamp-2">{contract.question}</span>
@@ -63,9 +75,9 @@ export function ProbChange(props: {
 
   const color =
     change > 0
-      ? 'text-green-600'
+      ? 'text-green-500'
       : change < 0
-      ? 'text-red-600'
+      ? 'text-red-500'
       : 'text-gray-600'
 
   const str =

web/pages/experimental/home/index.tsx

@@ -6,12 +6,10 @@ import { Page } from 'web/components/page'
 import { Col } from 'web/components/layout/col'
 import { ContractSearch, SORTS } from 'web/components/contract-search'
 import { User } from 'common/user'
-import { getUserAndPrivateUser, updateUser } from 'web/lib/firebase/users'
+import { updateUser } from 'web/lib/firebase/users'
 import { useTracking } from 'web/hooks/use-tracking'
 import { track } from 'web/lib/service/analytics'
-import { authenticateOnServer } from 'web/lib/firebase/server-auth'
 import { useSaveReferral } from 'web/hooks/use-save-referral'
-import { GetServerSideProps } from 'next'
 import { Sort } from 'web/components/contract-search'
 import { Group } from 'common/group'
 import { LoadingIndicator } from 'web/components/loading-indicator'
@@ -27,14 +25,8 @@ import { Title } from 'web/components/title'
 import { Row } from 'web/components/layout/row'
 import { ProbChangeTable } from 'web/components/contract/prob-change-table'
 
-export const getServerSideProps: GetServerSideProps = async (ctx) => {
+const Home = () => {
-  const creds = await authenticateOnServer(ctx)
+  const user = useUser()
-  const auth = creds ? await getUserAndPrivateUser(creds.uid) : null
-  return { props: { auth } }
-}
-
-const Home = (props: { auth: { user: User } | null }) => {
-  const user = useUser() ?? props.auth?.user ?? null
 
   useTracking('view home')
 
@@ -129,7 +121,7 @@ const Home = (props: { auth: { user: User } | null }) => {
 
 function SearchSection(props: {
   label: string
-  user: User | null
+  user: User | null | undefined
   sort: Sort
   yourBets?: boolean
 }) {
@@ -168,7 +160,7 @@ function SearchSection(props: {
   )
 }
 
-function GroupSection(props: { group: Group; user: User | null }) {
+function GroupSection(props: { group: Group; user: User | null | undefined }) {
   const { group, user } = props
 
   return (