From 80024f103c9e14c40b3e5de6ae498067a2083bc9 Mon Sep 17 00:00:00 2001
From: e-halinen <54105602+e-halinen@users.noreply.github.com>
Date: Thu, 24 Oct 2024 14:17:07 +0300
Subject: [PATCH] AB#44831: font stylings (#423)

* AB#44831: Add font styling to StopPoster map legend texts (#421)

* AB#44831: Add italics to Stop Poster TableHeaders (#422)
---
 src/components/a3Timetable/a3TableHeader.css |  4 ++
 src/components/a3Timetable/a3TableHeader.js  |  2 +
 src/components/map/stopMap.css               |  8 +++
 src/components/map/stopMap.js                | 56 ++++++++++++++++----
 src/components/routeDiagram/routeDiagram.css |  4 ++
 src/components/routeDiagram/routeDiagram.js  |  2 +-
 src/components/timetable/tableHeader.css     |  8 +++
 src/components/timetable/tableHeader.js      | 36 ++++++++-----
 8 files changed, 96 insertions(+), 24 deletions(-)

diff --git a/src/components/a3Timetable/a3TableHeader.css b/src/components/a3Timetable/a3TableHeader.css
index 27e21669..1c7c4e0e 100644
--- a/src/components/a3Timetable/a3TableHeader.css
+++ b/src/components/a3Timetable/a3TableHeader.css
@@ -50,3 +50,7 @@
   height: 30px;
   width: 30px;
 }
+
+.italics {
+  font-style: italic;
+}
diff --git a/src/components/a3Timetable/a3TableHeader.js b/src/components/a3Timetable/a3TableHeader.js
index 4e4ff1c4..f7936c72 100644
--- a/src/components/a3Timetable/a3TableHeader.js
+++ b/src/components/a3Timetable/a3TableHeader.js
@@ -14,6 +14,8 @@ const a3TableHeader = props => (
         {' '}
         &nbsp;&nbsp;
         {props.subtitleSw}
+      </span>
+      <span className={styles.italics}>
         &nbsp;&nbsp;
         {props.subtitleEn}
       </span>
diff --git a/src/components/map/stopMap.css b/src/components/map/stopMap.css
index 3c01047d..1c512728 100644
--- a/src/components/map/stopMap.css
+++ b/src/components/map/stopMap.css
@@ -108,6 +108,14 @@
   border: 2px solid #0098a1;
 }
 
