From 8ef1f733780c547fddb65e5c308645cf4bd30728 Mon Sep 17 00:00:00 2001
From: aserrador <alejandro.ayala@onecluster.org>
Date: Sat, 24 Jan 2026 20:35:16 -0500
Subject: [PATCH] feat: Styling heard, totals

---
 .../catalog/components/order/Order.module.css | 47 +++++++++++++++++++
 src/pages/catalog/components/order/Order.tsx  | 45 ++++++++++++++----
 2 files changed, 83 insertions(+), 9 deletions(-)

diff --git a/src/pages/catalog/components/order/Order.module.css b/src/pages/catalog/components/order/Order.module.css
index d147266..a4ed178 100644
--- a/src/pages/catalog/components/order/Order.module.css
+++ b/src/pages/catalog/components/order/Order.module.css
@@ -1,4 +1,37 @@
 
+.header_container {
+    background: #f5f5f5;
+    margin: 1.5rem auto;
+    padding: 0.5rem 0.5rem 0.5rem 0.5rem;
+    border-radius: 12px;
+    text-align: right;
+}
+
+.subheader_container {
+    display: flex;
+    flex-direction: column;
+    background: white;
+    margin: 0.5rem auto;
+    padding: 0.5rem 0.5rem 0.5rem 0.5rem;
+    border-radius: 12px;
+    text-align: left;
+}
+
+.info_row {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.label {
+  font-weight: 800;
+  color: #555;
+}
+
+.value {
+  color: #111;
+}
+
 .orderline_container {
     background: #f5f5f5;
     margin: 1.5rem auto;
@@ -14,6 +47,14 @@
     text-align: center;
 }
 
+.totals_container {
+    background: white;
+    margin: 0.5rem auto;
+    padding: 0.5rem 0.5rem 0.5rem 0.5rem;
+    border-radius: 12px;
+    text-align: right;
+}
+
 .comment_wrapper {
     position: relative;
     margin: 1.5rem auto;
@@ -78,3 +119,9 @@
     color: #f44336;
     font-weight: 600;
 }
+
+.order_buttons {
+    display: flex;
+    flex-direction: column;
+    gap: 1.0rem;
+}
diff --git a/src/pages/catalog/components/order/Order.tsx b/src/pages/catalog/components/order/Order.tsx
index 82c2752..83a2b94 100644
--- a/src/pages/catalog/components/order/Order.tsx
+++ b/src/pages/catalog/components/order/Order.tsx
@@ -13,10 +13,23 @@ const Order = ({productLines = []} : OrderProps) => {
   return (
     <div className={styles.container}>
       <h1>Compra #5428</h1>
-      <div>
-        <span>Jacinta Perez Gomez</span><br/>
-        <span>Avenida Siempre Viva 123</span><br/>
-        <span>+57 41233454</span>
+      <div className={styles.header_container}>
+        <div className={styles.subheader_container}>
+          <div className={styles.info_row}>
+            <span className={styles.label}>Consumidor:</span>
+            <span className={styles.value}>Jacinta Perez Gomez</span>
+          </div>
+
+          <div className={styles.info_row}>
+            <span className={styles.label}>Dirección:</span>
+            <span className={styles.value}>Avenida Siempre Viva 123</span>
+          </div>
+
+          <div className={styles.info_row}>
+            <span className={styles.label}>Contacto:</span>
+            <span className={styles.value}>+5741233454</span>
+          </div>
+        </div>
       </div>
 
       <div className={styles.orderline_container}>
@@ -34,10 +47,24 @@ const Order = ({productLines = []} : OrderProps) => {
         }
       </div>
 
-      <div>
-        <span>SubTotal: $200.000 COP</span><br/>
-        <span>Domicilio: $10.000 COP</span><br/>
-        <span>Total: $210.000 COP</span>
+      <div className={styles.orderline_container}>
+        <div className={styles.totals_container}>
+
+          <div className={styles.info_row}>
+            <span className={styles.label}>Subtotal:</span>
+            <span className={styles.value}>$200.000 COP</span>
+          </div>
+
+          <div className={styles.info_row}>
+            <span className={styles.label}>Domicilio:</span>
+            <span className={styles.value}>$10.000 COP</span>
+          </div>
+
+          <div className={styles.info_row}>
+            <span className={styles.label}>Total:</span>
+            <span className={styles.value}>$210.000 COP</span>
+          </div>
+        </div>
       </div>
 
       <div className={styles.comment_wrapper}>
@@ -57,7 +84,7 @@ const Order = ({productLines = []} : OrderProps) => {
         </div>
       </div>
 
-      <div>
+      <div className={styles.order_buttons}>
         <button>Pagar</button>
         <button>Credito</button>
       </div>