From 99f1cd7bae721e258631743119b526ad5d5f06ec Mon Sep 17 00:00:00 2001
From: TOURI ANIS <anis-1.touri@rte-france.com>
Date: Wed, 18 Oct 2023 11:51:26 +0200
Subject: [PATCH] change appearance validate and cancel button

---
 decs.d.ts                                     |  7 +++++++
 src/components/app-wrapper.js                 | 10 ++++++++++
 .../dialogs/access-rights-dialog.js           |  5 +++--
 .../custom-mui-dialog/custom-mui-dialog.tsx   | 20 ++++++++++---------
 .../dialogs/create-directory-dialog.js        |  5 +++--
 .../csv-import-filter-creation-dialog.js      |  9 +++++----
 src/components/dialogs/delete-dialog.js       |  6 +++---
 src/components/dialogs/rename-dialog.js       |  5 +++--
 .../dialogs/replace-with-script-dialog.js     |  5 +++--
 .../utils/popup-confirmation-dialog.js        |  5 +++--
 .../csv-uploader/csv-uploader.js              |  9 +++++----
 src/translations/en.json                      |  2 +-
 src/translations/fr.json                      |  4 ++--
 13 files changed, 59 insertions(+), 33 deletions(-)

diff --git a/decs.d.ts b/decs.d.ts
index c7035f7dd..59148e627 100644
--- a/decs.d.ts
+++ b/decs.d.ts
@@ -142,6 +142,13 @@ declare module '@gridsuite/commons-ui' {
         disabled?: boolean;
     }>;
 
