feat: OrderLineStyling

src/pages/catalog/components/order/Order.module.css

@@ -0,0 +1,80 @@
+
+.orderline_container {
+    background: #f5f5f5;
+    margin: 1.5rem auto;
+    padding: 0.5rem 0.5rem 0.5rem 0.5rem;
+    border-radius: 12px;
+}
+
+.not_products_container {
+    background: white;
+    margin: 0.5rem auto;
+    padding: 0.5rem 0.5rem 0.5rem 0.5rem;
+    border-radius: 12px;
+    text-align: center;
+}
+
+.comment_wrapper {
+    position: relative;
+    margin: 1.5rem auto;
+    max-width: 600px;
+    width: 100%;
+}
+
+.comment_textarea_with_icon {
+    width: 100%;
+    min-height: 100px;
+    padding: 1rem 1rem 1rem 3rem;
+    border: 2px solid #e0e0e0;
+    border-radius: 12px;
+    font-family: inherit;
+    font-size: 0.95rem;
+    resize: vertical;
+    transition: all 0.3s ease;
+    background: #fafafa;
+    outline: none;
+    box-sizing: border-box;
+}
+
+.comment_textarea_with_icon:focus {
+    border-color: #e0e0e0;
+    background: #ffffff;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
+}
+
+.comment_textarea_with_icon::placeholder {
+    color: #999;
+    font-style: italic;
+}
+
+.comment_icon {
+    position: absolute;
+    top: 1rem;
+    left: 1rem;
+    color: #999;
+    pointer-events: none;
+    transition: color 0.3s ease;
+}
+
+.comment_textarea_with_icon:focus + .comment_icon {
+    color: #e0e0e0;
+}
+
+.comment_char_counter {
+    text-align: right;
+    font-size: 0.8rem;
+    color: #666;
+    margin-top: 0.25rem;
+    font-weight: 500;
+    transition: color 0.3s ease;
+}
+
+.comment_char_counter.warning {
+    color: #ff9800;
+    font-weight: 600;
+}
+
+.comment_char_counter.error {
+    color: #f44336;
+    font-weight: 600;
+}

src/pages/catalog/components/order/Order.tsx

@@ -1,6 +1,7 @@
 import OrderLine from './components/order_line/OrderLine';
 import styles from './Order.module.css'
 import type { ProductLine } from '../../../../types.ts'
+import { useState } from 'react';
 
 type OrderProps = {
   productLines: ProductLine[];
@@ -8,6 +9,7 @@ type OrderProps = {
 
 const Order = ({productLines = []} : OrderProps) => {
 
+  const [comment, setComment] = useState("")
   return (
     <div className={styles.container}>
       <h1>Compra #5428</h1>
@@ -17,7 +19,7 @@ const Order = ({productLines = []} : OrderProps) => {
         <span>+57 41233454</span>
       </div>
 
-      <div>
+      <div className={styles.orderline_container}>
         { productLines.length > 0 ? (
 
           productLines.map((line) => {
@@ -25,7 +27,9 @@ const Order = ({productLines = []} : OrderProps) => {
           }
 
           )) : (
-            <p>No hay productos en el pedido</p>
+            <div className={styles.not_products_container}>
+              <h4>No hay productos en el pedido.</h4>
+            </div>
           )
         }
       </div>
@@ -35,9 +39,22 @@ const Order = ({productLines = []} : OrderProps) => {
         <span>Domicilio: $10.000 COP</span><br/>
         <span>Total: $210.000 COP</span>
       </div>
-      <div>
-        <label>Comentario:</label>
-        <input type="text"/>
+
+      <div className={styles.comment_wrapper}>
+        <textarea
+          className={styles.comment_textarea_with_icon}
+          placeholder="Agrega instrucciones especiales para tu pedido..."
+          rows={3}
+          maxLength={200}
+          value={comment}
+          onChange={(e) => setComment(e.target.value)}
+        />
+        <svg className={styles.comment_icon} width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"></path>
+        </svg>
+        <div className={`${styles.comment_char_counter} ${comment.length > 150 ? styles.warning : ''}`}>
+          {comment.length}/200 caracteres
+        </div>
       </div>
 
       <div>