edit profile andcoop

components/CompanyForm.vue

@@ -7,11 +7,11 @@
       :ok-variant="modalColor"> {{ modalText }}
   </BModal>
   <form class="form" @submit.prevent="submitCompany">
-    <FormHeader title="general" />
+    <FormHeader 
-    <p class="help-text">
+      class="f-header"
-      Estos son los datos básicos de la cooperativa. Procura completar el mayor
+      title="General" 
-      número de campos posible.
+      subtitle="Estos son los datos básicos de la cooperativa. Procura completar el mayor
-    </p>
+      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" />
+    <FormHeader 
-    <p class="help-text">
+      class="f-header"
-      Indica si la cooperativa dispone de tienda online. En caso afirmativo,
+      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>
+      <a href='#'>Sigue estos pasos para obtener la API.</a>"
-    </p>
+      />
     <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" />
+    <FormHeader 
-    <p class="help-text">
+      class="f-header"
-      La geolocalización nos ayudará a mostrar los productos a aquellos usuarios
+      title="Localización"
-      que estén cerca de tu posición.
+      subtitle="La geolocalización nos ayudará a mostrar los productos a aquellos usuarios
-    </p>
+      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" />
+    <FormHeader 
-    <p class="help-text help-text-terms">
+      class="f-header"
-      En estos textos podrás indicar las condiciones de venta o condiciones de
+      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.
+      ambos campos.."/>
-    </p>
 
     <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-primary;
-    color: $color-navy;
+    font-weight: $medium;
-    font-weight: $bold;
+    font-size: $s;
-    font-size: $xs;
+    display: block;
   }
 
   .textarea {
@@ -391,6 +397,7 @@ export default {
   }
 }
 .fieldset {
+  width: 100%;
   margin-bottom: 70px;
   align-items: left;
 }

components/FormHeader.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="header">
     <h2 class="title">{{ title }}</h2>
-    <p v-html="subtitle" class="subtitle"></p>
+    <p v-if="subtitle" v-html="subtitle" class="subtitle"></p>
     <div class="title-lines"></div>
   </div>
 </template>

components/FormInput.vue

@@ -62,7 +62,7 @@ export default {
   // width: 100%; //Utilizar este width para controlar el ancho desde el elemento padre
   width: 45%;
   @include mobile {
-    width: 80%;
+    width: 100%;
   }
   // @include desktop {
   //   width: 25%;
@@ -75,7 +75,7 @@ input {
   border-radius: 4px;
   padding: 10px 5px;
   display: block;
-  margin-bottom: 10px;
+  margin: 8px 0 16px 0;
   font-weight: $regular;
   outline: none;
 }
@@ -83,8 +83,8 @@ input {
 label {
   text-align: left;
   color: $color-primary;
-  font-weight: $bold;
+  font-weight: $medium;
-  font-size: $xs;
+  font-size: $s;
   display: block;
 }
 </style>

components/NavBarEditar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="navsearch_container container-fluid">
+  <div class="navsearch_container">
     <NuxtLink to="/editar/perfil">Mi perfil</NuxtLink>
     <NuxtLink :class="{ disabled: !coopIsValidated }" to="/editar/cooperativa"
       >Productora</NuxtLink
@@ -63,24 +63,23 @@ export default {
 
 <style lang="scss" scoped>
 .navsearch_container {
-  border-bottom: 3px solid $color-grey-nav;
+  border-bottom: 1px solid $color-consumo-base;
   text-align: center;
   padding: 20px 20px;
+  display: flex;
+  justify-content: center;
+  gap: 2rem;
 
   a {
     font-size: $m;
-    font-weight: $bold;
+    color: $color-primary;
-    color: $color-navy;
     text-decoration: none;
+    text-transform: uppercase;
   }
-  a:nth-child(1):after,
+  a:focus {
-  a:nth-child(2):after,
+    font-weight: $bold;
-  a:nth-child(3):after,
-  a:nth-child(4):after {
-    color: $color-navy;
-    content: '\22EE';
-    margin: 0.5rem;
   }
+  
   @include mobile {
     display: none;
   }

layouts/editar.vue

@@ -1,10 +1,12 @@
 <template>
   <div>
     <NavBar />
-    <NavBarEditar v-if="isManager" />
+    <div class="container-fluid">
-    <NavBarEditarUser v-else/>
+      <NavBarEditar v-if="isManager" />
-    <NuxtPage />
+      <NavBarEditarUser v-else/>
-    <CookieUsageNotification />
+      <NuxtPage />
+      <CookieUsageNotification />
+    </div>
     <Footer />
   </div>
 </template>
@@ -25,3 +27,22 @@ export default {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+.container-fluid {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: linear-gradient($color-consumo-base-light, $color-bg-light);
+  border-radius: 1rem;
+  padding: 2rem;
+  margin-bottom: 2rem;
+  gap: 3rem;
+  color: $color-primary;
+
+  @include mobile {
+    margin-top: 7rem;
+  }
+}
+</style>

pages/editar/cooperativa/index.vue

@@ -24,30 +24,24 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.container {
-  margin-top: 40px;
-  margin-bottom: 80px;
-}
 .edit-coop {
   display: flex;
   flex-direction: column;
   align-items: center;
 }
 .title {
-  color: $color-navy;
+  color: $color-primary;
-  font-size: $xxl;
+  font-size: $h2;
-  margin-bottom: 50px;
+  margin-bottom: 40px;
-  text-align: left;
+  text-align: center;
+  width: 100%;
+  @include mobile {
+    width: 80%;
+    margin-top: 70px;
+  }
   @include desktop {
     width: 40%;
   }
-  @include tablet {
-    width: 60%;
-  }
-  @include mobile {
-    width: 90%;
-    margin-top: 70px;
-  }
 }
 
 .form-container {

pages/editar/perfil/contrasena.vue

@@ -1,5 +1,5 @@
 <template>
-  <BContainer class="container-fluid">
+  <BContainer class="container">
     <BRow align-h="center" class="change-password">
       <BCol class="change-password">
         <form class="form"  autocomplete="off" @submit.prevent="submitUser">
@@ -92,22 +92,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.container-fluid {
-  margin: 5rem 0 5rem 0;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  background: linear-gradient($color-consumo-base-light, $color-bg-light);
-  border-radius: 1rem;
-  padding: 2rem;
-  gap: 3rem;
-  color: $color-primary;
-
-  @include mobile {
-    margin-top: 7rem;
-  }
-}
 
 .change-password {
   display: flex;
@@ -142,6 +126,9 @@ export default {
     font-weight: $bold;
     font-size: $xs;
   }
+  .submit-btn {
+    margin-top: 1rem;
+  }
 }
 .error {
   color: crimson;

pages/editar/perfil/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <BContainer class="container-fluid">
+  <BContainer class="container">
     <BRow align-h="start" class="edit-profile">
       <BCol class="edit-profile">
         <form class="form" @submit.prevent="submitUser">
@@ -107,24 +107,7 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped> 
-.container-fluid {
-  margin: 5rem 0 5rem 0;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  background: linear-gradient($color-consumo-base-light, $color-bg-light);
-  border-radius: 1rem;
-  padding: 2rem;
-  gap: 3rem;
-  color: $color-primary;
-
-  @include mobile {
-    margin-top: 7rem;
-  }
-}
-
 .edit-profile {
   display: flex;
   flex-direction: column;