diff --git a/package-lock.json b/package-lock.json index 61e06a49d1..08921b7ce4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,7 @@ "dependencies": { "@emotion/react": "^11.14.0", "@emotion/styled": "^11.14.1", - "@gridsuite/commons-ui": "0.126.0", + "@gridsuite/commons-ui": "file:../commons-ui/gridsuite-commons-ui-0.126.0.tgz", "@hello-pangea/dnd": "^18.0.1", "@hookform/resolvers": "^4.1.3", "@mui/icons-material": "^5.18.0", @@ -3316,8 +3316,8 @@ }, "node_modules/@gridsuite/commons-ui": { "version": "0.126.0", - "resolved": "https://registry.npmjs.org/@gridsuite/commons-ui/-/commons-ui-0.126.0.tgz", - "integrity": "sha512-PQKNxVOYeygiRMLsKyBdjF+u1HZKG3yZONDc4YHGpaV8rOqmtHC7721qUL6dg5EP7C8b+Wi7nlSxeMd3n/UrBg==", + "resolved": "file:../commons-ui/gridsuite-commons-ui-0.126.0.tgz", + "integrity": "sha512-LCXsqixdcX8HWDeNw8rM+VC0DZAULwht1ymx3fqlAu5v021Ao9Ko4cmusuWRKsVVbfgmikk/zPbDdOlpxXmkiQ==", "license": "MPL-2.0", "dependencies": { "@ag-grid-community/locale": "^33.3.2", diff --git a/package.json b/package.json index 584ae805f5..05f3fdb8e8 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "dependencies": { "@emotion/react": "^11.14.0", "@emotion/styled": "^11.14.1", - "@gridsuite/commons-ui": "0.126.0", + "@gridsuite/commons-ui": "file:../commons-ui/gridsuite-commons-ui-0.126.0.tgz", "@hello-pangea/dnd": "^18.0.1", "@hookform/resolvers": "^4.1.3", "@mui/icons-material": "^5.18.0", diff --git a/src/components/app-top-bar.jsx b/src/components/app-top-bar.tsx similarity index 82% rename from src/components/app-top-bar.jsx rename to src/components/app-top-bar.tsx index df0d384134..55d58a2bd1 100644 --- a/src/components/app-top-bar.jsx +++ b/src/components/app-top-bar.tsx @@ -6,16 +6,26 @@ */ import { useEffect, useState } from 'react'; -import { fetchAppsMetadata, LIGHT_THEME, logout, TopBar } from '@gridsuite/commons-ui'; +import { + fetchAppsMetadata, + LIGHT_THEME, + logout, + type Metadata, + type MuiStyles, + TopBar, + type UserManagerState, +} from '@gridsuite/commons-ui'; import GridStudyLogoLight from '../images/GridStudy_logo_light.svg?react'; import GridStudyLogoDark from '../images/GridStudy_logo_dark.svg?react'; import { Badge, Box, Tab, Tabs } from '@mui/material'; import { Settings } from '@mui/icons-material'; import { FormattedMessage } from 'react-intl'; +import { useNavigate } from 'react-router'; +import type { User } from 'oidc-client'; import { PARAM_DEVELOPER_MODE, PARAM_LANGUAGE, PARAM_THEME, PARAM_USE_NAME } from '../utils/config-params'; import { useDispatch, useSelector } from 'react-redux'; -import PropTypes from 'prop-types'; import AppPackage from '../../package.json'; +import { type AppState } from '../redux/reducer'; import { isNodeBuilt, isNodeReadOnly } from './graph/util/model-functions'; import { getServersInfos } from '../services/study'; import { fetchVersion } from '../services/utils'; @@ -46,17 +56,24 @@ const styles = { marginLeft: -4, marginRight: 1, }, +} as const satisfies MuiStyles; + +export type AppTopBarProps = { + user: User | undefined; + userManager: UserManagerState; + onChangeTab: (tabIdx: number) => void; }; -const AppTopBar = ({ user, onChangeTab, userManager }) => { +export default function AppTopBar({ user, onChangeTab, userManager }: Readonly) { + const navigate = useNavigate(); const dispatch = useDispatch(); - const theme = useSelector((state) => state[PARAM_THEME]); - const appTabIndex = useSelector((state) => state.appTabIndex); - const studyUuid = useSelector((state) => state.studyUuid); - const currentNode = useSelector((state) => state.currentTreeNode); - const currentRootNetworkUuid = useSelector((state) => state.currentRootNetworkUuid); + const theme = useSelector((state: AppState) => state[PARAM_THEME]); + const appTabIndex = useSelector((state: AppState) => state.appTabIndex); + const studyUuid = useSelector((state: AppState) => state.studyUuid); + const currentNode = useSelector((state: AppState) => state.currentTreeNode); + const currentRootNetworkUuid = useSelector((state: AppState) => state.currentRootNetworkUuid); - const [appsAndUrls, setAppsAndUrls] = useState([]); + const [appsAndUrls, setAppsAndUrls] = useState([]); const notificationsCount = useComputationResultsCount(); @@ -79,6 +96,7 @@ const AppTopBar = ({ user, onChangeTab, userManager }) => { appColor="#0CA789" appLogo={theme === LIGHT_THEME ? : } onLogoutClick={() => logout(dispatch, userManager.instance)} + onLogoClick={() => navigate('/', { replace: true })} user={user} appsAndUrls={appsAndUrls} onThemeClick={handleChangeTheme} @@ -139,12 +157,4 @@ const AppTopBar = ({ user, onChangeTab, userManager }) => { )} ); -}; - -AppTopBar.propTypes = { - user: PropTypes.object, - onChangeTab: PropTypes.func.isRequired, - userManager: PropTypes.object.isRequired, -}; - -export default AppTopBar; +} diff --git a/src/components/app-wrapper.jsx b/src/components/app-wrapper.tsx similarity index 78% rename from src/components/app-wrapper.jsx rename to src/components/app-wrapper.tsx index b2e751da35..d30cae7208 100644 --- a/src/components/app-wrapper.jsx +++ b/src/components/app-wrapper.tsx @@ -10,61 +10,62 @@ import App from './app'; import { createTheme, CssBaseline, + GlobalStyles, responsiveFontSizes, - ThemeProvider, StyledEngineProvider, - GlobalStyles, + type Theme, + type ThemeOptions, + ThemeProvider, } from '@mui/material'; import { enUS as MuiCoreEnUS, frFR as MuiCoreFrFR } from '@mui/material/locale'; import { - LIGHT_THEME, - LANG_FRENCH, CardErrorBoundary, - loginEn, - loginFr, - reportViewerEn, - reportViewerFr, - SnackbarProvider, - topBarEn, - topBarFr, - tableEn, - tableFr, - elementSearchEn, - elementSearchFr, - filterExpertEn, - filterExpertFr, - equipmentSearchEn, - equipmentSearchFr, - directoryItemsInputEn, - directoryItemsInputFr, - treeviewFinderEn, - treeviewFinderFr, cardErrorBoundaryEn, cardErrorBoundaryFr, - flatParametersEn, - flatParametersFr, - multipleSelectionDialogEn, - multipleSelectionDialogFr, commonButtonEn, commonButtonFr, - componentsFr, componentsEn, - dndTableFr, + componentsFr, + directoryItemsInputEn, + directoryItemsInputFr, dndTableEn, + dndTableFr, + elementSearchEn, + elementSearchFr, + equipmentSearchEn, + equipmentSearchFr, equipmentsEn, equipmentsFr, - networkModificationsEn, - networkModificationsFr, - importParamsEn, - importParamsFr, exportParamsEn, exportParamsFr, + filterExpertEn, + filterExpertFr, + flatParametersEn, + flatParametersFr, + type GsLangUser, + type GsTheme, + importParamsEn, + importParamsFr, + LANG_FRENCH, + LIGHT_THEME, + loginEn, + loginFr, + multipleSelectionDialogEn, + multipleSelectionDialogFr, + networkModificationsEn, + networkModificationsFr, + NotificationsProvider, parametersEn, parametersFr, - NotificationsProvider, - MAP_BASEMAP_MAPBOX, - MAP_BASEMAP_CARTO, - MAP_BASEMAP_CARTO_NOLABEL, + reportViewerEn, + reportViewerFr, + SnackbarProvider, + tableEn, + tableFr, + topBarEn, + topBarFr, + treeviewFinderEn, + treeviewFinderFr, } from '@gridsuite/commons-ui'; import { IntlProvider } from 'react-intl'; import { BrowserRouter } from 'react-router'; @@ -93,7 +94,8 @@ import events_locale_en from '../translations/dynamic/events-locale-en'; import spreadsheet_locale_fr from '../translations/spreadsheet-fr'; import spreadsheet_locale_en from '../translations/spreadsheet-en'; import { store } from '../redux/store'; -import { PARAM_THEME, basemap_style_theme_key } from '../utils/config-params'; +import { type AppState } from '../redux/reducer'; +import { PARAM_THEME } from '../utils/config-params'; import useNotificationsUrlGenerator from 'hooks/use-notifications-url-generator'; import { AllCommunityModule, ModuleRegistry, provideGlobalGridOptions } from 'ag-grid-community'; import { lightThemeCssVars } from '../styles/light-theme-css-vars'; @@ -106,28 +108,11 @@ ModuleRegistry.registerModules([AllCommunityModule]); provideGlobalGridOptions({ theme: 'legacy' }); const lightTheme = createTheme({ - components: { - MuiTab: { - styleOverrides: { - root: { - textTransform: 'none', - }, - }, - }, - MuiButton: { - styleOverrides: { - root: { - textTransform: 'none', - }, - }, - }, - }, palette: { mode: 'light', - toolbarBackground: '#EEE', - }, - link: { - color: 'blue', + toolbarBackgroundColor: '#EEE', + cancelButtonColor: undefined as any, // set in the common theme function + tabBackground: undefined as any, // set in the common theme function }, node: { common: { @@ -158,28 +143,14 @@ const lightTheme = createTheme({ notBuilt: '#E0E0E0', }, }, - selectedRow: { - background: '#8E9C9B', - }, - editableCell: { - outline: 'solid 1px #1976D2', - border: 'solid 1px #BABFC7', - borderRadius: '3px', - boxShadow: '0 1px 20px 1px #BABFC766', - }, - editableCellError: { - outline: 'solid 1px red', - border: 'solid 1px #BABFC7', - borderRadius: '3px', - boxShadow: '0 1px 20px 1px #BABFC766', + backgroundColor: '#8E9C9B', }, - aggridValueChangeHighlightBackgroundColor: '#C8E6C9 !important', tooltipTable: { - background: '#e6e6e6', + backgroundColor: '#e6e6e6', }, formFiller: { - background: '#e6e6e6', + backgroundColor: '#e6e6e6', }, searchedText: { highlightColor: '#53AAFF', @@ -188,15 +159,10 @@ const lightTheme = createTheme({ severityChip: { disabledColor: '#EAECED', }, - [basemap_style_theme_key(MAP_BASEMAP_MAPBOX)]: 'mapbox://styles/mapbox/light-v9', - [basemap_style_theme_key(MAP_BASEMAP_CARTO_NOLABEL)]: - 'https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json', - [basemap_style_theme_key(MAP_BASEMAP_CARTO)]: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json', - aggrid: { + agGrid: { theme: 'ag-theme-alpine', - overlay: { - background: '#e6e6e6', - }, + valueChangeHighlightBackgroundColor: '#C8E6C9 !important', + backgroundColor: '#e6e6e6', }, networkModificationPanel: { backgroundColor: 'white', @@ -219,29 +185,11 @@ const lightTheme = createTheme({ }); const darkTheme = createTheme({ - components: { - MuiTab: { - styleOverrides: { - root: { - textTransform: 'none', - }, - }, - }, - MuiButton: { - styleOverrides: { - root: { - textTransform: 'none', - }, - }, - }, - }, palette: { mode: 'dark', tabBackground: '#1e1e1e', - toolbarBackground: '#424242', - }, - link: { - color: 'green', + toolbarBackgroundColor: '#424242', + cancelButtonColor: undefined as any, // set in the common theme function }, node: { common: { @@ -273,25 +221,13 @@ const darkTheme = createTheme({ }, }, selectedRow: { - background: '#545C5B', - }, - editableCell: { - outline: 'solid 1px #90CAF9', - border: 'solid 1px #68686E', - borderRadius: '3px', - boxShadow: '0 1px 20px 1px #000', - }, - editableCellError: { - outline: 'solid 1px red', - border: 'solid 1px #68686E', - borderRadius: '3px', - boxShadow: '0 1px 20px 1px #000', + backgroundColor: '#545C5B', }, tooltipTable: { - background: '#121212', + backgroundColor: '#121212', }, formFiller: { - background: '#2C2C2C', + backgroundColor: '#2C2C2C', }, searchedText: { highlightColor: '#123FBB', @@ -300,15 +236,9 @@ const darkTheme = createTheme({ severityChip: { disabledColor: '#3B434A', }, - [basemap_style_theme_key(MAP_BASEMAP_MAPBOX)]: 'mapbox://styles/mapbox/dark-v9', - [basemap_style_theme_key(MAP_BASEMAP_CARTO_NOLABEL)]: - 'https://basemaps.cartocdn.com/gl/dark-matter-nolabels-gl-style/style.json', - [basemap_style_theme_key(MAP_BASEMAP_CARTO)]: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json', - aggrid: { + agGrid: { theme: 'ag-theme-alpine-dark', - overlay: { - background: '#121212', - }, + backgroundColor: '#121212', }, networkModificationPanel: { backgroundColor: '#252525', @@ -331,11 +261,12 @@ const darkTheme = createTheme({ }); // no other way to copy style: https://mui.com/material-ui/customization/theming/#api -function createThemeWithComponents(baseTheme, ...args) { +function createThemeWithComponents(baseTheme: Theme, ...args: object[]) { return createTheme( baseTheme, { palette: { + ...baseTheme.palette, cancelButtonColor: { main: baseTheme.palette.text.secondary, }, @@ -347,13 +278,27 @@ function createThemeWithComponents(baseTheme, ...args) { color: 'cancelButtonColor', }, }, + MuiTab: { + styleOverrides: { + root: { + textTransform: 'none', + }, + }, + }, + MuiButton: { + styleOverrides: { + root: { + textTransform: 'none', + }, + }, + }, }, - }, + } satisfies Pick, ...args ); } -function getMuiTheme(theme, locale) { +function getMuiTheme(theme: GsTheme, locale: GsLangUser) { return responsiveFontSizes( createThemeWithComponents( theme === LIGHT_THEME ? lightTheme : darkTheme, @@ -433,11 +378,11 @@ const messages = { }, }; -const basename = new URL(document.querySelector('base').href).pathname; +const basename = new URL(document.querySelector('base')!.href).pathname; const AppWrapperWithRedux = () => { - const computedLanguage = useSelector((state) => state.computedLanguage); - const theme = useSelector((state) => state[PARAM_THEME]); + const computedLanguage = useSelector((state: AppState) => state.computedLanguage); + const theme = useSelector((state: AppState) => state[PARAM_THEME]); const themeCompiled = useMemo(() => getMuiTheme(theme, computedLanguage), [computedLanguage, theme]); const rootCssVars = theme === LIGHT_THEME ? lightThemeCssVars : darkThemeCssVars; diff --git a/src/components/dialogs/equipment-id/formFiller.tsx b/src/components/dialogs/equipment-id/formFiller.tsx index 70e9a6cbd9..83dd4cfa3f 100644 --- a/src/components/dialogs/equipment-id/formFiller.tsx +++ b/src/components/dialogs/equipment-id/formFiller.tsx @@ -15,7 +15,7 @@ const styles = { display: 'flex', justifyContent: 'center', alignItems: 'center', - backgroundColor: theme.formFiller.background, + backgroundColor: theme.formFiller.backgroundColor, }), } as const satisfies MuiStyles; diff --git a/src/components/horizontal-toolbar.tsx b/src/components/horizontal-toolbar.tsx index 235df66601..fa7f57364d 100644 --- a/src/components/horizontal-toolbar.tsx +++ b/src/components/horizontal-toolbar.tsx @@ -23,7 +23,7 @@ import { useEffect } from 'react'; const styles = { horizontalToolbar: (theme) => ({ - backgroundColor: theme.palette.toolbarBackground, + backgroundColor: theme.palette.toolbarBackgroundColor, }), selected: (theme) => ({ color: theme.palette.action.active, diff --git a/src/components/network/network-map-panel.tsx b/src/components/network/network-map-panel.tsx index bf618c74fd..a88a992fb7 100644 --- a/src/components/network/network-map-panel.tsx +++ b/src/components/network/network-map-panel.tsx @@ -1177,7 +1177,7 @@ export const NetworkMapPanel = forwardRef { diff --git a/src/components/results/loadflow/limit-violation-result.tsx b/src/components/results/loadflow/limit-violation-result.tsx index 3f8bbb0ac6..4d2f5a299e 100644 --- a/src/components/results/loadflow/limit-violation-result.tsx +++ b/src/components/results/loadflow/limit-violation-result.tsx @@ -75,11 +75,11 @@ export const LimitViolationResult: FunctionComponent (params: RowClassParams) => { if (params?.data?.elementId) { return { - backgroundColor: theme.selectedRow.background, + backgroundColor: theme.selectedRow.backgroundColor, }; } }, - [theme.selectedRow.background] + [theme.selectedRow.backgroundColor] ); const onGridReady = useCallback(({ api }: GridReadyEvent) => { diff --git a/src/components/results/loadflow/load-flow-result.tsx b/src/components/results/loadflow/load-flow-result.tsx index 25557ab367..590bf7fa40 100644 --- a/src/components/results/loadflow/load-flow-result.tsx +++ b/src/components/results/loadflow/load-flow-result.tsx @@ -66,11 +66,11 @@ export const LoadFlowResult: FunctionComponent = ({ result, (params: RowClassParams) => { if (params?.data?.elementId) { return { - backgroundColor: theme.selectedRow.background, + backgroundColor: theme.selectedRow.backgroundColor, }; } }, - [theme.selectedRow.background] + [theme.selectedRow.backgroundColor] ); const onGridReady = useCallback(({ api }: GridReadyEvent) => { diff --git a/src/components/results/securityanalysis/security-analysis-result-nmk.tsx b/src/components/results/securityanalysis/security-analysis-result-nmk.tsx index b41eb41da0..5a85a83362 100644 --- a/src/components/results/securityanalysis/security-analysis-result-nmk.tsx +++ b/src/components/results/securityanalysis/security-analysis-result-nmk.tsx @@ -56,11 +56,11 @@ export const SecurityAnalysisResultNmk: FunctionComponent { if ((isFromContingency && params?.data?.contingencyId) || (!isFromContingency && params?.data?.subjectId)) { return { - backgroundColor: theme.selectedRow.background, + backgroundColor: theme.selectedRow.backgroundColor, }; } }, - [isFromContingency, theme.selectedRow.background] + [isFromContingency, theme.selectedRow.backgroundColor] ); const agGridProps = { diff --git a/src/components/results/shortcircuit/shortcircuit-analysis-result-table.tsx b/src/components/results/shortcircuit/shortcircuit-analysis-result-table.tsx index 02d66594c2..74cfd347f3 100644 --- a/src/components/results/shortcircuit/shortcircuit-analysis-result-table.tsx +++ b/src/components/results/shortcircuit/shortcircuit-analysis-result-table.tsx @@ -326,11 +326,11 @@ const ShortCircuitAnalysisResultTable: FunctionComponent { if (!params?.data?.linkedElementId) { return { - backgroundColor: theme.selectedRow.background, + backgroundColor: theme.selectedRow.backgroundColor, }; } }, - [theme.selectedRow.background] + [theme.selectedRow.backgroundColor] ); const defaultColDef = useMemo( diff --git a/src/components/results/stateestimation/state-estimation-quality-result.tsx b/src/components/results/stateestimation/state-estimation-quality-result.tsx index 1af445d926..b9c2bc03a8 100644 --- a/src/components/results/stateestimation/state-estimation-quality-result.tsx +++ b/src/components/results/stateestimation/state-estimation-quality-result.tsx @@ -57,11 +57,11 @@ export const StateEstimationQualityResult: FunctionComponent { if (params?.data?.elementId) { return { - backgroundColor: theme.selectedRow.background, + backgroundColor: theme.selectedRow.backgroundColor, }; } }, - [theme.selectedRow.background] + [theme.selectedRow.backgroundColor] ); const onRowDataUpdated = useCallback((params: any) => { diff --git a/src/components/tooltips/equipment-popover.jsx b/src/components/tooltips/equipment-popover.jsx index cdbf0bdad9..7cab733407 100644 --- a/src/components/tooltips/equipment-popover.jsx +++ b/src/components/tooltips/equipment-popover.jsx @@ -22,7 +22,7 @@ const styles = { fontSize: 10, }, table: (theme) => ({ - backgroundColor: theme.tooltipTable.background, + backgroundColor: theme.tooltipTable.backgroundColor, }), }; diff --git a/src/index.jsx b/src/index.tsx similarity index 93% rename from src/index.jsx rename to src/index.tsx index 3715d9adee..1e5b0a7d40 100644 --- a/src/index.jsx +++ b/src/index.tsx @@ -17,5 +17,5 @@ import './index.css'; import AppWrapper from './components/app-wrapper'; const container = document.getElementById('root'); -const root = createRoot(container); +const root = createRoot(container!); root.render(); diff --git a/src/module-mui.d.ts b/src/module-mui.d.ts index 1525e4fa5f..3f105b630f 100644 --- a/src/module-mui.d.ts +++ b/src/module-mui.d.ts @@ -4,101 +4,110 @@ * 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 type { Property } from 'csstype'; +import type { PaletteColor, SimplePaletteColorOptions } from '@mui/material'; -import { Theme as MuiTheme, ThemeOptions as MuiThemeOptions } from '@mui/material/styles/createTheme'; +// Just to be sure that commons-ui's mui augmentation is seen by tsc +import type {} from '@gridsuite/commons-ui'; + +// https://mui.com/x/react-charts/quickstart/#typescript +import type {} from '@mui/x-charts/themeAugmentation'; // used to customize mui theme -// https://mui.com/material-ui/customization/theming/#typescript declare module '@mui/material/styles' { - export * from '@mui/material/styles'; + // https://mui.com/material-ui/customization/palette/#typescript interface PaletteExtension { - cancelButtonColor: { main: string }; - tabBackground: string; - toolbarBackground: string; + tabBackground: Property.Background; + toolbarBackgroundColor: Property.BackgroundColor; + } + + interface Palette extends PaletteExtension { + cancelButtonColor: PaletteColor; + } + + interface PaletteOptions extends PaletteExtension { + // note: options aren't optional because there aren't default values in code + cancelButtonColor: SimplePaletteColorOptions; } - export interface Palette extends MuiPalette, Required {} - export interface PaletteOptions extends MuiPaletteOptions, Partial {} + // https://mui.com/material-ui/customization/theming/#typescript interface ThemeExtension { - aggrid: { - theme: string; - overlay: { - background: string; - }; - }; networkModificationPanel: { - backgroundColor: string; - border: string; + backgroundColor: Property.BackgroundColor; + border: Property.Border; }; reactflow: { - backgroundColor: string; + backgroundColor: Property.BackgroundColor; labeledGroup: { - backgroundColor: string; - borderColor: string; + backgroundColor: Property.BackgroundColor; + borderColor: Property.BorderColor; }; edge: { - stroke: string; + stroke: Property.Stroke; }; handle: { - border: string; - background: string; + border: Property.Border; + background: Property.Background; }; }; - aggridValueChangeHighlightBackgroundColor: string; selectedRow: { - background: string; - }; - link: { - color: string; - }; - overlay: { - background: string; - }; - palette: { - tabBackground: string; + backgroundColor: Property.BackgroundColor; }; + // palette -> Palette & PaletteOptions node: { common: { - background: string; - activeBackground: string; + background: Property.BackgroundColor; + activeBackground: Property.Background; }; modification: { - border: string; - selectedBorder: string; - hoverBorderColor: string; - activeBorderColor: string; - selectedBackground: string; + border: Property.Border; + selectedBorder: Property.Border; + hoverBorderColor: Property.BorderColor; + activeBorderColor: Property.BorderColor; + selectedBackground: Property.Background; }; root: { - border: string; - selectedBackground: string; - hoverBorderColor: string; - activeBorderColor: string; + border: Property.Border; + selectedBackground: Property.Background; + hoverBorderColor: Property.BorderColor; + activeBorderColor: Property.BorderColor; icon: { - fill: string; - background: string; + fill: Property.Fill; + background: Property.Background; }; }; buildStatus: { - error: string; - warning: string; - success: string; - notBuilt: string; + error: Property.BackgroundColor; + warning: Property.BackgroundColor; + success: Property.BackgroundColor; + notBuilt: Property.BackgroundColor; }; }; searchedText: { - highlightColor: string; - currentHighlightColor: string; + highlightColor: Property.Color; + currentHighlightColor: Property.Color; }; severityChip: { - disabledColor: string; + disabledColor: Property.BackgroundColor; }; formFiller: { - background: string; + backgroundColor: Property.BackgroundColor; + }; + tooltipTable: { + backgroundColor: Property.BackgroundColor; }; } - export interface Theme extends MuiTheme, Required {} + + export interface Theme extends ThemeExtension {} // allow configuration using `createTheme` - export interface ThemeOptions extends MuiThemeOptions, Partial {} + export interface ThemeOptions extends ThemeExtension { + // note: options aren't optional because there aren't default values in code + } +} + +declare module '@mui/material/Button' { + interface ButtonPropsColorOverrides { + cancelButtonColor: true; + } } diff --git a/src/utils/config-params.ts b/src/utils/config-params.ts index 41f6b623b2..675e4b9faa 100644 --- a/src/utils/config-params.ts +++ b/src/utils/config-params.ts @@ -30,5 +30,3 @@ export const PARAM_SA_HIGH_VOLTAGE_ABSOLUTE_THRESHOLD = 'highVoltageAbsoluteThre // Param values export const PARAM_PROVIDER_OPENLOADFLOW = 'OpenLoadFlow'; export const PARAM_PROVIDER_DYNAFLOW = 'DynaFlow'; - -export const basemap_style_theme_key = (basemap: string) => basemap + 'Style';