front: fix padding, add translations

OpenRailAssociation · Jan 8, 2025 · 11b864d · 11b864d
1 parent eb84a39
commit 11b864d
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 5 deletions.
diff --git a/front/public/locales/en/stdcm.json b/front/public/locales/en/stdcm.json
@@ -50,6 +50,10 @@
   },
   "noCorrespondingResults": "No results matching your search.",
   "notificationTitle": "Phase 1: from D-7 to D-1 5pm, on the Perrigny-Miramas axis.",
+  "pathfindingStatus": {
+    "calculating": "Validating path...",
+    "success": "The requested path is valid."
+  },
   "pleaseWait": "Please wait…",
   "simulation": {
     "calculatingSimulation": "Calculation in progress...",

diff --git a/front/public/locales/fr/stdcm.json b/front/public/locales/fr/stdcm.json
@@ -50,6 +50,10 @@
   },
   "noCorrespondingResults": "Aucun résultat ne correspond à votre recherche.",
   "notificationTitle": "Phase 1 : de J-7 à J-1 17h, sur l’axe Perrigny—Miramas.",
+  "pathfindingStatus": {
+    "calculating": "Validation de l'itinéraire en cours...",
+    "success": "L'itinéraire demandé est valide."
+  },
   "pleaseWait": "Veuillez patientez…",
   "simulation": {
     "calculatingSimulation": "Calcul en cours...",

diff --git a/front/src/applications/stdcm/components/StdcmForm/StdcmConfig.tsx b/front/src/applications/stdcm/components/StdcmForm/StdcmConfig.tsx
@@ -176,20 +176,21 @@ const StdcmConfig = ({
 
   useEffect(() => {
     if (origin.location && destination.location) {
-      setValidationMessage("validation de l'itinéraire en cours");
+      setValidationMessage(t('pathfindingStatus.calculating'));
     } else {
       setValidationMessage(null);
     }
   }, [origin, destination]);
 
   useEffect(() => {
     if (pathfinding?.status === 'success') {
-      setValidationMessage("l'itinéraire demandé est valide");
+      setValidationMessage(t('pathfindingStatus.success'));
       const timer = setTimeout(() => {
         setValidationMessage(null);
-      }, 2000);
+      }, 3000);
       return () => clearTimeout(timer);
     }
+    return undefined;
   }, [pathfinding?.status]);
 
   return (
@@ -230,7 +231,13 @@ const StdcmConfig = ({
                 <div className="simulation-status-banner">
                   <div className="banner-content">
                     {validationMessage && (
-                      <div className="validation-message">{validationMessage}</div>
+                      <div
+                        className={cx('validation-message', {
+                          'validation-message-success': pathfinding?.status === 'success',
+                        })}
+                      >
+                        {validationMessage}
+                      </div>
                     )}
                   </div>
                 </div>

diff --git a/front/src/styles/scss/applications/stdcm/_home.scss b/front/src/styles/scss/applications/stdcm/_home.scss
@@ -258,6 +258,10 @@
     .banner-content {
       padding: 0 0 16px 378px;
       background: linear-gradient(180deg, rgba(239, 243, 245) 40px, rgba(233, 239, 242) 40px);
+      &:has(.validation-message) {
+        padding: 0 !important;
+        width: 450px;
+      }
       .status {
         width: 466px;
         display: flex;
@@ -295,16 +299,47 @@
         text-align: center;
       }
 
+      .banner-validation-message .status {
+        width: 466px;
+        display: flex;
+        font-weight: 400;
+        letter-spacing: 0px;
+        text-align: center;
+        justify-content: center;
+        color: rgb(11, 114, 60);
+        padding-top: 23px;
+        font-size: 1.5rem;
+        line-height: 32px;
+        height: 80px;
+        border-radius: 8px;
+        background-color: rgb(230, 247, 238);
+        box-shadow:
+          0 0 0 4px rgba(255, 255, 255, 1) inset,
+          0 0 0 5px rgb(60, 202, 128) inset,
+          0 3px 7px -3px rgba(11, 114, 60, 0.4);
+      }
+
       .validation-message {
         @extend .status;
+        width: 450px;
         color: rgb(33, 100, 130);
         background-color: rgb(230, 247, 255);
-        margin-top: 20px;
+        margin-bottom: 20px;
         box-shadow:
           0 0 0 4px rgba(255, 255, 255, 1) inset,
           0 0 0 5px rgba(104, 159, 255, 1) inset,
           0 3px 7px -3px rgba(28, 28, 217, 0.4);
       }
+      .validation-message-success {
+        width: 450px;
+        color: rgb(11, 114, 60);
+        background-color: rgb(230, 247, 238);
+        margin-bottom: 20px;
+        box-shadow:
+          0 0 0 4px rgba(255, 255, 255, 1) inset,
+          0 0 0 5px rgb(60, 202, 128) inset,
+          0 3px 7px -3px rgba(11, 114, 60, 0.4);
+      }
     }
   }
 }