PhoneInput: improve styles

update-emoji-mart^2
Alex Gleason 2022-07-13 18:45:42 -05:00
rodzic 0591bf72a5
commit 7f7edf9162
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 7211D1F99744FBB7
3 zmienionych plików z 17 dodań i 7 usunięć

Wyświetl plik

@ -52,7 +52,7 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
}, []);
return (
<div className={classNames('mt-1 relative rounded-md shadow-sm', outerClassName)}>
<div className={classNames('mt-1 relative shadow-sm', outerClassName)}>
{icon ? (
<div className='absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none'>
<Icon src={icon} className='h-4 w-4 text-gray-400' aria-hidden='true' />

Wyświetl plik

@ -1,5 +1,6 @@
import React from 'react';
import { Icon, HStack } from 'soapbox/components/ui';
import DropdownMenu from 'soapbox/containers/dropdown_menu_container';
import { COUNTRY_CODES, CountryCode } from 'soapbox/utils/phone';
@ -26,7 +27,12 @@ const CountryCodeDropdown: React.FC<ICountryCodeDropdown> = ({ countryCode, onCh
return (
<DropdownMenu items={menu}>
<button className='px-4'>+{countryCode}</button>
<button className='px-4 items-center'>
<HStack space={1} alignItems='center'>
<div>+{countryCode}</div>
<Icon className='w-4 h-4 stroke-primary-600' src={require('@tabler/icons/chevron-down.svg')} />
</HStack>
</button>
</DropdownMenu>
);
};

Wyświetl plik

@ -57,14 +57,18 @@ const PhoneInput: React.FC<IPhoneInput> = (props) => {
}, [countryCode, nationalNumber]);
return (
<HStack alignItems='center'>
<CountryCodeDropdown
countryCode={countryCode}
onChange={setCountryCode}
/>
<HStack className='mt-1 shadow-sm'>
<div className='dark:bg-slate-800 border border-solid border-r-0 border-gray-300 dark:border-gray-600 flex items-center rounded-l-md'>
<CountryCodeDropdown
countryCode={countryCode}
onChange={setCountryCode}
/>
</div>
<Input
type='text'
outerClassName='mt-0 shadow-none'
className='rounded-l-none'
onChange={handleChange}
value={nationalNumber}
{...rest}