chore: improve contrast for terminal overlay (coder#3375)

bpmct · web-flow · commit fd4e2cc3313d · 2022-08-03T15:39:38.000-05:00
diff --git a/site/src/pages/TerminalPage/TerminalPage.tsx b/site/src/pages/TerminalPage/TerminalPage.tsx
@@ -203,7 +203,7 @@ const TerminalPage: FC<{
       {/* This overlay makes it more obvious that the terminal is disconnected. */}
       {/* It's nice for situations where Coder restarts, and they are temporarily disconnected. */}
       <div className={`${styles.overlay} ${isDisconnected ? "" : "connected"}`}>
-        <span>Disconnected</span>
+        <span className={styles.overlayText}>Disconnected</span>
       </div>
       <div className={styles.terminal} ref={xtermRef} data-testid="terminal" />
     </>
@@ -227,11 +227,16 @@ const useStyles = makeStyles(() => ({
     color: "white",
     fontFamily: MONOSPACE_FONT_FAMILY,
     fontSize: 18,
-    backgroundColor: "rgba(0, 0, 0, 0.2)",
+    backgroundColor: "rgba(0, 0, 0, 0.6)",
     "&.connected": {
       opacity: 0,
     },
   },
+  overlayText: {
+    padding: 32,
+    fontSize: 24,
+    backgroundColor: "#000",
+  },
   terminal: {
     width: "100vw",
     height: "100vh",
