front: redesing conflicts list

front/public/locales/en/operationalStudies/scenario.json

@@ -87,6 +87,6 @@
   "conflictsCount_one": "1 conflict",
   "conflictsCount_other": "{{count}} conflicts",
   "conflictsCount_zero": "No conflict",
-  "Routing": "Itineraries conflict",
-  "Spacing": "Spacing conflict"
+  "Routing": "Itineraries",
+  "Spacing": "Spacing"
 }

front/public/locales/fr/operationalStudies/scenario.json

@@ -87,6 +87,6 @@
   "conflictsCount_one": "1 conflit",
   "conflictsCount_other": "{{count}} conflits",
   "conflictsCount_zero": "Aucun conflit",
-  "Routing": "Conflit d'itinéraires",
-  "Spacing": "Conflit d'espacement"
+  "Routing": "Itinéraires",
+  "Spacing": "Espacement"
 }

front/src/modules/conflict/components/ConflictCard.tsx

@@ -1,7 +1,7 @@
+import dayjs from 'dayjs';
 import { useTranslation } from 'react-i18next';
-import { BsLightningFill } from 'react-icons/bs';
 
-import { formatToIsoDate } from 'utils/date';
+import { extractHHMMSS } from 'utils/date';
 
 import type { ConflictWithTrainNames } from '../types';
 
@@ -13,34 +13,38 @@ const ConflictCard = ({
   onConflictClick: (conflict: ConflictWithTrainNames) => void;
 }) => {
   const { t } = useTranslation(['operationalStudies/scenario']);
-  const start_time = formatToIsoDate(conflict.start_time, true);
-  const end_time = formatToIsoDate(conflict.end_time, true);
+  const start_time = extractHHMMSS(conflict.start_time);
+  const end_time = extractHHMMSS(conflict.end_time);
+  const start_date = dayjs(conflict.start_time).format('DD/MM/YYYY');
+
   return (
     <div
       className="conflict-card"
       onClick={() => onConflictClick(conflict)}
       role="button"
       tabIndex={0}
     >
-      <BsLightningFill color="red" />
-      <div className="conflict-trains">
+      <div className="trains-info">
+        <p className="conflict-type">{t(`${conflict.conflict_type}`)}</p>
+        <div className="start-and-end-time">
+          <div className="start-time" title={start_time}>
+            {start_time}
+          </div>
+          <div className="end-time" title={end_time}>
+            {end_time}
+          </div>
+        </div>
+        <div className="departure-date" title={start_date}>
+          {start_date}
+        </div>
+      </div>
+      <div className="trains-name">
         {conflict.trainNames.map((trainName, idx) => (
-          <div className="card-text" key={`train-${idx}-${trainName}`}>
+          <div className="train-name-card" key={`train-${idx}-${trainName}`} title={trainName}>
             {trainName}
           </div>
         ))}
       </div>
-      <div className="conflict-type">
-        <p>{t(`${conflict.conflict_type}`)}</p>
-      </div>
-      <div className="conflict-times">
-        <div className="start-time" title={start_time}>
-          {start_time}
-        </div>
-        <div className="end-time" title={end_time}>
-          {end_time}
-        </div>
-      </div>
     </div>
   );
 };

front/src/modules/conflict/components/ConflictsList.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
 
+import { ChevronDown, ChevronUp } from '@osrd-project/ui-icons';
 import cx from 'classnames';
 import { useTranslation } from 'react-i18next';
 
