feat : update modal style

app/components/malio/time/internal/TimeWheel.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     ref="container"
-    class="malio-wheel relative h-[200px] w-14 snap-y snap-mandatory overflow-y-scroll"
+    class="malio-wheel relative h-[160px] w-14 snap-y snap-mandatory overflow-y-scroll"
     role="spinbutton"
     :tabindex="0"
     :aria-label="ariaLabel"
@@ -16,8 +16,8 @@
       :key="item.key"
       type="button"
       data-test="wheel-item"
-      class="flex h-10 w-full snap-center items-center justify-center text-lg outline-none transition-colors"
-      :class="item.value === centeredValue ? 'font-bold text-black' : 'text-m-muted'"
+      class="flex h-8 w-full snap-center items-center justify-center leading-none outline-none transition-all"
+      :class="itemClass(item.flat)"
       tabindex="-1"
       @click="onItemClick(item.value)"
     >
@@ -41,7 +41,7 @@ const props = defineProps<{
 
 const emit = defineEmits<{(e: 'update:modelValue', value: number): void}>()
 
-const ITEM_HEIGHT = 40
+const ITEM_HEIGHT = 32
 const container = ref<HTMLElement | null>(null)
 
 const pad = (value: number) => padSegment(value)
@@ -54,20 +54,29 @@ const {centeredIndex, scrollToIndex, onKeydown} = useInfiniteWheel(container, {
   onChange: (index) => emit('update:modelValue', props.values[index]),
 })
 
-const centeredValue = computed(() => props.values[centeredIndex.value])
-
 const buffer = computed(() =>
   [0, 1, 2].flatMap((copy) =>
-    props.values.map((value) => ({value, key: copy * props.values.length + value})),
+    props.values.map((value, i) => {
+      const flat = copy * props.values.length + i
+      return {value, flat, key: flat}
+    }),
   ),
 )
 
+// Taille décroissante avec la distance au centre (effet molette iOS).
+const itemClass = (flat: number) => {
+  const distance = Math.abs(flat - (props.values.length + centeredIndex.value))
+  if (distance === 0) return 'text-[16px] font-medium text-black'
+  if (distance === 1) return 'text-[14px] text-m-muted'
+  return 'text-[12px] text-m-muted'
+}
+
 const onItemClick = (value: number) => scrollToIndex(indexOfValue(value))
 
 watch(
   () => props.modelValue,
   (value) => {
-    if (props.values[centeredIndex.value] !== value) scrollToIndex(indexOfValue(value), false)
+    if (props.values[centeredIndex.value] !== value) scrollToIndex(indexOfValue(value))
   },
 )
 </script>
@@ -75,6 +84,10 @@ watch(
 <style scoped>
 .malio-wheel {
   scrollbar-width: none;
+  /* Estompe les valeurs en haut et en bas (effet molette iOS) pour qu'elles ne
+     débordent pas visuellement du cadre. */
+  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 70%, transparent 100%);
+  mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 70%, transparent 100%);
 }
 .malio-wheel::-webkit-scrollbar {
   display: none;

app/components/malio/time/internal/TimeWheels.vue

@@ -5,7 +5,7 @@
   >
     <!-- bande centrale (overlay, traverse les 2 colonnes) -->
     <div
-      class="pointer-events-none absolute inset-x-2 top-1/2 z-0 h-10 -translate-y-1/2 rounded-lg bg-m-primary/10"
+      class="pointer-events-none absolute inset-x-2 top-1/2 z-0 h-8 mx-3 -translate-y-1/2 rounded-lg bg-m-primary-light"
     />
 
     <MalioTimeWheel
@@ -16,7 +16,7 @@
       @update:model-value="onHours"
     />
 
-    <span class="relative z-10 text-lg font-bold text-black">:</span>
+    <span class="relative z-10 text-[14px] font-bold text-black">:</span>
 
     <MalioTimeWheel
       :model-value="minutes"