Improve UI of expense list

spliit-app · Jan 17, 2024 · c4de3f6 · c4de3f6
1 parent ff6b84f
commit c4de3f6
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 6 deletions.
diff --git a/src/app/groups/[groupId]/expenses/expense-list.tsx b/src/app/groups/[groupId]/expenses/expense-list.tsx
@@ -92,15 +92,19 @@ export function ExpenseList({
       const groupExpenses = groupedExpensesByDate[expenseGroup]
       if (!groupExpenses) return null
       return (
-        <Fragment key={expenseGroup}>
-          <div className={'border-t text-md pl-3 py-2 font-semibold'}>
+        <div key={expenseGroup}>
+          <div
+            className={
+              'text-muted-foreground text-xs pl-4 sm:pl-6 py-1 font-semibold sticky top-16 bg-white dark:bg-[#1b1917]'
+            }
+          >
             {expenseGroup}
           </div>
           {groupExpenses.map((expense: any) => (
             <div
               key={expense.id}
               className={cn(
-                'border-t flex justify-between px-4 sm:pr-2 sm:pl-6 py-4 text-sm cursor-pointer hover:bg-accent gap-1 items-stretch',
+                'flex justify-between sm:mx-6 px-4 sm:rounded-lg sm:pr-2 sm:pl-4 py-4 text-sm cursor-pointer hover:bg-accent gap-1 items-stretch',
                 expense.isReimbursement && 'italic',
               )}
               onClick={() => {
@@ -159,7 +163,7 @@ export function ExpenseList({
               </Button>
             </div>
           ))}
-        </Fragment>
+        </div>
       )
     })
   ) : (

diff --git a/src/app/groups/[groupId]/expenses/page.tsx b/src/app/groups/[groupId]/expenses/page.tsx
@@ -55,7 +55,7 @@ export default async function GroupExpensesPage({
           </CardHeader>
         </div>
 
-        <CardContent className="p-0">
+        <CardContent className="p-0 pt-2 pb-4 sm:pb-6 flex flex-col gap-4 relative">
           <Suspense
             fallback={[0, 1, 2].map((i) => (
               <div

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -77,7 +77,7 @@ export default function RootLayout({
           disableTransitionOnChange
         >
           <ProgressBar />
-          <header className="fixed top-0 left-0 right-0 h-16 flex justify-between bg-white dark:bg-gray-950 bg-opacity-50 dark:bg-opacity-50 p-2 border-b backdrop-blur-sm">
+          <header className="fixed top-0 left-0 right-0 h-16 flex justify-between bg-white dark:bg-gray-950 bg-opacity-50 dark:bg-opacity-50 p-2 border-b backdrop-blur-sm z-50">
             <Link
               className="flex items-center gap-2 hover:scale-105 transition-transform"
               href="/"