+.primaryLegendText {
+  font-family: GothamRounded-Medium;
+}
+
+.italics {
+  font-style: italic;
+}
+
 .overlays {
   position: absolute;
   top: 0;
diff --git a/src/components/map/stopMap.js b/src/components/map/stopMap.js
index f148bc4b..cfaf3550 100644
--- a/src/components/map/stopMap.js
+++ b/src/components/map/stopMap.js
@@ -150,7 +150,11 @@ const getLegend = (stops, projectedSalesPoints, subwayEntrances) => {
           <div key={mode} className={styles.legendRow}>
             <div className={classNames(styles.legendLine, styles.bus)} />
             <div className={classNames(styles.legendIcon, styles.bus)} />
-            <div className={styles.legendText}>Bussi / Buss / Bus</div>
+            <div className={styles.legendText}>
+              <span className={styles.primaryLegendText}>Bussi</span> / <span>Buss</span>
+              {' / '}
+              <span className={styles.italics}>Bus</span>
+            </div>
           </div>
         );
       case 'TRAM':
@@ -158,7 +162,11 @@ const getLegend = (stops, projectedSalesPoints, subwayEntrances) => {
           <div key={mode} className={styles.legendRow}>
             <div className={classNames(styles.legendLine, styles.tram)} />
             <div className={classNames(styles.legendIcon, styles.tram)} />
-            <div className={styles.legendText}>Raitiovaunu / Spårvagn / Tram</div>
+            <div className={styles.legendText}>
+              <span className={styles.primaryLegendText}>Raitiovaunu</span> / <span>Spårvagn</span>
+              {' / '}
+              <span className={styles.italics}>Tram</span>
+            </div>
           </div>
         );
       case 'SUBWAY':
@@ -166,7 +174,9 @@ const getLegend = (stops, projectedSalesPoints, subwayEntrances) => {
           <div key={mode} className={styles.legendRow}>
             <div className={classNames(styles.legendLine, styles.subway)} />
             <div className={classNames(styles.legendIcon, styles.subway)} />
-            <div className={styles.legendText}>Metro</div>
+            <div className={styles.legendText}>
+              <span className={styles.primaryLegendText}>Metro</span>
+            </div>
           </div>
         );
       case 'RAIL':
@@ -174,7 +184,11 @@ const getLegend = (stops, projectedSalesPoints, subwayEntrances) => {
           <div key={mode} className={styles.legendRow}>
             <div className={classNames(styles.legendLine, styles.rail)} />
             <div className={classNames(styles.legendIcon, styles.rail)} />
-            <div className={styles.legendText}>Juna / Rail</div>
+            <div className={styles.legendText}>
+              <span className={styles.primaryLegendText}>Juna</span> / <span>Tåg</span>
+              {' / '}
+              <span className={styles.italics}>Rail</span>
+            </div>
           </div>
         );
       case 'TRUNK':
@@ -182,7 +196,11 @@ const getLegend = (stops, projectedSalesPoints, subwayEntrances) => {
           <div key={mode} className={styles.legendRow}>
             <div className={classNames(styles.legendLine, styles.trunk)} />
             <div className={classNames(styles.legendIcon, styles.trunk)} />
-            <div className={styles.legendText}>Runkolinja / Trunk route</div>
+            <div className={styles.legendText}>
+              <span className={styles.primaryLegendText}>Runkolinja</span> / <span>Stomlinjen</span>
+              {' / '}
+              <span className={styles.italics}>Trunk route</span>
+            </div>
           </div>
         );
       case 'L_RAIL':
@@ -190,7 +208,13 @@ const getLegend = (stops, projectedSalesPoints, subwayEntrances) => {
           <div key={mode} className={styles.legendRow}>
             <div className={classNames(styles.legendLine, styles.l_rail)} />
             <div className={classNames(styles.legendIcon, styles.l_rail)} />
-            <div className={styles.legendText}>Pikaratikka / Snabbspårvagn / Light rail</div>
+            <div className={styles.legendText}>
+              <span className={styles.primaryLegendText}>Pikaratikka</span>
+              {' / '}
+              <span>Snabbspårvagn</span>
+              {' / '}
+              <span className={styles.italics}>Light rail</span>
+            </div>
           </div>
         );
       default:
@@ -214,7 +238,11 @@ const getLegend = (stops, projectedSalesPoints, subwayEntrances) => {
         <div key={subwayEntrance.type} className={styles.legendRow}>
           <InlineSVG style={svgStyles} src={subwayStationIcon} />
           <div className={styles.legendText}>
-            Metron sisäänkäynti / Metrons ingång / Metro entrance
+            <span className={styles.primaryLegendText}>Metron sisäänkäynti</span>
+            {' / '}
+            <span>Metrons ingång</span>
+            {' / '}
+            <span className={styles.italics}>Metro entrance</span>
           </div>
         </div>,
       );
@@ -230,7 +258,11 @@ const getLegend = (stops, projectedSalesPoints, subwayEntrances) => {
         <div key="Myyntipiste" className={styles.legendRow}>
           <InlineSVG style={svgStyles} src={ticketSalesPointIcon} />
           <div className={styles.legendText}>
-            Lipunmyyntipiste / Biljettförsäljning / Ticket sales
+            <span className={styles.primaryLegendText}>Lipunmyyntipiste</span>
+            {' / '}
+            <span>Biljettförsäljning</span>
+            {' / '}
+            <span className={styles.italics}>Ticket sales</span>
           </div>
         </div>,
       );
@@ -240,7 +272,13 @@ const getLegend = (stops, projectedSalesPoints, subwayEntrances) => {
       legendContent.push(
         <div key="Monilippuautomaatti" className={styles.legendRow}>
           <InlineSVG style={svgStyles} src={ticketMachineIcon} />
-          <div className={styles.legendText}>Lippuautomaatti / Ticket sales machine</div>
+          <div className={styles.legendText}>
+            <span className={styles.primaryLegendText}>Lippuautomaatti</span>
+            {' / '}
+            <span>Biljettautomat</span>
+            {' / '}
+            <span className={styles.italics}>Ticket sales machine</span>
+          </div>
         </div>,
       );
     }
diff --git a/src/components/routeDiagram/routeDiagram.css b/src/components/routeDiagram/routeDiagram.css
index 64a2c2bd..69afef76 100644
--- a/src/components/routeDiagram/routeDiagram.css
+++ b/src/components/routeDiagram/routeDiagram.css
@@ -77,3 +77,7 @@
   font-family: GothamRounded-Book;
   font-size: 0.75em;
 }
