From b1bc544a018ec004ec769c2db6e439d193ada244 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Wed, 26 Jan 2022 18:43:00 +0100
Subject: [PATCH] Birthdays: Use custom header
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.js | 63 ++++++++++++++++++++++++
 app/styles/components/datepicker.scss    |  1 +
 app/styles/forms.scss                    | 43 +++++++++++-----
 3 files changed, 94 insertions(+), 13 deletions(-)

diff --git a/app/soapbox/components/birthday_input.js b/app/soapbox/components/birthday_input.js
index 36473dac8..d94700926 100644
--- a/app/soapbox/components/birthday_input.js
+++ b/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>
diff --git a/app/styles/components/datepicker.scss b/app/styles/components/datepicker.scss
index 76996ffda..dd74db173 100644
--- a/app/styles/components/datepicker.scss
+++ b/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;
diff --git a/app/styles/forms.scss b/app/styles/forms.scss
index 9c46a965f..64ab2fb4d 100644
--- a/app/styles/forms.scss
+++ b/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;
+      }
+    }
   }
 }