From 5cf47a59595d11cc1039006eb8608c5ad43e844c Mon Sep 17 00:00:00 2001
From: Ben Potter <ben@coder.com>
Date: Wed, 3 Aug 2022 19:57:17 +0000
Subject: [PATCH] chore: improve contrast for terminal overlay

---
 site/src/pages/TerminalPage/TerminalPage.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/site/src/pages/TerminalPage/TerminalPage.tsx b/site/src/pages/TerminalPage/TerminalPage.tsx
index b35870b465ff1..933255db028b1 100644
--- 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",