From 79ff1e8ff983266bc084d158c56cdd023dfc0e21 Mon Sep 17 00:00:00 2001
From: Alex Mikhalev <alexmikhalevalex@gmail.com>
Date: Tue, 24 Jul 2018 12:55:43 -0600
Subject: [PATCH] Minor UI improvements

---
 app/components/App.tsx               | 10 +++++-----
 app/components/DeviceView.scss       | 22 +++++++++++++---------
 app/components/DeviceView.tsx        |  8 +++++---
 app/components/ProgramTable.tsx      |  2 +-
 app/components/SectionChooser.tsx    |  1 +
 app/components/SectionRunnerView.tsx |  2 +-
 app/pages/ProgramPage.tsx            |  2 +-
 7 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/app/components/App.tsx b/app/components/App.tsx
index d146d23..cb5c20b 100644
--- a/app/components/App.tsx
+++ b/app/components/App.tsx
@@ -17,11 +17,11 @@ function NavContainer() {
         <Container className="app">
             <NavBar/>
 
-            <Route path={rp.device(":deviceId")} component={p.DevicePage}/>
-            <Route path={rp.messagesTest} component={p.MessagesTestPage}/>
-            {/*<Switch>*/}
-                {/*<Redirect to="/"/>*/}
-            {/*</Switch>*/}
+            <Switch>
+                <Route path={rp.device(":deviceId")} component={p.DevicePage}/>
+                <Route path={rp.messagesTest} component={p.MessagesTestPage}/>
+                <Redirect to="/"/>
+            </Switch>
 
             <MessagesView/>
         </Container>
diff --git a/app/components/DeviceView.scss b/app/components/DeviceView.scss
index bca82da..3df3230 100644
--- a/app/components/DeviceView.scss
+++ b/app/components/DeviceView.scss
@@ -6,13 +6,7 @@
       flex-direction: row;
     }
   }
-  .ui.stackable.grid.in-container > .row > .column {
-    @media only screen and (max-width: 991px) {
-      padding-left: 0 !important;
-      padding-right: 0 !important;
-    }
-  }
-  .ui.stackable.grid.in-container {
+  .ui.grid {
     margin-top: 0;
   }
   .connectionState {
@@ -46,22 +40,32 @@
   width: 20em;
 }
 
+.sectionChooser {
+  .ui.selection.dropdown {
+    min-width: 12em;
+  }
+}
+
 .durationInputs {
   display: flex;
+  flex-wrap: wrap;
+  margin: -0.5em;
 }
 
 $durationInput-labelWidth: 2.5em;
 
 .ui.form .field .ui.input.durationInput {
+  margin: 0.5em;
+
   &.minutes {
-    margin-right: 1em;
+    //margin-right: 1em;
   }
   &.seconds {
 
   }
 
   > input {
-    flex: 1 1 6em;
+    flex: 1 0 6em;
     width: 100%;
   }
 
diff --git a/app/components/DeviceView.tsx b/app/components/DeviceView.tsx
index 633a334..e484c89 100644
--- a/app/components/DeviceView.tsx
+++ b/app/components/DeviceView.tsx
@@ -54,12 +54,14 @@ class DeviceView extends React.Component<DeviceViewProps & RouteComponentProps<a
         const { id, connectionState, sections, sectionRunner } = device;
         const deviceBody = connectionState.isAvailable && (
             <React.Fragment>
-                <SectionRunnerView sectionRunner={sectionRunner} sections={sections}/>
                 <Grid>
-                    <Grid.Column mobile="16" tablet="16" computer="8">
+                    <Grid.Column mobile="16" tablet="16" computer="16" largeScreen="6">
+                        <SectionRunnerView sectionRunner={sectionRunner} sections={sections}/>
+                    </Grid.Column>
+                    <Grid.Column mobile="16" tablet="9" computer="9" largeScreen="6">
                         <SectionTable sections={sections}/>
                     </Grid.Column>
-                    <Grid.Column mobile="16" tablet="16" computer="8">
+                    <Grid.Column mobile="16" tablet="7" computer="7" largeScreen="4">
                         <RunSectionForm device={device} uiStore={uiStore}/>
                     </Grid.Column>
                 </Grid>
diff --git a/app/components/ProgramTable.tsx b/app/components/ProgramTable.tsx
index 79d30eb..29361a0 100644
--- a/app/components/ProgramTable.tsx
+++ b/app/components/ProgramTable.tsx
@@ -33,7 +33,7 @@ class ProgramRows extends React.Component<{
                 </Table.Cell>
                 <Table.Cell>
                     <Button onClick={this.cancelOrRun} {...buttonStyle} positive={!running} negative={running}>
-                        {running ? "Cancel" : "Run"}
+                        {running ? "Stop" : "Run"}
                     </Button>
                     <Button as={Link} to={detailUrl} {...buttonStyle} primary>
                         Open
diff --git a/app/components/SectionChooser.tsx b/app/components/SectionChooser.tsx
index 85fe67d..cdabb2f 100644
--- a/app/components/SectionChooser.tsx
+++ b/app/components/SectionChooser.tsx
@@ -23,6 +23,7 @@ export default class SectionChooser extends React.Component<{
         }
         return (
             <Form.Select
+                className="sectionChooser"
                 label={label}
                 inline={inline}
                 placeholder="Section"
diff --git a/app/components/SectionRunnerView.tsx b/app/components/SectionRunnerView.tsx
index 64b0590..3865189 100644
--- a/app/components/SectionRunnerView.tsx
+++ b/app/components/SectionRunnerView.tsx
@@ -109,7 +109,7 @@ class SectionRunView extends React.Component<{
             <Segment className="sectionRun">
                 <div className="flex-horizontal-space-between">
                     {description}
-                    <Button onClick={cancel} icon size="mini"><Icon name="remove"/></Button>
+                    <Button negative onClick={cancel} icon size="mini"><Icon name="remove"/></Button>
                 </div>
                 {progressBar}
             </Segment>
diff --git a/app/pages/ProgramPage.tsx b/app/pages/ProgramPage.tsx
index 7040ccd..c7311c4 100644
--- a/app/pages/ProgramPage.tsx
+++ b/app/pages/ProgramPage.tsx
@@ -81,7 +81,7 @@ class ProgramPage extends React.Component<{
         return (
             <Modal.Actions>
                 <Button positive={!running} negative={running} onClick={this.cancelOrRun}>
-                    {running ? "Cancel" : "Run"}
+                    {running ? "Stop" : "Run"}
                 </Button>
                 {editButtons}
                 <Button onClick={this.close}>