evol: refonte visuelle trajets/disponibilités conducteur + font Poppins

web/assets/css/main.css

@@ -16,14 +16,32 @@
     src: url("https://coopgo.fr/fonts/manometer.woff2") format("woff2"), url("/fonts/manometer.woff") format("woff"); }
   
 @font-face {
-    font-family: "Bitter";
+    font-family: "Poppins";
     font-style: normal;
-    src: url("https://coopgo.fr/fonts/Bitter-Regular.woff") format("woff"); }
-   
+    font-weight: 400;
+    src: url("/public/fonts/Poppins-Regular.woff2") format("woff2"); }
+
+@font-face {
+    font-family: "Poppins";
+    font-style: normal;
+    font-weight: 500;
+    src: url("/public/fonts/Poppins-Medium.woff2") format("woff2"); }
+
+@font-face {
+    font-family: "Poppins";
+    font-style: normal;
+    font-weight: 600;
+    src: url("/public/fonts/Poppins-SemiBold.woff2") format("woff2"); }
+
+@font-face {
+    font-family: "Poppins";
+    font-style: normal;
+    font-weight: 700;
+    src: url("/public/fonts/Poppins-Bold.woff2") format("woff2"); }
 
 @layer base {
     html {
-        font-family: Bitter, serif; 
+        font-family: Poppins, sans-serif;
     }
     input {
       padding: 2px;

web/layouts/organized_carpool/_partials/driver_availabilities.html

@@ -8,50 +8,45 @@
   <div class="px-4 py-5 sm:px-6">
     <h2 id="timeline-title" class="text-lg font-medium text-gray-900">Trajets</h2>
   </div>
-  <div class="border-t border-gray-200 px-4">
-    <div class="">
+  <div class="border-t border-gray-200 px-4 py-4 space-y-3">
       {{ range .ViewState.trips }}
       {{$departure := index .Features 0}}
       {{$destination := index .Features 1}}
-      <div class="my-10">
-      <div class="flex flex-row my-2">
-        {{range .ExtraMembers.properties.schedules}}
-        <span class="p-1 text-xs mr-2 bg-co-blue text-white rounded-lg">
-        {{ if eq .day "SUN"}}Dimanche
-        {{ else if eq .day "MON"}}Lundi
-        {{ else if eq .day "TUE"}}Mardi
-        {{ else if eq .day "WED"}}Mercredi
-        {{ else if eq .day "THU"}}Jeudi
-        {{ else if eq .day "FRI"}}Vendredi
-        {{ else if eq .day "SAT"}}Samedi
-        {{ end }}
-        {{.time_of_day}}
-
-        </span>
-        {{end}}
-      </div>
-      <div class="flex flex-row">
-        <div class="flex-1 text-sm">
-          {{$departure.Properties.label}}
+      {{$schedules := .ExtraMembers.properties.schedules}}
+      {{$firstSchedule := index $schedules 0}}
+      <div class="border border-gray-200 rounded-2xl p-4">
+        <div class="flex items-center justify-between mb-3">
+          <div class="flex gap-2">
+            {{range $schedules}}
+            <span class="inline-flex items-center justify-center w-8 h-8 text-[10px] font-bold bg-co-blue text-white rounded-full leading-none">{{ if eq .day "MON"}}Lu{{ else if eq .day "TUE"}}Ma{{ else if eq .day "WED"}}Me{{ else if eq .day "THU"}}Je{{ else if eq .day "FRI"}}Ve{{ else if eq .day "SAT"}}Sa{{ else if eq .day "SUN"}}Di{{ end }}</span>
+            {{end}}
+          </div>
+          <span class="text-sm font-bold text-gray-900">{{$firstSchedule.time_of_day}}</span>
         </div>
-        <div>
-          {{$.IconSet.Icon "hero:outline/chevron-right" "h-5 w-5 mr-3"}}
+        <div class="relative ml-2">
+          <div class="absolute left-[5px] top-[10px] bottom-[10px] w-0.5 bg-co-blue"></div>
+          <div class="relative flex items-center gap-3 mb-2">
+            <div class="w-3 h-3 rounded-full bg-co-blue shrink-0 z-10"></div>
+            <p class="text-sm text-gray-900 truncate" title="{{$departure.Properties.label}}">{{$departure.Properties.label}}</p>
+          </div>
+          <div class="relative flex items-center gap-3">
+            <div class="w-3 h-3 rounded-full border-2 border-co-blue bg-white shrink-0 z-10"></div>
+            <p class="text-sm text-gray-500 truncate" title="{{$destination.Properties.label}}">{{$destination.Properties.label}}</p>
+          </div>
         </div>
-        <div class="flex-1 text-sm text-right">
-          {{$destination.Properties.label}}
+        <div class="mt-3 flex justify-end">
+          <a class="text-xs text-gray-400 hover:text-co-red transition-colors" href="/app/organized-carpool/drivers/{{$.ViewState.driver.ID}}/trips/{{.ExtraMembers.id}}/delete">Supprimer</a>
         </div>
       </div>
-      <div>
-        <div class="flex-none text-sm text-right"><a class="text-co-blue" href="/app/organized-carpool/drivers/{{$.ViewState.driver.ID}}/trips/{{.ExtraMembers.id}}/delete">Supprimer</a></div>
-      </div>
-      </div>
       {{ end }}
+  </div>
+    <div class="px-4 py-4 text-center">
+      <button type="button" @click="availabilitiesdialog = !availabilitiesdialog"
+        class="inline-flex items-center justify-center rounded-2xl border border-transparent bg-co-blue px-4 py-2 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-co-blue focus:ring-offset-2">
+        {{$.IconSet.Icon "hero:outline/plus-circle" "h-5 w-5 mr-3"}}
+        Ajouter un trajet
+      </button>
     </div>
-    <button type="button" @click="availabilitiesdialog = !availabilitiesdialog" 
-      class="inline-flex items-center justify-center rounded-2xl border border-transparent bg-co-blue my-4 px-4 py-2 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-co-blue focus:ring-offset-2 sm:w-auto">
-      {{$.IconSet.Icon "hero:outline/plus-circle" "h-5 w-5 mr-3"}}
-      Ajouter un trajet
-    </button>
   </div>
   <div class="relative z-10" aria-labelledby="modal-title" role="dialog" aria-modal="true"
        x-show="availabilitiesdialog">

web/layouts/solidarity_transport/_partials/driver_availabilities.html

@@ -7,28 +7,25 @@
   <div class="px-4 py-5 sm:px-6">
     <h2 id="timeline-title" class="text-lg font-medium text-gray-900">Disponibilités</h2>
   </div>
-  <div class="border-t border-gray-200 px-4">
-    <div class="py-4">
+  <div class="border-t border-gray-200 px-4 py-4 space-y-3">
       {{ range .ViewState.availabilities }}
-      <div class="flex flex-row">
-        <div class="flex-none">
-        {{ if eq .Day 0}}Dimanche
-        {{ else if eq .Day 1}}Lundi
-        {{ else if eq .Day 2}}Mardi
-        {{ else if eq .Day 3}}Mercredi
-        {{ else if eq .Day 4}}Jeudi
-        {{ else if eq .Day 5}}Vendredi
-        {{ else if eq .Day 6}}Samedi
-        {{ end }}
-        {{.StartTime}} - {{ .EndTime }}
+      <div class="border border-gray-200 rounded-2xl p-3">
+        <div class="flex items-center gap-2.5">
+          <span class="inline-flex items-center justify-center w-9 h-9 text-[10px] font-bold bg-co-blue text-white rounded-full leading-none shrink-0">{{ if eq .Day 0}}Di{{ else if eq .Day 1}}Lu{{ else if eq .Day 2}}Ma{{ else if eq .Day 3}}Me{{ else if eq .Day 4}}Je{{ else if eq .Day 5}}Ve{{ else if eq .Day 6}}Sa{{ end }}</span>
+          <div class="min-w-0">
+            <p class="text-xs font-semibold text-gray-900">{{ if eq .Day 0}}Dimanche{{ else if eq .Day 1}}Lundi{{ else if eq .Day 2}}Mardi{{ else if eq .Day 3}}Mercredi{{ else if eq .Day 4}}Jeudi{{ else if eq .Day 5}}Vendredi{{ else if eq .Day 6}}Samedi{{ end }} <span class="font-normal text-gray-500">{{.StartTime}} — {{.EndTime}}</span></p>
+            {{if .Address}}<p class="text-[11px] text-gray-400 leading-tight mt-0.5" title="{{.Address.Properties.label}}">{{.Address.Properties.label}}</p>{{end}}
+          </div>
+        </div>
+        <div class="mt-1.5 flex justify-end">
+          <a class="text-[10px] text-gray-400 hover:text-co-red transition-colors" href="/app/solidarity-transport/drivers/{{$.ViewState.driver.ID}}/availabilities/{{.ID}}/delete">Supprimer</a>
         </div>
-        <div class="flex-auto">&nbsp;</div>
-        <div class="flex-none text-sm"><a class="text-co-blue" href="/app/solidarity-transport/drivers/{{$.ViewState.driver.ID}}/availabilities/{{.Id}}/delete">Supprimer</a></div>
       </div>
       {{ end }}
-    </div>
-    <button type="button" @click="availabilitiesdialog = !availabilitiesdialog" 
-      class="inline-flex items-center justify-center rounded-2xl border border-transparent bg-co-blue my-4 px-4 py-2 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-ci-blue focus:ring-offset-2 sm:w-auto">
+  </div>
+  <div class="px-4 py-4 text-center">
+    <button type="button" @click="availabilitiesdialog = !availabilitiesdialog"
+      class="inline-flex items-center justify-center rounded-2xl border border-transparent bg-co-blue px-4 py-2 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-co-blue focus:ring-offset-2">
       {{$.IconSet.Icon "hero:outline/plus-circle" "h-5 w-5 mr-3"}}
       Ajouter une disponibilité
     </button>

web/public/css/main.css

@@ -13,9 +13,7 @@
     --color-orange-50: oklch(0.98 0.016 73.684);
     --color-orange-200: oklch(0.901 0.076 70.697);
     --color-yellow-50: oklch(0.987 0.026 102.212);
-    --color-green-50: oklch(0.982 0.018 155.826);
     --color-green-100: oklch(0.962 0.044 156.743);
-    --color-green-200: oklch(0.925 0.084 155.995);
     --color-green-600: oklch(0.627 0.194 149.214);
     --color-green-800: oklch(0.448 0.119 151.328);
     --color-blue-50: oklch(0.97 0.014 254.604);
@@ -70,6 +68,7 @@
     --font-weight-extrabold: 800;
     --tracking-tight: -0.025em;
     --tracking-wide: 0.025em;
+    --leading-tight: 1.25;
     --radius-md: 0.375rem;
     --radius-lg: 0.5rem;
     --radius-xl: 0.75rem;
@@ -318,18 +317,27 @@
   .top-4 {
     top: calc(var(--spacing) * 4);
   }
+  .top-\[10px\] {
+    top: 10px;
+  }
   .right-0 {
     right: calc(var(--spacing) * 0);
   }
   .right-4 {
     right: calc(var(--spacing) * 4);
   }
+  .bottom-\[10px\] {
+    bottom: 10px;
+  }
   .left-0 {
     left: calc(var(--spacing) * 0);
   }
   .left-4 {
     left: calc(var(--spacing) * 4);
   }
+  .left-\[5px\] {
+    left: 5px;
+  }
   .isolate {
     isolation: isolate;
   }
@@ -498,18 +506,12 @@
   .-my-2 {
     margin-block: calc(var(--spacing) * -2);
   }
-  .my-2 {
-    margin-block: calc(var(--spacing) * 2);
-  }
   .my-4 {
     margin-block: calc(var(--spacing) * 4);
   }
   .my-8 {
     margin-block: calc(var(--spacing) * 8);
   }
-  .my-10 {
-    margin-block: calc(var(--spacing) * 10);
-  }
   .-mt-2 {
     margin-top: calc(var(--spacing) * -2);
   }
@@ -525,6 +527,9 @@
   .mt-1 {
     margin-top: calc(var(--spacing) * 1);
   }
+  .mt-1\.5 {
+    margin-top: calc(var(--spacing) * 1.5);
+  }
   .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
@@ -736,6 +741,9 @@
   .h-8 {
     height: calc(var(--spacing) * 8);
   }
+  .h-9 {
+    height: calc(var(--spacing) * 9);
+  }
   .h-10 {
     height: calc(var(--spacing) * 10);
   }
@@ -814,6 +822,9 @@
   .w-8 {
     width: calc(var(--spacing) * 8);
   }
+  .w-9 {
+    width: calc(var(--spacing) * 9);
+  }
   .w-10 {
     width: calc(var(--spacing) * 10);
   }
@@ -919,6 +930,9 @@
   .shrink {
     flex-shrink: 1;
   }
+  .shrink-0 {
+    flex-shrink: 0;
+  }
   .flex-grow {
     flex-grow: 1;
   }
@@ -1332,6 +1346,9 @@
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
+  .gap-2\.5 {
+    gap: calc(var(--spacing) * 2.5);
+  }
   .gap-3 {
     gap: calc(var(--spacing) * 3);
   }
@@ -1794,9 +1811,6 @@
   .border-gray-300 {
     border-color: var(--color-gray-300);
   }
-  .border-green-200 {
-    border-color: var(--color-green-200);
-  }
   .border-indigo-500 {
     border-color: var(--color-indigo-500);
   }
@@ -1884,9 +1898,6 @@
   .bg-gray-900 {
     background-color: var(--color-gray-900);
   }
-  .bg-green-50 {
-    background-color: var(--color-green-50);
-  }
   .bg-green-100 {
     background-color: var(--color-green-100);
   }
@@ -1931,10 +1942,6 @@
     --tw-gradient-position: in oklab;
     background-image: conic-gradient(var(--tw-gradient-stops));
   }
-  .bg-gradient-to-r {
-    --tw-gradient-position: to right in oklab;
-    background-image: linear-gradient(var(--tw-gradient-stops));
-  }
   .bg-radial {
     --tw-gradient-position: in oklab;
     background-image: radial-gradient(var(--tw-gradient-stops));
@@ -1945,14 +1952,6 @@
   .via-none {
     --tw-gradient-via-stops: initial;
   }
-  .from-co-blue {
-    --tw-gradient-from: var(--color-co-blue);
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
-  .to-blue-600 {
-    --tw-gradient-to: var(--color-blue-600);
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
   .box-decoration-clone {
     -webkit-box-decoration-break: clone;
     box-decoration-break: clone;
@@ -2343,6 +2342,12 @@
     font-size: var(--text-sm);
     line-height: calc(var(--spacing) * 6);
   }
+  .text-\[10px\] {
+    font-size: 10px;
+  }
+  .text-\[11px\] {
+    font-size: 11px;
+  }
   .leading-4 {
     --tw-leading: calc(var(--spacing) * 4);
     line-height: calc(var(--spacing) * 4);
@@ -2359,6 +2364,10 @@
     --tw-leading: 1;
     line-height: 1;
   }
+  .leading-tight {
+    --tw-leading: var(--leading-tight);
+    line-height: var(--leading-tight);
+  }
   .font-bold {
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
@@ -2460,9 +2469,6 @@
   .\[color\:red\]\/50\! {
     color: color-mix(in oklab, red 50%, transparent) !important;
   }
-  .text-blue-100 {
-    color: var(--color-blue-100);
-  }
   .text-blue-800 {
     color: var(--color-blue-800);
   }
@@ -3205,6 +3211,13 @@
       }
     }
   }
+  .hover\:text-co-red {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-co-red);
+      }
+    }
+  }
   .hover\:text-co-red\/80 {
     &:hover {
       @media (hover: hover) {
@@ -3240,13 +3253,6 @@
       }
     }
   }
