Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | 520x 193x 1x 1x 386x | import { ReactElement, SyntheticEvent } from "react";
import { useTranslation } from "react-i18next";
import styled from "styled-components";
import { Button } from "client/components/Button";
import { ButtonGroup } from "client/components/ButtonGroup";
import { ButtonStyle } from "client/components/componentStyles";
import { programItemContentMargin } from "client/views/my-program-items/components/shared";
interface Props {
onConfirm: (event: SyntheticEvent) => Promise<void>;
onCancel: () => void;
confirmDisabled: boolean;
loading: boolean;
}
// Both buttons are disabled while a sign-up request is in flight; confirm is
// additionally disabled by form validity
export const SignupFormButtons = ({
onConfirm,
onCancel,
confirmDisabled,
loading,
}: Props): ReactElement => {
const { t } = useTranslation();
return (
<Container>
<StyledButton
onClick={onConfirm}
buttonStyle={ButtonStyle.PRIMARY}
disabled={confirmDisabled || loading}
>
{t("signup.confirm")}
</StyledButton>
<StyledButton
onClick={onCancel}
buttonStyle={ButtonStyle.SECONDARY}
disabled={loading}
>
{t("signup.cancel")}
</StyledButton>
</Container>
);
};
const Container = styled(ButtonGroup)`
${programItemContentMargin};
justify-content: center;
`;
const StyledButton = styled(Button)`
min-width: 200px;
/* Force confirm and cancel buttons to same row on mobile */
@media (max-width: ${(props) => props.theme.breakpointDesktop}) {
flex: 1;
min-width: 0;
}
`;
|