From b81faad8ab29f43a64751db5d26d88a4840a8240 Mon Sep 17 00:00:00 2001
From: SharglutDev <p.filimon75@gmail.com>
Date: Wed, 4 Dec 2024 11:07:37 +0100
Subject: [PATCH] fixup! front: update stdcm simulation progress button design

---
 .../stdcm/components/StdcmLoader.tsx          | 19 +++++++++----------
 front/src/applications/stdcm/types.ts         |  2 +-
 .../scss/applications/stdcm/_loader.scss      |  6 +++---
 3 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/front/src/applications/stdcm/components/StdcmLoader.tsx b/front/src/applications/stdcm/components/StdcmLoader.tsx
index 891012da0b1..1620e8a47b5 100644
--- a/front/src/applications/stdcm/components/StdcmLoader.tsx
+++ b/front/src/applications/stdcm/components/StdcmLoader.tsx
@@ -24,7 +24,7 @@ const StdcmLoader = ({ cancelStdcmRequest, launchButtonRef }: StdcmLoaderProps)
   const windowHeight = window.innerHeight;
 
   const [loaderStatus, setLoaderStatus] = useState<LoaderStatus>({
-    status: windowHeight - top - 32 > LOADER_HEIGHT ? 'absolute' : 'fixedBottom',
+    status: windowHeight - top - 32 > LOADER_HEIGHT ? 'loader-absolute' : 'loader-fixed-bottom',
     firstLaunch: true,
   });
 
@@ -43,7 +43,7 @@ const StdcmLoader = ({ cancelStdcmRequest, launchButtonRef }: StdcmLoaderProps)
       if (!isLoaderFitting) {
         setLoaderStatus({
           firstLaunch: false,
-          status: 'fixedBottom',
+          status: 'loader-fixed-bottom',
         });
         return;
       }
@@ -56,14 +56,14 @@ const StdcmLoader = ({ cancelStdcmRequest, launchButtonRef }: StdcmLoaderProps)
       if (shouldLoaderStickTop) {
         setLoaderStatus({
           firstLaunch: false,
-          status: 'fixedTop',
+          status: 'loader-fixed-top',
         });
         return;
       }
 
       setLoaderStatus({
         firstLaunch: false,
-        status: 'absolute',
+        status: 'loader-absolute',
       });
     };
 
@@ -76,12 +76,11 @@ const StdcmLoader = ({ cancelStdcmRequest, launchButtonRef }: StdcmLoaderProps)
   return (
     <div
       ref={loaderRef}
-      className={cx(`stdcm-loader`, {
-        'fixed-top': loaderStatus.status === 'fixedTop',
-        absolute: loaderStatus.status === 'absolute',
-        'with-fade-in-animation': loaderStatus.status === 'absolute' && loaderStatus.firstLaunch,
-        'fixed-bottom': loaderStatus.status === 'fixedBottom',
-        'with-slide-animation': loaderStatus.status === 'fixedBottom' && loaderStatus.firstLaunch,
+      className={cx('stdcm-loader', `${loaderStatus.status}`, {
+        'with-fade-in-animation':
+          loaderStatus.status === 'loader-absolute' && loaderStatus.firstLaunch,
+        'with-slide-animation':
+          loaderStatus.status === 'loader-fixed-bottom' && loaderStatus.firstLaunch,
       })}
     >
       <div className="stdcm-loader__wrapper">
diff --git a/front/src/applications/stdcm/types.ts b/front/src/applications/stdcm/types.ts
index 165b94db32e..dee90bc8087 100644
--- a/front/src/applications/stdcm/types.ts
+++ b/front/src/applications/stdcm/types.ts
@@ -202,6 +202,6 @@ export type StdcmLinkedPathResult = {
 export type ExtremityPathStepType = 'origin' | 'destination';
 
 export type LoaderStatus = {
-  status: 'fixedBottom' | 'fixedTop' | 'absolute';
+  status: 'loader-fixed-bottom' | 'loader-fixed-top' | 'loader-absolute';
   firstLaunch: boolean;
 };
diff --git a/front/src/styles/scss/applications/stdcm/_loader.scss b/front/src/styles/scss/applications/stdcm/_loader.scss
index 0ec87521f16..ac78b57db6f 100644
--- a/front/src/styles/scss/applications/stdcm/_loader.scss
+++ b/front/src/styles/scss/applications/stdcm/_loader.scss
@@ -9,7 +9,7 @@
     0 16px 30px -5px rgba(0, 0, 0, 0.16),
     0 3px 5px -2px rgba(0, 0, 0, 0.1);
 
-  &.fixed-bottom {
+  &.loader-fixed-bottom {
     position: fixed;
     bottom: 32px;
     top: unset;
@@ -19,7 +19,7 @@
     }
   }
 
-  &.absolute {
+  &.loader-absolute {
     position: absolute;
     bottom: calc(-176px + 40px); // height of the loader minus the height of the launch button
 
@@ -28,7 +28,7 @@
     }
   }
 
-  &.fixed-top {
+  &.loader-fixed-top {
     position: fixed;
     top: 32px;
     bottom: unset;