@oxy.so/services 11.14.0 → 11.15.0

package/lib/module/ui/screens/ProfileScreen.js

@@ -1,31 +1,32 @@
 "use strict";
 
 import { useMemo } from 'react';
-import { View, StyleSheet, ActivityIndicator } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 import { useQuery } from '@tanstack/react-query';
 import { useTheme } from '@oxy.so/bloom/theme';
-import { Button } from '@oxy.so/bloom/button';
+import { Button, LinkButton } from '@oxy.so/bloom/button';
+import { ButtonGroup, ButtonGroupItem } from '@oxy.so/bloom/button-group';
+import { RiSettings3Line } from '@oxy.so/bloom/icons/RiSettings3Line';
+import { PressableScale } from '@oxy.so/bloom/pressable-scale';
+import { useSurfaceFill } from '@oxy.so/bloom/styles';
 import { H2, Text } from '@oxy.so/bloom/typography';
-import { SettingsListGroup, SettingsListItem } from '@oxy.so/bloom/settings-list';
 import { Avatar } from '@oxy.so/bloom/avatar';
+import * as Skeleton from '@oxy.so/bloom/skeleton';
+import { CoverHeader } from '@oxy.so/bloom/cover-header';
 import FollowButton from "../components/FollowButton.js";
 import { useFollow } from "../hooks/useFollow.js";
 import Ionicons from "../icons/Ionicons.js";
 import { useI18n } from "../hooks/useI18n.js";
 import { useSurfaceHeader } from "../hooks/useSurfaceHeader.js";
-import { useOxy } from "../context/OxyContext.js";
-import { getNormalizedUserHandle, logger, normalizeProfileLinks } from '@oxy.so/core';
+import { useOxy } from "../context/oxyRuntimeContext.js";
+import { getNormalizedUserHandle, logger } from '@oxy.so/core';
 import { extractErrorMessage } from "../utils/errorHandlers.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const AVATAR_SIZE = 96;
-const BANNER_HEIGHT = 160;
-const AVATAR_OVERLAP = -56;
 const INFO_ICON_SIZE = 18;
 const ProfileScreen = ({
   userId,
   username,
-  theme,
-  goBack,
   navigate
 }) => {
   // Use useOxy() hook for OxyContext values. "Me" for own-profile detection
@@ -44,8 +45,10 @@ const ProfileScreen = ({
     isLoadingCounts
   } = useFollow(userId);
   const bloomTheme = useTheme();
+  const surfaceFill = useSurfaceFill();
   const {
-    t
+    t,
+    locale
   } = useI18n();
 
   // Check if current user is viewing their own profile
@@ -85,15 +88,12 @@ const ProfileScreen = ({
       }
       return {
         profile: profileRes,
-        reputationTotal: typeof reputationRes.total === 'number' ? reputationRes.total : null,
-        links: normalizeProfileLinks(profileRes.linksMetadata, profileRes.links)
+        reputationTotal: typeof reputationRes.total === 'number' ? reputationRes.total : null
       };
     }
   });
-  const profile = profileQuery.data?.profile ?? null;
+  const profile = profileQuery.data?.profile ?? (isOwnProfile ? currentUser : null);
   const reputationTotal = profileQuery.data?.reputationTotal ?? null;
