chore(board) visual changes to the board (#1125)

* chore(board): depature time column right aligned * chore(board): visual changes to the board * chore(board): correct color on column headers * chore(board): renaming variables and cutting down css * chore(board): string instead of boolean to align columnheaders * chore(board): moved clock css class to components folder * chore(board): center-align plattform column * chore(board): change table header color * chore(board): text-alignment on board and remove css * chore(board): rename css variable
entur · Jul 17, 2023 · 0c2a1ef · 0c2a1ef
1 parent 31ceea5
commit 0c2a1ef
Show file tree

Hide file tree

Showing 13 changed files with 54 additions and 28 deletions.
diff --git a/next-tavla/src/Board/scenarios/Table/components/Destination/styles.module.css b/next-tavla/src/Board/scenarios/Table/components/Destination/styles.module.css
@@ -1,4 +1,5 @@
 .destination {
     display: flex;
     flex-direction: column;
+    font-size: 1.5625em;
 }
diff --git a/next-tavla/src/Board/scenarios/Table/components/Line/styles.module.css b/next-tavla/src/Board/scenarios/Table/components/Line/styles.module.css
@@ -4,6 +4,6 @@
     max-width: fit-content;
     padding: 0.25em;
     border-radius: 0.2em;
-    font-size: 0.9em;
+    font-size: 1.25em;
     font-weight: 500;
 }
diff --git a/next-tavla/src/Board/scenarios/Table/components/Platform/index.tsx b/next-tavla/src/Board/scenarios/Table/components/Platform/index.tsx
@@ -1,10 +1,11 @@
 import { useNonNullContext } from 'hooks/useNonNullContext'
 import { DepartureContext } from '../../contexts'
+import classes from './styles.module.css'
 
 function Platform() {
     const departure = useNonNullContext(DepartureContext)
 
-    return <td>{departure.quay.publicCode}</td>
+    return <td className={classes.quayText}>{departure.quay.publicCode}</td>
 }
 
 export { Platform }
diff --git a/next-tavla/src/Board/scenarios/Table/components/Platform/styles.module.css b/next-tavla/src/Board/scenarios/Table/components/Platform/styles.module.css
@@ -0,0 +1,4 @@
+.quayText {
+    font-weight: 700;
+    font-size: 1.5em;
+}
diff --git a/next-tavla/src/Board/scenarios/Table/components/Situation/styles.module.css b/next-tavla/src/Board/scenarios/Table/components/Situation/styles.module.css
@@ -1,6 +1,6 @@
 .situation {
     color: var(--table-situation-color);
-    font-size: 0.5em;
+    font-size: 0.875em;
     display: flex;
     align-items: center;
 }

diff --git a/next-tavla/src/Board/scenarios/Table/components/Time/index.tsx b/next-tavla/src/Board/scenarios/Table/components/Time/index.tsx
@@ -13,7 +13,7 @@ function Time() {
     )
     if (timeDeviation > 120) {
         return (
-            <td className={classes.timeDeviationContainer}>
+            <td className={classes.timeContainer}>
                 <div className={classes.expectedDepartureTime}>
                     {getRelativeTimeString(departure.expectedDepartureTime)}
                 </div>
@@ -23,7 +23,11 @@ function Time() {
             </td>
         )
     }
-    return <td>{getRelativeTimeString(departure.expectedDepartureTime)}</td>
+    return (
+        <td className={classes.timeContainer}>
+            {getRelativeTimeString(departure.expectedDepartureTime)}
+        </td>
+    )
 }
 
 export { Time }
