refactor score label

Author: QuentinMadura

front/package-lock.json

@@ -7,10 +7,7 @@ const message = ref("")
 
 const sendFeedback = (event: Event) => {
   event.preventDefault()
-
   if (feedback.value) {
-    // Emit the feedback data to the parent component or handle it as needed
-    console.log("Feedback submitted:", { email: email.value, feedback: feedback.value })
     message.value = "Merci pour votre retour !"
     email.value = ""
     feedback.value = ""

front/src/components/forms/FeedbackForm.vue

@@ -17,17 +17,17 @@ const props = defineProps({
 })
 
 const scoreBg: Record<number, string> = {
-  0: "bg-scale-0",
-  1: "bg-scale-1",
-  2: "bg-scale-2",
-  3: "bg-scale-3",
-  4: "bg-scale-4",
-  5: "bg-scale-5",
-  6: "bg-scale-6",
-  7: "bg-scale-7",
-  8: "bg-scale-8",
-  9: "bg-scale-9",
-  10: "bg-scale-10"
+  0: "bg-scale-0 border-scale-0",
+  1: "bg-scale-1 border-scale-1",
+  2: "bg-scale-2 border-scale-2",
+  3: "bg-scale-3 border-scale-3",
+  4: "bg-scale-4 border-scale-4",
+  5: "bg-scale-5 border-scale-5",
+  6: "bg-scale-6 border-scale-6",
+  7: "bg-scale-7 border-scale-7",
+  8: "bg-scale-8 border-scale-8",
+  9: "bg-scale-9 border-scale-9",
+  10: "bg-scale-10 border-scale-10 text-white"
 }
 
 const backgroundClass = computed(() => scoreBg[props.score])
@@ -43,64 +43,19 @@ const sizeClass = computed(() => props.size)
 <style scoped>
 .hexagon {
   position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
 }
-
-.hexagon::before,
-.hexagon::after {
-  content: "";
-  position: absolute;
-  width: 0;
-  left: 0;
-}
-
-.hexagon::before {
-  bottom: 100%;
-}
-
-.hexagon::after {
-  top: 100%;
-}
-
-/* Small hexagon */
 .hexagon.small {
-  height: calc(1.732 * 12px); /* sqrt(3) * 12px */
-  width: calc(3 * 12px);
-  margin-top: calc(12px + 5px);
-  margin-bottom: calc(12px + 5px);
-  font-size: 1.3rem;
-}
-
-.hexagon.small::before {
-  border-left: calc(1.5 * 12px) solid transparent;
-  border-right: calc(1.5 * 12px) solid transparent;
-  border-bottom: calc(1.732 / 2 * 12px) solid transparent;
-}
-
-.hexagon.small::after {
-  border-left: calc(1.5 * 12px) solid transparent;
-  border-right: calc(1.5 * 12px) solid transparent;
-  border-top: calc(1.732 / 2 * 12px) solid transparent;
+  height: 2em;
+  width: 2em;
+  font-size: 1.5em;
 }
-
-/* Huge hexagon */
 .hexagon.huge {
-  height: calc(1.732 * 20px); /* sqrt(3) * 20px */
-  width: calc(3 * 20px);
-  margin-top: calc(20px + 5px);
-  margin-bottom: calc(20px + 5px);
-  font-size: 1.2rem;
-  line-height: 2.3rem;
-}
-
-.hexagon.huge::before {
-  border-left: calc(1.5 * 20px) solid transparent;
-  border-right: calc(1.5 * 20px) solid transparent;
-  border-bottom: calc(1.732 / 2 * 20px) solid transparent;
-}
-
-.hexagon.huge::after {
-  border-left: calc(1.5 * 20px) solid transparent;
-  border-right: calc(1.5 * 20px) solid transparent;
-  border-top: calc(1.732 / 2 * 20px) solid transparent;
+  height: 4em;
+  width: 4em;
+  font-size: 1.5em;
 }
 </style>