From aeeb52acedc526dbda4d269ad6e37e05b6a54151 Mon Sep 17 00:00:00 2001
From: Laurent GAY <l.gay@sd-libre.fr>
Date: Wed, 30 Jul 2025 15:42:20 +0200
Subject: [PATCH] event icon: text contrast in light mode and add year in
 footer (#1822 & #1823)

---
 src/components/Event/DateCalendarIcon.vue | 30 +++++++++++++++++------
 1 file changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/components/Event/DateCalendarIcon.vue b/src/components/Event/DateCalendarIcon.vue
index c8c82c092..ce3aa9957 100644
--- a/src/components/Event/DateCalendarIcon.vue
+++ b/src/components/Event/DateCalendarIcon.vue
@@ -4,7 +4,7 @@
     :class="{ small }"
     :style="`--small: ${smallStyle}`"
   >
-    <div class="datetime-container-header bg-red-500 dark:bg-red-900">
+    <div class="datetime-container-header bg-red-400 dark:bg-red-900">
       <time :datetime="dateObj.toISOString()" class="weekday">{{
         weekday
       }}</time>
@@ -19,6 +19,9 @@
         >{{ month }}</time
       >
     </div>
+    <div class="datetime-container-footer bg-red-400 dark:bg-red-900">
+      <time :datetime="dateObj.toISOString()" class="year">{{ year }}</time>
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
@@ -51,6 +54,10 @@ const weekday = computed<string>(() =>
   dateObj.value.toLocaleString(localeConverted.value, { weekday: "short" })
 );
 
+const year = computed<string>(() =>
+  dateObj.value.toLocaleString(localeConverted.value, { year: "numeric" })
+);
+
 const smallStyle = computed<string>(() => (props.small ? "1.2" : "2"));
 </script>
 
@@ -67,21 +74,30 @@ div.datetime-container {
     font-size: calc(9px * var(--small));
     font-weight: bold;
     vertical-align: top;
-    line-height: calc(9px * var(--small));
+    line-height: calc(8px * var(--small));
   }
   .datetime-container-content {
-    height: calc(30px * var(--small));
+    height: calc(22px * var(--small));
+  }
+  .datetime-container-footer {
+    height: calc(8px * var(--small));
+  }
+  .datetime-container-footer .year {
+    font-size: calc(7px * var(--small));
+    font-weight: bold;
+    vertical-align: top;
+    line-height: calc(8px * var(--small));
   }
 
   time {
     &.month {
-      font-size: 12px;
-      line-height: 12px;
+      font-size: 10px;
+      line-height: 9px;
     }
 
     &.day {
-      font-size: calc(1rem * var(--small));
-      line-height: calc(1rem * var(--small));
+      font-size: calc(0.8rem * var(--small));
+      line-height: calc(0.7rem * var(--small));
     }
   }
 }