From 4af99de1095b08a2177e8374ffefa81136f4a207 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Tue, 19 Jul 2022 00:11:12 +0200
Subject: [PATCH 1/2] Allow to clear BirthdayInput
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/components/birthday_input.tsx   |  3 ++-
 app/soapbox/features/edit_profile/index.tsx | 12 +++++++-----
 app/styles/components/datepicker.scss       |  9 ++++++++-
 3 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/app/soapbox/components/birthday_input.tsx b/app/soapbox/components/birthday_input.tsx
index e263fb02e2..fc9521ca04 100644
--- a/app/soapbox/components/birthday_input.tsx
+++ b/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>
diff --git a/app/soapbox/features/edit_profile/index.tsx b/app/soapbox/features/edit_profile/index.tsx
index a2fc13b92b..e176839409 100644
--- a/app/soapbox/features/edit_profile/index.tsx
+++ b/app/soapbox/features/edit_profile/index.tsx
@@ -25,6 +25,7 @@ import resizeImage from 'soapbox/utils/resize_image';
 import ProfilePreview from './components/profile-preview';
 
 import type { Account } from 'soapbox/types/entities';
+import BirthdayInput from 'soapbox/components/birthday_input';
 
 /**
  * Whether the user is hiding their follows and/or followers.
@@ -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>
         )}
diff --git a/app/styles/components/datepicker.scss b/app/styles/components/datepicker.scss
index ed5a5d8397..6d7552a802 100644
--- a/app/styles/components/datepicker.scss
+++ b/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;
+}

From b0a9244782931d47adf7cf0007a8297ff64e9f88 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <me@mkljczk.pl>
Date: Mon, 18 Jul 2022 22:35:07 +0000
Subject: [PATCH 2/2] Update index.tsx

---
 app/soapbox/features/edit_profile/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/soapbox/features/edit_profile/index.tsx b/app/soapbox/features/edit_profile/index.tsx
index e176839409..21df0a327e 100644
--- a/app/soapbox/features/edit_profile/index.tsx
+++ b/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,
@@ -25,7 +26,6 @@ import resizeImage from 'soapbox/utils/resize_image';
 import ProfilePreview from './components/profile-preview';
 
 import type { Account } from 'soapbox/types/entities';
-import BirthdayInput from 'soapbox/components/birthday_input';
 
 /**
  * Whether the user is hiding their follows and/or followers.