moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Change classNames "search" in location-search to use only Tailwind

This commit is contained in:
danidfra 2024-11-04 22:01:03 -03:00
parent ada9e53ff2
commit 203979113c
1 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/location-search.tsx
View File

@ -6,10 +6,10 @@ import { defineMessages, useIntl } from 'react-intl';
import { locationSearch } from 'soapbox/actions/events'; import { locationSearch } from 'soapbox/actions/events';
import AutosuggestInput, { AutoSuggestion } from 'soapbox/components/autosuggest-input'; import AutosuggestInput, { AutoSuggestion } from 'soapbox/components/autosuggest-input';
import Icon from 'soapbox/components/icon';
import { useAppDispatch } from 'soapbox/hooks'; import { useAppDispatch } from 'soapbox/hooks';
import AutosuggestLocation from './autosuggest-location'; import AutosuggestLocation from './autosuggest-location';
import SvgIcon from './ui/icon/svg-icon';
const noOp = () => {}; const noOp = () => {};
@ -85,7 +85,7 @@ const LocationSearch: React.FC<ILocationSearch> = ({ onSelected }) => {
}, [value]); }, [value]);
return ( return (
<div className='search'> <div className='relative'>
<AutosuggestInput <AutosuggestInput
className='rounded-full' className='rounded-full'
placeholder={intl.formatMessage(messages.placeholder)} placeholder={intl.formatMessage(messages.placeholder)}
@ -99,9 +99,9 @@ const LocationSearch: React.FC<ILocationSearch> = ({ onSelected }) => {
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
renderSuggestion={AutosuggestLocation} renderSuggestion={AutosuggestLocation}
/> />
<div role='button' tabIndex={0} className='search__icon' onClick={handleClear}> <div role='button' tabIndex={0} className='focus:!outline-0' onClick={handleClear}>
<Icon src={require('@tabler/icons/outline/search.svg')} className={clsx('svg-icon--search', { active: isEmpty() })} /> <SvgIcon src={require('@tabler/icons/outline/search.svg')} className={clsx('pointer-events-none absolute right-4 top-1/2 z-[2] inline-block size-[18px] -translate-y-1/2 cursor-default text-gray-400 opacity-0 rtl:left-4 rtl:right-auto', { 'opacity-100': isEmpty() })} />
<Icon src={require('@tabler/icons/outline/backspace.svg')} className={clsx('svg-icon--backspace', { active: !isEmpty() })} aria-label={intl.formatMessage(messages.placeholder)} /> <SvgIcon src={require('@tabler/icons/outline/backspace.svg')} className={clsx('pointer-events-none absolute right-4 top-1/2 z-[2] inline-block size-[22px] -translate-y-1/2 cursor-pointer text-gray-400 opacity-0 rtl:left-4 rtl:right-auto', { 'pointer-events-auto opacity-100': !isEmpty() })} aria-label={intl.formatMessage(messages.placeholder)} />
</div> </div>
</div> </div>
); );