+    export const CancelButton: FunctionComponent<{
+        onClick: (() => void) | ((event: React.MouseEvent) => void);
+        disabled?: boolean;
+        variant?: string;
+        children?: ReactNode;
+    }>;
+
     export const FieldLabel: FunctionComponent<{
         label: string;
         optional?: boolean;
diff --git a/src/components/app-wrapper.js b/src/components/app-wrapper.js
index f9f717402..afef46d1c 100644
--- a/src/components/app-wrapper.js
+++ b/src/components/app-wrapper.js
@@ -76,6 +76,11 @@ const lightTheme = createTheme({
     agGridBackground: {
         color: 'white',
     },
+    typography: {
+        button: {
+            textTransform: 'none',
+        },
+    },
 });
 
 const darkTheme = createTheme({
@@ -110,6 +115,11 @@ const darkTheme = createTheme({
     agGridBackground: {
         color: '#383838',
     },
+    typography: {
+        button: {
+            textTransform: 'none',
+        },
+    },
 });
 
 const getMuiTheme = (theme) => {
diff --git a/src/components/dialogs/access-rights-dialog.js b/src/components/dialogs/access-rights-dialog.js
index deada7ec1..c4a49a1f6 100644
--- a/src/components/dialogs/access-rights-dialog.js
+++ b/src/components/dialogs/access-rights-dialog.js
@@ -18,6 +18,7 @@ import CircularProgress from '@mui/material/CircularProgress';
 import DialogActions from '@mui/material/DialogActions';
 import Button from '@mui/material/Button';
 import PropTypes from 'prop-types';
+import { CancelButton } from '@gridsuite/commons-ui';
 
 /**
  * Dialog to change the access rights
@@ -110,9 +111,9 @@ const AccessRightsDialog = ({
                 )}
             </DialogContent>
             <DialogActions>
-                <Button onClick={handleClose}>
+                <CancelButton onClick={handleClose}>
                     <FormattedMessage id="cancel" />
-                </Button>
+                </CancelButton>
                 <Button onClick={handleClick} variant="outlined">
                     <FormattedMessage id="edit" />
                 </Button>
diff --git a/src/components/dialogs/commons/custom-mui-dialog/custom-mui-dialog.tsx b/src/components/dialogs/commons/custom-mui-dialog/custom-mui-dialog.tsx
index 507269a16..fddfb15a3 100644
--- a/src/components/dialogs/commons/custom-mui-dialog/custom-mui-dialog.tsx
+++ b/src/components/dialogs/commons/custom-mui-dialog/custom-mui-dialog.tsx
@@ -1,13 +1,15 @@
 import React, { FunctionComponent } from 'react';
 import { FieldErrors, FormProvider } from 'react-hook-form';
-import Dialog from '@mui/material/Dialog';
-import DialogTitle from '@mui/material/DialogTitle';
-import { Grid, LinearProgress } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
-import DialogContent from '@mui/material/DialogContent';
-import DialogActions from '@mui/material/DialogActions';
-import Button from '@mui/material/Button';
-import { SubmitButton } from '@gridsuite/commons-ui';
+import {
+    DialogActions,
+    DialogContent,
+    Grid,
+    LinearProgress,
+    Dialog,
+    DialogTitle,
+} from '@mui/material';
+import { CancelButton, SubmitButton } from '@gridsuite/commons-ui';
 
 interface ICustomMuiDialog {
     open: boolean;
@@ -91,9 +93,9 @@ const CustomMuiDialog: FunctionComponent<ICustomMuiDialog> = ({
                 </DialogTitle>
                 <DialogContent>{children}</DialogContent>
                 <DialogActions>
-                    <Button onClick={handleCancel}>
+                    <CancelButton onClick={handleCancel}>
                         <FormattedMessage id="cancel" />
-                    </Button>
+                    </CancelButton>
                     <SubmitButton
                         disabled={disabledSave}
                         onClick={handleSubmit(
diff --git a/src/components/dialogs/create-directory-dialog.js b/src/components/dialogs/create-directory-dialog.js
index 7e8cf1fa4..75bae0f1e 100644
--- a/src/components/dialogs/create-directory-dialog.js
+++ b/src/components/dialogs/create-directory-dialog.js
@@ -20,6 +20,7 @@ import FormControlLabel from '@mui/material/FormControlLabel';
 import Radio from '@mui/material/Radio';
 import { ElementType } from '../../utils/elementType';
 import { useNameField } from './field-hook';
+import { CancelButton } from '@gridsuite/commons-ui';
 
 /**
  * Dialog to create a directory
@@ -101,9 +102,9 @@ export const CreateDirectoryDialog = ({
                 {error !== '' && <Alert severity="error">{error}</Alert>}
             </DialogContent>
             <DialogActions>
-                <Button onClick={handleClose}>
+                <CancelButton onClick={handleClose}>
                     <FormattedMessage id="cancel" />
-                </Button>
+                </CancelButton>
                 <Button
                     disabled={!canCreate()}
                     onClick={handleClick}
diff --git a/src/components/dialogs/csv-import-filter-creation-dialog.js b/src/components/dialogs/csv-import-filter-creation-dialog.js
index 4dd7a4220..b75f6932d 100644
--- a/src/components/dialogs/csv-import-filter-creation-dialog.js
+++ b/src/components/dialogs/csv-import-filter-creation-dialog.js
@@ -20,6 +20,7 @@ import PropTypes from 'prop-types';
 import { DialogContentText } from '@mui/material';
 import { ElementType } from '../../utils/elementType';
 import { Generator, Load } from '../../utils/equipment-types';
+import { CancelButton } from '@gridsuite/commons-ui';
 
 const CsvImportFilterCreationDialog = ({
     onClose,
@@ -181,9 +182,9 @@ const CsvImportFilterCreationDialog = ({
                         </DialogContentText>
                     </DialogContent>
                     <DialogActions>
-                        <Button onClick={() => handleCancelDialog()}>
+                        <CancelButton onClick={handleCancelDialog}>
                             <FormattedMessage id="cancel" />
-                        </Button>
+                        </CancelButton>
                         <Button
                             onClick={() => handleReplacePopupConfirmation()}
                         >
@@ -265,9 +266,9 @@ const CsvImportFilterCreationDialog = ({
                     </div>
                 </DialogContent>
                 <DialogActions>
-                    <Button onClick={handleClose}>
+                    <CancelButton onClick={handleClose}>
                         <FormattedMessage id="cancel" />
-                    </Button>
+                    </CancelButton>
                     <Button
                         variant="outlined"
                         onClick={() => handleOpenCSVConfirmationDataDialog()}
diff --git a/src/components/dialogs/delete-dialog.js b/src/components/dialogs/delete-dialog.js
index f89d150f2..c660f1f58 100644
--- a/src/components/dialogs/delete-dialog.js
+++ b/src/components/dialogs/delete-dialog.js
@@ -15,7 +15,7 @@ import PropTypes from 'prop-types';
 import React, { useEffect, useRef, useState } from 'react';
 import Grid from '@mui/material/Grid';
 import CircularProgress from '@mui/material/CircularProgress';
-import { OverflowableText } from '@gridsuite/commons-ui';
+import { CancelButton, OverflowableText } from '@gridsuite/commons-ui';
 
 /**
  * Dialog to delete an element
@@ -210,13 +210,13 @@ const DeleteDialog = ({
                 {error !== '' && <Alert severity="error">{error}</Alert>}
             </DialogContent>
             <DialogActions>
-                <Button
+                <CancelButton
                     onClick={handleClose}
                     variant="outlined"
                     disabled={loadingState}
                 >
                     <FormattedMessage id="cancel" />
-                </Button>
+                </CancelButton>
                 <Button onClick={handleClick} disabled={loadingState}>
                     {(loadingState && <CircularProgress size={24} />) || (
                         <FormattedMessage id="delete" />
diff --git a/src/components/dialogs/rename-dialog.js b/src/components/dialogs/rename-dialog.js
index aa2759982..11710b7d3 100644
--- a/src/components/dialogs/rename-dialog.js
+++ b/src/components/dialogs/rename-dialog.js
@@ -16,6 +16,7 @@ import PropTypes from 'prop-types';
 import { useNameField } from './field-hook';
 import { useSelector } from 'react-redux';
 import { ElementType } from '../../utils/elementType';
+import { CancelButton } from '@gridsuite/commons-ui';
 
 /**
  * Dialog to rename an element
@@ -91,9 +92,9 @@ const RenameDialog = ({
                 {error && <Alert severity="error">{error}</Alert>}
             </DialogContent>
             <DialogActions>
-                <Button onClick={handleClose}>
+                <CancelButton onClick={handleClose}>
                     <FormattedMessage id="cancel" />
-                </Button>
+                </CancelButton>
                 <Button
                     onClick={handleClick}
                     disabled={!canRename()}
diff --git a/src/components/dialogs/replace-with-script-dialog.js b/src/components/dialogs/replace-with-script-dialog.js
index e52c9bef4..d758bff91 100644
--- a/src/components/dialogs/replace-with-script-dialog.js
+++ b/src/components/dialogs/replace-with-script-dialog.js
@@ -13,6 +13,7 @@ import Button from '@mui/material/Button';
 import { FormattedMessage } from 'react-intl';
 import PropTypes from 'prop-types';
 import React from 'react';
+import { CancelButton } from '@gridsuite/commons-ui';
 
 /**
  * Dialog to replace a filters contingency list with a script contingency list or a filter with a script
@@ -48,9 +49,9 @@ const ReplaceWithScriptDialog = ({ id, open, onClose, onClick, title }) => {
                 </DialogContentText>
             </DialogContent>
             <DialogActions>
-                <Button onClick={handleClose} variant="outlined">
+                <CancelButton onClick={handleClose} variant="outlined">
                     <FormattedMessage id="cancel" />
-                </Button>
+                </CancelButton>
                 <Button onClick={handleClick}>
                     <FormattedMessage id="validate" />
                 </Button>
diff --git a/src/components/utils/popup-confirmation-dialog.js b/src/components/utils/popup-confirmation-dialog.js
index dfb07f61c..b05900433 100644
--- a/src/components/utils/popup-confirmation-dialog.js
+++ b/src/components/utils/popup-confirmation-dialog.js
@@ -6,6 +6,7 @@ import DialogActions from '@mui/material/DialogActions';
 import Button from '@mui/material/Button';
 import { FormattedMessage } from 'react-intl';
 import React from 'react';
+import { CancelButton } from '@gridsuite/commons-ui';
 
 const PopupConfirmationDialog = ({
     openConfirmationPopup,
@@ -26,9 +27,9 @@ const PopupConfirmationDialog = ({
                 </DialogContentText>
             </DialogContent>
             <DialogActions>
-                <Button onClick={() => setOpenConfirmationPopup(false)}>
+                <CancelButton onClick={() => setOpenConfirmationPopup(false)}>
                     <FormattedMessage id="cancel" />
-                </Button>
+                </CancelButton>
                 <Button onClick={handlePopupConfirmation} variant="outlined">
                     <FormattedMessage id="validate" />
                 </Button>
diff --git a/src/components/utils/rhf-inputs/ag-grid-table-rhf/csv-uploader/csv-uploader.js b/src/components/utils/rhf-inputs/ag-grid-table-rhf/csv-uploader/csv-uploader.js
index 976d6c16f..2270d107b 100644
--- a/src/components/utils/rhf-inputs/ag-grid-table-rhf/csv-uploader/csv-uploader.js
+++ b/src/components/utils/rhf-inputs/ag-grid-table-rhf/csv-uploader/csv-uploader.js
@@ -20,6 +20,7 @@ import PropTypes from 'prop-types';
 import { DialogContentText } from '@mui/material';
 import { useWatch } from 'react-hook-form';
 import { AG_GRID_ROW_UUID } from '../../../field-constants';
+import { CancelButton } from '@gridsuite/commons-ui';
 
 const CsvUploader = ({
     name,
@@ -156,9 +157,9 @@ const CsvUploader = ({
                     </DialogContentText>
                 </DialogContent>
                 <DialogActions>
-                    <Button onClick={() => handleCancelDialog()}>
+                    <CancelButton onClick={handleCancelDialog}>
                         <FormattedMessage id="cancel" />
-                    </Button>
+                    </CancelButton>
                     <Button onClick={() => handleReplacePopupConfirmation()}>
                         <FormattedMessage id="replace" />
                     </Button>
@@ -233,9 +234,9 @@ const CsvUploader = ({
                     </div>
                 </DialogContent>
                 <DialogActions>
-                    <Button onClick={handleClose}>
+                    <CancelButton onClick={handleClose}>
                         <FormattedMessage id="cancel" />
-                    </Button>
+                    </CancelButton>
                     <Button
                         variant="outlined"
                         onClick={() => handleOpenCSVConfirmationDataDialog()}
diff --git a/src/translations/en.json b/src/translations/en.json
index 721e2bf00..77c796e7c 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -35,7 +35,7 @@
   "nameProperty": "Name",
   "descriptionProperty": "Description (optional)",
   "uploadMessage": " No file selected",
-  "cancel": "CANCEL",
+  "cancel": "Cancel",
   "creationInProgress": "creation in progress",
   "uploading": "upload in progress",
   "studyCreatingError": "An error occurred while creating the study: {studyName}",
diff --git a/src/translations/fr.json b/src/translations/fr.json
index 3fe164a3a..ad6c62210 100644
--- a/src/translations/fr.json
+++ b/src/translations/fr.json
@@ -29,13 +29,13 @@
   "duplicateElementFailure": "Une erreur est survenue lors de la duplication de l'élément {itemName} : {errorMessage}",
   "generateCopyScriptNameError" : "Une erreur s'est produite lors de la génération du nom du script de copie de l'élément {itemName}",
   "caseName": "nom de la situation",
-  "uploadCase": "télécharger la situation",
+  "uploadCase": "Télécharger la situation",
   "uploadErrorMsg": "Veuillez télécharger la situation",
   "uploadFileExceedingLimitSizeErrorMsg": "Le fichier sélectionné dépasse la taille limite ({maxSize} Mo). Veuillez compresser ce fichier au format zip, gzip ou bzip2 puis réessayez de l'importer à nouveau.",
   "nameProperty": "Nom",
   "descriptionProperty": "Description (optionnel)",
   "uploadMessage": " Aucun fichier sélectionné",
-  "cancel": "ANNULER",
+  "cancel": "Annuler",
   "creationInProgress": "création en cours",
   "uploading": "téléversement en cours",
   "studyCreatingError": "Une erreur est survenue lors de la création de l'étude : {studyName}",