"birth date" --> "birthday", move the toggle next to the picker

app/soapbox/components/birthday_input.js

@@ -9,7 +9,7 @@ import 'react-datepicker/dist/react-datepicker.css';
 import { getFeatures } from 'soapbox/utils/features';
 
 const messages = defineMessages({
-  birthdayPlaceholder: { id: 'edit_profile.fields.birthday_placeholder', defaultMessage: 'Your birth date' },
+  birthdayPlaceholder: { id: 'edit_profile.fields.birthday_placeholder', defaultMessage: 'Your birthday' },
 });
 
 const mapStateToProps = state => {
@@ -52,7 +52,6 @@ class EditProfile extends ImmutablePureComponent {
         <div className='datepicker__input'>
           <DatePicker
             selected={value}
-            dateFormat='d MMMM yyyy'
             wrapperClassName='react-datepicker-wrapper'
             onChange={onChange}
             placeholderText={intl.formatMessage(messages.birthdayPlaceholder)}
@@ -64,4 +63,4 @@ class EditProfile extends ImmutablePureComponent {
     );
   }
 
-}
+}

app/soapbox/features/birthdays/account.js

@@ -12,7 +12,7 @@ import Permalink from 'soapbox/components/permalink';
 import { makeGetAccount } from 'soapbox/selectors';
 
 const messages = defineMessages({
-  birthDate: { id: 'account.birth_date', defaultMessage: 'Birth date: {date}' },
+  birthday: { id: 'account.birthday', defaultMessage: 'Born {date}' },
 });
 
 const makeMapStateToProps = () => {
@@ -73,7 +73,7 @@ class Account extends ImmutablePureComponent {
           </Permalink>
           <div
             className='account__birthday'
-            title={intl.formatMessage(messages.birthDate, {
+            title={intl.formatMessage(messages.birthday, {
               date: formattedBirthday,
             })}
           >

app/soapbox/features/edit_profile/index.js

@@ -50,7 +50,7 @@ const messages = defineMessages({
   error: { id: 'edit_profile.error', defaultMessage: 'Profile update failed' },
   bioPlaceholder: { id: 'edit_profile.fields.bio_placeholder', defaultMessage: 'Tell us about yourself.' },
   displayNamePlaceholder: { id: 'edit_profile.fields.display_name_placeholder', defaultMessage: 'Name' },
-  birthdayPlaceholder: { id: 'edit_profile.fields.birthday_placeholder', defaultMessage: 'Your birth date' },
+  birthdayPlaceholder: { id: 'edit_profile.fields.birthday_placeholder', defaultMessage: 'Your birthday' },
 });
 
 const makeMapStateToProps = () => {
@@ -285,11 +285,22 @@ class EditProfile extends ImmutablePureComponent {
                 onChange={this.handleTextChange}
                 rows={3}
               />
-              <BirthdayInput
+              {supportsBirthdays && (
-                hint={<FormattedMessage id='edit_profile.fields.birthday_label' defaultMessage='Birth date' />}
+                <>
-                value={this.state.birthday}
+                  <BirthdayInput
-                onChange={this.handleBirthdayChange}
+                    hint={<FormattedMessage id='edit_profile.fields.birthday_label' defaultMessage='Birthday' />}
-              />
+                    value={this.state.birthday}
+                    onChange={this.handleBirthdayChange}
+                  />
+                  <Checkbox
+                    label={<FormattedMessage id='edit_profile.fields.show_birthday_label' defaultMessage='Show my birthday' />}
+                    hint={<FormattedMessage id='edit_profile.hints.show_birthday' defaultMessage='Your birthday will be visible on your profile.' />}
+                    name='show_birthday'
+                    checked={this.state.show_birthday}
+                    onChange={this.handleCheckboxChange}
+                  />
+                </>
+              )}
               <div className='fields-row'>
                 <div className='fields-row__column fields-row__column-6'>
                   <ProfilePreview account={this.makePreviewAccount()} />
@@ -344,13 +355,6 @@ class EditProfile extends ImmutablePureComponent {
                 checked={this.state.discoverable}
                 onChange={this.handleCheckboxChange}
               />
-              {supportsBirthdays && <Checkbox
-                label={<FormattedMessage id='edit_profile.fields.show_birthday_label' defaultMessage='Show my birth date' />}
-                hint={<FormattedMessage id='edit_profile.hints.show_birthday' defaultMessage='Your birth date will be visible on your profile.' />}
-                name='show_birthday'
-                checked={this.state.show_birthday}
-                onChange={this.handleCheckboxChange}
-              />}
               {supportsEmailList && <Checkbox
                 label={<FormattedMessage id='edit_profile.fields.accepts_email_list_label' defaultMessage='Subscribe to newsletter' />}
                 hint={<FormattedMessage id='edit_profile.hints.accepts_email_list' defaultMessage='Opt-in to news and marketing updates.' />}

app/soapbox/features/ui/components/profile_info_panel.js

@@ -98,7 +98,7 @@ class ProfileInfoPanel extends ImmutablePureComponent {
         <div className='profile-info-panel-content__birthday' title={formattedBirthday}>
           <Icon src={require('@tabler/icons/icons/ballon.svg')} />
           <FormattedMessage
-            id='account.birthday' defaultMessage='Has birthday today!'
+            id='account.birthday_today' defaultMessage='Birthday is today!'
           />
         </div>
       );
@@ -107,7 +107,7 @@ class ProfileInfoPanel extends ImmutablePureComponent {
       <div className='profile-info-panel-content__birthday'>
         <Icon src={require('@tabler/icons/icons/ballon.svg')} />
         <FormattedMessage
-          id='account.birth_date' defaultMessage='Birth date: {date}' values={{
+          id='account.birthday' defaultMessage='Born {date}' values={{
             date: formattedBirthday,
           }}
         />