Merge branch 'birthday-input-clear' into 'develop'

Allow to clear BirthdayInput

See merge request soapbox-pub/soapbox-fe!1654

app/soapbox/components/birthday_input.tsx

@@ -109,7 +109,7 @@ const BirthdayInput: React.FC<IBirthdayInput> = ({ value, onChange, required })
     );
   };
 
-  const handleChange = (date: Date) => onChange(new Date(date.getTime() - (date.getTimezoneOffset() * 60000)).toISOString().slice(0, 10));
+  const handleChange = (date: Date) => onChange(date ? new Date(date.getTime() - (date.getTimezoneOffset() * 60000)).toISOString().slice(0, 10) : '');
 
   return (
     <div className='mt-1 relative rounded-md shadow-sm'>
@@ -123,6 +123,7 @@ const BirthdayInput: React.FC<IBirthdayInput> = ({ value, onChange, required })
           maxDate={maxDate}
           required={required}
           renderCustomHeader={renderCustomHeader}
+          isClearable={!required}
         />)}
       </BundleContainer>
     </div>

app/soapbox/features/edit_profile/index.tsx

@@ -4,6 +4,7 @@ import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { updateNotificationSettings } from 'soapbox/actions/accounts';
 import { patchMe } from 'soapbox/actions/me';
 import snackbar from 'soapbox/actions/snackbar';
+import BirthdayInput from 'soapbox/components/birthday_input';
 import List, { ListItem } from 'soapbox/components/list';
 import {
   Button,
@@ -232,6 +233,10 @@ const EditProfile: React.FC = () => {
     };
   };
 
+  const handleBirthdayChange = (date: string) => {
+    updateData('birthday', date);
+  };
+
   const handleHideNetworkChange: React.ChangeEventHandler<HTMLInputElement> = e => {
     const hide = e.target.checked;
 
@@ -315,12 +320,9 @@ const EditProfile: React.FC = () => {
           <FormGroup
             labelText={<FormattedMessage id='edit_profile.fields.birthday_label' defaultMessage='Birthday' />}
           >
-            <Input
-              type='text'
+            <BirthdayInput
               value={data.birthday}
-              onChange={handleTextChange('birthday')}
-              placeholder='YYYY-MM-DD'
-              pattern='\d{4}-\d{2}-\d{2}'
+              onChange={handleBirthdayChange}
             />
           </FormGroup>
         )}

app/styles/components/datepicker.scss

@@ -3,7 +3,7 @@
 }
 
 .react-datepicker__input-container > input {
-  @apply dark:bg-slate-800 dark:text-white block w-full sm:text-sm border-gray-300 dark:border-gray-600 rounded-md focus:ring-indigo-500 focus:border-indigo-500;
+  @apply dark:bg-slate-800 dark:text-white block w-full sm:text-sm border-gray-300 dark:border-gray-600 rounded-md focus:ring-primary-500 focus:border-primary-500;
 
   &.has-error {
     @apply text-red-600 border-red-600;
@@ -132,3 +132,10 @@
 .react-datepicker__year-text--keyboard-selected {
   @apply bg-primary-50 hover:bg-primary-100 dark:bg-slate-700 dark:hover:bg-slate-600 text-primary-600 dark:text-primary-400;
 }
+
+.react-datepicker__close-icon::after {
+  @apply bg-transparent text-gray-600 dark:text-gray-400 text-base;
+  font-family: 'Font Awesome 5 Free';
+  content: "";
+  font-weight: 900;
+}