feat: Modification du design du bouton de la certitude

src/assets/base.css

@@ -6,11 +6,16 @@
   --color-black: #000000;
   --color-green: rgb(118, 148, 67);
 
-  --header-size-small: 64px;
+  --header-size-small: 48px;
   --header-size-big: 128px;
   --header-size: var(--header-size-small);
 
-  --footer-size: 64px;
+  --footer-size: 48px;
+
+  --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
@@ -418,7 +423,7 @@ label
   justify-content: center
 
   h2
-    font-size: 2rem
+    font-size: 1.5rem
     font-weight: bold
     line-height: 2.4rem
     & + h2
@@ -449,10 +454,10 @@ label
 
 .gradient
   padding: 0 1rem
-  height: 3rem
+  height: 2.5rem
   background-image: linear-gradient(to right, red, red, rgb(255, 255, 0), rgb(255, 255, 0), green, green)
   display: flex
-  margin: 2.5rem auto
+  margin: 1.5rem auto
   align-items: center
   border-radius: 3px
   max-width: 30rem
@@ -482,8 +487,8 @@ label
       content: ""
       border: 1px solid var(--color-highlight-text)
       border-radius: 3px
-      top: -2.8rem
-      bottom: -1.5rem
+      top: -1rem
+      bottom: -1rem
       position: absolute
       width: 100%
       font-weight: bold
@@ -492,7 +497,7 @@ label
       justify-content: center
 
     &::after
-      content: attr(data-title)
+      content: ""
       position: absolute
       font-size: 1rem
       top: -2rem