open-formulieren · vaszig · Feb 21, 2025
diff --git 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 (
-    <OFButton appearance="primary-action-button" hint="danger" name="abort" onClick={callback}>
-      {message}
-    </OFButton>
+    <>
+      <UtrechtButtonLink
+        name="abort"
+        onClick={callback}
+        className={'utrecht-link-button--openforms'}
+      >
+        <FAIcon icon="xmark" />
+        {message}
+      </UtrechtButtonLink>
+    </>
   );
 };
 

diff --git 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 (
     <>
-      <Toolbar modifiers={['mobile-reverse-order', 'bottom']}>
+      <Toolbar modifiers={['bottom']}>
         <ToolbarList>
-          {previousPage && (
-            <PreviousLink to={previousPage} onClick={onNavigatePrevPage} position="end" />
-          )}
-        </ToolbarList>
-        <ToolbarList>
-          {/* TODO: refactor: `const canSuspendForm = onFormSave === undefined` - this does not
-          need to be its own prop */}
-          {canSuspendForm && (
-            <OFButton
-              type="button"
-              appearance="secondary-action-button"
-              name="save"
-              onClick={onFormSave}
-            >
-              <Literal name="saveText" />
-            </OFButton>
-          )}
           {showSubmitButton && (
             <OFButton
               type="submit"
               appearance="primary-action-button"
               name="next"
               disabled={!canSubmitStep}
+              className="openforms-button-with-icon"
             >
               {isCheckingLogic ? (
                 <Loader modifiers={['centered', 'only-child', 'small', 'gray']} />
               ) : (
-                <Literal name="nextText" />
+                <>
+                  <Literal name="nextText" />
+                  <FAIcon icon="arrow-right-long" />
+                </>
               )}
             </OFButton>
           )}
         </ToolbarList>
-      </Toolbar>
-      {!hideAbortButton && (
-        <Toolbar modifiers={['bottom', 'reverse']}>
+        <ToolbarList>
+          {previousPage && (
+            <PreviousLink to={previousPage} onClick={onNavigatePrevPage} position="end" />
+          )}
+        </ToolbarList>
+        <ToolbarList>
+          {/* TODO: refactor: `const canSuspendForm = onFormSave === undefined` - this does not
+          need to be its own prop */}
+          {canSuspendForm && (
+            <UtrechtButtonLink
+              name="save"
+              onClick={onFormSave}
+              className="utrecht-link-button--openforms"
+            >
+              <FAIcon icon="arrow-right-long" />
+              <Literal name="saveText" />
+            </UtrechtButtonLink>
+          )}
+        </ToolbarList>
+        {!hideAbortButton && (
           <ToolbarList>
             <AbortButton isAuthenticated={isAuthenticated} onDestroySession={onDestroySession} />
           </ToolbarList>
-        </Toolbar>
-      )}
+        )}
+      </Toolbar>
     </>
   );
 };

diff --git a/src/components/EmailVerification/EmailVerificationForm.jsx b/src/components/EmailVerification/EmailVerificationForm.jsx
@@ -154,7 +154,7 @@ const EmailVerificationForm = ({submissionUrl, componentKey, emailAddress, onVer
               </>
             )}
 
-            <Toolbar modifiers={['bottom', 'reverse']}>
+            <Toolbar modifiers={['bottom']}>
               <ToolbarList>
                 {mode === 'sendCode' && (
                   <SendCodeButton

diff --git a/src/components/Sessions/SessionTrackerModal.jsx b/src/components/Sessions/SessionTrackerModal.jsx
@@ -129,7 +129,7 @@ const ExpiryModal = ({showWarning, secondsToExpiry, setWarningDismissed}) => {
           }}
         />
       </ErrorMessage>
-      <Toolbar modifiers={['bottom', 'reverse']}>
+      <Toolbar modifiers={['bottom']}>
         <ToolbarList>
           <OFButton
             type="submit"

diff --git a/src/components/Summary/GenericSummary.jsx b/src/components/Summary/GenericSummary.jsx
@@ -66,7 +66,7 @@ const GenericSummary = ({
             prevPage={prevPage}
             onPrevPage={onPrevPage}
           />
-          <Toolbar modifiers={['bottom', 'reverse']}>
+          <Toolbar modifiers={['bottom']}>
             <ToolbarList>
               <AbortButton isAuthenticated={isAuthenticated} onDestroySession={onDestroySession} />
             </ToolbarList>

diff --git 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}
         />
       )}
