added bottom bar, cleaned up profile bets

web/components/bets-list.tsx

@@ -77,7 +77,7 @@ export function BetsList(props: { user: User }) {
   }, [contractList])
 
   const [sort, setSort] = useState<BetSort>('newest')
-  const [filter, setFilter] = useState<BetFilter>('open')
+  const [filter, setFilter] = useState<BetFilter>('all')
   const [page, setPage] = useState(0)
   const start = page * CONTRACTS_PER_PAGE
   const end = start + CONTRACTS_PER_PAGE
@@ -162,27 +162,20 @@ export function BetsList(props: { user: User }) {
 
   return (
     <Col>
-      <Col className="mx-4 gap-4 sm:flex-row sm:justify-between md:mx-0">
+      <Row className="justify-between gap-4 sm:flex-row">
-        <Row className="gap-8">
         <Col>
-            <div className="text-sm text-gray-500">Investment value</div>
+          <div className="text-greyscale-6 text-xs sm:text-sm">
+            Investment value
+          </div>
           <div className="text-lg">
             {formatMoney(currentNetInvestment)}{' '}
             <ProfitBadge profitPercent={investedProfitPercent} />
           </div>
         </Col>
-          <Col>
-            <div className="text-sm text-gray-500">Total profit</div>
-            <div className="text-lg">
-              {formatMoney(totalPnl)}{' '}
-              <ProfitBadge profitPercent={totalProfitPercent} />
-            </div>
-          </Col>
-        </Row>
 
-        <Row className="gap-8">
+        <Row className="gap-2">
           <select
-            className="select select-bordered self-start"
+            className="border-greyscale-4 self-start overflow-hidden rounded border px-2 py-2 text-sm"
             value={filter}
             onChange={(e) => setFilter(e.target.value as BetFilter)}
           >
@@ -195,7 +188,7 @@ export function BetsList(props: { user: User }) {
           </select>
 
           <select
-            className="select select-bordered self-start"
+            className="border-greyscale-4 self-start overflow-hidden rounded px-2 py-2 text-sm"
             value={sort}
             onChange={(e) => setSort(e.target.value as BetSort)}
           >
@@ -205,7 +198,7 @@ export function BetsList(props: { user: User }) {
             <option value="closeTime">Close date</option>
           </select>
         </Row>
-      </Col>
+      </Row>
 
       <Col className="mt-6 divide-y">
         {displayedContracts.length === 0 ? (

web/components/portfolio/portfolio-value-graph.tsx

@@ -2,12 +2,9 @@ import { ResponsiveLine } from '@nivo/line'
 import { PortfolioMetrics } from 'common/user'
 import { formatMoney } from 'common/util/format'
 import dayjs from 'dayjs'
-import { connectStorageEmulator } from 'firebase/storage'
 import { last, set } from 'lodash'
 import { memo } from 'react'
 import { useWindowSize } from 'web/hooks/use-window-size'
-import { nFormatter } from 'web/lib/util/appendNumber'
-import { formatTime } from 'web/lib/util/time'
 import { Col } from '../layout/col'
 
 export const PortfolioValueGraph = memo(function PortfolioValueGraph(props: {
@@ -102,7 +99,6 @@ export const PortfolioValueGraph = memo(function PortfolioValueGraph(props: {
         )
 
   return (
-    <div className="animate-rapidpulse">
     <div
       className="w-full overflow-hidden"
       style={{ height: height ?? (!width || width >= 800 ? 200 : 100) }}
@@ -154,9 +150,7 @@ export const PortfolioValueGraph = memo(function PortfolioValueGraph(props: {
                   className="text-xs font-semibold sm:text-sm"
                 >
                   <Col>
-                      <div>
+                    <div>{dayjs(point.data.xFormatted).format('MMM/D/YY')}</div>
-                        {dayjs(point.data.xFormatted).format('MMM/D/YY')}
-                      </div>
                     <div className="text-greyscale-6 text-2xs font-normal sm:text-xs">
                       {dayjs(point.data.xFormatted).format('h:mm A')}
                     </div>
@@ -168,6 +162,5 @@ export const PortfolioValueGraph = memo(function PortfolioValueGraph(props: {
         }}
       ></ResponsiveLine>
     </div>
-    </div>
   )
 })

web/components/portfolio/portfolio-value-section.tsx

@@ -99,8 +99,8 @@ export const PortfolioValueSection = memo(
         <PortfolioPeriodSelection
           portfolioPeriod={portfolioPeriod}
           setPortfolioPeriod={setPortfolioPeriod}
-          className="mt-2 gap-4"
+          className="border-greyscale-2 mt-2 gap-4 border-b"
-          selectClassName="text-indigo-600 text-bold underline"
+          selectClassName="text-indigo-600 text-bold border-b border-indigo-600"
         />
       </>
     )

web/components/user-page.tsx

@@ -29,19 +29,12 @@ import { FollowersButton, FollowingButton } from './following-button'
 import { UserFollowButton } from './follow-button'
 import { GroupsButton } from 'web/components/groups/groups-button'
 import { PortfolioValueSection } from './portfolio/portfolio-value-section'
-import { ReferralsButton } from 'web/components/referrals-button'
 import { formatMoney } from 'common/util/format'
-import { ShareIconButton } from 'web/components/share-icon-button'
-import { ENV_CONFIG } from 'common/envs/constants'
 import {
   BettingStreakModal,
   hasCompletedStreakToday,
 } from 'web/components/profile/betting-streak-modal'
-import { REFERRAL_AMOUNT } from 'common/economy'
 import { LoansModal } from './profile/loans-modal'
-import { UserLikesButton } from 'web/components/profile/user-likes-button'
-import { PAST_BETS } from 'common/user'
-import { capitalize } from 'lodash'
 import { useIsMobile } from 'web/hooks/use-is-mobile'
 
 export function UserPage(props: { user: User }) {
@@ -210,6 +203,7 @@ export function UserPage(props: { user: User }) {
                 content: (
                   <>
                     <PortfolioValueSection userId={user.id} />
+                    <Spacer h={4} />
                     <BetsList user={user} />
                   </>
                 ),