From a1971f6830306b3d748f7f36c2243f6dee682f97 Mon Sep 17 00:00:00 2001
From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com>
Date: Thu, 3 Nov 2022 03:38:15 +1300
Subject: [PATCH] Fix Loopback Styling

---
 .../options/ProcessButtons/Loopback.tsx       |  1 +
 .../ProcessButtons/ProcessButtons.scss        | 31 +++++++++++++++++++
 2 files changed, 32 insertions(+)

diff --git a/frontend/src/features/options/ProcessButtons/Loopback.tsx b/frontend/src/features/options/ProcessButtons/Loopback.tsx
index 6edf8690b4..6d360f4f25 100644
--- a/frontend/src/features/options/ProcessButtons/Loopback.tsx
+++ b/frontend/src/features/options/ProcessButtons/Loopback.tsx
@@ -17,6 +17,7 @@ const LoopbackButton = () => {
     <IAIIconButton
       aria-label="Toggle Loopback"
       tooltip="Toggle Loopback"
+      styleClass="loopback-btn"
       asCheckbox={true}
       isChecked={shouldLoopback}
       icon={<FaRecycle />}
diff --git a/frontend/src/features/options/ProcessButtons/ProcessButtons.scss b/frontend/src/features/options/ProcessButtons/ProcessButtons.scss
index 40f9e92e02..0c107e0865 100644
--- a/frontend/src/features/options/ProcessButtons/ProcessButtons.scss
+++ b/frontend/src/features/options/ProcessButtons/ProcessButtons.scss
@@ -26,3 +26,34 @@
     // $btn-width: 3rem
   );
 }
+
+.loopback-btn {
+  &[data-as-checkbox='true'] {
+    background-color: var(--btn-grey);
+    border: 3px solid var(--btn-grey);
+    svg {
+      fill: var(--text-color);
+    }
+    &:hover {
+      background-color: var(--btn-grey);
+      border-color: var(--btn-checkbox-border-hover);
+      svg {
+        fill: var(--text-color);
+      }
+    }
+    &[data-selected='true'] {
+      border-color: var(--accent-color);
+      background-color: var(--btn-grey);
+      svg {
+        fill: var(--text-color);
+      }
+      &:hover {
+        border-color: var(--accent-color);
+        background-color: var(--btn-grey);
+        svg {
+          fill: var(--text-color);
+        }
+      }
+    }
+  }
+}