Add minor improvements to style properties and avoid inline styles

viliket · Sep 8, 2024 · ad223ad · ad223ad
1 parent 7dd5cc7
commit ad223ad
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 39 deletions.
diff --git a/src/components/StationTimeTableRow.tsx b/src/components/StationTimeTableRow.tsx
@@ -68,8 +68,9 @@ function StationTimeTableRow({
       onClick={() => tableRowOnClick(trainNumber, departureDate)}
     >
       <TableCell scope="row">
-        <span
-          style={{
+        <Box
+          component="span"
+          sx={{
             display: 'flex',
             alignItems: 'center',
           }}
@@ -99,7 +100,7 @@ function StationTimeTableRow({
               departureDate={departureDate}
             />
           </Box>
-        </span>
+        </Box>
       </TableCell>
       <TableCell>
         <Link

diff --git a/src/components/TimeTableRowTime.tsx b/src/components/TimeTableRowTime.tsx
@@ -38,13 +38,9 @@ function TimeTableRowTime({ row }: TimeTableRowTimeProps) {
             {
               fontWeight: '500',
             },
-            delayInMinutes > 0
-              ? {
-                  color: 'error.main',
-                }
-              : {
-                  color: null,
-                },
+            delayInMinutes > 0 && {
+              color: 'error.main',
+            },
           ]}
         >
           {format(actualTime, 'HH:mm')}

diff --git a/src/components/TopNavBar.tsx b/src/components/TopNavBar.tsx
@@ -23,10 +23,10 @@ export function TopNavBar() {
               marginRight: 'auto',
               display: 'inline-flex',
               alignItems: 'center',
+              color: 'inherit',
+              textDecoration: 'none',
             }}
             component={Link}
-            color="inherit"
-            style={{ textDecoration: 'none' }}
             href="/"
           >
             <Box

diff --git a/src/components/TrainComposition.tsx b/src/components/TrainComposition.tsx
@@ -1,4 +1,4 @@
-import { Box, Typography } from '@mui/material';
+import { Box, ButtonBase, Typography } from '@mui/material';
 import { orderBy } from 'lodash';
 import {
   BagChecked,
@@ -192,9 +192,9 @@ function TrainComposition({
         },
       }}
     >
-      <div
+      <Box
         className="composition"
-        style={{
+        sx={{
           display: 'flex',
           flexDirection:
             trainDirection === TrainDirection.Decreasing
@@ -211,10 +211,10 @@ function TrainComposition({
             // Note: Should never be null
             <span key={i}>?</span>
           ) : (
-            <button
+            <ButtonBase
               key={`${w.location}-${w.compositionStatus}`}
               onClick={() => onWagonClick(w)}
-              style={{
+              sx={{
                 display: 'inline-flex',
                 flexDirection: 'column',
                 alignItems: 'center',
@@ -229,7 +229,9 @@ function TrainComposition({
                 margin: 0,
                 padding: 0,
                 backgroundColor: 'transparent',
-                cursor: 'pointer',
+                '&.Mui-focusVisible': {
+                  outline: 'revert',
+                },
               }}
             >
               <span>
@@ -279,7 +281,7 @@ function TrainComposition({
                   isCommuterTrain={!!train.commuterLineid}
                 />
               </Box>
-            </button>
+            </ButtonBase>
           )
         )}
         <Box
@@ -288,20 +290,12 @@ function TrainComposition({
               display: 'flex',
               color: 'primary.main',
             },
-            trainDirection === TrainDirection.Increasing
-              ? {
-                  marginRight: '-1rem',
-                }
-              : {
-                  marginRight: null,
-                },
-            trainDirection === TrainDirection.Decreasing
-              ? {
-                  marginLeft: '-1rem',
-                }
-              : {
-                  marginLeft: null,
-                },
+            trainDirection === TrainDirection.Increasing && {
+              marginRight: '-1rem',
+            },
+            trainDirection === TrainDirection.Decreasing && {
+              marginLeft: '-1rem',
+            },
           ]}
         >
           {trainDirection === TrainDirection.Decreasing ? (
@@ -310,7 +304,7 @@ function TrainComposition({
             <ChevronRight />
           )}
         </Box>
-      </div>
+      </Box>
       {hasStationRow && (
         <Box
           className="stopping-sectors"

diff --git a/src/components/TrainStationTimeline.tsx b/src/components/TrainStationTimeline.tsx
@@ -102,13 +102,13 @@ const TrainStationTimeline = ({
               </Grid>
               <Grid size={12}>
                 {realTimeTrain && (
-                  <div style={{ textAlign: 'center' }}>
+                  <Box sx={{ textAlign: 'center' }}>
                     <TrainComposition
                       train={realTimeTrain}
                       stationTimeTableRowGroup={g}
                       onWagonClick={onWagonClick}
                     />
-                  </div>
+                  </Box>
                 )}
                 {stationMessages &&
                   stationMessages[station.shortCode]?.length > 0 && (

diff --git a/src/components/TrainSubNavBar.tsx b/src/components/TrainSubNavBar.tsx
@@ -76,8 +76,9 @@ function TrainSubNavBar({ train }: TrainSubNavBarProps) {
                 {train.trainNumber}
               </Avatar>
             )}
-            <span
-              style={{
+            <Box
+              component="span"
+              sx={{
                 display: 'flex',
                 flexDirection: 'column',
               }}
@@ -88,7 +89,7 @@ function TrainSubNavBar({ train }: TrainSubNavBarProps) {
                     train
                   )} - ${getTrainDestinationStationName(train)}`}
               </Box>
-            </span>
+            </Box>
           </>
         )}
       </h4>