Botch more frontend

frontend/src/TVMode.css

@@ -1,4 +1,4 @@
-body > div {
+.stream > div {
     width: 250px;
     height: 50vh;
     background-color: #00ff00;
@@ -11,6 +11,11 @@ body > div {
     flex-direction: row;
     justify-content: space-between;
 }
-span {
+.timer {
     font-weight: bold;
+}
+
+.mode {
+    font-weight: bold;
+    text-transform: uppercase;
 }

frontend/src/TVMode.tsx

@@ -36,23 +36,25 @@ const TVMode = () => {
     };
   }, [])
 
-  return (state === undefined ?
-    <span>Loading...</span> :
-    <div>
-      <div className="heading">
-        <span>Mode: {state.mode}</span>
-        <div>
-          <span>{secondsRemaining}s ⏱️</span>
-        </div>
-      </div>
+  return <div className="stream">
+    {state === undefined ?
+      <span>Loading...</span> :
       <div>
-        Current state: <pre>
-          {JSON.stringify(state)}
-        </pre>
-      </div>
+        <div className="heading">
+          <span className={`mode mode-${state.mode}`}>Mode: {state.mode}</span>
+          <div>
+            <span className="timer">{Math.round(state.timeUntilNextMode ?? 0)}s ⏱️</span>
+          </div>
+        </div>
+        <div>
+          Current state: <pre>
+            {JSON.stringify(state, null, 4)}
+          </pre>
+        </div>
 
-    </div>
-  );
+      </div>
+    }
+  </div>;
 }
 
 export default TVMode;