new checkbox api adapted

src/common/Checkbox/Checkbox.js

@@ -6,6 +6,12 @@ import { Input } from 'stremio-common';
 import styles from './styles';
 
 class Checkbox extends PureComponent {
+    constructor(props) {
+        super(props);
+
+        this.checkboxRef = props.forwardedRef || React.createRef();
+    }
+
     onClick = (event) => {
         event.preventDefault();
         if (typeof this.props.onClick === 'function') {
@@ -19,7 +25,7 @@ class Checkbox extends PureComponent {
         }
 
         if (!event.defaultPrevented) {
-            this.props.forwardedRef.current.blur();
+            this.checkboxRef.current.blur();
         }
     }
 
@@ -29,7 +35,7 @@ class Checkbox extends PureComponent {
         }
 
         if (!event.defaultPrevented) {
-            this.props.forwardedRef.current.blur();
+            this.checkboxRef.current.blur();
         }
     }
 
@@ -37,7 +43,7 @@ class Checkbox extends PureComponent {
         return (
             <label className={classnames(this.props.className, styles['checkbox-container'], { 'checked': this.props.checked }, { 'disabled': this.props.disabled })} onClick={this.onClick} onDrag={this.onDrag} onMouseOut={this.onMouseOut}>
                 <Input
-                    ref={this.props.forwardedRef}
+                    ref={this.checkboxRef}
                     className={styles['native-checkbox']}
                     type={'checkbox'}
                     disabled={this.props.disabled}

src/routes/Player/ControlBar/SubtitlesPicker/SubtitlesPicker.js

@@ -152,14 +152,9 @@ class SubtitlesPicker extends Component {
         }
 
         return (
-            <label className={styles['background-toggle-container']}>
-                <Checkbox
-                    className={styles['background-toggle-checkbox']}
-                    checked={this.props.subtitleDarkBackground}
-                    onClick={this.toggleSubtitleDarkBackground}
-                />
+            <Checkbox className={styles['background-toggle-checkbox']} checked={this.props.subtitleDarkBackground} onClick={this.toggleSubtitleDarkBackground}>
                 <div className={styles['background-toggle-label']}>Dark background</div>
-            </label>
+            </Checkbox>
         );
     }
 

src/routes/Player/ControlBar/SubtitlesPicker/styles.less

@@ -153,7 +153,11 @@
             }
         }
 
-        .background-toggle-container {
+        .background-toggle-checkbox {
+            --icon-background-color: transparent;
+            --icon-color: var(--color-surfacelighter);
+            --icon-size: calc(var(--subtitles-picker-button-size) * 0.6);
+
             align-self: stretch;
             flex: 1;
             display: flex;
@@ -161,17 +165,6 @@
             align-items: center;
             cursor: pointer;
 
-            .background-toggle-checkbox {
-                --icon-color: var(--color-surfacelighter);
-                --background-color: transparent;
-                width: calc(var(--subtitles-picker-button-size) * 0.6);
-                height: calc(var(--subtitles-picker-button-size) * 0.6);
-
-                &:global(.checked) {
-                    --background-color: var(--color-primarydark);
-                }
-            }
-
             .background-toggle-label {
                 flex: 1;
                 padding: 0 0.5em;
@@ -183,11 +176,11 @@
                 color: var(--color-surfacelighter);
             }
 
-            &:hover {
-                .background-toggle-checkbox {
-                    &:global(.checked) {
-                        --background-color: var(--color-primarylight);
-                    }
+            &:global(.checked) {
+                --icon-background-color: var(--color-primarydark);
+
+                &:hover {
+                    --icon-background-color: var(--color-primarylight);
                 }
             }
         }