-  const links = profileQuery.data?.links ?? [];
-  const isLoading = !!userId && profileQuery.isLoading;
 
   // Friendly, status-aware error copy derived from the query error (no effect).
   const error = useMemo(() => {
@@ -114,30 +114,13 @@ const ProfileScreen = ({
     return errorMessageText || 'Failed to load profile';
   }, [userId, profileQuery.isError, profileQuery.error, isOwnProfile]);
 
-  // Display name: the loaded profile's, else the passed handle. Also the nav-bar
-  // title (a stable "Profile" fallback before it resolves), so the banner +
-  // overlapping avatar scroll as content UNDER the shared gradient nav bar.
-  // `onImage` tone keeps the title + close legible over the colored banner.
-  // Ends in a string, deliberately: `getNormalizedUserHandle` answers `null` for a
-  // user it cannot normalise, and letting that null travel makes this `string | null`
-  // — which does not satisfy `Avatar.name` and does not typecheck. Empty is the honest
-  // bottom of the chain and every reader below already treats it as falsy
-  // (`displayName || t('profile.title')`), so nothing renders a literal "null".
+  // The dialog owns navigation chrome; CoverHeader owns the profile artwork
+  // and avatar overlap. A neutral cover is not an on-image navigation surface.
   const displayName = profile ? profile.name?.displayName ?? getNormalizedUserHandle(profile) ?? '' : username || '';
   useSurfaceHeader({
     title: displayName || t('profile.title'),
-    largeTitle: false,
-    tone: 'onImage'
+    largeTitle: false
   });
-  if (isLoading) {
-    return /*#__PURE__*/_jsx(View, {
-      className: "items-center py-space-40",
-      children: /*#__PURE__*/_jsx(ActivityIndicator, {
-        size: "large",
-        color: bloomTheme.colors.primary
-      })
-    });
-  }
   if (error) {
     // The shared nav header owns back/close; the error body is just the alert.
     return /*#__PURE__*/_jsxs(View, {
@@ -162,6 +145,58 @@ const ProfileScreen = ({
       })]
     });
   }
+  if (!profile && profileQuery.isPending) {
+    return /*#__PURE__*/_jsxs(View, {
+      testID: "profile-skeleton",
+      accessibilityLabel: t('common.loading'),
+      accessibilityState: {
+        busy: true
+      },
+      style: styles.scrollContainer,
+      children: [/*#__PURE__*/_jsxs(CoverHeader, {
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.avatarRow,
+          className: "px-screen-margin",
+          children: [/*#__PURE__*/_jsx(Skeleton.Circle, {
+            size: AVATAR_SIZE
+          }), /*#__PURE__*/_jsx(Skeleton.Box, {
+            width: 88,
+            height: 32,
+            borderRadius: 16
+          })]
+        }), /*#__PURE__*/_jsxs(View, {
+          className: "px-screen-margin gap-space-8",
+          style: styles.header,
+          children: [/*#__PURE__*/_jsx(Skeleton.Box, {
+            width: 180,
+            height: 28
+          }), /*#__PURE__*/_jsx(Skeleton.Box, {
+            width: 110,
+            height: 18
+          }), /*#__PURE__*/_jsx(Skeleton.Box, {
+            width: "100%",
+            height: 18,
+            style: {
+              marginTop: 10
+            }
+          }), /*#__PURE__*/_jsx(Skeleton.Box, {
+            width: "75%",
+            height: 18
+          })]
+        })]
+      }), /*#__PURE__*/_jsxs(View, {
+        className: "px-screen-margin gap-space-12",
+        style: styles.details,
+        children: [/*#__PURE__*/_jsx(Skeleton.Box, {
+          width: "65%",
+          height: 18
+        }), /*#__PURE__*/_jsx(Skeleton.Box, {
+          width: "85%",
+          height: 18
+        })]
+      })]
+    });
+  }
 
   // The singular `location` field was removed from the User contract; derive
   // the primary place from the `locations` list instead. `locations` is only
