fixup! fixup! front: add english translation fot lmr help section

Signed-off-by: Math_R_ <[email protected]>
OpenRailAssociation · Dec 12, 2024 · d4066fa · d4066fa
1 parent 9b0782a
commit d4066fa
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 59 deletions.
diff --git a/front/public/locales/en/stdcm-help-section.json b/front/public/locales/en/stdcm-help-section.json
@@ -1,6 +1,6 @@
 {
   "help": "Help",
-  "backToIndex": "Back to index",
+  "backToIndex": "help index",
   "asu": [
     {
       "title": "Application name",
@@ -58,7 +58,7 @@
             },
             {
               "type": "text",
-              "value": "<a href='mailto:[email protected]'>Contact us</a>"
+              "value": "<a href='mailto:[email protected]' target=\"_blank\">Contact us</a>"
             }
           ]
         },

diff --git a/front/public/locales/fr/stdcm-help-section.json b/front/public/locales/fr/stdcm-help-section.json
@@ -1,6 +1,6 @@
 {
   "help": "Aide",
-  "backToIndex": "Retour à l'index",
+  "backToIndex": "index de l'aide",
   "asu": [
     {
       "title": "Nom de l'application",
@@ -67,7 +67,7 @@
             },
             {
               "type": "text",
-              "value": "<a href='mailto:[email protected]'>Contactez-nous</a>"
+              "value": "<a href='mailto:[email protected]' target=\"_blank\">Contactez-nous</a>"
             }
           ]
         },
@@ -87,7 +87,7 @@
       "content": [
         {
           "type": "text",
-          "value": "Le convoi est un ensemble de véhicules de transport en commun qui circulent ensemble sur une ligne. Il est composé d'un ou plusieurs véhicules, qui peuvent être de types différents (bus, tramway, métro, etc.)."
+          "value": "Définir le convoi permet d'obtenir une simulation au plus proche de la réalité. Plus les informations que vous indiquez sont conformes à la composition réelle de votre convoi, plus la vitesse du train simulé sera proche de l'opérationnel."
         },
         {
           "type": "text",
@@ -284,14 +284,14 @@
               "term": "CH",
               "definition": "Code Chantier"
             },
-            {
-              "term": "DSDM",
-              "definition": "Demande de Sillon de Dernière Minute"
-            },
             {
               "term": "LMR",
               "definition": "Last Minute Request"
             },
+            {
+              "term": "PR",
+              "definition": "Point Remarquable"
+            },
             {
               "term": "SDM",
               "definition": "Sillon de Dernière Minute"

diff --git a/front/src/applications/stdcm/components/StdcmHelpModule/HelpSection.tsx b/front/src/applications/stdcm/components/StdcmHelpModule/HelpSection.tsx
@@ -23,8 +23,8 @@ const HelpSection = ({ section, isActive, closeHelpSection }: HelpSectionProps)
           onClick={closeHelpSection}
           className="flex align-items-center stdcm__help-section__back-button"
         >
-          <span className="mr-2">
-            <ArrowLeft size="lg" iconColor="#1844ef" />
+          <span className="mr-2 icon">
+            <ArrowLeft size="lg" />
           </span>
           {t('backToIndex')}
         </button>
@@ -38,12 +38,12 @@ const HelpSection = ({ section, isActive, closeHelpSection }: HelpSectionProps)
             <SectionContentManager key={index} content={content} />
           ))}
         {currentSection.subSections?.map((subSection) => (
-          <>
+          <div key={subSection.title}>
             <h2 className="stdcm__help-section__subtitle">{subSection.title}</h2>
             {subSection.content?.map((content, idx) => (
               <SectionContentManager key={idx} content={content} />
             ))}
-          </>
+          </div>
         ))}
       </div>
     </div>

