From f5c531656508acb718e7f7490b6aa11ef32f6136 Mon Sep 17 00:00:00 2001
From: George Sproston <gsproston@scottlogic.com>
Date: Fri, 1 Sep 2023 14:07:59 +0100
Subject: [PATCH 1/8] Moved export and reset buttons

---
 frontend/src/components/ChatBox/ChatBox.tsx   | 24 +++---------
 frontend/src/components/EmailBox/EmailBox.css |  5 +--
 .../components/ExportChat/ExportPDFLink.css   |  9 ++---
 .../components/ExportChat/ExportPDFLink.tsx   |  2 +-
 .../src/components/MainComponent/DemoBody.css | 14 +++++++
 .../src/components/MainComponent/DemoBody.tsx | 37 ++++++++++++++++---
 .../ModelSelectionBox/ModelSelectionBox.css   |  4 +-
 .../components/StrategyBox/StrategyBox.css    |  4 +-
 8 files changed, 61 insertions(+), 38 deletions(-)

diff --git a/frontend/src/components/ChatBox/ChatBox.tsx b/frontend/src/components/ChatBox/ChatBox.tsx
index 01e4a3b32..c2c7f000f 100644
--- a/frontend/src/components/ChatBox/ChatBox.tsx
+++ b/frontend/src/components/ChatBox/ChatBox.tsx
@@ -18,21 +18,22 @@ import { DEFENCE_DETAILS_ALL } from "../../Defences";
 function ChatBox(
   {
     messages,
+    completedPhases,
     currentPhase,
     addChatMessage,
-    resetPhase,
+    addCompletedPhase,
     setNumCompletedPhases,
     setEmails,
   }: {
     messages: ChatMessage[];
+    completedPhases: Set<PHASE_NAMES>;
     currentPhase: PHASE_NAMES;
     addChatMessage: (message: ChatMessage) => void;
-    resetPhase: () => void;
+    addCompletedPhase: (phase: PHASE_NAMES) => void;
     setNumCompletedPhases: (numCompletedPhases: number) => void;
     setEmails: (emails: EmailInfo[]) => void;
   }
 ) {
-  const [completedPhases, setCompletedPhases] = useState<Set<PHASE_NAMES>>(new Set());
   const [isSendingMessage, setIsSendingMessage] = useState<boolean>(false);
 
   // called on mount
@@ -49,12 +50,6 @@ function ChatBox(
     }
   }
 
