diff --git a/src/components/AbortButton/AbortButton.jsx b/src/components/AbortButton/AbortButton.jsx index 7078b469a..184f943c5 100644 --- a/src/components/AbortButton/AbortButton.jsx +++ b/src/components/AbortButton/AbortButton.jsx @@ -1,7 +1,8 @@ +import {LinkButton as UtrechtButtonLink} from '@utrecht/component-library-react'; import PropTypes from 'prop-types'; import {FormattedMessage, useIntl} from 'react-intl'; -import {OFButton} from 'components/Button'; +import FAIcon from 'components/FAIcon'; import {useAnalyticsToolsConfig} from 'components/analytics/AnalyticsToolConfigProvider'; import {buildGovMetricUrl} from 'components/analytics/utils'; import useFormContext from 'hooks/useFormContext'; @@ -50,9 +51,16 @@ const AbortButton = ({isAuthenticated, onDestroySession}) => { ); return ( - - {message} - + <> + + + {message} + + ); }; diff --git a/src/components/ButtonsToolbar/index.jsx b/src/components/ButtonsToolbar/index.jsx index af53d9293..f100315f6 100644 --- a/src/components/ButtonsToolbar/index.jsx +++ b/src/components/ButtonsToolbar/index.jsx @@ -1,7 +1,9 @@ +import {LinkButton as UtrechtButtonLink} from '@utrecht/component-library-react'; import PropTypes from 'prop-types'; import AbortButton from 'components/AbortButton'; import {OFButton} from 'components/Button'; +import FAIcon from 'components/FAIcon'; import {Literal} from 'components/Literal'; import Loader from 'components/Loader'; import PreviousLink from 'components/PreviousLink'; @@ -25,48 +27,52 @@ const ButtonsToolbar = ({ return ( <> - + - {previousPage && ( - - )} - - - {/* TODO: refactor: `const canSuspendForm = onFormSave === undefined` - this does not - need to be its own prop */} - {canSuspendForm && ( - - - - )} {showSubmitButton && ( {isCheckingLogic ? ( ) : ( - + <> + + + )} )} - - {!hideAbortButton && ( - + + {previousPage && ( + + )} + + + {/* TODO: refactor: `const canSuspendForm = onFormSave === undefined` - this does not + need to be its own prop */} + {canSuspendForm && ( + + + + + )} + + {!hideAbortButton && ( - - )} + )} + ); }; diff --git a/src/components/EmailVerification/EmailVerificationForm.jsx b/src/components/EmailVerification/EmailVerificationForm.jsx index b43c06b5f..e1dcb672a 100644 --- a/src/components/EmailVerification/EmailVerificationForm.jsx +++ b/src/components/EmailVerification/EmailVerificationForm.jsx @@ -154,7 +154,7 @@ const EmailVerificationForm = ({submissionUrl, componentKey, emailAddress, onVer )} - + {mode === 'sendCode' && ( { }} /> - + - + diff --git a/src/components/SummaryConfirmation/index.jsx b/src/components/SummaryConfirmation/index.jsx index ca7bd1296..40e649d1b 100644 --- a/src/components/SummaryConfirmation/index.jsx +++ b/src/components/SummaryConfirmation/index.jsx @@ -3,8 +3,9 @@ import PropTypes from 'prop-types'; import {useState} from 'react'; import {OFButton} from 'components/Button'; -import Link from 'components/Link'; +import FAIcon from 'components/FAIcon'; import {Literal} from 'components/Literal'; +import PreviousLink from 'components/PreviousLink'; import StatementCheckboxes from 'components/StatementCheckboxes'; import {Toolbar, ToolbarList} from 'components/Toolbar'; import {SUBMISSION_ALLOWED} from 'components/constants'; @@ -34,27 +35,25 @@ const SummaryConfirmation = ({submissionAllowed, prevPage, onPrevPage}) => { showWarnings={showStatementWarnings} /> )} - - - {!!onPrevPage && ( - - - - )} - + {canSubmit ? ( setShowStatementWarnings(true)} > + ) : null} + + {!!onPrevPage && } + ); diff --git a/src/components/Toolbar.jsx b/src/components/Toolbar.jsx index 134886644..b3b97426b 100644 --- a/src/components/Toolbar.jsx +++ b/src/components/Toolbar.jsx @@ -26,9 +26,7 @@ const Toolbar = ({children, modifiers = []}) => { Toolbar.propTypes = { children: PropTypes.node, - modifiers: PropTypes.arrayOf( - PropTypes.oneOf(['start', 'bottom', 'reverse', 'compact', 'mobile-reverse-order', 'column']) - ), + modifiers: PropTypes.arrayOf(PropTypes.oneOf(['start', 'bottom', 'compact', 'column'])), }; export {Toolbar, ToolbarList}; diff --git a/src/components/appointments/cancel/CancelAppointment.jsx b/src/components/appointments/cancel/CancelAppointment.jsx index fbaed5cea..ed22431ce 100644 --- a/src/components/appointments/cancel/CancelAppointment.jsx +++ b/src/components/appointments/cancel/CancelAppointment.jsx @@ -123,7 +123,7 @@ out your email address for verification purposes.`} /> - + - + * { - width: 100%; - } - - @include bem.element('list') { - flex-direction: column-reverse; - &:not(:last-child) { - margin: $typography-margin-text 0 0 0; - } - } - - @include bem.element('list-item') { - @include margin(auto, $properties: margin-bottom, $value-mobile: 0); - @include margin(auto, $properties: margin-top, $value-mobile: $typography-margin-list); - &:last-child { - padding-bottom: 0 !important; - } - } - } - @include bem.element('list') { @include margin(auto, $properties: margin-bottom); } @include bem.element('list-item') { @include margin(auto, $properties: margin-bottom, $value-mobile: $typography-margin-list); + justify-content: center; - .utrecht-link { - display: flex; - justify-content: center; + .utrecht-link-button { width: 100%; } } @@ -121,4 +93,12 @@ float: left; height: 34px; } + + .utrecht-link-button--openforms { + font-size: inherit; + + &:hover { + text-decoration: var(--utrecht-link-text-decoration); + } + } }