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);
+ }
+ }
}