r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

💄 fix options styling

Browse source
This commit is contained in:
ghalestrilo 2020-06-23 16:45:35 -03:00
parent ad3db32fa3
commit 181e832bfd
1 changed files with 16 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
client/components/mobile/Selector.jsx
View file

@ -8,27 +8,34 @@ const PreferenceTitle = styled.h4.attrs(props => ({ ...props, className: 'prefer
color: ${prop('primaryTextColor')} !important; color: ${prop('primaryTextColor')} !important;
`; `;
const Preference = styled.div.attrs(props => ({ ...props, className: 'preference' }))`
flex-wrap: nowrap !important;
align-items: baseline !important;
justify-items: space-between
`;
const Selector = ({ const Selector = ({
title, value, onSelect, options, title, value, onSelect, options,
}) => ( }) => (
<div className="preference"> <Preference>
{/* <h4 className="preference__title">{title}</h4> */}
<PreferenceTitle>{title}</PreferenceTitle> <PreferenceTitle>{title}</PreferenceTitle>
<div className="preference__options">
{options.map(option => ( {options.map(option => (
<div className="preference__options" key={option.id}> <React.Fragment><input
<input
type="radio" type="radio"
onChange={() => onSelect(option.value)} onChange={() => onSelect(option.value)}
aria-label={option.ariaLabel} aria-label={option.ariaLabel}
name={option.name} name={option.name}
key={option.id}
id={option.id} id={option.id}
className="preference__radio-button" className="preference__radio-button"
value={option.value} value={option.value}
checked={value === option.value} checked={value === option.value}
/> /><label htmlFor={option.id} className="preference__option">{option.label}</label>
<label htmlFor={option.id} className="preference__option">{option.label}</label> </React.Fragment>))}
</div>))}
</div> </div>
</Preference>
); );
Selector.defaultProps = { Selector.defaultProps = {