From 7f7edf916258525f744423bf114da7a1929d1f29 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 13 Jul 2022 18:45:42 -0500
Subject: [PATCH] PhoneInput: improve styles

---
 app/soapbox/components/ui/input/input.tsx          |  2 +-
 .../ui/phone-input/country-code-dropdown.tsx       |  8 +++++++-
 .../components/ui/phone-input/phone-input.tsx      | 14 +++++++++-----
 3 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/app/soapbox/components/ui/input/input.tsx b/app/soapbox/components/ui/input/input.tsx
index 488f2733e..d1cf7cf7c 100644
--- a/app/soapbox/components/ui/input/input.tsx
+++ b/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' />
diff --git a/app/soapbox/components/ui/phone-input/country-code-dropdown.tsx b/app/soapbox/components/ui/phone-input/country-code-dropdown.tsx
index 3e0e7c778..f15302fa6 100644
--- a/app/soapbox/components/ui/phone-input/country-code-dropdown.tsx
+++ b/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>
   );
 };
diff --git a/app/soapbox/components/ui/phone-input/phone-input.tsx b/app/soapbox/components/ui/phone-input/phone-input.tsx
index d41c49414..20c758612 100644
--- a/app/soapbox/components/ui/phone-input/phone-input.tsx
+++ b/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'>
-      <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}