editar productos

components/ProductForm.vue

@@ -13,13 +13,13 @@
       </BFormCheckbox>
     </div>
     <br />
-    <FormHeader title="General" />
-    <p class="help-text">
-      Estos son los datos básicos de un producto. Procura completar el mayor
+    <FormHeader 
+      title="General" 
+      subtitle="Estos son los datos básicos de un producto. Procura completar el mayor
       número de campos posible. Los campos señalados con asterisco (*) son
       obligatorios, los demás son opcionales. Si el producto o servicio no tiene
-      precio asignado, aparecerá "Consultar precio".
-    </p>
+      precio asignado, aparecerá 'Consultar precio'."
+    />
     <fieldset class="fieldset">
       <div class="cont">
         <FormInput
@@ -109,12 +109,11 @@
       </div>
     </fieldset>
     <fieldset class="fieldset">
-      <FormHeader title="Categorías" />
-      <p class="help-text">
-        Estos datos ayudan a que tu producto sea encontrado por los clientes.
+      <FormHeader 
+        title="Categorías" 
+        subtitle="Estos datos ayudan a que tu producto sea encontrado por los clientes.
         Procura completar el mayor número de campos posibles. Los campos
-        señalados con asterisco (*) son obligatorios, los demás son opcionales.
-      </p>
+        señalados con asterisco (*) son obligatorios, los demás son opcionales."/>
 
       <div class="cont-col">
         <label for="category">Categoría*</label>
@@ -312,10 +311,10 @@ export default {
   }
 
   label, .label {
-    text-align: left;
-    color: $color-navy;
-    font-weight: $bold;
-    font-size: $xs;
+    color: $color-primary;
+    font-weight: $medium;
+    font-size: $s;
+    display: block;
   }
 
   .textarea {
@@ -356,12 +355,11 @@ export default {
 }
 .help-text {
   text-align: left;
-  font-size: $xs;
+  font-size: $s;
   text-align: justify;
   font-weight: $regular;
-  color: $color-greylayout;
+  color: $color-primary;
   font-family: $font-secondary;
-  background-color: $color-light;
   margin-bottom: 20px;
   margin-top: 6px;
 

pages/editar/productos/[id].vue

@@ -131,10 +131,11 @@ export default {
   align-items: center;
 }
 .title {
-  color: $color-navy;
-  font-size: $xxl;
-  margin-bottom: 60px;
   width: 60%;
+  font-size: $h2;
+  color: $color-primary;
+  margin-bottom: 10px;
+  text-align: left;
 }
 .help-text {
   border: 1px solid $color-greylayout;

pages/editar/productos/crear.vue

@@ -74,9 +74,9 @@ export default {
   align-items: center;
 }
 .title {
-  color: $color-navy;
-  font-size: $xxl;
-  margin-bottom: 60px;
+  font-size: $h2;
+  color: $color-primary;
+  margin-bottom: 10px;
   text-align: left;
   @include desktop {
     width: 40%;