feat: add CloseButton

src/components/ui/reactHookForm/utils/CancelButton.tsx

@@ -5,13 +5,12 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { Button, type ButtonProps, useThemeProps } from '@mui/material';
+import { Button, type ButtonProps } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
 
-export function CancelButton(inProps: Readonly<Omit<ButtonProps, 'children'>>) {
-    const props = useThemeProps({ props: inProps, name: 'CancelButton' });
+export function CancelButton(buttonProps: Readonly<Omit<ButtonProps, 'children'>>) {
     return (
-        <Button data-testid="CancelButton" {...props}>
+        <Button data-testid="CancelButton" {...buttonProps}>
             <FormattedMessage id="cancel" />
         </Button>
     );

src/components/ui/reactHookForm/utils/CloseButton.tsx

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2026, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+import { Button, type ButtonProps } from '@mui/material';
+import { FormattedMessage } from 'react-intl';
+
+export function CloseButton(buttonProps: Readonly<Omit<ButtonProps, 'children'>>) {
+    return (
+        <Button data-testid="CloseButton" {...buttonProps}>
+            <FormattedMessage id="close" />
+        </Button>
+    );
+}

src/components/ui/reactHookForm/utils/index.ts

@@ -6,6 +6,7 @@
  */
 
 export * from './CancelButton';
+export * from './CloseButton';
 export * from './FieldLabel';
 export * from './SubmitButton';
 export * from './TextFieldWithAdornment';

src/features/topBar/AboutDialog.tsx

@@ -12,7 +12,6 @@ import {
     AccordionSummary,
     Alert,
     Box,
-    Button,
     CircularProgress,
     Collapse,
     Dialog,
@@ -35,6 +34,7 @@ import { FormattedMessage } from 'react-intl';
 import { CustomTooltip } from '../../components/ui/tooltip/CustomTooltip';
 import { LogoText } from './GridLogo';
 import { mergeSx, type MuiStyles } from '../../utils/styles';
+import { CloseButton } from '../../components/ui/reactHookForm/utils/CloseButton';
 
 const styles = {
     general: {
@@ -469,9 +469,7 @@ export function AboutDialog({
                 </Box>
             </DialogContent>
             <DialogActions>
-                <Button onClick={handleClose} autoFocus>
-                    <FormattedMessage id="close" />
-                </Button>
+                <CloseButton color="primary" onClick={handleClose} autoFocus />
             </DialogActions>
         </Dialog>
     );

src/features/topBar/UserInformationDialog.tsx

@@ -9,10 +9,10 @@ import { Box, Dialog, DialogActions, DialogContent, DialogTitle, Grid2 as Grid,
 import { FormattedMessage } from 'react-intl';
 import type { UserProfile } from 'oidc-client-ts';
 import { Fragment, useEffect, useState } from 'react';
-import { CancelButton } from '../../components/ui/reactHookForm/utils/CancelButton';
 import { fetchUserDetails } from '../../services/userAdmin';
 import { UserDetail } from '../../utils/types/types';
 import type { MuiStyles } from '../../utils/styles';
+import { CloseButton } from '../../components/ui/reactHookForm/utils/CloseButton';
 
 const styles = {
     DialogTitle: { fontSize: '1.5rem' },
@@ -225,7 +225,7 @@ function UserInformationDialog({ openDialog, userProfile, onClose }: UserInforma
             </DialogContent>
 
             <DialogActions>
-                <CancelButton color="primary" onClick={onClose} />
+                <CloseButton color="primary" onClick={onClose} autoFocus />
             </DialogActions>
         </Dialog>
     );

src/features/topBar/UserSettingsDialog.tsx

@@ -6,8 +6,9 @@
  */
 import { type ChangeEvent, type SyntheticEvent, useCallback } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { Alert, Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, Switch } from '@mui/material';
+import { Alert, Box, Dialog, DialogActions, DialogContent, DialogTitle, Switch } from '@mui/material';
 import type { MuiStyles } from '../../utils/styles';
+import { CloseButton } from '../../components/ui/reactHookForm/utils/CloseButton';
 
 const styles = {
     parameterName: (theme) => ({
@@ -70,9 +71,7 @@ function UserSettingsDialog({ openDialog, onClose, developerMode, onDeveloperMod
                 )}
             </DialogContent>
             <DialogActions>
-                <Button onClick={handleClose} variant="outlined">
-                    <FormattedMessage id="user-settings-dialog/close" />
-                </Button>
+                <CloseButton color="primary" onClick={handleClose} autoFocus />
             </DialogActions>
         </Dialog>
     );

src/translations/en/commonButtonEn.ts

@@ -7,6 +7,7 @@
 
 export const commonButtonEn = {
     cancel: 'Cancel',
+    close: 'Close',
     validate: 'Validate',
     add: 'Add',
     replace: 'Replace',

src/translations/en/topBarEn.ts

@@ -61,5 +61,4 @@ export const topBarEn = {
     'user-settings-dialog/label-developer-mode': 'Developer mode',
     'user-settings-dialog/warning-developer-mode':
         'Some of the features are not complete, so they may not work as expected. To hide these features, disable developer mode.',
-    'user-settings-dialog/close': 'Close',
 };

src/translations/fr/commonButtonFr.ts

@@ -7,6 +7,7 @@
 
 export const commonButtonFr = {
     cancel: 'Annuler',
+    close: 'Fermer',
     validate: 'Valider',
     add: 'Ajouter',
     replace: 'Remplacer',

src/translations/fr/topBarFr.ts

@@ -62,5 +62,4 @@ export const topBarFr = {
     'user-settings-dialog/label-developer-mode': 'Mode développeur',
     'user-settings-dialog/warning-developer-mode':
         'Certaines fonctionnalités ne sont pas complètes et peuvent donc ne pas fonctionner comme prévu. Pour masquer ces fonctionnalités, désactivez le mode développeur.',
-    'user-settings-dialog/close': 'Fermer',
 };