Show correct icon on line page and line edit

Author: suvikankare

ui/src/components/routes-and-lines/edit-line/EditLinePage.tsx

@@ -26,6 +26,7 @@ import { PageHeader } from '../common/PageHeader';
 import { getBlockers, hasBlockers } from '../common/SaveBlockers';
 import { StopsNeedingUpdateModal } from '../common/StopsNeedingUpdateModal';
 import { useUpdateStopRegistryStopMetatype } from '../common/useUpdateStopRegistryStopMetatype';
+import { showIconForVehicleMode } from '../line-details/LineDetailsByIdPage';
 import { EditLineChanges, useEditLine } from './useEditLine';
 
 function mapLineToFormState(line: LineAllFieldsFragment): FormState {
@@ -116,8 +117,9 @@ export const EditLinePage: FC = () => {
     }
   };
 
-  const pageTitleText = t(($) => $.lines.line, {
+  const pageTitleText = t(($) => $.lines.edit, {
     label: line?.label,
+    name: line?.name_i18n.fi_FI,
   });
 
   const blockers = getBlockers(pendingEditChanges);
@@ -145,12 +147,15 @@ export const EditLinePage: FC = () => {
       ) : null}
 
       <PageHeader>
-        <PageTitle.H1 titleText={pageTitleText}>
-          <i className="icon-bus-alt text-tweaked-brand" />
-          {pageTitleText}
-        </PageTitle.H1>
+        <div className="flex items-center">
+          {showIconForVehicleMode(
+            line?.primary_vehicle_mode ?? null,
+            'text-5xl',
+          )}
+          <PageTitle.H1 titleText={pageTitleText}>{pageTitleText}</PageTitle.H1>
+        </div>
       </PageHeader>
-      <Container>
+      <Container className="pt-0">
         {line && !saved && (
           <LineForm
             onSubmit={onSubmit}

ui/src/components/routes-and-lines/line-details/LineDetailsByIdPage.tsx

@@ -1,7 +1,11 @@
 import { DateTime } from 'luxon';
 import { FC } from 'react';
 import { useTranslation } from 'react-i18next';
-import { LineAllFieldsFragment } from '../../../generated/graphql';
+import { twJoin } from 'tailwind-merge';
+import {
+  LineAllFieldsFragment,
+  ReusableComponentsVehicleModeEnum,
+} from '../../../generated/graphql';
 import { useAppDispatch, useAppSelector } from '../../../hooks';
 import { Column, Container, Row, Visible } from '../../../layoutComponents';
 import {
@@ -29,6 +33,53 @@ import { MapPreview } from './MapPreview';
 import { LineFetchError, useGetLineDetails } from './useGetLineDetails';
 import { useGetRoutesDisplayedInList } from './useGetRoutesDisplayedInList';
 
+export function showIconForVehicleMode(
+  vehicleMode: ReusableComponentsVehicleModeEnum | null,
+  className?: string,
+) {
+  switch (vehicleMode) {
+    case ReusableComponentsVehicleModeEnum.Bus:
+      return (
+        <i className={twJoin('icon-bus-alt text-tweaked-brand', className)} />
+      );
+    case ReusableComponentsVehicleModeEnum.Tram:
+      return (
+        <i
+          className={twJoin(
+            'icon-tram-filled text-hsl-tram-dark-green',
+            className,
+          )}
+        />
+      );
+    case ReusableComponentsVehicleModeEnum.Metro:
+      return (
+        <i
+          className={twJoin(
+            'icon-metro-filled text-hsl-metro-orange',
+            className,
+          )}
+        />
+      );
+    case ReusableComponentsVehicleModeEnum.Ferry:
+      return (
+        <i
+          className={twJoin('icon-ferry-filled text-hsl-ferry-blue', className)}
+        />
+      );
+    case ReusableComponentsVehicleModeEnum.Train:
+      return (
+        <i
+          className={twJoin(
+            'icon-train-filled text-hsl-train-purple',
+            className,
+          )}
+        />
+      );
+    default:
+      return null;
+  }
+}
+
 export const LineDetailsByIdPage: FC = () => {
   const { t } = useTranslation();
 
@@ -75,7 +126,10 @@ export const LineDetailsByIdPage: FC = () => {
     <div>
       <PageHeader className={getHeaderBorderClassName()}>
         <Row>
-          <i className="icon-bus-alt mt-2 text-6xl text-tweaked-brand" />
+          {showIconForVehicleMode(
+            line?.primary_vehicle_mode ?? null,
+            'text-6xl mt-2',
+          )}
           {line && <LineTitle line={line} onCreateRoute={onCreateRoute} />}
         </Row>
       </PageHeader>

ui/src/generated/theme.ts

@@ -45,6 +45,9 @@ export const theme = {
     hslDarkGreen: "#3B7F00",
     hslTramGreen: "#00985F",
     hslTramDarkGreen: "#008151",
+    hslFerryBlue: "#007A97",
+    hslMetroOrange: "#CA4000",
+    hslTrainPurple: "#8C4799",
     hslRed: "#DC0451",
     hslNeutralBlue: "#E5F2FA",
     cityBicycleYellow: "#FCBC19",

ui/src/locales/en-US/common.json

@@ -63,6 +63,7 @@
   },
   "lines": {
     "createNew": "Create new line",
+    "edit": "Muokkaa linjaa {{label}} {{name}}",
     "saveSuccess": "Line saved",
     "properties": "Properties",
     "label": "Line label",
@@ -1622,7 +1623,7 @@
       "showTimetables": "Show timetables for line {{label}}",
       "expandNameVersions": "Show name versions",
       "closeNameVersions": "Close the name version view",
-      "edit": "Edit line {{label}}",
+      "edit": "Edit line {{label}} {{name}}",
       "versionHistory": "Version history",
       "bus": "Bus line"
     },

ui/src/locales/fi-FI/common.json

@@ -63,6 +63,7 @@
   },
   "lines": {
     "createNew": "Luo uusi linja",
+    "edit": "Muokkaa linjaa {{label}} {{name}}",
     "saveSuccess": "Linja tallennettu",
     "properties": "Oheistiedot",
     "label": "Linjan tunnus",
@@ -1622,7 +1623,7 @@
       "showTimetables": "Näytä aikataulut linjalle {{label}}",
       "expandNameVersions": "Näytä nimiversiot",
       "closeNameVersions": "Sulje nimiversiot näkymä",
-      "edit": "Muokkaa linjaa {{label}}",
+      "edit": "Muokkaa linjaa {{label}} {{name}}",
       "versionHistory": "Versiohistoria",
       "bus": "Bussilinja"
     },

ui/tailwind.config.js

@@ -59,6 +59,9 @@ module.exports = {
         'hsl-dark-green': colors.hslDarkGreen,
         'hsl-tram-green': colors.hslTramGreen,
         'hsl-tram-dark-green': colors.hslTramDarkGreen,
+        'hsl-ferry-blue': colors.hslFerryBlue,
+        'hsl-metro-orange': colors.hslMetroOrange,
+        'hsl-train-purple': colors.hslTrainPurple,
         'hsl-red': colors.hslRed,
         'hsl-neutral-blue': colors.hslNeutralBlue,
         'city-bicycle-yellow': colors.cityBicycleYellow,

ui/theme.js

@@ -45,6 +45,9 @@ const theme = {
     hslDarkGreen: '#3B7F00',
     hslTramGreen: '#00985F',
     hslTramDarkGreen: '#008151',
+    hslFerryBlue: '#007A97',
+    hslMetroOrange: '#CA4000',
+    hslTrainPurple: '#8C4799',
     hslRed: '#DC0451',
     hslNeutralBlue: '#E5F2FA',
     cityBicycleYellow: '#FCBC19',