wip

app/home/(user)/_components/order/cart-totals.tsx

@@ -67,7 +67,7 @@ export default function CartTotals({ order }: {
       </div>
       <div className="h-px w-full border-b border-gray-200 my-4" />
       <div className="flex items-center justify-between text-ui-fg-base mb-2 txt-medium ">
-        <span><Trans i18nKey="cart:orderConfirmed.total" /></span>
+        <span className="font-bold"><Trans i18nKey="cart:orderConfirmed.total" /></span>
         <span
           className="txt-xlarge-plus"
           data-testid="cart-total"

app/home/(user)/_components/order/order-completed.tsx

@@ -1,6 +1,7 @@
 import { Trans } from '@kit/ui/trans';
 import { PageBody, PageHeader } from '@kit/ui/page';
 import { StoreOrder } from "@medusajs/types"
+import Divider from "@modules/common/components/divider"
 
 import CartTotals from "./cart-totals"
 import OrderDetails from "./order-details"
@@ -14,8 +15,10 @@ export default async function OrderCompleted({
   return (
     <PageBody>
       <PageHeader title={<Trans i18nKey="cart:orderConfirmed.title" />} />
+      <Divider />
       <div className="grid grid-cols-1 small:grid-cols-[1fr_360px] gap-x-40 lg:px-4 gap-y-6">
         <OrderDetails order={order} />
+        <Divider />
         <OrderItems order={order} />
         <CartTotals order={order} />
       </div>

app/home/(user)/_components/order/order-item.tsx

@@ -11,13 +11,13 @@ export default function OrderItem({ item, currencyCode }: {
 }) {
   return (
     <TableRow className="w-full" data-testid="product-row">
-      {/* <TableCell className="!pl-0 p-4 w-24">
+      {/* <TableCell className="px-6 w-24">
         <div className="flex w-16">
           <Thumbnail thumbnail={item.thumbnail} size="square" />
         </div>
       </TableCell> */}
 
-      <TableCell className="text-left">
+      <TableCell className="text-left px-6">
         <span
           className="txt-medium-plus text-ui-fg-base"
           data-testid="product-name"
@@ -27,8 +27,8 @@ export default function OrderItem({ item, currencyCode }: {
         <LineItemOptions variant={item.variant} data-testid="product-variant" />
       </TableCell>
 
-      <TableCell className="!pr-0">
-        <span className="!pr-0 flex flex-col items-end h-full justify-center">
+      <TableCell className="px-6">
+        <span className="flex flex-col items-end h-full justify-center">
           <span className="flex gap-x-1 ">
             <span className="text-ui-fg-muted">
               {item.quantity}x{" "}

app/home/(user)/_components/order/order-items.tsx

@@ -2,7 +2,6 @@ import repeat from "@lib/util/repeat"
 import { StoreOrder } from "@medusajs/types"
 import { Table, TableBody } from "@kit/ui/table"
 
-import Divider from "@modules/common/components/divider"
 import SkeletonLineItem from "@modules/skeletons/components/skeleton-line-item"
 import OrderItem from "./order-item"
 import { Heading } from "@kit/ui/heading"
@@ -19,8 +18,7 @@ export default function OrderItems({ order }: {
         <Trans i18nKey="cart:orderConfirmed.summary" />
       </Heading>
       <div className="flex flex-col">
-        <Divider className="!mb-0" />
-        <Table>
+        <Table className="rounded-lg border border-separate">
           <TableBody data-testid="products-table">
             {items?.length
               ? items