@@ -175,189 +210,214 @@ const ProfileScreen = ({
     }
     return undefined;
   })();
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.scrollContainer,
-    children: [/*#__PURE__*/_jsx(View, {
-      style: styles.bannerContainer,
-      className: "bg-fill-brand/20",
-      children: /*#__PURE__*/_jsx(View, {
-        style: styles.flex,
-        className: "bg-fill-brand"
-      })
-    }), /*#__PURE__*/_jsxs(View, {
-      style: styles.avatarRow,
-      className: "px-screen-margin",
-      children: [/*#__PURE__*/_jsx(View, {
-        style: styles.avatarWrapper,
-        className: "border-bg bg-bg rounded-radius-max",
-        children: /*#__PURE__*/_jsx(Avatar
-        // `getFileDownloadUrl` answers `null` for a reference it cannot
-        // resolve, and `Avatar.source` takes `undefined` for "no picture" —
-        // the two spellings of absent do not meet, so the coalesce is the
-        // whole fix. Without it this file does not typecheck, which blocks
-        // `bun run build` and therefore every publish of this package.
-        , {
-          source: profile?.avatar ? oxyServices.assets.publicUrl(profile.avatar, 'thumb') ?? undefined : undefined,
-          name: displayName,
-          size: AVATAR_SIZE
+  const metadata = [];
+  if (primaryLocation) metadata.push({
+    key: 'location',
+    icon: 'location-outline',
+    label: primaryLocation
+  });
+  if (profile?.createdAt) {
+    const joined = new Date(profile.createdAt);
+    if (!Number.isNaN(joined.getTime())) metadata.push({
+      key: 'joined',
+      icon: 'calendar-outline',
+      label: t('profile.joinedOn', {
+        date: joined.toLocaleDateString(locale, {
+          month: 'long',
+          year: 'numeric'
         })
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.actionButtonWrapper,
-        children: isOwnProfile ? /*#__PURE__*/_jsx(Button, {
-          appearance: "subtle",
-          tone: "neutral",
-          size: "sm",
-          onPress: () => navigate?.('ManageAccount'),
-          children: t('editProfile.title') || 'Edit Profile'
-        }) : /*#__PURE__*/_jsx(FollowButton, {
-          userId: userId,
-          onFollowChange: isFollowing => {
-            // The follow button will automatically update counts via Zustand
-            if (__DEV__) {
-              logger.debug(`Follow status changed: ${isFollowing}`, {
-                component: 'ProfileScreen'
-              });
-            }
-          }
+      })
+    });
+  }
+  for (const [key, icon] of [['company', 'business-outline'], ['jobTitle', 'briefcase-outline'], ['education', 'school-outline']]) {
+    const value = profile?.[key];
+    if (typeof value === 'string' && value.trim()) metadata.push({
+      key,
+      icon,
+      label: value
+    });
+  }
+  if (typeof profile?.birthday === 'string' && profile.birthday) {
+    const birthday = new Date(profile.birthday);
+    if (!Number.isNaN(birthday.getTime())) metadata.push({
+      key: 'birthday',
+      icon: 'gift-outline',
+      label: t('profile.bornOn', {
+        date: birthday.toLocaleDateString(locale, {
+          timeZone: 'UTC'
         })
-      })]
-    }), /*#__PURE__*/_jsxs(View, {
-      style: styles.header,
-      className: "px-screen-margin",
-      children: [/*#__PURE__*/_jsx(H2, {
-        style: styles.displayName,
-        className: "text-text",
-        children: displayName
-      }), profile?.username && /*#__PURE__*/_jsxs(Text, {
-        style: styles.subText,
-        className: "text-text-secondary",
-        children: ["@", profile.username]
-      }), /*#__PURE__*/_jsx(Text, {
-        style: styles.bio,
-        className: "text-text",
-        children: profile?.bio || t('profile.noBio') || 'This user has no bio yet.'
-      })]
-    }), /*#__PURE__*/_jsx(View, {
-      className: "px-screen-margin",
-      children: /*#__PURE__*/_jsxs(SettingsListGroup, {
-        children: [profile?.createdAt && /*#__PURE__*/_jsx(SettingsListItem, {
-          icon: /*#__PURE__*/_jsx(Ionicons, {
-            name: "calendar-outline",
-            size: INFO_ICON_SIZE,
-            color: bloomTheme.colors.textSecondary
-          }),
-          title: t('profile.joinedOn', {
-            date: new Date(profile.createdAt).toLocaleDateString()
-          }) || `Joined ${new Date(profile.createdAt).toLocaleDateString()}`,
-          showChevron: false
-        }), primaryLocation && /*#__PURE__*/_jsx(SettingsListItem, {
-          icon: /*#__PURE__*/_jsx(Ionicons, {
-            name: "location-outline",
-            size: INFO_ICON_SIZE,
-            color: bloomTheme.colors.textSecondary
-          }),
-          title: primaryLocation,
-          showChevron: false
-        }), profile?.website && /*#__PURE__*/_jsx(SettingsListItem, {
-          icon: /*#__PURE__*/_jsx(Ionicons, {
-            name: "globe-outline",
-            size: INFO_ICON_SIZE,
-            color: bloomTheme.colors.textSecondary
-          }),
-          title: profile.website,
-          showChevron: false
-        }), profile && 'company' in profile && typeof profile.company === 'string' && profile.company && /*#__PURE__*/_jsx(SettingsListItem, {
-          icon: /*#__PURE__*/_jsx(Ionicons, {
-            name: "business-outline",
-            size: INFO_ICON_SIZE,
-            color: bloomTheme.colors.textSecondary
-          }),
-          title: profile.company,
-          showChevron: false
-        }), profile && 'jobTitle' in profile && typeof profile.jobTitle === 'string' && profile.jobTitle && /*#__PURE__*/_jsx(SettingsListItem, {
-          icon: /*#__PURE__*/_jsx(Ionicons, {
-            name: "briefcase-outline",
-            size: INFO_ICON_SIZE,
-            color: bloomTheme.colors.textSecondary
-          }),
-          title: profile.jobTitle,
-          showChevron: false
-        }), profile && 'education' in profile && typeof profile.education === 'string' && profile.education && /*#__PURE__*/_jsx(SettingsListItem, {
-          icon: /*#__PURE__*/_jsx(Ionicons, {
-            name: "school-outline",
-            size: INFO_ICON_SIZE,
-            color: bloomTheme.colors.textSecondary
-          }),
-          title: profile.education,
-          showChevron: false
-        }), profile && 'birthday' in profile && typeof profile.birthday === 'string' && profile.birthday && /*#__PURE__*/_jsx(SettingsListItem, {
-          icon: /*#__PURE__*/_jsx(Ionicons, {
-            name: "gift-outline",
-            size: INFO_ICON_SIZE,
-            color: bloomTheme.colors.textSecondary
-          }),
-          title: t('profile.bornOn', {
-            date: new Date(profile.birthday).toLocaleDateString()
-          }) || `Born ${new Date(profile.birthday).toLocaleDateString()}`,
-          showChevron: false
-        }), links.length > 0 && /*#__PURE__*/_jsx(SettingsListItem, {
-          icon: /*#__PURE__*/_jsx(Ionicons, {
-            name: "link-outline",
-            size: INFO_ICON_SIZE,
-            color: bloomTheme.colors.textSecondary
-          }),
-          title: links[0].url,
-          value: links.length > 1 ? t('profile.more', {
-            count: links.length - 1
-          }) || `+ ${links.length - 1} more` : undefined,
-          onPress: () => navigate?.('UserLinks', {
-            userId,
-            links
-          })
-        })]
       })
-    }), /*#__PURE__*/_jsxs(View, {
-      style: styles.statsRow,
-      className: "px-screen-margin",
+    });
+  }
+  let websiteUrl;
+  if (profile?.website) {
+    try {
+      const url = new URL(profile.website);
+      if (url.protocol === 'https:' || url.protocol === 'http:') websiteUrl = url.href;
+    } catch {
+      /* Invalid profile URLs are not interactive links. */
+    }
+  }
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.scrollContainer,
+    children: [/*#__PURE__*/_jsxs(CoverHeader, {
+      testID: "profile-cover-header",
       children: [/*#__PURE__*/_jsxs(View, {
-        style: styles.statItem,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: styles.statAmount,
-          className: "text-text",
-          children: reputationTotal !== null && reputationTotal !== undefined ? reputationTotal : '--'
-        }), /*#__PURE__*/_jsx(Text, {
-          style: styles.statLabel,
-          className: "text-text-secondary",
-          children: t('profile.reputation') || 'Reputation'
+        style: styles.avatarRow,
+        className: "px-screen-margin",
+        children: [/*#__PURE__*/_jsx(View, {
+          style: [styles.avatarWrapper, {
+            borderColor: surfaceFill,
+            backgroundColor: surfaceFill
+          }],
+          className: "rounded-radius-max",
+          children: /*#__PURE__*/_jsx(Avatar
+          // `getFileDownloadUrl` answers `null` for a reference it cannot
+          // resolve, and `Avatar.source` takes `undefined` for "no picture" —
+          // the two spellings of absent do not meet, so the coalesce is the
+          // whole fix. Without it this file does not typecheck, which blocks
+          // `bun run build` and therefore every publish of this package.
+          , {
+            source: profile?.avatar ? oxyServices.assets.publicUrl(profile.avatar, 'thumb') ?? undefined : undefined,
+            name: displayName,
+            size: AVATAR_SIZE
+          })
+        }), /*#__PURE__*/_jsx(View, {
+          style: styles.actionButtonWrapper,
+          children: isOwnProfile ? /*#__PURE__*/_jsxs(View, {
+            style: styles.profileActions,
+            children: [/*#__PURE__*/_jsx(Button, {
+              appearance: "subtle",
+              tone: "neutral",
+              size: "sm",
+              onPress: () => navigate?.('EditProfile'),
+              children: t('editProfile.title') || 'Edit Profile'
+            }), /*#__PURE__*/_jsx(ButtonGroup, {
+              children: /*#__PURE__*/_jsx(ButtonGroupItem, {
+                iconOnly: true,
+                leadingIcon: RiSettings3Line,
+                accessibilityLabel: t('accountMenu.settings') || 'Settings',
+                onPress: () => navigate?.('Preferences')
+              })
+            })]
+          }) : /*#__PURE__*/_jsx(FollowButton, {
+            userId: userId,
+            onFollowChange: isFollowing => {
+              // The follow button will automatically update counts via Zustand
+              if (__DEV__) {
+                logger.debug(`Follow status changed: ${isFollowing}`, {
+                  component: 'ProfileScreen'
+                });
+              }
+            }
+          })
         })]
       }), /*#__PURE__*/_jsxs(View, {
-        style: styles.statItem,
-        children: [isLoadingCounts ? /*#__PURE__*/_jsx(ActivityIndicator, {
-          size: "small",
-          color: bloomTheme.colors.text
-        }) : /*#__PURE__*/_jsx(Text, {
-          style: styles.statAmount,
+        style: styles.header,
+        className: "px-screen-margin",
+        children: [/*#__PURE__*/_jsx(H2, {
+          style: styles.displayName,
           className: "text-text",
-          children: followerCount !== null ? followerCount : '--'
-        }), /*#__PURE__*/_jsx(Text, {
-          style: styles.statLabel,
+          children: displayName
+        }), profile?.username && /*#__PURE__*/_jsxs(Text, {
+          style: styles.subText,
           className: "text-text-secondary",
-          children: t('profile.followers') || 'Followers'
-        })]
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.statItem,
-        children: [isLoadingCounts ? /*#__PURE__*/_jsx(ActivityIndicator, {
-          size: "small",
-          color: bloomTheme.colors.text
-        }) : /*#__PURE__*/_jsx(Text, {
-          style: styles.statAmount,
+          children: ["@", profile.username]
+        }), profile?.bio ? /*#__PURE__*/_jsx(Text, {
+          style: styles.bio,
           className: "text-text",
-          children: followingCount !== null ? followingCount : '--'
-        }), /*#__PURE__*/_jsx(Text, {
-          style: styles.statLabel,
-          className: "text-text-secondary",
-          children: t('profile.following') || 'Following'
-        })]
+          children: profile.bio
+        }) : null]
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      className: "px-screen-margin",
+      style: styles.details,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: styles.metadataRow,
+        children: metadata.map(({
+          key,
+          icon,
+          label
+        }) => /*#__PURE__*/_jsxs(View, {
+          style: styles.metadataEntry,
+          children: [/*#__PURE__*/_jsx(Ionicons, {
+            name: icon,
+            size: 16,
+            color: bloomTheme.colors.textSecondary
+          }), /*#__PURE__*/_jsx(Text, {
+            style: [styles.metadataText, {
+              color: bloomTheme.colors.textSecondary
+            }],
+            children: label
+          })]
+        }, key))
+      }), websiteUrl ? /*#__PURE__*/_jsx(LinkButton, {
+        size: "sm",
+        href: websiteUrl,
+        style: {
+          alignSelf: 'flex-start',
+          paddingLeft: 0,
+          paddingRight: 0
+        },
+        target: "_blank",
+        rel: "noopener noreferrer",
+        icon: /*#__PURE__*/_jsx(Ionicons, {
+          name: "link-outline",
+          size: INFO_ICON_SIZE
+        }),
+        children: profile?.website
+      }) : null, /*#__PURE__*/_jsxs(View, {
+        style: styles.statsRow,
+        children: [!isLoadingCounts && followingCount !== null ? /*#__PURE__*/_jsxs(PressableScale, {
+          style: styles.statItem,
+          accessibilityLabel: `${followingCount} ${t('profile.following')}`,
+          onPress: () => navigate?.('FollowingList', {
+            userId,
+            initialCount: followingCount
+          }),
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: [styles.statNumber, {
+              color: bloomTheme.colors.text
+            }],
+            children: followingCount
+          }), /*#__PURE__*/_jsx(Text, {
+            style: [styles.statLabel, {
+              color: bloomTheme.colors.textSecondary
+            }],
+            children: t('profile.following')
+          })]
+        }) : null, !isLoadingCounts && followerCount !== null ? /*#__PURE__*/_jsxs(PressableScale, {
+          style: styles.statItem,
+          accessibilityLabel: `${followerCount} ${t('profile.followers')}`,
+          onPress: () => navigate?.('FollowersList', {
+            userId,
+            initialCount: followerCount
+          }),
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: [styles.statNumber, {
+              color: bloomTheme.colors.text
+            }],
+            children: followerCount
+          }), /*#__PURE__*/_jsx(Text, {
+            style: [styles.statLabel, {
+              color: bloomTheme.colors.textSecondary
+            }],
+            children: t('profile.followers')
+          })]
+        }) : null, reputationTotal !== null ? /*#__PURE__*/_jsxs(View, {
+          style: styles.statItem,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: [styles.statNumber, {
+              color: bloomTheme.colors.text
+            }],
+            children: reputationTotal
+          }), /*#__PURE__*/_jsx(Text, {
+            style: [styles.statLabel, {
+              color: bloomTheme.colors.textSecondary
+            }],
+            children: t('profile.reputation')
+          })]
+        }) : null]
       })]
     })]
   });
