From 77d13b05af979bf8f583fa8e76abc48faeb0b374 Mon Sep 17 00:00:00 2001
From: sophiamersmann <sophia.mersmann1@gmail.com>
Date: Sun, 24 Nov 2024 13:07:20 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix=20active/checked=20state=20o?=
 =?UTF-8?q?n=20mobile?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/@ourworldindata/components/src/Checkbox.scss    | 6 ++++--
 packages/@ourworldindata/components/src/Checkbox.tsx     | 2 +-
 packages/@ourworldindata/components/src/RadioButton.scss | 6 ++++++
 packages/@ourworldindata/components/src/RadioButton.tsx  | 2 +-
 4 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/@ourworldindata/components/src/Checkbox.scss b/packages/@ourworldindata/components/src/Checkbox.scss
index 24410bae0d7..31879d3fb09 100644
--- a/packages/@ourworldindata/components/src/Checkbox.scss
+++ b/packages/@ourworldindata/components/src/Checkbox.scss
@@ -40,6 +40,7 @@
         svg {
             font-size: 10px;
             padding-left: 0.75px;
+            display: none;
         }
     }
 
@@ -56,8 +57,9 @@
         border-color: $active-fill;
     }
 
-    input:checked:active + .custom {
-        background: white;
+    input:active + .custom svg,
+    input:checked + .custom svg {
+        display: block;
     }
 
     .label {
diff --git a/packages/@ourworldindata/components/src/Checkbox.tsx b/packages/@ourworldindata/components/src/Checkbox.tsx
index d3af557fded..c8c52b2c0ca 100644
--- a/packages/@ourworldindata/components/src/Checkbox.tsx
+++ b/packages/@ourworldindata/components/src/Checkbox.tsx
@@ -19,7 +19,7 @@ export class Checkbox extends React.Component<{
                         onChange={onChange}
                     />
                     <div className="custom">
-                        {checked && <FontAwesomeIcon icon={faCheck} />}
+                        <FontAwesomeIcon icon={faCheck} />
                     </div>
                     <div className="label">{label}</div>
                 </label>
diff --git a/packages/@ourworldindata/components/src/RadioButton.scss b/packages/@ourworldindata/components/src/RadioButton.scss
index d52007b6d97..dd5b1bc685b 100644
--- a/packages/@ourworldindata/components/src/RadioButton.scss
+++ b/packages/@ourworldindata/components/src/RadioButton.scss
@@ -41,6 +41,7 @@
             height: math.div($radio-size, 2);
             background-color: $active-fill;
             border-radius: 50%;
+            display: none;
         }
     }
 
@@ -48,6 +49,11 @@
         outline: 2px solid $controls-color;
     }
 
+    input:active + .outer .inner,
+    input:checked + .outer .inner {
+        display: block;
+    }
+
     .label {
         @include grapher_label-2-regular;
         padding-left: $radio-size + 8px;
diff --git a/packages/@ourworldindata/components/src/RadioButton.tsx b/packages/@ourworldindata/components/src/RadioButton.tsx
index 638559ae470..1c9dfdf807b 100644
--- a/packages/@ourworldindata/components/src/RadioButton.tsx
+++ b/packages/@ourworldindata/components/src/RadioButton.tsx
@@ -19,7 +19,7 @@ export class RadioButton extends React.Component<{
                         onChange={onChange}
                     />
                     <div className="outer">
-                        {checked && <div className="inner" />}
+                        <div className="inner" />
                     </div>
                     <div className="label">{label}</div>
                 </label>