From 2be63883df6d14d0ee19cce4c06987bd662df95a Mon Sep 17 00:00:00 2001
From: George Sproston
 <103250539+gsproston-scottlogic@users.noreply.github.com>
Date: Fri, 13 Oct 2023 15:16:04 +0100
Subject: [PATCH] Disabled level selection buttons if they've not been unlocked
 (#329)

Plus additional button styling tweaks and fixes

---------
Co-authored-by: Chris Wilton-Magras <chriswilty@zoho.com>
---
 frontend/package-lock.json                    |  6 ++
 frontend/package.json                         |  1 +
 frontend/src/App.css                          | 19 ------
 frontend/src/Theme.css                        |  7 ++-
 frontend/src/components/ChatBox/ChatBox.css   | 57 +++++++-----------
 frontend/src/components/ChatBox/ChatBox.tsx   | 59 ++++++++-----------
 .../DefenceBox/DefenceConfiguration.tsx       |  7 ++-
 .../DocumentViewer/DocumentViewBox.tsx        | 12 ++--
 .../DocumentViewer/DocumentViewButton.css     | 22 ++-----
 .../DocumentViewer/DocumentViewButton.tsx     | 15 +++--
 .../components/ExportChat/ExportPDFLink.css   | 17 ++----
 .../components/ExportChat/ExportPDFLink.tsx   |  4 +-
 .../LevelSelectionBox/LevelSelectionBox.css   | 18 +-----
 .../LevelSelectionBox/LevelSelectionBox.tsx   | 11 ++--
 .../components/ModelBox/ModelSelection.css    | 46 ++++++++-------
 .../components/ModelBox/ModelSelection.tsx    | 26 +++-----
 .../ThemedButtons/LoadingButton.tsx           | 24 ++++++++
 .../components/ThemedButtons/ThemedButton.css | 35 +++++++++++
 .../components/ThemedButtons/ThemedButton.tsx | 27 +++++++++
 19 files changed, 218 insertions(+), 195 deletions(-)
 create mode 100644 frontend/src/components/ThemedButtons/LoadingButton.tsx
 create mode 100644 frontend/src/components/ThemedButtons/ThemedButton.css
 create mode 100644 frontend/src/components/ThemedButtons/ThemedButton.tsx

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index c65f21c6c..ba623df27 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -11,6 +11,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",
@@ -2483,6 +2484,11 @@
         "node": ">=6.0"
       }
     },
+    "node_modules/classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+    },
     "node_modules/clone": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index ec4f409d4..004ff97dc 100644
--- 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
index 121cd06e0..58c508138 100644
--- 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
index 83280eaa7..7112d9a5d 100644
--- 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
index 90f24698d..089f84689 100644
--- a/frontend/src/components/ChatBox/ChatBox.css
+++ b/frontend/src/components/ChatBox/ChatBox.css
@@ -1,4 +1,4 @@
-#chat-box {
+.chat-box {
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
@@ -6,7 +6,7 @@
   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
index 7addddb6d..88aea43e5 100644
--- 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
index 554e24fd3..da88028e7 100644
--- 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
index 983b232ce..80648fbb5 100644
--- 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
index 4f55a2b15..393f6a878 100644
--- 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
index 974217c40..a18ae982e 100644
--- 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>
   );
 }