-  function resetButtonPressed() {
-    completedPhases.delete(currentPhase);
-    setCompletedPhases(completedPhases);
-    resetPhase();
-  }
-
   async function sendChatMessage() {
     const inputBoxElement = document.getElementById(
       "chat-box-input"
@@ -144,7 +139,7 @@ function ChatBox(
       setEmails(sentEmails);
 
       if (response.wonPhase && !completedPhases.has(currentPhase)) {
-        setCompletedPhases(completedPhases.add(currentPhase));
+        addCompletedPhase(currentPhase);
         const successMessage =
           "Congratulations! You have completed this phase. Please click on the next phase to continue.";
         addChatMessage({
@@ -180,15 +175,6 @@ function ChatBox(
             Send
           </button>
         </div>
-        <div id="chat-box-footer-reset">
-          <button
-            id="chat-box-button-reset"
-            className="prompt-injection-button"
-            onClick={resetButtonPressed}
-          >
-            Reset phase
-          </button>
-        </div>
       </div>
     </div>
   );
diff --git a/frontend/src/components/EmailBox/EmailBox.css b/frontend/src/components/EmailBox/EmailBox.css
index 4e1b808e6..efd0d59b1 100644
--- a/frontend/src/components/EmailBox/EmailBox.css
+++ b/frontend/src/components/EmailBox/EmailBox.css
@@ -10,6 +10,5 @@
   flex-direction: column-reverse;
   flex-grow: 1;
   overflow-y: auto;
-  padding: 0 40px;
-  padding-bottom: 40px;
-}
+  padding: 32px 8px;
+}
\ No newline at end of file
diff --git a/frontend/src/components/ExportChat/ExportPDFLink.css b/frontend/src/components/ExportChat/ExportPDFLink.css
index ce5faaf64..c5b3b1835 100644
--- a/frontend/src/components/ExportChat/ExportPDFLink.css
+++ b/frontend/src/components/ExportChat/ExportPDFLink.css
@@ -1,17 +1,16 @@
 #export-chat-box {
-    margin: 15px;
-    padding-top: 20px;        
-    padding-bottom: 20px;
     text-align: center;
+    height: 100%;
+    width: 100%;
 }
 
 a {
     padding: 5 12px;
-    font-size: 16px;
     color: var(--main-button-inactive-text-colour);
     text-decoration: none;
 }
 
 button {
-    height: 30px;
+    height: 100%;
+    width: 100%;
 }
\ No newline at end of file
diff --git a/frontend/src/components/ExportChat/ExportPDFLink.tsx b/frontend/src/components/ExportChat/ExportPDFLink.tsx
index e095a74f2..d85ba0996 100644
--- a/frontend/src/components/ExportChat/ExportPDFLink.tsx
+++ b/frontend/src/components/ExportChat/ExportPDFLink.tsx
@@ -33,7 +33,7 @@ const ExportPDFLink = ({
           }
           fileName={getFileName()}
         >
-          {"Export chat history"}
+          {"Export"}
         </PDFDownloadLink>{" "}
       </button>
     </div>
diff --git a/frontend/src/components/MainComponent/DemoBody.css b/frontend/src/components/MainComponent/DemoBody.css
index f380c9236..428b1f34e 100644
--- a/frontend/src/components/MainComponent/DemoBody.css
+++ b/frontend/src/components/MainComponent/DemoBody.css
@@ -23,6 +23,7 @@
   height: 100%;
   width: 30%;
   overflow-y: auto;
+  padding: 0 30px;
 }
 
 .side-bar-header {
@@ -33,4 +34,17 @@
   margin-bottom: 10px;
   padding-bottom: 20px;
   text-align: center;
+}
+
+#control-buttons {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  height: 34px;
+  min-height: 34px;
+  padding: 32px 0;
+}
+
+.control-button {
+  width: 45%;
 }
\ No newline at end of file
diff --git a/frontend/src/components/MainComponent/DemoBody.tsx b/frontend/src/components/MainComponent/DemoBody.tsx
index 6496a96d4..433b80044 100644
--- a/frontend/src/components/MainComponent/DemoBody.tsx
+++ b/frontend/src/components/MainComponent/DemoBody.tsx
@@ -11,6 +11,7 @@ import ExportPDFLink from "../ExportChat/ExportPDFLink";
 import ModelSelectionBox from "../ModelSelectionBox/ModelSelectionBox";
 import { EmailInfo } from "../../models/email";
 import { addMessageToChatHistory } from "../../service/chatService";
+import { useState } from "react";
 
 function DemoBody({
   currentPhase,
@@ -31,6 +32,19 @@ function DemoBody({
   setEmails: (emails: EmailInfo[]) => void;
   setNumCompletedPhases: (numCompletedPhases: number) => void;
 }) {
+  const [completedPhases, setCompletedPhases] = useState<Set<PHASE_NAMES>>(new Set());
+
+  function addCompletedPhase(phase: PHASE_NAMES) {
+    completedPhases.add(phase);
+    setCompletedPhases(completedPhases);
+  }
+
+  function resetButtonClicked() {
+    completedPhases.delete(currentPhase);
+    setCompletedPhases(completedPhases);
+    resetPhase();
+  }
+
   const addInfoMessage = (message: string) => {
     addChatMessage({
       message: message,
@@ -74,20 +88,31 @@ function DemoBody({
           currentPhase === PHASE_NAMES.SANDBOX) && (
           <AttackBox attacks={ATTACKS_ALL} />
         )}
-        <ExportPDFLink
-          messages={messages}
-          emails={emails}
-          currentPhase={currentPhase}
-        />
         {/* hide model selection box on phases 0 and 1 */}
         {currentPhase === PHASE_NAMES.SANDBOX && <ModelSelectionBox />}
+        <div id="control-buttons">
+          <div className="control-button">
+            <ExportPDFLink
+              messages={messages}
+              emails={emails}
+              currentPhase={currentPhase}
+            />
+          </div>
+          <button
+            className="prompt-injection-button control-button"
+            onClick={resetButtonClicked}
+          >
+            Reset
+          </button>
+        </div> 
       </div>
       <div id="centre-area">
         <ChatBox
           messages={messages}
+          completedPhases={completedPhases}
           currentPhase={currentPhase}
           addChatMessage={addChatMessage}
-          resetPhase={resetPhase}
+          addCompletedPhase={addCompletedPhase}
           setNumCompletedPhases={setNumCompletedPhases}
           setEmails={setEmails}
         />
diff --git a/frontend/src/components/ModelSelectionBox/ModelSelectionBox.css b/frontend/src/components/ModelSelectionBox/ModelSelectionBox.css
index 293abfbad..2b8844bb8 100644
--- a/frontend/src/components/ModelSelectionBox/ModelSelectionBox.css
+++ b/frontend/src/components/ModelSelectionBox/ModelSelectionBox.css
@@ -1,5 +1,5 @@
 #model-selection-box {
-    padding: 1px 32px;
+    padding: 1px 0;
     position: relative;
 }
 
@@ -16,7 +16,7 @@
 #model-selection-info p {
     margin: 0;
     padding: 0;
-    color:cadetblue
+    color: cadetblue
 }
 
 #p error {
diff --git a/frontend/src/components/StrategyBox/StrategyBox.css b/frontend/src/components/StrategyBox/StrategyBox.css
index 50f2870f9..da154394a 100644
--- a/frontend/src/components/StrategyBox/StrategyBox.css
+++ b/frontend/src/components/StrategyBox/StrategyBox.css
@@ -1,4 +1,4 @@
 #strategy-box {
-  padding: 16px 32px;
+  padding: 16px 0;
   position: relative;
-}
+}
\ No newline at end of file

From 5f8620111faf946b5002de95fff9b90eb3f1432e Mon Sep 17 00:00:00 2001
From: George Sproston <gsproston@scottlogic.com>
Date: Fri, 1 Sep 2023 14:13:57 +0100
Subject: [PATCH 2/8] Showing attacks before defences

---
 .../src/components/MainComponent/DemoBody.tsx | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/MainComponent/DemoBody.tsx b/frontend/src/components/MainComponent/DemoBody.tsx
index 433b80044..db06d0c4d 100644
--- a/frontend/src/components/MainComponent/DemoBody.tsx
+++ b/frontend/src/components/MainComponent/DemoBody.tsx
@@ -67,8 +67,16 @@ function DemoBody({
   return (
     <span id="main-area">
       <div className="side-bar">
+        {/* show reduced set of attacks on phase 1 */}
+        {currentPhase === PHASE_NAMES.PHASE_1 && (
+          <AttackBox attacks={ATTACKS_PHASE_1} />
+        )}
+        {/* show all attacks on phase 2 and sandbox */}
+        {(currentPhase === PHASE_NAMES.PHASE_2 ||
+          currentPhase === PHASE_NAMES.SANDBOX) && (
+          <AttackBox attacks={ATTACKS_ALL} />
+        )}
         {/* hide defence box on phases 0 and 1. only allow configuration in sandbox */}
-        {/* hide defence box on phases 0 and 1 */}
         {(currentPhase === PHASE_NAMES.PHASE_2 ||
           currentPhase === PHASE_NAMES.SANDBOX) && (
           <DefenceBox
@@ -79,15 +87,6 @@ function DemoBody({
             defenceDeactivated={defenceDeactivated}
           />
         )}
-        {/* show reduced set of attacks on phase 1 */}
-        {currentPhase === PHASE_NAMES.PHASE_1 && (
-          <AttackBox attacks={ATTACKS_PHASE_1} />
-        )}
-        {/* show all attacks on phase 2 and sandbox */}
-        {(currentPhase === PHASE_NAMES.PHASE_2 ||
-          currentPhase === PHASE_NAMES.SANDBOX) && (
-          <AttackBox attacks={ATTACKS_ALL} />
-        )}
         {/* hide model selection box on phases 0 and 1 */}
         {currentPhase === PHASE_NAMES.SANDBOX && <ModelSelectionBox />}
         <div id="control-buttons">

From eabe6b74224b021847f794fc0897f49adc91be6d Mon Sep 17 00:00:00 2001
From: George Sproston <gsproston@scottlogic.com>
Date: Fri, 1 Sep 2023 14:28:52 +0100
Subject: [PATCH 3/8] Left side bar headers

---
 frontend/src/components/AttackBox/AttackBox.tsx       |  2 +-
 frontend/src/components/DefenceBox/DefenceBox.tsx     |  2 +-
 frontend/src/components/MainComponent/DemoBody.css    | 11 ++++-------
 .../ModelSelectionBox/ModelSelectionBox.tsx           |  2 +-
 frontend/src/components/StrategyBox/StrategyBox.css   |  1 -
 5 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/AttackBox/AttackBox.tsx b/frontend/src/components/AttackBox/AttackBox.tsx
index 11c53d00e..b16122470 100644
--- a/frontend/src/components/AttackBox/AttackBox.tsx
+++ b/frontend/src/components/AttackBox/AttackBox.tsx
@@ -5,7 +5,7 @@ import { AttackInfo } from "../../models/attack";
 function AttackBox({ attacks }: { attacks: AttackInfo[] }) {
   return (
     <div id="strategy-box">
-      <div className="side-bar-header">attack mechanisms</div>
+      <div className="side-bar-header">Attacks</div>
       {attacks.map((attack) => {
         return <AttackMechanism key={attack.id} attack={attack} />;
       })}
diff --git a/frontend/src/components/DefenceBox/DefenceBox.tsx b/frontend/src/components/DefenceBox/DefenceBox.tsx
index 9c2fc60f7..8aac8b85c 100644
--- a/frontend/src/components/DefenceBox/DefenceBox.tsx
+++ b/frontend/src/components/DefenceBox/DefenceBox.tsx
@@ -113,7 +113,7 @@ function DefenceBox({
 
   return (
     <div id="strategy-box">
-      <div className="side-bar-header">defence mechanisms</div>
+      <div className="side-bar-header">Defences</div>
       {defenceDetails.map((defenceDetail, index) => {
         return (
           <DefenceMechanism
diff --git a/frontend/src/components/MainComponent/DemoBody.css b/frontend/src/components/MainComponent/DemoBody.css
index 428b1f34e..7c314609e 100644
--- a/frontend/src/components/MainComponent/DemoBody.css
+++ b/frontend/src/components/MainComponent/DemoBody.css
@@ -27,13 +27,10 @@
 }
 
 .side-bar-header {
-  border-color: var(--main-border-colour);
-  border-width: 0 0 1px 0;
-  border-style: solid;
-  margin: 15px;
-  margin-bottom: 10px;
-  padding-bottom: 20px;
-  text-align: center;
+  margin-top: 25px;
+  margin-bottom: 8px;
+  font-size: 16px;
+  text-align: left;
 }
 
 #control-buttons {
diff --git a/frontend/src/components/ModelSelectionBox/ModelSelectionBox.tsx b/frontend/src/components/ModelSelectionBox/ModelSelectionBox.tsx
index a0084edfc..3c01e3e61 100644
--- a/frontend/src/components/ModelSelectionBox/ModelSelectionBox.tsx
+++ b/frontend/src/components/ModelSelectionBox/ModelSelectionBox.tsx
@@ -40,7 +40,7 @@ function ModelSelectionBox() {
   // return a drop down menu with the models
   return (
     <div id="model-selection-box">
-      <div className="side-bar-header">model selection</div>
+      <div className="side-bar-header">Model</div>
       <div id="model-selection-row">
         <p>Select a model: </p>
         <select
diff --git a/frontend/src/components/StrategyBox/StrategyBox.css b/frontend/src/components/StrategyBox/StrategyBox.css
index da154394a..1b826f177 100644
--- a/frontend/src/components/StrategyBox/StrategyBox.css
+++ b/frontend/src/components/StrategyBox/StrategyBox.css
@@ -1,4 +1,3 @@
 #strategy-box {
-  padding: 16px 0;
   position: relative;
 }
\ No newline at end of file

From f6d655fcd88a84a50884b97d5b31462b50ff1fec Mon Sep 17 00:00:00 2001
From: George Sproston <gsproston@scottlogic.com>
Date: Fri, 1 Sep 2023 15:04:37 +0100
Subject: [PATCH 4/8] Closer overall styling

---
 frontend/src/App.css                                 | 11 +++++++----
 frontend/src/App.tsx                                 |  5 +----
 frontend/src/Theme.css                               |  4 +++-
 frontend/src/components/MainComponent/DemoBody.css   |  1 +
 frontend/src/components/MainComponent/DemoHeader.css | 12 ++++++------
 frontend/src/index.css                               |  6 ++----
 6 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index ce091ee75..0aa7657ff 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -4,9 +4,12 @@
   flex-direction: column;
 }
 
+#app-content-header {
+  height: 10%;
+}
+
 #app-content-body {
-  height: 50%;
-  flex-grow: 1;
+  height: 90%;
 }
 
 #root {
@@ -35,9 +38,9 @@
 
 .prompt-injection-input {
   background-color: var(--main-input-background-colour);
-  border-color: var(--main-border-colour);
+  border-color: none;
   border-radius: 5px;
   border-style: solid;
   border-width: 1px;
   color: var(--main-input-text-colour);
-}
+}
\ No newline at end of file
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 0105bb8c5..40923b57a 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -6,7 +6,6 @@ import { useEffect, useState } from "react";
 import { PHASE_NAMES } from "./models/phase";
 import {
   getChatHistory,
-  addMessageToChatHistory,
   clearChat,
 } from "./service/chatService";
 import { EmailInfo } from "./models/email";
@@ -28,7 +27,6 @@ function App() {
   const [defencesToShow, setDefencesToShow] =
     useState<DefenceInfo[]>(DEFENCE_DETAILS_ALL);
 
-  const [triggeredDefences, setTriggeredDefences] = useState<string[]>([]);
   const [emails, setEmails] = useState<EmailInfo[]>([]);
   const [messages, setMessages] = useState<ChatMessage[]>([]);
 
@@ -61,7 +59,6 @@ function App() {
       setEmails([]);
     });
     resetActiveDefences(currentPhase).then(() => {
-      setTriggeredDefences([]);
       // choose appropriate defences to display
       let defences =
         currentPhase === PHASE_NAMES.PHASE_2
@@ -96,7 +93,7 @@ function App() {
       setMessages(phaseChatHistory);
     });
 
-    let defences =
+    const defences =
       newPhase === PHASE_NAMES.PHASE_2
         ? DEFENCE_DETAILS_PHASE
         : DEFENCE_DETAILS_ALL;
diff --git a/frontend/src/Theme.css b/frontend/src/Theme.css
index f576c614a..c5ee982a9 100644
--- a/frontend/src/Theme.css
+++ b/frontend/src/Theme.css
@@ -1,6 +1,8 @@
 :root {
+  --header-background-colour: #101010;
+
   --main-accent-colour: #1FD07B;
-  --main-background-colour: #101010;
+  --main-background-colour: #252525;
   --main-border-colour: var(--main-accent-colour);
   --main-error-colour: #cc3c3c;
   --main-text-colour: #fff;
diff --git a/frontend/src/components/MainComponent/DemoBody.css b/frontend/src/components/MainComponent/DemoBody.css
index 7c314609e..06a6c5cbd 100644
--- a/frontend/src/components/MainComponent/DemoBody.css
+++ b/frontend/src/components/MainComponent/DemoBody.css
@@ -30,6 +30,7 @@
   margin-top: 25px;
   margin-bottom: 8px;
   font-size: 16px;
+  font-weight: 700;
   text-align: left;
 }
 
diff --git a/frontend/src/components/MainComponent/DemoHeader.css b/frontend/src/components/MainComponent/DemoHeader.css
index dbf04da7d..b45191497 100644
--- a/frontend/src/components/MainComponent/DemoHeader.css
+++ b/frontend/src/components/MainComponent/DemoHeader.css
@@ -1,13 +1,13 @@
 #demo-header {
+  background-color: var(--header-background-colour);
   display: flex;
   align-items: center;
   flex-direction: row;
   justify-content: space-between;
-  padding: 20px 32px;
-  border-width: 0px;
-  border-bottom: 3px;
-  border-color: var(--main-accent-colour);
-  border-style: solid;
+  padding: 0 32px;
+  height: 100%;
+  min-height: 50px;
+  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
 }
 
 #demo-header-left {
@@ -25,7 +25,7 @@
   white-space: nowrap;
 }
 
-#demo-header-current-phase { 
+#demo-header-current-phase {
   color: var(--main-accent-colour);
   font-size: 36px;
   font-style: italic;
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 4849f22ea..99c7e25d6 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,8 +1,7 @@
 body {
   height: 100%;
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+  font-family: "Helvetica Neue", Helvetica, Arial,
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -18,5 +17,4 @@ html {
   background-color: var(--main-background-colour);
   border-color: var(--main-border-colour);
   color: var(--main-text-colour);
-}
-
+}
\ No newline at end of file

From ba23c58dc47be671ee774d0bc22741485fad1ed7 Mon Sep 17 00:00:00 2001
From: George Sproston <gsproston@scottlogic.com>
Date: Fri, 1 Sep 2023 15:18:30 +0100
Subject: [PATCH 5/8] Strategy input boxes styling

---
 .../DefenceBox/DefenceConfiguration.css       |  7 ++--
 .../DefenceBox/DefenceConfiguration.tsx       |  2 +-
 .../DefenceBox/DefenceMechanism.css           | 33 +------------------
 .../DefenceBox/DefenceMechanism.tsx           |  4 +--
 .../StrategyBox/StrategyMechanism.css         | 16 +++------
 5 files changed, 10 insertions(+), 52 deletions(-)

diff --git a/frontend/src/components/DefenceBox/DefenceConfiguration.css b/frontend/src/components/DefenceBox/DefenceConfiguration.css
index b19fb00f0..006782816 100644
--- a/frontend/src/components/DefenceBox/DefenceConfiguration.css
+++ b/frontend/src/components/DefenceBox/DefenceConfiguration.css
@@ -1,9 +1,6 @@
 .defence-config-value {
-  border-color: var(--main-border-colour);
-  border-radius: 5px;
-  border-style: solid;
-  border-width: 1px;
+  background-color: var(--main-background-colour);
   font-size: 14px;
   padding: 2px 4px;
   margin: 4px 0px;
-}
+}
\ No newline at end of file
diff --git a/frontend/src/components/DefenceBox/DefenceConfiguration.tsx b/frontend/src/components/DefenceBox/DefenceConfiguration.tsx
index 8dc3e4944..640c24d86 100644
--- a/frontend/src/components/DefenceBox/DefenceConfiguration.tsx
+++ b/frontend/src/components/DefenceBox/DefenceConfiguration.tsx
@@ -23,7 +23,7 @@ function DefenceConfiguration(
     <div>
       <span className="defence-config-name">{config.name}: </span>
       <ContentEditable
-        className="defence-config-value"
+        className="defence-config-value prompt-injection-input"
         html={config.value.toString()}
         onKeyUp={setConfiguration.bind(this)}
         onClick={(event) => event.stopPropagation()}
diff --git a/frontend/src/components/DefenceBox/DefenceMechanism.css b/frontend/src/components/DefenceBox/DefenceMechanism.css
index 99ab25480..dcd6f4d34 100644
--- a/frontend/src/components/DefenceBox/DefenceMechanism.css
+++ b/frontend/src/components/DefenceBox/DefenceMechanism.css
@@ -2,10 +2,6 @@
   background-color: var(--main-button-active-background-colour);
 }
 
-.defence-active:hover {
-  background-color: var(--main-button-active-background-colour);
-}
-
 .defence-mechanism:hover {
   border-width: 2px;
   margin: 0px;
@@ -13,9 +9,6 @@
 }
 
 .defence-mechanism-config {
-  border-color: var(--main-border-colour);
-  border-style: solid;
-  border-width: 1px 0 0 0;
   font-size: 14px;
   margin-top: 4px;
 }
@@ -28,28 +21,4 @@
 .validation-text {
   font-size: 14px;
   font-weight: 600;
-}
-
-@keyframes flash-red-active {
-  0% {
-    background-color: #eef;
-  }
-  50% {
-    background-color: #fdd;
-  }
-  100% {
-    background-color: #eef;
-  }
-}
-
-@keyframes flash-red-inactive {
-  0% {
-    background-color: #fff;
-  }
-  50% {
-    background-color: #fdd;
-  }
-  100% {
-    background-color: #fff;
-  }
-}
+}
\ No newline at end of file
diff --git a/frontend/src/components/DefenceBox/DefenceMechanism.tsx b/frontend/src/components/DefenceBox/DefenceMechanism.tsx
index 8c158ae80..c9ffb9abb 100644
--- a/frontend/src/components/DefenceBox/DefenceMechanism.tsx
+++ b/frontend/src/components/DefenceBox/DefenceMechanism.tsx
@@ -60,8 +60,8 @@ function DefenceMechanism({
       <div
         className={
           defenceDetail.isActive
-            ? "strategy-mechanism defence-mechanism prompt-injection-button defence-active"
-            : "strategy-mechanism defence-mechanism prompt-injection-button"
+            ? "strategy-mechanism defence-mechanism defence-active"
+            : "strategy-mechanism defence-mechanism"
         }
         onMouseOver={() => {
           setIsInfoBoxVisible(true);
diff --git a/frontend/src/components/StrategyBox/StrategyMechanism.css b/frontend/src/components/StrategyBox/StrategyMechanism.css
index 57acd4112..26bae80a8 100644
--- a/frontend/src/components/StrategyBox/StrategyMechanism.css
+++ b/frontend/src/components/StrategyBox/StrategyMechanism.css
@@ -1,10 +1,9 @@
 .strategy-mechanism {
-  border-color: var(--main-border-colour);
+  background-color: var(--main-button-inactive-background-colour);
+  border-color: transparent;
   border-radius: 8px;
   border-style: solid;
-  border-width: 1px;
-  padding: 6px;
-  margin: 1px;
+  padding: 12px 14px;
   margin-bottom: 8px;
   cursor: default;
 }
@@ -18,10 +17,6 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  border-color: var(--main-border-colour);
-  border-radius: 10px;
-  border-style: solid;
-  border-width: 1px;
   height: 20px;
   width: 20px;
 }
@@ -32,9 +27,6 @@
 }
 
 .strategy-mechanism-info-box {
-  border-color: var(--main-border-colour);
-  border-style: solid;
-  border-width: 1px 0 0 0;
   font-size: 14px;
   margin-top: 4px;
-}
+}
\ No newline at end of file

From b8352f1d8bebd41d5629807672d86492eb256afe Mon Sep 17 00:00:00 2001
From: George Sproston <gsproston@scottlogic.com>
Date: Fri, 1 Sep 2023 15:44:55 +0100
Subject: [PATCH 6/8] WIP: defence toggle

---
 frontend/src/Theme.css                        |  4 ++
 .../DefenceBox/DefenceMechanism.css           | 71 ++++++++++++++++---
 .../DefenceBox/DefenceMechanism.tsx           | 31 ++------
 3 files changed, 70 insertions(+), 36 deletions(-)

diff --git a/frontend/src/Theme.css b/frontend/src/Theme.css
index c5ee982a9..b82da140d 100644
--- a/frontend/src/Theme.css
+++ b/frontend/src/Theme.css
@@ -17,6 +17,10 @@
   --main-input-background-colour: var(--main-button-inactive-background-colour);
   --main-input-text-colour: var(--main-button-inactive-text-colour);
 
+  --main-toggle-ball-colour: #ECECEC;
+  --main-toggle-off-colour: #ABABAB;
+  --main-toggle-on-colour: var(--main-accent-colour);
+
   --chat-bot-colour: #D482FB;
   --chat-bot-background: linear-gradient(var(--chat-bot-colour), #F3DBFE);
   --chat-blocked-colour: var(--main-error-colour);
diff --git a/frontend/src/components/DefenceBox/DefenceMechanism.css b/frontend/src/components/DefenceBox/DefenceMechanism.css
index dcd6f4d34..eea7c55dd 100644
--- a/frontend/src/components/DefenceBox/DefenceMechanism.css
+++ b/frontend/src/components/DefenceBox/DefenceMechanism.css
@@ -1,13 +1,3 @@
-.defence-active {
-  background-color: var(--main-button-active-background-colour);
-}
-
-.defence-mechanism:hover {
-  border-width: 2px;
-  margin: 0px;
-  margin-bottom: 7px;
-}
-
 .defence-mechanism-config {
   font-size: 14px;
   margin-top: 4px;
@@ -21,4 +11,65 @@
 .validation-text {
   font-size: 14px;
   font-weight: 600;
+}
+
+/* The switch - the box around the slider */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 29px;
+  height: 13px;
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+/* The slider */
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--main-toggle-off-colour);
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 13px;
+  width: 13px;
+  background-color: var(--main-toggle-ball-colour);
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked+.slider {
+  background-color: var(--main-toggle-on-colour);
+}
+
+input:focus+.slider {
+  box-shadow: 0 0 1px var(--main-toggle-on-colour);
+}
+
+input:checked+.slider:before {
+  -webkit-transform: translateX(16px);
+  -ms-transform: translateX(16px);
+  transform: translateX(16px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
 }
\ No newline at end of file
diff --git a/frontend/src/components/DefenceBox/DefenceMechanism.tsx b/frontend/src/components/DefenceBox/DefenceMechanism.tsx
index c9ffb9abb..0c18a572d 100644
--- a/frontend/src/components/DefenceBox/DefenceMechanism.tsx
+++ b/frontend/src/components/DefenceBox/DefenceMechanism.tsx
@@ -58,38 +58,13 @@ function DefenceMechanism({
   return (
     <span>
       <div
-        className={
-          defenceDetail.isActive
-            ? "strategy-mechanism defence-mechanism defence-active"
-            : "strategy-mechanism defence-mechanism"
-        }
+        className="strategy-mechanism defence-mechanism"
         onMouseOver={() => {
           setIsInfoBoxVisible(true);
         }}
         onMouseLeave={() => {
           setIsInfoBoxVisible(false);
         }}
-        // style={
-        //   defenceDetail.isTriggered
-        //     ? defenceDetail.isActive
-        //       ? {
-        //           animation:
-        //             "flash-red-active " +
-        //             ANIMATION_FLASH_TIME_SECONDS +
-        //             "s linear 0s " +
-        //             ANIMATION_FLASH_REPEAT +
-        //             " forwards",
-        //         }
-        //       : {
-        //           animation:
-        //             "flash-red-inactive " +
-        //             ANIMATION_FLASH_TIME_SECONDS +
-        //             "s linear 0s " +
-        //             ANIMATION_FLASH_REPEAT +
-        //             " forwards",
-        //         }
-        //     : { animation: "none" }
-        // }
         onClick={() => {
           defenceDetail.isActive
             ? setDefenceInactive(defenceDetail.id)
@@ -98,6 +73,10 @@ function DefenceMechanism({
       >
         <div className="strategy-mechanism-header">
           <span>{defenceDetail.name}</span>
+          <label className="switch">
+            <input type="checkbox"></input>
+            <span className="slider round"></span>
+          </label>
         </div>
         {isInfoBoxVisible ? (
           <div className="strategy-mechanism-info-box">

From 4621685f95ed130c6e5e6a203b32ebf7d4c5da8f Mon Sep 17 00:00:00 2001
From: George Sproston <gsproston@scottlogic.com>
Date: Fri, 1 Sep 2023 15:58:33 +0100
Subject: [PATCH 7/8] Defence toggles

---
 .../DefenceBox/DefenceMechanism.tsx           | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/DefenceBox/DefenceMechanism.tsx b/frontend/src/components/DefenceBox/DefenceMechanism.tsx
index 0c18a572d..5cb193df7 100644
--- a/frontend/src/components/DefenceBox/DefenceMechanism.tsx
+++ b/frontend/src/components/DefenceBox/DefenceMechanism.tsx
@@ -65,16 +65,21 @@ function DefenceMechanism({
         onMouseLeave={() => {
           setIsInfoBoxVisible(false);
         }}
-        onClick={() => {
-          defenceDetail.isActive
-            ? setDefenceInactive(defenceDetail.id)
-            : setDefenceActive(defenceDetail.id);
-        }}
       >
         <div className="strategy-mechanism-header">
           <span>{defenceDetail.name}</span>
-          <label className="switch">
-            <input type="checkbox"></input>
+          <label className="switch" >
+            <input 
+              type="checkbox" 
+              placeholder="defence-toggle" 
+              onClick={() => {
+                defenceDetail.isActive
+                  ? setDefenceInactive(defenceDetail.id)
+                  : setDefenceActive(defenceDetail.id);
+              }}
+              // set checked if defence is active
+              checked={defenceDetail.isActive}
+            />
             <span className="slider round"></span>
           </label>
         </div>

From 1214f0c239304499ccc52c677b57e0a349bce111 Mon Sep 17 00:00:00 2001
From: George Sproston <gsproston@scottlogic.com>
Date: Fri, 1 Sep 2023 17:29:03 +0100
Subject: [PATCH 8/8] Fixed warning

---
 frontend/src/components/DefenceBox/DefenceMechanism.css | 4 ++++
 frontend/src/components/DefenceBox/DefenceMechanism.tsx | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/DefenceBox/DefenceMechanism.css b/frontend/src/components/DefenceBox/DefenceMechanism.css
index eea7c55dd..ab2e6b255 100644
--- a/frontend/src/components/DefenceBox/DefenceMechanism.css
+++ b/frontend/src/components/DefenceBox/DefenceMechanism.css
@@ -65,6 +65,10 @@ input:checked+.slider:before {
   transform: translateX(16px);
 }
 
+/*
+ * Modified from https://www.w3schools.com/howto/howto_css_switch.asp
+*/
+
 /* Rounded sliders */
 .slider.round {
   border-radius: 34px;
diff --git a/frontend/src/components/DefenceBox/DefenceMechanism.tsx b/frontend/src/components/DefenceBox/DefenceMechanism.tsx
index 5cb193df7..29f9ef103 100644
--- a/frontend/src/components/DefenceBox/DefenceMechanism.tsx
+++ b/frontend/src/components/DefenceBox/DefenceMechanism.tsx
@@ -72,7 +72,7 @@ function DefenceMechanism({
             <input 
               type="checkbox" 
               placeholder="defence-toggle" 
-              onClick={() => {
+              onChange={() => {
                 defenceDetail.isActive
                   ? setDefenceInactive(defenceDetail.id)
                   : setDefenceActive(defenceDetail.id);