From d37c261c707a299964b1d6029cb76cae2950cbf6 Mon Sep 17 00:00:00 2001
From: theocrsb <theo_crosbie@yahoo.fr>
Date: Thu, 12 Sep 2024 11:36:45 +0200
Subject: [PATCH] front: redesign top left of the scenario page

Signed-off-by: theocrsb <theo_crosbie@yahoo.fr>
---
 .../en/operationalStudies/scenario.json       |   5 +-
 .../fr/operationalStudies/scenario.json       |   5 +-
 .../components/MicroMacroSwitch.tsx           |  37 ++-
 .../components/Scenario/InfraLoadingState.tsx |   2 +-
 .../Scenario/ScenarioDescription.tsx          |  84 +++---
 .../components/Timetable/Timetable.tsx        |  24 +-
 front/src/styles/scss/_variables.scss         |  13 +
 .../operationalStudies/_scenario.scss         | 270 +++++++++++++-----
 .../common/components/_infraLoadingState.scss |  14 +-
 .../scss/common/components/_pathfinding.scss  |   4 +-
 front/tests/pages/scenario-page-model.ts      |   4 +-
 11 files changed, 294 insertions(+), 168 deletions(-)

diff --git a/front/public/locales/en/operationalStudies/scenario.json b/front/public/locales/en/operationalStudies/scenario.json
index b004a31c81e..e18d7a6f31d 100644
--- a/front/public/locales/en/operationalStudies/scenario.json
+++ b/front/public/locales/en/operationalStudies/scenario.json
@@ -15,9 +15,10 @@
   "filterPlaceholder": "Filter, tags",
   "advancedFiltersPlaceholder": "Filter by family, serie, detail",
   "infraLoadingState": "{{step}}/7",
+  "infrastructure": "Infrastructure",
   "lessDetails": "less details",
-  "macroscopic": "Macroscopic",
-  "microscopic": "Microscopic",
+  "macroscopic": "MACRO",
+  "microscopic": "MICRO",
   "modifyScenario": "Modify scenario",
   "moreDetails": "more details",
   "noElectricalProfileSet": "No electrical profile",
diff --git a/front/public/locales/fr/operationalStudies/scenario.json b/front/public/locales/fr/operationalStudies/scenario.json
index dd98452a4f1..81d59b958b7 100644
--- a/front/public/locales/fr/operationalStudies/scenario.json
+++ b/front/public/locales/fr/operationalStudies/scenario.json
@@ -14,9 +14,10 @@
   },
   "filterPlaceholder": "Filtre, étiquettes",
   "infraLoadingState": "{{step}}/7",
+  "infrastructure": "Infrastructure",
   "lessDetails": "moins de détails",
-  "macroscopic": "Macroscopique",
-  "microscopic": "Microscopique",
+  "macroscopic": "MACRO",
+  "microscopic": "MICRO",
   "modifyScenario": "Modifier le scénario",
   "moreDetails": "plus de détails",
   "noElectricalProfileSet": "Pas de profil électrique",
