diff --git a/app/components/DeviceView.scss b/app/components/DeviceView.scss new file mode 100644 index 0000000..80f1c8f --- /dev/null +++ b/app/components/DeviceView.scss @@ -0,0 +1,24 @@ +.device { + .header { + display: flex !important; + flex-direction: column; + @media only screen and (min-width : 768px) { + flex-direction: row; + } + } + .connectionState { + @media only screen and (min-width : 768px) { + margin-left: .75em; + } + font-size: .75em; + font-weight: lighter; + + &.connected { + color: #13D213; + } + + &.disconnected { + color: #D20000; + } + } +} diff --git a/app/components/DeviceView.tsx b/app/components/DeviceView.tsx index d748d46..b1554a1 100644 --- a/app/components/DeviceView.tsx +++ b/app/components/DeviceView.tsx @@ -6,12 +6,13 @@ import { Grid, Header, Icon, Item } from "semantic-ui-react"; import { injectState, StateBase } from "@app/state"; import { SprinklersDevice } from "@common/sprinklers"; import { ProgramTable, RunSectionForm, SectionRunnerView, SectionTable } from "."; +import "./DeviceView.scss"; function ConnectionState({ connected, className }: { connected: boolean, className?: string }) { const classes = classNames({ - "device--connectionState": true, - "device--connectionState-connected": connected, - "device--connectionState-disconnected": !connected, + connectionState: true, + connected: connected, /* tslint:disable-line:object-literal-shorthand */ + disconnected: !connected, }, className); return (