Header tailwind fix

components/account/AccountIcon.vue

@@ -1,5 +1,5 @@
 <template>
-  <nuxt-link :to="link" class="account-link">
+  <nuxt-link :to="localePath({ path: link })"  class="account-link">
     <div class="account-link__icon">
       <icon :name="icon" />
     </div>
@@ -8,28 +8,28 @@
 </template>
 <script lang="ts">
 export default {
-  name: 'AccountIcon',
+  name: "AccountIcon",
   props: {
     icon: {
       required: true,
-      type: String
+      type: String,
     },
     label: {
       required: false,
       type: String,
-      default: ''
+      default: "",
     },
     link: {
       required: false,
       type: String,
-      default: ''
-    }
-  }
-}
+      default: "",
+    },
+  },
+};
 </script>
 <style lang="scss">
 .account-link {
-  @apply flex w-auto cursor-pointer flex-col items-center justify-center card card-body bg-base-100 p-5 ;
+  @apply flex w-auto cursor-pointer flex-col items-center justify-center card card-body bg-base-100 p-5;
   &__icon {
     @apply my-5 rounded-full bg-primary p-4 text-4xl text-white;
   }

components/global/header/HeaderUser.vue

@@ -16,7 +16,7 @@ const auth = useShopinvaderService('auth')
 const user = auth?.getUser()
 const next = () => {
   const localePath = useLocalePath()
-  auth?.loginRedirect(localePath({name: 'account'}))
+  auth?.loginRedirect(localePath({name: 'login'}))
 }
 </script>
 <style lang="scss">

components/product/ProductVariants.vue

@@ -12,6 +12,7 @@
         v-if="product?.images?.[0]"
         :image="product.images[0]"
         class="hit__image"
+        :class="{'hit__image--selected': selected === product.id}"
       >
       </product-image>
       <div class="hit__title">
@@ -36,9 +37,16 @@ export default {
       return this.variants.filter((variant) => variant.id !== null)
     }
   },
+  data() {
+    return {
+      selected: null as number | null
+    }
+  },
   methods: {
     selectVariant(product: Product) {
+      this.selected = product.id
       this.$emit('selectVariant', product)
+
     },
     mouseoverVariant(product: Product) {
       this.$emit('mouseover', product)
@@ -56,6 +64,9 @@ export default {
     @apply w-1/5 pr-2;
     .hit__image {
       @apply cursor-pointer border p-2;
+      &--selected {
+        @apply border-primary;
+      }
     }
     .hit__title {
       @apply text-center text-xs font-bold uppercase;

models/Product.ts

@@ -137,6 +137,8 @@ export class Product extends Model {
     let price = data?.price?.[priceLists?.[0]] || null
     if(price) {
       this.price = new ProductPrice(price) || null
+    } else {
+      this.price = data?.price?.default || null
     }
 
     this.images = [] as ProductImageSet[]

tailwind.config.ts

@@ -62,7 +62,7 @@ export default {
       {
         mytheme: {
           fontFamily: 'Montserrat,"sanssecondaryerif"',
-          primary: '#13263d',
+          primary: colors.primary.DEFAULT,
           secondary: '#dca11d',
           accent: '#def2ff',
           neutral: '#42536d',