From 0d877a3076725332051e026fc62b677b2774665e Mon Sep 17 00:00:00 2001
From: Claire <claire.github-309c@sitedethib.com>
Date: Mon, 20 Feb 2023 11:32:27 +0100
Subject: [PATCH] [Glitch] Change compose form checkbox to native input with
 `appearance: none`

Port d3b4d4d4f3ccee19f272c66e7c9acd803661e65b to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../compose/containers/sensitive_button_container.jsx     | 2 --
 .../flavours/glitch/styles/components/compose_form.scss   | 8 +++-----
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/app/javascript/flavours/glitch/features/compose/containers/sensitive_button_container.jsx b/app/javascript/flavours/glitch/features/compose/containers/sensitive_button_container.jsx
index 931f396b35..5a57332dd9 100644
--- a/app/javascript/flavours/glitch/features/compose/containers/sensitive_button_container.jsx
+++ b/app/javascript/flavours/glitch/features/compose/containers/sensitive_button_container.jsx
@@ -62,8 +62,6 @@ class SensitiveButton extends PureComponent {
             disabled={disabled}
           />
 
-          <span className={classNames('checkbox', { active })} />
-
           <FormattedMessage
             id='compose_form.sensitive.hide'
             defaultMessage='{count, plural, one {Mark media as sensitive} other {Mark media as sensitive}}'
diff --git a/app/javascript/flavours/glitch/styles/components/compose_form.scss b/app/javascript/flavours/glitch/styles/components/compose_form.scss
index 3b85dfbf15..db20ff49ac 100644
--- a/app/javascript/flavours/glitch/styles/components/compose_form.scss
+++ b/app/javascript/flavours/glitch/styles/components/compose_form.scss
@@ -104,10 +104,7 @@
   }
 
   input[type='checkbox'] {
-    display: none;
-  }
-
-  .checkbox {
+    appearance: none;
     display: inline-block;
     position: relative;
     border: 1px solid $ui-primary-color;
@@ -120,8 +117,9 @@
     top: -1px;
     border-radius: 4px;
     vertical-align: middle;
+    cursor: inherit;
 
-    &.active {
+    &:checked {
       border-color: $highlight-text-color;
       background: $highlight-text-color
         url("data:image/svg+xml;utf8,<svg width='18' height='18' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M4.5 8.5L8 12l6-6' stroke='white' stroke-width='1.5'/></svg>")