diff --git a/src/Generic/components/DialogActions.tsx b/src/Generic/components/DialogActions.tsx index 6d41eff9..fb36dbcc 100644 --- a/src/Generic/components/DialogActions.tsx +++ b/src/Generic/components/DialogActions.tsx @@ -43,6 +43,14 @@ const useActionButtonStyles = makeStyles((theme) => ({ marginRight: -12 } }, + confirmDialogActionsBox: { + margin: "8px 24px 16px", + + [breakpoints.down(600)]: { + justifyContent: "center", + margin: "8px 24px 16px" + } + }, mobileDialogActionsBox: { display: "flex", position: "fixed", @@ -263,17 +271,18 @@ interface ConfirmDialogProps { } export function ConfirmDialog(props: ConfirmDialogProps) { - const isSmallScreen = useIsMobile() + const classes = useActionButtonStyles() + return ( {props.title} - + {props.children} - - {props.cancelButton} - {props.confirmButton} - + + {props.cancelButton} + {props.confirmButton} + ) } diff --git a/src/TransactionReview/components/ReviewForm.tsx b/src/TransactionReview/components/ReviewForm.tsx index 3ce870ae..6d4a2212 100644 --- a/src/TransactionReview/components/ReviewForm.tsx +++ b/src/TransactionReview/components/ReviewForm.tsx @@ -76,9 +76,11 @@ function TxConfirmationForm(props: Props) { const [errors, setErrors] = React.useState>({}) const [formValues, setFormValues] = React.useState({ password: null }) const [loading, setLoading] = React.useState(false) + const passwordFieldRef = React.useRef(null) const { t } = useTranslation() const passwordError = props.passwordError || errors.password + const showPasswordField = props.account.requiresPassword && !props.disabled const cancelDismissal = React.useCallback(() => setDismissalConfirmationPending(false), []) const requestDismissalConfirmation = React.useCallback(() => setDismissalConfirmationPending(true), []) @@ -169,6 +171,18 @@ function TxConfirmationForm(props: Props) { }, 0) }, []) + React.useEffect(() => { + if (!showPasswordField) { + return undefined + } + + const animationFrame = window.requestAnimationFrame(() => { + passwordFieldRef.current?.scrollIntoView(false) + }) + + return () => window.cancelAnimationFrame(animationFrame) + }, [showPasswordField, props.transaction]) + return (
@@ -184,7 +198,7 @@ function TxConfirmationForm(props: Props) { paymentSummary={props.paymentSummary} paymentSummaryIsEstimated={props.paymentSummaryIsEstimated} /> - {props.account.requiresPassword && !props.disabled ? ( + {showPasswordField ? ( ) : null} - + {props.signatureRequest ? ( diff --git a/src/TransactionReview/components/TransactionReviewDialog.tsx b/src/TransactionReview/components/TransactionReviewDialog.tsx index e6a48de8..9f70a240 100644 --- a/src/TransactionReview/components/TransactionReviewDialog.tsx +++ b/src/TransactionReview/components/TransactionReviewDialog.tsx @@ -87,7 +87,7 @@ export function TransactionReviewDialogBody(props: TransactionReviewDialogBodyPr ) return ( - + {props.transaction && !props.showSubmissionProgress ? (