From 67b9cb7d05438b7477d9805965019b2cf87f84d5 Mon Sep 17 00:00:00 2001
From: Law Wai Chun <chunlaw@rocketmail.com>
Date: Wed, 29 May 2024 17:45:27 +0800
Subject: [PATCH] UI fix for succinct eta

---
 src/ErrorFallback.tsx                | 11 ++++-----
 src/components/home/SuccinctEtas.tsx | 35 +++++++++++-----------------
 2 files changed, 18 insertions(+), 28 deletions(-)

diff --git a/src/ErrorFallback.tsx b/src/ErrorFallback.tsx
index e759f5f37f68..d29d1472e438 100644
--- 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
index 12726f9f6200..fea8d7c1000c 100644
--- 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",