From 64ade4d59522b97a66db21abb30484871ae6a9c3 Mon Sep 17 00:00:00 2001
From: ncoronel <ncoronel@quo.ar>
Date: Wed, 8 Jul 2026 09:05:15 -0300
Subject: [PATCH] feat(profile-form): refactor form-group styles and update
 error handling in checkout form

---
 .../components/profile-form/profile-form.scss |  8 -----
 .../checkout-data-step.component.html         | 32 +++++++++----------
 .../checkout-data-step.component.scss         | 23 -------------
 src/styles.scss                               | 23 +++++++++++++
 4 files changed, 39 insertions(+), 47 deletions(-)

diff --git a/src/app/features/store/pages/account-page/components/profile-form/profile-form.scss b/src/app/features/store/pages/account-page/components/profile-form/profile-form.scss
index d414629..2cbd674 100644
--- a/src/app/features/store/pages/account-page/components/profile-form/profile-form.scss
+++ b/src/app/features/store/pages/account-page/components/profile-form/profile-form.scss
@@ -4,14 +4,6 @@
   gap: 16px;
   max-width: 500px;
 }
-.form-group {
-  display: flex;
-  flex-direction: column;
-}
-.form-group label {
-  font-size: 13px;
-  color: #666666;
-}
 .form-actions {
   display: flex;
   gap: 12px;
diff --git a/src/app/features/store/pages/checkout-page/checkout-data-step.component.html b/src/app/features/store/pages/checkout-page/checkout-data-step.component.html
index 5d5a2c7..c856920 100644
--- a/src/app/features/store/pages/checkout-page/checkout-data-step.component.html
+++ b/src/app/features/store/pages/checkout-page/checkout-data-step.component.html
@@ -5,9 +5,9 @@
   (ngSubmit)="submit()"
 >
   <div class="checkout-form__fields">
-    <div class="form-field">
-      <label class="form-field__label" for="checkout-nombre">
-        Nombre y Apellido <span class="form-field__required" aria-hidden="true">*</span>
+    <div class="form-group">
+      <label for="checkout-nombre">
+        Nombre y Apellido <span class="required" aria-hidden="true">*</span>
       </label>
       <app-input
         id="checkout-nombre"
@@ -19,13 +19,13 @@
         (valueChange)="updateField('nombre', $event)"
       />
       @if (getControlError('nombre'); as errorMessage) {
-        <small class="form-field__error">{{ errorMessage }}</small>
+        <small class="error">{{ errorMessage }}</small>
       }
     </div>
 
-    <div class="form-field">
-      <label class="form-field__label" for="checkout-email">
-        Email <span class="form-field__required" aria-hidden="true">*</span>
+    <div class="form-group">
+      <label for="checkout-email">
+        Email <span class="required" aria-hidden="true">*</span>
       </label>
       <app-input
         id="checkout-email"
@@ -37,13 +37,13 @@
         (valueChange)="updateField('email', $event)"
       />
       @if (getControlError('email'); as errorMessage) {
-        <small class="form-field__error">{{ errorMessage }}</small>
+        <small class="error">{{ errorMessage }}</small>
       }
     </div>
 
-    <div class="form-field">
-      <label class="form-field__label" for="checkout-dni">
-        DNI <span class="form-field__required" aria-hidden="true">*</span>
+    <div class="form-group">
+      <label for="checkout-dni">
+        DNI <span class="required" aria-hidden="true">*</span>
       </label>
       <app-input
         id="checkout-dni"
@@ -55,13 +55,13 @@
         (valueChange)="updateField('dni', $event)"
       />
       @if (getControlError('dni'); as errorMessage) {
-        <small class="form-field__error">{{ errorMessage }}</small>
+        <small class="error">{{ errorMessage }}</small>
       }
     </div>
 
-    <div class="form-field">
-      <label class="form-field__label" for="checkout-telefono">
-        Telefono <span class="form-field__required" aria-hidden="true">*</span>
+    <div class="form-group">
+      <label for="checkout-telefono">
+        Telefono <span class="required" aria-hidden="true">*</span>
       </label>
       <app-input
         id="checkout-telefono"
@@ -73,7 +73,7 @@
         (valueChange)="updateField('telefono', $event)"
       />
       @if (getControlError('telefono'); as errorMessage) {
-        <small class="form-field__error">{{ errorMessage }}</small>
+        <small class="error">{{ errorMessage }}</small>
       }
     </div>
   </div>
diff --git a/src/app/features/store/pages/checkout-page/checkout-data-step.component.scss b/src/app/features/store/pages/checkout-page/checkout-data-step.component.scss
index ac34eb5..ed67b7e 100644
--- a/src/app/features/store/pages/checkout-page/checkout-data-step.component.scss
+++ b/src/app/features/store/pages/checkout-page/checkout-data-step.component.scss
@@ -23,26 +23,3 @@
     max-width: 290px;
   }
 }
-
-.form-field {
-  display: grid;
-  gap: 0.35rem;
-
-  &__label {
-    font-size: 0.8rem;
-    font-weight: 600;
-    color: var(--bs-secondary, #6c757d);
-    letter-spacing: 0;
-  }
-
-  &__required {
-    color: var(--bs-danger, #dc3545);
-    margin-left: 2px;
-  }
-
-  &__error {
-    font-size: 0.75rem;
-    color: var(--bs-danger, #dc3545);
-  }
-}
-
diff --git a/src/styles.scss b/src/styles.scss
index e5c08bf..87b2c6b 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -33,4 +33,27 @@ label {
   margin-bottom: 0.375rem;
   font-size: 13px;
   font-weight: 400;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  label {
+    font-size: 14px;
+    color: #888;
+    font-weight: normal;
+    margin-bottom: 0;
+  }
+
+  .required {
+    color: var(--color-danger, #dc3545);
+    margin-left: 2px;
+  }
+
+  .error {
+    font-size: 0.75rem;
+    color: var(--color-danger, #dc3545);
+  }
 }
\ No newline at end of file