imporved pricing page, better display for Login/register modal form

web/themes/custom/materiotheme/vuejs/components/Content/Product.vue

@@ -1,29 +1,39 @@
 <template>
   <article class="product">
     <header>
-      <h1 v-html="product.title" />
+      <h1 v-html="product.title"/>
     </header>
     <section class="content">
-      <div class="description" v-html="product.body" />
+      <div class="description" v-html="product.body"/>
+      <!-- <div class="price-description" v-html="product.price_description"/> -->
     </section>
     <aside v-if="!isAdherent">
-      <button
+      <div
+        class="variation"
         v-for="variation in product.variations"
-        type="button"
-        name="addtocart"
-        @click.stop="checkaddtocart"
+        :key="variation.id"
       >
-        Commander {{ variation.price.value }}
-      </button>
+        <div class="variation-description" v-html="variation.description"/>
+        <button
+          type="button"
+          name="addtocart"
+          @click.stop="checkaddtocart"
+        >
+          Commander
+        </button>
+      </div>
+
     </aside>
 
     <Modal
       v-if="showLoginModal"
       @close="closeModal"
-      :styles="{width:'500px', height:'100%'}"
+      :styles="{width:'500px', height:'300px'}"
     >
-      <h2>Please login or register before continue.</h2>
-      <LoginRegister @onLogedIn="onLogedIn" @onRegistered="onRegistered" />
+      <section id="pricing-modal-login-register">
+        <h2>{{ $t("materio.Please login or create a new account before ordering") }}</h2>
+        <LoginRegister @onLogedIn="onLogedIn" @onRegistered="onRegistered" />
+      </section>
     </Modal>
 
   </article>

web/themes/custom/materiotheme/vuejs/components/Helper/LoginRegister.vue

@@ -1,9 +1,13 @@
 <template>
   <div id="login-register">
-    <h3>Login</h3>
-    <LoginForm @onLogedIn="onLogedIn" />
-    <h3>Register</h3>
-    <RegisterForm @onRegistered="onRegistered" />
+    <section class="login">
+      <h3>{{ $t("default.Login") }} </h3>
+      <LoginForm @onLogedIn="onLogedIn" />
+    </section>
+    <section class="register">
+      <h3>{{ $t("default.Register a new account") }}</h3>
+      <RegisterForm @onRegistered="onRegistered" />
+    </section>
   </div>
 </template>