From 11e4f6074dfddec7d9b9d1298421362998e9f17b Mon Sep 17 00:00:00 2001
From: Sylvie Crowe <107814465+oneirocosm@users.noreply.github.com>
Date: Fri, 6 Sep 2024 04:15:42 -0700
Subject: [PATCH] Input Modal Fixes (#336)

A couple small things:
- make the timer more robust in case of a timing issue where the timer
skips 0
- make the x button in the corner work
- style the title to stand out

The title will need more styling in the future, but this is still an
improvement.
---
 frontend/app/modals/userinputmodal.less | 6 ++++++
 frontend/app/modals/userinputmodal.tsx  | 7 +++----
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/frontend/app/modals/userinputmodal.less b/frontend/app/modals/userinputmodal.less
index 18b17ac8..8cdb338c 100644
--- a/frontend/app/modals/userinputmodal.less
+++ b/frontend/app/modals/userinputmodal.less
@@ -1,6 +1,12 @@
 // Copyright 2024, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
+.userinput-header {
+    font-weight: bold;
+    color: var(--main-text-color);
+    padding-bottom: 10px;
+}
+
 .userinput-body {
     display: flex;
     flex-direction: column;
diff --git a/frontend/app/modals/userinputmodal.tsx b/frontend/app/modals/userinputmodal.tsx
index c01b4e9b..d3f40af2 100644
--- a/frontend/app/modals/userinputmodal.tsx
+++ b/frontend/app/modals/userinputmodal.tsx
@@ -14,7 +14,6 @@ const UserInputModal = (userInputRequest: UserInputRequest) => {
     const [responseText, setResponseText] = useState("");
     const [countdown, setCountdown] = useState(Math.floor(userInputRequest.timeoutms / 1000));
     const checkboxStatus = useRef(false);
-    const queryTextAtom = useState;
 
     const handleSendCancel = useCallback(() => {
         UserInputService.SendUserInputResponse({
@@ -96,7 +95,7 @@ const UserInputModal = (userInputRequest: UserInputRequest) => {
 
     useEffect(() => {
         let timeout: ReturnType<typeof setTimeout>;
-        if (countdown == 0) {
+        if (countdown <= 0) {
             timeout = setTimeout(() => {
                 handleSendCancel();
             }, 300);
@@ -109,9 +108,9 @@ const UserInputModal = (userInputRequest: UserInputRequest) => {
     }, [countdown]);
 
     return (
-        <Modal onOk={() => handleSubmit()} onCancel={() => handleSendCancel()}>
+        <Modal onOk={() => handleSubmit()} onCancel={() => handleSendCancel()} onClose={() => handleSendCancel()}>
+            <div className="userinput-header">{userInputRequest.title + ` (${countdown}s)`}</div>
             <div className="userinput-body">
-                {userInputRequest.title + ` (${countdown}s)`}
                 {queryText}
                 {inputBox}
             </div>