diff --git a/front/src/applications/stdcm/components/StdcmHelpModule/StdcmHelpModule.tsx b/front/src/applications/stdcm/components/StdcmHelpModule/StdcmHelpModule.tsx
@@ -27,48 +27,47 @@ const StdcmHelpModule = ({ toggleHelpModule, showHelpModule }: StdcmHelpSectionP
     <div className={cx('stdcm__help-module', { active: showHelpModule })}>
       <div className="stdcm__help-module__header">
         <button type="button" className="stdcm__help-module__close" onClick={closeHelpModule}>
-          <X size="lg" iconColor="#B6B2AF" />
+          <X size="lg" />
         </button>
       </div>
       <div className="stdcm__help-module__content">
         <h1 className="stdcm__help-module__title">{t('help')}</h1>
         <div className="stdcm__help-module__chapters">
           {sections.map((section, index) => (
-            <>
+            <div key={section}>
               <button
                 type="button"
-                key={section}
                 className="stdcm__help-module__title-button flex"
                 onClick={() => setActiveSection(section)}
               >
                 <div>{t(`sections.${section}.title`)}</div>
-                <div className="ml-auto">
-                  <ChevronRight iconColor="#B6B2AF" />
+                <div className="ml-auto icon">
+                  <ChevronRight />
                 </div>
               </button>
               {index !== sections.length - 1 && <hr />}
-            </>
+            </div>
           ))}
         </div>
       </div>
       <footer>
         {Array.isArray(support) &&
           support.map((item, index) => (
-            <>
+            <div key={item.title}>
               <div className="support-info">
                 <div className="support-info__title">{item.title}</div>
                 <div className="support-info__content">{item.value}</div>
               </div>
               {index !== support.length - 1 && <hr />}
-            </>
+            </div>
           ))}
         <div className="support-asu__link">
           <a href="https://sncfreseau.service-now.com/support_asu" target="_blank" rel="noreferrer">
             {t('asuLink')}
           </a>
         </div>
       </footer>
-      {sections.map((section, index) => (
+      {sections.map((section) => (
         <HelpSection
           section={section}
           closeHelpSection={closeHelpSection}

diff --git a/front/src/applications/stdcm/components/StdcmHelpModule/types.ts b/front/src/applications/stdcm/components/StdcmHelpModule/types.ts
@@ -7,32 +7,32 @@ export type Section = {
 
 export type Content = ListContent | TextContent | FAQContent | GlossaryContent;
 
-export type ListContent = {
+type ListContent = {
   type: 'list';
   items: { value: string }[];
 };
 
-export type TextContent = {
+type TextContent = {
   type: 'text';
   value: string;
 };
 
-export type FAQItem = {
+type FAQItem = {
   question: string;
   answer: string;
 };
 
-export type FAQContent = {
+type FAQContent = {
   type: 'faq';
   questions: FAQItem[];
 };
 
-export type GlossaryContent = {
+type GlossaryContent = {
   type: 'definitions';
   definitions: GlossaryItem[];
 };
 
-export type GlossaryItem = {
+type GlossaryItem = {
   term: string;
   definition: string;
 };
diff --git a/front/src/styles/scss/applications/stdcm/_header.scss b/front/src/styles/scss/applications/stdcm/_header.scss
@@ -43,19 +43,19 @@
     }
   }
 
-  .stdcm-header__debug {
+  &__debug {
     button:focus {
       outline: none;
     }
     button {
       height: 40px;
-      border-radius: 0.375rem;
-      color: rgba(114, 168, 247, 1);
-      border: 0.0625rem solid rgba(114, 168, 247);
+      border-radius: 6px;
+      color: var(--primary50);
+      border: 1px solid var(--primary30);
       &:hover {
-        color: rgba(31, 15, 150);
-        border: 0.0625rem solid rgba(31, 15, 150);
-        background-color: rgba(255, 255, 255);
+        color: var(--primary80);
+        border: 1px solid var(--primary80);
+        background-color: var(--white100);
       }
       &:focus {
         outline: none;
@@ -65,17 +65,21 @@
         opacity: 0.5;
       }
       &.selected {
-        box-shadow: 0 0 0 0.125rem rgba(255, 255, 255) inset;
-        border: 0.0625rem solid rgba(92, 89, 85);
+        box-shadow: 0 0 0 2px var(--white100) inset;
+        border: 1px solid rgba(92, 89, 85);
         background-color: rgba(255, 242, 179);
         &:hover {
-          border: 0.1875rem solid rgba(255, 255, 255);
-          border: 0.0625rem solid rgba(0, 0, 0);
-          background-color: rgba(0, 0, 0, 0.05);
+          border: 3px solid var(--white100);
+          border: 1px solid var(--black100);
+          background-color: var(--black5);
         }
       }
       &.debug {
-        width: 2.5rem;
+        width: 40px;
+        color: var(--primary30);
+        &:hover {
+          color: var(--primary80);
+        }
       }
     }
   }
@@ -94,17 +98,3 @@
     }
   }
 }
-
-.scenario-explorator-card {
-  height: 7rem;
-  margin-bottom: 0;
-
-  &-noscenario {
-    font-size: 1.2rem;
-  }
-
-  &-head-img,
-  &-head {
-    height: 6rem;
-  }
-}
diff --git a/front/src/styles/scss/applications/stdcm/_helpModule.scss b/front/src/styles/scss/applications/stdcm/_helpModule.scss
@@ -21,6 +21,7 @@
     top: 24px;
     right: 24px;
     cursor: pointer;
+    color: var(--grey30);
   }
   &__title {
     color: rgba(0, 0, 0, 1);
@@ -41,11 +42,14 @@
       width: 100%;
       padding-top: 14px;
       padding-bottom: 14px;
+      .icon {
+        color: var(--grey30);
+      }
     }
     hr {
-      margin-top:  2px;
+      margin-top: 2px;
       margin-bottom: 2px;
-      background-color: rgba(211, 209, 207, 1);
+      background-color: var(--grey20);
     }
   }
   .stdcm__help-section {
@@ -69,9 +73,12 @@
       font-size: 18px;
       font-weight: 600;
       width: 100%;
+      .icon {
+        color: var(--primary60);
+      }
     }
 
-    &__content{
+    &__content {
       padding-left: 32px;
     }
     &__title {
@@ -128,7 +135,7 @@
       }
     }
     hr {
-      background-color: rgba(211, 209, 207, 1);
+      background-color: var(--grey20);
       margin: 2px 0px;
     }
     .support-asu__link {