UI fix for succinct eta

hkbus · May 29, 2024 · 67b9cb7 · 67b9cb7
1 parent 7d13e2f
commit 67b9cb7
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 28 deletions.
diff --git a/src/ErrorFallback.tsx b/src/ErrorFallback.tsx
@@ -4,18 +4,15 @@ interface Props {
   error: Error;
 }
 
-
-const ErrorFallback = ({error}: Props) => {
-
+const ErrorFallback = ({ error }: Props) => {
   useEffect(() => {
     if (error.name === "ChunkLoadError" || error.name === "TypeError") {
       setTimeout(() => {
         window.location.reload();
       }, 500);
     }
-  }, [error])
-
-
+  }, [error]);
+
   if (error.name === "ChunkLoadError" || error.name === "TypeError") {
     return (
       <div style={{ color: "#fff", fontSize: 18 }}>
@@ -36,6 +33,6 @@ const ErrorFallback = ({error}: Props) => {
       <pre>{error.stack ?? "Unknown error"}</pre>
     </div>
   );
-}
+};
 
 export default ErrorFallback;
diff --git a/src/components/home/SuccinctEtas.tsx b/src/components/home/SuccinctEtas.tsx
@@ -1,5 +1,5 @@
 import { useContext } from "react";
-import { Box, ListItemText, SxProps, Theme, Typography } from "@mui/material";
+import { Box, SxProps, Theme, Typography } from "@mui/material";
 import { useTranslation } from "react-i18next";
 import { useEtas } from "../../hooks/useEtas";
 import AppContext from "../../context/AppContext";
@@ -107,21 +107,17 @@ const SuccinctEtas = ({
   };
 
   return (
-    <ListItemText
-      primary={
-        <Typography component="h5" color="textPrimary" sx={primarySx}>
-          {etas ? getEtaString(etas[0], 0, true) : ""}
-        </Typography>
-      }
-      secondary={
-        <Typography variant="h6" color="textSecondary" sx={secondarySx}>
-          {etas ? getEtaString(etas[1], 1) : ""}
-          <br />
-          {etas ? getEtaString(etas[2], 2) : ""}
-        </Typography>
-      }
-      sx={rootSx}
-    />
+    <Box display="flex" flexDirection="column" textAlign="right">
+      <Typography component="h5" color="textPrimary" sx={primarySx}>
+        {etas ? getEtaString(etas[0], 0, true) : ""}
+      </Typography>
+      <Typography component="h6" color="textSecondary" sx={secondarySx}>
+        {etas ? getEtaString(etas[1], 1) : ""}
+      </Typography>
+      <Typography component="h6" color="textSecondary" sx={secondarySx}>
+        {etas ? getEtaString(etas[2], 2) : ""}
+      </Typography>
+    </Box>
   );
 };
 
@@ -158,16 +154,13 @@ export const DoubleTrainIcon = () => (
 
 export default SuccinctEtas;
 
-const rootSx: SxProps<Theme> = {
-  textAlign: "right",
-};
-
 const primarySx: SxProps<Theme> = {
   whiteSpace: "nowrap",
+  fontSize: "1em",
 };
 
 const secondarySx: SxProps<Theme> = {
-  fontSize: "0.875rem !important",
+  fontSize: "0.875em",
   fontWeight: "400",
   lineHeight: "1.43",
   whiteSpace: "nowrap",