Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-01-11 22:40:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fix(Checkbox): improve typings and styles to follow mockups

Browse source
This commit is contained in:
Botzy 2025-02-17 18:09:17 +02:00
parent 72e7b7051e
commit f5ef7d653d
2 changed files with 26 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
src/components/Checkbox/Checkbox.less
View file

@ -1,5 +1,7 @@
// Copyright (C) 2017-2025 Smart code 203358507
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
.checkbox {
display: flex;
align-items: center;
@ -10,6 +12,7 @@
flex-direction: row;
align-items: center;
padding: 0.5rem 0;
cursor: pointer;
span {
font-size: 0.9rem;
@ -28,21 +31,23 @@
.checkbox-container {
position: relative;
width: 1.75rem;
height: 1.75rem;
border: 0.2rem solid var(--primary-accent-color);
border-radius: 0.5rem;
background-color: transparent;
width: 1.5rem;
height: 1.5rem;
border-radius: 0.3rem;
background-color: var(--overlay-color);
padding: 0.1rem;
display: flex;
flex: none;
margin-right: 1rem;
margin: 0 1rem 0 0.3rem;
align-items: center;
justify-content: center;
transition: all 0.2s ease-in-out;
cursor: pointer;
outline: none;
user-select: none;
outline-width: var(--focus-outline-size);
outline-color: @color-surface-light5;
outline-offset: 2px;
input[type='checkbox'] {
opacity: 0;
@ -54,7 +59,8 @@
.checkbox-icon {
width: 100%;
height: 100%;
height: 100%;
color: var(--primary-foreground-color);
}
&.disabled {
@ -68,5 +74,9 @@
&.checked {
background-color: var(--primary-accent-color);
}
&:hover, &:focus {
outline-style: solid;
}
}
}

13
src/components/Checkbox/Checkbox.tsx
View file

@ -15,7 +15,12 @@ type Props = {
label?: string;
link?: string;
href?: string;
onChange?: (props: any) => void;
onChange?: (props: {
type: string;
checked: boolean;
reactEvent: KeyboardEvent<HTMLInputElement> | ChangeEvent<HTMLInputElement>;
nativeEvent: Event;
}) => void;
error?: string;
};
@ -32,12 +37,12 @@ const Checkbox = React.forwardRef<HTMLInputElement, Props>(({ name, disabled, cl
}
}, [disabled, onChange]);
const onKeyDown = useCallback((event: KeyboardEvent<HTMLDivElement>) => {
const onKeyDown = useCallback((event: KeyboardEvent<HTMLInputElement>) => {
if ((event.key === 'Enter' || event.key === ' ') && !disabled) {
onChange && onChange({
type: 'select',
checked: event.target.checked,
reactEvent: event,
checked: !checked,
reactEvent: event as KeyboardEvent<HTMLInputElement>,
nativeEvent: event.nativeEvent,
});
}