edit profile andcoop

components/CompanyForm.vue

@@ -7,11 +7,11 @@
       :ok-variant="modalColor"> {{ modalText }}
   </BModal>
   <form class="form" @submit.prevent="submitCompany">
-    <FormHeader title="general" />
-    <p class="help-text">
-      Estos son los datos básicos de la cooperativa. Procura completar el mayor
-      número de campos posible.
-    </p>
+    <FormHeader 
+      class="f-header"
+      title="General" 
+      subtitle="Estos son los datos básicos de la cooperativa. Procura completar el mayor
+      número de campos posible." />
     <fieldset class="fieldset fieldset-general">
       <div class="cont">
         <FormInput 
@@ -81,13 +81,13 @@
         />
       </div>
       <div class="cont-col">
-        <label for="imagen">Logo</label>
+        <label for="imagen" class="label">Logo</label>
         <ClientOnly>
           <FormInputImage :image-url="form.logo" @change="handleImage($event)" />
         </ClientOnly>
       </div>
       <div class="cont-col">
-        <label for="tags-basic">Palabras clave</label>
+        <label for="tags-basic" class="label">Palabras clave</label>
         <BFormTags
           v-model="form.tags"
           placeholder="Añade palabras clave"
@@ -95,19 +95,20 @@
         />
       </div>
       <div class="cont-col">
-        <label for="">Descripción</label>
+        <label for="" class="label">Descripción</label>
         <textarea v-model="form.description" class="textarea" type="text" />
       </div>
     </fieldset>
 
-    <FormHeader title="tienda online" />
-    <p class="help-text">
-      Indica si la cooperativa dispone de tienda online. En caso afirmativo,
+    <FormHeader 
+      class="f-header"
+      title="Tienda Online"
+      subtitle="Indica si la cooperativa dispone de tienda online. En caso afirmativo,
       indica su url y la plataforma utilizada en el seleccionable. Si utilizas
       WooCommerce, puedes indicar su API para sincronizar automáticamente todos
       los productos.
-      <a href="#">Sigue estos pasos para obtener la API.</a>
-    </p>
+      <a href='#'>Sigue estos pasos para obtener la API.</a>"
+      />
     <fieldset class="fieldset">
       <div class="cont">
         <div>
@@ -130,7 +131,7 @@
         >
       </div>
       <div class="cont-col">
-        <label for="select-shop">Plataforma</label>
+        <label for="select-shop" class="label">Plataforma</label>
         <BFormSelect id="select-shop" v-model="form.platform"  name="" >
           <option selected disabled value="">Plataforma</option>
           <option
@@ -163,11 +164,11 @@
       </div>
     </fieldset>
 
-    <FormHeader title="localización" />
-    <p class="help-text">
-      La geolocalización nos ayudará a mostrar los productos a aquellos usuarios
-      que estén cerca de tu posición.
-    </p>
+    <FormHeader 
+      class="f-header"
+      title="Localización"
+      subtitle="La geolocalización nos ayudará a mostrar los productos a aquellos usuarios
+      que estén cerca de tu posición." />
     <fieldset class="fieldset">
     <!-- TODO: Arreglar este componente: -->
       <!-- <GoogleAddress :value="form.address" @added-data="getPlace" /> -->
@@ -183,20 +184,20 @@
       </div>
     </fieldset>
 
-    <FormHeader title="términos y condiciones" />
-    <p class="help-text help-text-terms">
-      En estos textos podrás indicar las condiciones de venta o condiciones de
+    <FormHeader 
+      class="f-header"
+      title="Términos y Condiciones" 
+      subtitle="En estos textos podrás indicar las condiciones de venta o condiciones de
       envío de la cooperativa. Si no tienes claro qué texto añadir, puedes hacer
-      <a @click="loadText">click aquí para cargar un texto predefinido</a>
+      <a @click='loadText'>click aquí para cargar un texto predefinido</a>
       que podrás editar. Ten en cuenta que al clicar se borrará el contenido de
-      ambos campos.
-    </p>
+      ambos campos.."/>
 
     <fieldset class="fieldset">
       <div class="cont-col">
-        <label for="">Condiciones de venta</label>
+        <label for="" class="label">Condiciones de venta</label>
         <textarea v-model="form.sale_terms" class="textarea" type="text" />
-        <label for="">Condiciones de envío</label>
+        <label for="" class="label">Condiciones de envío</label>
         <textarea v-model="form.shipping_terms" class="textarea" type="text" />
         <FormInput
           v-model="form.shipping_cost"
@@ -359,6 +360,9 @@ export default {
 
 <style lang="scss" scoped>
 .form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   @include desktop {
     width: 40%;
   }
@@ -368,16 +372,18 @@ export default {
   @include mobile {
     width: 90%;
   }
-
+  .f-header {
+    margin-bottom: 1rem;
+  }
   .imagenInput {
     font-size: $s;
   }
 
   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 {
@@ -391,6 +397,7 @@ export default {
   }
 }
 .fieldset {
+  width: 100%;
   margin-bottom: 70px;
   align-items: left;
 }