From 73d23d594ed514be3bb38b5df66563fc919922a7 Mon Sep 17 00:00:00 2001
From: "D. Ror" <imnasnainaec@gmail.com>
Date: Fri, 11 Dec 2020 11:43:05 -0500
Subject: [PATCH 1/4] Remove non-button props from those passed to Button.

---
 src/components/Buttons/EditTextDialog.tsx        |  1 -
 src/components/Buttons/FileInputButton.tsx       |  9 ++++++---
 src/components/Buttons/LoadingButton.tsx         | 14 +++++++++-----
 src/components/Buttons/LoadingDoneButton.tsx     | 16 +++++++++++-----
 .../ProjectExport/ExportProjectButton.tsx        |  8 +++++---
 5 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/src/components/Buttons/EditTextDialog.tsx b/src/components/Buttons/EditTextDialog.tsx
index b77761e972..40960c198e 100644
--- a/src/components/Buttons/EditTextDialog.tsx
+++ b/src/components/Buttons/EditTextDialog.tsx
@@ -90,7 +90,6 @@ export default function EditTextDialog(props: EditTextDialogProps) {
           color="primary"
           variant="contained"
           loading={loading}
-          {...props}
         >
           <Translate id="buttons.confirm" />
         </LoadingButton>
diff --git a/src/components/Buttons/FileInputButton.tsx b/src/components/Buttons/FileInputButton.tsx
index 8c712fce5d..7e768010bd 100644
--- a/src/components/Buttons/FileInputButton.tsx
+++ b/src/components/Buttons/FileInputButton.tsx
@@ -9,7 +9,10 @@ export interface BrowseProps {
 
 // This button links to a set of functions
 export default function FileInputButton(props: BrowseProps & ButtonProps) {
-  function updateFile(files: FileList) {
+  // Use Destructuring to define buttonProps without our BrowseProps.
+  const { updateFile, accept, ...buttonProps } = props;
+
+  function updateFirstFile(files: FileList) {
     const file = files[0];
     if (file) {
       props.updateFile(file);
@@ -24,13 +27,13 @@ export default function FileInputButton(props: BrowseProps & ButtonProps) {
         type="file"
         name="name"
         accept={props.accept}
-        onChange={(e) => updateFile(e.target.files as FileList)}
+        onChange={(e) => updateFirstFile(e.target.files as FileList)}
         style={{ display: "none" }}
       />
 
       {/* ... and this button is tied to it with the htmlFor property */}
       <label htmlFor="file-input">
-        <Button variant="contained" component="span" {...props}>
+        <Button variant="contained" component="span" {...buttonProps}>
           {props.children}
         </Button>
       </label>
diff --git a/src/components/Buttons/LoadingButton.tsx b/src/components/Buttons/LoadingButton.tsx
index 7a86d650da..7d89bb3748 100644
--- a/src/components/Buttons/LoadingButton.tsx
+++ b/src/components/Buttons/LoadingButton.tsx
@@ -1,18 +1,22 @@
-import React from "react";
 import { Button, CircularProgress } from "@material-ui/core";
-import { buttonSuccess } from "../../types/theme";
 import { ButtonProps } from "@material-ui/core/Button";
+import React from "react";
 
-interface Props {
+import { buttonSuccess } from "../../types/theme";
+
+interface LoadingProps {
   loading: boolean;
 }
 
 /**
  * A button that shows a spinning wheel when loading=true
  */
-export default function LoadingButton(props: Props & ButtonProps) {
+export default function LoadingButton(props: LoadingProps & ButtonProps) {
+  // Use Destructuring to define buttonProps without our LoadingProps.
+  const { loading, ...buttonProps } = props;
+
   return (
-    <Button variant="contained" disabled={props.loading} {...props}>
+    <Button variant="contained" disabled={props.loading} {...buttonProps}>
       {props.children}
       {props.loading && (
         <CircularProgress
diff --git a/src/components/Buttons/LoadingDoneButton.tsx b/src/components/Buttons/LoadingDoneButton.tsx
index 61a012dfc7..899cb1a949 100644
--- a/src/components/Buttons/LoadingDoneButton.tsx
+++ b/src/components/Buttons/LoadingDoneButton.tsx
@@ -1,11 +1,12 @@
-import React from "react";
 import { Button, CircularProgress } from "@material-ui/core";
-import { buttonSuccess } from "../../types/theme";
 import { ButtonProps } from "@material-ui/core/Button";
 import { Check } from "@material-ui/icons";
 import { Translate } from "react-localize-redux";
+import React from "react";
 
-interface Props {
+import { buttonSuccess } from "../../types/theme";
+
+interface LoadingDoneProps {
   loading: boolean;
   done: boolean;
   doneText?: React.ReactNode | string;
@@ -15,12 +16,17 @@ interface Props {
 /**
  * A button that shows a spinning wheel when loading and "done" when done
  */
-export default function LoadingDoneButton(props: Props & ButtonProps) {
+export default function LoadingDoneButton(
+  props: LoadingDoneProps & ButtonProps
+) {
+  // Use Destructuring to define buttonProps without our LoadingDoneProps.
+  const { loading, done, doneText, disabled, ...buttonProps } = props;
+
   return (
     <Button
       type="submit"
       variant="contained"
-      {...props}
+      {...buttonProps}
       disabled={props.disabled ? props.disabled : props.loading}
       style={{
         backgroundColor: props.done ? buttonSuccess : undefined,
diff --git a/src/components/ProjectExport/ExportProjectButton.tsx b/src/components/ProjectExport/ExportProjectButton.tsx
index d4aa6e22b6..99952db792 100644
--- a/src/components/ProjectExport/ExportProjectButton.tsx
+++ b/src/components/ProjectExport/ExportProjectButton.tsx
@@ -7,7 +7,7 @@ import DownloadButton from "./DownloadButton";
 import { ExportStatus } from "./ExportProjectActions";
 import { ExportProjectState } from "./ExportProjectReducer";
 
-interface ExportProjectButtonProps {
+interface ExportProjectProps {
   exportProject: (projectId: string) => void;
   exportResult: ExportProjectState;
   projectId: string;
@@ -15,8 +15,10 @@ interface ExportProjectButtonProps {
 
 /** A button for exporting project to Lift file */
 export default function ExportProjectButton(
-  props: ButtonProps & ExportProjectButtonProps
+  props: ButtonProps & ExportProjectProps
 ) {
+  // Use Destructuring to define buttonProps without our ExportProjectProps.
+  const { exportProject, exportResult, projectId, ...buttonProps } = props;
   const sameProject = props.projectId === props.exportResult.projectId;
   // The export button will not be clickable if another export is underway.
   const loading = [ExportStatus.InProgress, ExportStatus.Success].includes(
@@ -33,7 +35,7 @@ export default function ExportProjectButton(
         onClick={exportProj}
         color="primary"
         loading={loading}
-        {...props}
+        {...buttonProps}
       >
         <Translate id="buttons.export" />
       </LoadingButton>

From 2340b5473c85073eaf6b16cd02f04688afc8dc33 Mon Sep 17 00:00:00 2001
From: "D. Ror" <imnasnainaec@gmail.com>
Date: Fri, 11 Dec 2020 16:01:08 -0500
Subject: [PATCH 2/4] Move buttonProps into single prop.

---
 src/components/Buttons/ButtonConfirmation.tsx     |  9 +++++----
 src/components/Buttons/DeleteDialog.tsx           |  3 +--
 src/components/Buttons/EditTextDialog.tsx         |  8 +++++---
 src/components/Buttons/LoadingButton.tsx          |  9 ++++-----
 .../ProjectExport/ExportProjectButton.tsx         | 15 +++++++--------
 .../ProjectSettings/ProjectSettingsComponent.tsx  |  7 ++++++-
 .../ProjectManagement/ProjectManagement.tsx       |  2 +-
 7 files changed, 29 insertions(+), 24 deletions(-)

diff --git a/src/components/Buttons/ButtonConfirmation.tsx b/src/components/Buttons/ButtonConfirmation.tsx
index 1283798a18..b6ce6f0a85 100644
--- a/src/components/Buttons/ButtonConfirmation.tsx
+++ b/src/components/Buttons/ButtonConfirmation.tsx
@@ -52,11 +52,12 @@ export default function ButtonConfirmation(props: ButtonConfirmationProps) {
           <Translate id="buttons.cancel" />
         </Button>
         <LoadingButton
-          onClick={onConfirm}
-          color="primary"
-          variant="contained"
           loading={loading}
-          {...props}
+          buttonProps={{
+            onClick: onConfirm,
+            color: "primary",
+            variant: "contained",
+          }}
         >
           <Translate id="buttons.confirm" />
         </LoadingButton>
diff --git a/src/components/Buttons/DeleteDialog.tsx b/src/components/Buttons/DeleteDialog.tsx
index 7c3b3abd6e..0332599aec 100644
--- a/src/components/Buttons/DeleteDialog.tsx
+++ b/src/components/Buttons/DeleteDialog.tsx
@@ -6,7 +6,6 @@ import {
   DialogContentText,
   DialogTitle,
 } from "@material-ui/core";
-import { ButtonProps } from "@material-ui/core/Button";
 import React from "react";
 import { Translate } from "react-localize-redux";
 
@@ -20,7 +19,7 @@ interface DeleteDialogProps {
 /**
  * Dialog to confirm deletion
  */
-export default function DeleteDialog(props: ButtonProps & DeleteDialogProps) {
+export default function DeleteDialog(props: DeleteDialogProps) {
   return (
     <Dialog
       open={props.open}
diff --git a/src/components/Buttons/EditTextDialog.tsx b/src/components/Buttons/EditTextDialog.tsx
index 40960c198e..92e720ce61 100644
--- a/src/components/Buttons/EditTextDialog.tsx
+++ b/src/components/Buttons/EditTextDialog.tsx
@@ -86,10 +86,12 @@ export default function EditTextDialog(props: EditTextDialogProps) {
           <Translate id="buttons.cancel" />
         </Button>
         <LoadingButton
-          onClick={onConfirm}
-          color="primary"
-          variant="contained"
           loading={loading}
+          buttonProps={{
+            onClick: onConfirm,
+            color: "primary",
+            variant: "contained",
+          }}
         >
           <Translate id="buttons.confirm" />
         </LoadingButton>
diff --git a/src/components/Buttons/LoadingButton.tsx b/src/components/Buttons/LoadingButton.tsx
index 7d89bb3748..de88a6a5b4 100644
--- a/src/components/Buttons/LoadingButton.tsx
+++ b/src/components/Buttons/LoadingButton.tsx
@@ -6,17 +6,16 @@ import { buttonSuccess } from "../../types/theme";
 
 interface LoadingProps {
   loading: boolean;
+  children: React.ReactNode;
+  buttonProps: ButtonProps;
 }
 
 /**
  * A button that shows a spinning wheel when loading=true
  */
-export default function LoadingButton(props: LoadingProps & ButtonProps) {
-  // Use Destructuring to define buttonProps without our LoadingProps.
-  const { loading, ...buttonProps } = props;
-
+export default function LoadingButton(props: LoadingProps) {
   return (
-    <Button variant="contained" disabled={props.loading} {...buttonProps}>
+    <Button variant="contained" disabled={props.loading} {...props.buttonProps}>
       {props.children}
       {props.loading && (
         <CircularProgress
diff --git a/src/components/ProjectExport/ExportProjectButton.tsx b/src/components/ProjectExport/ExportProjectButton.tsx
index 99952db792..e0f72cec3c 100644
--- a/src/components/ProjectExport/ExportProjectButton.tsx
+++ b/src/components/ProjectExport/ExportProjectButton.tsx
@@ -11,14 +11,11 @@ interface ExportProjectProps {
   exportProject: (projectId: string) => void;
   exportResult: ExportProjectState;
   projectId: string;
+  buttonProps: ButtonProps;
 }
 
 /** A button for exporting project to Lift file */
-export default function ExportProjectButton(
-  props: ButtonProps & ExportProjectProps
-) {
-  // Use Destructuring to define buttonProps without our ExportProjectProps.
-  const { exportProject, exportResult, projectId, ...buttonProps } = props;
+export default function ExportProjectButton(props: ExportProjectProps) {
   const sameProject = props.projectId === props.exportResult.projectId;
   // The export button will not be clickable if another export is underway.
   const loading = [ExportStatus.InProgress, ExportStatus.Success].includes(
@@ -32,10 +29,12 @@ export default function ExportProjectButton(
   return (
     <React.Fragment>
       <LoadingButton
-        onClick={exportProj}
-        color="primary"
         loading={loading}
-        {...buttonProps}
+        buttonProps={{
+          ...props.buttonProps,
+          onClick: exportProj,
+          color: "primary",
+        }}
       >
         <Translate id="buttons.export" />
       </LoadingButton>
diff --git a/src/components/ProjectSettings/ProjectSettingsComponent.tsx b/src/components/ProjectSettings/ProjectSettingsComponent.tsx
index cb3561e23b..46b1b1d570 100644
--- a/src/components/ProjectSettings/ProjectSettingsComponent.tsx
+++ b/src/components/ProjectSettings/ProjectSettingsComponent.tsx
@@ -136,7 +136,12 @@ class ProjectSettingsComponent extends React.Component<
             <BaseSettingsComponent
               icon={<GetApp />}
               title={<Translate id="projectSettings.exportProject.label" />}
-              body={<ExportProjectButton projectId={this.props.project.id} />}
+              body={
+                <ExportProjectButton
+                  projectId={this.props.project.id}
+                  buttonProps={{}}
+                />
+              }
             />
 
             {/* Autocomplete setting */}
diff --git a/src/components/SiteSettings/ProjectManagement/ProjectManagement.tsx b/src/components/SiteSettings/ProjectManagement/ProjectManagement.tsx
index 8843db77fe..05572ce16d 100644
--- a/src/components/SiteSettings/ProjectManagement/ProjectManagement.tsx
+++ b/src/components/SiteSettings/ProjectManagement/ProjectManagement.tsx
@@ -49,7 +49,7 @@ export class ProjectManagement extends React.Component<
           {/* Export Lift file */}
           <ExportProjectButton
             projectId={project.id}
-            style={{ marginRight: theme.spacing(1) }}
+            buttonProps={{ style: { marginRight: theme.spacing(1) } }}
           />
           {/* Archive active project or restore archived project. */}
           <ProjectButtonWithConfirmation

From b8ba354507569d62dd748cefab1f97ab1d20bbc2 Mon Sep 17 00:00:00 2001
From: "D. Ror" <imnasnainaec@gmail.com>
Date: Fri, 11 Dec 2020 16:12:34 -0500
Subject: [PATCH 3/4] Move buttonProps into single prop.

---
 src/components/Buttons/FileInputButton.tsx          |  9 ++++-----
 src/components/Buttons/LoadingDoneButton.tsx        | 13 +++++--------
 .../PasswordReset/RequestPage/component.tsx         |  8 +++++---
 .../CreateProject/CreateProjectComponent.tsx        | 12 +++++++-----
 .../ProjectSettings/ProjectImport/ProjectImport.tsx |  4 +++-
 .../ProjectSettings/ProjectUsers/EmailInvite.tsx    |  8 +++++---
 src/components/UserSettings/AvatarUpload.tsx        |  9 +++++++--
 7 files changed, 36 insertions(+), 27 deletions(-)

diff --git a/src/components/Buttons/FileInputButton.tsx b/src/components/Buttons/FileInputButton.tsx
index 7e768010bd..c1cf28f764 100644
--- a/src/components/Buttons/FileInputButton.tsx
+++ b/src/components/Buttons/FileInputButton.tsx
@@ -5,13 +5,12 @@ import { ButtonProps } from "@material-ui/core/Button";
 export interface BrowseProps {
   updateFile: (file: File) => void;
   accept?: string;
+  children: React.ReactNode;
+  buttonProps: ButtonProps;
 }
 
 // This button links to a set of functions
-export default function FileInputButton(props: BrowseProps & ButtonProps) {
-  // Use Destructuring to define buttonProps without our BrowseProps.
-  const { updateFile, accept, ...buttonProps } = props;
-
+export default function FileInputButton(props: BrowseProps) {
   function updateFirstFile(files: FileList) {
     const file = files[0];
     if (file) {
@@ -33,7 +32,7 @@ export default function FileInputButton(props: BrowseProps & ButtonProps) {
 
       {/* ... and this button is tied to it with the htmlFor property */}
       <label htmlFor="file-input">
-        <Button variant="contained" component="span" {...buttonProps}>
+        <Button variant="contained" component="span" {...props.buttonProps}>
           {props.children}
         </Button>
       </label>
diff --git a/src/components/Buttons/LoadingDoneButton.tsx b/src/components/Buttons/LoadingDoneButton.tsx
index 899cb1a949..17a35eefab 100644
--- a/src/components/Buttons/LoadingDoneButton.tsx
+++ b/src/components/Buttons/LoadingDoneButton.tsx
@@ -11,27 +11,24 @@ interface LoadingDoneProps {
   done: boolean;
   doneText?: React.ReactNode | string;
   disabled?: boolean;
+  children: React.ReactNode;
+  buttonProps: ButtonProps;
 }
 
 /**
  * A button that shows a spinning wheel when loading and "done" when done
  */
-export default function LoadingDoneButton(
-  props: LoadingDoneProps & ButtonProps
-) {
-  // Use Destructuring to define buttonProps without our LoadingDoneProps.
-  const { loading, done, doneText, disabled, ...buttonProps } = props;
-
+export default function LoadingDoneButton(props: LoadingDoneProps) {
   return (
     <Button
       type="submit"
       variant="contained"
-      {...buttonProps}
+      {...props.buttonProps}
       disabled={props.disabled ? props.disabled : props.loading}
       style={{
         backgroundColor: props.done ? buttonSuccess : undefined,
         color: props.done ? "white" : undefined,
-        ...props.style,
+        ...props.buttonProps.style,
       }}
     >
       {props.done ? (
diff --git a/src/components/PasswordReset/RequestPage/component.tsx b/src/components/PasswordReset/RequestPage/component.tsx
index ff33bb533c..5afd5f94e9 100644
--- a/src/components/PasswordReset/RequestPage/component.tsx
+++ b/src/components/PasswordReset/RequestPage/component.tsx
@@ -85,12 +85,14 @@ export default class ResetRequest extends React.Component<
               </Grid>
               <Grid item>
                 <LoadingDoneButton
-                  variant="contained"
-                  color="primary"
-                  onClick={() => this.onSubmit}
                   disabled={!this.state.emailOrUsername}
                   loading={this.state.loading}
                   done={this.state.done}
+                  buttonProps={{
+                    onClick: () => this.onSubmit,
+                    variant: "contained",
+                    color: "primary",
+                  }}
                 >
                   <Translate id="passwordReset.submit" />
                 </LoadingDoneButton>
diff --git a/src/components/ProjectScreen/CreateProject/CreateProjectComponent.tsx b/src/components/ProjectScreen/CreateProject/CreateProjectComponent.tsx
index dc10c95a9a..d62b8f8330 100644
--- a/src/components/ProjectScreen/CreateProject/CreateProjectComponent.tsx
+++ b/src/components/ProjectScreen/CreateProject/CreateProjectComponent.tsx
@@ -240,7 +240,7 @@ export class CreateProject extends React.Component<
             <FileInputButton
               updateFile={(file: File) => this.updateLanguageData(file)}
               accept=".zip"
-              style={{ marginTop: theme.spacing(2) }}
+              buttonProps={{ style: { marginTop: theme.spacing(2) } }}
             >
               <Translate id="buttons.browse" />
             </FileInputButton>
@@ -260,11 +260,13 @@ export class CreateProject extends React.Component<
               <LoadingDoneButton
                 loading={this.props.inProgress}
                 done={this.props.success}
-                color="primary"
-                style={{
-                  marginTop: theme.spacing(1),
-                }}
                 doneText={<Translate id="createProject.success" />}
+                buttonProps={{
+                  color: "primary",
+                  style: {
+                    marginTop: theme.spacing(1),
+                  },
+                }}
               >
                 <Translate id="createProject.create" />
               </LoadingDoneButton>
diff --git a/src/components/ProjectSettings/ProjectImport/ProjectImport.tsx b/src/components/ProjectSettings/ProjectImport/ProjectImport.tsx
index 714d973d5c..e4bcc8fe00 100644
--- a/src/components/ProjectSettings/ProjectImport/ProjectImport.tsx
+++ b/src/components/ProjectSettings/ProjectImport/ProjectImport.tsx
@@ -70,8 +70,10 @@ export class ProjectImport extends React.Component<
             {/* Choose file button */}
             <FileInputButton
               updateFile={this.updateLiftFile}
-              disabled={this.state.uploadState === UploadState.Done}
               accept=".zip"
+              buttonProps={{
+                disabled: this.state.uploadState === UploadState.Done,
+              }}
             >
               <Translate id="projectSettings.import.chooseFile" />
             </FileInputButton>
diff --git a/src/components/ProjectSettings/ProjectUsers/EmailInvite.tsx b/src/components/ProjectSettings/ProjectUsers/EmailInvite.tsx
index ce8d908954..fb4b4d51a1 100644
--- a/src/components/ProjectSettings/ProjectUsers/EmailInvite.tsx
+++ b/src/components/ProjectSettings/ProjectUsers/EmailInvite.tsx
@@ -102,12 +102,14 @@ class EmailInvite extends React.Component<InviteProps, InviteState> {
               <Grid container justify="flex-end" spacing={2}>
                 <Grid item>
                   <LoadingDoneButton
-                    variant="contained"
-                    color="primary"
-                    onClick={() => this.onSubmit()}
                     disabled={!this.state.isValid}
                     loading={this.state.loading}
                     done={this.state.done}
+                    buttonProps={{
+                      onClick: () => this.onSubmit(),
+                      variant: "contained",
+                      color: "primary",
+                    }}
                   >
                     <Translate id="buttons.invite" />
                   </LoadingDoneButton>
diff --git a/src/components/UserSettings/AvatarUpload.tsx b/src/components/UserSettings/AvatarUpload.tsx
index b74627787e..da28050d36 100644
--- a/src/components/UserSettings/AvatarUpload.tsx
+++ b/src/components/UserSettings/AvatarUpload.tsx
@@ -59,13 +59,18 @@ export default function AvatarUpload(props: { doneCallback?: () => void }) {
           <FileInputButton
             updateFile={(file) => updateFile(file)}
             accept=".jpg"
+            buttonProps={{}}
           >
             <Translate id="buttons.browse" />
           </FileInputButton>
         </Grid>
         <Grid item>
-          <LoadingDoneButton loading={loading} done={done} type="submit">
-            Save
+          <LoadingDoneButton
+            loading={loading}
+            done={done}
+            buttonProps={{ type: "submit" }}
+          >
+            <Translate id="buttons.Save" />
           </LoadingDoneButton>
         </Grid>
       </Grid>

From 4b07f252095fc23691c42f5e305f1eb52a8f4284 Mon Sep 17 00:00:00 2001
From: "D. Ror" <imnasnainaec@gmail.com>
Date: Fri, 11 Dec 2020 16:25:17 -0500
Subject: [PATCH 4/4] Make children and buttonProps optional.

---
 src/components/Buttons/FileInputButton.tsx                 | 4 ++--
 src/components/Buttons/LoadingButton.tsx                   | 4 ++--
 src/components/Buttons/LoadingDoneButton.tsx               | 6 +++---
 src/components/ProjectExport/ExportProjectButton.tsx       | 2 +-
 .../ProjectSettings/ProjectSettingsComponent.tsx           | 7 +------
 src/components/UserSettings/AvatarUpload.tsx               | 1 -
 6 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/src/components/Buttons/FileInputButton.tsx b/src/components/Buttons/FileInputButton.tsx
index c1cf28f764..7fd8c90a19 100644
--- a/src/components/Buttons/FileInputButton.tsx
+++ b/src/components/Buttons/FileInputButton.tsx
@@ -5,8 +5,8 @@ import { ButtonProps } from "@material-ui/core/Button";
 export interface BrowseProps {
   updateFile: (file: File) => void;
   accept?: string;
-  children: React.ReactNode;
-  buttonProps: ButtonProps;
+  children?: React.ReactNode;
+  buttonProps?: ButtonProps;
 }
 
 // This button links to a set of functions
diff --git a/src/components/Buttons/LoadingButton.tsx b/src/components/Buttons/LoadingButton.tsx
index de88a6a5b4..f7ce5b7a3f 100644
--- a/src/components/Buttons/LoadingButton.tsx
+++ b/src/components/Buttons/LoadingButton.tsx
@@ -6,8 +6,8 @@ import { buttonSuccess } from "../../types/theme";
 
 interface LoadingProps {
   loading: boolean;
-  children: React.ReactNode;
-  buttonProps: ButtonProps;
+  children?: React.ReactNode;
+  buttonProps?: ButtonProps;
 }
 
 /**
diff --git a/src/components/Buttons/LoadingDoneButton.tsx b/src/components/Buttons/LoadingDoneButton.tsx
index 17a35eefab..d6532a66b2 100644
--- a/src/components/Buttons/LoadingDoneButton.tsx
+++ b/src/components/Buttons/LoadingDoneButton.tsx
@@ -11,8 +11,8 @@ interface LoadingDoneProps {
   done: boolean;
   doneText?: React.ReactNode | string;
   disabled?: boolean;
-  children: React.ReactNode;
-  buttonProps: ButtonProps;
+  children?: React.ReactNode;
+  buttonProps?: ButtonProps;
 }
 
 /**
@@ -28,7 +28,7 @@ export default function LoadingDoneButton(props: LoadingDoneProps) {
       style={{
         backgroundColor: props.done ? buttonSuccess : undefined,
         color: props.done ? "white" : undefined,
-        ...props.buttonProps.style,
+        ...props.buttonProps?.style,
       }}
     >
       {props.done ? (
diff --git a/src/components/ProjectExport/ExportProjectButton.tsx b/src/components/ProjectExport/ExportProjectButton.tsx
index e0f72cec3c..ecd414d3b9 100644
--- a/src/components/ProjectExport/ExportProjectButton.tsx
+++ b/src/components/ProjectExport/ExportProjectButton.tsx
@@ -11,7 +11,7 @@ interface ExportProjectProps {
   exportProject: (projectId: string) => void;
   exportResult: ExportProjectState;
   projectId: string;
-  buttonProps: ButtonProps;
+  buttonProps?: ButtonProps;
 }
 
 /** A button for exporting project to Lift file */
diff --git a/src/components/ProjectSettings/ProjectSettingsComponent.tsx b/src/components/ProjectSettings/ProjectSettingsComponent.tsx
index 46b1b1d570..cb3561e23b 100644
--- a/src/components/ProjectSettings/ProjectSettingsComponent.tsx
+++ b/src/components/ProjectSettings/ProjectSettingsComponent.tsx
@@ -136,12 +136,7 @@ class ProjectSettingsComponent extends React.Component<
             <BaseSettingsComponent
               icon={<GetApp />}
               title={<Translate id="projectSettings.exportProject.label" />}
-              body={
-                <ExportProjectButton
-                  projectId={this.props.project.id}
-                  buttonProps={{}}
-                />
-              }
+              body={<ExportProjectButton projectId={this.props.project.id} />}
             />
 
             {/* Autocomplete setting */}
diff --git a/src/components/UserSettings/AvatarUpload.tsx b/src/components/UserSettings/AvatarUpload.tsx
index da28050d36..c29345c7be 100644
--- a/src/components/UserSettings/AvatarUpload.tsx
+++ b/src/components/UserSettings/AvatarUpload.tsx
@@ -59,7 +59,6 @@ export default function AvatarUpload(props: { doneCallback?: () => void }) {
           <FileInputButton
             updateFile={(file) => updateFile(file)}
             accept=".jpg"
-            buttonProps={{}}
           >
             <Translate id="buttons.browse" />
           </FileInputButton>