feat: Modification du design du bouton de la certitude

src/assets/base.css

@@ -11,6 +11,11 @@
   --header-size: var(--header-size-small);
 
   --footer-size: 64px;
+
+  --color-red: #c82606;
+  --color-orange: #df6a0f;
+  --color-light-green: #70bf41;
+  --color-dark-green: #00882b;
 }
 
 /* semantic color variables for this project */
@@ -127,3 +132,8 @@ header svg.color-text [fill]:not([fill=none]) {
 strong {
   font-weight: bold;
 }
+
+.bg-red { background: var(--color-red); }
+.bg-orange { background: var(--color-orange); }
+.bg-light-green { background: var(--color-light-green); }
+.bg-dark-green { background: var(--color-dark-green); }

src/components/Score.vue

@@ -171,15 +171,15 @@ const weightCertitudes = ref(new Array(certitudes.length).fill(0));
 const weightAllCertitudes = ref(0);
 const certitudeResult = ref(selectCertitudeResult());
 function selectCertitudeResult() {
-  return certitudesResults
-    .find(
-      (result) =>
-        result.weight_min <= weightAllCertitudes.value &&
-        result.weight_max >= weightAllCertitudes.value,
-    )
-    ?.translations.find(
-      (translation) => translation.languages_code == language,
-    );
+  const certitude = certitudesResults.find(
+    (result) =>
+      result.weight_min <= weightAllCertitudes.value &&
+      result.weight_max >= weightAllCertitudes.value,
+  );
+  const certitudeTrad = certitude?.translations.find(
+    (translation) => translation.languages_code == language,
+  );
+  return { ...certitudeTrad, color: certitude.color };
 }
 function displayCertitudeQuestions() {
   displayCertitude.value = !displayCertitude.value;
@@ -257,18 +257,13 @@ watch(weightAllCertitudes, () => {
               </li>
             </ul>
           </div>
-          <div v-if="displayCertitude" class="certitude_result">
-            <button @click="displayCertitudeQuestions">
-              <span
-                >Niveau de certitude : {{ certitudeResult?.niveau }}<br />
-                <span v-html="certitudeResult?.description"></span>
-              </span>
-              <span class="cross">✖️</span>
-            </button>
-          </div>
-          <div v-else class="certitude_result">
-            <button @click="displayCertitudeQuestions">
-              ➕ Ajout un niveau de certitude
+          <div class="certitude_result">
+            Niveau de certitude
+            <button
+              @click="displayCertitudeQuestions"
+              :class="'bg-' + certitudeResult.color"
+            >
+              <span>{{ certitudeResult?.niveau }} </span>
             </button>
           </div>
           <!--button class="btn download" @click="() => share()" v-if="!sharing">
@@ -327,16 +322,26 @@ watch(weightAllCertitudes, () => {
 
 <style lang="sass" scoped>
 .certitude_result
+  padding-top: 1rem
+  font-size: 1.1rem
   text-align: center
+  color: var(--color-highlight-text)
+  & *
+    font-weight: 800
   button
     display: flex
+    width: 100%
+    color: var(--color-highlight-text)
     justify-content: center
     flex-direction: row
     align-items: center
-    margin: 1rem auto 0
+    margin: .2rem auto 0
+    border-radius: 0
+    border: none
+    font-weight: 900 !important
+    font-size: 1.1rem
     padding: .3rem
-    .cross
-      margin-left: .5rem
+
 .spin
   bottom: 1.5rem
   right: 1.5rem