From 2056d3ff191c3cd2ff484d6505aa660f71cb35c9 Mon Sep 17 00:00:00 2001
From: proddy <paul@derbyshire.nl>
Date: Fri, 18 Jun 2021 17:08:57 +0200
Subject: [PATCH] UI updates #71

---
 interface/src/project/EMSESPSettingsForm.tsx | 11 ++--
 interface/src/system/LogEventConsole.tsx     |  4 +-
 interface/src/system/LogEventController.tsx  | 13 +----
 interface/src/system/LogEventForm.tsx        | 56 ++++++++++++--------
 4 files changed, 43 insertions(+), 41 deletions(-)

diff --git a/interface/src/project/EMSESPSettingsForm.tsx b/interface/src/project/EMSESPSettingsForm.tsx
index 16c075243..6045d5556 100644
--- a/interface/src/project/EMSESPSettingsForm.tsx
+++ b/interface/src/project/EMSESPSettingsForm.tsx
@@ -1,4 +1,5 @@
-import React from 'react';
+import { Component } from 'react';
+
 import {
   ValidatorForm,
   TextValidator,
@@ -11,13 +12,13 @@ import {
   Box,
   Link,
   withWidth,
-  WithWidthProps
+  WithWidthProps,
+  Grid
 } from '@material-ui/core';
+
 import SaveIcon from '@material-ui/icons/Save';
 import MenuItem from '@material-ui/core/MenuItem';
 
-import Grid from '@material-ui/core/Grid';
-
 import {
   redirectingAuthorizedFetch,
   withAuthenticatedContext,
@@ -48,7 +49,7 @@ interface EMSESPSettingsFormState {
   processing: boolean;
 }
 
-class EMSESPSettingsForm extends React.Component<EMSESPSettingsFormProps> {
+class EMSESPSettingsForm extends Component<EMSESPSettingsFormProps> {
   state: EMSESPSettingsFormState = {
     processing: false
   };
diff --git a/interface/src/system/LogEventConsole.tsx b/interface/src/system/LogEventConsole.tsx
index 7c945134c..1942639a0 100644
--- a/interface/src/system/LogEventConsole.tsx
+++ b/interface/src/system/LogEventConsole.tsx
@@ -21,7 +21,7 @@ const leftOffset = () =>
 
 const useStyles = makeStyles((theme: Theme) => ({
   console: {
-    padding: theme.spacing(2),
+    padding: theme.spacing(1),
     position: 'absolute',
     left: (offsets: Offsets) => offsets.leftOffset(),
     right: 24,
@@ -33,7 +33,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   entry: {
     color: '#bbbbbb',
     fontFamily: 'Courier New, monospace',
-    fontSize: '14px',
+    fontSize: '13px',
     letterSpacing: 'normal',
     whiteSpace: 'nowrap'
   },
diff --git a/interface/src/system/LogEventController.tsx b/interface/src/system/LogEventController.tsx
index 4cf78a70a..cdeffafb1 100644
--- a/interface/src/system/LogEventController.tsx
+++ b/interface/src/system/LogEventController.tsx
@@ -1,7 +1,5 @@
 import { Component } from 'react';
 
-import { createStyles, WithStyles, Theme } from '@material-ui/core';
-
 import {
   restController,
   RestControllerProps,
@@ -30,16 +28,7 @@ interface LogEventControllerState {
   events: LogEvent[];
 }
 
-const styles = (theme: Theme) =>
-  createStyles({
-    content: {
-      padding: theme.spacing(2),
-      margin: theme.spacing(3)
-    }
-  });
-
-type LogEventControllerProps = RestControllerProps<LogSettings> &
-  WithStyles<typeof styles>;
+type LogEventControllerProps = RestControllerProps<LogSettings>;
 
 class LogEventController extends Component<
   LogEventControllerProps,
diff --git a/interface/src/system/LogEventForm.tsx b/interface/src/system/LogEventForm.tsx
index 994617f1b..f234e8a2d 100644
--- a/interface/src/system/LogEventForm.tsx
+++ b/interface/src/system/LogEventForm.tsx
@@ -5,7 +5,7 @@ import {
   SelectValidator
 } from 'react-material-ui-form-validator';
 
-import { Typography } from '@material-ui/core';
+import { Typography, Grid } from '@material-ui/core';
 
 import MenuItem from '@material-ui/core/MenuItem';
 
@@ -65,28 +65,40 @@ class LogEventForm extends Component<LogEventFormProps> {
     const { data, saveData } = this.props;
     return (
       <ValidatorForm onSubmit={saveData}>
-        <SelectValidator
-          name="level"
-          label="Log Level"
-          value={data.level}
-          variant="outlined"
-          onChange={this.changeLevel}
-          margin="normal"
+        <Grid
+          container
+          spacing={0}
+          direction="row"
+          justify="flex-start"
+          alignItems="center"
         >
-          <MenuItem value={-1}>OFF</MenuItem>
-          <MenuItem value={3}>ERROR</MenuItem>
-          <MenuItem value={4}>WARNING</MenuItem>
-          <MenuItem value={5}>NOTICE</MenuItem>
-          <MenuItem value={6}>INFO</MenuItem>
-          <MenuItem value={7}>DEBUG</MenuItem>
-          <MenuItem value={8}>TRACE</MenuItem>
-        </SelectValidator>
-        <Typography color="primary" variant="body2">
-          <i>
-            (the last {data.max_messages} messages are buffered. New log events
-            are shown in real-time.)
-          </i>
-        </Typography>
+          <Grid item xs={2}>
+            <SelectValidator
+              name="level"
+              label="Log Level"
+              value={data.level}
+              variant="outlined"
+              onChange={this.changeLevel}
+              margin="normal"
+            >
+              <MenuItem value={-1}>OFF</MenuItem>
+              <MenuItem value={3}>ERROR</MenuItem>
+              <MenuItem value={4}>WARNING</MenuItem>
+              <MenuItem value={5}>NOTICE</MenuItem>
+              <MenuItem value={6}>INFO</MenuItem>
+              <MenuItem value={7}>DEBUG</MenuItem>
+              <MenuItem value={8}>TRACE</MenuItem>
+            </SelectValidator>
+          </Grid>
+          <Grid item md>
+            <Typography color="primary" variant="body2">
+              <i>
+                (the last {data.max_messages} messages are buffered and new log
+                events are shown in real time)
+              </i>
+            </Typography>
+          </Grid>
+        </Grid>
       </ValidatorForm>
     );
   }