PhoneInput: improve styles

app/soapbox/components/ui/input/input.tsx

@@ -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' />

app/soapbox/components/ui/phone-input/country-code-dropdown.tsx

@@ -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>
   );
 };

app/soapbox/components/ui/phone-input/phone-input.tsx

@@ -57,14 +57,18 @@ const PhoneInput: React.FC<IPhoneInput> = (props) => {
   }, [countryCode, nationalNumber]);
 
   return (
-    <HStack alignItems='center'>
+    <HStack className='mt-1 shadow-sm'>
-      <CountryCodeDropdown
+      <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'>
-        countryCode={countryCode}
+        <CountryCodeDropdown
-        onChange={setCountryCode}
+          countryCode={countryCode}
-      />
+          onChange={setCountryCode}
+        />
+      </div>
 
       <Input
         type='text'
+        outerClassName='mt-0 shadow-none'
+        className='rounded-l-none'
         onChange={handleChange}
         value={nationalNumber}
         {...rest}