front: redesign top left of the scenario page

Author: theocrsb

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

@@ -15,6 +15,7 @@
   "filterPlaceholder": "Filter, tags",
   "advancedFiltersPlaceholder": "Filter by family, serie, detail",
   "infraLoadingState": "{{step}}/7",
+  "infrastructure": "Infrastructure",
   "macroscopic": "Macroscopic",
   "microscopic": "Microscopic",
   "modifyScenario": "Modify scenario",

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

@@ -14,6 +14,7 @@
   },
   "filterPlaceholder": "Filtre, étiquettes",
   "infraLoadingState": "{{step}}/7",
+  "infrastructure": "Infrastructure",
   "macroscopic": "Macroscopique",
   "microscopic": "Microscopique",
   "modifyScenario": "Modifier le scénario",

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/views/Scenario.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 
-import { ChevronLeft, ChevronRight, Eye, EyeClosed, Pencil } from '@osrd-project/ui-icons';
+import { ChevronLeft, ChevronRight, Pencil } from '@osrd-project/ui-icons';
 import cx from 'classnames';
 import { useTranslation } from 'react-i18next';
 import { GiElectric } from 'react-icons/gi';
@@ -138,67 +138,57 @@ const Scenario = () => {
             >
               <div className="scenario-sidemenu">
                 {scenario && (
-                  <div className="scenario-details">
+                  <div className="scenario-top">
                     <div className="scenario-details-name">
                       <span
                         className="flex-grow-1 scenario-name text-truncate"
                         title={scenario.name}
                       >
                         {scenario.name}
                       </span>
-                      <button
-                        data-testid="editScenario"
-                        className="scenario-details-modify-button"
-                        type="button"
-                        aria-label={t('editScenario')}
-                        onClick={() =>
-                          openModal(
-                            <AddAndEditScenarioModal editionMode scenario={scenario} />,
-                            'xl',
-                            'no-close-modal'
-                          )
-                        }
-                        title={t('editScenario')}
-                      >
-                        <Pencil />
-                      </button>
-                      <button
-                        type="button"
-                        className="scenario-details-modify-button"
-                        onClick={() => setTrainsWithDetails(!trainsWithDetails)}
-                        title={t('displayTrainsWithDetails')}
-                      >
-                        {trainsWithDetails ? <EyeClosed /> : <Eye />}
-                      </button>
-                      <button
-                        type="button"
-                        className="scenario-details-modify-button"
-                        aria-label={t('toggleTimetable')}
-                        onClick={() => setCollapsedTimetable(true)}
-                      >
-                        <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 className="scenario-description-collapsed">
+                      <div className="scenario-details-description">{scenario.description}</div>
+                      <div>
+                        <button
+                          type="button"
+                          className="scenario-details-modify-button"
+                          aria-label={t('toggleTimetable')}
+                          onClick={() => setCollapsedTimetable(true)}
+                        >
+                          <ChevronLeft />
+                        </button>
                       </div>
                     </div>
+                    <button
+                      data-testid="editScenario"
+                      className="scenario-details-modify-button update-scenario"
+                      type="button"
+                      aria-label={t('editScenario')}
+                      onClick={() =>
+                        openModal(
+                          <AddAndEditScenarioModal editionMode scenario={scenario} />,
+                          'xl',
+                          'no-close-modal'
+                        )
+                      }
+                      title={t('editScenario')}
+                    >
+                      <Pencil />
+                    </button>
+
+                    <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} />}
+                      {scenario.infra_name} | ID {scenario.infra_id}
+                    </div>
+
                     {infra &&
                       infra.state === 'TRANSIENT_ERROR' &&
                       (reloadCount <= 5 ? (
@@ -215,7 +205,6 @@ const Scenario = () => {
                         {t('errorMessages.hardErrorInfra')}
                       </div>
                     )}
-                    <div className="scenario-details-description">{scenario.description}</div>
                   </div>
                 )}
                 <MicroMacroSwitch isMacro={isMacro} setIsMacro={toggleMicroMacroButton} />

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

@@ -107,27 +107,19 @@ 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>
       </div>

front/src/styles/scss/_variables.scss

@@ -32,6 +32,13 @@ $colors: (
   'coolgray5': #b9b9b9,
   'coolgray3': #d7d7d7,
   'coolgray1': #f2f2f2,
+  'primary60': #1844ef,
+  'grey20': #D3D1CF,
+  'grey40': #94918E,
+  'grey50': #797671,
+  'grey60': #5C5955,
+  'grey90': #1F1B17,
+  'ambientB10': #F7F6EE,
 );
 
 :root {