feat(MyPurchaseOrders): looks more similar to other tables

JSConfCL · Sep 30, 2024 · 90265e2 · 90265e2
1 parent bcfedee
commit 90265e2
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 27 deletions.
diff --git a/app/components/MyPurchaseOrders/MyPurchaseOrders.tsx b/app/components/MyPurchaseOrders/MyPurchaseOrders.tsx
@@ -12,7 +12,7 @@ import {
   TableHeader,
   TableRow,
 } from "~/components/ui/table";
-import { formatDate } from "~/utils/date";
+import { formatCalendarDate } from "~/utils/date";
 import { formatCurrency } from "~/utils/numbers";
 import { groupedTickets } from "~/utils/purchase-order";
 import { urls } from "~/utils/urls";
@@ -53,15 +53,22 @@ export const MyPurchaseOrders = () => {
           <CardContent>
             <Table>
               <TableHeader>
-                <TableRow>
-                  <TableHead>Id</TableHead>
-                  <TableHead>Evento</TableHead>
-                  <TableHead className="md:table-cell">Descripción</TableHead>
-                  <TableHead className="hidden md:table-cell">
-                    Método de Pago
+                <TableRow className="hover:bg-transparent">
+                  <TableHead className="h-[52px] text-center text-base font-bold text-white">
+                    Id
+                  </TableHead>
+                  <TableHead className="h-[52px] text-center text-base font-bold text-white">
+                    Evento
+                  </TableHead>
+                  <TableHead className="h-[52px] text-center text-base font-bold text-white">
+                    Descripción
+                  </TableHead>
+                  <TableHead className="h-[52px] text-center text-base font-bold text-white">
+                    Fecha
+                  </TableHead>
+                  <TableHead className="h-[52px] text-center text-base font-bold text-white">
+                    Precio
                   </TableHead>
-                  <TableHead className="hidden sm:table-cell">Fecha</TableHead>
-                  <TableHead className="text-right">Precio</TableHead>
                 </TableRow>
               </TableHeader>
               <TableBody>
@@ -118,11 +125,8 @@ export const MyPurchaseOrders = () => {
                           </div>
                         </Link>
                       </TableCell>
-                      <TableCell className="hidden sm:table-cell">
-                        {purchaseOrder.paymentPlatform}
-                      </TableCell>
                       <TableCell className="hidden md:table-cell">
-                        {formatDate(purchaseOrder.createdAt as string)}
+                        {formatCalendarDate(purchaseOrder.createdAt as string)}
                       </TableCell>
                       <TableCell className="text-right">
                         {purchaseOrder.finalPrice

diff --git a/app/components/MyPurchaseOrders/MyPurchaseOrdersLoadingSkeleton.tsx b/app/components/MyPurchaseOrders/MyPurchaseOrdersLoadingSkeleton.tsx
@@ -21,15 +21,22 @@ export const MyPurchaseOrdersLoadingSkeleton = () => {
         <CardContent>
           <Table>
             <TableHeader>
-              <TableRow>
-                <TableHead>Id</TableHead>
-                <TableHead>Evento</TableHead>
-                <TableHead className="md:table-cell">Descripción</TableHead>
-                <TableHead className="hidden md:table-cell">
-                  Método de Pago
+              <TableRow className="hover:bg-transparent">
+                <TableHead className="h-[52px] text-center text-base font-bold text-white">
+                  Id
+                </TableHead>
+                <TableHead className="h-[52px] text-center text-base font-bold text-white">
+                  Evento
+                </TableHead>
+                <TableHead className="h-[52px] text-center text-base font-bold text-white">
+                  Descripción
+                </TableHead>
+                <TableHead className="h-[52px] text-center text-base font-bold text-white">
+                  Fecha
+                </TableHead>
+                <TableHead className="h-[52px] text-center text-base font-bold text-white">
+                  Precio
                 </TableHead>
-                <TableHead className="hidden sm:table-cell">Fecha</TableHead>
-                <TableHead className="text-right">Precio</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
@@ -41,16 +48,13 @@ export const MyPurchaseOrdersLoadingSkeleton = () => {
                   <TableCell>
                     <Skeleton className="h-4 w-48" />
                   </TableCell>
-                  <TableCell className="sm:table-cell">
+                  <TableCell>
                     <Skeleton className="h-4 w-64" />
                   </TableCell>
-                  <TableCell className="hidden sm:table-cell">
-                    <Skeleton className="h-4 w-24" />
-                  </TableCell>
-                  <TableCell className="hidden md:table-cell">
+                  <TableCell>
                     <Skeleton className="h-4 w-24" />
                   </TableCell>
-                  <TableCell className="flex items-center justify-end">
+                  <TableCell>
                     <Skeleton className="h-4 w-24" />
                   </TableCell>
                 </TableRow>