Rework Button component to pass its label via children content

packages/app/components/profile/changeEmail/ChangeEmail.tsx

@@ -1,6 +1,7 @@
 import React, { ReactNode } from 'react';
 import { defineMessages, FormattedMessage as Message } from 'react-intl';
 import { Helmet } from 'react-helmet-async';
+
 import { SlideMotion } from 'app/components/ui/motion';
 import { ScrollIntoView } from 'app/components/ui/scroll';
 import { Input, Button, Form, FormModel, FormError } from 'app/components/ui/form';
@@ -39,8 +40,6 @@ interface FormStepParams {
 }
 
 const labels = defineMessages({
-    changeEmailButton: 'Change E‑mail',
-    sendEmailButton: 'Send E‑mail',
     codePlaceholder: 'Paste the code here',
     newEmailPlaceholder: 'Enter new E‑mail',
 });
@@ -107,12 +106,13 @@ export default class ChangeEmail extends React.Component<Props, State> {
 
                         {this.renderStepForms()}
 
-                        <Button
-                            color="violet"
-                            type="submit"
-                            block
-                            label={this.isLastStep() ? labels.changeEmailButton : labels.sendEmailButton}
-                        />
+                        <Button color="violet" type="submit" block>
+                            {this.isLastStep() ? (
+                                <Message key="changeEmailButton" defaultMessage="Change E‑mail" />
+                            ) : (
+                                <Message key="sendEmailButton" defaultMessage="Send E‑mail" />
+                            )}
+                        </Button>
                     </div>
 
                     <div className={helpLinks.helpLinks}>

packages/app/components/profile/changePassword/ChangePassword.tsx

@@ -7,7 +7,6 @@ import { BackButton } from '../ProfileForm';
 import styles from '../profileForm.scss';
 
 const labels = defineMessages({
-    changePasswordButton: 'Change password',
     newPasswordLabel: 'New password:',
     repeatNewPasswordLabel: 'Repeat the password:',
     logoutOnAllDevices: 'Logout on all devices',
@@ -99,7 +98,9 @@ export default class ChangePassword extends React.Component<Props> {
                             </div>
                         </div>
 
-                        <Button color="green" block label={labels.changePasswordButton} type="submit" />
+                        <Button color="green" block type="submit">
+                            <Message key="changePasswordButton" defaultMessage="Change password" />
+                        </Button>
                     </div>
                 </div>
             </Form>

packages/app/components/profile/changeUsername/ChangeUsername.tsx

@@ -1,15 +1,11 @@
 import React from 'react';
-import { defineMessages, FormattedMessage as Message } from 'react-intl';
+import { FormattedMessage as Message } from 'react-intl';
 import { Helmet } from 'react-helmet-async';
 import { Input, Button, Form, FormModel } from 'app/components/ui/form';
 import { BackButton } from 'app/components/profile/ProfileForm';
 
 import styles from '../profileForm.scss';
 
-const labels = defineMessages({
-    changeUsernameButton: 'Change nickname',
-});
-
 interface Props {
     username: string;
     form: FormModel;
@@ -72,7 +68,9 @@ export default class ChangeUsername extends React.Component<Props> {
                             </div>
                         </div>
 
-                        <Button color="green" block label={labels.changeUsernameButton} type="submit" />
+                        <Button color="green" block type="submit">
+                            <Message key="changeUsernameButton" defaultMessage="Change nickname" />
+                        </Button>
                     </div>
                 </div>
             </Form>

packages/app/components/profile/multiFactorAuth/MfaDisableForm.tsx

@@ -7,7 +7,6 @@ import mfaStyles from './mfa.scss';
 
 const messages = defineMessages({
     codePlaceholder: 'Enter the code here',
-    disable: 'Disable',
 });
 
 export default class MfaDisableForm extends React.Component<{
@@ -49,7 +48,9 @@ export default class MfaDisableForm extends React.Component<{
                     </div>
                 </div>
 
-                <Button type="submit" color="green" block label={messages.disable} />
+                <Button type="submit" color="green" block>
+                    <Message key="disable" defaultMessage="Disable" />
+                </Button>
             </Form>
         );
     }

packages/app/components/profile/multiFactorAuth/MfaEnable.tsx

@@ -1,4 +1,6 @@
 import React from 'react';
+import { FormattedMessage as Message, defineMessages } from 'react-intl';
+
 import { Button, FormModel } from 'app/components/ui/form';
 import styles from 'app/components/profile/profileForm.scss';
 import Stepper from 'app/components/ui/stepper';
@@ -7,7 +9,6 @@ import { ScrollIntoView } from 'app/components/ui/scroll';
 import logger from 'app/services/logger';
 import { getSecret, enable as enableMFA } from 'app/services/api/mfa';
 import { Form } from 'app/components/ui/form';
-import { defineMessages } from 'react-intl';
 
 import Context from '../Context';
 import Instructions from './instructions';
@@ -105,7 +106,9 @@ export default class MfaEnable extends React.PureComponent<Props, State> {
 
                     {this.renderStepForms()}
 
-                    <Button color="green" onClick={buttonAction} loading={isLoading} block label={buttonLabel} />
+                    <Button color="green" onClick={buttonAction} loading={isLoading} block>
+                        <Message {...buttonLabel} />
+                    </Button>
                 </div>
             </div>
         );

packages/app/components/profile/passwordRequestForm/PasswordRequestForm.tsx

@@ -37,7 +37,9 @@ const PasswordRequestForm: ComponentType<Props> = ({ form, onSubmit }) => (
                 />
             </div>
 
-            <Button type="submit" color="green" label={<Message key="continue" defaultMessage="Continue" />} block />
+            <Button type="submit" color="green" block>
+                <Message key="continue" defaultMessage="Continue" />
+            </Button>
         </Form>
     </Popup>
 );