Dim device when disconnected

client/components/DeviceView.tsx

@@ -2,7 +2,7 @@ import * as classNames from "classnames";
 import { observer } from "mobx-react";
 import * as React from "react";
 import { Link } from "react-router-dom";
-import { Grid, Header, Icon, Item, SemanticICONS } from "semantic-ui-react";
+import { Grid, Header, Icon, Item, SemanticICONS, Dimmer, Segment } from "semantic-ui-react";
 
 import { DeviceImage } from "@client/components";
 import * as p from "@client/pages";
@@ -87,11 +87,13 @@ class DeviceView extends React.Component<DeviceViewProps> {
       return null;
     }
     const { connectionState, sectionRunner, sections } = this.device;
+    const dimmed = !connectionState.isDeviceConnected;
     if (!connectionState.isAvailable || inList) {
       return null;
     }
     return (
-      <React.Fragment>
+      <Dimmer.Dimmable blurring dimmed={dimmed} className="device-body">
+        <Dimmer active={dimmed} />
         <Grid>
           <Grid.Column mobile="16" tablet="16" computer="16" largeScreen="6">
             <SectionRunnerView
@@ -115,7 +117,7 @@ class DeviceView extends React.Component<DeviceViewProps> {
           path={route.program(":deviceId", ":programId")}
           component={p.ProgramPage}
         />
-      </React.Fragment>
+      </Dimmer.Dimmable>
     );
   }
 

client/styles/DeviceView.scss

@@ -5,6 +5,9 @@
   }
 }
 
+$disconnected-color: #d20000;
+$connected-color: #13d213;
+
 .device {
   .header {
     display: flex !important;
@@ -13,6 +16,29 @@
       flex-direction: row;
     }
   }
+
+  .device-body {
+    position: relative;
+    margin: 0em -1em 0em -1em;
+    padding: 0em 1em 1em 1em;
+
+    &.blurring.dimmable.dimmed {
+      // border: $disconnected-color 1px solid;
+      border-radius: 0.5em;
+
+      > :not(.dimmer) {
+        -webkit-filter: blur(1px) grayscale(0.7);
+        // filter: blur(1px) grayscale(0.7);
+        filter: grayscale(0.7);
+      }
+
+      .ui.dimmer {
+        // border-radius: 1em;
+        background-color: adjust-color($disconnected-color, $alpha: -0.95);
+      }
+    }
+  }
+
   .ui.grid {
     margin-top: 0;
   }
@@ -24,11 +50,11 @@
     font-weight: lighter;
 
     &.connected {
-      color: #13d213;
+      color: $connected-color;
     }
 
     &.disconnected {
-      color: #d20000;
+      color: $disconnected-color;
     }
   }
 }