From e11d21d2744cdcda706dce50cc87c2cf4832aa21 Mon Sep 17 00:00:00 2001
From: Clara Ni <clara.ni@outlook.fr>
Date: Mon, 7 Oct 2024 13:45:36 +0200
Subject: [PATCH] front: fix items alignement in stdcm card

Signed-off-by: Clara Ni <clara.ni@outlook.fr>
---
 .../stdcmV2/components/StdcmCard.tsx          |  12 +-
 .../stdcmV2/components/StdcmConsist.tsx       |  56 +++++---
 .../stdcmV2/components/StdcmDefaultCard.tsx   |   4 +-
 .../stdcmV2/components/StdcmDestination.tsx   |   1 +
 .../stdcmV2/components/StdcmOpSchedule.tsx    |   8 +-
 .../components/StdcmOperationalPoint.tsx      |   6 +-
 .../stdcmV2/components/StdcmOrigin.tsx        |  35 +++--
 .../stdcmV2/components/StdcmStopType.tsx      |   2 +-
 .../stdcmV2/components/StdcmVias.tsx          |  15 +-
 .../SpeedLimitByTagSelector.tsx               |  11 +-
 .../scss/applications/stdcmV2/_card.scss      | 131 ++++++++++++++----
 .../scss/applications/stdcmV2/_home.scss      |  25 +---
 12 files changed, 192 insertions(+), 114 deletions(-)

diff --git a/front/src/applications/stdcmV2/components/StdcmCard.tsx b/front/src/applications/stdcmV2/components/StdcmCard.tsx
index ef4a3e3b568..3216c3abcd6 100644
--- a/front/src/applications/stdcmV2/components/StdcmCard.tsx
+++ b/front/src/applications/stdcmV2/components/StdcmCard.tsx
@@ -6,9 +6,17 @@ export type StdcmCardProps = {
   disabled?: boolean;
   title?: React.ReactNode;
   children: React.ReactNode;
+  className?: string;
 };
 
