Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-20 06:32:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

ConsentCheckbox adapted to the latest changes in common

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-09-25 14:46:51 +03:00
parent b751d63759
commit 93353d1fd9
2 changed files with 18 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/routes/Intro/ConsentCheckbox/ConsentCheckbox.js
View file

@ -4,7 +4,7 @@ const classnames = require('classnames');
const { Button, Checkbox } = require('stremio/common');
const styles = require('./styles');
const ConsentCheckbox = React.forwardRef(({ label, link, href, toggle, ...props }, ref) => {
const ConsentCheckbox = React.forwardRef(({ className, checked, label, link, href, toggle, ...props }, ref) => {
const checkboxOnClick = React.useCallback((event) => {
if (!event.nativeEvent.togglePrevented && typeof toggle === 'function') {
toggle(event);
@ -14,7 +14,7 @@ const ConsentCheckbox = React.forwardRef(({ label, link, href, toggle, ...props
event.nativeEvent.togglePrevented = true;
}, []);
return (
<Checkbox {...props} ref={ref} className={classnames(props.className, styles['consent-checkbox-container'])} onClick={checkboxOnClick}>
<Checkbox {...props} ref={ref} className={classnames(className, styles['consent-checkbox-container'])} checked={checked} onClick={checkboxOnClick}>
<div className={styles['label']}>
{label}
{

26
src/routes/Intro/ConsentCheckbox/styles.less
View file

@ -1,21 +1,20 @@
:import('~stremio/common/Checkbox/styles.less') {
checkbox-icon: icon;
}
.consent-checkbox-container {
--icon-size: 1.2rem;
--icon-color: var(--color-surface);
--icon-background-color: transparent;
display: flex;
flex-direction: row;
align-items: center;
padding: 0.5rem 0.3rem;
&:global(.checked) {
--icon-color: var(--color-surfacelight);
--icon-background-color: var(--color-primary);
}
padding: 0.5rem;
&:focus, &:hover {
--icon-color: var(--color-surfacelighter);
background-color: var(--color-surfacedarker60);
.checkbox-icon {
fill: var(--color-surfacelighter);
}
.label {
color: var(--color-surfacelighter);
@ -25,6 +24,13 @@
}
}
.checkbox-icon {
flex: none;
width: 1.2rem;
height: 1.2rem;
fill: var(--color-surfacelight);
}
.label {
flex: 1;
margin-left: 0.5rem;