🔥🔥🔥🔥🔥🔥🔥🔥

web/components/nav/nav-bar.tsx

@@ -19,6 +19,7 @@ import { useIsIframe } from 'web/hooks/use-is-iframe'
 import { trackCallback } from 'web/lib/service/analytics'
 import { useUnseenPreferredNotifications } from 'web/hooks/use-notifications'
 import { PrivateUser } from 'common/user'
+import { Row } from 'web/components/layout/row'
 
 function getNavigation() {
   return [
@@ -69,13 +70,20 @@ export function BottomNavBar() {
             trackingEventName: 'profile',
             href: `/${user.username}?tab=bets`,
             icon: () => (
-              <Avatar
-                className="mx-auto my-1"
-                size="xs"
-                username={user.username}
-                avatarUrl={user.avatarUrl}
-                noLink
-              />
+              <Row className={'flex-wrap items-center justify-center'}>
+                <Avatar
+                  className="my-1"
+                  size="xs"
+                  username={user.username}
+                  avatarUrl={user.avatarUrl}
+                  noLink
+                />
+                {user.currentBettingStreak && user.currentBettingStreak > 0 && (
+                  <div className={'absolute ml-14 mb-3 text-xs'}>
+                    <span>🔥{user.currentBettingStreak}</span>
+                  </div>
+                )}
+              </Row>
             ),
           }}
         />

web/components/nav/profile-menu.tsx

@@ -4,6 +4,7 @@ import { User } from 'web/lib/firebase/users'
 import { formatMoney } from 'common/util/format'
 import { Avatar } from '../avatar'
 import { trackCallback } from 'web/lib/service/analytics'
+import { Row } from 'web/components/layout/row'
 
 export function ProfileSummary(props: { user: User }) {
   const { user } = props
@@ -17,7 +18,14 @@ export function ProfileSummary(props: { user: User }) {
 
         <div className="truncate">
           <div>{user.name}</div>
-          <div className="text-sm">{formatMoney(Math.floor(user.balance))}</div>
+          <Row className="gap-1 text-sm">
+            {formatMoney(Math.floor(user.balance))}
+            {user.currentBettingStreak && user.currentBettingStreak > 0 && (
+              <div className={'mt-0.5 text-xs'}>
+                <span>🔥{user.currentBettingStreak}</span>
+              </div>
+            )}
+          </Row>
         </div>
       </a>
     </Link>

web/components/user-page.tsx

@@ -124,7 +124,7 @@ export function UserPage(props: { user: User }) {
         </div>
 
         {/* Top right buttons (e.g. edit, follow) */}
-        <div className="absolute right-0 top-0 mt-2 mr-4">
+        <div className="absolute right-0 top-0 mt-1 mr-4">
           {!isCurrentUser && <UserFollowButton userId={user.id} />}
           {isCurrentUser && (
             <SiteLink className="sm:btn-md btn-sm btn" href="/profile">