Disabled level selection buttons if they've not been unlocked (#329)

Plus additional button styling tweaks and fixes --------- Co-authored-by: Chris Wilton-Magras <[email protected]>
ScottLogic · Oct 13, 2023 · 2be6388 · 2be6388
1 parent 480c212
commit 2be6388
Show file tree

Hide file tree

Showing 19 changed files with 218 additions and 195 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -14,6 +14,7 @@
     "@cyntler/react-doc-viewer": "^1.13.0",
     "@mui/material": "^5.14.8",
     "@react-pdf/renderer": "^3.1.12",
+    "classnames": "^2.3.2",
     "react": "^18.2.0",
     "react-contenteditable": "^3.3.7",
     "react-dom": "^18.2.0",

diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -34,15 +34,6 @@
   background-color: var(--main-scrollbar-hover-colour);
 }
 
-.prompt-injection-button {
-  background-color: var(--main-button-inactive-background-colour);
-  border: 1px solid var(--main-border-colour);
-  border-radius: 5px;
-  color: var(--main-button-inactive-text-colour);
-  cursor: pointer;
-  white-space: nowrap;
-}
-
 .prompt-injection-min-button {
   /* remove default button styling */
   background-color: transparent;
@@ -62,13 +53,3 @@
   text-decoration: none;
   cursor: pointer;
 }
-
-.prompt-injection-button:hover:not([disabled]) {
-  background-color: var(--main-button-hover-background-colour);
-  color: var(--main-button-hover-text-colour);
-}
-
-.prompt-injection-button:active {
-  background-color: var(--main-button-active-background-colour);
-  color: var(--main-button-active-text-colour);
-}
diff --git a/frontend/src/Theme.css b/frontend/src/Theme.css
@@ -15,7 +15,12 @@
   --main-button-active-text-colour: var(--main-text-colour);
   --main-button-inactive-background-colour: #313131;
   --main-button-inactive-text-colour: var(--main-text-colour);
-  --main-button-hover-background-colour: #555555;
+  --main-button-disabled-background-colour: #888888;
+  --main-button-disabled-text-colour: #111111;
+  --main-button-active-hover-background-colour: #00aaaa;
+  --main-button-active-hover-text-colour: var(--main-text-colour);
+  --main-button-inactive-hover-background-colour: #555555;
+  --main-button-inactive-hover-text-colour: var(--main-text-colour);
   --main-button-hover-text-colour: var(--main-text-colour);
   --main-button-hover-border-colour: white;
 

diff --git a/frontend/src/components/ChatBox/ChatBox.css b/frontend/src/components/ChatBox/ChatBox.css
@@ -1,12 +1,12 @@
-#chat-box {
+.chat-box {
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   width: 100%;
   height: 100%;
 }
 
-#chat-box-footer {
+.chat-box .footer {
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -15,58 +15,45 @@
   box-sizing: border-box;
 }
 
-#chat-box-footer-messages {
+.chat-box .footer .messages {
   display: flex;
   flex-direction: row;
   align-items: flex-end;
+  gap: 0.5rem;
   width: 100%;
 }
 
-.chat-box-input {
-  text-align: left;
-  padding: 18px 12px;
-  width: 85%;
-  height: 100%;
-  align-self: flex-end;
-  justify-content: center;
+.chat-box .footer .messages .chat-box-input {
   box-sizing: border-box;
-  resize: none;
-  background-color: inherit;
   border-radius: 0.25rem;
-  min-height: 53px;
+  padding: 1rem 0.75rem;
+  height: 100%;
+  min-height: 4rem;
+  flex: 1 1 auto;
+  resize: none;
   overflow-y: auto;
-
+  background-color: inherit;
   /* must inherit to override textarea */
   font-size: inherit;
   font-family: inherit;
   color: white;
 }
 
-#chat-box-button-send {
-  width: 15%;
-  height: 100%;
-  max-height: 53px;
-  margin-left: 8px;
-}
-
-#chat-box-button-content {
+.chat-box .footer .messages .send-button-wrapper {
   display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: 40%;
-  width: 100%;
+  justify-content: stretch;
+  align-items: stretch;
+  height: 100%;
+  max-height: 3.25rem;
 }
 
