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)
HSLdevcom · Oct 24, 2024 · 80024f1 · 80024f1
1 parent d8ab1df
commit 80024f1
Show file tree

Hide file tree

Showing 8 changed files with 96 additions and 24 deletions.
diff --git 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
@@ -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
@@ -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
@@ -150,47 +150,71 @@ 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':
         return (
           <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':
         return (
           <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':
         return (
           <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':
         return (
           <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':
         return (
           <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
@@ -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
@@ -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
@@ -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
@@ -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