CheckboxLabel implemented

src/routes/Intro/CheckboxLabel/CheckboxLabel.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { Checkbox } from 'stremio-common';
+import styles from './styles';
+
+const CheckboxLabel = React.forwardRef(({ className, label, link, href, checked, onClick }, ref) => (
+    <label className={classnames(styles['checkbox-label-container'], className)}>
+        <div className={styles['checkbox-container']}>
+            <Checkbox ref={ref} className={styles['checkbox']} checked={checked} onClick={onClick} />
+        </div>
+        <div className={styles['label']}>
+            {label}
+            {link ? <a className={styles['link']} href={href} target={'_blank'} tabIndex={'-1'}> {link}</a> : null}
+        </div>
+    </label>
+));
+
+CheckboxLabel.propTypes = {
+    className: PropTypes.string
+};
+
+CheckboxLabel.displayName = 'CheckboxLabel';
+
+export default CheckboxLabel;

src/routes/Intro/CheckboxLabel/index.js

@@ -0,0 +1,3 @@
+import CheckboxLabel from './CheckboxLabel';
+
+export default CheckboxLabel;

src/routes/Intro/CheckboxLabel/styles.less

@@ -0,0 +1,32 @@
+.checkbox-label-container {
+    display: flex;
+    flex-direction: row;
+    cursor: pointer;
+
+    .checkbox-container {
+        margin-right: calc(var(--spacing) * 0.5);
+
+        .checkbox {
+            width: var(--spacing);
+            height: var(--spacing);
+            fill: var(--color-surface);
+
+            &:global(.checked) {
+                fill: var(--color-surfacelight);
+                background-color: var(--color-primary);
+            }
+
+            &:focus-within {
+                fill: var(--color-surfacelighter);
+            }
+        }
+    }
+
+    .label {
+        color: var(--color-surface);
+    }
+
+    .link {
+        color: var(--color-surfacelighter);
+    }
+}