From c4a32ab639b9e21fb742d04c39802eab94fcf2da Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Thu, 26 Jan 2023 02:28:06 -0800
Subject: [PATCH] Make button light up while popover is open

---
 components/JobImage/index.scss | 3 ++-
 components/JobImage/index.tsx  | 8 +++++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/components/JobImage/index.scss b/components/JobImage/index.scss
index dd990440..b5b8cef3 100644
--- a/components/JobImage/index.scss
+++ b/components/JobImage/index.scss
@@ -59,7 +59,8 @@
     height: auto;
     z-index: 10;
 
-    &:hover .Accessory svg {
+    &:hover .Accessory svg,
+    &.Selected .Accessory svg {
       fill: var(--button-text-hover);
     }
 
diff --git a/components/JobImage/index.tsx b/components/JobImage/index.tsx
index 670899ea..8902abaa 100644
--- a/components/JobImage/index.tsx
+++ b/components/JobImage/index.tsx
@@ -8,6 +8,7 @@ import ShieldIcon from '~public/icons/Shield.svg'
 import ManaturaIcon from '~public/icons/Manatura.svg'
 
 import './index.scss'
+import classNames from 'classnames'
 
 interface Props {
   job?: Job
@@ -53,6 +54,11 @@ const JobImage = ({
   const hasAccessory = job && job.accessory
   const image = <img alt={job?.name[locale]} src={imageUrl()} />
 
+  const classes = classNames({
+    JobAccessory: true,
+    Selected: open,
+  })
+
   function handleAccessoryButtonClicked() {
     setOpen(!open)
   }
@@ -71,7 +77,7 @@ const JobImage = ({
     return (
       <Button
         accessoryIcon={icon}
-        className="JobAccessory"
+        className={classes}
         onClick={handleAccessoryButtonClicked}
         ref={buttonRef}
       />