WIP MMCM

src/views/address-check.vue

@@ -1,5 +1,5 @@
 <template>
-  <h1 class="product_name_area primary_color">Indiquez votre adresse de livraison (domicile, travail...) :</h1>
+  <div class="step_title">Indiquez votre adresse de livraison (domicile, travail...) :</div>
 
   <div class="input-group mb-3">
     <div class="input-group-text">

src/views/delivery-option-step-1.vue

@@ -1,11 +1,10 @@
 <template>
-
-  <div class="card">
-    <div class="card-header"><h2>Avec ou sans ordonnance ?</h2></div>
-    <div class="card-body">
-      <div class="row text-start">
-        <div class="col-lg-6">
-          <h4>Avec ordonnance (mon pharmacien n'a pas mon ordonnance) :</h4>
+  <div class="step_title"> Avec ou sans ordonnance ?</div>
+  <div class="row">
+    <div class="col-lg-6">
+      <div class="card">
+        <div class="card-header fw-bold">Avec ordonnance (mon pharmacien n'a pas mon ordonnance) :</div>
+        <div class="card-body text-start">
           <ol>
             <li>Le livreur vient chercher l’original de mon ordonnance, carte vitale et carte mutuelle (si j’en ai
               une) dans une enveloppe fermée.
@@ -16,26 +15,26 @@
             <li>Mon pharmacien remet mes médicaments et mes documents au livreur.</li>
             <li>Le livreur me livre à mon adresse mes médicaments et mes documents originaux.</li>
           </ol>
-
+          <div class="text-center">
+            <button class="btn btn-primary" @click="goNextStep(true)"><i class="fa-regular fa-circle-check fa-fw"></i>
+              Choisir
+            </button>
+          </div>
         </div>
-        <div class="col-lg-6">
-          <h4>Sans ordonnance (mon pharmacien a déjà mon ordonnance) :</h4>
+      </div>
+    </div>
+    <div class="col-lg-6">
+      <div class="card">
+        <div class="card-header fw-bold">Sans ordonnance (mon pharmacien a déjà mon ordonnance)</div>
+        <div class="card-body text-start">
           <ol>
             <li>Le livreur se rend chez mon pharmacien pour la collecte de mes médicaments.</li>
             <li>Le livreur me livre à l’adresse renseignée.</li>
           </ol>
-        </div>
-      </div>
-
-      <div class="row text-center">
-        <div class="col-lg-6">
-          <button class="btn btn-primary" @click="goNextStep(true)"><i class="fa-regular fa-circle-check fa-fw"></i>
-            Choisir
-          </button>
-        </div>
-        <div class="col-lg-6">
-          <button class="btn btn-primary" @click="goNextStep(false)"><i class="fa-regular fa-circle-check fa-fw"></i>Choisir
-          </button>
+          <div class="text-center">
+            <button class="btn btn-primary" @click="goNextStep(false)"><i class="fa-regular fa-circle-check fa-fw"></i> Choisir
+            </button>
+          </div>
         </div>
       </div>
     </div>

src/views/delivery-option-step-2.vue

@@ -1,12 +1,14 @@
 <template>
-  <div class="card">
-    <div class="card-header"><h2>Mode de livraison</h2></div>
-    <div class="card-body row">
-      <div v-for="(product, i) in store.productList" class="col-lg-6">
-        <h4>{{ product.name }}</h4>
-        <p>{{ text[i].short }}</p>
-        <p>{{ text[i].long }}</p>
-        <button class="btn btn-primary" @click="goNexStep(product.id)">{{ formatPrice(product.price)}} TTC</button>
+  <div class="step_title">Mode de livraison</div>
+  <div class="row">
+    <div class="col-lg-6" v-for="(product, i) in store.productList">
+      <div class="card">
+        <div class="card-header fw-bold">{{ product.name }}</div>
+        <div class="card-body">
+          <p>{{ text[i].short }}</p>
+          <p>{{ text[i].long }}</p>
+          <button class="btn btn-primary" @click="goNexStep(product.id)">{{ formatPrice(product.price) }} TTC</button>
+        </div>
       </div>
     </div>
   </div>

src/views/delivery-option-step-3.vue

@@ -1,21 +1,16 @@
 <template>
-  <div class="card">
-    <div class="card-header"><h4>Date de livraison des médicaments :</h4></div>
-    <div class="card-body">
-
-      <div class="input-group has-validation">
-        <Datepicker v-model="dateDelivery" autoApply @update:modelValue="isError = false"  model-type="timestamp" select-text="Choisir" cancel-text="Annuler"
-                    monthNameFormat="long" format="dd MMMM yyyy" :minDate="tomorrow" :enableTimePicker="false"
-                    :disabledWeekDays="[6, 0]" :format-locale="fr" locale="fr-FR"/>
-        <button class="btn btn-primary" @click="gotToNextStep"><i class="fa-regular fa-circle-check fa-fw"></i> Valider
-        </button>
-        <div v-if="isError" class="invalid-feedback d-block text-start">
-          Merci de renseigner la date
-        </div>
-      </div>
+  <div class="step_title">Date de livraison des médicaments :</div>
+  <div class="input-group has-validation">
+    <Datepicker v-model="dateDelivery" autoApply @update:modelValue="isError = false" model-type="timestamp"
+                select-text="Choisir" cancel-text="Annuler"
+                monthNameFormat="long" format="dd MMMM yyyy" :minDate="tomorrow" :enableTimePicker="false"
+                :disabledWeekDays="[6, 0]" :format-locale="fr" locale="fr-FR"/>
+    <button class="btn btn-primary" @click="gotToNextStep"><i class="fa-regular fa-circle-check fa-fw"></i> Valider
+    </button>
+    <div v-if="isError" class="invalid-feedback d-block text-start">
+      Merci de renseigner la date
     </div>
   </div>
-
 </template>
 
 <script>

src/views/delivery-option-summary.vue

@@ -1,16 +1,14 @@
 <template>
-  <div class="card">
-    <div class="card-header"><h4>Recapitulatif</h4></div>
-    <div class="card-body">
-      <div><strong>Adresse de livraison : </strong>{{ store.fullAddress }}</div>
-      <div><strong>Mode de livraison : </strong>{{ store.deliveryMethod }}</div>
-      <div><strong>Collecte de l'ordonnnace : </strong>
-        <span v-if="store.widthPrescription">Oui</span>
-        <span v-else>Non</span>
-      </div>
-      <div><strong>Date de livraison des medicaments : </strong>{{ store.dateDeliveryString }}</div>
-      <button class="btn btn-primary" @click="addToCart">Valider</button>
+  <div class="step_title">Recapitulatif :</div>
+  <div class="text-start">
+    <div class="mb-2"><strong>Adresse de livraison : </strong>{{ store.fullAddress }}</div>
+    <div class="mb-2"><strong>Mode de livraison : </strong>{{ store.deliveryMethod }}</div>
+    <div class="mb-2"><strong>Collecte de l'ordonnnace : </strong>
+      <span v-if="store.widthPrescription">Oui</span>
+      <span v-else>Non</span>
     </div>
+    <div class="mb-2"><strong>Date de livraison des medicaments : </strong>{{ store.dateDeliveryString }}</div>
+    <button class="btn btn-primary" @click="addToCart"><i class="fa-regular fa-circle-check fa-fw"></i> Ajouter au panier</button>
   </div>
 </template>