fixup! front: redesign top left of the scenario page

Author: theocrsb

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>

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

@@ -70,8 +70,7 @@ const ScenarioDescription = ({
 
       <div className="scenario-details-infra-name">
         {t('infrastructure')} :&nbsp;
-        {infra && infra.state === 'CACHED' && <span className="infra-loaded" />}
-        {infra && infra.state !== 'CACHED' && <InfraLoadingState infra={infra} />}
+        {infra && <InfraLoadingState infra={infra} />}
         &nbsp;
         <span className="scenario-infra-name">{scenario.infra_name}</span>&nbsp;| ID
         {scenario.infra_id}

front/src/styles/scss/_variables.scss

@@ -50,7 +50,10 @@ $colors: (
   'grey60': #5c5955,
   'grey90': #1f1b17,
   'grey80': #312e2b,
+  'info5': #e6f7ff,
+  'info30': #70c1e5,
   'info60': #216482,
+  'info80': #053348,
   'primary50': #256afa,
   'primary60': #1844ef,
   'primary80': #1f0f96,

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

@@ -226,7 +226,6 @@
       padding: 0.5625rem 3.5rem 0.6875rem 1.5rem;
       display: flex;
 
-
       .error-description {
         margin-left: 1rem;
         font-size: 0.875rem;

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

@@ -1,5 +1,5 @@
 .infra-loading-state {
-  font-size: 0.9rem;
+  font-size: 0.75rem;
   display: flex;
   align-items: center;
   margin-right: 0.5rem;
@@ -8,7 +8,7 @@
     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;
   }
 }