some style changes and cookies persistance added

components/CookieUsageNotification.vue

@@ -28,6 +28,7 @@ export default {
 
   mounted() {
     const auth = useAuthStore();
+    console.log("auth.cookiesAccepted", auth.cookiesAccepted);
     if (auth.cookiesAccepted === true) {
       this.show = false;
     } else {

components/ProductCardDetails.vue

@@ -485,7 +485,7 @@ export default {
   h4 {
     font-size: $h4;
     font-weight: $medium;
-    color: $color-navy;
+    color: black;
     margin-top: 5px;
     text-transform: uppercase;
     text-decoration: none;

nuxt.config.ts

@@ -20,6 +20,9 @@ export default defineNuxtConfig({
       })
     }
   ],
+  pinia: {
+    storesDirs: ['./stores/**'],
+  },
   css: [
     '~/assets/scss/main.scss',
     'bootstrap/dist/css/bootstrap.min.css',

pages/admin/cooperativas.vue

@@ -152,7 +152,6 @@ export default {
 
 <style lang="scss" scoped>
 .container {
-  margin-top: 40px;
   margin-bottom: 80px;
 }
 .title {

pages/admin/importar.vue

@@ -87,7 +87,7 @@ export default {
 
 <style lang="scss" scoped>
 .container {
-  margin-top: 40px;
+  // margin-top: 40px;
   margin-bottom: 80px;
 }
 .title {

pages/editar/productos/[id].vue

@@ -122,7 +122,7 @@ export default {
 
 <style lang="scss" scoped>
 .container {
-  margin-top: 40px;
+  // margin-top: 40px;
   margin-bottom: 80px;
 }
 .edit-product {

pages/editar/productos/crear.vue

@@ -65,7 +65,7 @@ export default {
 
 <style lang="scss" scoped>
 .container {
-  margin-top: 40px;
+  // margin-top: 40px;
   margin-bottom: 80px;
 }
 .add-product {

pages/editar/productos/importar.vue

@@ -305,7 +305,7 @@ export default {
 
 <style lang="scss" scoped>
 .container {
-  margin-top: 40px;
+  // margin-top: 40px;
   margin-bottom: 80px;
 }
 

pages/editar/productos/index.vue

@@ -255,7 +255,7 @@ export default {
   align-items: center;
 }
 .container {
-  margin-top: 40px;
+  // margin-top: 40px;
   margin-bottom: 80px;
 }
 

pages/productoras/[id].vue

@@ -52,14 +52,18 @@
                 class="div-action-img"
                 src="@/assets/img/latienda-telefono.svg"
               />
-              <span
+              <div class="div-action-tels">
+                <a :href="`tel:+${coop?.phone}`" class="tel-link"><span>{{ coop?.phone }}</span></a>
+                <a :href="`tel:+${coop?.mobile}`" class="tel-link"><span>{{ coop?.mobile }}</span></a>
+              </div>
+              <!-- <span
                 >{{ coop?.phone }} <br />
                 {{ coop?.mobile }}</span
-              >
+              > -->
             </div>
             <div v-if="coop?.email" class="div-action mail">
               <img class="div-action-img" src="@/assets/img/latienda-email.svg" />
-              <span>{{ coop?.email }}</span>
+              <a :href="`mailto:${coop?.email}`" class="mail-link"><span>{{ coop?.email }}</span></a>
             </div>
             
             <!-- <div v-if="coop?.city" class="div-action location">
@@ -73,7 +77,7 @@
       
       </div>
     </div>
-    <div class="c-tabs-container">
+    <!-- <div class="c-tabs-container">
       <div class="c-tabs">
         <div>
           <BCard no-body class="b-card">
@@ -116,7 +120,7 @@
           </BCard>
         </div>
       </div>
-    </div>
+    </div> -->
     <div v-if="products && products.length" class="c-catalogo">
       <div class="title-container">
         <div class="title-lines"></div>
@@ -309,6 +313,7 @@ export default {
   gap: 4rem;
   width: 100%;
   padding: 4rem 4rem;
+  margin-bottom: 1rem;
   border-radius: var(--rounded-3xl, 24px);
   background: linear-gradient(
       180deg,
@@ -387,6 +392,12 @@ export default {
     margin-right: 8px;
     margin-left: 5px;
   }
+
+  .div-action-tels {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
 }
 
 .c-image-container {

pages/productos/[id].vue

@@ -77,7 +77,6 @@ export default {
 
 <style lang="scss" scoped>
 .c-container {
-  margin-top: 40px;
   margin-bottom: 80px;
   @include mobile {
     margin-top: 80px;

stores/auth.ts

@@ -1,5 +1,4 @@
 import { defineStore } from 'pinia'
-import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 
 export const useAuthStore = defineStore('auth', {
   state: () => ({
@@ -12,25 +11,6 @@ export const useAuthStore = defineStore('auth', {
     cookiesAreAccepted: false,
   }),
   
-  //persist: true, // TODO: Enable persistence. Cookies will be stored 'auth' 👉🏻 https://prazdevs.github.io/pinia-plugin-persistedstate/frameworks/nuxt
-  
-  // persist: {
-  //   key: 'authentication-cookie',
-  //   storage: piniaPluginPersistedstate.cookies({
-  //     expires: 14, 
-  //     sameSite: 'strict',
-  //     secure: !import.meta.dev,
-  //   }),
-  //   paths: [
-  //     'id',
-  //     'name',
-  //     'email',
-  //     'role',
-  //     'access',
-  //     'refreshTokens',
-  //     'cookiesAreAccepted',
-  //   ],
-  // },
 
   getters: {
     isAuthenticated: (state) => !!state.access,
@@ -103,5 +83,7 @@ export const useAuthStore = defineStore('auth', {
         this.refreshTokens = payload.refresh
       }
     }
+  },
+  persist: true,
 }
-})
+)