From bc9bce0d2cd0f5fc960c3c863b3f5c8859145282 Mon Sep 17 00:00:00 2001
From: nickofolas <nickofolas@gmail.com>
Date: Mon, 9 May 2022 17:50:45 -0500
Subject: [PATCH 1/3] Tweaks to classes

---
 src/ui/React/LogBoxManager.tsx | 32 +++++++++-----------------------
 1 file changed, 9 insertions(+), 23 deletions(-)

diff --git a/src/ui/React/LogBoxManager.tsx b/src/ui/React/LogBoxManager.tsx
index 3f3937e9a..6b63d7891 100644
--- a/src/ui/React/LogBoxManager.tsx
+++ b/src/ui/React/LogBoxManager.tsx
@@ -18,6 +18,7 @@ import { Theme } from "@mui/material";
 import { findRunningScript } from "../../Script/ScriptHelpers";
 import { Player } from "../../Player";
 import { debounce } from "lodash";
+import { Settings } from "../../Settings/Settings";
 
 let layerCounter = 0;
 
@@ -77,7 +78,7 @@ interface IProps {
   onClose: () => void;
 }
 
-const useStyles = makeStyles((theme: Theme) =>
+const useStyles = makeStyles((_theme: Theme) =>
   createStyles({
     title: {
       "&.is-minimized + *": {
@@ -93,26 +94,11 @@ const useStyles = makeStyles((theme: Theme) =>
       overflowY: "scroll",
       overflowX: "hidden",
       scrollbarWidth: "auto",
-      display: "flex",
       flexDirection: "column-reverse",
     },
     titleButton: {
-      padding: "1px 6px",
-    },
-    success: {
-      color: theme.colors.success,
-    },
-    error: {
-      color: theme.palette.error.main,
-    },
-    primary: {
-      color: theme.palette.primary.main,
-    },
-    info: {
-      color: theme.palette.info.main,
-    },
-    warning: {
-      color: theme.palette.warning.main,
+      padding: "1px 0",
+      height: "100%",
     },
   }),
 );
@@ -192,18 +178,18 @@ function LogWindow(props: IProps): React.ReactElement {
 
   function lineClass(s: string): string {
     if (s.match(/(^\[[^\]]+\] )?ERROR/) || s.match(/(^\[[^\]]+\] )?FAIL/)) {
-      return classes.error;
+      return Settings.theme.error;
     }
     if (s.match(/(^\[[^\]]+\] )?SUCCESS/)) {
-      return classes.success;
+      return Settings.theme.success;
     }
     if (s.match(/(^\[[^\]]+\] )?WARN/)) {
-      return classes.warning;
+      return Settings.theme.warning;
     }
     if (s.match(/(^\[[^\]]+\] )?INFO/)) {
-      return classes.info;
+      return Settings.theme.info;
     }
-    return classes.primary;
+    return Settings.theme.primary;
   }
 
   // And trigger fakeDrag when the window is resized

From d4e97d786c3a4afc0c52728b07527880095e12d5 Mon Sep 17 00:00:00 2001
From: nickofolas <nickofolas@gmail.com>
Date: Mon, 9 May 2022 18:15:23 -0500
Subject: [PATCH 2/3] Various log box improvements

---
 src/ui/React/LogBoxManager.tsx | 130 ++++++++++++++++++---------------
 1 file changed, 73 insertions(+), 57 deletions(-)

