Minor refacto

central_frontend/src/routes/DeviceRoute/DeviceInfoProperty.tsx

@@ -3,7 +3,7 @@ import { TableCell, TableRow } from "@mui/material";
 export function DeviceInfoProperty(p: {
   icon?: React.ReactElement;
   label: string;
-  value: string;
+  value: string | React.ReactElement;
   color?: string;
 }): React.ReactElement {
   return (

central_frontend/src/routes/DeviceRoute/DeviceStateBlock.tsx

@@ -1,10 +1,11 @@
+import { Table, TableBody } from "@mui/material";
 import React from "react";
 import { Device, DeviceApi, DeviceState } from "../../api/DeviceApi";
 import { AsyncWidget } from "../../widgets/AsyncWidget";
-import { DeviceRouteCard } from "./DeviceRouteCard";
-import { Table, TableBody } from "@mui/material";
-import { DeviceInfoProperty } from "./DeviceInfoProperty";
+import { BoolText } from "../../widgets/BoolText";
 import { timeDiff } from "../../widgets/TimeWidget";
+import { DeviceInfoProperty } from "./DeviceInfoProperty";
+import { DeviceRouteCard } from "./DeviceRouteCard";
 
 export function DeviceStateBlock(p: { device: Device }): React.ReactElement {
   const [state, setState] = React.useState<DeviceState>();
@@ -32,7 +33,13 @@ function DeviceStateInner(p: { state: DeviceState }): React.ReactElement {
       <TableBody>
         <DeviceInfoProperty
           label="Status"
-          value={p.state.online ? "Online" : "Offline"}
+          value={
+            <BoolText
+              val={p.state.online}
+              positive="ONLINE"
+              negative="Offline"
+            />
+          }
         />
         <DeviceInfoProperty
           label="Last ping"

central_frontend/src/routes/DeviceRoute/GeneralDeviceInfo.tsx

@@ -3,6 +3,7 @@ import { IconButton, Table, TableBody, Tooltip } from "@mui/material";
 import React from "react";
 import { Device } from "../../api/DeviceApi";
 import { EditDeviceMetadataDialog } from "../../dialogs/EditDeviceMetadataDialog";
+import { BoolText } from "../../widgets/BoolText";
 import { formatDate } from "../../widgets/TimeWidget";
 import { DeviceInfoProperty } from "./DeviceInfoProperty";
 import { DeviceRouteCard } from "./DeviceRouteCard";
@@ -55,8 +56,9 @@ export function GeneralDeviceInfo(p: {
             />
             <DeviceInfoProperty
               label="Enabled"
-              value={p.device.enabled ? "YES" : "NO"}
-              color={p.device.enabled ? "green" : "red"}
+              value={
+                <BoolText val={p.device.enabled} positive="YES" negative="NO" />
+              }
             />
             <DeviceInfoProperty
               label="Maximum number of relays"

central_frontend/src/routes/DevicesRoute.tsx

@@ -15,6 +15,7 @@ import React from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { Device, DeviceApi, DevicesState, DeviceURL } from "../api/DeviceApi";
 import { AsyncWidget } from "../widgets/AsyncWidget";
+import { BoolText } from "../widgets/BoolText";
 import { SolarEnergyRouteContainer } from "../widgets/SolarEnergyRouteContainer";
 import { TimeWidget } from "../widgets/TimeWidget";
 
@@ -109,11 +110,11 @@ function ValidatedDevicesList(p: {
                 <TimeWidget time={dev.time_update} />
               </TableCell>
               <TableCell align="center">
-                {p.states.get(dev.id)!.online ? (
-                  <strong>Online</strong>
-                ) : (
-                  <em>Offline</em>
-                )}
+                <BoolText
+                  val={p.states.get(dev.id)!.online}
+                  positive="Online"
+                  negative="Offline"
+                />
                 <br />
                 <TimeWidget diff time={p.states.get(dev.id)!.last_ping} />
               </TableCell>