front: redesign top left of the scenario page

Signed-off-by: theocrsb <[email protected]>

Author: theocrsb

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",

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",

front/src/applications/operationalStudies/components/MicroMacroSwitch.tsx

@@ -9,18 +9,18 @@ type MicroMacroSwitchProps = {
 const MicroMacroSwitch = ({ isMacro, setIsMacro }: MicroMacroSwitchProps) => {
   const { t } = useTranslation('operationalStudies/scenario');
   return (
-    <div className="tabs-container">
-      <div className="tabs">
+    <div className="micro-macro-container">
+      <div className="micro-macro-buttons">
         <div
-          className={cx('tab', { active: !isMacro })}
+          className={cx('micro-button', { active: !isMacro })}
           role="button"
           tabIndex={0}
           onClick={() => setIsMacro(false)}
         >
           {t('microscopic')}
         </div>
         <div
-          className={cx('tab', { active: isMacro })}
+          className={cx('macro-button', { active: isMacro })}
           role="button"
           tabIndex={0}
           onClick={() => setIsMacro(true)}

front/src/applications/operationalStudies/components/Scenario/ScenarioDescription.tsx

@@ -1,9 +1,7 @@
 import { 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';
@@ -25,14 +23,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,34 +60,17 @@ 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} />}
+        <span className="scenario-infra-name">{scenario.infra_name}</span>&nbsp;| ID{' '}
+        {scenario.infra_id}
       </div>
       {infra &&
         infra.state === 'TRANSIENT_ERROR' &&
@@ -89,7 +86,6 @@ const ScenarioDescription = ({
       {infra && infra.state === 'ERROR' && (
         <div className="scenario-details-infra-error mt-1">{t('errorMessages.hardErrorInfra')}</div>
       )}
-      <div className="scenario-details-description">{scenario.description}</div>
     </div>
   );
 };

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

@@ -1,6 +1,6 @@
 import { useMemo, useState } from 'react';
 
-import { Alert, Download, Plus } from '@osrd-project/ui-icons';
+import { Alert } from '@osrd-project/ui-icons';
 import cx from 'classnames';
 import { compact } from 'lodash';
 import { useTranslation } from 'react-i18next';
@@ -99,34 +99,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

front/src/styles/scss/_variables.scss

@@ -40,7 +40,11 @@ $colors: (
   'error5': #ffeeed,
   'error60': #d91c1c,
   'error80': #6b0000,
+  'grey20': #d3d1cf,
+  'grey40': #94918e,
+  'grey50': #797671,
   'grey60': #5c5955,
+  'grey90': #1f1b17,
   'grey80': #312e2b,
   'primary60': #1844ef,
   'primary80': #1f0f96,