fixed datadog logs formatting

src/common/LogCard.tsx

@@ -55,20 +55,22 @@ export default function LogCard(props: Props) {
 
   const lineSummary = () => {
     return (
-      <Grid container direction="row" justifyContent="space-around" alignContent="center">
+      <Grid container direction="row" alignItems="left" spacing={1}>
-        <Grid size={2}>
+        <Grid size={{ xs: 2.2 }} >
           {moment(log.timestamp).format("MMM Do, h:mm:ss a")}
         </Grid>
-        <Grid size={1}>
+        <Grid size={{ xs: 1 }}>
           {log.service}
         </Grid>
-        <Grid size={1}>
+        <Grid size={{ xs: 1 }}>
           {log.device}
         </Grid>
-        <Grid size={2}>
+        <Grid size={{ xs: 2 }}>
-          {log.message}
+          <Typography noWrap variant="body2">
+            {log.message}
+          </Typography>
         </Grid>
-        <Grid>
+        <Grid size={{ xs: 5.8 }}>
           <Typography noWrap variant="body2">
             {log.attributes}
           </Typography>

src/common/LogsDisplay.tsx

@@ -566,7 +566,7 @@ export default function LogsDisplay(props: Props) {
         </Grid>
         <Grid item xs={10} style={{ height: "100%", overflow: "hidden" }}>
           <Grid container direction="row" justifyContent="space-around" alignItems="center">
-            <Grid item xs={2}>
+            <Grid item xs={2.2}>
               Timestamp
             </Grid>
             <Grid item xs={1}>

src/navigation/SideNavigator.tsx

@@ -89,19 +89,22 @@ const useStyles = makeStyles((theme: Theme) => ({
       paddingLeft: theme.spacing(3),
       paddingRight: theme.spacing(3)
     },
+    "&:hover": {
+      background: theme.palette.mode === "light" ? darken(theme.palette.background.default, 0.1) : lighten(theme.palette.background.default, 0.1)
+    }
   }, 
   activeItem:
     theme.palette.mode === "light"
       ? {
           background: darken(theme.palette.background.default, 0.25),
           "&:hover": {
-            background: darken(theme.palette.background.default, 0.25)
+            background: darken(theme.palette.background.default, 0.15)
           }
         }
       : {
           background: lighten(theme.palette.background.default, 0.25),
           "&:hover": {
-            background: lighten(theme.palette.background.default, 0.25)
+            background: lighten(theme.palette.background.default, 0.15)
           }
         }
 }))

src/pages/Devices.tsx

@@ -285,7 +285,7 @@ export default function Devices() {
               <Chip 
                 variant="outlined"
                 label={device.settings?.name ? device.settings.name : "Device " + device.settings?.deviceId} 
-                sx={{ maxWidth: 120}}
+                sx={{ maxWidth: 160}}
               />
             </Box>
           )

src/theme/theme.ts

@@ -4,8 +4,6 @@ import { createTheme, ThemeOptions } from '@mui/material/styles';
 import {
   getPrimaryColour,
   getSecondaryColour,
-  getSignatureAccentColour,
-  getSignatureColour
 } from "../services/whiteLabel";
 
 const baseTheme: ThemeOptions = {
@@ -27,9 +25,6 @@ function makePaletteColor(name: keyof typeof Colours) {
     return { main: name };
   }
   const ramp = Colours[name] as Record<number, string>; // e.g., blue[500], blue[300], etc.
-  // if (!ramp) {
-    
-  // }
   return {
     main: ramp[500],
     light: ramp[300],
@@ -54,8 +49,8 @@ export const getTheme = (mode: 'light' | 'dark') =>
           }
         : {
           background: {
-            default: "#e9e9e9",
+            default: "#e5e5e5",
-            paper: "#fafafa",
+            paper: "#f0f0f0",
           },
         }),
     },