Split out css files to separate ones in the styles folder

app/components/App.tsx

@@ -10,7 +10,7 @@ import * as rp from "@app/routePaths";
 // tslint:disable:ordered-imports
 import "font-awesome/css/font-awesome.css";
 import "semantic-ui-css/semantic.css";
-import "@app/styles/app.scss";
+import "@app/styles/app";
 
 function NavContainer() {
     return (

app/components/DeviceView.scss

@@ -1,76 +0,0 @@
-.device {
-  .header {
-    display: flex !important;
-    flex-direction: column;
-    @media only screen and (min-width: 768px) {
-      flex-direction: row;
-    }
-  }
-  .ui.grid {
-    margin-top: 0;
-  }
-  .connectionState {
-    @media only screen and (min-width: 768px) {
-      margin-left: .75em;
-    }
-    font-size: .75em;
-    font-weight: lighter;
-
-    &.connected {
-      color: #13D213;
-    }
-
-    &.disconnected {
-      color: #D20000;
-    }
-  }
-}
-
-.sectionRunner .queue {
-  max-height: 14em;
-  height: 14em;
-  overflow-y: scroll;
-}
-
-.ui.modal.programEditor > .header > .header.item .inline.fields {
-  margin-bottom: 0;
-}
-
-.programSequence.editing .item .content {
-  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;
-  }
-  &.seconds {
-
-  }
-
-  > input {
-    flex: 1 0 6em;
-    width: 100%;
-  }
-
-  > .label {
-    flex: 0 0 $durationInput-labelWidth;
-    text-align: center;
-  }
-}

app/components/DeviceView.tsx

@@ -9,7 +9,8 @@ import { AppState, injectState } from "@app/state";
 import { ConnectionState as ConState } from "@common/sprinklersRpc";
 import { Route, RouteComponentProps, withRouter } from "react-router";
 import { ProgramTable, RunSectionForm, SectionRunnerView, SectionTable } from ".";
-import "./DeviceView.scss";
+
+import "@app/styles/DeviceView";
 
 const ConnectionState = observer(({ connectionState, className }:
                                       { connectionState: ConState, className?: string }) => {

app/components/DurationView.tsx

@@ -4,6 +4,8 @@ import { Form, Input, InputProps } from "semantic-ui-react";
 
 import { Duration } from "@common/Duration";
 
+import "@app/styles/DurationView";
+
 export default class DurationView extends React.Component<{
     label?: string,
     inline?: boolean,
@@ -12,14 +14,14 @@ export default class DurationView extends React.Component<{
     className?: string,
 }> {
     render() {
-        const { duration, label, inline, onDurationChange } = this.props;
+        const { duration, label, inline, onDurationChange, className } = this.props;
-        const className = classNames("durationInput", this.props.className);
+        const inputsClassName = classNames("durationInputs", { inline });
         if (onDurationChange) {
             return (
                 <React.Fragment>
-                    <Form.Field inline={inline}>
+                    <Form.Field inline={inline} className={className}>
                         {label && <label>{label}</label>}
-                        <div className="durationInputs">
+                        <div className={inputsClassName}>
                             <Input
                                 type="number"
                                 className="durationInput minutes"

app/components/MessagesView.tsx

@@ -5,6 +5,8 @@ import { Message, MessageProps, TransitionGroup } from "semantic-ui-react";
 
 import { AppState, injectState, UiMessage, UiStore } from "@app/state/";
 
+import "@app/styles/MessagesView";
+
 @observer
 class MessageView extends React.Component<{
     uiStore: UiStore,

app/components/ProgramSequenceView.tsx

@@ -7,6 +7,8 @@ import { DurationView, SectionChooser } from "@app/components/index";
 import { Duration } from "@common/Duration";
 import { ProgramItem, Section } from "@common/sprinklersRpc";
 
+import "@app/styles/ProgramSequenceView";
+
 @observer
 class ProgramSequenceItem extends React.Component<{
     sequenceItem: ProgramItem, sections: Section[], onChange?: (newItem: ProgramItem) => void,

app/components/SectionChooser.tsx

@@ -5,6 +5,8 @@ import { DropdownItemProps, DropdownProps, Form } from "semantic-ui-react";
 
 import { Section } from "@common/sprinklersRpc";
 
+import "@app/styles/SectionChooser";
+
 @observer
 export default class SectionChooser extends React.Component<{
     label?: string,

app/components/SectionRunnerView.tsx

@@ -7,6 +7,8 @@ import { Duration } from "@common/Duration";
 import log from "@common/logger";
 import { Section, SectionRun, SectionRunner } from "@common/sprinklersRpc";
 
+import "@app/styles/SectionRunnerView";
+
 interface PausedStateProps {
     paused: boolean;
     togglePaused: () => void;

app/pages/LoginPage.tsx

@@ -6,6 +6,8 @@ import { Container, Dimmer, Form, Header, InputOnChangeData, Loader, Message, Se
 import { AppState, injectState } from "@app/state";
 import log from "@common/logger";
 
+import "@app/styles/LoginPage";
+
 class LoginPageState {
     @observable username = "";
     @observable password = "";

app/styles/DeviceView.scss

@@ -0,0 +1,51 @@
+.device {
+  .header {
+    display: flex !important;
+    flex-direction: column;
+    @media only screen and (min-width: 768px) {
+      flex-direction: row;
+    }
+  }
+  .ui.grid {
+    margin-top: 0;
+  }
+  .connectionState {
+    @media only screen and (min-width: 768px) {
+      margin-left: .75em;
+    }
+    font-size: .75em;
+    font-weight: lighter;
+
+    &.connected {
+      color: #13D213;
+    }
+
+    &.disconnected {
+      color: #D20000;
+    }
+  }
+}
+
+.section--number,
+.program--number {
+  width: 2em
+}
+
+.section--name /*,
+.program--name*/
+{
+  width: 10em;
+  white-space: nowrap;
+}
+
+.section--state {
+
+}
+
+.section-state.running {
+  color: green;
+}
+
+.ui.modal.programEditor > .header > .header.item .inline.fields {
+  margin-bottom: 0;
+}

app/styles/DurationView.scss

@@ -0,0 +1,30 @@
+.durationInputs {
+  display: flex;
+  flex-wrap: wrap;
+  margin: -0.5em;
+
+  &.inline {
+    min-width: 30em;
+  }
+}
+
+$durationInput-inputWidth: 5em;
+$durationInput-labelWidth: 2.5em;
+
+.ui.form .field .ui.input.durationInput {
+  margin: 0.5em;
+
+  flex: 1 0 ($durationInput-inputWidth + $durationInput-labelWidth);
+
+  > input {
+    flex: 1 0 $durationInput-inputWidth;
+    min-width: $durationInput-inputWidth;
+    width: 100%;
+  }
+
+  > .label {
+    width: $durationInput-labelWidth;
+    flex: 0 0 $durationInput-labelWidth;
+    text-align: center;
+  }
+}

app/styles/LoginPage.scss

@@ -0,0 +1,29 @@
+.ui.container.loginPage {
+  margin-top: 1em;
+
+  .ui.header {
+    text-align: center;
+  }
+
+  /* Mobile */
+  @media only screen and (max-width: 767px) {
+    width: auto !important;
+    margin-left: 1em !important;
+    margin-right: 1em !important;
+  }
+
+  /* Tablet */
+  @media only screen and (min-width: 768px) and (max-width: 991px) {
+    width: 600px;
+  }
+
+  /* Small Monitor */
+  @media only screen and (min-width: 992px) and (max-width: 1199px) {
+    width: 600px;
+  }
+
+  /* Large Monitor */
+  @media only screen and (min-width: 1200px) {
+    width: 800px;
+  }
+}

app/styles/MessagesView.scss

@@ -0,0 +1,10 @@
+.messages {
+  position: fixed;
+  bottom: 1em;
+  left: 1em;
+  right: 1em;
+  padding-left: 0;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+}

app/styles/ProgramSequenceView.scss

@@ -0,0 +1,3 @@
+.programSequence.editing .item .content {
+  width: 20em;
+}

app/styles/SectionChooser.scss

@@ -0,0 +1,5 @@
+.sectionChooser {
+  .ui.selection.dropdown {
+    min-width: 12em;
+  }
+}

app/styles/SectionRunnerView.scss

@@ -0,0 +1,29 @@
+.sectionRunner .queue {
+  max-height: 14em;
+  height: 14em;
+  overflow-y: scroll;
+}
+
+.sectionRunner--pausedState {
+  padding-left: .75em;
+  font-size: .75em;
+  font-weight: lighter;
+}
+
+.sectionRunner--pausedState > .fa {
+  padding-right: .2em;
+}
+
+.sectionRunner--pausedState-unpaused {
+}
+
+.sectionRun {
+  .ui.progress {
+    margin: 1em 0 0 !important;
+
+    .bar {
+      transition: none;
+      min-width: 0 !important;
+    }
+  }
+}

app/styles/app.scss

@@ -2,100 +2,16 @@
   padding-top: 1em;
 }
 
-.sectionRunner--pausedState {
-  padding-left: .75em;
-  font-size: .75em;
-  font-weight: lighter;
-}
-
-.sectionRunner--pausedState > .fa {
-  padding-right: .2em;
-}
-
-.sectionRunner--pausedState-unpaused {
-}
-
 .flex-horizontal-space-between {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
 }
 
-.sectionRun .progress {
-  margin: 1em 0 0 !important;
-}
-
-.sectionRun .ui.progress .bar {
-  -webkit-transition: none;
-  transition: none;
-  min-width: 0 !important;
-}
-
-.section--number,
-.program--number {
-  width: 2em
-}
-
-.section--name /*,
-.program--name*/
-{
-  width: 10em;
-  white-space: nowrap;
-}
-
-.section--state {
-
-}
-
 .flex {
   display: flex !important;
 }
 
-.section-state.running {
-  color: green;
-}
-
-.messages {
-  position: fixed;
-  bottom: 1em;
-  left: 1em;
-  right: 1em;
-  padding-left: 0;
-  z-index: 1000;
-  display: flex;
-  flex-direction: column;
-}
-
 .flex-spacer {
   flex: 1;
 }
-
-.ui.container.loginPage {
-  margin-top: 1em;
-
-  .ui.header {
-    text-align: center;
-  }
-
-  /* Mobile */
-  @media only screen and (max-width: 767px) {
-    width: auto !important;
-    margin-left: 1em !important;
-    margin-right: 1em !important;
-  }
-
-  /* Tablet */
-  @media only screen and (min-width: 768px) and (max-width: 991px) {
-    width: 600px;
-  }
-
-  /* Small Monitor */
-  @media only screen and (min-width: 992px) and (max-width: 1199px) {
-    width: 600px;
-  }
-
-  /* Large Monitor */
-  @media only screen and (min-width: 1200px) {
-    width: 800px;
-  }
-}

app/webpack.config.js

@@ -168,7 +168,6 @@ const getConfig = module.exports = (env) => {
         // Otherwise React will be compiled in the very slow development mode.
         new webpack.DefinePlugin(environ.stringified),
         new CaseSensitivePathsPlugin(),
-        // TODO: doesn't work with typescript target: es6
         isProd && new UglifyJsPlugin({
             sourceMap: shouldUseSourceMap,
         }),
@@ -230,7 +229,7 @@ const getConfig = module.exports = (env) => {
                     "webpack://" + path.resolve(info.absoluteResourcePath).replace(/\\/g, "/") : undefined,
         },
         resolve: {
-            extensions: [".ts", ".tsx", ".js", ".json"],
+            extensions: [".ts", ".tsx", ".js", ".json", ".scss"],
             alias: {
                 "@app": paths.appDir,
                 "@common": paths.commonDir,
@@ -249,7 +248,7 @@ const getConfig = module.exports = (env) => {
             host: "0.0.0.0",
             port: 8081,
             proxy: [{
-                context: ["/api"], // TODO: update when there is actually an api
+                context: ["/api"],
                 target: paths.publicUrl,
             }],
         },