From eae4fbd28a4b168546adc4e9dcec10d06d0ea08c Mon Sep 17 00:00:00 2001
From: Chris Wilton-Magras <chriswilty@zoho.com>
Date: Wed, 4 Oct 2023 16:04:11 +0100
Subject: [PATCH] Tidy up defence box styles, including focus indicators

---
 .gitignore                                    |  3 +
 .../components/ControlPanel/ControlPanel.css  |  8 +-
 .../DefenceBox/DefenceMechanism.css           | 86 +++++++++----------
 .../DefenceBox/DefenceMechanism.tsx           | 84 +++++++++---------
 4 files changed, 90 insertions(+), 91 deletions(-)

diff --git a/.gitignore b/.gitignore
index 7992e0a80..bb7d928c0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -125,6 +125,9 @@ dist
 # Stores VSCode versions used for testing VSCode extensions
 .vscode-test
 
+# JetBrains
+.idea
+
 # yarn v2
 .yarn/cache
 .yarn/unplugged
diff --git a/frontend/src/components/ControlPanel/ControlPanel.css b/frontend/src/components/ControlPanel/ControlPanel.css
index db5fe0e0f..832c4c9cd 100644
--- a/frontend/src/components/ControlPanel/ControlPanel.css
+++ b/frontend/src/components/ControlPanel/ControlPanel.css
@@ -6,15 +6,13 @@
 
 .control-collapsible-section {
   background-color: var(--control-body-background-colour);
-  margin-bottom: 12px;
-  border-radius: 8px;
-  overflow: hidden;
+  margin-bottom: 0.75rem;
+  border-radius: 0.5rem;
 }
 
 .control-collapsible-section-header {
   background-color: var(--control-header-background-colour);
-  padding: 12px 14px;
+  padding: 0.75rem;
   cursor: default;
   outline-color: white;
-  border-radius: 8px;
 }
diff --git a/frontend/src/components/DefenceBox/DefenceMechanism.css b/frontend/src/components/DefenceBox/DefenceMechanism.css
index f080e5ea6..d97d429cd 100644
--- a/frontend/src/components/DefenceBox/DefenceMechanism.css
+++ b/frontend/src/components/DefenceBox/DefenceMechanism.css
@@ -1,24 +1,14 @@
 .defence-mechanism {
-  position: relative;
-  padding: 12px 14px;
   cursor: default;
 }
 
