feat(board): made line icon for view (#1112)

* feat(board): created line component and transportmode component

* fix(line): changed the sizes of the icons

* style(board): changed height of the line icons

* style(lineicon): changed sizes to em and removed unnecessary css

* chore(transporticon): deleted css file in transporticon

* chore(transporticon): removed unused import

next-tavla/src/Board/scenarios/Table/components/Line/index.tsx

@@ -1,7 +1,7 @@
 import { useNonNullContext } from 'hooks/useNonNullContext'
 import { getPresentation } from 'Board/utils/colors'
-import { TransportIcon } from '../TransportIcon'
 import { DepartureContext } from '../../contexts'
+import classes from './styles.module.css'
 
 function Line() {
     const departure = useNonNullContext(DepartureContext)
@@ -12,14 +12,21 @@ function Line() {
         departure.serviceJourney.transportMode,
     )
 
+    const publicCode = departure.serviceJourney.line.publicCode
+
     return (
         <td>
-            <TransportIcon
-                transportMode={departure.serviceJourney.transportMode}
-                publicCode={departure.serviceJourney.line.publicCode}
-                presentation={presentation}
-            />
+            <div
+                className={classes.lineWrapper}
+                style={{
+                    backgroundColor: presentation.backgroundColor,
+                    color: presentation.color,
+                }}
+            >
+                {publicCode}
+            </div>
         </td>
     )
 }
+
 export { Line }

next-tavla/src/Board/scenarios/Table/components/Line/styles.module.css

@@ -0,0 +1,9 @@
+.lineWrapper {
+    text-align: center;
+    min-width: 3em;
+    max-width: fit-content;
+    padding: 0.25em;
+    border-radius: 0.2em;
+    font-size: 0.9em;
+    font-weight: 500;
+}

next-tavla/src/Board/scenarios/Table/components/TransportIcon/index.tsx

@@ -1,28 +1,25 @@
 import { TTransportMode } from 'types/graphql-schema'
 import { TColors } from 'Board/utils/colors'
 import { SVGProps } from 'react'
-import classes from './styles.module.css'
 
 function TransportIcon({
     transportMode,
-    publicCode,
     presentation,
 }: {
     transportMode: TTransportMode | null
-    publicCode: string | null
     presentation: TColors
 }) {
     const mode = transportMode ? transportMode : 'unknown'
+
     return (
         <div
-            className={classes.transportIcon}
             style={{
                 backgroundColor: presentation.backgroundColor,
                 fill: presentation.color,
                 color: presentation.color,
             }}
         >
-            {getTransportIcon(mode)} {publicCode}
+            {getTransportIcon(mode)}
         </div>
     )
 }