feat: Styling heard, totals

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;
+}

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>
+      <div className={styles.header_container}>
-        <span>Jacinta Perez Gomez</span><br/>
+        <div className={styles.subheader_container}>
-        <span>Avenida Siempre Viva 123</span><br/>
+          <div className={styles.info_row}>
-        <span>+57 41233454</span>
+            <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>
+      <div className={styles.orderline_container}>
-        <span>SubTotal: $200.000 COP</span><br/>
+        <div className={styles.totals_container}>
-        <span>Domicilio: $10.000 COP</span><br/>
+
-        <span>Total: $210.000 COP</span>
+          <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>