diff --git a/front/src/applications/operationalStudies/components/MicroMacroSwitch.tsx b/front/src/applications/operationalStudies/components/MicroMacroSwitch.tsx
index 837891da3e3..09dc9708cc6 100644
--- a/front/src/applications/operationalStudies/components/MicroMacroSwitch.tsx
+++ b/front/src/applications/operationalStudies/components/MicroMacroSwitch.tsx
@@ -9,25 +9,24 @@ type MicroMacroSwitchProps = {
 const MicroMacroSwitch = ({ isMacro, setIsMacro }: MicroMacroSwitchProps) => {
   const { t } = useTranslation('operationalStudies/scenario');
   return (
-    <div className="tabs-container">
-      <div className="tabs">
-        <div
-          className={cx('tab', { active: !isMacro })}
-          role="button"
-          tabIndex={0}
-          onClick={() => setIsMacro(false)}
-        >
-          {t('microscopic')}
-        </div>
-        <div
-          className={cx('tab', { active: isMacro })}
-          role="button"
-          tabIndex={0}
-          onClick={() => setIsMacro(true)}
-        >
-          {t('macroscopic')}
-        </div>
-      </div>
+    <div className="micro-macro-buttons">
+      <button
+        type="button"
+        className={cx('micro-button', { active: !isMacro })}
+        tabIndex={0}
+        onClick={() => setIsMacro(false)}
+      >
+        {t('microscopic')}
+      </button>
+      <div className="micro-macro-separator" />
+      <button
+        type="button"
+        className={cx('macro-button', { active: isMacro })}
+        tabIndex={0}
+        onClick={() => setIsMacro(true)}
+      >
+        {t('macroscopic')}
+      </button>
     </div>
   );
 };
diff --git a/front/src/applications/operationalStudies/components/Scenario/InfraLoadingState.tsx b/front/src/applications/operationalStudies/components/Scenario/InfraLoadingState.tsx
index 7773ae8c8b6..c53d74d5940 100644
--- a/front/src/applications/operationalStudies/components/Scenario/InfraLoadingState.tsx
+++ b/front/src/applications/operationalStudies/components/Scenario/InfraLoadingState.tsx
@@ -29,7 +29,7 @@ export default function InfraLoadingState({ infra }: Props) {
       title={infra.state}
     >
       {infra.state && infra.state === 'CACHED' ? (
-        <span>•</span>
+        <span className="infra-loaded" />
       ) : (
         <>
           <span className="infra-loader">•</span>
diff --git a/front/src/applications/operationalStudies/components/Scenario/ScenarioDescription.tsx b/front/src/applications/operationalStudies/components/Scenario/ScenarioDescription.tsx
index 89878243cac..b4f04e0c4e3 100644
--- a/front/src/applications/operationalStudies/components/Scenario/ScenarioDescription.tsx
+++ b/front/src/applications/operationalStudies/components/Scenario/ScenarioDescription.tsx
@@ -1,13 +1,12 @@
-import { ChevronLeft, Pencil } from '@osrd-project/ui-icons';
+import { Blocked, ChevronLeft, Pencil } from '@osrd-project/ui-icons';
 import { useTranslation } from 'react-i18next';
-import { GiElectric } from 'react-icons/gi';
 
-import InfraLoadingState from 'applications/operationalStudies/components/Scenario/InfraLoadingState';
-import infraLogo from 'assets/pictures/components/tracks.svg';
 import type { InfraWithState, ScenarioResponse } from 'common/api/osrdEditoastApi';
 import { useModal } from 'common/BootstrapSNCF/ModalSNCF';
 import AddAndEditScenarioModal from 'modules/scenario/components/AddOrEditScenarioModal';
 
+import InfraLoadingState from './InfraLoadingState';
+
 type ScenarioDescriptionProps = {
   scenario: ScenarioResponse;
   infra?: InfraWithState;
@@ -25,14 +24,30 @@ const ScenarioDescription = ({
   const { openModal } = useModal();
 
   return (
-    <div className="scenario-details">
+    <div>
       <div className="scenario-details-name">
         <span className="flex-grow-1 scenario-name text-truncate" title={scenario.name}>
           {scenario.name}
         </span>
+      </div>
+
+      <div className="scenario-description">
+        {scenario.description && (
+          <div className="scenario-details-description">{scenario.description}</div>
+        )}
+        <div className="flex justify-end">
+          <button
+            type="button"
+            className="scenario-collapse-button"
+            aria-label={t('toggleTimetable')}
+            onClick={() => collapseTimetable()}
+          >
+            <ChevronLeft />
+          </button>
+        </div>
         <button
           data-testid="editScenario"
-          className="scenario-details-modify-button"
+          className="update-scenario"
           type="button"
           aria-label={t('editScenario')}
           onClick={() =>
@@ -46,50 +61,41 @@ const ScenarioDescription = ({
         >
           <Pencil />
         </button>
-        <button
-          type="button"
-          className="scenario-details-modify-button"
-          aria-label={t('toggleTimetable')}
-          onClick={() => collapseTimetable()}
-        >
-          <ChevronLeft />
-        </button>
       </div>
-      <div className="row">
-        <div className="col-md-6">
-          <div className="scenario-details-infra-name">
-            <img src={infraLogo} alt="Infra logo" className="infra-logo mr-2" />
-            {infra && <InfraLoadingState infra={infra} />}
-            <span className="scenario-infra-name">{scenario.infra_name}</span>
-            <small className="ml-auto text-muted">ID {scenario.infra_id}</small>
-          </div>
-        </div>
-        <div className="col-md-6">
-          <div className="scenario-details-electrical-profile-set">
-            <span className="mr-2">
-              <GiElectric />
-            </span>
-            {scenario.electrical_profile_set_id
-              ? scenario.electrical_profile_set_id
-              : t('noElectricalProfileSet')}
-          </div>
-        </div>
+      <div className="scenario-details-electrical-profile-set">
+        {scenario.electrical_profile_set_id
+          ? scenario.electrical_profile_set_id
+          : t('noElectricalProfileSet')}
+      </div>
+
+      <div className="scenario-details-infra-name">
+        {t('infrastructure')} :&nbsp;
+        {infra && <InfraLoadingState infra={infra} />}
+        &nbsp;
+        <span className="scenario-infra-name">{scenario.infra_name}</span>&nbsp;| ID
+        {scenario.infra_id}
       </div>
       {infra &&
         infra.state === 'TRANSIENT_ERROR' &&
         (infraReloadCount <= 5 ? (
-          <div className="scenario-details-infra-error mt-1">
-            {t('errorMessages.unableToLoadInfra', { infraReloadCount })}
+          <div className="scenario-details-infra-error">
+            <Blocked variant="fill" />
+            <span className="error-description">
+              {t('errorMessages.unableToLoadInfra', { infraReloadCount })}
+            </span>
           </div>
         ) : (
-          <div className="scenario-details-infra-error mt-1">
-            {t('errorMessages.softErrorInfra')}
+          <div className="scenario-details-infra-error">
+            <Blocked variant="fill" />
+            <span className="error-description">{t('errorMessages.softErrorInfra')}</span>
           </div>
         ))}
       {infra && infra.state === 'ERROR' && (
-        <div className="scenario-details-infra-error mt-1">{t('errorMessages.hardErrorInfra')}</div>
+        <div className="scenario-details-infra-error">
+          <Blocked variant="fill" />
+          <span className="error-description">{t('errorMessages.hardErrorInfra')}</span>
+        </div>
       )}
-      <div className="scenario-details-description">{scenario.description}</div>
     </div>
   );
 };
diff --git a/front/src/modules/trainschedule/components/Timetable/Timetable.tsx b/front/src/modules/trainschedule/components/Timetable/Timetable.tsx
index 89b1f493821..d79fca5a6fc 100644
--- a/front/src/modules/trainschedule/components/Timetable/Timetable.tsx
+++ b/front/src/modules/trainschedule/components/Timetable/Timetable.tsx
@@ -1,6 +1,5 @@
 import { useMemo, useState } from 'react';
 
-import { Download, Plus } from '@osrd-project/ui-icons';
 import cx from 'classnames';
 import { compact } from 'lodash';
 import { useTranslation } from 'react-i18next';
@@ -98,34 +97,25 @@ const Timetable = ({
     <div className="scenario-timetable">
       <div className="scenario-timetable-addtrains-buttons">
         <button
-          className="btn btn-secondary btn-sm"
-          type="button"
-          data-testid="scenarios-import-train-schedule-button"
-          onClick={() => setDisplayTrainScheduleManagement(MANAGE_TRAIN_SCHEDULE_TYPES.import)}
-        >
-          <span className="mr-2">
-            <Download />
-          </span>
-          {t('timetable.importTrainSchedule')}
-        </button>
-        <button
-          className="btn btn-primary btn-sm"
           type="button"
           data-testid="scenarios-add-train-schedule-button"
           onClick={() => {
             setDisplayTrainScheduleManagement(MANAGE_TRAIN_SCHEDULE_TYPES.add);
           }}
         >
-          <span className="mr-2">
-            <Plus />
-          </span>
           {t('timetable.addTrainSchedule')}
         </button>
+        <button
+          type="button"
+          data-testid="scenarios-import-train-schedule-button"
+          onClick={() => setDisplayTrainScheduleManagement(MANAGE_TRAIN_SCHEDULE_TYPES.import)}
+        >
+          {t('timetable.importTrainSchedule')}
+        </button>
       </div>
       <div
         className={cx('scenario-timetable-trains', {
           expanded: conflictsListExpanded,
-          'with-details': showTrainDetails,
         })}
       >
         <TimetableToolbar
diff --git a/front/src/styles/scss/_variables.scss b/front/src/styles/scss/_variables.scss
index ccfd9ff30db..d6240668c6c 100644
--- a/front/src/styles/scss/_variables.scss
+++ b/front/src/styles/scss/_variables.scss
@@ -37,15 +37,28 @@ $colors: (
   'ambiantB5': #faf9f5,
   'ambiantB10': #f7f6ee,
   'ambiantB15': #f2f0e4,
+  'black5': rgba(0, 0, 0, 0.05),
+  'black10': rgba(0, 0, 0, 0.1),
+  'black100': #000000,
   'error5': #ffeeed,
   'error60': #d91c1c,
   'error80': #6b0000,
+  'grey20': #d3d1cf,
+  'grey30': #b6b2af,
+  'grey40': #94918e,
+  'grey50': #797671,
   'grey60': #5c5955,
+  'grey90': #1f1b17,
   'grey80': #312e2b,
+  'info5': #e6f7ff,
+  'info30': #70c1e5,
   'info60': #216482,
+  'info80': #053348,
+  'primary50': #256afa,
   'primary60': #1844ef,
   'primary80': #1f0f96,
   'selection20': #fff2b3,
+  'success30': #3cca80,
   'warning5': #fdf5e1,
   'warning30': #eaa72b,
   'warning60': #7d521e,
diff --git a/front/src/styles/scss/applications/operationalStudies/_scenario.scss b/front/src/styles/scss/applications/operationalStudies/_scenario.scss
index 65ff052a050..47253bd3fa3 100644
--- a/front/src/styles/scss/applications/operationalStudies/_scenario.scss
+++ b/front/src/styles/scss/applications/operationalStudies/_scenario.scss
@@ -1,10 +1,9 @@
 .scenario {
   --navbar-height: 4.0625rem;
-  --content-height: calc(100vh - var(--navbar-height) - 1.5rem);
+  --content-height: calc(100vh - var(--navbar-height) - 0.5rem);
   position: relative;
-  padding: 0.5rem;
-  background-color: #e9e8e1;
-
+  background-color: var(--ambiantB10);
+  font-family: 'IBM Plex Sans';
   .scenario-container {
     margin: 0;
   }
@@ -19,6 +18,48 @@
     }
   }
 
+  .micro-macro-buttons {
+    button {
+      color: var(--grey60);
+      width: 3.625rem;
+      &:hover {
+        color: var(--grey80);
+      }
+      &:active {
+        color: var(--grey30);
+      }
+    }
+
+    display: inline-flex;
+    align-self: flex-start;
+    height: 2rem;
+    font-size: 0.875rem;
+    letter-spacing: 0.1019rem;
+    line-height: 1.125rem;
+    margin-block: 1.813rem 2.063rem;
+    background-color: var(--ambiantB10);
+    border-radius: 0.375rem;
+    padding: 0.25rem 1rem;
+    box-shadow:
+      0 0.125rem 0.125rem -0.0625rem rgba(255, 171, 88, 0.27),
+      0 0.0625rem 0.125rem rgba(0, 0, 0, 0.16);
+
+    .micro-macro-separator {
+      width: 0.0625rem;
+      margin-inline: 0.625rem;
+      background-color: var(--grey20);
+    }
+  }
+
+  .micro-macro-buttons:hover {
+    background-color: var(--white100);
+  }
+
+  .active {
+    color: var(--grey90);
+    font-weight: 600;
+  }
+
   .scenario-timetable-collapsed {
     position: sticky;
     display: flex;
@@ -26,7 +67,7 @@
     top: 0;
     padding-bottom: 0.5rem;
     z-index: 1;
-
+    background-color: var(--coolgray1);
     .timetable-collapse-button {
       display: flex;
       align-items: center;
@@ -34,7 +75,7 @@
       top: 0;
       left: 0;
       background-color: var(--secondary);
-      color: var(--white);
+      color: var(--white100);
       border: unset;
       border-radius: 0.25rem;
       padding: 0.5rem;
@@ -66,77 +107,126 @@
       height: 100%;
     }
   }
+  .scenario-sidemenu.col-hdp-3.col-xl-4.col-lg-5.col-md-6 {
+    padding: 0 !important;
+  }
 
   .scenario-sidemenu {
     display: flex;
     flex-direction: column;
     height: var(--content-height);
-    color: var(--gray);
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-    padding: 0 0.5rem;
-    .tabs-container {
-      overflow: initial;
+    background-color: var(--black5);
+    min-width: 24.5rem;
+    max-width: 29.5rem;
+    padding: 0.875rem 1.5rem 0 1.5rem;
+    box-shadow: inset -1px 0 var(--black5);
+
+    .scenario-sidemenu :first-child:hover {
+      .update-scenario {
+        display: flex;
+      }
     }
 
-    .scenario-details {
+    .scenario-details-name {
       display: flex;
-      flex-direction: column;
-
-      .scenario-details-name {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-
-        font-weight: 500;
-        font-size: 1.5rem;
-
-        .scenario-details-modify-button {
-          background-color: transparent;
-          border: none;
-          transition: 0.2s;
-          padding: 0.25rem 0.5rem;
-          font-size: 1rem;
-          border-radius: 0.25rem;
-
-          .scenario-details-modify-button-text {
-            transition: opacity 0.2s;
-            opacity: 0;
-            font-size: 0.9rem;
-            margin-right: 0.5rem;
-          }
+      align-items: center;
+      justify-content: space-between;
+      font-weight: 600;
+      font-size: 1.5rem;
+      color: var(--black100);
+      font-size: 1.125rem;
+      text-align: left;
+      line-height: 1.5rem;
+    }
 
-          &:hover {
-            background-color: var(--secondary);
-            color: var(--white);
+    .scenario-description {
+      position: relative;
+      text-wrap: wrap;
 
-            .scenario-details-modify-button-text {
-              opacity: 1;
-            }
-          }
-        }
+      .scenario-details-description {
+        color: var(--grey50);
+        font-size: 0.875rem;
+        font-weight: 400;
+        line-height: 1.25rem;
+        margin: 0.25rem 1rem 0 0;
+        word-break: break-all;
       }
 
-      .scenario-details-infra-name {
-        display: flex;
-        align-items: center;
+      .scenario-collapse-button {
+        position: absolute;
+        padding-bottom: 0.188rem;
+        padding-inline: 0.4375rem 0.125rem;
+        height: 2.125rem;
+        width: 1.5rem;
+        color: var(--grey40);
+        background-color: var(--ambiantB10);
+        border-radius: 0.313rem 0 0 0.313rem;
+        top: 0;
+        transform: translateX(1.5rem);
+        box-shadow: 0 0px 0 1px var(--black10);
+        clip-path: inset(-1px 0 -1px -1px);
+      }
 
-        img {
-          height: 1rem;
+      .update-scenario {
+        // button has to be positioned regarding the description
+        position: absolute;
+        display: none;
+        right: 1rem;
+        bottom: -3rem;
+        padding: 0.188rem 0.5rem;
+        transition: 0.2s;
+        height: 2rem;
+        width: 2rem;
+        border-radius: 0.25rem;
+        box-shadow: 0 0 0 0.094rem rgba(255, 255, 255, 1) inset;
+        background-color: var(--ambiantB10);
+        color: var(--primary60);
+        &:hover {
+          background-color: var(--white100);
+          color: var(--primary80);
         }
       }
-
-      .scenario-details-infra-error {
-        color: var(--red);
-        font-weight: 500;
-        font-size: 0.9rem;
+    }
+    .scenario-details-electrical-profile-set {
+      font-size: 0.75rem;
+      font-weight: 400;
+      line-height: 1rem;
+      margin-top: 0.375rem;
+      color: var(--black100);
+    }
+    .scenario-details-infra-name {
+      font-size: 0.75rem;
+      font-weight: 400;
+      line-height: 1rem;
+      color: var(--black100);
+      margin-top: 0.25rem;
+      display: flex;
+      align-items: center;
+      img {
+        height: 1rem;
       }
+    }
 
-      .scenario-details-description {
-        overflow: auto;
-        max-height: 4rem;
-        font-size: 0.9rem;
-        white-space: break-spaces;
+    .infra-loaded {
+      width: 0.5rem;
+      height: 0.5rem;
+      background-color: var(--success30);
+      border-radius: 50%;
+      margin-block: 0.3125rem 0.1875rem;
+    }
+
+    .scenario-details-infra-error {
+      color: var(--error60);
+      background-color: var(--error5);
+      margin: 1.3125rem -1.4375rem 0 -1.5rem;
+      padding: 0.5625rem 3.5rem 0.6875rem 1.5rem;
+      display: flex;
+
+      .error-description {
+        margin-left: 1rem;
+        font-size: 0.875rem;
+        font-weight: 400;
+        line-height: 1.25rem;
       }
     }
 
@@ -149,22 +239,46 @@
         display: flex;
         align-items: center;
         justify-content: space-between;
-        gap: 0.5rem;
-        margin-bottom: 0.5rem;
-        height: 2rem;
-
-        button {
-          flex-grow: 1;
+        height: 2.375rem;
+        margin-bottom: 1.25rem;
+        padding: 0.875rem 0.5rem 0 0.5rem;
+        border-top: 0.25rem rgba(0, 0, 0, 0.05) solid;
+        color: var(--primary60);
+        font-weight: 600;
+        button:hover {
+          color: var(--primary80);
+          text-decoration: underline;
+        }
+        button:active {
+          color: var(--primary50);
+        }
+      }
+      .filter-selector {
+        background-color: transparent;
+        border: none;
+        color: var(--secondary);
+        transition: 0.2s;
+        padding: 0.25rem 0.5rem;
+        border-radius: 0.25rem;
+        &.on {
+          color: var(--white100);
+          background-color: var(--secondary);
+        }
+        &:hover {
+          background-color: var(--secondary);
+          color: var(--white100);
+          .scenario-details-modify-button-text {
+            opacity: 1;
+          }
         }
       }
-
       .multiselect-delete {
         border: none;
         padding: 0.25rem 0.5rem;
         border-radius: 0.25rem;
         border-color: transparent;
         background-color: rgba(var(--red-rgb), 0.75);
-        color: var(--white);
+        color: var(--white100);
         height: 2rem;
         &.disabled {
           background-color: rgba(var(--secondary-rgb), 0.5);
@@ -292,8 +406,8 @@
           }
 
           &:hover {
-            background-color: var(--white);
-            color: var(--black);
+            background-color: var(--white100);
+            color: var(--black100);
             cursor: pointer;
 
             .scenario-details-modify-button-text {
@@ -458,7 +572,7 @@
               color: var(--primary60);
               margin-right: 0.5rem;
               &:hover {
-                background-color: var(--white);
+                background-color: var(--white100);
                 color: var(--primary80);
               }
             }
@@ -539,7 +653,7 @@
         .filter-panel {
           padding: 0.4375rem 1.25rem 1.4375rem 0.4375rem;
           background-color: var(--ambiantB5);
-          border-top: solid 0.063rem var(--white);
+          border-top: solid 0.063rem var(--white100);
           border-bottom: solid 0.063rem rgba(0, 0, 0, 0.25);
           display: flex;
           flex-direction: column;
@@ -595,15 +709,15 @@
               }
 
               button:hover {
-                background-color: var(--white);
-                color: var(--black);
-                border: 0.063rem solid var(--black);
+                background-color: var(--white100);
+                color: var(--black100);
+                border: 0.063rem solid var(--black100);
               }
 
               .selectedTag {
                 background-color: var(--grey60);
-                color: var(--white);
-                border: 0.063rem solid var(--black);
+                color: var(--white100);
+                border: 0.063rem solid var(--black100);
               }
             }
           }
@@ -611,7 +725,7 @@
         .bottom-timetables-trains {
           background-color: var(--ambiantB15);
           padding-bottom: 1rem;
-          box-shadow: inset 0 1px rgba(0, 0, 0, 0.25);
+          box-shadow: inset 0 0.0625rem rgba(0, 0, 0, 0.25);
           position: sticky;
           bottom: 0;
           z-index: 1;
diff --git a/front/src/styles/scss/common/components/_infraLoadingState.scss b/front/src/styles/scss/common/components/_infraLoadingState.scss
index 77f50eb0f91..6fc7f53777e 100644
--- a/front/src/styles/scss/common/components/_infraLoadingState.scss
+++ b/front/src/styles/scss/common/components/_infraLoadingState.scss
@@ -1,14 +1,14 @@
 .infra-loading-state {
-  font-size: 0.9rem;
+  font-size: 0.75rem;
   display: flex;
   align-items: center;
-  margin-right: 0.5rem;
+  margin-bottom: 0.0625rem;
 
   &.cached {
-    color: var(--green);
+    color: var(--success30);
   }
   &.loading {
-    color: var(--orange);
+    color: var(--info60);
   }
 
   .infra-loader:first-child {
@@ -27,17 +27,17 @@
 
   @keyframes dot-flashing {
     0% {
-      color: var(--orange);
+      color: var(--info60);
     }
     50%,
     100% {
-      color: #f8e3d8;
+      color: var(--info30);
     }
   }
 
   .steps {
     font-weight: 500;
-    margin-left: 0.5rem;
+    margin-left: 0.25rem;
     margin-top: 0.1rem;
   }
 }
diff --git a/front/src/styles/scss/common/components/_pathfinding.scss b/front/src/styles/scss/common/components/_pathfinding.scss
index ce16ef8b337..bff21e8f6c1 100644
--- a/front/src/styles/scss/common/components/_pathfinding.scss
+++ b/front/src/styles/scss/common/components/_pathfinding.scss
@@ -137,8 +137,8 @@
     }
 
     &.infra-loading {
-      color: var(--orange);
-      border-color: #e2ae92;
+      color: var(--info60);
+      border-color: var(--info30);
     }
   }
 
diff --git a/front/tests/pages/scenario-page-model.ts b/front/tests/pages/scenario-page-model.ts
index 75fa0d954d0..b534b0114d9 100644
--- a/front/tests/pages/scenario-page-model.ts
+++ b/front/tests/pages/scenario-page-model.ts
@@ -95,7 +95,7 @@ class ScenarioPage extends BasePage {
     super(page);
 
     this.getRollingStockSelector = page.getByTestId('rollingstock-selector-empty');
-    this.getScenarioUpdateBtn = page.getByTitle('Modifier le scénario');
+    this.getScenarioUpdateBtn = page.getByTestId('editScenario');
     this.getScenarioDeleteConfirmBtn = page
       .locator('#modal-content')
       .getByText('Supprimer', { exact: true });
@@ -178,6 +178,8 @@ class ScenarioPage extends BasePage {
   }
 
   async openScenarioModalUpdate() {
+    // We need to hover the scenario description to make the update button visible
+    await this.getScenarioDescription.hover();
     await this.getScenarioUpdateBtn.click();
   }