Styles cleanup, might break stuff

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak
2024-04-29 17:27:52 +02:00
parent 0ab9118dc4
commit 83cc802ecd
15 changed files with 36 additions and 185 deletions

View File

@ -68,7 +68,7 @@ const IconButton: React.FC<IIconButton> = ({
const classes = clsx(className, 'icon-button', {
active,
disabled,
'opacity-20 cursor-default': disabled,
});
return (
@ -89,10 +89,10 @@ const IconButton: React.FC<IIconButton> = ({
disabled={disabled}
type='button'
>
<div>
<div className='flex items-center justify-center'>
<Icon className={iconClassName} src={src} aria-hidden='true' />
</div>
{text && <span className='icon-button__text'>{text}</span>}
{text && <span className='pl-0.5'>{text}</span>}
</button>
);
};

View File

@ -29,9 +29,7 @@ const LocationSearch: React.FC<ILocationSearch> = ({ onSelected }) => {
const [value, setValue] = useState('');
const isEmpty = (): boolean => {
return !(value.length > 0);
};
const empty = !(value.length > 0);
const handleChange: React.ChangeEventHandler<HTMLInputElement> = ({ target }) => {
refreshCancelToken();
@ -48,7 +46,7 @@ const LocationSearch: React.FC<ILocationSearch> = ({ onSelected }) => {
const handleClear: React.MouseEventHandler = e => {
e.preventDefault();
if (!isEmpty()) {
if (!empty) {
setValue('');
}
};
@ -99,9 +97,9 @@ const LocationSearch: React.FC<ILocationSearch> = ({ onSelected }) => {
onKeyDown={handleKeyDown}
renderSuggestion={AutosuggestLocation}
/>
<div role='button' tabIndex={0} className='search__icon' onClick={handleClear}>
<Icon src={require('@tabler/icons/outline/search.svg')} className={clsx('svg-icon--search', { active: isEmpty() })} />
<Icon src={require('@tabler/icons/outline/backspace.svg')} className={clsx('svg-icon--backspace', { active: !isEmpty() })} aria-label={intl.formatMessage(messages.placeholder)} />
<div role='button' tabIndex={0} className='absolute inset-y-0 right-0 flex cursor-pointer items-center px-3 rtl:left-0 rtl:right-auto' onClick={handleClear}>
<Icon src={require('@tabler/icons/outline/search.svg')} className={clsx('h-5 w-5 text-gray-600', { 'hidden': !empty })} />
<Icon src={require('@tabler/icons/outline/backspace.svg')} className={clsx('h-5 w-5 text-gray-600', { 'hidden': empty })} aria-label={intl.formatMessage(messages.placeholder)} />
</div>
</div>
);