Skip to content

Commit a76c5a2

Browse files
committed
style: match Perps date format and section header styling
- Change date format from 'Oct 5, 2025' to 'Oct 27' (no year) to match Perps - Fix date formatting using Intl.DateTimeFormat instead of toLocaleDateString - Update section header font size from BodySm to BodyMd (16px) - Update section header font weight from medium (500) to semibold (600) - Update section header padding to px-2, pt-3 to match Perps - Enable sticky section headers for better scroll experience - Add back item wrapper with py-1 padding - Add back contentContainerStyle padding - Maintain consistent UX between Predict and Perps transaction views
1 parent 858831c commit a76c5a2

File tree

1 file changed

+9
-7
lines changed

1 file changed

+9
-7
lines changed

app/components/UI/Predict/views/PredictTransactionsView/PredictTransactionsView.tsx

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ interface ActivitySection {
2323

2424
/**
2525
* Groups activities by individual day (Today, Yesterday, or specific date)
26+
* Matches Perps date format: "Today", "Yesterday", or "Jan 15"
2627
* @param timestamp Unix timestamp in seconds
2728
* @param todayTime Start of today in milliseconds
2829
* @param yesterdayTime Start of yesterday in milliseconds
@@ -46,12 +47,13 @@ const getDateGroupLabel = (
4647
return strings('predict.transactions.yesterday');
4748
}
4849

49-
// Format all other dates as "MMM D, YYYY" (e.g., "Oct 5, 2025")
50-
return activityDate.toLocaleDateString(undefined, {
50+
// Format all other dates as "MMM D" (e.g., "Jan 15") to match Perps
51+
const formatter = new Intl.DateTimeFormat('en-US', {
5152
month: 'short',
5253
day: 'numeric',
53-
year: 'numeric',
5454
});
55+
56+
return formatter.format(activityDate);
5557
};
5658

5759
const PredictTransactionsView: React.FC<PredictTransactionsViewProps> = ({
@@ -207,10 +209,10 @@ const PredictTransactionsView: React.FC<PredictTransactionsViewProps> = ({
207209

208210
const renderSectionHeader = useCallback(
209211
({ section }: { section: ActivitySection }) => (
210-
<Box twClassName="bg-default px-4 py-2">
212+
<Box twClassName="bg-default px-2 pt-3">
211213
<Text
212-
variant={TextVariant.BodySm}
213-
twClassName="text-alternative font-medium"
214+
variant={TextVariant.BodyMd}
215+
twClassName="text-alternative font-semibold"
214216
>
215217
{section.title}
216218
</Text>
@@ -255,7 +257,7 @@ const PredictTransactionsView: React.FC<PredictTransactionsViewProps> = ({
255257
contentContainerStyle={tw.style('p-2')}
256258
showsVerticalScrollIndicator={false}
257259
style={tw.style('flex-1')}
258-
stickySectionHeadersEnabled={false}
260+
stickySectionHeadersEnabled
259261
removeClippedSubviews
260262
maxToRenderPerBatch={10}
261263
updateCellsBatchingPeriod={50}

0 commit comments

Comments
 (0)