Update disconnected state UI (#1758)

nerfstudio/viewer/app/src/index.scss

@@ -17,6 +17,7 @@ code {
 .App {
   position: relative;
   height: 100vh;
+  background-color: #1d222a;
 }
 
 $base-color1: #292d39;
@@ -358,8 +359,32 @@ $sidebar-width: 100% !default;
   border: $custom-border;
 }
 
-.RenderWindow {
-  z-index: 1;
+#not-connected-overlay {
+  position: absolute;
+  background-color: #1d222a;
+  height: 100%;
+  width: 100%;
+  text-align: center;
+  margin: 0;
+  padding: 0;
+  z-index: 10;
+  opacity: 0.8;
+}
+
+#not-connected-overlay-text {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  background-color: #393939;
+  border-radius: 10px;
+  padding-left: 15px;
+  padding-right: 15px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  color: #ff6969;
+  font-size: 18px;
+  z-index: 10;
 }
 
 .ViewerWindow-render-crop-container {

nerfstudio/viewer/app/src/modules/RenderWindow/RenderWindow.jsx

@@ -1,13 +1,23 @@
 import * as React from 'react';
+import { useSelector } from 'react-redux';
 
 export default function RenderWindow() {
+  const isWebsocketConnected = useSelector(
+    (state) => state.websocketState.isConnected,
+  );
+
   return (
     <div className="RenderWindow">
+      <div id="not-connected-overlay" hidden={isWebsocketConnected}>
+        <div id="not-connected-overlay-text">Renderer Disconnected</div>
+      </div>
       <img
         id="background-image"
         width="100%"
         height="100%"
         alt="Render window"
+        z-index="1"
+        hidden={!isWebsocketConnected}
       />
     </div>
   );

nerfstudio/viewer/app/src/modules/SidePanel/StatusPanel/StatusPanel.jsx

@@ -66,11 +66,6 @@ export default function StatusPanel(props: StatusPanelProps) {
   const is_training_text = isTraining ? 'Pause Training' : 'Resume Training';
   const training_icon = isTraining ? <PauseIcon /> : <PlayArrowIcon />;
 
-  const websocket_connected_text = isWebsocketConnected
-    ? 'Renderer Connected'
-    : 'Renderer Disconnected';
-  const websocket_connected_color = isWebsocketConnected ? 'success' : 'error';
-
   return (
     <div className="StatusPanel">
       <div className="StatusPanel-play-button">
@@ -128,13 +123,6 @@ export default function StatusPanel(props: StatusPanelProps) {
           <b>Resolution:</b> {eval_res}
         </div>
       </div>
-      <Button
-        className="StatusPanel-button"
-        color={websocket_connected_color}
-        style={{ textTransform: 'none' }}
-      >
-        {websocket_connected_text}
-      </Button>
     </div>
   );
 }