Birthdays: Use custom header

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

app/soapbox/components/birthday_input.js

@@ -6,10 +6,15 @@ import { defineMessages, injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
 import 'react-datepicker/dist/react-datepicker.css';
 
+import IconButton from 'soapbox/components/icon_button';
 import { getFeatures } from 'soapbox/utils/features';
 
 const messages = defineMessages({
   birthdayPlaceholder: { id: 'edit_profile.fields.birthday_placeholder', defaultMessage: 'Your birth date' },
+  previousMonth: { id: 'datepicker.previous_month', defaultMessage: 'Previous month' },
+  nextMonth: { id: 'datepicker.next_month', defaultMessage: 'Next month' },
+  previousYear: { id: 'datepicker.previous_year', defaultMessage: 'Previous year' },
+  nextYear: { id: 'datepicker.next_year', defaultMessage: 'Next year' },
 });
 
 const mapStateToProps = state => {
@@ -34,6 +39,63 @@ class EditProfile extends ImmutablePureComponent {
     value: PropTypes.instanceOf(Date),
   };
 
+  renderHeader = ({
+    decreaseMonth,
+    increaseMonth,
+    prevMonthButtonDisabled,
+    nextMonthButtonDisabled,
+    decreaseYear,
+    increaseYear,
+    prevYearButtonDisabled,
+    nextYearButtonDisabled,
+    date,
+  }) => {
+    const { intl } = this.props;
+
+    return (
+      <div className='datepicker__header'>
+        <div className='datepicker__months'>
+          <IconButton
+            className='datepicker__button'
+            src={require('@tabler/icons/icons/chevron-left.svg')}
+            onClick={decreaseMonth}
+            disabled={prevMonthButtonDisabled}
+            aria-label={intl.formatMessage(messages.previousMonth)}
+            title={intl.formatMessage(messages.previousMonth)}
+          />
+          {intl.formatDate(date, { month: 'long' })}
+          <IconButton
+            className='datepicker__button'
+            src={require('@tabler/icons/icons/chevron-right.svg')}
+            onClick={increaseMonth}
+            disabled={nextMonthButtonDisabled}
+            aria-label={intl.formatMessage(messages.nextMonth)}
+            title={intl.formatMessage(messages.nextMonth)}
+          />
+        </div>
+        <div className='datepicker__years'>
+          <IconButton
+            className='datepicker__button'
+            src={require('@tabler/icons/icons/chevron-left.svg')}
+            onClick={decreaseYear}
+            disabled={prevYearButtonDisabled}
+            aria-label={intl.formatMessage(messages.previousYear)}
+            title={intl.formatMessage(messages.previousYear)}
+          />
+          {intl.formatDate(date, { year: 'numeric' })}
+          <IconButton
+            className='datepicker__button'
+            src={require('@tabler/icons/icons/chevron-right.svg')}
+            onClick={increaseYear}
+            disabled={nextYearButtonDisabled}
+            aria-label={intl.formatMessage(messages.nextYear)}
+            title={intl.formatMessage(messages.nextYear)}
+          />
+        </div>
+      </div>
+    );
+  }
+
   render() {
     const { intl, value, onChange, supportsBirthdays, hint, required, minAge } = this.props;
 
@@ -59,6 +121,7 @@ class EditProfile extends ImmutablePureComponent {
             minDate={new Date('1900-01-01')}
             maxDate={maxDate}
             required={required}
+            renderCustomHeader={this.renderHeader}
           />
         </div>
       </div>

app/styles/components/datepicker.scss

@@ -33,6 +33,7 @@
 
 .datepicker .react-datepicker {
   box-shadow: 0 0 6px 0 rgb(0 0 0 / 30%);
+  font-family: inherit;
   font-size: 12px;
   border: 0;
   border-radius: 10px;

app/styles/forms.scss

@@ -648,19 +648,8 @@ code {
     }
 
     .react-datepicker {
-      &__navigation {
-        display: flex;
-        height: 32px;
-        width: 32px;
-        margin: 0;
-        background: none;
-        line-height: 24px;
-
-        &:hover,
-        &:active,
-        &:focus {
-          background: none;
-        }
+      &__header {
+        padding-top: 4px;
       }
 
       &__input-container {
@@ -671,6 +660,34 @@ code {
         }
       }
     }
+
+    &__years,
+    &__months {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin: 0 4px;
+      font-size: 16px;
+    }
+
+    &__button {
+      width: 28px;
+      margin: 0;
+      padding: 4px;
+      background: transparent;
+      color: var(--primary-text-color);
+
+      &:hover,
+      &:active,
+      &:focus {
+        background: none;
+      }
+
+      .svg-icon {
+        height: 20px;
+        width: 20px;
+      }
+    }
   }
 }