fixup! front: redesign top left of the scenario page

Author: theocrsb

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

@@ -1,4 +1,4 @@
-import { ChevronLeft, Pencil } from '@osrd-project/ui-icons';
+import { Blocked, ChevronLeft, Pencil } from '@osrd-project/ui-icons';
 import { useTranslation } from 'react-i18next';
 
 import InfraLoadingState from 'applications/operationalStudies/components/Scenario/InfraLoadingState';
@@ -68,23 +68,30 @@ const ScenarioDescription = ({
       </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{' '}
+        {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>
   );

front/src/styles/scss/_variables.scss

@@ -54,6 +54,7 @@ $colors: (
   'primary60': #1844ef,
   'primary80': #1f0f96,
   'selection20': #fff2b3,
+  'success30': #3cca80,
   'warning30': #eaa72b,
   'warning60': #7d521e,
   'white100': #ffffff,

front/src/styles/scss/applications/operationalStudies/_scenario.scss

@@ -205,11 +205,23 @@
       img {
         height: 1rem;
       }
+      .infra-loading-state {
+        margin: 0;
+        font-size: 1.6rem;
+      }
     }
     .scenario-details-infra-error {
-      color: var(--red);
-      font-weight: 500;
-      font-size: 0.9rem;
+      color: var(--error60);
+      background-color: var(--error5);
+      margin: 1.3125rem -1.5rem 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: 20px;
+      }
     }
 
     .scenario-timetable {

front/src/styles/scss/common/components/_infraLoadingState.scss

@@ -5,7 +5,7 @@
   margin-right: 0.5rem;
 
   &.cached {
-    color: var(--green);
+    color: var(--success30);
   }
   &.loading {
     color: var(--orange);