diff --git a/frontend/src/components/ExportChat/ExportPDFLink.css b/frontend/src/components/ExportChat/ExportPDFLink.css
index 8330dd528..5bfdc4d2b 100644
--- a/frontend/src/components/ExportChat/ExportPDFLink.css
+++ b/frontend/src/components/ExportChat/ExportPDFLink.css
@@ -1,16 +1,11 @@
-#export-chat-box {
-  text-align: center;
-  height: 100%;
-  width: 100%;
-}
-
-a {
-  padding: 5 12px;
+#export-chat-box a {
   color: var(--main-button-inactive-text-colour);
   text-decoration: none;
-}
-
-button {
+  /* fill the entire space */
   height: 100%;
   width: 100%;
+  /* vertically centre text */
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
diff --git a/frontend/src/components/ExportChat/ExportPDFLink.tsx b/frontend/src/components/ExportChat/ExportPDFLink.tsx
index a597ab612..d205db703 100644
--- a/frontend/src/components/ExportChat/ExportPDFLink.tsx
+++ b/frontend/src/components/ExportChat/ExportPDFLink.tsx
@@ -24,7 +24,7 @@ function ExportPDFLink({
   }
 
   return (
-    <div id="export-chat-box">
+    <div id="export-chat-box" className="themed-button">
       <PDFDownloadLink
         document={
           <ExportContent
@@ -35,7 +35,7 @@ function ExportPDFLink({
         }
         fileName={getFileName()}
       >
-        <button className="prompt-injection-button">Export</button>
+        Export
       </PDFDownloadLink>{" "}
     </div>
   );
diff --git a/frontend/src/components/LevelSelectionBox/LevelSelectionBox.css b/frontend/src/components/LevelSelectionBox/LevelSelectionBox.css
index 825caa724..62e633759 100644
--- a/frontend/src/components/LevelSelectionBox/LevelSelectionBox.css
+++ b/frontend/src/components/LevelSelectionBox/LevelSelectionBox.css
@@ -2,20 +2,6 @@
   position: relative;
   display: flex;
   justify-content: center;
-  align-items: center;
-}
-
-.level-selection-button {
-  margin: 5px;
-  padding: 5px 5px;
-}
-
-.selected {
-  color: var(--main-button-active-text-colour);
-  background-color: var(--main-button-active-background-colour);
-}
-
-.selected:hover {
-  color: var(--main-button-active-text-colour);
-  background-color: var(--main-button-active-background-colour);
+  align-items: stretch;
+  gap: 0.5rem;
 }
diff --git a/frontend/src/components/LevelSelectionBox/LevelSelectionBox.tsx b/frontend/src/components/LevelSelectionBox/LevelSelectionBox.tsx
index b29228063..62026d310 100644
--- a/frontend/src/components/LevelSelectionBox/LevelSelectionBox.tsx
+++ b/frontend/src/components/LevelSelectionBox/LevelSelectionBox.tsx
@@ -2,6 +2,7 @@ import { Level, LEVEL_NAMES } from "../../models/level";
 import { LEVELS } from "../../Levels";
 
 import "./LevelSelectionBox.css";
+import ThemedButton from "../ThemedButtons/ThemedButton";
 
 function LevelSelectionBox({
   currentLevel,
@@ -24,20 +25,18 @@ function LevelSelectionBox({
       <div id="level-selection-box">
         {LEVELS.map((level: Level, index: number) => {
           return (
-            <button
-              className={`prompt-injection-button level-selection-button ${
-                level.id === currentLevel ? "selected" : ""
-              }`}
+            <ThemedButton
               key={level.name}
               onClick={() => {
                 handleLevelChange(level.id);
               }}
-              disabled={
+              isDisabled={
                 index > numCompletedLevels && level.id !== LEVEL_NAMES.SANDBOX
               }
+              isSelected={level.id === currentLevel}
             >
               {level.name}
-            </button>
+            </ThemedButton>
           );
         })}
       </div>
diff --git a/frontend/src/components/ModelBox/ModelSelection.css b/frontend/src/components/ModelBox/ModelSelection.css
index 97eb96c5c..2c25d9f46 100644
--- a/frontend/src/components/ModelBox/ModelSelection.css
+++ b/frontend/src/components/ModelBox/ModelSelection.css
@@ -1,43 +1,45 @@
-#model-selection-row {
+.model-selection-box {
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.model-selection-box .model-selection-row {
   display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem 0.5rem;
   align-items: center;
-  justify-content: space-between;
-  padding: 10px;
 }
 
-#model-selection-row #text-area {
-  max-width: 30%;
+.model-selection-box .model-selection-row p {
+  flex: 1 1 auto;
+  margin: 0;
 }
 
-#model-selection-row #menu-area {
-  min-width: 50%;
+.model-selection-box .model-selection-row .select-wrapper {
+  display: flex;
+  gap: 0.25rem 0.5rem;
+  flex-wrap: wrap;
+  flex: 1 1 auto;
 }
 
-#model-selection-row #button-area {
-  min-width: 20%;
+.model-selection-box .model-selection-row select {
+  flex: 1 1 auto;
+  padding: 0.5rem;
 }
 
-#model-selection-info {
+.model-selection-box .model-selection-info {
   align-items: center;
   text-align: center;
 }
 
-#model-selection-info p {
+.model-selection-box .model-selection-info p {
   margin: 0;
   padding: 0;
   color: var(--main-accent-colour);
 }
 
-#p error {
+.model-selection-box .model-selection-info .error {
   color: var(--main-error-colour);
 }
-
-#model-selection-menu {
-  padding: 5px;
-  width: 100%;
-}
-
-#model-selection-button {
-  padding: 5px;
-  width: 100%;
-}
diff --git a/frontend/src/components/ModelBox/ModelSelection.tsx b/frontend/src/components/ModelBox/ModelSelection.tsx
index 2f37666c2..e1ce1e5f4 100644
--- a/frontend/src/components/ModelBox/ModelSelection.tsx
+++ b/frontend/src/components/ModelBox/ModelSelection.tsx
@@ -3,6 +3,7 @@ import { useEffect, useState } from "react";
 import "./ModelSelection.css";
 import { setGptModel, getGptModel } from "../../service/chatService";
 import { CHAT_MODELS } from "../../models/chat";
+import ThemedButton from "../ThemedButtons/ThemedButton";
 
 // return a drop down menu with the models
 function ModelSelection() {
@@ -39,14 +40,11 @@ function ModelSelection() {
 
   // return a drop down menu with the models
   return (
-    <div id="model-selection-box">
-      <div id="model-selection-row">
-        <div id="text-area">
-          <p>Select a model: </p>
-        </div>
-        <div id="menu-area">
+    <div className="model-selection-box">
+      <div className="model-selection-row">
+        <p>Select model: </p>
+        <div className="select-wrapper">
           <select
-            id="model-selection-menu"
             aria-label="model-select"
             onChange={(e) => {
               setSelectedModel(e.target.value as CHAT_MODELS);
@@ -60,21 +58,15 @@ function ModelSelection() {
             ))}
             ;
           </select>
-        </div>
-        <div id="button-area">
-          <button
-            id="model-selection-button"
-            className="prompt-injection-button"
-            onClick={() => void submitSelectedModel()}
-          >
+          <ThemedButton onClick={() => void submitSelectedModel()}>
             Choose
-          </button>
+          </ThemedButton>
         </div>
       </div>
 
-      <div id="model-selection-info">
+      <div className="model-selection-info">
         {errorChangingModel ? (
-          <p id="error">
+          <p className="error">
             Could not change model. You are still chatting to:
             <b> {modelInUse} </b>
           </p>
diff --git a/frontend/src/components/ThemedButtons/LoadingButton.tsx b/frontend/src/components/ThemedButtons/LoadingButton.tsx
new file mode 100644
index 000000000..67dd4c0fd
--- /dev/null
+++ b/frontend/src/components/ThemedButtons/LoadingButton.tsx
@@ -0,0 +1,24 @@
+import { ThreeDots } from "react-loader-spinner";
+import ThemedButton, { ThemedButtonProps } from "./ThemedButton";
+
+function LoadingButton({
+  children,
+  isLoading = false,
+  ...buttonProps
+}: ThemedButtonProps & {
+  isLoading?: boolean;
+}) {
+  return (
+    <ThemedButton {...buttonProps}>
+      {isLoading ? (
+        <span className="loader">
+          <ThreeDots width="24px" color="white" />
+        </span>
+      ) : (
+        children
+      )}
+    </ThemedButton>
+  );
+}
+
+export default LoadingButton;
diff --git a/frontend/src/components/ThemedButtons/ThemedButton.css b/frontend/src/components/ThemedButtons/ThemedButton.css
new file mode 100644
index 000000000..85e8e494a
--- /dev/null
+++ b/frontend/src/components/ThemedButtons/ThemedButton.css
@@ -0,0 +1,35 @@
+.themed-button {
+  background-color: var(--main-button-inactive-background-colour);
+  border: 1px solid var(--main-border-colour);
+  border-radius: 5px;
+  padding: 0.5rem;
+  color: var(--main-button-inactive-text-colour);
+  cursor: pointer;
+  white-space: nowrap;
+  /* centre content */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.themed-button:hover:not([disabled]) {
+  background-color: var(--main-button-inactive-hover-background-colour);
+  color: var(--main-button-inactive-hover-text-colour);
+}
+
+.themed-button.selected {
+  background-color: var(--main-button-active-background-colour);
+  color: var(--main-button-active-text-colour);
+}
+
+.themed-button.selected:hover:not([disabled]) {
+  background-color: var(--main-button-active-hover-background-colour);
+  color: var(--main-button-active-hover-text-colour);
+}
+
+.themed-button[disabled] {
+  background-color: var(--main-button-disabled-background-colour);
+  color: var(--main-button-disabled-text-colour);
+  cursor: default;
+  border-color: transparent;
+}
diff --git a/frontend/src/components/ThemedButtons/ThemedButton.tsx b/frontend/src/components/ThemedButtons/ThemedButton.tsx
new file mode 100644
index 000000000..d6d58ee21
--- /dev/null
+++ b/frontend/src/components/ThemedButtons/ThemedButton.tsx
@@ -0,0 +1,27 @@
+import * as classNames from "classnames";
+import { ReactNode } from "react";
+import "./ThemedButton.css";
+
+export interface ThemedButtonProps {
+  children: ReactNode;
+  isDisabled?: boolean;
+  isSelected?: boolean;
+  onClick: () => void;
+}
+
+function ThemedButton({
+  children,
+  onClick,
+  isDisabled = false,
+  isSelected = false,
+}: ThemedButtonProps) {
+  const buttonClass = classNames("themed-button", { selected: isSelected });
+
+  return (
+    <button className={buttonClass} onClick={onClick} disabled={isDisabled}>
+      {children}
+    </button>
+  );
+}
+
+export default ThemedButton;