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>")