ui-trackoccupancydiagram: export colors from consts

Co-authored-by: Uriel-Sautron <[email protected]> Signed-off-by: Yohh <[email protected]>
OpenRailAssociation · Dec 4, 2024 · c6fe372 · c6fe372
1 parent bd5b087
commit c6fe372
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 14 deletions.
diff --git a/ui-trackoccupancydiagram/src/components/consts.ts b/ui-trackoccupancydiagram/src/components/consts.ts
@@ -1,5 +1,5 @@
 export const TRACK_HEIGHT_CONTAINER = 73;
-export const CANVAS_PADDING = 8;
+export const CANVAS_PADDING = 10;
 export const OCCUPANCY_ZONE_START = 35;
 export const OCCUPANCY_ZONE_HEIGHT = 3;
 export const MINUTES_TEXT_OFFSET = 6.5;

diff --git a/ui-trackoccupancydiagram/src/components/helpers/drawElements/drawOccupancyZones.ts b/ui-trackoccupancydiagram/src/components/helpers/drawElements/drawOccupancyZones.ts
@@ -4,6 +4,7 @@ import {
   CANVAS_PADDING,
   OCCUPANCY_ZONE_START,
   OCCUPANCY_ZONE_HEIGHT,
+  COLORS,
 } from '../../consts';
 import type { OccupancyZone, Track } from '../../types';
 
