feat: Modification du design

src/components/Question.vue

@@ -30,54 +30,120 @@ function slideMove(splide, newIndex) {
 
 <template>
   <div class="main">
-    <div class="top">
+    <div class="center">
       <legend>{{ question.title }}</legend>
+
+      <div class="images">
+        <template v-if="question.answers">
+          <Splide
+            @splide:move="slideMove"
+            class="answers"
+            :id="`question_${question.id}`"
+            ref="slides"
+          >
+            <SplideSlide
+              v-for="answer in question.answers"
+              :key="answer.id"
+              @click="$emit('nextQuestion')"
+            >
+              <img height="200" :src="`/answers/${answer.image}.webp`" />
+            </SplideSlide>
+          </Splide>
+        </template>
+      </div>
+
       <template v-if="question.answers">
-        <div class="choice" v-for="answer in question.answers" :key="answer.id">
-          <label>
+        <ul class="choices">
+          <li
+            class="choice"
+            v-for="answer in question.answers"
+            :key="answer.id"
+          >
             <input
               type="radio"
               :data-answerId="answer.id"
               :name="`question_${question.id}`"
+              :id="`question_${question.id}_answer_${answer.id}`"
               :value="answer.weight"
               v-model="answerWeight"
               @change="selectAnswer(answer)"
               @click="nextQuestion"
             />
-            {{ answer.title }}
-          </label>
-        </div>
-      </template>
-    </div>
-    <div class="bottom">
-      <template v-if="question.answers">
-        <Splide
-          @splide:move="slideMove"
-          class="answers"
-          :id="`question_${question.id}`"
-          ref="slides"
-        >
-          <SplideSlide
-            v-for="answer in question.answers"
-            :key="answer.id"
-            @click="$emit('nextQuestion')"
-          >
-            <img height="200" :src="`/answers/${answer.image}.webp`" />
-          </SplideSlide>
-        </Splide>
+            <label :for="`question_${question.id}_answer_${answer.id}`">
+              {{ answer.title }}
+            </label>
+          </li>
+        </ul>
       </template>
     </div>
   </div>
 </template>
 
 <style lang="sass">
+.splide__arrow
+  background: transparent
+  border: 3px solid var(--color-green)
+  width: 3rem
+  height: 3rem
+  opacity: 1
+
+  svg
+    fill: var(--color-green)
+    height: 1.6rem
+    width: 1.6rem
 .splide__pagination
   bottom: -1.5em
+.splide__pagination__page
+  width: .7rem
+  height: .7rem
+  background: var(--color-green)
+
+  &.is-active
+    background: var(--color-green)
 </style>
 
 <style lang="sass" scoped>
-input[type=radio]
-  margin-right: .5rem
+
+legend
+  text-align: center
+  font-size: 1.4rem
+  line-height: 2rem
+  margin: 1rem
+
+.choices
+  list-style-type: none
+  text-align: left
+  display: inline-block
+  padding-left: 0
+
+  input[type=radio]
+    display: none
+
+    & + label
+      position: relative
+      padding-left: 2rem
+    & + label::before,
+    & + label::after
+      display: block
+      position: absolute
+      box-sizing: border-box
+      content:''
+      border-radius: 1rem
+    & + label::before
+      bottom: 0
+      left: 0
+      background-color: var(--color-green)
+      width: 1rem
+      height: 1rem
+    & + label::after
+      bottom: 3px
+      left: 3px
+      width: calc(1rem - 6px)
+      height: calc(1rem - 6px)
+    &:checked + label::before
+      background-color: white
+    &:checked + label::after
+      background-color: var(--color-green)
 
 .main
   height: 100%
@@ -87,11 +153,19 @@ input[type=radio]
   justify-content: space-around
   align-items: center
 
-  .bottom
+  .center
+    width: 100%
+    text-align: center
+
+  .images
+    margin: 3rem auto
     width: 400px
     max-width: 100%
     min-width: 280px
 
+  h2
+    font-size: 2rem
+
 .answers
   text-align: center
 
@@ -99,6 +173,6 @@ input[type=radio]
   .main
     flex-direction: row
 
-    .bottom
+    .images
       max-width: 50%
 </style>