Add font styling, tweak font sizes and date formatting

HSLdevcom · Mar 14, 2024 · eb5b081 · eb5b081
1 parent 323f370
commit eb5b081
Show file tree

Hide file tree

Showing 7 changed files with 17 additions and 36 deletions.
diff --git a/src/components/lineTimetable/allStopsList.css b/src/components/lineTimetable/allStopsList.css
@@ -9,12 +9,14 @@
 }
 
 .lineInfoText {
+  font-family: GothamRounded-Medium;
   font-weight: bold;
   font-size: 2rem;
 }
 
 .stopListText {
   font-size: medium;
+  font-family: GothamRounded-Book;
 }
 
 @media print {

diff --git a/src/components/lineTimetable/lineTableColumns.css b/src/components/lineTimetable/lineTableColumns.css
@@ -1,5 +1,6 @@
 .departureRowContainer {
   max-width: 1171px;
+  font-family: GothamRounded-Medium;
 }
 
 .departureRowContainer > *:nth-child(odd) {
@@ -23,10 +24,6 @@
   margin-top: 1rem;
 }
 
-.stopNameContainer {
-  margin-bottom: 10px;
-}
-
 @media print {
   .departureRow {
     page-break-inside: avoid;

diff --git a/src/components/lineTimetable/lineTableColumns.js b/src/components/lineTimetable/lineTableColumns.js
@@ -30,9 +30,7 @@ const DeparturesColumn = props => {
 
   return (
     <div>
-      <div className={styles.stopNameContainer}>
-        <LineTableHeader stop={stop} />
-      </div>
+      <LineTableHeader stop={stop} />
       <div className={styles.departureRowContainer}>{departureRows}</div>
     </div>
   );

diff --git a/src/components/lineTimetable/lineTableHeader.css b/src/components/lineTimetable/lineTableHeader.css
@@ -3,6 +3,7 @@
 }
 
 .stopName {
-  font-size: 1.5em;
+  font-size: 1.2em;
   margin: 0 0 0 2rem;
+  font-family: GothamRounded-Medium;
 }
diff --git a/src/components/lineTimetable/lineTimetable.css b/src/components/lineTimetable/lineTimetable.css
@@ -9,6 +9,7 @@
   --timetable-accent-color: white;
   font-size: 16px;
   margin-bottom: 10px;
+  font-family: GothamRounded-Medium;
 }
 
 .root.a3 {
@@ -163,12 +164,14 @@
 
 .timetableDays {
   margin: 0 1rem 1rem 2rem;
-  font-size: 20px;
+  font-size: 1em;
+  font-family: GothamRounded-Book;
 }
 
 .timetableDates {
-  margin: 0 1rem 1rem 35%;
-  font-size: 20px;
+  margin: 0 1rem 1rem 4rem;
+  font-size: 1em;
+  font-family: GothamRounded-Book;
 }
 
 .pageBreak {

diff --git a/src/components/lineTimetable/lineTimetable.js b/src/components/lineTimetable/lineTimetable.js
@@ -31,30 +31,7 @@ const formatDate = date => {
   const monthIndex = date.getMonth();
   const year = date.getFullYear();
 
-  return `${day} ${monthNames[monthIndex]} ${year}`;
-};
-
-const getZoneLetterStyle = zone => ({
-  transform:
-    zone === 'B'
-      ? 'translate(calc(-50%), calc(-50% + 2px))'
-      : zone === 'C'
-      ? 'translate(calc(-50% - 2px), calc(-50% + 2px))'
-      : zone === 'D'
-      ? 'translate(calc(-50% + 2px), calc(-50% + 2px))'
-      : 'translate(-50%, -50%)', // No px adjustments for zone A and the "else" case.
-});
-
-const getNotes = (notes, symbols) => {
-  const parsedNotes = [];
-  symbols.forEach(symbol => {
-    notes.forEach(note => {
-      if (note.substring(0, symbol.length) === symbol && !parsedNotes.includes(note)) {
-        parsedNotes.push(note);
-      }
-    });
-  });
-  return parsedNotes;
+  return `${day}.${monthIndex}.${year}`;
 };
 
 const PrintButton = lang => {
@@ -92,7 +69,7 @@ class LineTimetable extends Component {
         <span className={styles.timetableDays}>Maanantai-Perjantai</span>
         <span className={styles.timetableDays}>Måndag-Fredag</span>
         <span className={styles.timetableDates}>
-          {this.props.dateBegin} - {this.props.dateEnd}
+          {formatDate(new Date(this.props.dateBegin))}-{formatDate(new Date(this.props.dateEnd))}
         </span>
         <LineTableColumns
           departures={this.props.departures}

diff --git a/src/components/lineTimetable/lineTimetableHeader.css b/src/components/lineTimetable/lineTimetableHeader.css
@@ -8,6 +8,7 @@
   font-size: 4rem;
   font-weight: bold;
   margin: 2rem 2rem 0 2rem;
+  font-family: GothamRounded-Medium;
 }
 
 .nameContainer {
@@ -18,9 +19,11 @@
 .lineName {
   font-size: 30px;
   font-weight: bold;
+  font-family: GothamRounded-Medium;
 }
 
 .lineNameSecondary {
   font-size: 25px;
   font-weight: normal;
+  font-family: GothamRounded-Book;
 }