@@ -34,7 +35,7 @@ const ConflictsList = ({
     return null;
   }
   return (
-    <div className="conflicts-list">
+    <div className={cx('conflicts-list', expanded && 'expanded')}>
       <div
         className="conflicts-list-header"
         role="button"
@@ -46,7 +47,7 @@ const ConflictsList = ({
             count: conflicts.length,
           })}
         </h2>
-        <i className={cx('icons-arrow-up', expanded && 'expanded')} />
+        {expanded ? <ChevronUp /> : <ChevronDown />}
       </div>
 
       <div className={cx('conflicts-container', expanded && 'expanded')}>

front/src/modules/conflict/styles/_conflictList.scss

@@ -1,102 +1,116 @@
 .conflicts-list {
-  border: 2px solid var(--orange);
-  border-radius: 4px;
-  background-color: var(--white);
-  height: auto;
-  min-height: 43px;
-  overflow: hidden;
-  margin-bottom: 0.5rem;
+  margin-top: auto;
+  margin-inline: -1.5rem;
+  &.expanded {
+    margin-inline: -1.5rem;
+    position: absolute;
+    bottom: 0;
+    z-index: 2;
+    width: 100%;
+  }
+  .conflicts-list-header {
+    border-bottom: 0.0625rem solid var(--error80);
+    background-color: var(--error60);
+    color: var(--white100);
+    height: 2.9375rem;
+    min-width: 24.5rem;
+    max-width: 29.5rem;
+    display: flex;
+    justify-content: space-between;
+    padding: 0.6875rem 1rem 0.75rem 1rem;
+    h2 {
+      color: var(--white100);
+      font-size: 1.125rem;
+      line-height: 1.5rem;
+      font-weight: 600;
+    }
+  }
+
   .conflicts-container {
-    padding: 0.2rem;
     display: none;
+    color: var(--black100);
+    background-color: var(--error60);
+    box-shadow: inset 0 0.0625rem var(--error30);
 
     &.expanded {
       display: block;
-      min-height: 72px;
       overflow: auto;
-      max-height: 200px;
+      max-height: calc(50vh - 3.75rem);
     }
-  }
-  .conflicts-list-header {
-    margin: 0;
-    padding: 0.5rem;
-    background-color: var(--orange);
-    color: var(--white);
-    font-size: 1rem;
-    font-weight: 600;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    height: 43px;
-    .icons-arrow-up {
-      transition: all 0.2s ease-in-out;
-      @media screen and (max-width: 1023px) {
-        transform: rotate(180deg);
-      }
-      &.expanded {
-        transition: all 0.2s ease-in-out;
-        transform: rotate(180deg);
-        @media screen and (max-width: 1023px) {
-          &.expanded {
-            transform: none;
+
+    .conflict-card {
+      background-color: var(--white100);
+      margin: 0.25rem 0.5rem;
+      border-radius: 0.25rem;
+      display: flex;
+      min-height: 5.5rem;
+
+      .trains-info {
+        font-family: 'IBM Plex Mono', monospace;
+        flex-basis: calc(43.3% - 0.0313rem);
+        border-right: 0.0313rem solid var(--grey20);
+
+        .conflict-type {
+          font-family: 'IBM Plex Sans';
+          height: 2.3125rem;
+          color: var(--black100);
+          font-size: 1.125rem;
+          line-height: 1.5rem;
+          font-weight: 600;
+          padding: 0.5625rem 0 0.25rem 0.75rem;
+          margin: 0;
+        }
+
+        .start-and-end-time {
+          display: flex;
+          gap: 1rem;
+          .start-time {
+            padding-left: 0.75rem;
+            color: var(--black100);
+            font-size: 0.875rem;
+            font-weight: 600;
+            line-height: 1.25rem;
+          }
+          .end-time {
+            color: var(--black100);
+            font-size: 0.875rem;
+            line-height: 1.25rem;
           }
         }
+
+        .departure-date {
+          padding-left: 0.75rem;
+          color: var(--grey50);
+          font-size: 0.75rem;
+          line-height: 1.25rem;
+          margin-bottom: 0.9375rem;
+        }
       }
-    }
-    h2 {
-      color: white;
-    }
-    &:hover {
-      cursor: pointer;
-    }
-  }
-  .conflict-card {
-    display: flex;
-    border: solid rgba(var(--orange-rgb), 0.1) 2px;
-    align-items: center;
-    padding: 0rem 0.5rem;
-    border-radius: 4px;
-    background-color: white;
-    margin-bottom: 0.2rem;
-    cursor: pointer;
-    &:hover {
-      background-color: rgba(var(--orange-rgb), 0.1);
-    }
-    .conflict-trains {
-      text-align: left;
-      font-size: 0.9rem;
-      font-weight: 600;
-      margin: 0 0.5rem;
-      width: 25%;
-      .card-text {
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-      }
-    }
-    .conflict-type {
-      text-align: left;
-      flex-grow: 1;
-      white-space: nowrap;
-    }
-    .conflict-times {
-      margin-left: 0.5rem;
-      text-align: right;
-      font-size: 0.8rem;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      .start-time {
-        font-weight: 600;
-        font-size: 0.9rem;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-      .end-time {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
+
+      .trains-name {
+        flex-basis: calc(56.7% - 0.0313rem);
+        border-left: 0.0313rem solid var(--grey20);
+        display: flex;
+        flex-wrap: wrap;
+        padding: 1rem 0 1rem 1rem;
+        gap: 0.5rem;
+
+        .train-name-card {
+          font-family: 'IBM Plex Mono', monospace;
+          height: 1.5rem;
+          max-width: 13.0437rem;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          overflow: hidden;
+          background-color: var(--error5);
+          color: var(--error80);
+          border: 0.0625rem solid var(--error30);
+          border-radius: 0.25rem;
+          padding: 0.125rem 0.5rem;
+          font-size: 0.875rem;
+          font-weight: 600;
+          line-height: 1.25rem;
+        }
       }
     }
   }

front/src/modules/trainschedule/components/Timetable/Timetable.tsx

@@ -151,17 +151,15 @@ const Timetable = ({
           })}
         />
       </div>
-      <div className="mt-auto">
-        {conflicts && (
-          <ConflictsList
-            conflicts={conflicts}
-            expanded={conflictsListExpanded}
-            toggleConflictsList={toggleConflictsListExpanded}
-            trainSchedulesDetails={displayedTrainSchedules}
-            onConflictClick={handleConflictClick}
-          />
-        )}
-      </div>
+      {conflicts && (
+        <ConflictsList
+          conflicts={conflicts}
+          expanded={conflictsListExpanded}
+          toggleConflictsList={toggleConflictsListExpanded}
+          trainSchedulesDetails={displayedTrainSchedules}
+          onConflictClick={handleConflictClick}
+        />
+      )}
     </div>
   );
 };

front/src/styles/scss/_variables.scss

@@ -44,6 +44,7 @@ $colors: (
   'black25': rgba(0, 0, 0, 0.25),
   'black100': #000000,
   'error5': #ffeeed,
+  'error30': #ff6868,
   'error60': #d91c1c,
   'error80': #6b0000,
   'grey5': #f5f5f5,