-const StdcmCard = ({ name, hasTip = false, disabled = false, title, children }: StdcmCardProps) => (
+const StdcmCard = ({
+  name,
+  hasTip = false,
+  disabled = false,
+  title,
+  children,
+  className = '',
+}: StdcmCardProps) => (
   <div className={cx('stdcm-v2-card', { 'has-tip': hasTip, disabled })}>
     {name && (
       <div
@@ -23,7 +31,7 @@ const StdcmCard = ({ name, hasTip = false, disabled = false, title, children }:
         {title}
       </div>
     )}
-    <div className="stdcm-v2-card__body">{children}</div>
+    <div className={cx('stdcm-v2-card__body', `${className}`)}>{children}</div>
   </div>
 );
 
diff --git a/front/src/applications/stdcmV2/components/StdcmConsist.tsx b/front/src/applications/stdcmV2/components/StdcmConsist.tsx
index 17bdc3e8542..de712595a6b 100644
--- a/front/src/applications/stdcmV2/components/StdcmConsist.tsx
+++ b/front/src/applications/stdcmV2/components/StdcmConsist.tsx
@@ -108,33 +108,43 @@ const StdcmConsist = ({ setCurrentSimulationInputs, disabled = false }: StdcmCon
       name={t('consist.consist')}
       title={<ConsistCardTitle rollingStock={rollingStock} />}
       disabled={disabled}
+      className="consist"
     >
-      <div className="stdcm-v2-consist">
-        <div className="suggestions">
-          <ComboBox
-            id="tractionEngine"
-            label={t('consist.tractionEngine')}
-            value={filters.text.toUpperCase()}
-            onClick={onInputClick}
-            onChange={onInputChange}
-            autoComplete="off"
-            disabled={disabled}
-            suggestions={filteredRollingStockList}
-            getSuggestionLabel={(suggestion: LightRollingStockWithLiveries) => getLabel(suggestion)}
-            onSelectSuggestion={onSelectSuggestion}
-          />
-        </div>
-        <div className="stdcm-v2-consist__properties d-flex justify-content-between">
-          <Input id="tonnage" label={t('consist.tonnage')} trailingContent="t" />
-          <Input id="length" label={t('consist.length')} trailingContent="m" />
-        </div>
-        <SpeedLimitByTagSelector
+      <div className="traction-engine">
+        <ComboBox
+          id="tractionEngine"
+          label={t('consist.tractionEngine')}
+          value={filters.text.toUpperCase()}
+          onClick={onInputClick}
+          onChange={onInputChange}
+          autoComplete="off"
           disabled={disabled}
-          selectedSpeedLimitByTag={speedLimitByTag}
-          speedLimitsByTags={speedLimitsByTags}
-          dispatchUpdateSpeedLimitByTag={dispatchUpdateSpeedLimitByTag}
+          suggestions={filteredRollingStockList}
+          getSuggestionLabel={(suggestion: LightRollingStockWithLiveries) => getLabel(suggestion)}
+          onSelectSuggestion={onSelectSuggestion}
         />
       </div>
+      <div className="stdcm-v2-consist__properties">
+        <Input
+          id="tonnage"
+          label={t('consist.tonnage')}
+          trailingContent="t"
+          inputFieldWrapperClassname="weight"
+        />
+        <Input
+          id="length"
+          label={t('consist.length')}
+          trailingContent="m"
+          inputFieldWrapperClassname="length"
+        />
+      </div>
+      <SpeedLimitByTagSelector
+        disabled={disabled}
+        selectedSpeedLimitByTag={speedLimitByTag}
+        speedLimitsByTags={speedLimitsByTags}
+        dispatchUpdateSpeedLimitByTag={dispatchUpdateSpeedLimitByTag}
+        className="speed-limit-by-tag-selector"
+      />
     </StdcmCard>
   );
 };
diff --git a/front/src/applications/stdcmV2/components/StdcmDefaultCard.tsx b/front/src/applications/stdcmV2/components/StdcmDefaultCard.tsx
index 84afd2bc231..ea2e9b38c7a 100644
--- a/front/src/applications/stdcmV2/components/StdcmDefaultCard.tsx
+++ b/front/src/applications/stdcmV2/components/StdcmDefaultCard.tsx
@@ -14,9 +14,9 @@ const StdcmDefaultCard = ({
   onClick,
   disabled = false,
 }: StdcmCardProps) => (
-  <StdcmCard hasTip={hasTip} disabled={disabled}>
+  <StdcmCard hasTip={hasTip} disabled={disabled} className="add-via">
     <button type="button" onClick={onClick}>
-      <span className="stdcm-v2-default-card-icon ml-n1">{Icon}</span>
+      <span className="stdcm-v2-default-card-icon">{Icon}</span>
       <span className="stdcm-v2-default-card-button">{text}</span>
     </button>
   </StdcmCard>
diff --git a/front/src/applications/stdcmV2/components/StdcmDestination.tsx b/front/src/applications/stdcmV2/components/StdcmDestination.tsx
index 9fcd3d6340f..2cb41d40deb 100644
--- a/front/src/applications/stdcmV2/components/StdcmDestination.tsx
+++ b/front/src/applications/stdcmV2/components/StdcmDestination.tsx
@@ -101,6 +101,7 @@ const StdcmDestination = ({
       name={t('trainPath.destination')}
       title={<img src={DestinationIcon} alt="destination" className="stdcm-destination-icon" />}
       disabled={disabled}
+      className="extremity"
     >
       <div className="stdcm-v2-destination">
         <StdcmOperationalPoint
diff --git a/front/src/applications/stdcmV2/components/StdcmOpSchedule.tsx b/front/src/applications/stdcmV2/components/StdcmOpSchedule.tsx
index 40c0a6dc2ad..5d12ab74275 100644
--- a/front/src/applications/stdcmV2/components/StdcmOpSchedule.tsx
+++ b/front/src/applications/stdcmV2/components/StdcmOpSchedule.tsx
@@ -100,8 +100,8 @@ const StdcmOpSchedule = ({
   );
 
   return (
-    <div className="d-flex flex-column">
-      <div className="col-12 pr-1">
+    <>
+      <div className="arrival-type-select">
         <Select
           id={`select-${opId}`}
           value={opScheduleTimeType}
@@ -116,7 +116,7 @@ const StdcmOpSchedule = ({
         />
       </div>
       {opScheduleTimeType === 'preciseTime' && (
-        <div className="d-flex pl-2 pr-1">
+        <div className="schedule">
           {/* TODO: Remove empty onChange events once we fix the warning on ui-core side */}
           <DatePicker
             inputProps={{
@@ -166,7 +166,7 @@ const StdcmOpSchedule = ({
           </div>
         </div>
       )}
-    </div>
+    </>
   );
 };
 
diff --git a/front/src/applications/stdcmV2/components/StdcmOperationalPoint.tsx b/front/src/applications/stdcmV2/components/StdcmOperationalPoint.tsx
index b26551603dd..5f4e5a26517 100644
--- a/front/src/applications/stdcmV2/components/StdcmOperationalPoint.tsx
+++ b/front/src/applications/stdcmV2/components/StdcmOperationalPoint.tsx
@@ -133,8 +133,8 @@ const StdcmOperationalPoint = ({
   }, [point]);
 
   return (
-    <div className="flex">
-      <div className="suggestions col-9">
+    <div className="location-line">
+      <div className="col-9 ci-input">
         <ComboBox
           id={`${opPointId}-ci`}
           label={t('trainPath.ci')}
@@ -148,7 +148,7 @@ const StdcmOperationalPoint = ({
           disableDefaultFilter
         />
       </div>
-      <div className="suggestions stdcm-v2-ch-selector w-100 px-1 pb-2 col-3">
+      <div className="col-3 p-0">
         <Select
           label={t('trainPath.ch')}
           id={`${opPointId}-ch`}
diff --git a/front/src/applications/stdcmV2/components/StdcmOrigin.tsx b/front/src/applications/stdcmV2/components/StdcmOrigin.tsx
index 8fb0af01583..859c945c0af 100644
--- a/front/src/applications/stdcmV2/components/StdcmOrigin.tsx
+++ b/front/src/applications/stdcmV2/components/StdcmOrigin.tsx
@@ -90,29 +90,28 @@ const StdcmOrigin = ({
     <StdcmCard
       name={t('trainPath.origin')}
       title={<img src={OriginIcon} alt="origin" className="stdcm-origin-icon" />}
+      className="extremity"
       disabled={disabled}
       hasTip
     >
-      <div className="stdcm-v2-origin__parameters">
-        <StdcmOperationalPoint
-          updatePoint={updateOriginPoint}
-          point={origin}
-          opPointId={origin?.id || 'origin'}
+      <StdcmOperationalPoint
+        updatePoint={updateOriginPoint}
+        point={origin}
+        opPointId={origin?.id || 'origin'}
+        disabled={disabled}
+      />
+      {origin && (
+        <StdcmOpSchedule
+          onArrivalChange={onOriginArrivalChange}
+          onArrivalTypeChange={onOriginArrivalTypeChange}
+          onArrivalToleranceChange={onOriginToleranceChange}
+          opTimingData={originArrival}
+          opToleranceValues={originToleranceValues}
+          opScheduleTimeType={origin?.arrivalType || ArrivalTimeTypes.PRECISE_TIME}
           disabled={disabled}
+          opId="origin-arrival"
         />
-        {origin && (
-          <StdcmOpSchedule
-            onArrivalChange={onOriginArrivalChange}
-            onArrivalTypeChange={onOriginArrivalTypeChange}
-            onArrivalToleranceChange={onOriginToleranceChange}
-            opTimingData={originArrival}
-            opToleranceValues={originToleranceValues}
-            opScheduleTimeType={origin?.arrivalType || ArrivalTimeTypes.PRECISE_TIME}
-            disabled={disabled}
-            opId="origin-arrival"
-          />
-        )}
-      </div>
+      )}
     </StdcmCard>
   );
 };
diff --git a/front/src/applications/stdcmV2/components/StdcmStopType.tsx b/front/src/applications/stdcmV2/components/StdcmStopType.tsx
index 2c2f05fbfd8..69105a7d666 100644
--- a/front/src/applications/stdcmV2/components/StdcmStopType.tsx
+++ b/front/src/applications/stdcmV2/components/StdcmStopType.tsx
@@ -12,7 +12,7 @@ const StdcmStopType = ({ stopTypes, updatePathStepStopType }: StdcmStopTypeProps
   const { t } = useTranslation('stdcm');
 
   return (
-    <div className="stdcm-v2-via-stop-for selector">
+    <div className="stop-type-selector">
       <Select
         label={t('trainPath.type')}
         id="type"
diff --git a/front/src/applications/stdcmV2/components/StdcmVias.tsx b/front/src/applications/stdcmV2/components/StdcmVias.tsx
index 2a7c2f37c06..4df7443aa3a 100644
--- a/front/src/applications/stdcmV2/components/StdcmVias.tsx
+++ b/front/src/applications/stdcmV2/components/StdcmVias.tsx
@@ -140,15 +140,14 @@ const StdcmVias = ({ disabled = false, setCurrentSimulationInputs }: StdcmConfig
                 }
                 hasTip
                 disabled={disabled}
+                className="via"
               >
-                <div className="stdcm-v2-vias">
-                  <StdcmOperationalPoint
-                    updatePoint={(e) => updatePathStepsList(e, pathStepIndex)}
-                    point={pathStep}
-                    opPointId={pathStep.id}
-                    disabled={disabled}
-                  />
-                </div>
+                <StdcmOperationalPoint
+                  updatePoint={(e) => updatePathStepsList(e, pathStepIndex)}
+                  point={pathStep}
+                  opPointId={pathStep.id}
+                  disabled={disabled}
+                />
                 {'uic' in pathStep && pathStep.uic !== -1 && (
                   <>
                     <StdcmStopType
diff --git a/front/src/common/SpeedLimitByTagSelector/SpeedLimitByTagSelector.tsx b/front/src/common/SpeedLimitByTagSelector/SpeedLimitByTagSelector.tsx
index 671214ac9b9..c619640f987 100644
--- a/front/src/common/SpeedLimitByTagSelector/SpeedLimitByTagSelector.tsx
+++ b/front/src/common/SpeedLimitByTagSelector/SpeedLimitByTagSelector.tsx
@@ -13,6 +13,7 @@ type SpeedLimitByTagSelectorProps = {
   selectedSpeedLimitByTag?: string;
   speedLimitsByTags: string[];
   dispatchUpdateSpeedLimitByTag: (newTag: string | null) => void;
+  className?: string;
 };
 
 export default function SpeedLimitByTagSelector({
@@ -21,6 +22,7 @@ export default function SpeedLimitByTagSelector({
   selectedSpeedLimitByTag: speedLimitByTag,
   speedLimitsByTags,
   dispatchUpdateSpeedLimitByTag,
+  className = '',
 }: SpeedLimitByTagSelectorProps) {
   const { t } = useTranslation(['operationalStudies/manageTrainSchedule']);
 
@@ -34,9 +36,12 @@ export default function SpeedLimitByTagSelector({
   return (
     <div className="osrd-config-item mb-3">
       <div
-        className={cx('osrd-config-item-container', {
-          'd-flex align-items-center gap-10': condensed,
-        })}
+        className={
+          (cx('osrd-config-item-container', {
+            'd-flex align-items-center gap-10': condensed,
+          }),
+          className)
+        }
       >
         <Select
           disabled={disabled}
diff --git a/front/src/styles/scss/applications/stdcmV2/_card.scss b/front/src/styles/scss/applications/stdcmV2/_card.scss
index 50879ac396a..77b9c9fb638 100644
--- a/front/src/styles/scss/applications/stdcmV2/_card.scss
+++ b/front/src/styles/scss/applications/stdcmV2/_card.scss
@@ -61,39 +61,124 @@
   }
 
   .stdcm-v2-card__body {
-    padding: 0.688rem 1rem 0.8125rem 1.5rem;
-    // TODO: remove this style after ui-core component is implemented
-    .suggestions * label,
-    .stdcm-v2-via-stop-for * label {
+    padding: 0.875rem 1.5rem 1.5rem 0.5rem;
+
+    .location-line {
+      padding-left: 1rem;
+      display: flex;
+
+      .ci-input {
+        padding-inline: 0 0.625rem;
+      }
+    }
+
+    // Fix osrd-ui styles
+    label {
       margin-bottom: 0;
     }
 
     .feed-back {
-      padding-right: 0.3rem;
-      padding-left: 0;
+      padding: 0;
     }
 
-    .selector {
-      padding-inline: 0.188rem 0.25rem;
+    .date-picker {
+      .feed-back {
+        padding-inline: 1rem 0.625rem;
+      }
     }
 
-    .stop-time {
-      padding-left: 0.125rem;
-      padding: 0.375rem 0.3rem 0.625rem 0rem;
-      padding-left: 0rem;
-      padding-right: 0rem;
+    .time-picker {
+      .feed-back {
+        padding-right: 0.625rem;
+        width: 7.5rem;
+      }
     }
 
-    .suggestions-list {
-      width: 99%;
-      left: 0;
+    .tolerance-picker {
+      .feed-back {
+        width: 7.5rem;
+      }
+    }
+
+    .combo-box {
+      .suggestions-list {
+        width: 99%;
+        left: 0;
+        margin-top: 1rem;
+      }
+    }
+
+    // cards styles
+    &.consist {
+      padding-left: 1.5rem;
+      padding-bottom: 0.5rem;
+
+      .stdcm-v2-consist__properties {
+        display: flex;
+        justify-content: space-between;
+        padding-block: 0.6875rem;
+
+        .weight {
+          width: 7.4375rem;
+        }
+
+        .length {
+          width: 7.9375rem;
+        }
+
+        * > .base-label-wrapper > label {
+          margin-bottom: 0;
+        }
+      }
+
+      .speed-limit-by-tag-selector {
+        padding-right: 0.1875rem;
+      }
+    }
+
+    &.extremity {
+      padding-bottom: 1.5rem;
+
+      .arrival-type-select {
+        padding: 2.125rem 0 0 1rem;
+      }
+
+      .schedule {
+        display: flex;
+        flex-direction: row;
+        padding-top: 1rem;
+      }
+    }
+
+    &.via {
+      padding-right: 0.5rem;
+      padding-bottom: 0.8125rem;
+
+      .location-line {
+        padding-right: 1rem;
+      }
+
+      .stop-type-selector {
+        padding: 0.8125rem 1rem;
+      }
+
+      .stop-time {
+        .feed-back {
+          padding: 0 1rem 0.8125rem 1rem;
+        }
+      }
+    }
+
+    &.add-via {
+      padding: 0.6875rem 1.5rem 0.8125rem 0.75rem;
     }
 
     .stdcm-v2-default-card-button {
-      color: rgba(24, 68, 239, 1);
-      line-height: 24px;
+      color: var(--primary60);
+      line-height: 1.5rem;
       margin-left: 0.75rem;
     }
+
     button:focus {
       outline: none;
     }
@@ -118,15 +203,9 @@
     button {
       display: contents;
       font-size: 1rem;
-      font-weight: 500;
+      font-weight: 600;
       cursor: pointer;
-      color: #256afa;
+      color: var(--primary60);
     }
   }
 }
-
-.stdcm-v2-card:last-of-type {
-  .stdcm-v2-card__body {
-    padding-bottom: 0.75rem;
-  }
-}
diff --git a/front/src/styles/scss/applications/stdcmV2/_home.scss b/front/src/styles/scss/applications/stdcmV2/_home.scss
index e4c025d4d8f..dbbea1f3d13 100644
--- a/front/src/styles/scss/applications/stdcmV2/_home.scss
+++ b/front/src/styles/scss/applications/stdcmV2/_home.scss
@@ -2,7 +2,7 @@
   font-family: 'IBM Plex Sans';
   min-width: 85rem;
 
-  /* 
+  /*
   We set the cursor to default to avoid the pointer cursor that appears due to role="button" on the div.
   The role="button" makes the div appear clickable, which causes the cursor to change to a pointer on hover.
   Using !important ensures that the cursor remains in its default state.
@@ -59,25 +59,6 @@
             height: 1.25rem;
           }
         }
-        .stdcm-v2-consist {
-          .osrd-config-item-container {
-            padding: 0 0.6rem 0 0;
-            .feed-back {
-              padding: 0;
-            }
-          }
-        }
-        .stdcm-v2-consist__properties {
-          .feed-back:nth-child(1) {
-            width: 7.75rem;
-          }
-          .feed-back:nth-child(2) {
-            width: 8.25rem;
-          }
-          * > .base-label-wrapper > label {
-            margin-bottom: 0;
-          }
-        }
       }
 
       .stdcm-v2__separator {
@@ -95,10 +76,6 @@
         position: relative;
         align-items: center;
 
-        & > div:not(:nth-last-child(-n + 2)) {
-          margin-bottom: 2rem;
-        }
-
         > div {
           width: 100%;
         }