From a942369193002218b3c0f154d8efe34b33c3b121 Mon Sep 17 00:00:00 2001
From: Sebastien Castiel <sebastien@castiel.me>
Date: Tue, 9 Jan 2024 07:45:21 -0500
Subject: [PATCH] Fix how dates are displayed (Fix #33)

---
 src/app/groups/[groupId]/expenses/expense-list.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/app/groups/[groupId]/expenses/expense-list.tsx b/src/app/groups/[groupId]/expenses/expense-list.tsx
index 7ee8329..f618700 100644
--- a/src/app/groups/[groupId]/expenses/expense-list.tsx
+++ b/src/app/groups/[groupId]/expenses/expense-list.tsx
@@ -29,7 +29,7 @@ export function ExpenseList({
       <div
         key={expense.id}
         className={cn(
-          'border-t flex justify-between pl-6 pr-2 py-4 text-sm cursor-pointer hover:bg-accent',
+          'border-t flex justify-between pl-6 pr-2 py-4 text-sm cursor-pointer hover:bg-accent gap-1',
           expense.isReimbursement && 'italic',
         )}
         onClick={() => {
@@ -42,10 +42,7 @@ export function ExpenseList({
           </div>
           <div className="text-xs text-muted-foreground">
             Paid by <strong>{getParticipant(expense.paidById)?.name}</strong> on{' '}
-            {expense.expenseDate.toLocaleDateString('en-US', {
-              dateStyle: 'medium',
-            })}{' '}
-            for{' '}
+            {formatDate(expense.expenseDate)} for{' '}
             {expense.paidFor.map((paidFor, index) => (
               <Fragment key={index}>
                 {index !== 0 && <>, </>}
@@ -87,3 +84,10 @@ export function ExpenseList({
     </p>
   )
 }
+
+function formatDate(date: Date) {
+  return date.toLocaleDateString('en-US', {
+    dateStyle: 'medium',
+    timeZone: 'UTC',
+  })
+}