gridsuite · TheMaskedTurtle · Dec 9, 2025
diff --git a/index.html b/index.html
@@ -14,7 +14,7 @@
         <link rel="icon" href="/favicon.ico" />
         <title>GridStudy</title>
     </head>
-    <body class="singlestretch-parent singlestretch-child">
+    <body data-theme="bleu_iceberg" data-mode="light" class="singlestretch-parent singlestretch-child">
         <noscript>You need to enable JavaScript to run this app.</noscript>
         <div id="root" class="singlestretch-parent singlestretch-child"></div>
         <script type="module" src="/src/index.jsx"></script>

diff --git a/src/components/app-wrapper.jsx b/src/components/app-wrapper.jsx
@@ -5,7 +5,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { useMemo } from 'react';
+import {useEffect, useMemo} from 'react';
 import App from './app';
 import {
     createTheme,
@@ -110,6 +110,7 @@ import useNotificationsUrlGenerator from 'hooks/use-notifications-url-generator'
 import { AllCommunityModule, ModuleRegistry, provideGlobalGridOptions } from 'ag-grid-community';
 import { lightThemeCssVars } from '../styles/light-theme-css-vars';
 import { darkThemeCssVars } from '../styles/dark-theme-css-vars';
+import "@design-system-rte/react/dist/style.css";
 
 // Register all community features (migration to V33)
 ModuleRegistry.registerModules([AllCommunityModule]);
@@ -470,6 +471,10 @@ const AppWrapperWithRedux = () => {
 
     const urlMapper = useNotificationsUrlGenerator();
 
+    useEffect(() => {
+        document.body.setAttribute('data-mode', theme.toLowerCase());
+    }, [theme]);
+
     return (
         <IntlProvider locale={computedLanguage} messages={messages[computedLanguage]}>
             <BrowserRouter basename={basename}>

diff --git a/src/components/dialogs/commons/modificationDialog.tsx b/src/components/dialogs/commons/modificationDialog.tsx
@@ -7,7 +7,7 @@
 
 import { useCallback } from 'react';
 import { FieldErrors, FieldValues, useFormContext } from 'react-hook-form';
-import { SubmitButton } from '@gridsuite/commons-ui';
+import { ValidateButton } from '@gridsuite/commons-ui';
 import { ModificationDialogContent, ModificationDialogContentProps } from './modification-dialog-content';
 
 /**
@@ -80,9 +80,8 @@ export function ModificationDialog<TFieldValues extends FieldValues>({
     };
 
     const submitButton = (
-        <SubmitButton
+        <ValidateButton
             onClick={handleSubmit(handleValidate, handleValidationError)}
-            variant="outlined"
             disabled={disabledSave}
         />
     );

diff --git a/...nts/dialogs/parameters/dynamic-security-analysis/dynamic-security-analysis-parameters.tsx b/...nts/dialogs/parameters/dynamic-security-analysis/dynamic-security-analysis-parameters.tsx
@@ -24,7 +24,7 @@ import {
     isObjectEmpty,
     mergeSx,
     ProviderParam,
-    SubmitButton,
+    ValidateButton,
     useParametersBackend,
     ComputingType,
     PopupConfirmationDialog,
@@ -261,9 +261,7 @@ const DynamicSecurityAnalysisParameters: FunctionComponent<DynamicSecurityAnalys
                 })}
             >
                 <LabelledButton callback={handleResetClick} label="resetToDefault" />
-                <SubmitButton variant="outlined" onClick={handleSubmit(onSubmit, onError)}>
-                    <FormattedMessage id={'validate'} />
-                </SubmitButton>
+                <ValidateButton onClick={handleSubmit(onSubmit, onError)} />
             </Grid>
 
             {/* Reset Confirmation Dialog */}

diff --git a/src/components/dialogs/parameters/dynamicsimulation/dynamic-simulation-parameters.tsx b/src/components/dialogs/parameters/dynamicsimulation/dynamic-simulation-parameters.tsx
@@ -31,7 +31,7 @@ import {
     mergeSx,
     PopupConfirmationDialog,
     ProviderParam,
-    SubmitButton,
+    ValidateButton,
     useParametersBackend,
     ComputingType,
 } from '@gridsuite/commons-ui';
@@ -316,9 +316,7 @@ const DynamicSimulationParameters: FunctionComponent<DynamicSimulationParameters
                         <Button onClick={handleResetClick}>
                             <FormattedMessage id="resetToDefault" />
                         </Button>
-                        <SubmitButton variant="outlined" onClick={handleSubmit(onSubmit, onError)}>
-                            <FormattedMessage id={'validate'} />
-                        </SubmitButton>
+                        <ValidateButton onClick={handleSubmit(onSubmit, onError)} />
                     </DialogActions>
                 </Grid>
             </Grid>

diff --git a/src/components/dialogs/parameters/state-estimation/state-estimation-parameters.tsx b/src/components/dialogs/parameters/state-estimation/state-estimation-parameters.tsx
@@ -10,7 +10,7 @@ import {
     mergeSx,
     PopupConfirmationDialog,
     snackWithFallback,
-    SubmitButton,
+    ValidateButton,
     useSnackMessage,
 } from '@gridsuite/commons-ui';
 import { Button, DialogActions, Grid, Tab, Tabs } from '@mui/material';
@@ -209,7 +209,7 @@ export const StateEstimationParameters = ({
                         <Button onClick={handleResetClick}>
                             <FormattedMessage id="resetToDefault" />
                         </Button>
-                        <SubmitButton variant="outlined" onClick={handleSubmit(onSubmit, onValidationError)} />
+                        <ValidateButton onClick={handleSubmit(onSubmit, onValidationError)} />
                     </DialogActions>
                 </Grid>
             </Grid>

diff --git a/.../dialogs/reactive-limits/reactive-capability-curve/reactive-capability-curve-row-form.tsx b/.../dialogs/reactive-limits/reactive-capability-curve/reactive-capability-curve-row-form.tsx
@@ -11,6 +11,7 @@ import { ActivePowerAdornment, ReactivePowerAdornment } from '../../dialog-utils
 import GridItem from '../../commons/grid-item';
 import { useCallback } from 'react';
 import { useFormContext } from 'react-hook-form';
+import { Grid } from '@mui/material';
 
 export interface ReactiveCapabilityCurveRowFormProps {
     id: string;
@@ -47,8 +48,7 @@ export function ReactiveCapabilityCurveRowForm({
     const pField = (
         <FloatInput
             name={`${id}.${index}.${P}`}
-            label={'P'}
-            labelValues={{ labelSuffix: labelSuffix }}
+            label={'P (MW)'}
             adornment={ActivePowerAdornment}
             onChange={triggerTableValidation}
         />
@@ -57,8 +57,7 @@ export function ReactiveCapabilityCurveRowForm({
     const qminPField = (
         <FloatInput
             name={`${id}.${index}.${MIN_Q}`}
-            label={'QminP'}
-            labelValues={{ labelSuffix: labelSuffix }}
+            label={'QminP (MVar)'}
             adornment={ReactivePowerAdornment}
             onChange={triggerTableAndSiblingsValidation}
         />
@@ -67,8 +66,7 @@ export function ReactiveCapabilityCurveRowForm({
     const qmaxPField = (
         <FloatInput
             name={`${id}.${index}.${MAX_Q}`}
-            label={'QmaxP'}
-            labelValues={{ labelSuffix: labelSuffix }}
+            label={'QmaxP (MVar)'}
             adornment={ReactivePowerAdornment}
             onChange={triggerTableAndSiblingsValidation}
         />

diff --git a/...nts/dialogs/reactive-limits/reactive-capability-curve/reactive-capability-curve-table.tsx b/...nts/dialogs/reactive-limits/reactive-capability-curve/reactive-capability-curve-table.tsx
@@ -7,17 +7,17 @@
 
 import { useCallback, useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { Grid, IconButton } from '@mui/material';
-import DeleteIcon from '@mui/icons-material/Delete';
-import AddIcon from '@mui/icons-material/ControlPoint';
+import { Grid } from '@mui/material';
 import { useFieldArray } from 'react-hook-form';
 import { MAX_Q, MIN_Q, P } from 'components/utils/field-constants';
 import { ErrorInput, MidFormError } from '@gridsuite/commons-ui';
 import { INSERT, REMOVE } from './reactive-capability-utils';
 import { ReactiveCapabilityCurvePoints } from '../reactive-limits.type';
 import { ReactiveCapabilityCurveRowForm } from './reactive-capability-curve-row-form';
+import { IconButton } from '@design-system-rte/react';
 
 const MIN_LENGTH = 2;
+
 interface ReactiveCapabilityCurveTableFormProps {
     id: string;
     tableHeadersIds: string[];
@@ -90,27 +90,28 @@ export function ReactiveCapabilityCurveTableForm({
                     labelSuffix = index - 1;
                 }
                 return (
-                    <Grid key={value.id} container spacing={3} item>
+                    <Grid key={value.id} direction="row" alignItems="flex-end" container spacing={3} item>
                         <ReactiveCapabilityCurveRowForm id={id} index={index} labelSuffix={labelSuffix} />
                         <Grid item xs={1}>
                             <IconButton
                                 key={value.id}
+                                name="delete"
+                                size="m"
                                 onClick={() => handleRemoveRow(index)}
-                                disabled={disabled || index === 0 || index === displayedValues.length - 1}
-                            >
-                                <DeleteIcon />
-                            </IconButton>
+                                appearance="filled"
+                                variant="transparent"
+                            />
                         </Grid>
                         {index === displayedValues.length - 1 && (
                             <Grid item xs={1}>
                                 <IconButton
                                     key={value.id}
+                                    name="add-circle"
+                                    size="m"
                                     onClick={() => handleInsertRow()}
-                                    disabled={disabled}
-                                    style={{ top: '-1em' }}
-                                >
-                                    <AddIcon />
-                                </IconButton>
+                                    appearance="outlined"
+                                    variant="transparent"
+                                />
                             </Grid>
                         )}
                     </Grid>

diff --git a/src/components/spreadsheet-view/columns/column-creation-dialog.tsx b/src/components/spreadsheet-view/columns/column-creation-dialog.tsx
@@ -17,7 +17,7 @@ import {
     type MuiStyles,
     MultipleAutocompleteInput,
     snackWithFallback,
-    SubmitButton,
+    ValidateButton,
     TextInput,
     useSnackMessage,
     type UseStateBooleanReturn,
@@ -367,7 +367,7 @@ export default function ColumnCreationDialog({
                         <Grid item xs>
                             <Box sx={styles.actionButtons}>
                                 <CancelButton onClick={open.setFalse} />
-                                <SubmitButton onClick={handleSubmit(onSubmit)} variant="outlined" />
+                                <ValidateButton onClick={handleSubmit(onSubmit)} />
                             </Box>
                         </Grid>
                     </Grid>