From 7555bda8e9108d12de85376d7ee61a5f5fc370f6 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Tue, 24 Oct 2023 09:58:41 +0800
Subject: [PATCH] Waited wayy too long for Firefox to support :has

---
 src/components/shortcuts-settings.css |  2 +-
 src/components/shortcuts-settings.jsx | 40 ++++++++++++++-------------
 2 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/src/components/shortcuts-settings.css b/src/components/shortcuts-settings.css
index 5078a377..086c7911 100644
--- a/src/components/shortcuts-settings.css
+++ b/src/components/shortcuts-settings.css
@@ -85,7 +85,7 @@
   transform: scale(0.975);
   transition: all 0.2s ease-out;
 }
-#shortcuts-settings-container .shortcuts-view-mode label:has(input:checked) {
+#shortcuts-settings-container .shortcuts-view-mode label.checked {
   box-shadow: inset 0 0 0 3px var(--link-color);
 }
 #shortcuts-settings-container
diff --git a/src/components/shortcuts-settings.jsx b/src/components/shortcuts-settings.jsx
index ecc8d98d..734d90d2 100644
--- a/src/components/shortcuts-settings.jsx
+++ b/src/components/shortcuts-settings.jsx
@@ -271,25 +271,27 @@ function ShortcutsSettings({ onClose }) {
               label: 'Multi-column',
               imgURL: multiColumnUrl,
             },
-          ].map(({ value, label, imgURL }) => (
-            <label>
-              <input
-                type="radio"
-                name="shortcuts-view-mode"
-                value={value}
-                checked={
-                  snapStates.settings.shortcutsViewMode === value ||
-                  (value === 'float-button' &&
-                    !snapStates.settings.shortcutsViewMode)
-                }
-                onChange={(e) => {
-                  states.settings.shortcutsViewMode = e.target.value;
-                }}
-              />{' '}
-              <img src={imgURL} alt="" width="80" height="58" />{' '}
-              <span>{label}</span>
-            </label>
-          ))}
+          ].map(({ value, label, imgURL }) => {
+            const checked =
+              snapStates.settings.shortcutsViewMode === value ||
+              (value === 'float-button' &&
+                !snapStates.settings.shortcutsViewMode);
+            return (
+              <label key={value} class={checked ? 'checked' : ''}>
+                <input
+                  type="radio"
+                  name="shortcuts-view-mode"
+                  value={value}
+                  checked={checked}
+                  onChange={(e) => {
+                    states.settings.shortcutsViewMode = e.target.value;
+                  }}
+                />{' '}
+                <img src={imgURL} alt="" width="80" height="58" />{' '}
+                <span>{label}</span>
+              </label>
+            );
+          })}
         </div>
         {/* <select
               value={snapStates.settings.shortcutsViewMode || 'float-button'}