From 3c50ad28021828d320c4e8c5e68102cc35bbc005 Mon Sep 17 00:00:00 2001
From: BOUTIER Charly <charly.boutier@rte-france.com>
Date: Fri, 19 Jan 2024 10:37:54 +0100
Subject: [PATCH 1/2] Updates the cancel button

Signed-off-by: BOUTIER Charly <charly.boutier@rte-france.com>
---
 src/components/react-hook-form/utils/cancel-button.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/react-hook-form/utils/cancel-button.js b/src/components/react-hook-form/utils/cancel-button.js
index 41332f28..b7cb3288 100644
--- a/src/components/react-hook-form/utils/cancel-button.js
+++ b/src/components/react-hook-form/utils/cancel-button.js
@@ -10,9 +10,15 @@ import { Button } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
 import PropTypes from 'prop-types';
 
+const styles = {
+    cancelButton: (theme) => ({
+        color: theme.palette.text.secondary,
+    }),
+};
+
 const CancelButton = ({ ...buttonProps }) => {
     return (
-        <Button {...buttonProps}>
+        <Button sx={styles.cancelButton} {...buttonProps}>
             <FormattedMessage id="cancel" />
         </Button>
     );

From ca8bcfb81b000bc51a816420734ce96e303a5510 Mon Sep 17 00:00:00 2001
From: BOUTIER Charly <charly.boutier@rte-france.com>
Date: Tue, 23 Jan 2024 17:53:39 +0100
Subject: [PATCH 2/2] Use the correct styling method to define theme for a
 commons-ui component

Signed-off-by: BOUTIER Charly <charly.boutier@rte-france.com>
---
 .../react-hook-form/utils/cancel-button.js           | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/components/react-hook-form/utils/cancel-button.js b/src/components/react-hook-form/utils/cancel-button.js
index b7cb3288..324dba15 100644
--- a/src/components/react-hook-form/utils/cancel-button.js
+++ b/src/components/react-hook-form/utils/cancel-button.js
@@ -9,16 +9,12 @@ import React from 'react';
 import { Button } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
 import PropTypes from 'prop-types';
+import { useThemeProps } from '@mui/material/styles';
 
-const styles = {
-    cancelButton: (theme) => ({
-        color: theme.palette.text.secondary,
-    }),
-};
-
-const CancelButton = ({ ...buttonProps }) => {
+const CancelButton = ({ ...inProps }) => {
+    const props = useThemeProps({ props: inProps, name: 'CancelButton' });
     return (
-        <Button sx={styles.cancelButton} {...buttonProps}>
+        <Button {...props}>
             <FormattedMessage id="cancel" />
         </Button>
     );