-      <Toolbar modifiers={['mobile-reverse-order', 'bottom']}>
-        <ToolbarList>
-          {!!onPrevPage && (
-            <Link onClick={onPrevPage} to={prevPage}>
-              <Literal name="previousText" />
-            </Link>
-          )}
-        </ToolbarList>
+      <Toolbar modifiers={['bottom']}>
         <ToolbarList>
           {canSubmit ? (
             <OFButton
               type="submit"
               appearance="primary-action-button"
+              className="openforms-button-with-icon"
               name="confirm"
               disabled={submitDisabled}
               onClick={() => setShowStatementWarnings(true)}
             >
               <Literal name="confirmText" />
+              <FAIcon icon="arrow-right-long" />
             </OFButton>
           ) : null}
         </ToolbarList>
+        <ToolbarList>
+          {!!onPrevPage && <PreviousLink to={prevPage} onClick={onPrevPage} position="end" />}
+        </ToolbarList>
       </Toolbar>
     </>
   );

diff --git 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
@@ -123,7 +123,7 @@ out your email address for verification purposes.`}
               />
             </div>
 
-            <Toolbar modifiers={['bottom', 'reverse']}>
+            <Toolbar modifiers={['bottom']}>
               <ToolbarList>
                 <OFButton type="submit" appearance="primary-action-button">
                   <FormattedMessage

diff --git a/src/components/modals/FormStepSaveModal.jsx b/src/components/modals/FormStepSaveModal.jsx
@@ -212,7 +212,7 @@ const FormStepSaveModal = ({
               autocomplete="email"
             />
 
-            <Toolbar modifiers={['bottom', 'reverse']}>
+            <Toolbar modifiers={['bottom']}>
               <ToolbarList>
                 <UtrechtButton type="submit" appearance="primary-action-button" disabled={isSaving}>
                   <FormattedMessage

diff --git a/src/scss/components/_button.scss b/src/scss/components/_button.scss
@@ -3,7 +3,8 @@
 
 .openforms-theme {
   .utrecht-button,
-  .utrecht-button-link {
+  .utrecht-button-link,
+  .utrecht-link-button {
     // For buttons without any state or buttons being hovered over, apply a 3d effect
     // by making the top and left border transparent.
     &,
@@ -21,6 +22,19 @@
       --utrecht-button-border-radius: 2px;
     }
   }
+
+  .utrecht-link-button--openforms {
+    display: inline-block;
+    padding-inline-start: 0;
+
+    &[name='abort'] {
+      color: var(--utrecht-button-primary-action-danger-background-color);
+    }
+
+    i {
+      margin-inline-end: 8px;
+    }
+  }
 }
 
 @include mobile-only {
@@ -33,3 +47,9 @@
     }
   }
 }
+
+.openforms-button-with-icon {
+  display: inline-flex;
+  flex-direction: row;
+  column-gap: 8px;
+}
diff --git a/src/scss/components/_previous-link.scss b/src/scss/components/_previous-link.scss
@@ -17,6 +17,6 @@
   }
 
   @include bem.element('icon') {
-    display: var(--of-previous-link-icon-display, none);
+    margin-inline-end: 8px;
   }
 }
diff --git a/src/scss/components/_toolbar.scss b/src/scss/components/_toolbar.scss
@@ -10,6 +10,8 @@
   align-items: flex-start;
   justify-content: space-between;
   position: relative;
+  flex-direction: column;
+  gap: 20px;
 
   @media print {
     display: none;
@@ -23,10 +25,6 @@
     @include margin(true, $properties: margin-top);
   }
 
-  @include bem.modifier('reverse') {
-    justify-content: flex-end;
-  }
-
   @include bem.modifier('column') {
     flex-direction: column;
     row-gap: $typography-margin-text;
@@ -45,41 +43,15 @@
       }
     }
 
-    @include bem.modifier('mobile-reverse-order') {
-      display: flex;
-      flex-direction: column-reverse;
-      margin-top: $typography-margin-text;
-
-      > * {
-        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);
+    }
+  }
 }