@@ -367,22 +427,13 @@ const ProfileScreen = ({
 // that no token class can express. Colors, spacing, radius, and typography roles
 // live on Bloom components + NativeWind token classes.
 const styles = StyleSheet.create({
-  flex: {
-    flex: 1
-  },
   scrollContainer: {
     alignItems: 'stretch',
     paddingBottom: 40
   },
-  bannerContainer: {
-    height: BANNER_HEIGHT,
-    position: 'relative',
-    overflow: 'hidden'
-  },
   avatarRow: {
     flexDirection: 'row',
     alignItems: 'flex-end',
-    marginTop: AVATAR_OVERLAP,
     justifyContent: 'space-between',
     zIndex: 2
   },
@@ -411,33 +462,57 @@ const styles = StyleSheet.create({
     marginBottom: 2
   },
   bio: {
-    fontSize: 16,
+    fontSize: 15,
     marginTop: 10,
-    lineHeight: 22
+    lineHeight: 20
+  },
+  profileActions: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    flexWrap: 'wrap',
+    justifyContent: 'flex-end'
+  },
+  details: {
+    marginTop: 12
+  },
+  metadataRow: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    columnGap: 16,
+    rowGap: 4
+  },
+  metadataEntry: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+    flexShrink: 1
+  },
+  metadataText: {
+    fontSize: 15,
+    lineHeight: 20,
+    flexShrink: 1
   },
   statsRow: {
-    width: '100%',
     flexDirection: 'row',
+    flexWrap: 'wrap',
     alignItems: 'center',
-    marginTop: 14,
-    justifyContent: 'space-between'
+    gap: 10,
+    marginTop: 12
   },
   statItem: {
-    flex: 1,
+    flexDirection: 'row',
     alignItems: 'center',
-    minWidth: 50,
-    marginBottom: 12
+    gap: 4
   },
-  statLabel: {
-    fontSize: 14,
-    marginBottom: 2,
-    textAlign: 'center'
+  statNumber: {
+    fontSize: 15,
+    lineHeight: 20,
+    fontWeight: '700'
   },
-  statAmount: {
-    fontSize: 24,
-    fontWeight: 'bold',
-    textAlign: 'center',
-    letterSpacing: 0.2
+  statLabel: {
+    fontSize: 15,
+    lineHeight: 20
   },
   // Error state layout
   errorTitle: {