-  .hover\:text-green-800 {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--color-green-800);
-      }
-    }
-  }
   .hover\:text-inherit {
     &:hover {
       @media (hover: hover) {
@@ -4071,13 +4077,32 @@
   src: url("https://coopgo.fr/fonts/manometer.woff2") format("woff2"), url("/fonts/manometer.woff") format("woff");
 }
 @font-face {
-  font-family: "Bitter";
+  font-family: "Poppins";
   font-style: normal;
-  src: url("https://coopgo.fr/fonts/Bitter-Regular.woff") format("woff");
+  font-weight: 400;
+  src: url("/public/fonts/Poppins-Regular.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Poppins";
+  font-style: normal;
+  font-weight: 500;
+  src: url("/public/fonts/Poppins-Medium.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Poppins";
+  font-style: normal;
+  font-weight: 600;
+  src: url("/public/fonts/Poppins-SemiBold.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Poppins";
+  font-style: normal;
+  font-weight: 700;
+  src: url("/public/fonts/Poppins-Bold.woff2") format("woff2");
 }
 @layer base {
   html {
-    font-family: Bitter, serif;
+    font-family: Poppins, sans-serif;
   }
   input {
     padding: 2px;
@@ -4180,48 +4205,6 @@
   inherits: false;
   initial-value: 0;
 }
-@property --tw-gradient-position {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-gradient-from {
-  syntax: "<color>";
-  inherits: false;
-  initial-value: #0000;
-}
-@property --tw-gradient-via {
-  syntax: "<color>";
-  inherits: false;
-  initial-value: #0000;
-}
-@property --tw-gradient-to {
-  syntax: "<color>";
-  inherits: false;
-  initial-value: #0000;
-}
-@property --tw-gradient-stops {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-gradient-via-stops {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-gradient-from-position {
-  syntax: "<length-percentage>";
-  inherits: false;
-  initial-value: 0%;
-}
-@property --tw-gradient-via-position {
-  syntax: "<length-percentage>";
-  inherits: false;
-  initial-value: 50%;
-}
-@property --tw-gradient-to-position {
-  syntax: "<length-percentage>";
-  inherits: false;
-  initial-value: 100%;
-}
 @property --tw-leading {
   syntax: "*";
   inherits: false;