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) {
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 (
diff --git a/src/components/Buttons/FileInputButton.tsx b/src/components/Buttons/FileInputButton.tsx
index 8c712fce5d..7fd8c90a19 100644
--- a/src/components/Buttons/FileInputButton.tsx
+++ b/src/components/Buttons/FileInputButton.tsx
@@ -5,11 +5,13 @@ 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) {
- function updateFile(files: FileList) {
+export default function FileInputButton(props: BrowseProps) {
+ function updateFirstFile(files: FileList) {
const file = files[0];
if (file) {
props.updateFile(file);
@@ -24,13 +26,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 */}
diff --git a/src/components/Buttons/LoadingButton.tsx b/src/components/Buttons/LoadingButton.tsx
index 7a86d650da..f7ce5b7a3f 100644
--- a/src/components/Buttons/LoadingButton.tsx
+++ b/src/components/Buttons/LoadingButton.tsx
@@ -1,18 +1,21 @@
-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";
+
+import { buttonSuccess } from "../../types/theme";
-interface Props {
+interface LoadingProps {
loading: boolean;
+ children?: React.ReactNode;
+ buttonProps?: ButtonProps;
}
/**
* A button that shows a spinning wheel when loading=true
*/
-export default function LoadingButton(props: Props & ButtonProps) {
+export default function LoadingButton(props: LoadingProps) {
return (
-
+
{props.children}
{props.loading && (
{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<
this.onSubmit}
disabled={!this.state.emailOrUsername}
loading={this.state.loading}
done={this.state.done}
+ buttonProps={{
+ onClick: () => this.onSubmit,
+ variant: "contained",
+ color: "primary",
+ }}
>
diff --git a/src/components/ProjectExport/ExportProjectButton.tsx b/src/components/ProjectExport/ExportProjectButton.tsx
index d4aa6e22b6..ecd414d3b9 100644
--- a/src/components/ProjectExport/ExportProjectButton.tsx
+++ b/src/components/ProjectExport/ExportProjectButton.tsx
@@ -7,16 +7,15 @@ import DownloadButton from "./DownloadButton";
import { ExportStatus } from "./ExportProjectActions";
import { ExportProjectState } from "./ExportProjectReducer";
-interface ExportProjectButtonProps {
+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 & ExportProjectButtonProps
-) {
+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(
@@ -30,10 +29,12 @@ export default function ExportProjectButton(
return (
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<
this.updateLanguageData(file)}
accept=".zip"
- style={{ marginTop: theme.spacing(2) }}
+ buttonProps={{ style: { marginTop: theme.spacing(2) } }}
>
@@ -260,11 +260,13 @@ export class CreateProject extends React.Component<
}
+ buttonProps={{
+ color: "primary",
+ style: {
+ marginTop: theme.spacing(1),
+ },
+ }}
>
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 */}
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 {
this.onSubmit()}
disabled={!this.state.isValid}
loading={this.state.loading}
done={this.state.done}
+ buttonProps={{
+ onClick: () => this.onSubmit(),
+ variant: "contained",
+ color: "primary",
+ }}
>
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 */}
{/* Archive active project or restore archived project. */}
void }) {
-
- Save
+
+