diff --git a/next-tavla/src/Board/scenarios/Table/components/Time/styles.module.css b/next-tavla/src/Board/scenarios/Table/components/Time/styles.module.css
@@ -1,13 +1,14 @@
-.timeDeviationContainer {
-    display: flex;
-    flex-direction: column;
+.timeContainer {
+    font-weight: 600;
+    font-size: 1.5em;
 }
 
 .aimedDepartureTime {
+    font-size: 0.5625em;
     text-decoration: line-through;
-    font-size: 0.66em;
 }
 
 .expectedDepartureTime {
+    font-weight: 600;
     color: var(--table-time-deviation-color);
 }
diff --git a/next-tavla/src/Board/scenarios/Table/index.tsx b/next-tavla/src/Board/scenarios/Table/index.tsx
@@ -2,9 +2,9 @@ import { TDepartureFragment } from 'graphql/index'
 import {
     Columns,
     TColumn,
-    TColumnSize,
-    TColumnSettings,
     DefaultColumns,
+    TColumnLayout,
+    TColumnSettings,
 } from 'types/column'
 import React from 'react'
 import classes from './styles.module.css'
@@ -25,16 +25,16 @@ const columnComponents: Record<TColumn, () => JSX.Element> = {
     via: Via,
 }
 
-const ColumnOrder: TColumnSize[] = [
+const ColumnOrder: TColumnLayout[] = [
     { type: 'line', size: 1 },
-    { type: 'destination', size: 2 },
-    { type: 'via', size: 2 },
-    { type: 'platform', size: 3 },
-    { type: 'situations', size: 4 },
+    { type: 'destination', size: 6 },
+    { type: 'via', size: 5 },
+    { type: 'situations', size: 6 },
+    { type: 'platform', size: 1 },
     { type: 'time', size: 1 },
 ]
 
-function ColumnTableHeader({ type, size }: TColumnSize) {
+function ColumnTableHeader({ type, size }: TColumnLayout) {
     return (
         <th
             className={classes.header}
@@ -63,7 +63,7 @@ function Table({
     return (
         <div className={classes.container}>
             <table className={classes.table}>
-                <thead>
+                <thead className={classes.row}>
                     <tr>
                         {filteredColumnOrder.map((props) => (
                             <ColumnTableHeader key={props.type} {...props} />
@@ -73,6 +73,7 @@ function Table({
                 <tbody>
                     {departures.map((departure) => (
                         <tr
+                            className={classes.row}
                             key={`${departure.serviceJourney.id}_${departure.aimedDepartureTime}`}
                         >
                             <DepartureContext.Provider value={departure}>

diff --git a/next-tavla/src/Board/scenarios/Table/styles.module.css b/next-tavla/src/Board/scenarios/Table/styles.module.css
@@ -2,13 +2,15 @@
     height: 100%;
     overflow: hidden;
 }
+
 .header {
+    text-align: left;
     font-size: 0.7em;
     color: var(--table-header-color);
+    padding-bottom: 0.4em;
 }
 
 .table {
-    text-align: left;
     height: 100%;
     border-collapse: collapse;
     width: 100%;
@@ -22,10 +24,11 @@
     padding: 0.25em 0;
 }
 
-.table tr {
+.row {
     border-bottom: 2px solid var(--table-border-color);
 }
 
-.table thead tr {
-    border-bottom: 4px solid var(--table-border-color);
+.row th:last-child,
+.row td:last-child {
+    text-align: right;
 }
diff --git a/next-tavla/src/Shared/components/Clock/index.tsx b/next-tavla/src/Shared/components/Clock/index.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react'
+import classes from './styles.module.css'
 
 function Clock() {
     const [currentTime, setCurrentTime] = useState(Date.now())
@@ -13,7 +14,11 @@ function Clock() {
         timeZone: 'Europe/Oslo',
     }).format(currentTime)
 
-    return <span suppressHydrationWarning>{time}</span>
+    return (
+        <span suppressHydrationWarning className={classes.clock}>
+            {time}
+        </span>
+    )
 }
 
 export { Clock }
diff --git a/next-tavla/src/Shared/components/Clock/styles.module.css b/next-tavla/src/Shared/components/Clock/styles.module.css
@@ -0,0 +1,3 @@
+.clock {
+    font-size: 1.5625em;
+}
diff --git a/next-tavla/src/Shared/styles/themes/dark.css b/next-tavla/src/Shared/styles/themes/dark.css
@@ -3,7 +3,7 @@
     --secondary-background-color: var(--colors-greys-grey);
     /* --tertiary-background-color not yet defined */
 
+    --table-header-color: var(--colors-greys-grey50);
     --table-border-color: var(--colors-greys-grey10);
-    --table-situation-color: var(--colors-validation-canary);
-    --table-header-color: var(--colors-greys-grey60);
+    --table-situation-color: var(--feedback-canary-contrast, #ffe082);
 }
diff --git a/next-tavla/src/Shared/types/column.ts b/next-tavla/src/Shared/types/column.ts
@@ -2,7 +2,7 @@ export const Columns = {
     destination: 'Destinasjon',
     line: 'Linje',
     platform: 'Plattform',
-    time: 'Avgangstid',
+    time: 'Avgang',
     situations: 'Avvik',
     via: 'Via',
 } as const
@@ -13,10 +13,13 @@ export type TColumnSettings = Partial<Record<TColumn, boolean>>
 export const DefaultColumns: TColumnSettings = {
     line: true,
     destination: true,
-    platform: false,
+    platform: true,
     situations: true,
     time: true,
     via: false,
 } as const
 
-export type TColumnSize = { type: TColumn; size: number }
+export type TColumnLayout = {
+    type: TColumn
+    size: number
+}