UI updates #71

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
   };

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'
   },

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) =>
+type LogEventControllerProps = RestControllerProps<LogSettings>;
-  createStyles({
-    content: {
-      padding: theme.spacing(2),
-      margin: theme.spacing(3)
-    }
-  });
-
-type LogEventControllerProps = RestControllerProps<LogSettings> &
-  WithStyles<typeof styles>;
 
 class LogEventController extends Component<
   LogEventControllerProps,

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,6 +65,14 @@ class LogEventForm extends Component<LogEventFormProps> {
     const { data, saveData } = this.props;
     return (
       <ValidatorForm onSubmit={saveData}>
+        <Grid
+          container
+          spacing={0}
+          direction="row"
+          justify="flex-start"
+          alignItems="center"
+        >
+          <Grid item xs={2}>
             <SelectValidator
               name="level"
               label="Log Level"
@@ -81,12 +89,16 @@ class LogEventForm extends Component<LogEventFormProps> {
               <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. New log events
+                (the last {data.max_messages} messages are buffered and new log
-            are shown in real-time.)
+                events are shown in real time)
               </i>
             </Typography>
+          </Grid>
+        </Grid>
       </ValidatorForm>
     );
   }