refactor: change design

kdurek · Jul 30, 2024 · cd52594 · cd52594
1 parent 3346485
commit cd52594
Show file tree

Hide file tree

Showing 13 changed files with 27 additions and 52 deletions.
diff --git a/src/app/(app)/page.tsx b/src/app/(app)/page.tsx
@@ -1,6 +1,6 @@
 import { getTranslations } from 'next-intl/server';
 
-import { Dashboard } from '@/components/dashboard/dashboard';
+import { UsersBalances } from '@/components/expense/users-balances';
 import { Section } from '@/components/layout/section';
 import { api } from '@/trpc/server';
 
@@ -12,7 +12,7 @@ export default async function DashboardPage() {
 
   return (
     <Section title={t('title')}>
-      <Dashboard />
+      <UsersBalances />
     </Section>
   );
 }
diff --git a/src/app/(auth)/logowanie/page.tsx b/src/app/(auth)/logowanie/page.tsx
@@ -13,11 +13,9 @@ export default async function LoginPage() {
   const t = await getTranslations('LoginPage');
 
   return (
-    <div className="p-4">
-      <div className="flex flex-col items-center gap-4 rounded-md border p-4">
-        <h1 className="max-w-md">{t('title')}</h1>
-        <LoginButton />
-      </div>
+    <div className="flex flex-col items-center gap-4 p-4">
+      <h1 className="max-w-md">{t('title')}</h1>
+      <LoginButton />
     </div>
   );
 }
diff --git a/src/components/dashboard/dashboard.tsx b/src/components/dashboard/dashboard.tsx
diff --git a/src/components/expense/expense-add.tsx b/src/components/expense/expense-add.tsx
@@ -3,9 +3,5 @@
 import { ExpenseForm } from '@/components/expense/expense-form';
 
 export function ExpenseAdd() {
-  return (
-    <div className="rounded-md border p-4">
-      <ExpenseForm />
-    </div>
-  );
+  return <ExpenseForm />;
 }
diff --git a/src/components/expense/expense-edit.tsx b/src/components/expense/expense-edit.tsx
@@ -14,9 +14,5 @@ export function ExpenseEdit({ expenseId }: ExpenseEditProps) {
     return 'Nie znaleziono wydatku';
   }
 
-  return (
-    <div className="rounded-md border p-4">
-      <ExpenseForm expense={expense} />
-    </div>
-  );
+  return <ExpenseForm expense={expense} />;
 }
diff --git a/src/components/expense/expense.tsx b/src/components/expense/expense.tsx
@@ -14,9 +14,5 @@ export function Expense({ expenseId }: ExpenseProps) {
     return 'Nie znaleziono wydatku';
   }
 
-  return (
-    <div className="rounded-md border p-4">
-      <ExpenseDetail expense={expense} />
-    </div>
-  );
+  return <ExpenseDetail expense={expense} />;
 }
