Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-21 11:42:05 +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 // Copyright (C) 2017-2025 Smart code 203358507
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
.checkbox { .checkbox {
display: flex; display: flex;
align-items: center; align-items: center;
@ -10,6 +12,7 @@
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
padding: 0.5rem 0; padding: 0.5rem 0;
cursor: pointer;
span { span {
font-size: 0.9rem; font-size: 0.9rem;
@ -28,21 +31,23 @@
.checkbox-container { .checkbox-container {
position: relative; position: relative;
width: 1.75rem; width: 1.5rem;
height: 1.75rem; height: 1.5rem;
border: 0.2rem solid var(--primary-accent-color); border-radius: 0.3rem;
border-radius: 0.5rem; background-color: var(--overlay-color);
background-color: transparent;
padding: 0.1rem; padding: 0.1rem;
display: flex; display: flex;
flex: none; flex: none;
margin-right: 1rem; margin: 0 1rem 0 0.3rem;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
cursor: pointer; cursor: pointer;
outline: none; outline: none;
user-select: none; user-select: none;
outline-width: var(--focus-outline-size);
outline-color: @color-surface-light5;
outline-offset: 2px;
input[type='checkbox'] { input[type='checkbox'] {
opacity: 0; opacity: 0;
@ -54,7 +59,8 @@
.checkbox-icon { .checkbox-icon {
width: 100%; width: 100%;
height: 100%; height: 100%;
color: var(--primary-foreground-color);
} }
&.disabled { &.disabled {
@ -68,5 +74,9 @@
&.checked { &.checked {
background-color: var(--primary-accent-color); 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; label?: string;
link?: string; link?: string;
href?: string; href?: string;
onChange?: (props: any) => void; onChange?: (props: {
type: string;
checked: boolean;
reactEvent: KeyboardEvent<HTMLInputElement> | ChangeEvent<HTMLInputElement>;
nativeEvent: Event;
}) => void;
error?: string; error?: string;
}; };
@ -32,12 +37,12 @@ const Checkbox = React.forwardRef<HTMLInputElement, Props>(({ name, disabled, cl
} }
}, [disabled, onChange]); }, [disabled, onChange]);
const onKeyDown = useCallback((event: KeyboardEvent<HTMLDivElement>) => { const onKeyDown = useCallback((event: KeyboardEvent<HTMLInputElement>) => {
if ((event.key === 'Enter' || event.key === ' ') && !disabled) { if ((event.key === 'Enter' || event.key === ' ') && !disabled) {
onChange && onChange({ onChange && onChange({
type: 'select', type: 'select',
checked: event.target.checked, checked: !checked,
reactEvent: event, reactEvent: event as KeyboardEvent<HTMLInputElement>,
nativeEvent: event.nativeEvent, nativeEvent: event.nativeEvent,
}); });
} }