diff --git a/src/ui/React/LogBoxManager.tsx b/src/ui/React/LogBoxManager.tsx
index 6b63d7891..357209ef9 100644
--- a/src/ui/React/LogBoxManager.tsx
+++ b/src/ui/React/LogBoxManager.tsx
@@ -80,21 +80,12 @@ interface IProps {
 
 const useStyles = makeStyles((_theme: Theme) =>
   createStyles({
-    title: {
-      "&.is-minimized + *": {
-        border: "none",
-        margin: 0,
-        "max-height": 0,
-        padding: 0,
-        "pointer-events": "none",
-        visibility: "hidden",
-      },
-    },
     logs: {
       overflowY: "scroll",
       overflowX: "hidden",
       scrollbarWidth: "auto",
       flexDirection: "column-reverse",
+      whiteSpace: "pre-wrap",
     },
     titleButton: {
       padding: "1px 0",
@@ -176,7 +167,7 @@ function LogWindow(props: IProps): React.ReactElement {
     setMinimized(!minimized);
   }
 
-  function lineClass(s: string): string {
+  function lineColor(s: string): string {
     if (s.match(/(^\[[^\]]+\] )?ERROR/) || s.match(/(^\[[^\]]+\] )?FAIL/)) {
       return Settings.theme.error;
     }
@@ -228,74 +219,99 @@ function LogWindow(props: IProps): React.ReactElement {
     if (e.clientX < 0 || e.clientY < 0 || e.clientX > innerWidth || e.clientY > innerHeight) return false;
   };
 
+  // Max [width, height]
+  const minConstraints: [number, number] = [250, 33];
+
   return (
-    <Draggable handle=".drag" onDrag={boundToBody} ref={rootRef}>
-      <Paper
-        style={{
-          display: "flex",
+    <Draggable handle=".drag" onDrag={boundToBody} ref={rootRef} onMouseDown={updateLayer}>
+      <Box
+        display="flex"
+        sx={{
           flexFlow: "column",
           position: "fixed",
           left: "40%",
           top: "30%",
           zIndex: 1400,
+          minWidth: `${minConstraints[0]}px`,
+          minHeight: `${minConstraints[1]}px`,
+          ...(minimized
+            ? {
+                border: "none",
+                margin: 0,
+                maxHeight: 0,
+                padding: 0,
+              }
+            : {
+                border: `1px solid ${Settings.theme.welllight}`,
+              }),
         }}
         ref={container}
       >
-        <div onMouseDown={updateLayer}>
-          <Paper
-            className={classes.title + " " + (minimized ? "is-minimized" : "")}
-            style={{
-              cursor: "grab",
-            }}
-          >
-            <Box className="drag" display="flex" alignItems="center" ref={draggableRef}>
-              <Typography color="primary" variant="h6" sx={{ marginRight: "auto" }} title={title(true)}>
-                {title()}
+        <ResizableBox
+          height={500}
+          width={500}
+          minConstraints={minConstraints}
+          handle={
+            <span
+              style={{
+                position: "absolute",
+                right: "-10px",
+                bottom: "-13px",
+                cursor: "nw-resize",
+                display: minimized ? "none" : "inline-block",
+              }}
+            >
+              <ArrowForwardIosIcon color="primary" style={{ transform: "rotate(45deg)", fontSize: "1.75rem" }} />
+            </span>
+          }
+        >
+          <>
+            <Paper className="drag" sx={{ display: "flex", alignItems: "center", cursor: "grab" }} ref={draggableRef}>
+              <Typography
+                variant="h6"
+                sx={{ marginRight: "auto", textOverflow: "ellipsis", whiteSpace: "nowrap", overflow: "hidden" }}
+                title={title(true)}
+              >
+                {title(true)}
               </Typography>
 
-              {!workerScripts.has(script.pid) ? (
-                <Button className={classes.titleButton} onClick={run} onTouchEnd={run}>
-                  Run
+              <span style={{ minWidth: "fit-content", height: `${minConstraints[1]}px` }}>
+                {!workerScripts.has(script.pid) ? (
+                  <Button className={classes.titleButton} onClick={run} onTouchEnd={run}>
+                    Run
+                  </Button>
+                ) : (
+                  <Button className={classes.titleButton} onClick={kill} onTouchEnd={kill}>
+                    Kill
+                  </Button>
+                )}
+                <Button className={classes.titleButton} onClick={minimize} onTouchEnd={minimize}>
+                  {minimized ? "\u{1F5D6}" : "\u{1F5D5}"}
                 </Button>
-              ) : (
-                <Button className={classes.titleButton} onClick={kill} onTouchEnd={kill}>
-                  Kill
+                <Button className={classes.titleButton} onClick={props.onClose} onTouchEnd={props.onClose}>
+                  Close
                 </Button>
-              )}
-              <Button className={classes.titleButton} onClick={minimize} onTouchEnd={minimize}>
-                {minimized ? "\u{1F5D6}" : "\u{1F5D5}"}
-              </Button>
-              <Button className={classes.titleButton} onClick={props.onClose} onTouchEnd={props.onClose}>
-                Close
-              </Button>
-            </Box>
-          </Paper>
-          <Paper sx={{ overflow: "scroll", overflowWrap: "break-word", whiteSpace: "pre-wrap" }}>
-            <ResizableBox
+              </span>
+            </Paper>
+
+            <Paper
               className={classes.logs}
-              height={500}
-              width={500}
-              minConstraints={[250, 30]}
-              handle={
-                <span style={{ position: "absolute", right: "-10px", bottom: "-13px", cursor: "nw-resize" }}>
-                  <ArrowForwardIosIcon color="primary" style={{ transform: "rotate(45deg)" }} />
-                </span>
-              }
+              sx={{ height: `calc(100% - ${minConstraints[1]}px)`, display: minimized ? "none" : "flex" }}
             >
-              <Box>
+              <span style={{ display: "flex", flexDirection: "column" }}>
                 {script.logs.map(
                   (line: string, i: number): JSX.Element => (
-                    <Typography key={i} className={lineClass(line)}>
+                    <Typography key={i} sx={{ color: lineColor(line) }}>
                       {line}
                       <br />
                     </Typography>
                   ),
                 )}
-              </Box>
-            </ResizableBox>
-          </Paper>
-        </div>
-      </Paper>
+              </span>
+            </Paper>
+          </>
+        </ResizableBox>
+      </Box>
     </Draggable>
   );
 }

From dd949697dfb2d5308a7504f3068de402275e62eb Mon Sep 17 00:00:00 2001
From: nickofolas <nickofolas@gmail.com>
Date: Mon, 9 May 2022 19:26:20 -0500
Subject: [PATCH 3/3] Fix handle position

---
 src/ui/React/LogBoxManager.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ui/React/LogBoxManager.tsx b/src/ui/React/LogBoxManager.tsx
index 357209ef9..21839a23b 100644
--- a/src/ui/React/LogBoxManager.tsx
+++ b/src/ui/React/LogBoxManager.tsx
@@ -256,7 +256,7 @@ function LogWindow(props: IProps): React.ReactElement {
               style={{
                 position: "absolute",
                 right: "-10px",
-                bottom: "-13px",
+                bottom: "-16px",
                 cursor: "nw-resize",
                 display: minimized ? "none" : "inline-block",
               }}