+
+.italics {
+  font-style: italic;
+}
diff --git a/src/components/routeDiagram/routeDiagram.js b/src/components/routeDiagram/routeDiagram.js
index 773732c1..560ea581 100644
--- a/src/components/routeDiagram/routeDiagram.js
+++ b/src/components/routeDiagram/routeDiagram.js
@@ -19,7 +19,7 @@ const RouteDiagram = props => (
       className={classNames(styles.componentName, { [styles.componentNameA3]: props.printAsA3 })}>
       <div className={!props.printAsA3 ? styles.title : styles.titleA3}>Linjojen reitit</div>
       <div className={!props.printAsA3 ? styles.subtitle : styles.subtitleA3}>
-        Linjernas rutter / Routes
+        Linjernas rutter / <span className={styles.italics}>Routes</span>
       </div>
     </div>
     <div className={styles.start}>
diff --git a/src/components/timetable/tableHeader.css b/src/components/timetable/tableHeader.css
index 6ddcb1c6..eef1f0b8 100644
--- a/src/components/timetable/tableHeader.css
+++ b/src/components/timetable/tableHeader.css
@@ -39,3 +39,11 @@
 .a3Title {
   font-size: 0.8em;
 }
+
+.italics {
+  font-style: italic;
+}
+
+.inline {
+  display: inline;
+}
diff --git a/src/components/timetable/tableHeader.js b/src/components/timetable/tableHeader.js
index fc11505c..00a7bf85 100644
--- a/src/components/timetable/tableHeader.js
+++ b/src/components/timetable/tableHeader.js
@@ -6,21 +6,29 @@ import styles from './tableHeader.css';
 
 const TableHeader = props => {
   const header = props.printAsA3 ? (
-    <span>
-      {' '}
-      &nbsp;&nbsp;
-      {props.subtitleSw}
-      &nbsp;&nbsp;
-      {props.subtitleEn}
-    </span>
+    <div className={styles.inline}>
+      <span>
+        {' '}
+        &nbsp;&nbsp;
+        {props.subtitleSw}
+      </span>
+      <span className={styles.italics}>
+        &nbsp;&nbsp;
+        {props.subtitleEn}
+      </span>
+    </div>
   ) : (
-    <span>
-      {' '}
-      &nbsp;&nbsp;
-      {props.subtitleSw}
-      &nbsp;&nbsp;
-      {props.subtitleEn}
-    </span>
+    <div className={styles.inline}>
+      <span>
+        {' '}
+        &nbsp;&nbsp;
+        {props.subtitleSw}
+      </span>
+      <span className={styles.italics}>
+        &nbsp;&nbsp;
+        {props.subtitleEn}
+      </span>
+    </div>
   );
   return (
     <div