-#control-buttons {
+.chat-box .footer .control-buttons {
   display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  height: 34px;
-  min-height: 34px;
-  padding-top: 20px;
+  height: 2rem;
+  margin-top: 20px;
+  column-gap: 1rem;
 }
 
-.control-button {
-  width: 46%;
+.chat-box .footer .control-buttons > * {
+  flex: 1 1 0;
 }
diff --git a/frontend/src/components/ChatBox/ChatBox.tsx b/frontend/src/components/ChatBox/ChatBox.tsx
@@ -1,5 +1,4 @@
-import { useEffect, useRef, useState } from "react";
-import { ThreeDots } from "react-loader-spinner";
+import { KeyboardEvent, useEffect, useRef, useState } from "react";
 import { DEFENCE_DETAILS_ALL } from "../../Defences";
 import {
   CHAT_MESSAGE_TYPE,
@@ -15,6 +14,8 @@ import {
 import { getSentEmails } from "../../service/emailService";
 import { getLevelPrompt } from "../../service/levelService";
 import ExportPDFLink from "../ExportChat/ExportPDFLink";
+import ThemedButton from "../ThemedButtons/ThemedButton";
+import LoadingButton from "../ThemedButtons/LoadingButton";
 import ChatBoxFeed from "./ChatBoxFeed";
 
 import "./ChatBox.css";
@@ -79,13 +80,13 @@ function ChatBox({
     }
   }
 
-  function inputKeyDown(event: React.KeyboardEvent<HTMLTextAreaElement>) {
+  function inputKeyDown(event: KeyboardEvent<HTMLTextAreaElement>) {
     if (event.key === "Enter" && !event.shiftKey) {
       event.preventDefault();
     }
   }
 
-  function inputKeyUp(event: React.KeyboardEvent<HTMLTextAreaElement>) {
+  function inputKeyUp(event: KeyboardEvent<HTMLTextAreaElement>) {
     // shift+enter shouldn't send message
     if (event.key === "Enter" && !event.shiftKey) {
       // asynchronously send the message
@@ -212,10 +213,10 @@ function ChatBox({
     }
   }
   return (
-    <div id="chat-box">
+    <div className="chat-box">
       <ChatBoxFeed messages={messages} />
-      <div id="chat-box-footer">
-        <div id="chat-box-footer-messages">
+      <div className="footer">
+        <div className="messages">
           <textarea
             ref={textareaRef}
             className="chat-box-input"
@@ -227,36 +228,24 @@ function ChatBox({
             // eslint-disable-next-line jsx-a11y/no-autofocus
             autoFocus
           />
-          <button
-            id="chat-box-button-send"
-            className="prompt-injection-button"
-            disabled={isSendingMessage}
-            onClick={() => void sendChatMessage()}
-          >
-            <span id="chat-box-button-content">
-              {isSendingMessage ? (
-                <ThreeDots width="24px" color="white" />
-              ) : (
-                "Send"
-              )}
-            </span>
-          </button>
+
+          <span className="send-button-wrapper">
+            <LoadingButton
+              onClick={() => void sendChatMessage()}
+              isLoading={isSendingMessage}
+            >
+              Send
+            </LoadingButton>
+          </span>
         </div>
 
-        <div id="control-buttons">
-          <div className="control-button">
-            <ExportPDFLink
-              messages={messages}
-              emails={emails}
-              currentLevel={currentLevel}
-            />
-          </div>
-          <button
-            className="prompt-injection-button control-button"
-            onClick={resetLevel}
-          >
-            Reset
-          </button>
+        <div className="control-buttons">
+          <ExportPDFLink
+            messages={messages}
+            emails={emails}
+            currentLevel={currentLevel}
+          />
+          <ThemedButton onClick={resetLevel}>Reset</ThemedButton>
         </div>
       </div>
     </div>

diff --git a/frontend/src/components/DefenceBox/DefenceConfiguration.tsx b/frontend/src/components/DefenceBox/DefenceConfiguration.tsx
@@ -1,5 +1,6 @@
 import { FocusEvent, KeyboardEvent } from "react";
 import ContentEditable from "react-contenteditable";
+import * as classNames from "classnames";
 import { DefenceConfig } from "../../models/defence";
 
 import "./DefenceConfiguration.css";
@@ -34,13 +35,15 @@ function DefenceConfiguration({
     void setConfigurationValue(config.id, value);
   }
 
-  const classname = `defence-config-value${isActive ? "" : " inactive"}`;
+  const configClass = classNames("defence-config-value", {
+    inactive: !isActive,
+  });
 
   return (
     <div>
       <span className="defence-config-name">{config.name}: </span>
       <ContentEditable
-        className={classname}
+        className={configClass}
         html={config.value.toString()}
         onBlur={focusLost}
         onKeyDown={inputKeyDown}

diff --git a/frontend/src/components/DocumentViewer/DocumentViewBox.tsx b/frontend/src/components/DocumentViewer/DocumentViewBox.tsx
@@ -7,10 +7,10 @@ import { RemoteDocument } from "../../models/document";
 
 function DocumentViewBox({
   show,
-  setShow,
+  onClose,
 }: {
   show: boolean;
-  setShow: React.Dispatch<React.SetStateAction<boolean>>;
+  onClose: () => void;
 }) {
   const [documents, setDocuments] = useState<RemoteDocument[]>([]);
   // on mount get document uris
@@ -29,9 +29,7 @@ function DocumentViewBox({
       <div className="document-popup-inner">
         <button
           className="prompt-injection-min-button close-button"
-          onClick={() => {
-            setShow(false);
-          }}
+          onClick={onClose}
           aria-label="close document viewer"
         >
           X
@@ -50,9 +48,7 @@ function DocumentViewBox({
         </div>
       </div>
     </div>
-  ) : (
-    ""
-  );
+  ) : null;
 }
 
 export default DocumentViewBox;
diff --git a/frontend/src/components/DocumentViewer/DocumentViewButton.css b/frontend/src/components/DocumentViewer/DocumentViewButton.css
@@ -1,19 +1,9 @@
-#document-view-button-area {
-  padding-top: 20px;
-  padding-bottom: 20px;
-  text-align: center;
+.document-view-button-wrapper {
+  display: flex;
+  padding-top: 0.5rem;
   height: 40px;
-  min-height: 40px;
 }
-
-.document-view-button {
-  background-color: var(--main-button-inactive-background-colour);
-  border-color: var(--main-border-colour);
-  border-radius: 5px;
-  border-style: solid;
-  border-width: 1px;
-  color: var(--main-button-inactive-text-colour);
-  cursor: pointer;
-  font-size: 1rem;
-  padding: 5 12px;
+/* Button fills all available width */
+.document-view-button-wrapper button {
+  flex-grow: 1;
 }
diff --git a/frontend/src/components/DocumentViewer/DocumentViewButton.tsx b/frontend/src/components/DocumentViewer/DocumentViewButton.tsx
@@ -1,3 +1,4 @@
+import ThemedButton from "../ThemedButtons/ThemedButton";
 import DocumentViewBox from "./DocumentViewBox";
 
 import "./DocumentViewButton.css";
@@ -7,16 +8,20 @@ function DocumentViewButton() {
   const [showPopup, setShowPopup] = useState(false);
 
   return (
-    <div id="document-view-button-area">
-      <button
-        className="document-view-button"
+    <div className="document-view-button-wrapper">
+      <ThemedButton
         onClick={() => {
           setShowPopup(true);
         }}
       >
         View Documents
-      </button>
-      <DocumentViewBox show={showPopup} setShow={setShowPopup} />
+      </ThemedButton>
+      <DocumentViewBox
+        show={showPopup}
+        onClose={() => {
+          setShowPopup(false);
+        }}
+      />
     </div>
   );
 }