front: reduce font size of min/100km in timesstops output table

Signed-off-by: Alice Khoudli <[email protected]>
OpenRailAssociation · Nov 25, 2024 · 7046a03 · 7046a03
1 parent 876dccc
commit 7046a03
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 2 deletions.
diff --git a/front/src/modules/timesStops/hooks/useTimeStopsColumns.tsx b/front/src/modules/timesStops/hooks/useTimeStopsColumns.tsx
@@ -10,6 +10,7 @@ import { disabledTextColumn } from '../helpers/utils';
 import ReadOnlyTime from '../ReadOnlyTime';
 import TimeInput from '../TimeInput';
 import { TableType, type TimeExtraDays, type TimeStopsRow } from '../types';
+import { NO_BREAK_SPACE } from 'utils/strings';
 
 const timeColumn = (isOutputTable: boolean) =>
   ({
@@ -167,6 +168,18 @@ export const useTimeStopsColumns = <T extends TimeStopsRow>(
             alignRight: true,
           })
         ),
+        ...(isOutputTable && {
+          component: ({ rowData }) => {
+            const [digits, unit] = rowData.theoreticalMargin?.split(NO_BREAK_SPACE) ?? [];
+            return (
+              <span className="dsg-input dsg-input-align-right self-center">
+                {digits}
+                {NO_BREAK_SPACE}
+                <span className={cx({ smallUnit: unit === 'min/100km' })}>{unit}</span>
+              </span>
+            );
+          },
+        }),
         cellClassName: ({ rowData }) =>
           cx({
             invalidCell: !isOutputTable && !rowData.isMarginValid,

diff --git a/front/src/modules/timesStops/styles/_timesStopsDatasheet.scss b/front/src/modules/timesStops/styles/_timesStopsDatasheet.scss
@@ -11,6 +11,10 @@
   --dsg-header-text-color: var(--grey50);
   --dsg-header-active-text-color: var(--black100);
 
+  .invalidCell {
+    color: red !important;
+  }
+
   .padded-header > * {
     padding-inline: 8px 16px;
   }
@@ -19,8 +23,8 @@
     color: var(--grey50);
   }
 
-  .invalidCell {
-    color: red !important;
+  .smallUnit {
+    font-size: 0.65rem;
   }
 
   .repeatedValue {