diff --git a/src/components/expense/expenses-list-item.tsx b/src/components/expense/expenses-list-item.tsx
@@ -35,7 +35,7 @@ export function ExpenseListItem({ expense }: ExpenseListItemProps) {
     : new Decimal(0);
 
   return (
-    <div className="flex items-start justify-between overflow-hidden p-4">
+    <div className="flex items-start justify-between overflow-hidden py-4">
       <div className="overflow-hidden text-start">
         <div className="line-clamp-1">{expense.name}</div>
         <div className="line-clamp-1 text-sm text-muted-foreground">{format(expense.createdAt, 'EEEEEE, d MMMM')}</div>

diff --git a/src/components/expense/expenses-list.tsx b/src/components/expense/expenses-list.tsx
@@ -22,7 +22,7 @@ export function ExpensesList({ expenses, withDetails }: ExpensesListProps) {
 
   if (!withDetails) {
     return (
-      <div className="divide-y rounded-md border">
+      <div className="divide-y">
         {expenses.map((expense) => (
           <ExpenseListItem key={expense.id} expense={expense} />
         ))}
@@ -31,7 +31,7 @@ export function ExpensesList({ expenses, withDetails }: ExpensesListProps) {
   }
 
   return (
-    <div className="divide-y rounded-md border">
+    <div className="divide-y">
       {expenses.map((expense) => (
         <Drawer key={expense.id}>
           <DrawerTrigger asChild>

diff --git a/src/components/expense/expenses-search.tsx b/src/components/expense/expenses-search.tsx
@@ -6,11 +6,13 @@ import { FullScreenLoading } from '@/components/layout/loading';
 
 export default function ExpensesSearch() {
   return (
-    <div className="space-y-4">
-      <ExpenseSearchInput />
+    <>
+      <div className="py-4">
+        <ExpenseSearchInput />
+      </div>
       <Suspense fallback={<FullScreenLoading />}>
         <ExpensesSearchList />
       </Suspense>
-    </div>
+    </>
   );
 }
diff --git a/src/components/expense/users-balances.tsx b/src/components/expense/users-balances.tsx
@@ -19,7 +19,7 @@ interface UserCardProps {
 
 function UserBalanceCard({ image, name, credit, debt }: UserCardProps) {
   return (
-    <div className="flex items-center gap-4 p-4">
+    <div className="flex items-center gap-4 py-4">
       <Avatar>
         <AvatarImage src={image ?? undefined} />
         <AvatarFallback>{getInitials(name)}</AvatarFallback>
@@ -43,7 +43,7 @@ export function UsersBalances() {
   const otherUsersBalances = balances.filter((balance) => balance.user.id !== currentUser.id);
 
   return (
-    <div className="divide-y rounded-md border">
+    <div className="divide-y">
       <UserBalanceCard
         image={currentUserBalance?.user.image}
         name={currentUserBalance?.user.name}

diff --git a/src/components/layout/section.tsx b/src/components/layout/section.tsx
@@ -7,17 +7,18 @@ import { HydrateClient } from '@/trpc/server';
 interface SectionProps {
   children: ReactNode;
   title?: string | null;
+  className?: HTMLDivElement['className'];
 }
 
-export function Section({ title, children }: SectionProps) {
+export function Section({ title, children, className }: SectionProps) {
   return (
     <HydrateClient>
       {title && (
         <Heading variant="h1" className="p-4">
           {title}
         </Heading>
       )}
-      <section className={cn('p-4', title && 'pt-0')}>{children}</section>
+      <section className={cn('p-4', title && 'pt-0', className)}>{children}</section>
     </HydrateClient>
   );
 }
diff --git a/src/components/settings/settings.tsx b/src/components/settings/settings.tsx
@@ -26,25 +26,26 @@ export function Settings() {
         <LogoutButton />
       </div>
 
-      <div className="space-y-2 rounded-md border p-4">
+      <div className="space-y-2">
         <Heading variant="h2">Aktywna grupa</Heading>
         <GroupSelect />
       </div>
 
-      <div className="space-y-2 rounded-md border p-4">
+      <div className="space-y-2">
         <Heading variant="h2">Język</Heading>
         <LocaleSelect />
       </div>
 
       {user?.id === group.adminId && (
-        <div className="space-y-2 rounded-md border p-4">
+        <div className="space-y-2">
           <Heading variant="h2">Członkowie</Heading>
           <MembersList />
         </div>
       )}
 
       {user?.id === group.adminId && (
-        <div className="rounded-md border p-4">
+        <div className="space-y-2">
+          <Heading variant="h2">Powiadomienia</Heading>
           <Notification />
         </div>
       )}

diff --git a/src/components/user/profile.tsx b/src/components/user/profile.tsx
@@ -6,9 +6,5 @@ import { api } from '@/trpc/react';
 export function Profile() {
   const [currentUser] = api.user.current.useSuspenseQuery();
 
-  return (
-    <div className="rounded-md border p-4">
-      <UserForm user={currentUser} />
-    </div>
-  );
+  return <UserForm user={currentUser} />;
 }