Move timelord into separate file, make bigger.

src/navbar/index.tsx

@@ -1,6 +1,5 @@
 import React, { useRef, useEffect, useState } from "react";
 import { shallowEqual, useDispatch, useSelector } from "react-redux";
-import Clock from "react-live-clock";
 
 import {
   FaCircle,
@@ -28,6 +27,7 @@ import { getShowplan, setItemPlayed } from "../showplanner/state";
 import * as OptionsMenuState from "../optionsMenu/state";
 import { setChannelPFL } from "../mixer/state";
 import { secToHHMM, useInterval } from "../lib/utils";
+import { Timelord } from "./timelord";
 
 function nicifyConnectionState(state: ConnectionStateEnum): string {
   switch (state) {
@@ -164,24 +164,7 @@ export function NavBarMain() {
   return (
     <>
       <ul className="nav navbar-nav navbar-left">
-        <li
-          className="btn rounded-0 py-2 nav-link nav-item"
-          id="timelord"
-          onClick={(e) => {
-            e.preventDefault();
-            window.open(
-              "http://ury.org.uk/timelord/",
-              "URY - Timelord",
-              "resizable,status"
-            );
-          }}
-        >
-          <Clock
-            format={"HH:mm:ss"}
-            ticking={true}
-            timezone={"europe/london"}
-          />
-        </li>
+        <Timelord />
         <SavingAlert />
       </ul>
       <ul className="nav navbar-nav navbar-right mr-0 pr-0">

src/navbar/navbar.scss

@@ -285,23 +285,6 @@
   }
 }
 
-#timelord {
-  background: black;
-  border: red 1px solid;
-  color: white;
-  min-width: 85px;
-}
-
-#timelord a {
-  text-decoration: none;
-  color: white;
-}
-
-#timelord .time {
-  font-weight: bold;
-  font-size: 1.1em;
-}
-
 .nav-link.connect {
   min-width: 90px;
 }

src/navbar/timelord.scss

@@ -0,0 +1,16 @@
+#timelord {
+  background: black;
+  border: red 1px solid;
+  color: white;
+  min-width: 85px;
+}
+
+#timelord a {
+  text-decoration: none;
+  color: white;
+}
+
+#timelord time {
+  font-weight: bold;
+  font-size: 1.2em;
+}

src/navbar/timelord.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import LiveClock from "react-live-clock";
+import "./timelord.scss";
+
+export function Timelord() {
+  return (
+    <li
+      className="btn rounded-0 py-2 nav-link nav-item"
+      id="timelord"
+      onClick={(e) => {
+        e.preventDefault();
+        window.open(
+          "http://ury.org.uk/timelord/",
+          "URY - Timelord",
+          "resizable,status"
+        );
+      }}
+    >
+      <LiveClock
+        format={"HH:mm:ss"}
+        ticking={true}
+        timezone={"europe/london"}
+      />
+    </li>
+  );
+}

src/showplanner/index.tsx

@@ -506,7 +506,7 @@ const Showplanner: React.FC<{ timeslotId: number }> = function({ timeslotId }) {
         isOpen={showWelcomeModal}
         close={() => setShowWelcomeModal(false)}
       />
-      <PisModal close={() => setShowPisModal(false)} isOpen={showPisModal} />
+
       <MicLiveIndicator />
     </div>
   );