added highlighting for driver plate

Author: foxish

services/frontend/react_app/src/pages/home.tsx

@@ -2,16 +2,17 @@ import {MainLayout} from "../components/layouts";
 import {
     Box,
     Button,
-    Card,
-    CardBody,
-    CardHeader,
+    Text,
     Heading,
+    useDisclosure,
+    useToast,
+    Badge,
     HStack,
     Stack,
+    Card,
+    CardHeader,
+    CardBody,
     StackDivider,
-    Text,
-    useDisclosure,
-    useToast,
 } from "@chakra-ui/react";
 import styles from "./home.module.css";
 
@@ -31,7 +32,9 @@ const countdownRenderer = ({minutes, seconds, driverName, driverPlate, props }:
     if (minutes === 0 && seconds === 0) {
         return <Text>{driverName} arrived</Text>;
     } else {
-        return <Text as="b">The driver {driverName} ({driverPlate}) will arrive in {props.overtime ? "-" : ""}{minutes.toString().padStart(2, "0")}:{seconds.toString().padStart(2, "0")}</Text>;
+        return <Text as="b">
+            The driver {driverName} <Badge colorScheme="purple" px={2} py={1} borderRadius="md" fontSize="0.9em">{driverPlate}</Badge> will arrive in {props.overtime ? "-" : ""}{minutes.toString().padStart(2, "0")}:{seconds.toString().padStart(2, "0")}
+        </Text>;
     }
 };