-.defence-mechanism details summary {
-  font-size: 1rem;
-  font-style: normal;
-  font-weight: 400;
-  margin: 0;
+.defence-mechanism > * {
+  padding: 0.75rem;
 }
 
-.defence-mechanism > .info-box {
-  font-size: 0.875rem;
-  margin-top: 4px;
-}
-
-.validation-text {
-  font-size: 0.875rem;
-  font-weight: 600;
+.defence-mechanism > summary {
+  position: relative;
+  font-size: 1rem;
 }
 
 /*
@@ -26,29 +16,40 @@
 */
 
 /* The switch - the box around the slider */
-.switch {
+.defence-mechanism label.switch {
   position: absolute;
-  display: inline-block;
-  width: 29px;
-  height: 13px;
-  right: 16px;
-  top: 15px;
+  width: 2rem;
+  height: 1rem;
+  right: 0.75rem;
+  top: 0.75rem;
 }
 
-.switch:focus-within {
+.defence-mechanism label.switch:focus-within {
   outline: white auto 1px;
-  border-radius: 34px;
+  border-radius: 0.5rem;
 }
 
 /* Hide default HTML checkbox */
-.switch input {
+.defence-mechanism label.switch > input {
   opacity: 0;
   width: 0;
   height: 0;
 }
 
+.defence-mechanism label.switch > input:checked + .slider {
+  background-color: var(--main-toggle-on-colour);
+}
+
+.defence-mechanism label.switch > input:focus + .slider {
+  box-shadow: 0 0 1px var(--main-toggle-on-colour);
+}
+
+.defence-mechanism label.switch > input:checked + .slider:before {
+  transform: translateX(1rem);
+}
+
 /* The slider */
-.slider {
+.defence-mechanism label.switch > .slider {
   position: absolute;
   cursor: pointer;
   top: 0;
@@ -56,39 +57,36 @@
   right: 0;
   bottom: 0;
   background-color: var(--main-toggle-off-colour);
-  -webkit-transition: 0.4s;
   transition: 0.4s;
 }
 
-.slider:before {
-  position: absolute;
+.defence-mechanism label.switch > .slider:before {
   content: "";
-  height: 13px;
-  width: 13px;
+  position: absolute;
+  height: 1rem;
+  width: 1rem;
   background-color: var(--main-toggle-ball-colour);
-  -webkit-transition: 0.4s;
   transition: 0.4s;
 }
 
-input:checked + .slider {
-  background-color: var(--main-toggle-on-colour);
+/* Rounded sliders */
+.defence-mechanism label.switch > .slider.round {
+  border-radius: 0.5rem;
 }
 
-input:focus + .slider {
-  box-shadow: 0 0 1px var(--main-toggle-on-colour);
+.defence-mechanism label.switch > .slider.round:before {
+  border-radius: 50%;
 }
 
-input:checked + .slider:before {
-  -webkit-transform: translateX(16px);
-  -ms-transform: translateX(16px);
-  transform: translateX(16px);
+.defence-mechanism .info-box {
+  font-size: 0.875rem;
 }
 
-/* Rounded sliders */
-.slider.round {
-  border-radius: 34px;
+.defence-mechanism .info-box :first-child {
+  margin-top: 0;
 }
 
-.slider.round:before {
-  border-radius: 50%;
+.defence-mechanism .info-box .validation-text {
+  font-size: inherit;
+  font-weight: 600;
 }
diff --git a/frontend/src/components/DefenceBox/DefenceMechanism.tsx b/frontend/src/components/DefenceBox/DefenceMechanism.tsx
index 9dab0ae7d..398a08b39 100644
--- a/frontend/src/components/DefenceBox/DefenceMechanism.tsx
+++ b/frontend/src/components/DefenceBox/DefenceMechanism.tsx
@@ -65,48 +65,48 @@ function DefenceMechanism({
   }
 
   return (
-    <div className="defence-mechanism">
-      <details>
-        <summary>{defenceDetail.name}</summary>
-        <div className="info-box">
-          <p>{defenceDetail.info}</p>
-
-          {showConfigurations &&
-            defenceDetail.config.map((config) => {
-              return (
-                <DefenceConfiguration
-                  key={config.id}
-                  isActive={defenceDetail.isActive}
-                  config={config}
-                  setConfigurationValue={setConfigurationValue}
-                />
-              );
-            })}
-
-          {isConfigured &&
-            (configValidated ? (
-              <p className="validation-text">
-                <TiTick /> defence successfully configured
-              </p>
-            ) : (
-              <p className="validation-text">
-                <TiTimes /> invalid input - configuration failed
-              </p>
-            ))}
-        </div>
-      </details>
-      <label className="switch">
-        <input
-          type="checkbox"
-          placeholder="defence-toggle"
-          onChange={toggleDefence}
-          // set checked if defence is active
-          checked={defenceDetail.isActive}
-          aria-label="toggle defence"
-        />
-        <span className="slider round"></span>
-      </label>
-    </div>
+    <details className="defence-mechanism">
+      <summary>
+        <span>{defenceDetail.name}</span>
+        <label className="switch">
+          <input
+            type="checkbox"
+            placeholder="defence-toggle"
+            onChange={toggleDefence}
+            // set checked if defence is active
+            checked={defenceDetail.isActive}
+            aria-label="toggle defence"
+          />
+          <span className="slider round"></span>
+        </label>
+      </summary>
+      <div className="info-box">
+        <p>{defenceDetail.info}</p>
+        {showConfigurations &&
+          defenceDetail.config.map((config) => {
+            return (
+              <DefenceConfiguration
+                key={config.id}
+                isActive={defenceDetail.isActive}
+                config={config}
+                setConfigurationValue={setConfigurationValue}
+              />
+            );
+          })
+        }
+        {isConfigured &&
+          (configValidated ? (
+            <p className="validation-text">
+              <TiTick /> defence successfully configured
+            </p>
+          ) : (
+            <p className="validation-text">
+              <TiTimes /> invalid input - configuration failed
+            </p>
+          ))
+        }
+      </div>
+    </details>
   );
 }