Respect 12 hour time

1 files changed, 7 insertions, 1 deletions

diff --git a/modern/src/main/EventsDrawer.js b/modern/src/main/EventsDrawer.js
index 46664f87..67700fc4 100644
--- a/modern/src/main/EventsDrawer.js
+++ b/modern/src/main/EventsDrawer.js
@@ -9,6 +9,7 @@ import DeleteIcon from '@mui/icons-material/Delete';
 import { formatNotificationTitle, formatTime } from '../common/util/formatter';
 import { useTranslation } from '../common/components/LocalizationProvider';
 import { eventsActions } from '../store';
+import { usePreference } from '../common/util/preferences';
 
 const useStyles = makeStyles((theme) => ({
   drawer: {
@@ -29,6 +30,8 @@ const EventsDrawer = ({ open, onClose }) => {
   const dispatch = useDispatch();
   const t = useTranslation();
 
+  const hours12 = usePreference('twelveHourFormat');
+
   const devices = useSelector((state) => state.devices.items);
 
   const events = useSelector((state) => state.events.items);
@@ -61,7 +64,10 @@ const EventsDrawer = ({ open, onClose }) => {
             onClick={() => navigate(`/event/${event.id}`)}
             disabled={!event.id}
           >
-            <ListItemText primary={`${devices[event.deviceId]?.name} • ${formatType(event)}`} secondary={formatTime(event.eventTime)} />
+            <ListItemText
+              primary={`${devices[event.deviceId]?.name} • ${formatType(event)}`}
+              secondary={formatTime(event.eventTime, 'seconds', hours12)}
+            />
             <IconButton size="small" onClick={() => dispatch(eventsActions.delete(event))}>
               <DeleteIcon fontSize="small" className={classes.negative} />
             </IconButton>