@@ -36,7 +37,7 @@ export const drawOccupancyZones = ({
         const departureTime = getTimePixel(zone.departureTime.getTime());
 
         ctx.fillStyle = zone.color;
-        ctx.strokeStyle = 'rgb(255, 255, 255)';
+        ctx.strokeStyle = COLORS.WHITE_100;
         ctx.lineWidth = 1;
         ctx.beginPath();
         ctx.rect(

diff --git a/ui-trackoccupancydiagram/src/components/helpers/drawElements/drawOccupancyZonesTexts.ts b/ui-trackoccupancydiagram/src/components/helpers/drawElements/drawOccupancyZonesTexts.ts
@@ -1,4 +1,9 @@
-import { OCCUPANCY_ZONE_START, MINUTES_TEXT_OFFSET, STATION_TEXT_OFFSET } from '../../consts';
+import {
+  OCCUPANCY_ZONE_START,
+  MINUTES_TEXT_OFFSET,
+  STATION_TEXT_OFFSET,
+  COLORS,
+} from '../../consts';
 import { drawText } from '../../utils';
 
 const BREAKPOINTS = {
@@ -10,6 +15,8 @@ const X_INITIAL_POSITION_OFFSET = 8;
 const Y_INITIAL_POSITION_OFFSET = 5;
 const Y_MEDIUM_POSITION_OFFSET = 14;
 
+const { WHITE_100, GREY_50, GREY_60, GREY_80 } = COLORS;
+
 export const drawOccupancyZonesTexts = ({
   ctx,
   zone,
@@ -49,7 +56,7 @@ export const drawOccupancyZonesTexts = ({
   const xDeparturePosition = getBreakpoint('small') ? 'left' : 'center';
 
   const textStroke = {
-    color: 'rgb(255, 255, 255)',
+    color: WHITE_100,
     width: STROKE_WIDTH,
   };
 
@@ -59,7 +66,7 @@ export const drawOccupancyZonesTexts = ({
     text: zone.arrivalTrainName,
     x: xName,
     y: yName,
-    color: 'rgb(121, 118, 113)',
+    color: GREY_50,
     rotateAngle: -30,
     stroke: textStroke,
   });
@@ -70,7 +77,7 @@ export const drawOccupancyZonesTexts = ({
     text: zone.arrivalTime.getMinutes().toLocaleString('fr-FR', { minimumIntegerDigits: 2 }),
     x: arrivalTime,
     y: OCCUPANCY_ZONE_START + MINUTES_TEXT_OFFSET,
-    color: 'rgb(92, 89, 85)',
+    color: GREY_80,
     xPosition: xArrivalPosition,
     yPosition: 'top',
     font: '400 12px IBM Plex Sans',
@@ -82,7 +89,7 @@ export const drawOccupancyZonesTexts = ({
     text: zone.departureTime.getMinutes().toLocaleString('fr-FR', { minimumIntegerDigits: 2 }),
     x: departureTime,
     y: OCCUPANCY_ZONE_START + MINUTES_TEXT_OFFSET,
-    color: 'rgb(92, 89, 85)',
+    color: GREY_80,
     xPosition: xDeparturePosition,
     yPosition: 'top',
     font: '400 12px IBM Plex Sans',
@@ -95,7 +102,7 @@ export const drawOccupancyZonesTexts = ({
     text: zone.originStation!,
     x: arrivalTime,
     y: OCCUPANCY_ZONE_START - STATION_TEXT_OFFSET,
-    color: 'rgb(92, 89, 85)',
+    color: GREY_60,
     xPosition: 'right',
     yPosition: 'bottom',
     font: `400 10px IBM Plex Mono`,
@@ -107,7 +114,7 @@ export const drawOccupancyZonesTexts = ({
     text: zone.destinationStation!,
     x: departureTime,
     y: OCCUPANCY_ZONE_START - STATION_TEXT_OFFSET,
-    color: 'rgb(92, 89, 85)',
+    color: GREY_60,
     xPosition: 'left',
     yPosition: 'bottom',
     font: `400 10px IBM Plex Mono`,

diff --git a/ui-trackoccupancydiagram/src/components/helpers/drawElements/drawTrack.ts b/ui-trackoccupancydiagram/src/components/helpers/drawElements/drawTrack.ts
@@ -3,11 +3,13 @@ import { sum } from 'lodash';
 import { TRACK_HEIGHT_CONTAINER, COLORS, TICKS_PATTERN } from '../../consts';
 import { getTickPattern } from '../../utils';
 
+const { WHITE_50, GREY_20, RAIL_TICK } = COLORS;
+
 const drawRails = ({
   xStart,
   yStart,
   width,
-  stroke = '#D3D1CF',
+  stroke = GREY_20,
   ctx,
 }: {
   xStart: number;
@@ -18,7 +20,7 @@ const drawRails = ({
 }) => {
   ctx.clearRect(xStart, yStart, width, 9);
   ctx.beginPath();
-  ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
+  ctx.fillStyle = WHITE_50;
   ctx.strokeStyle = stroke;
   ctx.lineWidth = 1;
   ctx.rect(xStart, yStart, width, 8);
@@ -71,7 +73,7 @@ export const drawTrack = ({ ctx, width, getTimePixel, labelMarks }: DrawTrackPro
       xStart: getTimePixel(+t),
       yStart: TRACK_HEIGHT_CONTAINER / 2,
       ticks: TICKS_PATTERN[tickPattern],
-      stroke: '#2170B9',
+      stroke: RAIL_TICK,
     });
   }
 

diff --git a/ui-trackoccupancydiagram/src/components/helpers/drawElements/drawTracks.ts b/ui-trackoccupancydiagram/src/components/helpers/drawElements/drawTracks.ts
@@ -10,6 +10,8 @@ export function getTimeToPixel(
   return (time: number) => pixelOffset + (time - timeOrigin) / timeScale;
 }
 
+const { WHITE_100, HOUR_BACKGROUND } = COLORS;
+
 const drawBackground = ({
   ctx,
   xStart,
@@ -25,7 +27,7 @@ const drawBackground = ({
 }) => {
   if (xStart >= 0) {
     ctx.clearRect(xStart, 0, width, height);
-    ctx.fillStyle = switchBackground ? 'rgba(243, 248, 253, 0.5)' : 'rgb(255, 255, 255)';
+    ctx.fillStyle = switchBackground ? HOUR_BACKGROUND : WHITE_100;
     ctx.fillRect(xStart, 0, width, height);
   }
 };

diff --git a/ui-trackoccupancydiagram/src/styles/main.css b/ui-trackoccupancydiagram/src/styles/main.css
@@ -14,7 +14,7 @@
 }
 
 #track-occupancy-manchette {
-  padding: 8px 0;
+  padding: 10px 0;
   @apply bg-ambientB-10;
   box-shadow:
     inset 0 1px 0 0 rgb(255 255 255),