{gettext('CPU information')}
diff --git a/web/pgadmin/dashboard/static/js/WelcomeDashboard.jsx b/web/pgadmin/dashboard/static/js/WelcomeDashboard.jsx
index 6c6bd9c4d..86fa1e516 100644
--- a/web/pgadmin/dashboard/static/js/WelcomeDashboard.jsx
+++ b/web/pgadmin/dashboard/static/js/WelcomeDashboard.jsx
@@ -11,10 +11,10 @@ import React from 'react';
import gettext from 'sources/gettext';
import _ from 'lodash';
import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
import pgAdmin from 'sources/pgadmin';
import PgAdminLogo from './PgAdminLogo';
-import { Link } from '@material-ui/core';
+import { Link } from '@mui/material';
const useStyles = makeStyles((theme) => ({
emptyPanel: {
@@ -83,7 +83,22 @@ const useStyles = makeStyles((theme) => ({
flex: '1 1 auto',
minHeight: '1px',
padding: '0.5rem !important',
- }
+ },
+ welcomeLogo: {
+ width: '400px',
+ '& .app-name': {
+ fill: theme.otherVars.colorBrand
+ },
+ '& .app-name-underline': {
+ stroke: theme.palette.text.primary
+ },
+ '& .app-tagline': {
+ fill: theme.palette.text.primary
+ }
+ },
+ dashboardIcon: {
+ color: theme.otherVars.colorBrand
+ },
}));
@@ -126,7 +141,9 @@ export default function WelcomeDashboard({ pgBrowser }) {
{gettext('Welcome')}
-
+
{gettext('Feature rich')} | {gettext('Maximises PostgreSQL')}{' '}
| {gettext('Open Source')}{' '}
@@ -148,22 +165,24 @@ export default function WelcomeDashboard({ pgBrowser }) {
{ AddNewServer(pgBrowser); }} className={classes.link}>
-
-
+
+
+
{gettext('Add New Server')}
pgAdmin.Preferences.show()} className={classes.link}>
-
-
+
+
+
{gettext('Configure pgAdmin')}
@@ -184,21 +203,23 @@ export default function WelcomeDashboard({ pgBrowser }) {
target="postgres_help"
className={classes.link}
>
-
-
+
+
+
{gettext('PostgreSQL Documentation')}
@@ -208,11 +229,12 @@ export default function WelcomeDashboard({ pgBrowser }) {
target="planet_website"
className={classes.link}
>
-
-
+
+
+
{gettext('Planet PostgreSQL')}
@@ -222,11 +244,12 @@ export default function WelcomeDashboard({ pgBrowser }) {
target="postgres_website"
className={classes.link}
>
-
-
+
+
+
{gettext('Community Support')}
@@ -244,4 +267,3 @@ export default function WelcomeDashboard({ pgBrowser }) {
WelcomeDashboard.propTypes = {
pgBrowser: PropTypes.object.isRequired
};
-
diff --git a/web/pgadmin/dashboard/static/js/components/ChartContainer.jsx b/web/pgadmin/dashboard/static/js/components/ChartContainer.jsx
index 587d545c1..dcbfc77d5 100644
--- a/web/pgadmin/dashboard/static/js/components/ChartContainer.jsx
+++ b/web/pgadmin/dashboard/static/js/components/ChartContainer.jsx
@@ -8,7 +8,8 @@
//////////////////////////////////////////////////////////////
import React from 'react';
import PropTypes from 'prop-types';
-import { Box, Card, CardContent, CardHeader, makeStyles } from '@material-ui/core';
+import { Box, Card, CardContent, CardHeader } from '@mui/material';
+import { makeStyles } from '@mui/styles';
import EmptyPanelMessage from '../../../../static/js/components/EmptyPanelMessage';
diff --git a/web/pgadmin/dashboard/static/js/components/RefreshButtons.jsx b/web/pgadmin/dashboard/static/js/components/RefreshButtons.jsx
index 4350d814b..781abae1f 100644
--- a/web/pgadmin/dashboard/static/js/components/RefreshButtons.jsx
+++ b/web/pgadmin/dashboard/static/js/components/RefreshButtons.jsx
@@ -9,9 +9,9 @@
import React from 'react';
import gettext from 'sources/gettext';
-import CachedOutlinedIcon from '@material-ui/icons/CachedOutlined';
+import CachedOutlinedIcon from '@mui/icons-material/CachedOutlined';
import { PgIconButton } from '../../../../static/js/components/Buttons';
-import { makeStyles } from '@material-ui/core';
+import { makeStyles } from '@mui/styles';
import PropTypes from 'prop-types';
const useStyles = makeStyles((theme) => ({
diff --git a/web/pgadmin/dashboard/static/js/components/SectionContainer.jsx b/web/pgadmin/dashboard/static/js/components/SectionContainer.jsx
index 5adf17851..6077b00b3 100644
--- a/web/pgadmin/dashboard/static/js/components/SectionContainer.jsx
+++ b/web/pgadmin/dashboard/static/js/components/SectionContainer.jsx
@@ -8,7 +8,8 @@
//////////////////////////////////////////////////////////////
import React from 'react';
import PropTypes from 'prop-types';
-import { Box, makeStyles } from '@material-ui/core';
+import { Box } from '@mui/material';
+import { makeStyles } from '@mui/styles';
const useStyles = makeStyles((theme) => ({
diff --git a/web/pgadmin/dashboard/static/scss/_dashboard.scss b/web/pgadmin/dashboard/static/scss/_dashboard.scss
deleted file mode 100644
index f28d5cdfc..000000000
--- a/web/pgadmin/dashboard/static/scss/_dashboard.scss
+++ /dev/null
@@ -1,90 +0,0 @@
-.dashboard-icon {
- color: $color-brand;
-}
-
-.dashboard-container {
- padding-top: math.div($grid-gutter-width, 2);
- padding-bottom: math.div($grid-gutter-width, 2);
- min-height: 100%;
-}
-
-.dashboard-row {
- margin-bottom: math.div($grid-gutter-width, 2);
-}
-
-.graph-error {
- background-color: inherit;
- padding-top: 20px
-}
-
-.grid-error {
- background-color: $color-gray-lighter;
- padding-top: 20px;
- padding-bottom: 40px;
-}
-
-.grid-container {
- width: 100%;
- overflow: auto;
- border-radius: $card-border-radius;
- border: $panel-border;
-}
-
-.dashboard-link a {
- cursor: pointer;
- color: $color-fg;
-}
-
-.dashboard-graph {
- & .legend {
- font-size: $tree-font-size;
- & .legend-value {
- font-weight: normal;
- margin-left: 0.25rem;
- & .legend-label {
- margin-left: 0.25rem;
- }
- }
- }
-
- & .dashboard-graph-body {
- padding: 0.25rem 0.5rem;
- height: 165px;
-
- & .flotr-labels {
- color: $color-fg !important;
- }
- & .flotr-legend {
- border: none !important;
- padding: 0.25rem 0.5rem;
- & .flotr-legend-label {
- color: $color-fg !important;
- padding-left: 0.25rem;
- }
-
- & .flotr-legend-color-box>div {
- border: none !important;
- &>div {
- border: none !important;
- }
- }
-
- & .flotr-legend-bg {
- border-radius: $border-radius;
- }
- }
- }
-}
-
-.welcome-logo {
- width: 400px;
- & .app-name {
- fill: $color-brand;
- }
- & .app-name-underline {
- stroke: $color-fg;
- }
- & .app-tagline {
- fill: $color-fg;
- }
-}
diff --git a/web/pgadmin/misc/bgprocess/static/js/BgProcessNotify.jsx b/web/pgadmin/misc/bgprocess/static/js/BgProcessNotify.jsx
index 26a99245f..4671f55c6 100644
--- a/web/pgadmin/misc/bgprocess/static/js/BgProcessNotify.jsx
+++ b/web/pgadmin/misc/bgprocess/static/js/BgProcessNotify.jsx
@@ -1,9 +1,10 @@
-import { Box, makeStyles } from '@material-ui/core';
+import { Box } from '@mui/material';
+import { makeStyles } from '@mui/styles';
import React from 'react';
-import CloseIcon from '@material-ui/icons/CloseRounded';
+import CloseIcon from '@mui/icons-material/CloseRounded';
import { DefaultButton, PgIconButton } from '../../../../static/js/components/Buttons';
import clsx from 'clsx';
-import DescriptionOutlinedIcon from '@material-ui/icons/DescriptionOutlined';
+import DescriptionOutlinedIcon from '@mui/icons-material/DescriptionOutlined';
import { BgProcessManagerProcessState } from './BgProcessConstants';
import PropTypes from 'prop-types';
import gettext from 'sources/gettext';
@@ -99,4 +100,3 @@ export function processCompleted(desc, process_state, onViewProcess) {
null
);
}
-
diff --git a/web/pgadmin/misc/bgprocess/static/js/ProcessDetails.jsx b/web/pgadmin/misc/bgprocess/static/js/ProcessDetails.jsx
index d7bc90210..a18b0da9e 100644
--- a/web/pgadmin/misc/bgprocess/static/js/ProcessDetails.jsx
+++ b/web/pgadmin/misc/bgprocess/static/js/ProcessDetails.jsx
@@ -10,17 +10,18 @@
import React, { useState, useMemo } from 'react';
import gettext from 'sources/gettext';
import url_for from 'sources/url_for';
-import { Box, makeStyles } from '@material-ui/core';
+import { Box } from '@mui/material';
+import { makeStyles } from '@mui/styles';
import PropTypes from 'prop-types';
import { MESSAGE_TYPE, NotifierMessage } from '../../../../static/js/components/FormComponents';
import { BgProcessManagerProcessState } from './BgProcessConstants';
import { DefaultButton, PgIconButton } from '../../../../static/js/components/Buttons';
-import HighlightOffRoundedIcon from '@material-ui/icons/HighlightOffRounded';
-import AccessTimeRoundedIcon from '@material-ui/icons/AccessTimeRounded';
+import HighlightOffRoundedIcon from '@mui/icons-material/HighlightOffRounded';
+import AccessTimeRoundedIcon from '@mui/icons-material/AccessTimeRounded';
import { useInterval } from '../../../../static/js/custom_hooks';
import getApiInstance from '../../../../static/js/api_instance';
import pgAdmin from 'sources/pgadmin';
-import FolderSharedRoundedIcon from '@material-ui/icons/FolderSharedRounded';
+import FolderSharedRoundedIcon from '@mui/icons-material/FolderSharedRounded';
const useStyles = makeStyles((theme)=>({
diff --git a/web/pgadmin/misc/bgprocess/static/js/Processes.jsx b/web/pgadmin/misc/bgprocess/static/js/Processes.jsx
index cddf730cc..1d093c3f8 100644
--- a/web/pgadmin/misc/bgprocess/static/js/Processes.jsx
+++ b/web/pgadmin/misc/bgprocess/static/js/Processes.jsx
@@ -11,15 +11,15 @@ import React, { useCallback, useEffect, useMemo } from 'react';
import PgTable from 'sources/components/PgTable';
import gettext from 'sources/gettext';
import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
import { BgProcessManagerEvents, BgProcessManagerProcessState } from './BgProcessConstants';
import { PgButtonGroup, PgIconButton } from '../../../../static/js/components/Buttons';
-import CancelIcon from '@material-ui/icons/Cancel';
-import DescriptionOutlinedIcon from '@material-ui/icons/DescriptionOutlined';
-import DeleteIcon from '@material-ui/icons/Delete';
-import HelpIcon from '@material-ui/icons/HelpRounded';
+import CancelIcon from '@mui/icons-material/Cancel';
+import DescriptionOutlinedIcon from '@mui/icons-material/DescriptionOutlined';
+import DeleteIcon from '@mui/icons-material/Delete';
+import HelpIcon from '@mui/icons-material/HelpRounded';
import url_for from 'sources/url_for';
-import { Box } from '@material-ui/core';
+import { Box } from '@mui/material';
import { usePgAdmin } from '../../../../static/js/BrowserComponent';
import { BROWSER_PANELS } from '../../../../browser/static/js/constants';
import ErrorBoundary from '../../../../static/js/helpers/ErrorBoundary';
diff --git a/web/pgadmin/misc/cloud/static/js/CloudWizard.jsx b/web/pgadmin/misc/cloud/static/js/CloudWizard.jsx
index 99a872ea1..cc98cb024 100644
--- a/web/pgadmin/misc/cloud/static/js/CloudWizard.jsx
+++ b/web/pgadmin/misc/cloud/static/js/CloudWizard.jsx
@@ -10,8 +10,8 @@
import gettext from 'sources/gettext';
import url_for from 'sources/url_for';
import React from 'react';
-import { Box, Paper } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { Box, Paper } from '@mui/material';
+import { makeStyles } from '@mui/styles';
import Wizard from '../../../../static/js/helpers/wizard/Wizard';
import WizardStep from '../../../../static/js/helpers/wizard/WizardStep';
import {FormFooterMessage, MESSAGE_TYPE } from '../../../../static/js/components/FormComponents';
diff --git a/web/pgadmin/misc/cloud/static/js/aws.js b/web/pgadmin/misc/cloud/static/js/aws.js
index e5b7bc151..40fa6a353 100644
--- a/web/pgadmin/misc/cloud/static/js/aws.js
+++ b/web/pgadmin/misc/cloud/static/js/aws.js
@@ -16,7 +16,7 @@ import url_for from 'sources/url_for';
import getApiInstance from '../../../../static/js/api_instance';
import { isEmptyString } from 'sources/validators';
import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
import gettext from 'sources/gettext';
const useStyles = makeStyles(() =>
diff --git a/web/pgadmin/misc/cloud/static/js/azure.js b/web/pgadmin/misc/cloud/static/js/azure.js
index 16f0a741b..0e87bce10 100644
--- a/web/pgadmin/misc/cloud/static/js/azure.js
+++ b/web/pgadmin/misc/cloud/static/js/azure.js
@@ -18,7 +18,7 @@ import getApiInstance from '../../../../static/js/api_instance';
import { CloudWizardEventsContext } from './CloudWizard';
import {MESSAGE_TYPE } from '../../../../static/js/components/FormComponents';
import gettext from 'sources/gettext';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
const useStyles = makeStyles(() =>
({
diff --git a/web/pgadmin/misc/cloud/static/js/cloud_components.jsx b/web/pgadmin/misc/cloud/static/js/cloud_components.jsx
index 3d601a8a5..95e2e7d6f 100644
--- a/web/pgadmin/misc/cloud/static/js/cloud_components.jsx
+++ b/web/pgadmin/misc/cloud/static/js/cloud_components.jsx
@@ -8,16 +8,16 @@
//////////////////////////////////////////////////////////////
import React from 'react';
-import { ToggleButton, ToggleButtonGroup } from '@material-ui/lab';
-import CheckRoundedIcon from '@material-ui/icons/CheckRounded';
+import { ToggleButton, ToggleButtonGroup } from '@mui/material';
+import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
import { DefaultButton, PrimaryButton } from '../../../../static/js/components/Buttons';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
import PropTypes from 'prop-types';
import { getAWSSummary } from './aws';
import {getAzureSummary} from './azure';
import { getBigAnimalSummary } from './biganimal';
import { commonTableStyles } from '../../../../static/js/Theme';
-import { Table, TableBody, TableCell, TableHead, TableRow } from '@material-ui/core';
+import { Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material';
import clsx from 'clsx';
import gettext from 'sources/gettext';
import { getGoogleSummary } from './google';
diff --git a/web/pgadmin/misc/cloud/static/js/google.js b/web/pgadmin/misc/cloud/static/js/google.js
index c090cb297..f7425333f 100644
--- a/web/pgadmin/misc/cloud/static/js/google.js
+++ b/web/pgadmin/misc/cloud/static/js/google.js
@@ -18,7 +18,7 @@ import getApiInstance from '../../../../static/js/api_instance';
import { CloudWizardEventsContext } from './CloudWizard';
import {MESSAGE_TYPE } from '../../../../static/js/components/FormComponents';
import gettext from 'sources/gettext';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
const useStyles = makeStyles(() =>
({
diff --git a/web/pgadmin/misc/dependencies/static/js/Dependencies.jsx b/web/pgadmin/misc/dependencies/static/js/Dependencies.jsx
index 00e1eb52d..971b4b685 100644
--- a/web/pgadmin/misc/dependencies/static/js/Dependencies.jsx
+++ b/web/pgadmin/misc/dependencies/static/js/Dependencies.jsx
@@ -13,7 +13,7 @@ import PgTable from 'sources/components/PgTable';
import gettext from 'sources/gettext';
import PropTypes from 'prop-types';
import getApiInstance from 'sources/api_instance';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
import { getURL } from '../../../static/utils/utils';
import Loader from 'sources/components/Loader';
import EmptyPanelMessage from '../../../../static/js/components/EmptyPanelMessage';
diff --git a/web/pgadmin/misc/dependents/static/js/Dependents.jsx b/web/pgadmin/misc/dependents/static/js/Dependents.jsx
index d59f1df1c..3afa2ef92 100644
--- a/web/pgadmin/misc/dependents/static/js/Dependents.jsx
+++ b/web/pgadmin/misc/dependents/static/js/Dependents.jsx
@@ -13,7 +13,7 @@ import PgTable from 'sources/components/PgTable';
import gettext from 'sources/gettext';
import PropTypes from 'prop-types';
import getApiInstance from 'sources/api_instance';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
import { getURL } from '../../../static/utils/utils';
import Loader from 'sources/components/Loader';
import EmptyPanelMessage from '../../../../static/js/components/EmptyPanelMessage';
diff --git a/web/pgadmin/misc/file_manager/static/js/components/FileManager.jsx b/web/pgadmin/misc/file_manager/static/js/components/FileManager.jsx
index 64c60c0f1..dbffcb0db 100644
--- a/web/pgadmin/misc/file_manager/static/js/components/FileManager.jsx
+++ b/web/pgadmin/misc/file_manager/static/js/components/FileManager.jsx
@@ -6,21 +6,22 @@
// This software is released under the PostgreSQL Licence
//
//////////////////////////////////////////////////////////////
-import { Box, makeStyles } from '@material-ui/core';
+import { Box } from '@mui/material';
+import { makeStyles } from '@mui/styles';
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { DefaultButton, PgButtonGroup, PgIconButton, PrimaryButton } from '../../../../../static/js/components/Buttons';
import { useModalStyles } from '../../../../../static/js/helpers/ModalProvider';
-import CloseIcon from '@material-ui/icons/CloseRounded';
-import FolderSharedIcon from '@material-ui/icons/FolderShared';
-import FolderIcon from '@material-ui/icons/Folder';
-import CheckRoundedIcon from '@material-ui/icons/CheckRounded';
-import HomeRoundedIcon from '@material-ui/icons/HomeRounded';
-import ArrowUpwardRoundedIcon from '@material-ui/icons/ArrowUpwardRounded';
-import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
-import MoreHorizRoundedIcon from '@material-ui/icons/MoreHorizRounded';
-import SyncRoundedIcon from '@material-ui/icons/SyncRounded';
-import CreateNewFolderRoundedIcon from '@material-ui/icons/CreateNewFolderRounded';
-import GetAppRoundedIcon from '@material-ui/icons/GetAppRounded';
+import CloseIcon from '@mui/icons-material/CloseRounded';
+import FolderSharedIcon from '@mui/icons-material/FolderShared';
+import FolderIcon from '@mui/icons-material/Folder';
+import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
+import HomeRoundedIcon from '@mui/icons-material/HomeRounded';
+import ArrowUpwardRoundedIcon from '@mui/icons-material/ArrowUpwardRounded';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import MoreHorizRoundedIcon from '@mui/icons-material/MoreHorizRounded';
+import SyncRoundedIcon from '@mui/icons-material/SyncRounded';
+import CreateNewFolderRoundedIcon from '@mui/icons-material/CreateNewFolderRounded';
+import GetAppRoundedIcon from '@mui/icons-material/GetAppRounded';
import gettext from 'sources/gettext';
import clsx from 'clsx';
import { FormFooterMessage, InputSelectNonSearch, InputText, MESSAGE_TYPE } from '../../../../../static/js/components/FormComponents';
@@ -709,7 +710,7 @@ export default function FileManager({params, closeModal, onOK, onCancel, sharedS
{
await openDir(fmUtilsObj.dirname(fmUtilsObj.currPath), selectedSS);
}} icon={} disabled={!fmUtilsObj.dirname(fmUtilsObj.currPath) || showUploader} />
- {
diff --git a/web/pgadmin/misc/file_manager/static/js/components/GridView.jsx b/web/pgadmin/misc/file_manager/static/js/components/GridView.jsx
index 73d91615c..acef14e79 100644
--- a/web/pgadmin/misc/file_manager/static/js/components/GridView.jsx
+++ b/web/pgadmin/misc/file_manager/static/js/components/GridView.jsx
@@ -6,12 +6,13 @@
// This software is released under the PostgreSQL Licence
//
//////////////////////////////////////////////////////////////
-import { Box, makeStyles } from '@material-ui/core';
+import { Box } from '@mui/material';
+import { makeStyles } from '@mui/styles';
import React, {useState, useEffect, useRef, useLayoutEffect} from 'react';
-import FolderIcon from '@material-ui/icons/Folder';
-import DescriptionIcon from '@material-ui/icons/Description';
-import LockRoundedIcon from '@material-ui/icons/LockRounded';
-import StorageRoundedIcon from '@material-ui/icons/StorageRounded';
+import FolderIcon from '@mui/icons-material/Folder';
+import DescriptionIcon from '@mui/icons-material/Description';
+import LockRoundedIcon from '@mui/icons-material/LockRounded';
+import StorageRoundedIcon from '@mui/icons-material/StorageRounded';
import PropTypes from 'prop-types';
import gettext from 'sources/gettext';
diff --git a/web/pgadmin/misc/file_manager/static/js/components/ListView.jsx b/web/pgadmin/misc/file_manager/static/js/components/ListView.jsx
index 15854f35c..998c56a6c 100644
--- a/web/pgadmin/misc/file_manager/static/js/components/ListView.jsx
+++ b/web/pgadmin/misc/file_manager/static/js/components/ListView.jsx
@@ -6,13 +6,13 @@
// This software is released under the PostgreSQL Licence
//
//////////////////////////////////////////////////////////////
-import { makeStyles } from '@material-ui/core';
+import { makeStyles } from '@mui/styles';
import React, { useRef, useEffect } from 'react';
import PgReactDataGrid from '../../../../../static/js/components/PgReactDataGrid';
-import FolderIcon from '@material-ui/icons/Folder';
-import StorageRoundedIcon from '@material-ui/icons/StorageRounded';
-import DescriptionIcon from '@material-ui/icons/Description';
-import LockRoundedIcon from '@material-ui/icons/LockRounded';
+import FolderIcon from '@mui/icons-material/Folder';
+import StorageRoundedIcon from '@mui/icons-material/StorageRounded';
+import DescriptionIcon from '@mui/icons-material/Description';
+import LockRoundedIcon from '@mui/icons-material/LockRounded';
import PropTypes from 'prop-types';
import gettext from 'sources/gettext';
diff --git a/web/pgadmin/misc/file_manager/static/js/components/Uploader.jsx b/web/pgadmin/misc/file_manager/static/js/components/Uploader.jsx
index 6fec92d2a..d66957203 100644
--- a/web/pgadmin/misc/file_manager/static/js/components/Uploader.jsx
+++ b/web/pgadmin/misc/file_manager/static/js/components/Uploader.jsx
@@ -7,8 +7,9 @@
//
//////////////////////////////////////////////////////////////
import React, { useCallback, useReducer, useEffect, useMemo } from 'react';
-import { Box, List, ListItem, makeStyles } from '@material-ui/core';
-import CloseIcon from '@material-ui/icons/CloseRounded';
+import { Box, List, ListItem } from '@mui/material';
+import { makeStyles } from '@mui/styles';
+import CloseIcon from '@mui/icons-material/CloseRounded';
import { PgIconButton } from '../../../../../static/js/components/Buttons';
import gettext from 'sources/gettext';
import {useDropzone} from 'react-dropzone';
diff --git a/web/pgadmin/misc/properties/CollectionNodeProperties.jsx b/web/pgadmin/misc/properties/CollectionNodeProperties.jsx
index 71636732b..7cda4911d 100644
--- a/web/pgadmin/misc/properties/CollectionNodeProperties.jsx
+++ b/web/pgadmin/misc/properties/CollectionNodeProperties.jsx
@@ -8,17 +8,17 @@
//////////////////////////////////////////////////////////////
import React from 'react';
import getApiInstance from 'sources/api_instance';
-import { makeStyles } from '@material-ui/core/styles';
-import { Box } from '@material-ui/core';
+import { makeStyles } from '@mui/styles';
+import { Box } from '@mui/material';
import { generateCollectionURL } from '../../browser/static/js/node_ajax';
import gettext from 'sources/gettext';
import PgTable from 'sources/components/PgTable';
import Theme from 'sources/Theme';
import PropTypes from 'prop-types';
import { PgButtonGroup, PgIconButton } from '../../static/js/components/Buttons';
-import DeleteIcon from '@material-ui/icons/Delete';
-import DeleteSweepIcon from '@material-ui/icons/DeleteSweep';
-import DeleteForeverIcon from '@material-ui/icons/DeleteForever';
+import DeleteIcon from '@mui/icons-material/Delete';
+import DeleteSweepIcon from '@mui/icons-material/DeleteSweep';
+import DeleteForeverIcon from '@mui/icons-material/DeleteForever';
import EmptyPanelMessage from '../../static/js/components/EmptyPanelMessage';
import Loader from 'sources/components/Loader';
import { evalFunc } from '../../static/js/utils';
diff --git a/web/pgadmin/misc/properties/Properties.jsx b/web/pgadmin/misc/properties/Properties.jsx
index 146761be6..aa8fdc53c 100644
--- a/web/pgadmin/misc/properties/Properties.jsx
+++ b/web/pgadmin/misc/properties/Properties.jsx
@@ -15,7 +15,8 @@ import { BROWSER_PANELS } from '../../browser/static/js/constants';
import ObjectNodeProperties from './ObjectNodeProperties';
import EmptyPanelMessage from '../../static/js/components/EmptyPanelMessage';
import gettext from 'sources/gettext';
-import { Box, makeStyles } from '@material-ui/core';
+import { Box } from '@mui/material';
+import { makeStyles } from '@mui/styles';
import { usePgAdmin } from '../../static/js/BrowserComponent';
import PropTypes from 'prop-types';
import _ from 'lodash';
diff --git a/web/pgadmin/misc/sql/static/js/SQL.jsx b/web/pgadmin/misc/sql/static/js/SQL.jsx
index 0303001ff..e04bd5061 100644
--- a/web/pgadmin/misc/sql/static/js/SQL.jsx
+++ b/web/pgadmin/misc/sql/static/js/SQL.jsx
@@ -12,7 +12,7 @@ import { generateNodeUrl } from '../../../../browser/static/js/node_ajax';
import gettext from 'sources/gettext';
import PropTypes from 'prop-types';
import getApiInstance from 'sources/api_instance';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
import CodeMirror from '../../../../static/js/components/ReactCodeMirror';
import Loader from 'sources/components/Loader';
import withStandardTabInfo from '../../../../static/js/helpers/withStandardTabInfo';
diff --git a/web/pgadmin/misc/statistics/static/js/Statistics.jsx b/web/pgadmin/misc/statistics/static/js/Statistics.jsx
index 4758ca503..e50e056a3 100644
--- a/web/pgadmin/misc/statistics/static/js/Statistics.jsx
+++ b/web/pgadmin/misc/statistics/static/js/Statistics.jsx
@@ -13,7 +13,7 @@ import PgTable from 'sources/components/PgTable';
import gettext from 'sources/gettext';
import PropTypes from 'prop-types';
import getApiInstance from 'sources/api_instance';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
import { getURL } from '../../../static/utils/utils';
import Loader from 'sources/components/Loader';
import EmptyPanelMessage from '../../../../static/js/components/EmptyPanelMessage';
diff --git a/web/pgadmin/misc/themes/__init__.py b/web/pgadmin/misc/themes/__init__.py
index c54762e7b..8602c1fff 100644
--- a/web/pgadmin/misc/themes/__init__.py
+++ b/web/pgadmin/misc/themes/__init__.py
@@ -4,47 +4,18 @@ from pgadmin.utils.preferences import Preferences
def get_all_themes():
- # Themes file is copied in generated directory
- theme_file_path = os.path.join(
- os.path.dirname(os.path.realpath(__file__)),
- '../../static/js/generated',
- 'pgadmin.themes.json'
- )
-
all_themes = {
"standard": {
"disp_name": "Standard",
- "cssfile": "pgadmin",
"preview_img": "standard_preview.png"
- }
+ },
+ "dark": {
+ "disp_name": "dark",
+ "preview_img": "dark_preview.png"
+ },
+ "high_contrast": {
+ "disp_name": "high_contrast",
+ "preview_img": "high_contrast_preview.png"
+ },
}
-
- try:
- all_themes.update(json.load(open(theme_file_path)))
- except Exception:
- pass
-
return all_themes
-
-
-def themes(app):
- @app.context_processor
- def inject_theme_func():
- def get_theme_css():
- all_themes = get_all_themes()
- theme_css = all_themes['standard']['cssfile'] + '.css'
- theme = 'standard'
- try:
- misc_preference = Preferences.module('misc')
- theme = misc_preference.preference('theme').get()
- if theme in all_themes:
- theme_css = all_themes[theme]['cssfile'] + '.css'
- except Exception:
- # Let the default theme go if exception occurs
- pass
-
- return theme_css, theme
-
- return {
- 'get_theme_css': get_theme_css,
- }
diff --git a/web/pgadmin/preferences/static/js/components/PreferencesComponent.jsx b/web/pgadmin/preferences/static/js/components/PreferencesComponent.jsx
index b60a47441..7c9e280fa 100644
--- a/web/pgadmin/preferences/static/js/components/PreferencesComponent.jsx
+++ b/web/pgadmin/preferences/static/js/components/PreferencesComponent.jsx
@@ -12,14 +12,14 @@ import _ from 'lodash';
import url_for from 'sources/url_for';
import React, { useEffect, useMemo } from 'react';
import { FileType } from 'react-aspen';
-import { Box } from '@material-ui/core';
+import { Box } from '@mui/material';
import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
import SchemaView from '../../../../static/js/SchemaView';
import getApiInstance from '../../../../static/js/api_instance';
-import CloseSharpIcon from '@material-ui/icons/CloseSharp';
-import HelpIcon from '@material-ui/icons/HelpRounded';
-import SaveSharpIcon from '@material-ui/icons/SaveSharp';
+import CloseSharpIcon from '@mui/icons-material/CloseSharp';
+import HelpIcon from '@mui/icons-material/HelpRounded';
+import SaveSharpIcon from '@mui/icons-material/SaveSharp';
import clsx from 'clsx';
import pgAdmin from 'sources/pgadmin';
import { DefaultButton, PgIconButton, PrimaryButton } from '../../../../static/js/components/Buttons';
@@ -528,10 +528,6 @@ export default function PreferencesComponent({ ...props }) {
}
function checkRefreshRequired(pref, requires_refresh) {
- if (pref.name == 'theme') {
- requires_refresh = true;
- }
-
if (pref.name == 'user_language') {
requires_refresh = true;
}
diff --git a/web/pgadmin/preferences/static/scss/_preferences.scss b/web/pgadmin/preferences/static/scss/_preferences.scss
deleted file mode 100644
index 14b52d32f..000000000
--- a/web/pgadmin/preferences/static/scss/_preferences.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-.preferences_tree{
- padding: 0px;
- padding-top: 2px;
- height: 100%;
- overflow: auto;
- border-right: $panel-border;
-}
-
-.btn-checkbox {
- padding: $btn-checkbox-padding;
-
- & input[type="checkbox"]{
- margin-top: 0px !important;
- }
-}
diff --git a/web/pgadmin/static/css/style.css b/web/pgadmin/static/css/style.css
index c190c1740..a4d049145 100644
--- a/web/pgadmin/static/css/style.css
+++ b/web/pgadmin/static/css/style.css
@@ -9,3 +9,8 @@
@import 'node_modules/@simonwep/pickr/dist/themes/monolith.min.css';
@import 'node_modules/uplot/dist/uPlot.min.css';
+
+@import 'node_modules/rc-dock/dist/rc-dock.css';
+@import 'node_modules/@szhsin/react-menu/dist/index.css';
+
+@import './pgadmin.css';
diff --git a/web/pgadmin/static/scss/resources/dark/dark_preview.png b/web/pgadmin/static/img/dark_preview.png
similarity index 100%
rename from web/pgadmin/static/scss/resources/dark/dark_preview.png
rename to web/pgadmin/static/img/dark_preview.png
diff --git a/web/pgadmin/static/scss/resources/high_contrast/high_contrast_preview.png b/web/pgadmin/static/img/high_contrast_preview.png
similarity index 100%
rename from web/pgadmin/static/scss/resources/high_contrast/high_contrast_preview.png
rename to web/pgadmin/static/img/high_contrast_preview.png
diff --git a/web/pgadmin/static/scss/resources/standard_preview.png b/web/pgadmin/static/img/standard_preview.png
similarity index 100%
rename from web/pgadmin/static/scss/resources/standard_preview.png
rename to web/pgadmin/static/img/standard_preview.png
diff --git a/web/pgadmin/static/js/AppMenuBar.jsx b/web/pgadmin/static/js/AppMenuBar.jsx
index ca5ccbba1..286dd8a7c 100644
--- a/web/pgadmin/static/js/AppMenuBar.jsx
+++ b/web/pgadmin/static/js/AppMenuBar.jsx
@@ -1,9 +1,10 @@
-import { Box, makeStyles } from '@material-ui/core';
+import { Box } from '@mui/material';
+import { makeStyles } from '@mui/styles';
import React, { useState, useEffect } from 'react';
import { PrimaryButton } from './components/Buttons';
import { PgMenu, PgMenuDivider, PgMenuItem, PgSubMenu } from './components/Menu';
-import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
-import AccountCircleRoundedIcon from '@material-ui/icons/AccountCircleRounded';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import AccountCircleRoundedIcon from '@mui/icons-material/AccountCircleRounded';
import { usePgAdmin } from '../../static/js/BrowserComponent';
const useStyles = makeStyles((theme)=>({
diff --git a/web/pgadmin/static/js/Dialogs/ChangeOwnershipContent.jsx b/web/pgadmin/static/js/Dialogs/ChangeOwnershipContent.jsx
index 14930decd..889a2b578 100644
--- a/web/pgadmin/static/js/Dialogs/ChangeOwnershipContent.jsx
+++ b/web/pgadmin/static/js/Dialogs/ChangeOwnershipContent.jsx
@@ -7,7 +7,7 @@
//
//////////////////////////////////////////////////////////////
-import { makeStyles } from '@material-ui/core';
+import { makeStyles } from '@mui/styles';
import React from 'react';
import PropTypes from 'prop-types';
import gettext from 'sources/gettext';
diff --git a/web/pgadmin/static/js/Dialogs/ChangePasswordContent.jsx b/web/pgadmin/static/js/Dialogs/ChangePasswordContent.jsx
index 8f00f30d9..f5441611e 100644
--- a/web/pgadmin/static/js/Dialogs/ChangePasswordContent.jsx
+++ b/web/pgadmin/static/js/Dialogs/ChangePasswordContent.jsx
@@ -7,7 +7,7 @@
//
//////////////////////////////////////////////////////////////
-import { makeStyles } from '@material-ui/core';
+import { makeStyles } from '@mui/styles';
import React from 'react';
import PropTypes from 'prop-types';
import gettext from 'sources/gettext';
diff --git a/web/pgadmin/static/js/Dialogs/ConfirmSaveContent.jsx b/web/pgadmin/static/js/Dialogs/ConfirmSaveContent.jsx
index 2838c6bec..2cd2a926d 100644
--- a/web/pgadmin/static/js/Dialogs/ConfirmSaveContent.jsx
+++ b/web/pgadmin/static/js/Dialogs/ConfirmSaveContent.jsx
@@ -1,11 +1,11 @@
import React from 'react';
import { useModalStyles } from '../helpers/ModalProvider';
import gettext from 'sources/gettext';
-import { Box } from '@material-ui/core';
+import { Box } from '@mui/material';
import { DefaultButton, PrimaryButton } from '../components/Buttons';
-import CloseIcon from '@material-ui/icons/CloseRounded';
-import CheckRoundedIcon from '@material-ui/icons/CheckRounded';
-import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
+import CloseIcon from '@mui/icons-material/CloseRounded';
+import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
+import DeleteRoundedIcon from '@mui/icons-material/DeleteRounded';
import HTMLReactParser from 'html-react-parser';
import PropTypes from 'prop-types';
diff --git a/web/pgadmin/static/js/Dialogs/ConnectServerContent.jsx b/web/pgadmin/static/js/Dialogs/ConnectServerContent.jsx
index 3729d8ca3..c22543c1c 100644
--- a/web/pgadmin/static/js/Dialogs/ConnectServerContent.jsx
+++ b/web/pgadmin/static/js/Dialogs/ConnectServerContent.jsx
@@ -9,10 +9,10 @@
import React, { useState, useRef, useEffect, useLayoutEffect } from 'react';
import gettext from 'sources/gettext';
-import { Box } from '@material-ui/core';
+import { Box } from '@mui/material';
import { DefaultButton, PrimaryButton } from '../components/Buttons';
-import CloseIcon from '@material-ui/icons/CloseRounded';
-import CheckRoundedIcon from '@material-ui/icons/CheckRounded';
+import CloseIcon from '@mui/icons-material/CloseRounded';
+import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
import PropTypes from 'prop-types';
import { useModalStyles } from '../helpers/ModalProvider';
import { FormFooterMessage, InputCheckbox, InputText, MESSAGE_TYPE } from '../components/FormComponents';
diff --git a/web/pgadmin/static/js/Dialogs/MasterPasswordContent.jsx b/web/pgadmin/static/js/Dialogs/MasterPasswordContent.jsx
index 745bbe2f9..73d97934a 100644
--- a/web/pgadmin/static/js/Dialogs/MasterPasswordContent.jsx
+++ b/web/pgadmin/static/js/Dialogs/MasterPasswordContent.jsx
@@ -12,11 +12,11 @@ import PropTypes from 'prop-types';
import gettext from 'sources/gettext';
import url_for from 'sources/url_for';
-import { Box } from '@material-ui/core';
-import CloseIcon from '@material-ui/icons/CloseRounded';
-import DeleteForeverIcon from '@material-ui/icons/DeleteForever';
-import CheckRoundedIcon from '@material-ui/icons/CheckRounded';
-import HelpIcon from '@material-ui/icons/Help';
+import { Box } from '@mui/material';
+import CloseIcon from '@mui/icons-material/CloseRounded';
+import DeleteForeverIcon from '@mui/icons-material/DeleteForever';
+import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
+import HelpIcon from '@mui/icons-material/Help';
import { DefaultButton, PrimaryButton, PgIconButton } from '../components/Buttons';
import { useModalStyles } from '../helpers/ModalProvider';
diff --git a/web/pgadmin/static/js/Dialogs/NamedRestoreContent.jsx b/web/pgadmin/static/js/Dialogs/NamedRestoreContent.jsx
index c2b165c1c..a101ab452 100644
--- a/web/pgadmin/static/js/Dialogs/NamedRestoreContent.jsx
+++ b/web/pgadmin/static/js/Dialogs/NamedRestoreContent.jsx
@@ -9,10 +9,10 @@
import React, { useState, useRef, useEffect } from 'react';
import gettext from 'sources/gettext';
-import { Box } from '@material-ui/core';
+import { Box } from '@mui/material';
import { DefaultButton, PrimaryButton } from '../components/Buttons';
-import CloseIcon from '@material-ui/icons/CloseRounded';
-import CheckRoundedIcon from '@material-ui/icons/CheckRounded';
+import CloseIcon from '@mui/icons-material/CloseRounded';
+import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
import PropTypes from 'prop-types';
import { useModalStyles } from '../helpers/ModalProvider';
import { InputText } from '../components/FormComponents';
diff --git a/web/pgadmin/static/js/Dialogs/RenameTabContent.jsx b/web/pgadmin/static/js/Dialogs/RenameTabContent.jsx
index c0422c3e5..cbd2d91a4 100644
--- a/web/pgadmin/static/js/Dialogs/RenameTabContent.jsx
+++ b/web/pgadmin/static/js/Dialogs/RenameTabContent.jsx
@@ -11,9 +11,9 @@ import _ from 'lodash';
import React, { useState, useRef, useMemo } from 'react';
import PropTypes from 'prop-types';
-import { Box } from '@material-ui/core';
-import CloseIcon from '@material-ui/icons/CloseRounded';
-import CheckRoundedIcon from '@material-ui/icons/CheckRounded';
+import { Box } from '@mui/material';
+import CloseIcon from '@mui/icons-material/CloseRounded';
+import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
import gettext from 'sources/gettext';
diff --git a/web/pgadmin/static/js/Dialogs/UrlDialogContent.jsx b/web/pgadmin/static/js/Dialogs/UrlDialogContent.jsx
index e1be32166..688470b3a 100644
--- a/web/pgadmin/static/js/Dialogs/UrlDialogContent.jsx
+++ b/web/pgadmin/static/js/Dialogs/UrlDialogContent.jsx
@@ -12,9 +12,9 @@ import PropTypes from 'prop-types';
import gettext from 'sources/gettext';
import url_for from 'sources/url_for';
-import { Box } from '@material-ui/core';
-import CloseIcon from '@material-ui/icons/CloseRounded';
-import HelpIcon from '@material-ui/icons/Help';
+import { Box } from '@mui/material';
+import CloseIcon from '@mui/icons-material/CloseRounded';
+import HelpIcon from '@mui/icons-material/Help';
import { DefaultButton, PgIconButton } from '../components/Buttons';
import { useModalStyles } from '../helpers/ModalProvider';
diff --git a/web/pgadmin/static/js/Explain/Analysis.jsx b/web/pgadmin/static/js/Explain/Analysis.jsx
index 1e977c2f2..749dfd1ec 100644
--- a/web/pgadmin/static/js/Explain/Analysis.jsx
+++ b/web/pgadmin/static/js/Explain/Analysis.jsx
@@ -6,12 +6,12 @@
// This software is released under the PostgreSQL Licence
//
//////////////////////////////////////////////////////////////
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@mui/styles';
import React from 'react';
import clsx from 'clsx';
import _ from 'lodash';
-import ArrowRightAltIcon from '@material-ui/icons/ArrowRightAlt';
-import FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord';
+import ArrowRightAltIcon from '@mui/icons-material/ArrowRightAlt';
+import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
import HTMLReactParse from 'html-react-parser';
import { commonTableStyles } from '../Theme';
import PropTypes from 'prop-types';
diff --git a/web/pgadmin/static/js/Explain/ExplainStatistics.jsx b/web/pgadmin/static/js/Explain/ExplainStatistics.jsx
index 5bffceb3c..a402985f7 100644
--- a/web/pgadmin/static/js/Explain/ExplainStatistics.jsx
+++ b/web/pgadmin/static/js/Explain/ExplainStatistics.jsx
@@ -7,7 +7,8 @@
//
//////////////////////////////////////////////////////////////
import React from 'react';
-import { Box, Grid, makeStyles } from '@material-ui/core';
+import { Box, Grid } from '@mui/material';
+import { makeStyles } from '@mui/styles';
import gettext from 'sources/gettext';
import { commonTableStyles } from '../Theme';
import clsx from 'clsx';
diff --git a/web/pgadmin/static/js/Explain/Graphical.jsx b/web/pgadmin/static/js/Explain/Graphical.jsx
index 5f27440c2..1c397dcbc 100644
--- a/web/pgadmin/static/js/Explain/Graphical.jsx
+++ b/web/pgadmin/static/js/Explain/Graphical.jsx
@@ -6,19 +6,20 @@
// This software is released under the PostgreSQL Licence
//
//////////////////////////////////////////////////////////////
-import { Box, Card, CardContent, CardHeader, makeStyles, useTheme } from '@material-ui/core';
+import { Box, Card, CardContent, CardHeader, useTheme } from '@mui/material';
+import { makeStyles } from '@mui/styles';
import React, {useEffect} from 'react';
import _ from 'lodash';
import { PgButtonGroup, PgIconButton } from '../components/Buttons';
-import ZoomInIcon from '@material-ui/icons/ZoomIn';
-import ZoomOutIcon from '@material-ui/icons/ZoomOut';
-import ZoomOutMapIcon from '@material-ui/icons/ZoomOutMap';
-import SaveAltIcon from '@material-ui/icons/SaveAlt';
+import ZoomInIcon from '@mui/icons-material/ZoomIn';
+import ZoomOutIcon from '@mui/icons-material/ZoomOut';
+import ZoomOutMapIcon from '@mui/icons-material/ZoomOutMap';
+import SaveAltIcon from '@mui/icons-material/SaveAlt';
import gettext from 'sources/gettext';
import ReactDOMServer from 'react-dom/server';
import url_for from 'sources/url_for';
import { downloadSvg } from './svg_download';
-import CloseIcon from '@material-ui/icons/CloseRounded';
+import CloseIcon from '@mui/icons-material/CloseRounded';
import { commonTableStyles } from '../Theme';
import clsx from 'clsx';
import PropTypes from 'prop-types';
@@ -406,7 +407,7 @@ export default function Graphical({planData, ctx}) {
return (
-
+
} onClick={()=>onCmdClick('in')}/>
} onClick={()=>onCmdClick()}/>
diff --git a/web/pgadmin/static/js/Explain/index.jsx b/web/pgadmin/static/js/Explain/index.jsx
index 433e0e706..dee22cd49 100644
--- a/web/pgadmin/static/js/Explain/index.jsx
+++ b/web/pgadmin/static/js/Explain/index.jsx
@@ -6,14 +6,14 @@
// This software is released under the PostgreSQL Licence
//
//////////////////////////////////////////////////////////////
-import { Box, Tab, Tabs } from '@material-ui/core';
+import { Box, Tab, Tabs } from '@mui/material';
import React from 'react';
import _ from 'lodash';
import Graphical from './Graphical';
import TabPanel from '../components/TabPanel';
import gettext from 'sources/gettext';
import ImageMapper from './ImageMapper';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@mui/styles';
import Analysis from './Analysis';
import ExplainStatistics from './ExplainStatistics';
import PropTypes from 'prop-types';
diff --git a/web/pgadmin/static/js/PgTreeView/index.jsx b/web/pgadmin/static/js/PgTreeView/index.jsx
index 928397601..fba60b84e 100644
--- a/web/pgadmin/static/js/PgTreeView/index.jsx
+++ b/web/pgadmin/static/js/PgTreeView/index.jsx
@@ -1,15 +1,16 @@
-import { Checkbox, makeStyles } from '@material-ui/core';
+import { Checkbox } from '@mui/material';
+import { makeStyles } from '@mui/styles';
import clsx from 'clsx';
import gettext from 'sources/gettext';
import React, { useEffect, useRef } from 'react';
import { Tree } from 'react-arborist';
import AutoSizer from 'react-virtualized-auto-sizer';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import ChevronRightIcon from '@material-ui/icons/ChevronRight';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
import PropTypes from 'prop-types';
-import IndeterminateCheckBoxIcon from '@material-ui/icons/IndeterminateCheckBox';
+import IndeterminateCheckBoxIcon from '@mui/icons-material/IndeterminateCheckBox';
import EmptyPanelMessage from '../components/EmptyPanelMessage';
-import CheckBoxIcon from '@material-ui/icons/CheckBox';
+import CheckBoxIcon from '@mui/icons-material/CheckBox';
const useStyles = makeStyles((theme) => ({
diff --git a/web/pgadmin/static/js/QuickSearch/index.jsx b/web/pgadmin/static/js/QuickSearch/index.jsx
index d0b364074..42a0c9141 100644
--- a/web/pgadmin/static/js/QuickSearch/index.jsx
+++ b/web/pgadmin/static/js/QuickSearch/index.jsx
@@ -7,7 +7,8 @@
//
//////////////////////////////////////////////////////////////
import React, {useRef,useState, useEffect} from 'react';
-import { CircularProgress, Typography, makeStyles } from '@material-ui/core';
+import { CircularProgress, Typography } from '@mui/material';
+import { makeStyles } from '@mui/styles';
import clsx from 'clsx';
import {useDelayDebounce} from 'sources/custom_hooks';
import {onlineHelpSearch} from './online_help';
@@ -103,14 +104,7 @@ HelpArticleContents.propTypes = {
isMenuLoading: PropTypes.bool
};
-const useModalStyles = makeStyles(() => ({
- setTop: {
- marginTop: '-20px',
- }
-}));
-
export default function QuickSearch({closeModal}) {
- const modalClasses = useModalStyles();
const classes = useStyles();
const wrapperRef = useRef(null);
const [searchTerm, setSearchTerm] = useState('');
@@ -266,7 +260,7 @@ export default function QuickSearch({closeModal}) {
return (
{/* no need */}}>
,
-
+
diff --git a/web/pgadmin/static/js/SchemaView/DataGridView.jsx b/web/pgadmin/static/js/SchemaView/DataGridView.jsx
index acb0a4cdf..04f2ab9f0 100644
--- a/web/pgadmin/static/js/SchemaView/DataGridView.jsx
+++ b/web/pgadmin/static/js/SchemaView/DataGridView.jsx
@@ -10,14 +10,14 @@
/* The DataGridView component is based on react-table component */
import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
-import { Box } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { Box } from '@mui/material';
+import { makeStyles } from '@mui/styles';
import { PgIconButton } from '../components/Buttons';
-import AddIcon from '@material-ui/icons/AddOutlined';
+import AddIcon from '@mui/icons-material/AddOutlined';
import { MappedCellControl } from './MappedControl';
-import DragIndicatorRoundedIcon from '@material-ui/icons/DragIndicatorRounded';
-import EditRoundedIcon from '@material-ui/icons/EditRounded';
-import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
+import DragIndicatorRoundedIcon from '@mui/icons-material/DragIndicatorRounded';
+import EditRoundedIcon from '@mui/icons-material/EditRounded';
+import DeleteRoundedIcon from '@mui/icons-material/DeleteRounded';
import { useTable, useFlexLayout, useResizeColumns, useSortBy, useExpanded, useGlobalFilter } from 'react-table';
import clsx from 'clsx';
import PropTypes from 'prop-types';
diff --git a/web/pgadmin/static/js/SchemaView/FieldSetView.jsx b/web/pgadmin/static/js/SchemaView/FieldSetView.jsx
index e5e11d360..7ecaf4d75 100644
--- a/web/pgadmin/static/js/SchemaView/FieldSetView.jsx
+++ b/web/pgadmin/static/js/SchemaView/FieldSetView.jsx
@@ -18,7 +18,7 @@ import CustomPropTypes from '../custom_prop_types';
import { DepListenerContext } from './DepListener';
import { getFieldMetaData } from './FormView';
import FieldSet from '../components/FieldSet';
-import { Box } from '@material-ui/core';
+import { Box } from '@mui/material';
export default function FieldSetView({
value, schema={}, viewHelperProps, accessPath, dataDispatch, controlClassName, isDataGridForm=false, label, visible}) {
@@ -101,7 +101,7 @@ export default function FieldSetView({
withContainer: false, controlGridBasis: 3
}));
viewFields.push(
-
+
{inlineComponents}
);
@@ -113,7 +113,7 @@ export default function FieldSetView({
}
if(inlineComponents?.length > 0) {
viewFields.push(
-
+
{inlineComponents}
);
diff --git a/web/pgadmin/static/js/SchemaView/FormView.jsx b/web/pgadmin/static/js/SchemaView/FormView.jsx
index 5aa5c12ae..eeaf49bd4 100644
--- a/web/pgadmin/static/js/SchemaView/FormView.jsx
+++ b/web/pgadmin/static/js/SchemaView/FormView.jsx
@@ -8,7 +8,8 @@
//////////////////////////////////////////////////////////////
import React, { useContext, useEffect, useRef, useState } from 'react';
-import { Box, makeStyles, Tab, Tabs } from '@material-ui/core';
+import { Box, Tab, Tabs } from '@mui/material';
+import { makeStyles } from '@mui/styles';
import _ from 'lodash';
import PropTypes from 'prop-types';
import clsx from 'clsx';
@@ -380,7 +381,7 @@ export default function FormView({
withContainer: false, controlGridBasis: 3
}));
tabs[group].push(
-
+
{inlineComponents}
);
@@ -395,7 +396,7 @@ export default function FormView({
if(inlineComponents?.length > 0) {
tabs[inlineCompGroup].push(
-
+
{inlineComponents}
);
diff --git a/web/pgadmin/static/js/SchemaView/index.jsx b/web/pgadmin/static/js/SchemaView/index.jsx
index 3413bbe68..09d2de52e 100644
--- a/web/pgadmin/static/js/SchemaView/index.jsx
+++ b/web/pgadmin/static/js/SchemaView/index.jsx
@@ -8,16 +8,17 @@
//////////////////////////////////////////////////////////////
import React, { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
-import { Box, makeStyles, Accordion, AccordionSummary, AccordionDetails} from '@material-ui/core';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import SaveIcon from '@material-ui/icons/Save';
-import PublishIcon from '@material-ui/icons/Publish';
-import DoneIcon from '@material-ui/icons/Done';
-import SettingsBackupRestoreIcon from '@material-ui/icons/SettingsBackupRestore';
-import CloseIcon from '@material-ui/icons/Close';
-import InfoIcon from '@material-ui/icons/InfoRounded';
-import HelpIcon from '@material-ui/icons/HelpRounded';
-import EditIcon from '@material-ui/icons/Edit';
+import { Box, Accordion, AccordionSummary, AccordionDetails} from '@mui/material';
+import { makeStyles } from '@mui/styles';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import SaveIcon from '@mui/icons-material/Save';
+import PublishIcon from '@mui/icons-material/Publish';
+import DoneIcon from '@mui/icons-material/Done';
+import SettingsBackupRestoreIcon from '@mui/icons-material/SettingsBackupRestore';
+import CloseIcon from '@mui/icons-material/Close';
+import InfoIcon from '@mui/icons-material/InfoRounded';
+import HelpIcon from '@mui/icons-material/HelpRounded';
+import EditIcon from '@mui/icons-material/Edit';
import diffArray from 'diff-arrays-of-objects';
import _ from 'lodash';
import clsx from 'clsx';
diff --git a/web/pgadmin/static/js/SecurityPages/BasePage.jsx b/web/pgadmin/static/js/SecurityPages/BasePage.jsx
index 3081bbd45..7b01a77af 100644
--- a/web/pgadmin/static/js/SecurityPages/BasePage.jsx
+++ b/web/pgadmin/static/js/SecurityPages/BasePage.jsx
@@ -1,4 +1,5 @@
-import { Box, Button, darken, makeStyles } from '@material-ui/core';
+import { Box, Button, darken } from '@mui/material';
+import { makeStyles } from '@mui/styles';
import { useSnackbar } from 'notistack';
import React, { useEffect } from 'react';
import { MESSAGE_TYPE, NotifierMessage } from '../components/FormComponents';
@@ -79,7 +80,7 @@ export default function BasePage({pageImage, title, children, messages}) {
}, [messages]);
return (
-
+
{pageImage}
diff --git a/web/pgadmin/static/js/SecurityPages/LoginPage.jsx b/web/pgadmin/static/js/SecurityPages/LoginPage.jsx
index 1c1344b4c..232af2c41 100644
--- a/web/pgadmin/static/js/SecurityPages/LoginPage.jsx
+++ b/web/pgadmin/static/js/SecurityPages/LoginPage.jsx
@@ -1,4 +1,4 @@
-import { Box, Icon } from '@material-ui/core';
+import { Box, Icon } from '@mui/material';
import React, { useState } from 'react';
import LoginImage from '../../img/login.svg?svgr';
import { InputSelectNonSearch, InputText, MESSAGE_TYPE, NotifierMessage } from '../components/FormComponents';
diff --git a/web/pgadmin/static/js/SecurityPages/MfaRegisterPage.jsx b/web/pgadmin/static/js/SecurityPages/MfaRegisterPage.jsx
index e4ea13389..15e3e0d56 100644
--- a/web/pgadmin/static/js/SecurityPages/MfaRegisterPage.jsx
+++ b/web/pgadmin/static/js/SecurityPages/MfaRegisterPage.jsx
@@ -1,4 +1,4 @@
-import { Box } from '@material-ui/core';
+import { Box } from '@mui/material';
import React, { useState } from 'react';
import LoginImage from '../../img/login.svg?svgr';
import { FormNote, InputText } from '../components/FormComponents';
@@ -74,7 +74,7 @@ export default function MfaRegisterPage({actionUrl, mfaList, nextUrl, mfaView, .
{mfaView ? <>
{mfaView.auth_method == 'email' && }
{mfaView.auth_method == 'authenticator' && }
-
+
{gettext('Continue')}
{gettext('Cancel')}
diff --git a/web/pgadmin/static/js/Theme/dark.js b/web/pgadmin/static/js/Theme/dark.js
index ce77688be..0c366e4da 100644
--- a/web/pgadmin/static/js/Theme/dark.js
+++ b/web/pgadmin/static/js/Theme/dark.js
@@ -8,8 +8,7 @@
//////////////////////////////////////////////////////////////
/* The dark theme */
-import { createTheme } from '@material-ui/core/styles';
-import { darken } from '@material-ui/core/styles/colorManipulator';
+import { darken, createTheme} from '@mui/material/styles';
export default function(basicSettings) {
return createTheme(basicSettings, {
@@ -45,7 +44,7 @@ export default function(basicSettings) {
},
warning: {
main: '#eea236',
- light: '#b18d5a',
+ light: '#74572e',
contrastText: '#fff',
},
info: {
@@ -82,6 +81,7 @@ export default function(basicSettings) {
}
},
otherVars: {
+ colorBrand: '#1b71b5',
borderColor: '#4a4a4a',
inputBorderColor: '#6b6b6b',
inputDisabledBg: 'inherit',
@@ -104,6 +104,11 @@ export default function(basicSettings) {
textMuted: '#8A8A8A',
erdCanvasBg: '#303030',
erdGridColor: '#444952',
+ scroll: {
+ baseColor: '#616161',
+ barBackgroundColor: '#61616133',
+ thumbBackground:'#616161b3'
+ },
schemaDiff: {
diffRowColor: '#807a48',
sourceRowColor: '#402025',
@@ -132,6 +137,14 @@ export default function(basicSettings) {
guttersBg: '#303030',
guttersFg: '#8A8A8A',
},
+ tree: {
+ textFg: '#d4d4d4',
+ inputBg: '#212121',
+ fgHover: '#d4d4d4',
+ bgHover: '#303030',
+ textHoverFg: '#d4d4d4',
+ bgSelected: '#323E43',
+ }
}
});
}
diff --git a/web/pgadmin/static/js/Theme/high_contrast.js b/web/pgadmin/static/js/Theme/high_contrast.js
index 1a5f79b14..49605b836 100644
--- a/web/pgadmin/static/js/Theme/high_contrast.js
+++ b/web/pgadmin/static/js/Theme/high_contrast.js
@@ -8,18 +8,18 @@
//////////////////////////////////////////////////////////////
/* The dark theme */
-import { createTheme } from '@material-ui/core/styles';
+import { createTheme } from '@mui/material/styles';
export default function(basicSettings) {
return createTheme(basicSettings, {
palette: {
default: {
- main: 'transparent',
+ main: '#00000000',
contrastText: '#84d6ff',
borderColor: '#84d6ff',
disabledBorderColor: '#8B9CAD',
disabledContrastText: '#8B9CAD',
- hoverMain: 'transparent',
+ hoverMain: '#00000000',
hoverContrastText: '#fff',
hoverBorderColor: '#fff',
},
@@ -80,6 +80,7 @@ export default function(basicSettings) {
}
},
otherVars: {
+ colorBrand: '#84D6FF',
borderColor: '#A6B7C8',
inputBorderColor: '#6b6b6b',
inputDisabledBg: '#1F2932',
@@ -102,6 +103,11 @@ export default function(basicSettings) {
textMuted: '#8b9cad',
erdCanvasBg: '#010B15',
erdGridColor: '#1F2932',
+ scroll: {
+ baseColor: '#C9D0D7',
+ barBackgroundColor: '#C9D0D733',
+ thumbBackground: '#C9D0D7B3'
+ },
schemaDiff: {
diffRowColor: '#CFC56E',
sourceRowColor: '#EE97A5',
@@ -130,6 +136,14 @@ export default function(basicSettings) {
guttersBg: '#2d3a48',
guttersFg: '#8b9cac',
},
+ tree: {
+ textFg: '#ffffff',
+ inputBg: '#010B15',
+ fgHover: '#ffffff',
+ bgHover: '#ffffff',
+ textHoverFg: '#010B15',
+ bgSelected: '#84D6FF',
+ }
}
});
}
diff --git a/web/pgadmin/static/js/Theme/index.jsx b/web/pgadmin/static/js/Theme/index.jsx
index 70bdfb397..e830f5196 100644
--- a/web/pgadmin/static/js/Theme/index.jsx
+++ b/web/pgadmin/static/js/Theme/index.jsx
@@ -12,18 +12,24 @@
* custom themes info will come here.
*/
-import React, { useMemo } from 'react';
-import { createTheme, ThemeProvider, makeStyles } from '@material-ui/core/styles';
+import React, { useEffect, useMemo, useState } from 'react';
+import { makeStyles } from '@mui/styles';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
import CustomPropTypes from '../custom_prop_types';
-
import getStandardTheme from './standard';
import getDarkTheme from './dark';
import getHightContrastTheme from './high_contrast';
-import { CssBaseline } from '@material-ui/core';
+import { CssBaseline } from '@mui/material';
import pickrOverride from './overrides/pickr.override';
import uplotOverride from './overrides/uplot.override';
import rcdockOverride from './overrides/rcdock.override';
import cmOverride from './overrides/codemirror.override';
+import jsonEditorOverride from './overrides/jsoneditor.override';
+import pgadminOverride from './overrides/pgadmin.classes.override';
+import reactAspenOverride from './overrides/reactaspen.override';
+import usePreferences from '../../../preferences/static/js/store';
/* Common settings across all themes */
let basicSettings = createTheme();
@@ -31,6 +37,7 @@ basicSettings = createTheme(basicSettings, {
typography: {
fontSize: 14,
htmlFontSize: 14,
+ fontFamilyIcon: '"Font Awesome 5 Free"',
fontFamily: [
'Roboto',
'"Helvetica Neue"',
@@ -52,214 +59,262 @@ basicSettings = createTheme(basicSettings, {
disabledOpacity: 0.32,
}
},
- overrides: {
- MuiTabs: {
- root: {
- minHeight: 0,
- }
- },
- PrivateTabIndicator: {
- root: {
- height: '2px',
- transition: basicSettings.transitions.create(['all'], {duration: '150ms'}),
- }
- },
- MuiTab: {
- root: {
- textTransform: 'none',
- minHeight: 0,
- padding: '3px 10px',
- [basicSettings.breakpoints.up('xs')]: {
- minWidth: 0,
- },
- [basicSettings.breakpoints.up('sm')]: {
- minWidth: 0,
- },
- [basicSettings.breakpoints.up('md')]: {
- minWidth: 0,
- },
- [basicSettings.breakpoints.up('lg')]: {
- minWidth: 0,
- },
- },
- textColorInherit: {
- textTransform: 'none',
- opacity: 1,
- }
- },
- MuiButton: {
- root: {
- textTransform: 'none',
- padding: '2px 10px',
- fontSize: 'inherit',
- '&.Mui-disabled': {
- opacity: 0.60,
- },
- '&.MuiButton-sizeSmall, &.MuiButton-outlinedSizeSmall, &.MuiButton-containedSizeSmall': {
- height: '28px',
- fontSize: '0.875rem',
- '& .MuiSvgIcon-root': {
- height: '1.2rem',
- }
- },
- },
- contained: {
- boxShadow: 'none',
- '&:hover': {
- boxShadow: 'none',
- }
- },
- outlined: {
- padding: '2px 10px',
- },
- startIcon: {
- marginRight: basicSettings.spacing(0.5),
- },
- },
- MuiOutlinedInput: {
- multiline: {
- padding: '0px',
- },
- input: {
- padding: basicSettings.spacing(0.75, 1.5),
- borderRadius: 'inherit',
- },
- inputMultiline: {
- padding: basicSettings.spacing(0.75, 1.5),
- resize: 'vertical',
- height: '100%',
- boxSizing: 'border-box',
- },
- adornedEnd: {
- paddingRight: basicSettings.spacing(0.75),
- },
- marginDense: {
- height: '28px',
- }
- },
- MuiAccordion: {
- root: {
- boxShadow: 'none',
- }
- },
- MuiAccordionSummary: {
- root: {
- minHeight: 0,
- '&.Mui-expanded': {
- minHeight: 0,
- },
- padding: basicSettings.spacing(0, 1),
- fontWeight: basicSettings.typography.fontWeightBold,
- },
- content: {
- margin: basicSettings.spacing(0.5),
- '&.Mui-expanded': {
- margin: basicSettings.spacing(0.5),
- }
- },
- expandIcon: {
- order: -1,
- }
- },
- MuiAccordionDetails: {
- root: {
- padding: basicSettings.spacing(1),
- }
- },
- MuiFormControlLabel: {
- root: {
- marginBottom: 0,
- marginLeft: 0,
- marginRight: 0,
- }
- },
- MuiFormHelperText: {
- root: {
- fontSize: '1em',
- },
- contained: {
- marginLeft: 0,
- marginRight: 0,
- }
- },
- MuiTypography: {
- body1: {
- fontSize: '1em',
- }
- },
- MuiDialog: {
- paper: {
- margin: 0,
- },
- scrollPaper: {
- alignItems: 'flex-start',
- margin: '5% auto',
- }
- },
- MuiTooltip: {
- popper: {
- top: 0,
- zIndex: 9999,
- },
- },
- MuiMenu: {
- list: {
- padding: '0',
- }
- },
- MuiMenuItem: {
- root: {
- fontSize: 14,
- }
- },
- MuiSelect: {
- selectMenu: {
- minHeight: 'unset',
- },
- select:{
- '&:focus':{
- backgroundColor: 'unset',
- }
- }
- }
- },
transitions: {
create: () => 'none',
},
zIndex: {
modal: 3001,
},
- props: {
+ components: {
MuiTextField: {
- variant: 'outlined',
+ defaultProps: {
+ variant: 'outlined',
+ }
},
MuiButton: {
- disableTouchRipple: true,
+ defaultProps: {
+ disableTouchRipple: true,
+ variant: 'outlined',
+ },
+ styleOverrides: {
+ root: {
+ textTransform: 'none',
+ padding: '2px 10px',
+ fontSize: 'inherit',
+ '&.Mui-disabled': {
+ opacity: 0.60,
+ },
+ '&.MuiButton-sizeSmall, &.MuiButton-outlined.MuiButton-sizeSmall, &.MuiButton-contained.MuiButton-sizeSmall': {
+ height: '28px',
+ fontSize: '0.875rem',
+ '& .MuiSvgIcon-root': {
+ height: '1.2rem',
+ },
+ },
+ },
+ contained: {
+ boxShadow: 'none',
+ '&:hover': {
+ boxShadow: 'none',
+ }
+ },
+ outlined: {
+ padding: '3px 9px',
+ },
+ startIcon: {
+ marginRight: basicSettings.spacing(0.5),
+ },
+ }
},
MuiIconButton: {
- size: 'small',
- disableTouchRipple: true,
+ defaultProps: {
+ size: 'small',
+ disableTouchRipple: true,
+ }
},
MuiAccordion: {
- defaultExpanded: true,
+ defaultProps: {
+ defaultExpanded: true,
+ },
+ styleOverrides: {
+ root: {
+ boxShadow: 'none',
+ }
+ }
},
MuiTab: {
- textColor: 'inherit',
+ defaultProps: {
+ textColor: 'inherit',
+ },
+ styleOverrides: {
+ root: {
+ lineHeight: '1.75',
+ textTransform: 'none',
+ minHeight: 0,
+ padding: '3px 10px',
+ [basicSettings.breakpoints.up('xs')]: {
+ minWidth: 0,
+ },
+ [basicSettings.breakpoints.up('sm')]: {
+ minWidth: 0,
+ },
+ [basicSettings.breakpoints.up('md')]: {
+ minWidth: 0,
+ },
+ [basicSettings.breakpoints.up('lg')]: {
+ minWidth: 0,
+ },
+ },
+ textColorInherit: {
+ textTransform: 'none',
+ opacity: 1,
+ }
+ }
},
MuiCheckbox: {
- disableTouchRipple: true,
+ defaultProps: {
+ disableTouchRipple: true,
+ }
},
MuiDialogTitle: {
- disableTypography: true,
+ defaultProps: {
+ }
},
MuiCardHeader: {
- disableTypography: true,
+ defaultProps: {
+ disableTypography: true,
+ }
},
MuiListItem: {
- disableGutters: true,
+ defaultProps: {
+ disableGutters: true,
+ }
+ },
+ MuiTabs: {
+ styleOverrides: {
+ root: {
+ minHeight: 0,
+ }
+ }
+ },
+ PrivateTabIndicator: {
+ styleOverrides: {
+ root: {
+ height: '2px',
+ transition: basicSettings.transitions.create(['all'], {duration: '150ms'}),
+ }
+ }
+ },
+ MuiOutlinedInput: {
+ styleOverrides: {
+ multiline: {
+ padding: '0px',
+ },
+ input: {
+ padding: basicSettings.spacing(0.75, 1.5),
+ borderRadius: 'inherit',
+ },
+ inputMultiline: {
+ padding: basicSettings.spacing(0.75, 1.5),
+ resize: 'vertical',
+ height: '100%',
+ boxSizing: 'border-box',
+ },
+ adornedEnd: {
+ paddingRight: basicSettings.spacing(0.75),
+ },
+ marginDense: {
+ height: '28px',
+ }
+ }
+ },
+ MuiAccordionSummary: {
+ styleOverrides: {
+ root: {
+ minHeight: 0,
+ '&.Mui-expanded': {
+ minHeight: 0,
+ },
+ padding: basicSettings.spacing(0, 1),
+ fontWeight: basicSettings.typography.fontWeightBold
+ },
+ content: {
+ margin: basicSettings.spacing(0.5),
+ '&.Mui-expanded': {
+ margin: basicSettings.spacing(0.5),
+ }
+ },
+ expandIconWrapper: {
+ order: -1,
+ }
+ }
+ },
+ MuiAccordionDetails: {
+ styleOverrides: {
+ root: {
+ padding: basicSettings.spacing(1),
+ }
+ }
+ },
+ MuiFormControlLabel: {
+ styleOverrides: {
+ root: {
+ marginBottom: 0,
+ marginLeft: 0,
+ marginRight: 0,
+ }
+ }
+ },
+ MuiFormHelperText: {
+ styleOverrides: {
+ root: {
+ fontSize: '1em',
+ },
+ contained: {
+ marginLeft: 0,
+ marginRight: 0,
+ }
+ }
+ },
+ MuiTypography: {
+ styleOverrides: {
+ root: {
+ fontSize: '0.875rem',
+ lineHeight: '1.43em',
+ letterSpacing: '0.01071em',
+ },
+ body1: {
+ fontSize: '1em',
+ }
+ }
+ },
+ MuiDialog: {
+ styleOverrides: {
+ paper: {
+ margin: 0,
+ },
+ scrollPaper: {
+ alignItems: 'flex-start',
+ margin: '5% auto',
+ }
+ }
},
MuiTooltip: {
- arrow: true,
+ defaultProps: {
+ arrow: true,
+ },
+ styleOverrides: {
+ popper: {
+ top: 0,
+ zIndex: 9999,
+ },
+ }
+ },
+ MuiMenu: {
+ styleOverrides: {
+ list: {
+ padding: '0',
+ }
+ }
+ },
+ MuiMenuItem: {
+ styleOverrides: {
+ root: {
+ fontSize: 14,
+ }
+ }
+ },
+ MuiSelect: {
+ styleOverrides: {
+ selectMenu: {
+ minHeight: 'unset',
+ },
+ select:{
+ '&:focus':{
+ backgroundColor: 'unset',
+ }
+ }
+ }
}
},
});
@@ -303,11 +358,36 @@ function getFinalTheme(baseTheme) {
}, baseTheme);
return createTheme({
- overrides: {
+ components: {
MuiCssBaseline: {
- '@global': {
+ styleOverrides: {
body: {
fontFamily: baseTheme.typography.fontFamily,
+ fontSize: '0.875rem',
+ lineHeight: '1.43em',
+ letterSpacing: '0.01071em',
+ height: '100vh',
+ },
+ '::-webkit-scrollbar,::-webkit-scrollbar-corner': {
+ width: '1rem !important',
+ height: '1rem !important',
+ background: baseTheme.otherVars.scroll.barBackgroundColor
+ },
+ '::-webkit-scrollbar-thumb': {
+ border: '0.25rem solid transparent',
+ borderRadius: '0.5rem',
+ background: baseTheme.otherVars.scroll.thumbBackground + ' !important',
+ backgroundClip: 'content-box !important',
+ },
+ '::-webkit-scrollbar-thumb:hover': {
+ border: '0.25rem solid transparent',
+ background: baseTheme.otherVars.scroll.baseColor + ' !important',
+ backgroundClip: 'content-box !important'
+ },
+ 'input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,textarea:-webkit-autofill,textarea:-webkit-autofill:hover,textarea:-webkit-autofill:focus,select:-webkit-autofill,select:-webkit-autofill:hover,select:-webkit-autofill:focus': {
+ webkitTextFillColor : baseTheme.palette.text.primary,
+ webkitBoxShadow: '0 0 0px 1000px '+ baseTheme.palette.primary.light +' inset',
+ transition: 'backgroundColor 5000s ease-in-out 0s',
},
ul: {
margin: 0,
@@ -320,6 +400,8 @@ function getFinalTheme(baseTheme) {
},
textarea: {
fontFamily: 'inherit',
+ color: baseTheme.palette.text.primary,
+ backgroundColor: baseTheme.palette.background.default
},
iframe: {
margin: 0,
@@ -334,268 +416,343 @@ function getFinalTheme(baseTheme) {
...pickrOverride(baseTheme),
...uplotOverride(baseTheme),
...rcdockOverride(baseTheme),
- ...cmOverride(baseTheme)
+ ...cmOverride(baseTheme),
+ ...jsonEditorOverride(baseTheme),
+ ...pgadminOverride(baseTheme),
+ ...reactAspenOverride(baseTheme)
},
},
MuiOutlinedInput: {
- root: {
- '&.Mui-disabled .MuiOutlinedInput-notchedOutline': {
- borderColor: baseTheme.otherVars.inputBorderColor,
+ styleOverrides: {
+ root: {
+ lineHeight: '1.1876em',
+ '&.Mui-disabled .MuiOutlinedInput-notchedOutline': {
+ borderColor: baseTheme.otherVars.inputBorderColor,
+ },
+ '.MuiButtonGroup-root &': {
+ borderRadius: 0,
+
+ '& .MuiOutlinedInput-notchedOutline': {
+ borderRadius: 0,
+ }
+ },
},
- },
- notchedOutline: {
- borderColor: baseTheme.otherVars.inputBorderColor,
+ notchedOutline: {
+ borderColor: baseTheme.otherVars.inputBorderColor,
+ }
}
},
MuiFormControlLabel: {
- label: {
- '&.Mui-disabled': {
- color: baseTheme.palette.text.muted
+ styleOverrides: {
+ label: {
+ '&.Mui-disabled': {
+ color: baseTheme.palette.text.muted
+ }
}
}
},
MuiTabs: {
- root: {
- backgroundColor: baseTheme.otherVars.headerBg,
- ...mixins.panelBorder.bottom
- },
- indicator: {
- backgroundColor: baseTheme.otherVars.activeColor,
+ styleOverrides: {
+ root: {
+ backgroundColor: baseTheme.otherVars.headerBg,
+ ...mixins.panelBorder.bottom
+ },
+ indicator: {
+ backgroundColor: baseTheme.otherVars.activeColor,
+ }
}
},
MuiFormLabel: {
- root: {
- color: baseTheme.palette.text.primary,
- fontSize: baseTheme.typography.fontSize,
- },
- asterisk: {
- color: baseTheme.palette.error.main,
+ styleOverrides: {
+ root: {
+ color: baseTheme.palette.text.primary,
+ fontSize: baseTheme.typography.fontSize,
+ whiteSpace: 'normal !important'
+ },
+ asterisk: {
+ color: baseTheme.palette.error.main,
+ }
}
},
MuiInputBase: {
- root: {
- backgroundColor: baseTheme.palette.background.default,
- textOverflow: 'ellipsis',
- '&.Mui-disabled': {
- backgroundColor: baseTheme.otherVars.inputDisabledBg,
+ styleOverrides: {
+ root: {
+ backgroundColor: baseTheme.palette.background.default,
+ textOverflow: 'ellipsis',
+ '&.Mui-disabled': {
+ backgroundColor: baseTheme.otherVars.inputDisabledBg,
+ },
},
- },
- inputMultiline: {
- fontSize: baseTheme.typography.fontSize,
- height: 'unset',
- backgroundColor: baseTheme.palette.background.default,
- '&[readonly], &.Mui-disabled': {
- color: baseTheme.palette.text.muted,
- backgroundColor: baseTheme.otherVars.inputDisabledBg,
+ inputMultiline: {
+ fontSize: baseTheme.typography.fontSize,
+ height: 'unset',
+ backgroundColor: baseTheme.palette.background.default,
+ '&[readonly], &.Mui-disabled': {
+ color: baseTheme.palette.text.muted,
+ backgroundColor: baseTheme.otherVars.inputDisabledBg,
+ },
},
- },
- input: {
- fontSize: baseTheme.typography.fontSize,
- height: 'unset',
- backgroundColor: baseTheme.palette.background.default,
- '&[readonly], &.Mui-disabled': {
- color: baseTheme.palette.text.muted,
- backgroundColor: baseTheme.otherVars.inputDisabledBg,
+ input: {
+ fontSize: baseTheme.typography.fontSize,
+ height: 'unset',
+ backgroundColor: baseTheme.palette.background.default,
+ '&[readonly], &.Mui-disabled': {
+ color: baseTheme.palette.text.muted,
+ backgroundColor: baseTheme.otherVars.inputDisabledBg,
+ },
+ '&:focus': {
+ outline: '0 !important',
+ }
},
- '&:focus': {
- outline: '0 !important',
+ sizeSmall: {
+ height: '28px',
+ },
+ inputSizeSmall: {
+ height: '16px', // + 12px of padding = 28px;
}
- },
+ }
},
MuiSelect: {
- icon: {
- color: baseTheme.palette.text.primary,
- '&.Mui-disabled': {
- color: baseTheme.palette.text.muted,
+ styleOverrides: {
+ icon: {
+ color: baseTheme.palette.text.primary,
+ '&.Mui-disabled': {
+ color: baseTheme.palette.text.muted,
+ }
+ },
+ }
+ },
+ MuiNativeSelect:{
+ styleOverrides: {
+ icon: {
+ color: baseTheme.palette.text.primary,
+ '&.Mui-disabled': {
+ color: baseTheme.palette.text.muted,
+ }
}
- },
+ }
},
MuiIconButton: {
- root: {
- color: baseTheme.palette.text.primary,
- '&$disabled': {
- color: 'abc',
+ styleOverrides: {
+ root: {
+ color: baseTheme.palette.text.primary,
+ '&.Mui-disabled': {
+ color: 'abc',
+ }
}
}
},
MuiAccordion: {
- root: {
- ...mixins.panelBorder,
- '&.Mui-expanded': {
- margin: '8px 0px',
- },
+ styleOverrides: {
+ root: {
+ ...mixins.panelBorder,
+ '&.Mui-expanded': {
+ margin: '8px 0px',
+ },
+ }
}
},
MuiAccordionSummary: {
- root: {
- ...mixins.panelBorder.bottom,
- backgroundColor: baseTheme.otherVars.headerBg,
- },
- content: {
- margin: '4px',
+ styleOverrides: {
+ root: {
+ ...mixins.panelBorder.bottom,
+ backgroundColor: baseTheme.otherVars.headerBg,
+ },
+ content: {
+ margin: '4px',
+ },
+ expandIconWrapper: {
+ color: baseTheme.palette.text.primary,
+ }
}
},
MuiToggleButtonGroup: {
- groupedHorizontal : {
- '&:not(:first-child)': {
- borderLeft: 'abc'
+ styleOverrides: {
+ groupedHorizontal : {
+ '&:not(:first-of-type)': {
+ borderLeft: 'abc'
+ }
}
}
},
MuiSwitch: {
- root: {
- width: 54,
- height: 28,
- padding: '7px 12px',
- },
- colorPrimary: {
- '&$disabled': {
- color: 'abc',
- '& + .MuiSwitch-track': {
- backgroundColor: 'abc',
+ styleOverrides: {
+ root: {
+ width: 54,
+ height: 28,
+ padding: '7px 12px',
+ },
+ colorPrimary: {
+ '&.Mui-disabled': {
+ color: 'abc',
+ '& + .MuiSwitch-track': {
+ backgroundColor: 'abc',
+ }
}
+ },
+ switchBase: {
+ padding: baseTheme.spacing(0.5),
+ '&.Mui-disabled': {
+ color: 'abc',
+ '& + .MuiSwitch-track': {
+ opacity: baseTheme.palette.action.disabledOpacity,
+ }
+ },
+ '&.Mui-checked': {
+ transform: 'translateX(24px)',
+ '& .MuiSwitch-thumb': {
+ border: 0
+ }
+ }
+ },
+ thumb: {
+ border: '1px solid ' + baseTheme.otherVars.inputBorderColor
+ },
+ track: {
+ backgroundColor: baseTheme.otherVars.toggleBtnBg
}
- },
- switchBase: {
- padding: baseTheme.spacing(0.5),
- '&$disabled': {
- color: 'abc',
- '& + .MuiSwitch-track': {
- opacity: baseTheme.palette.action.disabledOpacity,
- }
- },
- '&.Mui-checked': {
- color: baseTheme.palette.success.main,
- transform: 'translateX(24px)',
- '& .MuiSwitch-thumb': {
- border: 0
- }
- },
- '&.Mui-checked + .MuiSwitch-track': {
- backgroundColor: baseTheme.palette.success.light,
- },
- },
- thumb: {
- border: '1px solid ' + baseTheme.otherVars.inputBorderColor
- },
- track: {
- backgroundColor: baseTheme.otherVars.toggleBtnBg
}
},
MuiCheckbox: {
- root: {
- padding: '0px',
- color: baseTheme.otherVars.inputBorderColor,
- },
+ styleOverrides: {
+ root: {
+ padding: '0px',
+ color: baseTheme.otherVars.inputBorderColor,
+ },
- colorPrimary: {
- '&.Mui-disabled': {
- color: baseTheme.palette.checkbox.disabled
+ colorPrimary: {
+ '&.Mui-disabled': {
+ color: baseTheme.palette.checkbox.disabled
+ }
}
}
},
MuiToggleButton: {
- root: {
- padding: 'abc',
- paddingRight: baseTheme.spacing(2.5),
- paddingLeft: baseTheme.spacing(0.5),
- color: 'abc',
- '&:hover':{
- backgroundColor: 'abc',
- },
- '&$selected': {
+ styleOverrides: {
+ root: {
+ paddingTop: '2px',
+ paddingBottom: '2px',
+ paddingRight: baseTheme.spacing(2.5),
+ paddingLeft: baseTheme.spacing(0.5),
color: 'abc',
- backgroundColor: 'abc',
+ textTransform: 'initial',
'&:hover':{
backgroundColor: 'abc',
+ },
+ '&.Mui-selected': {
+ color: [baseTheme.palette.primary.contrastText,'!important'],
+ backgroundColor: baseTheme.palette.primary.main,
+ '&:hover':{
+ //backgroundColor: 'abc',
+ backgroundColor: baseTheme.palette.primary.hoverMain,
+ borderColor: baseTheme.palette.primary.hoverBorderColor,
+ }
}
- }
- },
-
- label: {
- textTransform: 'initial',
+ },
}
},
MuiFormHelperText: {
- root: {
- color: baseTheme.palette.text.muted,
- },
+ styleOverrides: {
+ root: {
+ color: baseTheme.palette.text.muted,
+ },
+ }
},
MuiDialogContent: {
- root: {
- padding: 0,
- userSelect: 'text',
+ styleOverrides: {
+ root: {
+ padding: 0,
+ userSelect: 'text',
+ }
}
},
MuiDialogTitle: {
- root: {
- fontWeight: 'bold',
- padding: '5px 10px',
- cursor: 'move',
- display: 'flex',
- alignItems: 'center',
- ...mixins.panelBorder.bottom,
+ styleOverrides: {
+ root: {
+ fontSize: '0.875rem',
+ fontWeight: 'bold',
+ padding: '5px 10px',
+ cursor: 'move',
+ display: 'flex',
+ alignItems: 'center',
+ ...mixins.panelBorder.bottom,
+ }
}
},
MuiCardHeader: {
- root: {
- padding: '4px 8px',
- backgroundColor: baseTheme.otherVars.cardHeaderBg,
- fontWeight: 'bold',
- ...mixins.panelBorder.bottom,
+ styleOverrides: {
+ root: {
+ padding: '4px 8px',
+ backgroundColor: baseTheme.otherVars.cardHeaderBg,
+ fontWeight: 'bold',
+ ...mixins.panelBorder.bottom,
+ }
}
},
MuiCardContent: {
- root: {
- padding: 0,
- '&:last-child': {
- paddingBottom: 0,
+ styleOverrides: {
+ root: {
+ padding: 0,
+ '&:last-child': {
+ paddingBottom: 0,
+ }
}
}
},
MuiListItem: {
- root: {
- color: baseTheme.palette.text.primary,
- backgroundColor: baseTheme.palette.background.default,
- flexDirection: 'column',
- alignItems: 'initial',
- padding: '0px 4px',
- paddingTop: '0px',
- paddingBottom: '0px',
- ...mixins.panelBorder.top,
- ...mixins.panelBorder.bottom,
- borderTopColor: 'transparent',
- cursor: 'pointer',
- '&$selected': {
- backgroundColor: baseTheme.palette.primary.light,
- borderColor: baseTheme.palette.primary.main,
- color: basicSettings.palette.getContrastText(baseTheme.palette.primary.light),
- '&:hover': {
+ styleOverrides: {
+ root: {
+ color: baseTheme.palette.text.primary,
+ backgroundColor: baseTheme.palette.background.default,
+ flexDirection: 'column',
+ alignItems: 'initial',
+ padding: '0px 4px',
+ paddingTop: '0px',
+ paddingBottom: '0px',
+ ...mixins.panelBorder.top,
+ ...mixins.panelBorder.bottom,
+ borderTopColor: 'transparent',
+ cursor: 'pointer',
+ '&.Mui-selected': {
backgroundColor: baseTheme.palette.primary.light,
- }
- },
+ borderColor: baseTheme.palette.primary.main,
+ color: basicSettings.palette.getContrastText(baseTheme.palette.primary.light),
+ '&:hover': {
+ backgroundColor: baseTheme.palette.primary.light,
+ }
+ },
+ }
}
},
MuiTooltip: {
- tooltip: {
- fontSize: '0.7rem',
- color: baseTheme.palette.background.default,
- backgroundColor: baseTheme.palette.text.primary,
- },
- arrow: {
- color: baseTheme.palette.text.primary,
+ styleOverrides: {
+ tooltip: {
+ fontSize: '0.7rem',
+ color: baseTheme.palette.background.default,
+ backgroundColor: baseTheme.palette.text.primary,
+ },
+ arrow: {
+ color: baseTheme.palette.text.primary,
+ }
}
},
MuiTab: {
- root: {
- '&$selected': {
- color: baseTheme.otherVars.activeColor,
- },
+ styleOverrides: {
+ root: {
+ '&.MuiTab-textColorPrimary':{
+ color: baseTheme.palette.text.primary,
+ },
+ '&.Mui-selected': {
+ color: baseTheme.otherVars.activeColor,
+ },
+ }
}
},
MuiBackdrop: {
- root: {
- backgroundColor: baseTheme.otherVars.loader.backgroundColor,
+ styleOverrides: {
+ root: {
+ backgroundColor: baseTheme.otherVars.loader.backgroundColor,
+ }
}
}
}
@@ -604,10 +761,10 @@ function getFinalTheme(baseTheme) {
/* Theme wrapper used by DOM containers to apply theme */
/* In future, this will be moved to App container */
-export default function Theme(props) {
- const theme = useMemo(()=>{
- /* We'll remove this in future, we can get the value from preferences directly */
- let themeName = document.querySelector('link[data-theme]')?.getAttribute('data-theme');
+export default function Theme({children}) {
+ const prefStore = usePreferences();
+ const [themeName, setThemeName] = useState(prefStore.getPreferencesForModule('misc')?.theme);
+ const themeObj = useMemo(()=>{
let baseTheme = getStandardTheme(basicSettings);
switch(themeName) {
case 'dark':
@@ -618,11 +775,20 @@ export default function Theme(props) {
break;
}
return getFinalTheme(baseTheme);
- }, []);
+ }, [themeName]);
+
+ useEffect(() => usePreferences.subscribe(
+ state => {
+ setThemeName(state.getPreferencesForModule('misc').theme);
+ }
+ ), []);
+
return (
-
+
- {props.children}
+
+ {children}
+
);
}
diff --git a/web/pgadmin/static/js/Theme/overrides/codemirror.override.js b/web/pgadmin/static/js/Theme/overrides/codemirror.override.js
index 5aa6f5430..83cea7087 100644
--- a/web/pgadmin/static/js/Theme/overrides/codemirror.override.js
+++ b/web/pgadmin/static/js/Theme/overrides/codemirror.override.js
@@ -109,8 +109,8 @@ export default function cmOverride(theme) {
fontSize: '0.9em',
'& li[aria-selected="true"]': {
- backgroundColor: theme.otherVars.treeBgSelected + '!important',
- color: theme.otherVars.treeFgSelected + '!important',
+ backgroundColor: theme.otherVars.tree.treeBgSelected + '!important',
+ color: theme.otherVars.tree.treeFgSelected + '!important',
},
'& .pg-cm-autocomplete-icon': {
diff --git a/web/pgadmin/static/js/Theme/overrides/jsoneditor.override.js b/web/pgadmin/static/js/Theme/overrides/jsoneditor.override.js
new file mode 100644
index 000000000..4541457f4
--- /dev/null
+++ b/web/pgadmin/static/js/Theme/overrides/jsoneditor.override.js
@@ -0,0 +1,442 @@
+/////////////////////////////////////////////////////////////
+//
+// pgAdmin 4 - PostgreSQL Tools
+//
+// Copyright (C) 2013 - 2024, The pgAdmin Development Team
+// This software is released under the PostgreSQL Licence
+//
+//////////////////////////////////////////////////////////////
+
+export default function jsonEditorOverride(theme) {
+ return {
+
+ '.jsoneditor-menu a.jsoneditor-poweredBy': {
+ display: 'none',
+ },
+
+ '.jsoneditor': {
+ borderColor: theme.otherVars.borderColor,
+
+ /* Validation Bar */
+ '& .jsoneditor-validation-errors': {
+ backgroundColor: theme.palette.error.light + ' !important',
+ color: theme.palette.text.primary,
+ border: `1px solid ${theme.palette.error.main}`,
+ },
+
+ '& .jsoneditor-text-errors': {
+ width: '100%',
+ borderCollapse: 'collapse',
+ borderColor: theme.palette.default.borderColor,
+ },
+
+
+ '& .jsoneditor-text-errors tr, & .jsoneditor-text-errors td, & .jsoneditor-text-errors td pre, & .jsoneditor-text-errors tr.parse-error': {
+ backgroundColor: theme.palette.error.light + ' !important',
+ color: theme.palette.text.primary,
+ }
+
+ },
+
+ /* Navigation Bar */
+ '.jsoneditor-navigation-bar': {
+ fontFamily: theme.typography.fontFamily + ' !important' ,
+ backgroundColor: theme.palette.default.main,
+ color: theme.palette.text.primary + ' !important',
+ borderBottom: `1px solid ${theme.otherVars.borderColor}`,
+ },
+
+ /* Menu Bar*/
+ '.jsoneditor-menu': {
+ backgroundColor: theme.palette.grey[400],
+ border: `1px solid ${theme.otherVars.borderColor}`
+ },
+
+
+ /* Menu Bar buttons*/
+ '.jsoneditor-menu>button': {
+ fontFamily: '"Font Awesome 5 Free" !important',
+ fontSize: '.925rem !important',
+ lineHeight: '1.5rem',
+ backgroundImage: 'none !important',
+ borderRadius: '0.25em',
+ borderColor: theme.palette.default.borderColor + ' !important',
+ opacity: 1,
+ backgroundColor: theme.palette.default.main + ' !important',
+ color: theme.palette.text.primary + ' !important',
+ fontWeight: 'normal !important',
+
+ /* Over rides icons */
+ '&.jsoneditor-format::before': {
+ content: '"\\f03c"',
+ fontWeight: '600 !important',
+ },
+
+ '&.jsoneditor-expand-all::before': {
+ content: '"\\f424"',
+ fontWeight: '600 !important',
+ },
+
+ '&.jsoneditor-collapse-all::before': {
+ content: '"\\f422"',
+ fontWeight: '600 !important',
+ },
+
+ '&.jsoneditor-redo::before': {
+ content: '"\\f01e"',
+ fontWeight: '600 !important',
+ },
+
+ '&.jsoneditor-undo::before': {
+ content: '"\\f0e2"',
+ fontWeight: '600 !important',
+ },
+
+ '&.jsoneditor-compact::before': {
+ content: '"\\f066"',
+ fontWeight: '600 !important',
+ },
+
+ '&.jsoneditor-sort::before': {
+ content: '"\\f160"',
+ fontWeight: '600 !important',
+ },
+
+ '&.jsoneditor-repair::before': {
+ content: '"\\f0ad"',
+ fontWeight: '600 !important',
+ },
+
+ '&.jsoneditor-transform::before': {
+ content: '"\\f0b0"',
+ fontWeight: '600 !important',
+ },
+ },
+
+ /* Undo redo buttons */
+ '.jsoneditor-menu>.jsoneditor-modes>button:disabled, .jsoneditor-menu>button:disabled': {
+ color: theme.palette.text.primary + ' !important',
+ opacity: 0.65,
+ borderColor:theme.palette.grey[400],
+ borderRadius: '0.25em',
+ backgroundColor: theme.palette.default.main + ' !important',
+ },
+
+ /* Mode drop-down */
+ '.jsoneditor-menu>.jsoneditor-modes>button:active, .jsoneditor-menu>.jsoneditor-modes>button:focus, .jsoneditor-menu>.jsoneditor-modes>button': {
+ fontFamily: theme.typography.fontFamily + ' !important',
+ fontSize: '.925rem !important',
+ lineHeight: '1.5rem',
+ backgroundImage: 'none !important',
+ borderRadius: '0.25em',
+ borderColor: theme.palette.default.borderColor + ' !important',
+ opacity: 1,
+ backgroundColor: theme.palette.default.main + ' !important',
+ color: theme.palette.text.primary + ' !important',
+ fontWeight: 'normal !important',
+ },
+
+ '.jsoneditor-contextmenu': {
+
+ '& .jsoneditor-icon': {
+ backgroundImage: 'none',
+ },
+
+ '& .jsoneditor-text': {
+ padding: '4px 4px 4px 5px'
+ },
+ '& .jsoneditor-menu': {
+ border:`1px solid ${theme.palette.primary.light}`,
+ backgroundColor: theme.palette.default.main + ' !important',
+ color: theme.palette.text.primary + ' !important',
+ },
+ '& .jsoneditor-menu button.jsoneditor-expand': {
+ height: '0px',
+ backgroundColor: theme.palette.background.default + ' !important'
+ },
+ '&.jsoneditor-menu li ul': {
+ padding: 0,
+ border: `1px solid ${theme.palette.primary.light}`,
+ },
+ '& .jsoneditor-separator': {
+ height: 0,
+ borderTop: `1px solid ${theme.palette.primary.light}`,
+ paddingTop: '5px',
+ marginTop: '5px'
+ },
+
+ /* Mode drop-down options */
+ '& .jsoneditor-menu button, & .jsoneditor-separator':{
+ fontFamily: theme.typography.fontFamily + ' !important',
+ backgroundColor: theme.palette.default.main + ' !important',
+ color: theme.palette.text.primary + ' !important',
+ border: 'none'
+ },
+ /* Drop-down hovered*/
+ '& .jsoneditor-menu li button':{
+ /* Drop-down hovered*/
+ '&:hover':{
+ backgroundColor: theme.palette.primary.main + ' !important',
+ borderColor: theme.palette.primary.main + ' !important',
+ color: theme.palette.primary.contrastText + ' !important',
+ },
+ /* Drop-down selected*/
+ '&.jsoneditor-selected, &.jsoneditor-selected:focus, &.jsoneditor-selected:hover': {
+ backgroundColor: theme.palette.primary.main + ' !important',
+ borderColor: theme.palette.primary.main + ' !important',
+ color: theme.palette.primary.contrastText + ' !important',
+
+ }
+ }
+ },
+
+ /* Search Box*/
+ '.jsoneditor-frame, .jsoneditor-search input': {
+ color: theme.palette.text.primary,
+ backgroundColor: theme.palette.default.main,
+ },
+
+ /* Set expand icon to none*/
+ 'div.jsoneditor-tree button.jsoneditor-button:focus': {
+ backgroundColor: theme.palette.text.primary + ' !important',
+ outline: 'none',
+ },
+
+ /* Search Box results */
+ '.jsoneditor-results': {
+ color: theme.palette.text.primary + ' !important',
+ },
+
+
+ /* Ace editor Setting */
+ /* Ace editor numbers */
+ '.ace-jsoneditor':{
+ ...theme.mixins.fontSourceCode,
+ lineHeight: '1.5 !important',
+ fontSize: '0.875em',
+ color: theme.palette.text.primary + ' !important',
+
+ '& .ace_gutter':{
+ backgroundColor : theme.palette.grey[400],
+ color: theme.palette.text.primary
+ },
+ /* Ace editor code background */
+ '& .ace_scroller':{
+ backgroundColor: theme.palette.background.default,
+ },
+ /* Ace editor hide indent guide */
+ '& .ace_indent-guide': {
+ background: 'none'
+ },
+ '& .ace_variable': {
+ color: theme.palette.text.primary + ' !important',
+ },
+ /* Ace editorfonts */
+ '&.ace_editor': {
+ backgroundColor: theme.palette.background.default + ' !important',
+ color: theme.palette.text.primary + ' !important',
+ },
+ '& .ace_text-layer':{
+ color: theme.palette.text.primary + ' !important',
+ },
+ /* Hi-light line in code */
+ '& .ace_marker-layer .ace_active-line':{
+ backgroundColor: theme.otherVars.editor.selectionBg,
+ border: 0,
+ borderRadius: '0.25em',
+ },
+ '& .ace_gutter-active-line': {
+ backgroundColor: theme.palette.grey[200],
+ },
+ '& .ace_marker-layer .ace_selected-word, & .ace_marker-layer .ace_selection': {
+ border: `1px solid ${theme.palette.primary.light}`,
+
+ },
+
+
+ },
+
+ 'div.jsoneditor td.jsoneditor-tree': {
+ verticalAlign: 'middle'
+ },
+
+ 'pre.jsoneditor-preview': {
+ backgroundColor: theme.palette.grey[200] + ' !important',
+ opacity: 0.8,
+ color: theme.palette.text.primary + ' !important',
+ },
+
+ /* Hilight selected values in tree/form modes */
+ 'div':{
+ '&.jsoneditor-field.jsoneditor-highlight, &.jsoneditor-field[contenteditable=true]:focus, &.jsoneditor-field[contenteditable=true]:hover, &.jsoneditor-value.jsoneditor-highlight, &.jsoneditor-value[contenteditable=true]:focus, &.jsoneditor-value[contenteditable=true]:hover': {
+ backgroundColor: theme.otherVars.editor.selectionBg,
+ border: `1px solid ${theme.otherVars.editor.selectionBg}`,
+ borderRadius: 0.25
+ },
+
+ },
+
+
+ /* /* font setting all other mode */
+ /* form, tree, code, preview, schema-error */
+ 'div.jsoneditor-default, div.jsoneditor-field, div.jsoneditor-value, div.jsoneditor textarea, div.jsoneditor td, div.jsoneditor-readonly, .jsoneditor-popover, div.jsoneditor-tree': {
+ fontFamily: theme.typography.fontFamily + ' !important',
+ fontSize: '.875rem !important',
+ lineHeight: '1.5rem',
+ backgroundColor: theme.palette.background.default + ' !important',
+ color: theme.palette.text.primary + ' !important'
+ },
+
+ /* Status Bar */
+ '.jsoneditor-statusbar': {
+ backgroundColor: theme.palette.grey[400] + ' !important',
+ color: theme.palette.text.primary + ' !important',
+ borderTop: `1px solid ${theme.otherVars.borderColor}`
+ },
+
+ /* Transform & sort */
+ /* Header */
+ '.jsoneditor-modal .pico-modal-header': {
+ fontFamily: theme.typography.fontFamily + ' !important',
+ fontSize: '.875rem !important',
+ fontWeight: 'bold',
+ backgroundColor: theme.palette.primary.main + ' !important',
+ color: theme.palette.text.primary,
+ },
+
+ /* Body */
+ '.pico-content': {
+ backgroundColor: theme.palette.background.default + ' !important',
+ },
+
+ /* Disable links */
+ '.jsoneditor-modal a': {
+ color: theme.palette.text.primary + ' !important'
+ },
+
+ /* Replace help text */
+ '.pico-modal-contents p': {
+ visibility: 'hidden',
+ display: 'flex',
+ marginBottom: '-1rem',
+ '&::after':{
+ visibility: 'visible',
+ position: 'absolute',
+ content: '"Enter a JMESPath query to filter, sort, or transform the JSON data."'
+
+ }
+ },
+
+
+ /* Fields */
+ '.jsoneditor-modal':{
+ '& #query, & input, & input[type=text], & input[type=text]:focus, & option, & select, & table td, & table th, & textarea, & label':{
+ color: theme.palette.text.primary + ' !important',
+ backgroundColor: theme.palette.background.default + ' !important',
+ fontFamily: theme.typography.fontFamily + ' !important',
+ fontSize: '.875rem !important',
+ padding: '4px',
+
+ },
+ '& input[type=button]':{
+ color: theme.palette.text.primary,
+ backgroundColor: theme.palette.default.main,
+ },
+ /* OK Button */
+ '& input[type=submit]':{
+ color: theme.palette.primary.contrastText + ' !important',
+ backgroundColor: theme.palette.primary.main + ' !important',
+ borderColor: theme.palette.primary.main + ' !important',
+ textTransform: 'uppercase',
+ },
+ '& .jsoneditor-jmespath-label':{
+ color: theme.palette.text.primary + ' !important',
+ fontWeight: 'bold'
+ },
+ '& option':{
+ backgroundColor: theme.palette.primary.light + ' !important',
+ border: `1px solid ${theme.palette.primary.light}` + ' !important',
+ borderRadius: '0.25',
+ color: theme.palette.text.primary + ' !important',
+ },
+ '& .jsoneditor-button-group.jsoneditor-button-group-value-asc input.jsoneditor-button-asc, & .jsoneditor-button-group.jsoneditor-button-group-value-desc input.jsoneditor-button-desc':{
+ backgroundColor: theme.palette.primary.main + ' !important',
+ borderColor: theme.palette.primary.main + ' !important',
+ color: theme.palette.primary.contrastText + ' !important',
+ },
+ '& .selectr-selected':{
+ color: theme.palette.text.primary + ' !important',
+ backgroundColor: theme.palette.background.default
+ },
+ '& .selectr-selected .selectr-tag':{
+ backgroundColor: theme.palette.primary.main + ' !important',
+ borderColor: theme.palette.primary.main,
+ border: `1px solid ${theme.palette.primary.main}`,
+ color: theme.palette.primary.contrastText + ' !important',
+ },
+ '& .selectr-selected .selectr-tag-remove::before':{
+ color: theme.palette.primary.main + ' !important',
+ }
+
+
+ },
+
+ '.selectr-option, .selectr-options-container': {
+ color: theme.palette.text.primary + ' !important',
+ backgroundColor: theme.palette.default.main
+ },
+
+ '.selectr-option.active, .selectr-option.selected': {
+ backgroundColor: theme.palette.primary.main + ' !important',
+ borderColor: theme.palette.primary.main,
+ color: theme.palette.primary.contrastText + ' !important',
+ },
+
+
+ /* Update String. Key colors code mode */
+ '.ace_variable': {
+ color: theme.otherVars.editor.variable + ' !important',
+ },
+
+ '.ace_string': {
+ color: theme.otherVars.editor.string + ' !important',
+ },
+
+ '.ace_constant.ace_numeric': {
+ color: theme.otherVars.editor.number + ' !important',
+ },
+
+ /* Update String. Key colors tree/form mode*/
+ 'div.jsoneditor-value':{
+ '&.jsoneditor-string':{
+ color: theme.otherVars.editor.string + ' !important',
+ },
+ ' &.jsoneditor-number':{
+ color: theme.otherVars.editor.number + ' !important',
+
+ }
+ },
+
+ // /* read only mode */
+ '#pg-json-editor[readonly]': {
+ '& div.jsoneditor-tree, & div.jsoneditor td, & div.jsoneditor-readonly, & div.jsoneditor-value, & div.jsoneditor-field, & div.jsoneditor-tree button.jsoneditor-button:focus': {
+ backgroundColor: theme.palette.grey[400] + ' !important',
+ opacity: 0.85
+ }
+ },
+
+ /* Ace editor code background readonly*/
+ '#pg-json-editor[readonly] .ace-jsoneditor .ace_scroller':{
+ backgroundColor: theme.palette.grey[400] + ' !important',
+ opacity: 0.85
+ }
+
+
+
+
+
+
+
+
+ };
+}
diff --git a/web/pgadmin/static/js/Theme/overrides/pgadmin.classes.override.js b/web/pgadmin/static/js/Theme/overrides/pgadmin.classes.override.js
new file mode 100644
index 000000000..ddd703c5a
--- /dev/null
+++ b/web/pgadmin/static/js/Theme/overrides/pgadmin.classes.override.js
@@ -0,0 +1,20 @@
+export default function pgadminOverride(theme) {
+ return {
+
+ '.icon-server-connecting': {
+ backgroundImage: theme.otherVars.iconLoaderUrl,
+ backgroundRepeat: 'no-repeat',
+ backgroundAize: '18px !important',
+ alignContent: 'center',
+ verticalAlign: 'middle',
+ height: '1.3em',
+ },
+
+ '.dashboard-pg-doc': {
+ backgroundImage: theme.otherVars.dashboardPgDoc,
+ display: 'inline-block',
+ width: '50px',
+ height: '50px',
+ backgroundAize: '50px 50px'
+ }
+ };}
diff --git a/web/pgadmin/static/js/Theme/overrides/rcdock.override.js b/web/pgadmin/static/js/Theme/overrides/rcdock.override.js
index 0d93addf9..c1f4f8c6d 100644
--- a/web/pgadmin/static/js/Theme/overrides/rcdock.override.js
+++ b/web/pgadmin/static/js/Theme/overrides/rcdock.override.js
@@ -112,7 +112,7 @@ export default function rcdockOverride(theme) {
color: 'unset',
},
'& > div': {
- padding: '4px 10px',
+ padding: '4px 8px',
'&:focus': {
outline: '1px solid '+theme.otherVars.activeBorder,
outlineOffset: '-1px',
@@ -176,7 +176,7 @@ export default function rcdockOverride(theme) {
zIndex: 1080,
},
'& .drag-accept-reject::after': {
- content: '',
+ content: '""',
},
'& .dock-nav-more': {
color: theme.custom.icon.contrastText
diff --git a/web/pgadmin/static/js/Theme/overrides/reactaspen.override.js b/web/pgadmin/static/js/Theme/overrides/reactaspen.override.js
new file mode 100644
index 000000000..26e58bfc8
--- /dev/null
+++ b/web/pgadmin/static/js/Theme/overrides/reactaspen.override.js
@@ -0,0 +1,230 @@
+/////////////////////////////////////////////////////////////
+//
+// pgAdmin 4 - PostgreSQL Tools
+//
+// Copyright (C) 2013 - 2024, The pgAdmin Development Team
+// This software is released under the PostgreSQL Licence
+//
+//////////////////////////////////////////////////////////////
+
+export default function reactAspenOverride(theme) {
+ return {
+ '.drag-tree-node': {
+ position: 'absolute',
+ top: '-100px',
+ left: 0,
+ zIndex: 99999,
+ color: theme.otherVars.tree.textFg,
+ background: theme.otherVars.tree.inputBg,
+ padding: '0.25rem 0.75rem',
+ maxWidth: '30%',
+ overflow: 'hidden',
+ whiteSpace: 'nowrap',
+ textOverflow: 'ellipsis',
+ },
+
+ '.file-tree': {
+ color: theme.otherVars.tree.textFg + ' !important',
+ backgroundColor: theme.otherVars.tree.inputBg + ' !important',
+ fontFamily: theme.typography.fontFamily + ' !important',
+ fontSize: '0.815rem' + ' !important',
+ display: 'inline-block',
+ position: 'relative',
+ width: '100%',
+ '&, & *': {
+ boxSizing: 'border-box',
+ },
+ },
+
+ '.browser-tree': {
+ height: '100%',
+ },
+
+ '.file-tree>': {
+ div: {
+ position: 'absolute' + ' !important',
+ height: '100%' + ' !important',
+ top: '0px' + ' !important',
+
+ '>div': {
+ scrollbarGutter: 'stable',
+ overflow: 'overlay' + ' !important',
+ },
+ },
+ },
+
+ '.file-entry': {
+ font: 'inherit',
+ textAlign: 'left',
+ display: 'flex',
+ alignItems: 'center',
+ whiteSpace: 'nowrap',
+ padding: '2px 0',
+ paddingLeft: '2px',
+ cursor: 'default',
+
+ '&:before': {
+ content: '""',
+ background: theme.palette.grey[400],
+ position: 'absolute',
+ width: '1px',
+ height: '100%',
+ // set box-shadow to show tree indent guide.
+ boxShadow: `'-16px 0 0 0' + theme.palette.grey[400],
+ '-32px 0 0 0' + theme.palette.grey[400],
+ '-48px 0 0 0' + theme.palette.grey[400],
+ '-64px 0 0 0' + theme.palette.grey[400],
+ '-80px 0 0 0' + theme.palette.grey[400],
+ '-96px 0 0 0' + theme.palette.grey[400],
+ '-112px 0 0 0' + theme.palette.grey[400],
+ '-128px 0 0 0' + theme.palette.grey[400],
+ '-144px 0 0 0' + theme.palette.grey[400],
+ '-160px 0 0 0' + theme.palette.grey[400],
+ '-176px 0 0 0' + theme.palette.grey[400],
+ '-192px 0 0 0' + theme.palette.grey[400],
+ '-208px 0 0 0' + theme.palette.grey[400],
+ '-224px 0 0 0' + theme.palette.grey[400],
+ '-240px 0 0 0' + theme.palette.grey[400],
+ '-256px 0 0 0' + theme.palette.grey[400],
+ '-272px 0 0 0' + theme.palette.grey[400],
+ '-288px 0 0 0' + theme.palette.grey[400],
+ '-304px 0 0 0' + theme.palette.grey[400],
+ '-320px 0 0 0' + theme.palette.grey[400],
+ '-336px 0 0 0' + theme.palette.grey[400],
+ '-352px 0 0 0' + theme.palette.grey[400],
+ '-368px 0 0 0' + theme.palette.grey[400],
+ '-384px 0 0 0' + theme.palette.grey[400],
+ '-400px 0 0 0' + theme.palette.grey[400],
+ '-416px 0 0 0' + theme.palette.grey[400],
+ '-432px 0 0 0' + theme.palette.grey[400],
+ '-448px 0 0 0' + theme.palette.grey[400],
+ '-464px 0 0 0' + theme.palette.grey[400],
+ '-480px 0 0 0' + theme.palette.grey[400],
+ '-496px 0 0 0' + theme.palette.grey[400],
+ '-512px 0 0 0' + theme.palette.grey[400],
+ '-528px 0 0 0' + theme.palette.grey[400],
+ '-544px 0 0 0' + theme.palette.grey[400],
+ '-544px 0 0 0' + theme.palette.grey[400],
+ '-560px 0 0 0' + theme.palette.grey[400]`,
+ },
+
+ '&.big': {
+ fontFamily: 'monospace',
+ },
+
+ '&:hover, &.pseudo-active': {
+ color: theme.otherVars.tree.textHoverFg + ' !important',
+ backgroundColor: theme.otherVars.tree.bgHover + ' !important',
+ 'span.file-label': {
+ 'span.file-name': {
+ color: theme.otherVars.tree.textHoverFg,
+ },
+ },
+ },
+
+ '&.active, &.prompt': {
+ color: theme.otherVars.tree.textHoverFg + ' !important',
+ backgroundColor: theme.otherVars.tree.bgSelected + ' !important',
+ borderColor: theme.otherVars.tree.bgSelected,
+ borderRight: '3px solid ' + theme.palette.primary.main + ' !important',
+ 'span.file-label': {
+ 'span.file-name': {
+ color: theme.otherVars.textHoverFg,
+ },
+ },
+ },
+
+ 'span.file-label': {
+ display: 'flex',
+ alignItems: 'center',
+ padding: '0 2px 0 2px',
+ border: '1px solid transparent',
+ height: 'auto',
+ whiteSpace: 'normal',
+ cursor: 'pointer !important',
+ marginLeft: '2px',
+ '&:hover, &.pseudo-active': {
+ color: theme.otherVars.tree.fgHover,
+ },
+ },
+
+ 'span.file-name': {
+ font: 'inherit',
+ flexGrow: 1,
+ userSelect: 'none',
+ color: theme.otherVars.tree.textFg,
+ marginLeft: '3px',
+ cursor: 'pointer !important',
+ whiteSpace: 'nowrap',
+ '&:hover, &.pseudo-active': {
+ color: theme.otherVars.tree.fgHover,
+ },
+ },
+
+ i: {
+ display: 'inline-block',
+ font: 'normal normal normal 18px/1 "Font Awesome 5 Free"',
+ fontSize: '18px',
+ textAlign: 'center',
+ height: '21px !important',
+ width: '20px !important',
+ flexShrink: 0,
+
+ '&:before': {
+ height: 'inherit',
+ width: 'inherit',
+ display: 'inline-block',
+ },
+
+ '&.directory-toggle': {
+ '&:before': {
+ backgroundPosition: '6px center !important',
+ fontFamily: '"Font Awesome 5 Free"',
+ content: '"\\f054"',
+ borderStyle: 'none',
+ marginLeft: '5px',
+ fontWeight: 900,
+ right: '15px',
+ top: '3px',
+ fontSize: '0.6rem',
+ lineHeight: 2,
+ },
+
+ '&.open:before': {
+ backgroundPosition: '-14px center !important',
+ fontFamily: theme.typography.fontFamilyIcon,
+ content: '"\\f078"',
+ borderStyle: 'none',
+ marginLeft: '5px',
+ fontWeight: 900,
+ transform: 'none !important',
+ },
+
+ '&.loading:before': {
+ content: '""',
+ fontFamily: theme.typography.fontFamilyIcon,
+ borderStyle: 'none',
+ background: theme.otherVars.iconLoaderSmall + ' 0 0 no-repeat',
+ backgroundPosition: 'center !important',
+ },
+ },
+ },
+
+ '&.prompt.new .file-label, &.file .file-label': {
+ marginLeft: '18px',
+ },
+
+ // Set the tree depth CSS from depth
+ ...Object.fromEntries(
+ new Array(50).fill(0).map((v, i) => {
+ return ['&.depth-' + i, { paddingLeft: 16 * (i - 1) + 'px' }];
+ })
+ ),
+ },
+
+ '.children-count': {
+ marginLeft: '3px',
+ },
+
+ };
+}
diff --git a/web/pgadmin/static/js/Theme/standard.js b/web/pgadmin/static/js/Theme/standard.js
index e541800f7..2bc637fcd 100644
--- a/web/pgadmin/static/js/Theme/standard.js
+++ b/web/pgadmin/static/js/Theme/standard.js
@@ -8,8 +8,7 @@
//////////////////////////////////////////////////////////////
/* The standard theme */
-import { createTheme } from '@material-ui/core/styles';
-import { alpha, darken } from '@material-ui/core/styles/colorManipulator';
+import { alpha, darken, createTheme} from '@mui/material/styles';
export default function(basicSettings) {
return createTheme(basicSettings, {
@@ -81,6 +80,10 @@ export default function(basicSettings) {
}
},
otherVars: {
+ colorBrand: '#326690',
+ iconLoaderUrl: 'url("data:image/svg+xml,%3C%3Fxml version=\'1.0\' encoding=\'utf-8\'%3F%3E%3C!-- Generator: Adobe Illustrator 23.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version=\'1.1\' id=\'Layer_1\' xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\' x=\'0px\' y=\'0px\' viewBox=\'0 0 38 38\' style=\'enable-background:new 0 0 38 38;\' xml:space=\'preserve\'%3E%3Cstyle type=\'text/css\'%3E .st0%7Bfill:none;stroke:%23EBEEF3;stroke-width:5;%7D .st1%7Bfill:none;stroke:%23326690;stroke-width:5;%7D%0A%3C/style%3E%3Cg%3E%3Cg transform=\'translate(1 1)\'%3E%3Ccircle class=\'st0\' cx=\'18\' cy=\'18\' r=\'16\'/%3E%3Cpath class=\'st1\' d=\'M34,18c0-8.8-7.2-16-16-16 \'%3E%3CanimateTransform accumulate=\'none\' additive=\'replace\' attributeName=\'transform\' calcMode=\'linear\' dur=\'0.7s\' fill=\'remove\' from=\'0 18 18\' repeatCount=\'indefinite\' restart=\'always\' to=\'360 18 18\' type=\'rotate\'%3E%3C/animateTransform%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");',
+ iconLoaderSmall: 'url("data:image/svg+xml,%3C%3Fxml version=\'1.0\' encoding=\'utf-8\'%3F%3E%3C!-- Generator: Adobe Illustrator 23.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version=\'1.1\' id=\'Layer_1\' xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\' x=\'0px\' y=\'0px\' viewBox=\'0 0 38 38\' style=\'enable-background:new 0 0 38 38;\' xml:space=\'preserve\'%3E%3Cstyle type=\'text/css\'%3E .st0%7Bfill:none;stroke:%23EBEEF3;stroke-width:5;%7D .st1%7Bfill:none;stroke:%23326690;stroke-width:5;%7D%0A%3C/style%3E%3Cg%3E%3Cg transform=\'translate(1 1)\'%3E%3Ccircle class=\'st0\' cx=\'18\' cy=\'18\' r=\'16\'/%3E%3Cpath class=\'st1\' d=\'M34,18c0-8.8-7.2-16-16-16 \'%3E%3CanimateTransform accumulate=\'none\' additive=\'replace\' attributeName=\'transform\' calcMode=\'linear\' dur=\'0.7s\' fill=\'remove\' from=\'0 18 18\' repeatCount=\'indefinite\' restart=\'always\' to=\'360 18 18\' type=\'rotate\'%3E%3C/animateTransform%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A")',
+ dashboardPgDoc: 'url("data:image/svg+xml,%3C%3Fxml version=\'1.0\' encoding=\'utf-8\'%3F%3E%3C!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version=\'1.1\' id=\'Layer_1\' xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\' x=\'0px\' y=\'0px\' viewBox=\'0 0 42 42\' style=\'enable-background:new 0 0 42 42;\' xml:space=\'preserve\'%3E%3Cstyle type=\'text/css\'%3E .st0%7Bstroke:%23000000;stroke-width:3.3022;%7D .st1%7Bfill:%23336791;%7D .st2%7Bfill:none;stroke:%23FFFFFF;stroke-width:1.1007;stroke-linecap:round;stroke-linejoin:round;%7D .st3%7Bfill:none;stroke:%23FFFFFF;stroke-width:1.1007;stroke-linecap:round;stroke-linejoin:bevel;%7D .st4%7Bfill:%23FFFFFF;stroke:%23FFFFFF;stroke-width:0.3669;%7D .st5%7Bfill:%23FFFFFF;stroke:%23FFFFFF;stroke-width:0.1835;%7D .st6%7Bfill:none;stroke:%23FFFFFF;stroke-width:0.2649;stroke-linecap:round;stroke-linejoin:round;%7D%0A%3C/style%3E%3Cg id=\'orginal\'%3E%3C/g%3E%3Cg id=\'Layer_x0020_3\'%3E%3Cpath class=\'st0\' d=\'M31.3,30c0.3-2.1,0.2-2.4,1.7-2.1l0.4,0c1.2,0.1,2.8-0.2,3.7-0.6c2-0.9,3.1-2.4,1.2-2 c-4.4,0.9-4.7-0.6-4.7-0.6c4.7-7,6.7-15.8,5-18c-4.6-5.9-12.6-3.1-12.7-3l0,0c-0.9-0.2-1.9-0.3-3-0.3c-2,0-3.5,0.5-4.7,1.4 c0,0-14.3-5.9-13.6,7.4c0.1,2.8,4,21.3,8.7,15.7c1.7-2,3.3-3.8,3.3-3.8c0.8,0.5,1.8,0.8,2.8,0.7l0.1-0.1c0,0.3,0,0.5,0,0.8 c-1.2,1.3-0.8,1.6-3.2,2.1c-2.4,0.5-1,1.4-0.1,1.6c1.1,0.3,3.7,0.7,5.5-1.8l-0.1,0.3c0.5,0.4,0.4,2.7,0.5,4.4 c0.1,1.7,0.2,3.2,0.5,4.1c0.3,0.9,0.7,3.3,3.9,2.6C29.1,38.3,31.1,37.5,31.3,30\'/%3E%3Cpath class=\'st1\' d=\'M38.3,25.3c-4.4,0.9-4.7-0.6-4.7-0.6c4.7-7,6.7-15.8,5-18c-4.6-5.9-12.6-3.1-12.7-3l0,0 c-0.9-0.2-1.9-0.3-3-0.3c-2,0-3.5,0.5-4.7,1.4c0,0-14.3-5.9-13.6,7.4c0.1,2.8,4,21.3,8.7,15.7c1.7-2,3.3-3.8,3.3-3.8 c0.8,0.5,1.8,0.8,2.8,0.7l0.1-0.1c0,0.3,0,0.5,0,0.8c-1.2,1.3-0.8,1.6-3.2,2.1c-2.4,0.5-1,1.4-0.1,1.6c1.1,0.3,3.7,0.7,5.5-1.8 l-0.1,0.3c0.5,0.4,0.8,2.4,0.7,4.3c-0.1,1.9-0.1,3.2,0.3,4.2c0.4,1,0.7,3.3,3.9,2.6c2.6-0.6,4-2,4.2-4.5c0.1-1.7,0.4-1.5,0.5-3 l0.2-0.7c0.3-2.3,0-3.1,1.7-2.8l0.4,0c1.2,0.1,2.8-0.2,3.7-0.6C39,26.4,40.2,24.9,38.3,25.3L38.3,25.3z\'/%3E%3Cpath class=\'st2\' d=\'M21.8,26.6c-0.1,4.4,0,8.8,0.5,9.8c0.4,1.1,1.3,3.2,4.5,2.5c2.6-0.6,3.6-1.7,4-4.1c0.3-1.8,0.9-6.7,1-7.7\'/%3E%3Cpath class=\'st2\' d=\'M18,4.7c0,0-14.3-5.8-13.6,7.4c0.1,2.8,4,21.3,8.7,15.7c1.7-2,3.2-3.7,3.2-3.7\'/%3E%3Cpath class=\'st2\' d=\'M25.7,3.6c-0.5,0.2,7.9-3.1,12.7,3c1.7,2.2-0.3,11-5,18\'/%3E%3Cpath class=\'st3\' d=\'M33.5,24.6c0,0,0.3,1.5,4.7,0.6c1.9-0.4,0.8,1.1-1.2,2c-1.6,0.8-5.3,0.9-5.3-0.1 C31.6,24.5,33.6,25.3,33.5,24.6c-0.1-0.6-1.1-1.2-1.7-2.7c-0.5-1.3-7.3-11.2,1.9-9.7c0.3-0.1-2.4-8.7-11-8.9 c-8.6-0.1-8.3,10.6-8.3,10.6\'/%3E%3Cpath class=\'st2\' d=\'M19.4,25.6c-1.2,1.3-0.8,1.6-3.2,2.1c-2.4,0.5-1,1.4-0.1,1.6c1.1,0.3,3.7,0.7,5.5-1.8c0.5-0.8,0-2-0.7-2.3 C20.5,25.1,20,24.9,19.4,25.6L19.4,25.6z\'/%3E%3Cpath class=\'st2\' d=\'M19.3,25.5c-0.1-0.8,0.3-1.7,0.7-2.8c0.6-1.6,2-3.3,0.9-8.5c-0.8-3.9-6.5-0.8-6.5-0.3c0,0.5,0.3,2.7-0.1,5.2 c-0.5,3.3,2.1,6,5,5.7\'/%3E%3Cpath class=\'st4\' d=\'M18,13.8c0,0.2,0.3,0.7,0.8,0.7c0.5,0.1,0.9-0.3,0.9-0.5c0-0.2-0.3-0.4-0.8-0.4C18.4,13.6,18,13.7,18,13.8 L18,13.8z\'/%3E%3Cpath class=\'st5\' d=\'M32,13.5c0,0.2-0.3,0.7-0.8,0.7c-0.5,0.1-0.9-0.3-0.9-0.5c0-0.2,0.3-0.4,0.8-0.4C31.6,13.2,32,13.3,32,13.5 L32,13.5z\'/%3E%3Cpath class=\'st2\' d=\'M33.7,12.2c0.1,1.4-0.3,2.4-0.4,3.9c-0.1,2.2,1,4.7-0.6,7.2\'/%3E%3Cpath class=\'st6\' d=\'M2.7,6.6\'/%3E%3C/g%3E%3C/svg%3E%0A")',
reactSelect: {
padding: '5px 8px',
},
@@ -123,6 +126,11 @@ export default function(basicSettings) {
bg: '#880000'
},
},
+ scroll: {
+ baseColor: '#bac1cd',
+ barBackgroundColor: '#bac1cd33',
+ thumbBackground: '#bac1cdb3'
+ },
schemaDiff: {
diffRowColor: '#fff9c4',
sourceRowColor: '#ffebee',
@@ -151,8 +159,14 @@ export default function(basicSettings) {
guttersBg: '#f3f5f9',
guttersFg: '#848ea0',
},
- treeBgSelected: '#d6effc',
- treeFgSelected: '#222',
+ tree: {
+ textFg: '#222222',
+ inputBg: '#ffffff',
+ fgHover: '#222222',
+ bgHover: '#ebeef3',
+ textHoverFg: '#222222',
+ bgSelected: '#d6effc'
+ }
}
});
}
diff --git a/web/pgadmin/static/js/components/Buttons.jsx b/web/pgadmin/static/js/components/Buttons.jsx
index 6e4a9de78..1ed2a0f14 100644
--- a/web/pgadmin/static/js/components/Buttons.jsx
+++ b/web/pgadmin/static/js/components/Buttons.jsx
@@ -7,7 +7,8 @@
//
//////////////////////////////////////////////////////////////
-import { Button, ButtonGroup, makeStyles, Tooltip } from '@material-ui/core';
+import { Button, ButtonGroup, Tooltip } from '@mui/material';
+import { makeStyles } from '@mui/styles';
import React, { forwardRef } from 'react';
import clsx from 'clsx';
import PropTypes from 'prop-types';
@@ -44,14 +45,22 @@ const useStyles = makeStyles((theme)=>({
iconButton: {
minWidth: 0,
padding: '2px 4px',
- '&.MuiButton-sizeSmall, &.MuiButton-outlinedSizeSmall, &.MuiButton-containedSizeSmall': {
- padding: '1px 4px',
+ '&.MuiButton-sizeSmall, &.MuiButton-outlined.MuiButton-sizeSmall, &.MuiButton-contained.MuiButton-sizeSmall': {
},
},
iconButtonDefault: {
borderColor: theme.custom.icon.borderColor,
color: theme.custom.icon.contrastText,
backgroundColor: theme.custom.icon.main,
+ height: '28px',
+ padding: '1px 4px',
+ '.MuiButtonGroup-root &': {
+ minWidth: '34px',
+
+ '&.MuiButtonGroup-firstButton:hover, &.MuiButtonGroup-middleButton:hover': {
+ borderRightColor: theme.custom.icon.borderColor,
+ },
+ },
'&.Mui-disabled': {
borderColor: theme.custom.icon.disabledBorderColor,
backgroundColor: theme.custom.icon.disabledMain,
@@ -61,19 +70,20 @@ const useStyles = makeStyles((theme)=>({
backgroundColor: theme.custom.icon.hoverMain,
color: theme.custom.icon.hoverContrastText,
borderColor: theme.custom.icon.borderColor,
- },
+ }
},
splitButton: {
- '&.MuiButton-sizeSmall, &.MuiButton-outlinedSizeSmall, &.MuiButton-containedSizeSmall': {
+ '&.MuiButton-sizeSmall, &.MuiButton-outlined.MuiButton-sizeSmall, &.MuiButton-contained.MuiButton-sizeSmall': {
width: '20px',
+ minWidth: 0,
'& svg': {
height: '0.8em',
}
- },
+ }
},
xsButton: {
padding: '2px 1px',
- height: '24px',
+ height: '24px !important',
minWidth: '24px',
'& .MuiSvgIcon-root': {
height: '0.8em',
@@ -119,7 +129,7 @@ export const PrimaryButton = forwardRef((props, ref)=>{
noBorder && allClassName.push(...[classes.noBorder, classes.noBorderPrimary]);
const dataLabel = typeof(children) == 'string' ? children : undefined;
return (
-
+
);
});
PrimaryButton.displayName = 'PrimaryButton';
@@ -142,7 +152,7 @@ export const DefaultButton = forwardRef((props, ref)=>{
noBorder && allClassName.push(classes.noBorder);
const dataLabel = typeof(children) == 'string' ? children : undefined;
return (
-
+
);
});
DefaultButton.displayName = 'DefaultButton';
@@ -220,7 +230,7 @@ PgIconButton.propTypes = {
export const PgButtonGroup = forwardRef(({children, ...props}, ref)=>{
/* Tooltip does not work for disabled items */
return (
-
+
{children}
);
diff --git a/web/pgadmin/static/js/components/CheckBoxTree.jsx b/web/pgadmin/static/js/components/CheckBoxTree.jsx
index 61140acaf..ce9860b5f 100644
--- a/web/pgadmin/static/js/components/CheckBoxTree.jsx
+++ b/web/pgadmin/static/js/components/CheckBoxTree.jsx
@@ -1,11 +1,11 @@
import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
import CheckboxTree from 'react-checkbox-tree';
-import CheckBoxIcon from '@material-ui/icons/CheckBox';
-import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
-import IndeterminateCheckBoxIcon from '@material-ui/icons/IndeterminateCheckBox';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import ChevronRightIcon from '@material-ui/icons/ChevronRight';
+import CheckBoxIcon from '@mui/icons-material/CheckBox';
+import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
+import IndeterminateCheckBoxIcon from '@mui/icons-material/IndeterminateCheckBox';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
import PropTypes from 'prop-types';
const useStyles = makeStyles((theme) =>
diff --git a/web/pgadmin/static/js/components/EmptyPanelMessage.jsx b/web/pgadmin/static/js/components/EmptyPanelMessage.jsx
index 52d2dcdf3..8b5280409 100644
--- a/web/pgadmin/static/js/components/EmptyPanelMessage.jsx
+++ b/web/pgadmin/static/js/components/EmptyPanelMessage.jsx
@@ -1,7 +1,7 @@
import React from 'react';
-import { Box } from '@material-ui/core';
-import InfoRoundedIcon from '@material-ui/icons/InfoRounded';
-import { makeStyles } from '@material-ui/styles';
+import { Box } from '@mui/material';
+import InfoRoundedIcon from '@mui/icons-material/InfoRounded';
+import { makeStyles } from '@mui/styles';
import PropTypes from 'prop-types';
const useStyles = makeStyles((theme)=>({
diff --git a/web/pgadmin/static/js/components/ExternalIcon.jsx b/web/pgadmin/static/js/components/ExternalIcon.jsx
index e340f000a..c7f4f20f8 100644
--- a/web/pgadmin/static/js/components/ExternalIcon.jsx
+++ b/web/pgadmin/static/js/components/ExternalIcon.jsx
@@ -23,9 +23,10 @@ import MsAzure from '../../img/ms_azure.svg?svgr';
import GoogleCloud from '../../img/google-cloud-1.svg?svgr';
import TerminalSvg from '../../img/terminal.svg?svgr';
import RowFilterSvg from '../../img/fonticon/row_filter.svg?svgr';
+import SvgIcon from '@mui/material/SvgIcon';
export default function ExternalIcon({Icon, ...props}) {
- return ;
+ return ;
}
ExternalIcon.propTypes = {
diff --git a/web/pgadmin/static/js/components/FieldSet.jsx b/web/pgadmin/static/js/components/FieldSet.jsx
index 32b60816c..14bec09d2 100644
--- a/web/pgadmin/static/js/components/FieldSet.jsx
+++ b/web/pgadmin/static/js/components/FieldSet.jsx
@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core';
+import { makeStyles } from '@mui/styles';
import React from 'react';
import clsx from 'clsx';
import PropTypes from 'prop-types';
diff --git a/web/pgadmin/static/js/components/FormComponents.jsx b/web/pgadmin/static/js/components/FormComponents.jsx
index 9889a4e81..e52a7a2c9 100644
--- a/web/pgadmin/static/js/components/FormComponents.jsx
+++ b/web/pgadmin/static/js/components/FormComponents.jsx
@@ -9,27 +9,26 @@
/* Common form components used in pgAdmin */
import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
import {
- Box, FormControl, OutlinedInput, FormHelperText,
+ Box, FormControl, OutlinedInput, FormHelperText, ToggleButton, ToggleButtonGroup,
Grid, IconButton, FormControlLabel, Switch, Checkbox, useTheme, InputLabel, Paper, Select as MuiSelect, Radio, Tooltip,
-} from '@material-ui/core';
-import { ToggleButton, ToggleButtonGroup } from '@material-ui/lab';
-import ErrorRoundedIcon from '@material-ui/icons/ErrorOutlineRounded';
-import InfoRoundedIcon from '@material-ui/icons/InfoRounded';
-import CloseIcon from '@material-ui/icons/CloseRounded';
-import CheckRoundedIcon from '@material-ui/icons/CheckRounded';
-import WarningRoundedIcon from '@material-ui/icons/WarningRounded';
-import FolderOpenRoundedIcon from '@material-ui/icons/FolderOpenRounded';
-import DescriptionIcon from '@material-ui/icons/Description';
-import AssignmentTurnedIn from '@material-ui/icons/AssignmentTurnedIn';
+} from '@mui/material';
+import ErrorRoundedIcon from '@mui/icons-material/ErrorOutlineRounded';
+import InfoRoundedIcon from '@mui/icons-material/InfoRounded';
+import CloseIcon from '@mui/icons-material/CloseRounded';
+import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
+import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
+import FolderOpenRoundedIcon from '@mui/icons-material/FolderOpenRounded';
+import DescriptionIcon from '@mui/icons-material/Description';
+import AssignmentTurnedIn from '@mui/icons-material/AssignmentTurnedIn';
import Select, { components as RSComponents } from 'react-select';
import CreatableSelect from 'react-select/creatable';
import clsx from 'clsx';
import PropTypes from 'prop-types';
import HTMLReactParse from 'html-react-parser';
-import { KeyboardDateTimePicker, KeyboardDatePicker, KeyboardTimePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
-import DateFnsUtils from '@date-io/date-fns';
+
+import { DateTimePicker, DatePicker, TimePicker} from '@mui/x-date-pickers';
import * as DateFns from 'date-fns';
import CodeMirror from './ReactCodeMirror';
@@ -158,7 +157,7 @@ export function FormInput({ children, error, className, label, helpMessage, requ
{
- labelTooltip ?
+ labelTooltip ?
{labelComponent}
: labelComponent
@@ -257,6 +256,7 @@ export function InputDateTimePicker({ value, onChange, readonly, controlProps, .
let format = '';
let placeholder = '';
let regExp = /[a-zA-Z]/;
+ let timeZoneString = '';
if (controlProps?.pickerType === 'Date') {
format = controlProps.format || DATE_TIME_FORMAT.DATE;
placeholder = controlProps.placeholder || 'YYYY-MM-DD';
@@ -275,6 +275,7 @@ export function InputDateTimePicker({ value, onChange, readonly, controlProps, .
/* Value should be a date object instead of string */
value = _.isUndefined(value) || regExp.test(value) ? null : value;
if (!_.isNull(value)) {
+ timeZoneString = value.slice(-6);
let parseValue = DateFns.parse(value, format, new Date());
if (!DateFns.isValid(parseValue)) {
parseValue = DateFns.parseISO(value);
@@ -290,43 +291,30 @@ export function InputDateTimePicker({ value, onChange, readonly, controlProps, .
let commonProps = {
...props,
value: value,
- format: format,
- placeholder: placeholder,
+ format: format.replace('xxx', timeZoneString),
label: '',
variant: 'inline',
- readOnly: Boolean(readonly),
- autoOk: controlProps.autoOk || false,
- ampm: controlProps.ampm || false,
+ ampm: controlProps.ampm ? controlProps.ampm : undefined,
disablePast: controlProps.disablePast || false,
- invalidDateMessage: '',
- maxDateMessage: '',
- minDateMessage: '',
onChange: handleChange,
- fullWidth: true,
+ slotProps: {textField: {placeholder:placeholder}}
};
if (controlProps?.pickerType === 'Date') {
return (
-
-
-
+
);
} else if (controlProps?.pickerType === 'Time') {
return (
-
-
-
+
);
}
-
return (
-
-
-
+
);
}
InputDateTimePicker.propTypes = {
- value: PropTypes.string,
+ value: CustomPropTypes.className,
options: PropTypes.object,
onChange: PropTypes.func,
readonly: PropTypes.bool,
@@ -347,7 +335,7 @@ FormInputDateTimePicker.propTypes = {
className: CustomPropTypes.className,
helpMessage: PropTypes.string,
testcid: PropTypes.string,
- value: PropTypes.string,
+ value: CustomPropTypes.className,
controlProps: PropTypes.object,
change: PropTypes.func,
labelTooltip: PropTypes.string
@@ -394,6 +382,7 @@ export const InputText = forwardRef(({
ref={ref}
color="primary"
fullWidth
+ size={size}
margin={size == 'small' ? 'dense' : 'none'}
inputProps={{
id: cid,
diff --git a/web/pgadmin/static/js/components/KeyboardShortcuts.jsx b/web/pgadmin/static/js/components/KeyboardShortcuts.jsx
index d158a09e1..d54fbd457 100644
--- a/web/pgadmin/static/js/components/KeyboardShortcuts.jsx
+++ b/web/pgadmin/static/js/components/KeyboardShortcuts.jsx
@@ -8,7 +8,8 @@
//////////////////////////////////////////////////////////////
import _ from 'lodash';
-import { makeStyles, Grid, Typography, Box } from '@material-ui/core';
+import { Grid, Typography, Box } from '@mui/material';
+import { makeStyles } from '@mui/styles';
import React from 'react';
import { InputCheckbox, InputText } from './FormComponents';
import PropTypes from 'prop-types';
diff --git a/web/pgadmin/static/js/components/Loader.jsx b/web/pgadmin/static/js/components/Loader.jsx
index c18059bd5..b39d4f9a2 100644
--- a/web/pgadmin/static/js/components/Loader.jsx
+++ b/web/pgadmin/static/js/components/Loader.jsx
@@ -7,7 +7,8 @@
//
//////////////////////////////////////////////////////////////
-import { CircularProgress, Box, Typography, makeStyles } from '@material-ui/core';
+import { CircularProgress, Box, Typography } from '@mui/material';
+import { makeStyles } from '@mui/styles';
import React from 'react';
import PropTypes from 'prop-types';
diff --git a/web/pgadmin/static/js/components/Menu.jsx b/web/pgadmin/static/js/components/Menu.jsx
index cc086ae48..7bd2425ce 100644
--- a/web/pgadmin/static/js/components/Menu.jsx
+++ b/web/pgadmin/static/js/components/Menu.jsx
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@mui/styles';
import React, { useRef } from 'react';
-import CheckIcon from '@material-ui/icons/Check';
+import CheckIcon from '@mui/icons-material/Check';
import PropTypes from 'prop-types';
import {
@@ -37,6 +37,9 @@ const useStyles = makeStyles((theme)=>({
'&.szh-menu__item--active, &.szh-menu__item--hover': {
backgroundColor: theme.palette.primary.main,
color: theme.palette.primary.contrastText,
+ },
+ '&.szh-menu__item--disabled':{
+ color: theme.palette.text.muted,
}
}
},
diff --git a/web/pgadmin/static/js/components/ObjectBreadcrumbs.jsx b/web/pgadmin/static/js/components/ObjectBreadcrumbs.jsx
index 940a2e811..d572456a6 100644
--- a/web/pgadmin/static/js/components/ObjectBreadcrumbs.jsx
+++ b/web/pgadmin/static/js/components/ObjectBreadcrumbs.jsx
@@ -1,8 +1,9 @@
-import { Box, makeStyles } from '@material-ui/core';
+import { Box } from '@mui/material';
+import { makeStyles } from '@mui/styles';
import React, { useState, useEffect } from 'react';
-import AccountTreeIcon from '@material-ui/icons/AccountTree';
-import CommentIcon from '@material-ui/icons/Comment';
-import ArrowForwardIosRoundedIcon from '@material-ui/icons/ArrowForwardIosRounded';
+import AccountTreeIcon from '@mui/icons-material/AccountTree';
+import CommentIcon from '@mui/icons-material/Comment';
+import ArrowForwardIosRoundedIcon from '@mui/icons-material/ArrowForwardIosRounded';
import { usePgAdmin } from '../../../static/js/BrowserComponent';
import usePreferences from '../../../preferences/static/js/store';
diff --git a/web/pgadmin/static/js/components/PgChart/StreamingChart.jsx b/web/pgadmin/static/js/components/PgChart/StreamingChart.jsx
index d8df26cfc..cf41b06d9 100644
--- a/web/pgadmin/static/js/components/PgChart/StreamingChart.jsx
+++ b/web/pgadmin/static/js/components/PgChart/StreamingChart.jsx
@@ -3,7 +3,7 @@ import UplotReact from 'uplot-react';
import { useResizeDetector } from 'react-resize-detector';
import gettext from 'sources/gettext';
import PropTypes from 'prop-types';
-import { useTheme } from '@material-ui/styles';
+import { useTheme } from '@mui/styles';
function tooltipPlugin(refreshRate) {
let tooltipTopOffset = -20;
diff --git a/web/pgadmin/static/js/components/PgReactDataGrid.jsx b/web/pgadmin/static/js/components/PgReactDataGrid.jsx
index fa505daa7..8804c8b14 100644
--- a/web/pgadmin/static/js/components/PgReactDataGrid.jsx
+++ b/web/pgadmin/static/js/components/PgReactDataGrid.jsx
@@ -8,12 +8,13 @@
//////////////////////////////////////////////////////////////
import React, { useContext, useEffect } from 'react';
import ReactDataGrid, { Row } from 'react-data-grid';
-import { Box, makeStyles } from '@material-ui/core';
+import { Box } from '@mui/material';
+import { makeStyles } from '@mui/styles';
import clsx from 'clsx';
import PropTypes from 'prop-types';
import CustomPropTypes from '../custom_prop_types';
-import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';
-import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
+import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import gettext from 'sources/gettext';
const useStyles = makeStyles((theme)=>({
diff --git a/web/pgadmin/static/js/components/PgTable.jsx b/web/pgadmin/static/js/components/PgTable.jsx
index 42b144145..64a7b10f2 100644
--- a/web/pgadmin/static/js/components/PgTable.jsx
+++ b/web/pgadmin/static/js/components/PgTable.jsx
@@ -18,19 +18,19 @@ import {
useExpanded,
} from 'react-table';
import { VariableSizeList } from 'react-window';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
import clsx from 'clsx';
import PropTypes from 'prop-types';
import AutoSizer from 'react-virtualized-auto-sizer';
-import { Checkbox, Box, Switch } from '@material-ui/core';
+import { Checkbox, Box, Switch } from '@mui/material';
import { InputText } from './FormComponents';
import _ from 'lodash';
import gettext from 'sources/gettext';
import SchemaView from '../SchemaView';
import EmptyPanelMessage from './EmptyPanelMessage';
-import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';
-import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
-import ChevronRightIcon from '@material-ui/icons/ChevronRight';
+import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
import { PgIconButton } from './Buttons';
/* eslint-disable react/display-name */
diff --git a/web/pgadmin/static/js/components/PgTree/scss/styles.scss b/web/pgadmin/static/js/components/PgTree/scss/styles.scss
deleted file mode 100644
index b0d9aa3d3..000000000
--- a/web/pgadmin/static/js/components/PgTree/scss/styles.scss
+++ /dev/null
@@ -1,284 +0,0 @@
-.file-tree {
- font-family: $font-family-primary !important;
- font-size: $tree-font-size !important;
- background-color: $color-bg !important;
- display: inline-block;
- color: $tree-text-fg !important;
- position: relative;
-
- &,
- & * {
- box-sizing: border-box;
- }
-
- width: 100%;
-}
-
-.browser-tree {
- height: 100%;
-}
-
-.file-tree> {
- div {
- position: absolute !important;
- height: 100% !important;
- top: 0px !important;
-
- >div {
- scrollbar-gutter: stable;
- overflow: overlay !important;
- }
- }
-}
-
-.file-entry {
- font: inherit;
- text-align: left;
- display: flex;
- align-items: center;
- white-space: nowrap;
- padding: 2px 0;
- padding-left: 2px;
- cursor: default;
-
- &:before {
- content: '';
- background: $color-gray-light;
- position: absolute;
- width: 1px;
- height: 100%;
- // set box-shadow to show tree indent guide.
- box-shadow: -16px 0 0 0 $color-gray-light,
- -32px 0 0 0 $color-gray-light,
- -48px 0 0 0 $color-gray-light,
- -64px 0 0 0 $color-gray-light,
- -80px 0 0 0 $color-gray-light,
- -96px 0 0 0 $color-gray-light,
- -112px 0 0 0 $color-gray-light,
- -128px 0 0 0 $color-gray-light,
- -144px 0 0 0 $color-gray-light,
- -160px 0 0 0 $color-gray-light,
- -176px 0 0 0 $color-gray-light,
- -192px 0 0 0 $color-gray-light,
- -208px 0 0 0 $color-gray-light,
- -224px 0 0 0 $color-gray-light,
- -240px 0 0 0 $color-gray-light,
- -256px 0 0 0 $color-gray-light,
- -272px 0 0 0 $color-gray-light,
- -288px 0 0 0 $color-gray-light,
- -304px 0 0 0 $color-gray-light,
- -320px 0 0 0 $color-gray-light,
- -336px 0 0 0 $color-gray-light,
- -352px 0 0 0 $color-gray-light,
- -368px 0 0 0 $color-gray-light,
- -384px 0 0 0 $color-gray-light,
- -400px 0 0 0 $color-gray-light,
- -416px 0 0 0 $color-gray-light,
- -432px 0 0 0 $color-gray-light,
- -448px 0 0 0 $color-gray-light,
- -464px 0 0 0 $color-gray-light,
- -480px 0 0 0 $color-gray-light,
- -496px 0 0 0 $color-gray-light,
- -512px 0 0 0 $color-gray-light,
- -528px 0 0 0 $color-gray-light,
- -544px 0 0 0 $color-gray-light,
- -544px 0 0 0 $color-gray-light,
- -560px 0 0 0 $color-gray-light;
- }
-
- &.red {
- filter: saturate(.5);
-
- .file-icon:after {
- content: '';
- height: 8px;
- width: 8px;
- font-weight: bold;
- display: inline-block;
- background: #da2d38;
- position: relative;
- border-radius: 4px;
- left: -7px;
- box-sizing: border-box;
- }
- }
-
- &.magenta span.file-name {
- color: magenta;
- }
-
- &.big {
- font-family: monospace;
- }
-
- &:hover,
- &.pseudo-active {
- background-color: $tree-bg-hover !important;
- color: $tree-fg-hover !important;
-
- span.file-label {
- span.file-name {
- color: $tree-text-hover-fg;
- }
- }
- }
-
- &.active,
- &.prompt {
- background-color: $tree-bg-selected !important;
- border-color: $color-primary-light;
- border-right: $active-border !important;
- color: $tree-text-hover-fg !important;
-
- span.file-label {
- span.file-name {
- color: $tree-text-hover-fg;
- }
- }
- }
-
- &.dragging {
- background: #2a2a2a;
- }
-
- &.dragover {
- background-color: #313131;
- }
-
- i {
- display: inline-block;
- font: normal normal normal 18px/1 $font-family-icon;
- font-size: 18px;
- text-align: center;
- height: 21px !important;
- width: 20px !important;
- flex-shrink: 0;
-
- &:before {
- height: inherit;
- width: inherit;
- display: inline-block;
- }
-
- &.directory-toggle {
- &:before {
- background-position: 6px center !important;
- font-family: $font-family-icon;
- content: "\f054" !important;
- border-style: none;
- margin-left: 5px;
- font-weight: 900;
- right: 15px;
- top: 3px;
- font-size: 0.6rem;
- line-height: 2;
- }
-
- &.open:before {
- background-position: -14px center !important;
- font-family: $font-family-icon;
- content: "\f078" !important;
- border-style: none;
- margin-left: 5px;
- font-weight: 900;
- transform: none !important;
- }
-
- &.loading:before {
- content: '' !important;
- font-family: $font-family-icon;
- border-style: none;
- background: $loader-icon-small 0 0 no-repeat;
- background-position: center !important;
- }
- }
- }
-
- span.file-label {
- display: flex;
- align-items: center;
- padding: 0 2px 0 2px;
- border: 1px solid transparent;
- height: auto;
- white-space: normal;
- cursor: pointer !important;
- margin-left: 2px;
-
- &:hover,
- &.pseudo-active {
- color: $tree-fg-hover;
- }
- }
-
- &.prompt.new .file-label,
- &.file .file-label {
- margin-left: 18px;
- }
-
- span.file-name {
- font: inherit;
- flex-grow: 1;
- user-select: none;
- color: $tree-text-fg;
- margin-left: 3px;
- cursor: pointer !important;
- white-space: nowrap;
-
- &:hover,
- &.pseudo-active {
- color: $tree-fg-hover;
- }
- }
-}
-
-// Set the tree depth CSS from depth level 21 to 50 as in default CSS depth is set from 0 to 20.
-@for $i from 21 through 50 {
- .file-entry.depth-#{$i} {
- padding-left: 16px * ($i - 1);
- }
-}
-
-.children-count {
- margin-left: 3px;
-}
-
-::-webkit-scrollbar {
- width: 8px;
- height: 8px;
-
- &-track {
- background: transparent;
- }
-
- &-corner {
- background: transparent;
- }
-
- &-thumb {
- background: #3a3a3a;
-
- &:hover {
- background: #424242;
- }
- }
-}
-
-@for $i from 2 through 20 {
- .file-entry.depth-#{$i} {
- padding-left: 16px * ($i - 1);
- }
-}
-
-@keyframes pulsate-err-msg {
- 0% {
- color: #868686;
- }
-
- 50% {
- color: inherit;
- }
-
- 100% {
- color: #868686;
- }
-}
diff --git a/web/pgadmin/static/js/components/Privilege.jsx b/web/pgadmin/static/js/components/Privilege.jsx
index 91c7134ec..83727bd41 100644
--- a/web/pgadmin/static/js/components/Privilege.jsx
+++ b/web/pgadmin/static/js/components/Privilege.jsx
@@ -7,7 +7,7 @@
//
//////////////////////////////////////////////////////////////
-import { makeStyles } from '@material-ui/core';
+import { makeStyles } from '@mui/styles';
import _ from 'lodash';
import React from 'react';
import { InputCheckbox, InputText } from './FormComponents';
diff --git a/web/pgadmin/static/js/components/QueryThresholds.jsx b/web/pgadmin/static/js/components/QueryThresholds.jsx
index 4bf394bfc..b182acfbe 100644
--- a/web/pgadmin/static/js/components/QueryThresholds.jsx
+++ b/web/pgadmin/static/js/components/QueryThresholds.jsx
@@ -9,7 +9,8 @@
import gettext from 'sources/gettext';
import _ from 'lodash';
-import { FormGroup, makeStyles, Grid, Typography } from '@material-ui/core';
+import { FormGroup, Grid, Typography } from '@mui/material';
+import { makeStyles } from '@mui/styles';
import React from 'react';
import { InputText } from './FormComponents';
import PropTypes from 'prop-types';
diff --git a/web/pgadmin/static/js/components/ReactCodeMirror/components/Editor.jsx b/web/pgadmin/static/js/components/ReactCodeMirror/components/Editor.jsx
index bc8eae488..02b57f7b5 100644
--- a/web/pgadmin/static/js/components/ReactCodeMirror/components/Editor.jsx
+++ b/web/pgadmin/static/js/components/ReactCodeMirror/components/Editor.jsx
@@ -12,8 +12,8 @@ import ReactDOMServer from 'react-dom/server';
import PropTypes from 'prop-types';
import { checkTrojanSource } from '../../../utils';
import usePreferences from '../../../../../preferences/static/js/store';
-import KeyboardArrowRightRoundedIcon from '@material-ui/icons/KeyboardArrowRightRounded';
-import ExpandMoreRoundedIcon from '@material-ui/icons/ExpandMoreRounded';
+import KeyboardArrowRightRoundedIcon from '@mui/icons-material/KeyboardArrowRightRounded';
+import ExpandMoreRoundedIcon from '@mui/icons-material/ExpandMoreRounded';
// Codemirror packages
import {
@@ -134,7 +134,7 @@ const defaultExtensions = [
export default function Editor({
currEditor, name, value, options, onCursorActivity, onChange, readonly, disabled, autocomplete = false,
- breakpoint = false, onBreakPointChange, showActiveLine=false,
+ breakpoint = false, onBreakPointChange, showActiveLine=false,
keepHistory = true, cid, helpid, labelledBy, customKeyMap}) {
const editorContainerRef = useRef();
diff --git a/web/pgadmin/static/js/components/ReactCodeMirror/components/FindDialog.jsx b/web/pgadmin/static/js/components/ReactCodeMirror/components/FindDialog.jsx
index 43c24dcdc..4d1d4662e 100644
--- a/web/pgadmin/static/js/components/ReactCodeMirror/components/FindDialog.jsx
+++ b/web/pgadmin/static/js/components/ReactCodeMirror/components/FindDialog.jsx
@@ -10,14 +10,15 @@
import React, { useEffect, useRef, useState } from 'react';
import PropTypes from 'prop-types';
import gettext from 'sources/gettext';
-import { Box, InputAdornment, makeStyles } from '@material-ui/core';
+import { Box, InputAdornment } from '@mui/material';
+import { makeStyles } from '@mui/styles';
import { InputText } from '../../FormComponents';
import { PgIconButton } from '../../Buttons';
-import CloseIcon from '@material-ui/icons/CloseRounded';
-import ArrowDownwardRoundedIcon from '@material-ui/icons/ArrowDownwardRounded';
-import ArrowUpwardRoundedIcon from '@material-ui/icons/ArrowUpwardRounded';
-import SwapHorizRoundedIcon from '@material-ui/icons/SwapHorizRounded';
-import SwapCallsRoundedIcon from '@material-ui/icons/SwapCallsRounded';
+import CloseIcon from '@mui/icons-material/CloseRounded';
+import ArrowDownwardRoundedIcon from '@mui/icons-material/ArrowDownwardRounded';
+import ArrowUpwardRoundedIcon from '@mui/icons-material/ArrowUpwardRounded';
+import SwapHorizRoundedIcon from '@mui/icons-material/SwapHorizRounded';
+import SwapCallsRoundedIcon from '@mui/icons-material/SwapCallsRounded';
import { RegexIcon, FormatCaseIcon } from '../../ExternalIcon';
import {
diff --git a/web/pgadmin/static/js/components/ReactCodeMirror/components/GotoDialog.jsx b/web/pgadmin/static/js/components/ReactCodeMirror/components/GotoDialog.jsx
index 42d412f3e..2e2391b08 100644
--- a/web/pgadmin/static/js/components/ReactCodeMirror/components/GotoDialog.jsx
+++ b/web/pgadmin/static/js/components/ReactCodeMirror/components/GotoDialog.jsx
@@ -10,10 +10,11 @@
import React, { useEffect, useRef, useState } from 'react';
import PropTypes from 'prop-types';
import gettext from 'sources/gettext';
-import { Box, FormControl, makeStyles } from '@material-ui/core';
+import { Box, FormControl } from '@mui/material';
+import { makeStyles } from '@mui/styles';
import { InputText } from '../../FormComponents';
import { PgIconButton } from '../../Buttons';
-import CloseIcon from '@material-ui/icons/CloseRounded';
+import CloseIcon from '@mui/icons-material/CloseRounded';
const useStyles = makeStyles((theme)=>({
root: {
diff --git a/web/pgadmin/static/js/components/ReactCodeMirror/index.jsx b/web/pgadmin/static/js/components/ReactCodeMirror/index.jsx
index dc67f78c7..a4e56374d 100644
--- a/web/pgadmin/static/js/components/ReactCodeMirror/index.jsx
+++ b/web/pgadmin/static/js/components/ReactCodeMirror/index.jsx
@@ -8,9 +8,9 @@
//////////////////////////////////////////////////////////////
import React, { useCallback, useMemo, useRef, useState } from 'react';
-import { makeStyles } from '@material-ui/core';
-import FileCopyRoundedIcon from '@material-ui/icons/FileCopyRounded';
-import CheckRoundedIcon from '@material-ui/icons/CheckRounded';
+import { makeStyles } from '@mui/styles';
+import FileCopyRoundedIcon from '@mui/icons-material/FileCopyRounded';
+import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
import clsx from 'clsx';
import PropTypes from 'prop-types';
@@ -126,4 +126,4 @@ CodeMirror.propTypes = {
className: CustomPropTypes.className,
showCopyBtn: PropTypes.bool,
customKeyMap: PropTypes.array,
-};
\ No newline at end of file
+};
diff --git a/web/pgadmin/static/js/components/SelectRefresh.jsx b/web/pgadmin/static/js/components/SelectRefresh.jsx
index 766151e23..3d463133e 100644
--- a/web/pgadmin/static/js/components/SelectRefresh.jsx
+++ b/web/pgadmin/static/js/components/SelectRefresh.jsx
@@ -1,9 +1,9 @@
import React, { useState } from 'react';
-import { Box} from '@material-ui/core';
+import { Box} from '@mui/material';
import {InputSelect, FormInput} from './FormComponents';
import PropTypes from 'prop-types';
import CustomPropTypes from '../custom_prop_types';
-import RefreshIcon from '@material-ui/icons/Refresh';
+import RefreshIcon from '@mui/icons-material/Refresh';
import { PgIconButton } from './Buttons';
function ChildContent({cid, helpid, onRefreshClick, label, ...props}) {
diff --git a/web/pgadmin/static/js/components/SelectThemes.jsx b/web/pgadmin/static/js/components/SelectThemes.jsx
index 4d736be72..2a256f557 100644
--- a/web/pgadmin/static/js/components/SelectThemes.jsx
+++ b/web/pgadmin/static/js/components/SelectThemes.jsx
@@ -8,7 +8,8 @@
//////////////////////////////////////////////////////////////
import gettext from 'sources/gettext';
-import { makeStyles, Grid } from '@material-ui/core';
+import { Grid } from '@mui/material';
+import { makeStyles } from '@mui/styles';
import React, { useMemo } from 'react';
import {InputSelect } from './FormComponents';
import PropTypes from 'prop-types';
diff --git a/web/pgadmin/static/js/components/ShortcutTitle.jsx b/web/pgadmin/static/js/components/ShortcutTitle.jsx
index f19f592c9..51de378d4 100644
--- a/web/pgadmin/static/js/components/ShortcutTitle.jsx
+++ b/web/pgadmin/static/js/components/ShortcutTitle.jsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@mui/styles';
import PropTypes from 'prop-types';
import { isMac } from '../keyboard_shortcuts';
import _ from 'lodash';
diff --git a/web/pgadmin/static/js/components/TabPanel.jsx b/web/pgadmin/static/js/components/TabPanel.jsx
index b2ccd0ec3..de5043797 100644
--- a/web/pgadmin/static/js/components/TabPanel.jsx
+++ b/web/pgadmin/static/js/components/TabPanel.jsx
@@ -8,7 +8,8 @@
//////////////////////////////////////////////////////////////
import React from 'react';
-import {Box, makeStyles} from '@material-ui/core';
+import { Box } from '@mui/material';
+import { makeStyles } from '@mui/styles';
import clsx from 'clsx';
import PropTypes from 'prop-types';
import CustomPropTypes from '../custom_prop_types';
diff --git a/web/pgadmin/static/js/helpers/DataGridViewWithHeaderForm.jsx b/web/pgadmin/static/js/helpers/DataGridViewWithHeaderForm.jsx
index 8df57cec8..168a8d32b 100644
--- a/web/pgadmin/static/js/helpers/DataGridViewWithHeaderForm.jsx
+++ b/web/pgadmin/static/js/helpers/DataGridViewWithHeaderForm.jsx
@@ -8,7 +8,8 @@
//////////////////////////////////////////////////////////////
import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { Box, makeStyles } from '@material-ui/core';
+import { Box } from '@mui/material';
+import { makeStyles } from '@mui/styles';
import DataGridView, { DataGridHeader } from '../SchemaView/DataGridView';
import SchemaView, { SCHEMA_STATE_ACTIONS } from '../SchemaView';
import { DefaultButton } from '../components/Buttons';
diff --git a/web/pgadmin/static/js/helpers/Layout/LayoutIframeTab.jsx b/web/pgadmin/static/js/helpers/Layout/LayoutIframeTab.jsx
index b097cabf8..09a60f83b 100644
--- a/web/pgadmin/static/js/helpers/Layout/LayoutIframeTab.jsx
+++ b/web/pgadmin/static/js/helpers/Layout/LayoutIframeTab.jsx
@@ -1,4 +1,4 @@
-import { Portal } from '@material-ui/core';
+import { Portal } from '@mui/material';
import React, { useEffect, useRef, useState } from 'react';
import Frame from 'react-frame-component';
import PropTypes from 'prop-types';
diff --git a/web/pgadmin/static/js/helpers/Layout/index.jsx b/web/pgadmin/static/js/helpers/Layout/index.jsx
index fa23ba019..3efbafc19 100644
--- a/web/pgadmin/static/js/helpers/Layout/index.jsx
+++ b/web/pgadmin/static/js/helpers/Layout/index.jsx
@@ -5,12 +5,12 @@ import EventBus from '../EventBus';
import getApiInstance from '../../api_instance';
import url_for from 'sources/url_for';
import { PgIconButton } from '../../components/Buttons';
-import CloseIcon from '@material-ui/icons/CloseRounded';
+import CloseIcon from '@mui/icons-material/CloseRounded';
import gettext from 'sources/gettext';
import {ExpandDialogIcon, MinimizeDialogIcon } from '../../components/ExternalIcon';
-import { Box } from '@material-ui/core';
+import { Box } from '@mui/material';
import ErrorBoundary from '../ErrorBoundary';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import ContextMenu from '../../components/ContextMenu';
import { showRenameTab } from '../../Dialogs';
import usePreferences from '../../../../preferences/static/js/store';
@@ -49,7 +49,7 @@ function TabTitle({id, closable, defaultInternal}) {
return (
- {attrs.icon && }
+ {attrs.icon && }
{attrs.title}
{closable && } size="xs" noBorder onClick={()=>{
layoutDocker.close(id);
diff --git a/web/pgadmin/static/js/helpers/MainMoreToolbar.jsx b/web/pgadmin/static/js/helpers/MainMoreToolbar.jsx
index 91ebb746c..b85b6b8a1 100644
--- a/web/pgadmin/static/js/helpers/MainMoreToolbar.jsx
+++ b/web/pgadmin/static/js/helpers/MainMoreToolbar.jsx
@@ -1,9 +1,9 @@
import React from 'react';
-import { Box } from '@material-ui/core';
+import { Box } from '@mui/material';
import { LAYOUT_EVENTS, LayoutDockerContext } from './Layout';
import { PgIconButton } from '../components/Buttons';
import gettext from 'sources/gettext';
-import MoreVertIcon from '@material-ui/icons/MoreVert';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
import { BROWSER_PANELS } from '../../../browser/static/js/constants';
import { defaultTabsData } from '../BrowserComponent';
diff --git a/web/pgadmin/static/js/helpers/ModalProvider.jsx b/web/pgadmin/static/js/helpers/ModalProvider.jsx
index ff0912a45..a9f5e898f 100644
--- a/web/pgadmin/static/js/helpers/ModalProvider.jsx
+++ b/web/pgadmin/static/js/helpers/ModalProvider.jsx
@@ -7,18 +7,19 @@
//
//////////////////////////////////////////////////////////////
-import { Box, Dialog, DialogContent, DialogTitle, makeStyles, Paper } from '@material-ui/core';
+import { Box, Dialog, DialogContent, DialogTitle, Paper } from '@mui/material';
+import { makeStyles } from '@mui/styles';
import React, { useState, useMemo } from 'react';
import clsx from 'clsx';
import { getEpoch } from 'sources/utils';
import { DefaultButton, PgIconButton, PrimaryButton } from '../components/Buttons';
import Draggable from 'react-draggable';
-import CloseIcon from '@material-ui/icons/CloseRounded';
+import CloseIcon from '@mui/icons-material/CloseRounded';
import CustomPropTypes from '../custom_prop_types';
import PropTypes from 'prop-types';
import gettext from 'sources/gettext';
import HTMLReactParser from 'html-react-parser';
-import CheckRoundedIcon from '@material-ui/icons/CheckRounded';
+import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
import { Rnd } from 'react-rnd';
import { ExpandDialogIcon, MinimizeDialogIcon } from '../components/ExternalIcon';
diff --git a/web/pgadmin/static/js/helpers/Notifier.jsx b/web/pgadmin/static/js/helpers/Notifier.jsx
index d5801d64c..716615bed 100644
--- a/web/pgadmin/static/js/helpers/Notifier.jsx
+++ b/web/pgadmin/static/js/helpers/Notifier.jsx
@@ -8,12 +8,12 @@
//////////////////////////////////////////////////////////////
import { SnackbarProvider, SnackbarContent } from 'notistack';
-import { makeStyles } from '@material-ui/core/styles';
-import {Box} from '@material-ui/core';
-import CloseIcon from '@material-ui/icons/CloseRounded';
+import { makeStyles } from '@mui/styles';
+import {Box} from '@mui/material';
+import CloseIcon from '@mui/icons-material/CloseRounded';
import { DefaultButton, PrimaryButton } from '../components/Buttons';
import HTMLReactParser from 'html-react-parser';
-import CheckRoundedIcon from '@material-ui/icons/CheckRounded';
+import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
import PropTypes from 'prop-types';
import React, { useEffect } from 'react';
import { NotifierMessage, MESSAGE_TYPE } from '../components/FormComponents';
@@ -26,7 +26,7 @@ import { parseApiError } from '../api_instance';
const AUTO_HIDE_DURATION = 3000; // In milliseconds
export const FinalNotifyContent = React.forwardRef(({children}, ref) => {
- return {children};
+ return {children};
});
FinalNotifyContent.displayName = 'FinalNotifyContent';
FinalNotifyContent.propTypes = {
diff --git a/web/pgadmin/static/js/helpers/ObjectExplorerToolbar.jsx b/web/pgadmin/static/js/helpers/ObjectExplorerToolbar.jsx
index 91c0ddcfe..236887894 100644
--- a/web/pgadmin/static/js/helpers/ObjectExplorerToolbar.jsx
+++ b/web/pgadmin/static/js/helpers/ObjectExplorerToolbar.jsx
@@ -1,8 +1,8 @@
import React, { useEffect, useState } from 'react';
import { usePgAdmin } from '../BrowserComponent';
-import { Box } from '@material-ui/core';
+import { Box } from '@mui/material';
import { QueryToolIcon, RowFilterIcon, TerminalIcon, ViewDataIcon } from '../components/ExternalIcon';
-import SearchOutlinedIcon from '@material-ui/icons/SearchOutlined';
+import SearchOutlinedIcon from '@mui/icons-material/SearchOutlined';
import { PgButtonGroup, PgIconButton } from '../components/Buttons';
import _ from 'lodash';
import PropTypes from 'prop-types';
@@ -58,7 +58,7 @@ export default function ObjectExplorerToolbar() {
}, []);
return (
-
+
} menuItem={menus['query_tool']} />
} menuItem={menus['view_all_rows_context']} />
diff --git a/web/pgadmin/static/js/helpers/wizard/Wizard.jsx b/web/pgadmin/static/js/helpers/wizard/Wizard.jsx
index 532073ab4..5de2a0dd8 100644
--- a/web/pgadmin/static/js/helpers/wizard/Wizard.jsx
+++ b/web/pgadmin/static/js/helpers/wizard/Wizard.jsx
@@ -7,17 +7,17 @@
//
//////////////////////////////////////////////////////////////
import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
import clsx from 'clsx';
-import FastForwardIcon from '@material-ui/icons/FastForward';
-import FastRewindIcon from '@material-ui/icons/FastRewind';
-import ChevronRightIcon from '@material-ui/icons/ChevronRight';
-import DoneIcon from '@material-ui/icons/Done';
-import HelpIcon from '@material-ui/icons/HelpRounded';
-import CheckIcon from '@material-ui/icons/Check';
+import FastForwardIcon from '@mui/icons-material/FastForward';
+import FastRewindIcon from '@mui/icons-material/FastRewind';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import DoneIcon from '@mui/icons-material/Done';
+import HelpIcon from '@mui/icons-material/HelpRounded';
+import CheckIcon from '@mui/icons-material/Check';
import { DefaultButton, PrimaryButton, PgIconButton } from '../../../../static/js/components/Buttons';
import PropTypes from 'prop-types';
-import { Box } from '@material-ui/core';
+import { Box } from '@mui/material';
import gettext from 'sources/gettext';
import Loader from 'sources/components/Loader';
diff --git a/web/pgadmin/static/scss/_jsoneditor.overrides.scss b/web/pgadmin/static/scss/_jsoneditor.overrides.scss
deleted file mode 100644
index b32c5aeb2..000000000
--- a/web/pgadmin/static/scss/_jsoneditor.overrides.scss
+++ /dev/null
@@ -1,465 +0,0 @@
-.jsoneditor-menu a.jsoneditor-poweredBy {
- visibility: hidden;
-}
-
-.jsoneditor {
- border-color: $border-color;
-}
-
-/* Menu Bar*/
-.jsoneditor-menu {
- background: $color-gray-light;
- border-bottom: 1px solid $border-color;
-}
-
-/* Menu Bar buttons*/
-.jsoneditor-menu>button {
- font-family: $font-family-icon !important;
- font-size: $navbar-font-size !important;
- line-height: $line-height-base !important;
- background-image:none !important;
- border-radius: $border-radius;
- border-color:$color-gray;
- opacity: 1;
- background-color:$btn-primary-icon-bg;
- color: $color-fg;
- font-weight: normal !important;
-}
-
-/* Navigation Bar */
-.jsoneditor-navigation-bar{
- font-family: $font-family-primary !important;
- background-color: $color-bg;
- color: $color-fg;
- border-bottom: 1px solid $color-gray;
-}
-
-/* Over rides icons */
-.jsoneditor-menu>button.jsoneditor-expand-all::before{
- content: "\f424";
- font-weight: 600 !important;
-}
-
-.jsoneditor-menu>button.jsoneditor-collapse-all::before{
- content: "\f422";
- font-weight: 600 !important;
-}
-
-.jsoneditor-menu>button.jsoneditor-redo::before {
- content: "\f01e";
- font-weight: 600 !important;
-}
-
-.jsoneditor-menu>button.jsoneditor-undo::before {
- content: "\f0e2";
- font-weight: 600 !important;
-}
-
-.jsoneditor-menu>button.jsoneditor-format::before {
- content: "\f03c";
- font-weight: 600 !important;
-}
-
-.jsoneditor-menu>button.jsoneditor-compact::before {
- content: "\f066";
- font-weight: 600 !important;
-}
-
-.jsoneditor-menu>button.jsoneditor-sort::before {
- content: "\f160";
- font-weight: 600 !important;
-}
-
-.jsoneditor-menu>button.jsoneditor-repair::before {
- content: "\f0ad";
- font-weight: 600 !important;
-}
-
-.jsoneditor-menu>button.jsoneditor-transform::before {
- content: "\f0b0";
- font-weight: 600 !important;
-}
-
-/* Undo redo buttons */
-.jsoneditor-menu>.jsoneditor-modes>button:disabled,
-.jsoneditor-menu>button:disabled {
- color:$color-fg !important;
- opacity: $btn-disabled-opacity;
- border: thin solid;
- border-color:$color-gray;
- border-radius: $border-radius;
- background-color:$btn-primary-icon-bg !important;
-}
-
-/* Mode drop-down */
-.jsoneditor-menu>.jsoneditor-modes>button:active,
-.jsoneditor-menu>.jsoneditor-modes>button:focus,
-.jsoneditor-menu>.jsoneditor-modes>button,{
- font-family: $font-family-primary !important;
- font-size: $font-size-base !important;
- line-height: $line-height-base !important;
- background-image:none !important;
- border-radius: $border-radius;
- border-color:$color-gray;
- opacity: 1;
- background-color:$btn-primary-icon-bg;
- color: $color-fg;
- font-weight: normal !important;
-}
-
-/* Mode drop-down options */
-.jsoneditor-contextmenu .jsoneditor-menu button,
-.jsoneditor-contextmenu .jsoneditor-separator {
- font-family: $font-family-primary !important;
- font-size: $font-size-base !important;
- background-color: $color-bg !important;
- color: $color-fg !important;
- border: none;
-}
-
-/* Drop-down hovered*/
-.jsoneditor-contextmenu .jsoneditor-menu li button:hover {
- background-color: $btn-primary-hover-bg !important;
- border-color: $btn-primary-border-hover-bg !important;
- color: $btn-primary-color !important;
-}
-
-/* Drop-down selected*/
-.jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected,
-.jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected:focus,
-.jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected:hover {
- background-color: $btn-primary-hover-bg !important;
- border-color: $btn-primary-border-hover-bg !important;
- color: $btn-primary-color !important;
-}
-
-/* Search Box*/
-.jsoneditor-frame,
-.jsoneditor-search input{
- color: $input-color;
- background-color: $input-bg;
-}
-
-/* Set expand icon to none*/
-div.jsoneditor-tree button.jsoneditor-button:focus {
- background-color: $color-bg !important ;
- outline: none;
-}
-
-/* Search Box results */
-.jsoneditor-results {
- color: $color-fg;
-}
-
-/* Ace editor Setting */
-/* Ace editor numbers */
-.ace-jsoneditor .ace_gutter {
- background-color:$color-gray-light;
- color:$color-fg;
-}
-/* Ace editor code background */
-.ace-jsoneditor .ace_scroller {
- background-color: $color-bg;
-}
-
-/* Ace editor code background readonly*/
-#pg-json-editor[readonly] .ace-jsoneditor .ace_scroller{
- background-color: $color-gray-light;
- opacity: $btn-disabled-opacity;
-}
-
-/* Ace editor hide indent guide */
-.ace-jsoneditor .ace_indent-guide {
- background: none;
-}
-/* Ace editor Key names */
-.ace-jsoneditor .ace_variable {
- color: $color-fg !important;
-}
-
-/* Ace editorfonts */
-.ace_editor,
-.ace-jsoneditor *{
- font-family: $font-family-editor !important;
- font-size: $font-size-base !important;
- line-height: $line-height-base !important;
- color: $color-fg;
-}
-.ace-jsoneditor.ace_editor {
- font-family: $font-family-editor !important;
- font-size: $font-size-base !important;
- line-height: $line-height-base !important;
- color: $color-fg;
- background-color:$color-bg !important;
-}
-
-/* /* font setting all other mode */
-/* form, tree, code, preview, schema-error */
-div.jsoneditor-default,
-div.jsoneditor-field,
-div.jsoneditor-value,
-div.jsoneditor textarea,
-div.jsoneditor td,
-div.jsoneditor-readonly,
-.jsoneditor-popover,
-div.jsoneditor-tree{
- font-family: $font-family-primary !important;
- font-size: $font-size-base !important;
- line-height: $line-height-base !important;
- color: $color-fg;
- background-color:$color-bg;
-}
-
-/* read only mode */
-#pg-json-editor[readonly] {
- & div.jsoneditor-tree,
- & div.jsoneditor td,
- & div.jsoneditor-readonly,
- & div.jsoneditor-value,
- & div.jsoneditor-field,
- & div.jsoneditor-tree button.jsoneditor-button:focus {
- background-color: $color-gray-light !important;
- opacity: 0.85;
- }
-}
-
-div.jsoneditor td.jsoneditor-tree {
- vertical-align: middle;
-}
-
-pre.jsoneditor-preview{
- background-color: $color-gray-lighter !important;
- opacity: 0.8;
- color: $color-fg;
-}
-
-
-/* Hilight selected values in tree/form modes */
-div.jsoneditor-field.jsoneditor-highlight,
-div.jsoneditor-field[contenteditable=true]:focus,
-div.jsoneditor-field[contenteditable=true]:hover,
-div.jsoneditor-value.jsoneditor-highlight,
-div.jsoneditor-value[contenteditable=true]:focus,
-div.jsoneditor-value[contenteditable=true]:hover
-{
- background-color: $sql-editor-selection-bg;
- border: 1px solid $sql-editor-selection-bg;
- border-radius: $border-radius;
-}
-
-/* Hi-light line in code */
-.ace-jsoneditor .ace_marker-layer .ace_active-line {
- background-color: $sql-editor-selection-bg;
- border: 0;
- border-radius: $border-radius;
-}
-
-.ace-jsoneditor .ace_gutter-active-line {
- background-color:$color-gray-light;
-}
-
-.ace-jsoneditor .ace_marker-layer .ace_selected-word {
- border: 1px solid $color-primary-light;
-}
-
-
-.ace-jsoneditor .ace_marker-layer .ace_selection {
- background: $color-primary-light;
-}
-
-/* Nested DD*/
-.jsoneditor-contextmenu .jsoneditor-icon {
- background-image:none;
-}
-
-.jsoneditor-contextmenu .jsoneditor-text {
- padding:4px 4px 4px 5px;
-}
-
-
-.jsoneditor-contextmenu .jsoneditor-menu{
- border: 1px solid $border-color;
- background: $color-bg !important;
- color: $color-fg !important;
-}
-
-
-.jsoneditor-contextmenu .jsoneditor-menu button.jsoneditor-expand, {
- height:0px;
- background-color: $color-gray-light !important;
-}
-
-.jsoneditor-contextmenu .jsoneditor-menu li ul {
- padding: 0;
- border: 1px solid $border-color;
-}
-
-.jsoneditor-contextmenu .jsoneditor-separator {
- height: 0;
- border-top: 1px solid $border-color;
- padding-top: 5px;
- margin-top: 5px;
-}
-
-/* Status Bar */
-.jsoneditor-statusbar {
- background-color: $color-gray-light !important;
- color: $color-primary-light-fg !important;
- border-top: 1px solid $border-color;
-}
-
-/* Validation Bar */
-.jsoneditor .jsoneditor-validation-errors {
- background-color:$sql-history-error-bg !important;
- color:$color-fg;
- border: 1px solid $color-danger;
-}
-
-.jsoneditor .jsoneditor-text-errors {
- width: 100%;
- border-collapse: collapse;
- border-top: 1px solid $color-gray;
-}
-
-
-.jsoneditor .jsoneditor-text-errors tr,
-.jsoneditor .jsoneditor-text-errors td,
-.jsoneditor .jsoneditor-text-errors td pre,
-.jsoneditor .jsoneditor-text-errors tr.parse-error {
- background-color: $color-danger-lighter !important;
- color:$color-fg;
-}
-
-
-/* Transform & sort */
-/* Header */
-.jsoneditor-modal .pico-modal-header {
- font-family: $font-family-primary !important;
- font-size: $font-size-base !important;
- font-weight: bold;
- background-color: $alert-header-bg !important;
- color: $alert-header-fg;
-}
-
-/* Body */
-.pico-content{
- background-color: $color-gray-light !important;
-}
-
-/* Disable links */
-.jsoneditor-modal a {
- color: $color-fg !important;
-}
-
-/* Replace help text */
-.pico-modal-contents p{
- visibility: hidden;
- display: flex;
- margin-bottom: -1rem;
-}
-
-.pico-modal-contents p::after{
- visibility: visible;
- position: absolute;
- content: "Enter a JMESPath query to filter, sort, or transform the JSON data.";
- display: block;
-}
-
-/* Fields */
-.jsoneditor-modal,
-.jsoneditor-modal #query,
-.jsoneditor-modal input,
-.jsoneditor-modal input[type=text],
-.jsoneditor-modal input[type=text]:focus,
-.jsoneditor-modal option,
-.jsoneditor-modal select,
-.jsoneditor-modal table td,
-.jsoneditor-modal table th,
-.jsoneditor-modal textarea, {
- color: $color-fg !important;
- background-color: $color-bg !important;
- font-size: $font-size-base !important;
- font-family: $font-family-primary !important;
- padding: 4px;
-}
-
-.jsoneditor-modal option{
- background-color: $color-primary-light !important;
- border: 1px solid $color-primary-light !important;
- border-radius: $border-radius !important;
- color:$color-fg !important;
-}
-
-/* Ascending descending buttons */
-.jsoneditor-modal .jsoneditor-button-group.jsoneditor-button-group-value-asc input.jsoneditor-button-asc,
-.jsoneditor-modal .jsoneditor-button-group.jsoneditor-button-group-value-desc input.jsoneditor-button-desc {
- //color: $color-bg !important;
- background-color: $color-primary !important;
- //border-color: $color-primary !important;
- border-color: $color-primary;
- color: $btn-primary-color !important;
-}
-
-
-.jsoneditor-modal input[type=button]{
- color: $color-fg;
- background-color: $color-bg;
-}
-
-/* OK Button */
-.jsoneditor-modal input[type=submit] {
- color: $btn-primary-color !important;
- border-color: $color-primary !important;
- background-color: $color-primary !important;
- text-transform: uppercase;
-}
-
-.jsoneditor-modal .jsoneditor-jmespath-label {
- color: $color-fg;
- font-weight: bold;
-}
-.selectr-option,
-.selectr-options-container {
- color: $color-fg;
- background-color: $color-bg;
-}
-
-.selectr-option.active,
-.selectr-option.selected{
- color: $btn-primary-color !important;
- background-color: $color-primary !important;
- border-color: $color-primary;
-}
-
-.jsoneditor-modal .selectr-selected{
- color: $color-fg;
- background-color: $color-bg;
-}
-
-.jsoneditor-modal .selectr-selected .selectr-tag {
- border: 1px solid $color-primary;
- color: $btn-primary-color !important;
- background-color: $color-primary !important;
- border-color: $color-primary;
-}
-
-.jsoneditor-modal .selectr-selected .selectr-tag-remove::before{
- color: $color-primary !important;
-}
-
-/* Update String. Key colors code mode */
-.ace_variable {color: $color-editor-variable !important;}
-
-.ace_string {color: $color-editor-string !important;}
-
-.ace_constant.ace_numeric {color:$color-editor-number !important;}
-
-/* Update String. Key colors tree/form mode*/
-div.jsoneditor-value.jsoneditor-string {
- color: $color-editor-string !important;
-}
-
-div.jsoneditor-value.jsoneditor-number {
- color:$color-editor-number !important;
-}
-
diff --git a/web/pgadmin/static/scss/_pgadmin.style.scss b/web/pgadmin/static/scss/_pgadmin.style.scss
deleted file mode 100644
index 96198ee69..000000000
--- a/web/pgadmin/static/scss/_pgadmin.style.scss
+++ /dev/null
@@ -1,967 +0,0 @@
-.control-label {
- margin: 0px;
- display: inline-block;
- vertical-align: middle;
- min-height: 28px;
-}
-
-.pg-panel-properties-message {
- margin-top: 50px !important;
-}
-.show_progress {
- cursor: progress;
-}
-.user-language {
- margin-top: 10px;
-}
-.user-language label{
- float:left;
- font-weight: normal !important;
-}
-.user-language div{
- float:left;
-}
-
-.Resizer {
- background: $color-gray-lighter;
- z-index: 1;
- -moz-box-sizing: border-box;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- -moz-background-clip: padding;
- -webkit-background-clip: padding;
- background-clip: padding-box;
-}
-
-.Resizer.horizontal {
- width: 100%;
- height: $panel-border-width;
- cursor: ew-resize;
- background-color: $panel-border-color;
-}
-
-
-.Resizer.vertical {
- width: $panel-border-width;
- cursor: ew-resize;
- background-color: $panel-border-color;
-}
-
-.Resizer.disabled {
- cursor: not-allowed;
-}
-
-.Resizer.disabled:hover {
- border-color: transparent;
-}
-
-.pg-icon {
- width: $navbar-height*3;
- height: 100%;
- /*
- * Using the SVG postgresql logo, modified to set the background color as #FFF
- * https://wiki.postgresql.org/images/9/90/PostgreSQL_logo.1color_blue.svg
- * background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 42 42' style='enable-background:new 0 0 42 42;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bstroke:%23000000;stroke-width:3.3022;%7D .st1%7Bfill:%23336791;%7D .st2%7Bfill:none;stroke:%23FFFFFF;stroke-width:1.1007;stroke-linecap:round;stroke-linejoin:round;%7D .st3%7Bfill:none;stroke:%23FFFFFF;stroke-width:1.1007;stroke-linecap:round;stroke-linejoin:bevel;%7D .st4%7Bfill:%23FFFFFF;stroke:%23FFFFFF;stroke-width:0.3669;%7D .st5%7Bfill:%23FFFFFF;stroke:%23FFFFFF;stroke-width:0.1835;%7D .st6%7Bfill:none;stroke:%23FFFFFF;stroke-width:0.2649;stroke-linecap:round;stroke-linejoin:round;%7D%0A%3C/style%3E%3Cg id='orginal'%3E%3C/g%3E%3Cg id='Layer_x0020_3'%3E%3Cpath class='st0' d='M31.3,30c0.3-2.1,0.2-2.4,1.7-2.1l0.4,0c1.2,0.1,2.8-0.2,3.7-0.6c2-0.9,3.1-2.4,1.2-2 c-4.4,0.9-4.7-0.6-4.7-0.6c4.7-7,6.7-15.8,5-18c-4.6-5.9-12.6-3.1-12.7-3l0,0c-0.9-0.2-1.9-0.3-3-0.3c-2,0-3.5,0.5-4.7,1.4 c0,0-14.3-5.9-13.6,7.4c0.1,2.8,4,21.3,8.7,15.7c1.7-2,3.3-3.8,3.3-3.8c0.8,0.5,1.8,0.8,2.8,0.7l0.1-0.1c0,0.3,0,0.5,0,0.8 c-1.2,1.3-0.8,1.6-3.2,2.1c-2.4,0.5-1,1.4-0.1,1.6c1.1,0.3,3.7,0.7,5.5-1.8l-0.1,0.3c0.5,0.4,0.4,2.7,0.5,4.4 c0.1,1.7,0.2,3.2,0.5,4.1c0.3,0.9,0.7,3.3,3.9,2.6C29.1,38.3,31.1,37.5,31.3,30'/%3E%3Cpath class='st1' d='M38.3,25.3c-4.4,0.9-4.7-0.6-4.7-0.6c4.7-7,6.7-15.8,5-18c-4.6-5.9-12.6-3.1-12.7-3l0,0 c-0.9-0.2-1.9-0.3-3-0.3c-2,0-3.5,0.5-4.7,1.4c0,0-14.3-5.9-13.6,7.4c0.1,2.8,4,21.3,8.7,15.7c1.7-2,3.3-3.8,3.3-3.8 c0.8,0.5,1.8,0.8,2.8,0.7l0.1-0.1c0,0.3,0,0.5,0,0.8c-1.2,1.3-0.8,1.6-3.2,2.1c-2.4,0.5-1,1.4-0.1,1.6c1.1,0.3,3.7,0.7,5.5-1.8 l-0.1,0.3c0.5,0.4,0.8,2.4,0.7,4.3c-0.1,1.9-0.1,3.2,0.3,4.2c0.4,1,0.7,3.3,3.9,2.6c2.6-0.6,4-2,4.2-4.5c0.1-1.7,0.4-1.5,0.5-3 l0.2-0.7c0.3-2.3,0-3.1,1.7-2.8l0.4,0c1.2,0.1,2.8-0.2,3.7-0.6C39,26.4,40.2,24.9,38.3,25.3L38.3,25.3z'/%3E%3Cpath class='st2' d='M21.8,26.6c-0.1,4.4,0,8.8,0.5,9.8c0.4,1.1,1.3,3.2,4.5,2.5c2.6-0.6,3.6-1.7,4-4.1c0.3-1.8,0.9-6.7,1-7.7'/%3E%3Cpath class='st2' d='M18,4.7c0,0-14.3-5.8-13.6,7.4c0.1,2.8,4,21.3,8.7,15.7c1.7-2,3.2-3.7,3.2-3.7'/%3E%3Cpath class='st2' d='M25.7,3.6c-0.5,0.2,7.9-3.1,12.7,3c1.7,2.2-0.3,11-5,18'/%3E%3Cpath class='st3' d='M33.5,24.6c0,0,0.3,1.5,4.7,0.6c1.9-0.4,0.8,1.1-1.2,2c-1.6,0.8-5.3,0.9-5.3-0.1 C31.6,24.5,33.6,25.3,33.5,24.6c-0.1-0.6-1.1-1.2-1.7-2.7c-0.5-1.3-7.3-11.2,1.9-9.7c0.3-0.1-2.4-8.7-11-8.9 c-8.6-0.1-8.3,10.6-8.3,10.6'/%3E%3Cpath class='st2' d='M19.4,25.6c-1.2,1.3-0.8,1.6-3.2,2.1c-2.4,0.5-1,1.4-0.1,1.6c1.1,0.3,3.7,0.7,5.5-1.8c0.5-0.8,0-2-0.7-2.3 C20.5,25.1,20,24.9,19.4,25.6L19.4,25.6z'/%3E%3Cpath class='st2' d='M19.3,25.5c-0.1-0.8,0.3-1.7,0.7-2.8c0.6-1.6,2-3.3,0.9-8.5c-0.8-3.9-6.5-0.8-6.5-0.3c0,0.5,0.3,2.7-0.1,5.2 c-0.5,3.3,2.1,6,5,5.7'/%3E%3Cpath class='st4' d='M18,13.8c0,0.2,0.3,0.7,0.8,0.7c0.5,0.1,0.9-0.3,0.9-0.5c0-0.2-0.3-0.4-0.8-0.4C18.4,13.6,18,13.7,18,13.8 L18,13.8z'/%3E%3Cpath class='st5' d='M32,13.5c0,0.2-0.3,0.7-0.8,0.7c-0.5,0.1-0.9-0.3-0.9-0.5c0-0.2,0.3-0.4,0.8-0.4C31.6,13.2,32,13.3,32,13.5 L32,13.5z'/%3E%3Cpath class='st2' d='M33.7,12.2c0.1,1.4-0.3,2.4-0.4,3.9c-0.1,2.2,1,4.7-0.6,7.2'/%3E%3Cpath class='st6' d='M2.7,6.6'/%3E%3C/g%3E%3C/svg%3E%0A") 0 0 no-repeat;
- */
- background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDUgNTAiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojZmZmO30uY2xzLTJ7ZmlsbDojMzI2ODkzO308L3N0eWxlPjwvZGVmcz48dGl0bGU+cGdBZG1pbjwvdGl0bGU+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNNTguOTQsNDEuNGEyLjQ4LDIuNDgsMCwwLDEtMi4yNy0zLjQ5TDY0LDIxLjI5VjZhNiw2LDAsMCwwLTYtNkg2QTYsNiwwLDAsMCwwLDZWNDRhNiw2LDAsMCwwLDYsNkg1OGE2LDYsMCwwLDAsNi02VjQxLjRaIi8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNMjkuMjUsMzAuMTdhMTMuMTMsMTMuMTMsMCwwLDEtMS44Mi02LjkzLDEzLDEzLDAsMCwxLDEuODItNi44OCwxMi41LDEyLjUsMCwwLDEsMS40OC0xLjk1LDEwLjQ0LDEwLjQ0LDAsMCwwLTMuMjUtMi44OSwxMS4xNiwxMS4xNiwwLDAsMC01LjY1LTEuNDVxLTQuNDgsMC02LjcyLDIuNjRWMTAuNDRINy41MVY0MC4zNmExLDEsMCwwLDAsMSwxaDZhMSwxLDAsMCwwLDEtMVYzMS4xOWE4LjQ3LDguNDcsMCwwLDAsNi4zNCwyLjQsMTEuMjYsMTEuMjYsMCwwLDAsNS42NS0xLjQ1LDEwLjUzLDEwLjUzLDAsMCwwLDIuMDYtMS41NkMyOS40NCwzMC40NCwyOS4zNCwzMC4zMSwyOS4yNSwzMC4xN1pNMjMuNiwyNS44YTQuNTIsNC41MiwwLDAsMS0zLjQ1LDEuNDQsNC40OCw0LjQ4LDAsMCwxLTMuNDQtMS40NCw1LjYsNS42LDAsMCwxLTEuMzUtNCw1LjU5LDUuNTksMCwwLDEsMS4zNS00LDQuNDYsNC40NiwwLDAsMSwzLjQ0LTEuNDUsNC40OSw0LjQ5LDAsMCwxLDMuNDUsMS40NSw1LjYzLDUuNjMsMCwwLDEsMS4zNCw0QTUuNjQsNS42NCwwLDAsMSwyMy42LDI1LjhaIi8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNNTYuNDksMTIuNjNWMzEuMjRxMCw2LjM1LTMuNDQsOS41MXQtOS45MiwzLjE3YTI1LjQyLDI1LjQyLDAsMCwxLTYuMy0uNzUsMTUsMTUsMCwwLDEtNS0yLjIzbDIuODktNS41OWExMC4xNywxMC4xNywwLDAsMCwzLjUxLDEuNzksMTQuMzcsMTQuMzcsMCwwLDAsNC4xOC42NUE2LjUzLDYuNTMsMCwwLDAsNDcsMzYuNGE1LjM3LDUuMzcsMCwwLDAsMS40Ny00LjExdi0uNzZjLTEuNTQsMS44LTMuNzksMi42OS02Ljc2LDIuNjlhMTEuNywxMS43LDAsMCwxLTUuNTktMS4zNkExMC4zNywxMC4zNywwLDAsMSwzMi4wOSwyOWExMC44OSwxMC44OSwwLDAsMS0xLjUxLTUuNzcsMTAuODYsMTAuODYsMCwwLDEsMS41MS01Ljc0LDEwLjQyLDEwLjQyLDAsMCwxLDQuMDctMy44NiwxMS43MSwxMS43MSwwLDAsMSw1LjU5LTEuMzdjMy4yNSwwLDUuNjMsMS4wNiw3LjE0LDMuMTVWMTIuNjNabS05LjMsMTMuOTVhNC40LDQuNCwwLDAsMCwxLjQtMy4zNiw0LjM0LDQuMzQsMCwwLDAtMS4zOC0zLjM0LDUuNjUsNS42NSwwLDAsMC03LjE2LDAsNC4zLDQuMywwLDAsMC0xLjQxLDMuMzQsNC4zNSw0LjM1LDAsMCwwLDEuNDMsMy4zNiw1LjA4LDUuMDgsMCwwLDAsMy41NywxLjNBNSw1LDAsMCwwLDQ3LjE5LDI2LjU4WiIvPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTgzLjQzLDMyLjg5SDcxbC0yLDUuMDlhMSwxLDAsMCwxLS45My42Mkg2MS43M2ExLDEsMCwwLDEtLjkxLTEuNEw3Mi45MSw5LjhhMSwxLDAsMCwxLC45Mi0uNmg2Ljg5YTEsMSwwLDAsMSwuOTEuNkw5My43NywzNy4yYTEsMSwwLDAsMS0uOTIsMS40SDg2LjQxYTEsMSwwLDAsMS0uOTMtLjYyWk04MSwyNi43NmwtMy43OC05LjQxLTMuNzgsOS40MVoiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0xMjAuNDQsOC40NFYzNy42YTEsMSwwLDAsMS0xLDFoLTUuNmExLDEsMCwwLDEtMS0xVjM2LjMzUTExMC42MiwzOSwxMDYuMTYsMzlhMTEuMjksMTEuMjksMCwwLDEtNS42Ny0xLjQ1LDEwLjU0LDEwLjU0LDAsMCwxLTQtNC4xNEExMi42MiwxMi42MiwwLDAsMSw5NSwyNy4xOCwxMi41MywxMi41MywwLDAsMSw5Ni40NCwyMWExMC4zNSwxMC4zNSwwLDAsMSw0LTQuMDksMTEuNDgsMTEuNDgsMCwwLDEsNS42Ny0xLjQzLDguMjQsOC4yNCwwLDAsMSw2LjMsMi4zNVY4LjQ0YTEsMSwwLDAsMSwxLTFoNkExLDEsMCwwLDEsMTIwLjQ0LDguNDRabS05LjE5LDIyLjc1YTUuNzEsNS43MSwwLDAsMCwxLjM0LTQsNS42LDUuNiwwLDAsMC0xLjMyLTMuOTUsNC40Nyw0LjQ3LDAsMCwwLTMuNDMtMS40Myw0LjUzLDQuNTMsMCwwLDAtMy40NCwxLjQzLDUuNTEsNS41MSwwLDAsMC0xLjM0LDMuOTUsNS42Nyw1LjY3LDAsMCwwLDEuMzQsNCw0Ljc3LDQuNzcsMCwwLDAsNi44NSwwWiIvPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTE2MSwxOGMxLjY2LDEuNjgsMi41LDQuMjEsMi41LDcuNnYxMmExLDEsMCwwLDEtMSwxaC02YTEsMSwwLDAsMS0xLTFWMjYuODhhNS42Nyw1LjY3LDAsMCwwLS45LTMuNTMsMy4wOSwzLjA5LDAsMCwwLTIuNTUtMS4xMywzLjYyLDMuNjIsMCwwLDAtMi44OSwxLjI2LDUuNzEsNS43MSwwLDAsMC0xLjEsMy44MlYzNy42YTEsMSwwLDAsMS0xLDFoLTZhMSwxLDAsMCwxLTEtMVYyNi44OGMwLTMuMTEtMS4xNC00LjY2LTMuNDQtNC42NmEzLjcsMy43LDAsMCwwLTIuOTQsMS4yNiw1LjcxLDUuNzEsMCwwLDAtMS4wOSwzLjgyVjM3LjZhMSwxLDAsMCwxLTEsMWgtNmExLDEsMCwwLDEtMS0xVjE2Ljg0YTEsMSwwLDAsMSwxLTFoNS42YTEsMSwwLDAsMSwxLDF2MS4zOWE4LDgsMCwwLDEsMy0yLjA4LDEwLjIzLDEwLjIzLDAsMCwxLDMuOC0uNjksMTAsMTAsMCwwLDEsNC4yOS44OEE3LjI4LDcuMjgsMCwwLDEsMTQ2LjQyLDE5YTguODUsOC44NSwwLDAsMSwzLjQxLTIuNjUsMTAuOTMsMTAuOTMsMCwwLDEsNC40OS0uOTJBOSw5LDAsMCwxLDE2MSwxOFoiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0xNjguMTIsMTIuMWEzLjkxLDMuOTEsMCwwLDEtMS4zNC0yLjc5QTQuMTYsNC4xNiwwLDAsMSwxNjgsNi4xOWE1LDUsMCwwLDEsMy42Ny0xLjM2QTUuMjUsNS4yNSwwLDAsMSwxNzUuMTgsNmEzLjc1LDMuNzUsMCwwLDEsMS4zNCwzLDQuMSw0LjEsMCwwLDEtMS4zNCwzLjEzLDUuNjgsNS42OCwwLDAsMS03LjA2LDBabS41NCwzLjc0aDZhMSwxLDAsMCwxLDEsMVYzNy42YTEsMSwwLDAsMS0xLDFoLTZhMSwxLDAsMCwxLTEtMVYxNi44NEExLDEsMCwwLDEsMTY4LjY2LDE1Ljg0WiIvPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTIwMS41NSwxOHEyLjU5LDIuNTIsMi41OSw3LjZ2MTJhMSwxLDAsMCwxLTEsMWgtNmExLDEsMCwwLDEtMS0xVjI2Ljg4cTAtNC42Ni0zLjc0LTQuNjZhNC4zLDQuMywwLDAsMC0zLjMsMS4zNCw1LjgzLDUuODMsMCwwLDAtMS4yNCw0djEwYTEsMSwwLDAsMS0xLDFoLTZhMSwxLDAsMCwxLTEtMVYxNi44NGExLDEsMCwwLDEsMS0xaDUuNjFhMSwxLDAsMCwxLDEsMXYxLjQ3YTkuMDUsOS4wNSwwLDAsMSwzLjE5LTIuMTIsMTAuNzgsMTAuNzgsMCwwLDEsNC0uNzNBOS4zNCw5LjM0LDAsMCwxLDIwMS41NSwxOFoiLz48L3N2Zz4=) 0 0 no-repeat;
- background-position-y: center;
-}
-
-.dashboard-pg-doc {
- display: inline-block;
- width: 50px;
- height: 50px;
- /*
- * Using the SVG postgresql logo, modified to set the background color as
- * black
- * https://wiki.postgresql.org/images/a/a4/PostgreSQL_logo.3colors.svg
- */
- background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 42 42' style='enable-background:new 0 0 42 42;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bstroke:%23000000;stroke-width:3.3022;%7D .st1%7Bfill:%23336791;%7D .st2%7Bfill:none;stroke:%23FFFFFF;stroke-width:1.1007;stroke-linecap:round;stroke-linejoin:round;%7D .st3%7Bfill:none;stroke:%23FFFFFF;stroke-width:1.1007;stroke-linecap:round;stroke-linejoin:bevel;%7D .st4%7Bfill:%23FFFFFF;stroke:%23FFFFFF;stroke-width:0.3669;%7D .st5%7Bfill:%23FFFFFF;stroke:%23FFFFFF;stroke-width:0.1835;%7D .st6%7Bfill:none;stroke:%23FFFFFF;stroke-width:0.2649;stroke-linecap:round;stroke-linejoin:round;%7D%0A%3C/style%3E%3Cg id='orginal'%3E%3C/g%3E%3Cg id='Layer_x0020_3'%3E%3Cpath class='st0' d='M31.3,30c0.3-2.1,0.2-2.4,1.7-2.1l0.4,0c1.2,0.1,2.8-0.2,3.7-0.6c2-0.9,3.1-2.4,1.2-2 c-4.4,0.9-4.7-0.6-4.7-0.6c4.7-7,6.7-15.8,5-18c-4.6-5.9-12.6-3.1-12.7-3l0,0c-0.9-0.2-1.9-0.3-3-0.3c-2,0-3.5,0.5-4.7,1.4 c0,0-14.3-5.9-13.6,7.4c0.1,2.8,4,21.3,8.7,15.7c1.7-2,3.3-3.8,3.3-3.8c0.8,0.5,1.8,0.8,2.8,0.7l0.1-0.1c0,0.3,0,0.5,0,0.8 c-1.2,1.3-0.8,1.6-3.2,2.1c-2.4,0.5-1,1.4-0.1,1.6c1.1,0.3,3.7,0.7,5.5-1.8l-0.1,0.3c0.5,0.4,0.4,2.7,0.5,4.4 c0.1,1.7,0.2,3.2,0.5,4.1c0.3,0.9,0.7,3.3,3.9,2.6C29.1,38.3,31.1,37.5,31.3,30'/%3E%3Cpath class='st1' d='M38.3,25.3c-4.4,0.9-4.7-0.6-4.7-0.6c4.7-7,6.7-15.8,5-18c-4.6-5.9-12.6-3.1-12.7-3l0,0 c-0.9-0.2-1.9-0.3-3-0.3c-2,0-3.5,0.5-4.7,1.4c0,0-14.3-5.9-13.6,7.4c0.1,2.8,4,21.3,8.7,15.7c1.7-2,3.3-3.8,3.3-3.8 c0.8,0.5,1.8,0.8,2.8,0.7l0.1-0.1c0,0.3,0,0.5,0,0.8c-1.2,1.3-0.8,1.6-3.2,2.1c-2.4,0.5-1,1.4-0.1,1.6c1.1,0.3,3.7,0.7,5.5-1.8 l-0.1,0.3c0.5,0.4,0.8,2.4,0.7,4.3c-0.1,1.9-0.1,3.2,0.3,4.2c0.4,1,0.7,3.3,3.9,2.6c2.6-0.6,4-2,4.2-4.5c0.1-1.7,0.4-1.5,0.5-3 l0.2-0.7c0.3-2.3,0-3.1,1.7-2.8l0.4,0c1.2,0.1,2.8-0.2,3.7-0.6C39,26.4,40.2,24.9,38.3,25.3L38.3,25.3z'/%3E%3Cpath class='st2' d='M21.8,26.6c-0.1,4.4,0,8.8,0.5,9.8c0.4,1.1,1.3,3.2,4.5,2.5c2.6-0.6,3.6-1.7,4-4.1c0.3-1.8,0.9-6.7,1-7.7'/%3E%3Cpath class='st2' d='M18,4.7c0,0-14.3-5.8-13.6,7.4c0.1,2.8,4,21.3,8.7,15.7c1.7-2,3.2-3.7,3.2-3.7'/%3E%3Cpath class='st2' d='M25.7,3.6c-0.5,0.2,7.9-3.1,12.7,3c1.7,2.2-0.3,11-5,18'/%3E%3Cpath class='st3' d='M33.5,24.6c0,0,0.3,1.5,4.7,0.6c1.9-0.4,0.8,1.1-1.2,2c-1.6,0.8-5.3,0.9-5.3-0.1 C31.6,24.5,33.6,25.3,33.5,24.6c-0.1-0.6-1.1-1.2-1.7-2.7c-0.5-1.3-7.3-11.2,1.9-9.7c0.3-0.1-2.4-8.7-11-8.9 c-8.6-0.1-8.3,10.6-8.3,10.6'/%3E%3Cpath class='st2' d='M19.4,25.6c-1.2,1.3-0.8,1.6-3.2,2.1c-2.4,0.5-1,1.4-0.1,1.6c1.1,0.3,3.7,0.7,5.5-1.8c0.5-0.8,0-2-0.7-2.3 C20.5,25.1,20,24.9,19.4,25.6L19.4,25.6z'/%3E%3Cpath class='st2' d='M19.3,25.5c-0.1-0.8,0.3-1.7,0.7-2.8c0.6-1.6,2-3.3,0.9-8.5c-0.8-3.9-6.5-0.8-6.5-0.3c0,0.5,0.3,2.7-0.1,5.2 c-0.5,3.3,2.1,6,5,5.7'/%3E%3Cpath class='st4' d='M18,13.8c0,0.2,0.3,0.7,0.8,0.7c0.5,0.1,0.9-0.3,0.9-0.5c0-0.2-0.3-0.4-0.8-0.4C18.4,13.6,18,13.7,18,13.8 L18,13.8z'/%3E%3Cpath class='st5' d='M32,13.5c0,0.2-0.3,0.7-0.8,0.7c-0.5,0.1-0.9-0.3-0.9-0.5c0-0.2,0.3-0.4,0.8-0.4C31.6,13.2,32,13.3,32,13.5 L32,13.5z'/%3E%3Cpath class='st2' d='M33.7,12.2c0.1,1.4-0.3,2.4-0.4,3.9c-0.1,2.2,1,4.7-0.6,7.2'/%3E%3Cpath class='st6' d='M2.7,6.6'/%3E%3C/g%3E%3C/svg%3E%0A") 0 0 no-repeat;
- background-size: 50px 50px;
-}
-
-.panel-link-heading {
- text-decoration: none;
- color: inherit;
-}
-
-.panel-link-heading:hover {
- text-decoration: none;
- color: inherit;
-}
-
-.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
- background-color: initial !important;
-}
-
-#navbar-user {
- font-size: 0.9em;
-}
-
-
-.alert-box {
- padding: 15px; }
-
-.alert-icon {
- display: table-cell; }
-
-.alert-text {
- display: table-cell;
- padding-left: 10px; }
-
-.color-chip {
- align-items: center;
- border-radius: 3px;
- box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, 0.15);
- color: rgba(0, 0, 0, 0.65);
- display: flex;
- font-size: 1.25em;
- height: 70px;
- justify-content: center;
- margin: 0 0 0.5em;
- width: 100%; }
-
-.bg-highlight {
- background-color: $color-primary-light; }
-
-.bg-border {
- background-color: $color-primary-light; }
-
-.opacity-5 {
- opacity: 0.5; }
-
-.pg-docker {
- position:absolute;
- left:0px;
- right:0px;
- bottom:0px;
- top: $navbar-height !important;
-}
-
-.pg-docker-native {
- top: 0px !important;
- border-top: 1px solid $border-color;
-}
-
-.pg-panel-content {
- position:absolute;
- top:0px;
- left:0px;
- right:0px;
- bottom:0px;
- height: 100%!important;
-}
-
-.pg-prop-footer {
- position: absolute;
- left: 0px;
- right: 0px;
- bottom : 0px;
- z-index: 4;
-
- & .pg-prop-btn-group {
- min-width: 100%;
- left: 0px;
- right: 0px;
-
- &.pg-prop-btn-group-below {
- text-align: right;
- padding: $footer-padding;
- background: $header-bg;
- border-top: $panel-border;
- }
- }
-}
-
-
-
-.pg-prop-btn-group .dropdown-menu {
- min-width: initial;
-}
-
-.pg-prop-content {
- position: absolute;
- overflow: auto;
- top: 0;
- right: 0;
- left: 0;
- bottom: 0;
- height: 100%;
-}
-
-/* A generic class to make the overflow hidden of a DOM element */
-.pg-no-overflow {
- overflow: hidden;
-}
-
-
-.pg-prop-has-btn-group-below {
- margin-bottom: 33px;
-}
-
-.pg-prop-btn-group-above {
- border-bottom: $panel-border;
-}
-
-.has-pg-prop-btn-group {
- top: 45px;
- height: calc(100% - 45px);
-}
-
-.pg-prop-content > div {
- margin-top: 5px;
- margin-bottom: 5px;
-}
-
-.pg-prop-content .uneditable-input {
- white-space: initial;
- overflow: hidden;
- text-overflow: ellipsis;
- -o-text-overow: ellipsis;
- height: auto !important;
-}
-
-.obj_properties {
- padding: 0px;
- height: 100%;
- width: 100%;
- background-color: $color-gray-light;
-}
-
-/* Message panel shown on browser tabs */
-.pg-panel-message {
- width: 80%;
- margin: 0 auto;
- padding-top: 25px !important;
- position: relative;
- text-align: center;
- font-size: $font-size-base;
-
- &:before {
- font-family: $font-family-icon;
- content: "\f05a" !important;
- font-size: 1rem;
- margin-right: 0.5rem;
- font-weight: 900;
- }
-
- &.pg-panel-error:before {
- content: "\f06a" !important;
- font-weight: 900;
- }
-}
-
-.pgadmin-control {
- padding: 0px 15px 5px 15px;
- margin-bottom: 0px;
- display: inline-block;
- height: 30px;
-}
-
-
-.pgadmin-control-group {
- margin: 0rem 0rem $form-group-margin-bottom 0rem;
- padding: 0rem;
- min-width: 34px;
-
- &.sql, &.sqltab {
- margin: 0px;
- padding: 0px;
- height: 100%;
- }
-}
-
-fieldset.inline-fieldset {
- padding: 10px;
- border-radius: $card-border-radius;
- background: $color-gray-light;
- border: $panel-border;
- & legend {
- font-size: 0.875rem;
- font-weight: bold;
- }
-}
-
-fieldset.inline-fieldset-without-border {
- margin: 0px; margin-left: 0px; margin-right: 0px;
- padding-right: 0px; padding-left: 0px; padding-top: 0px; padding-bottom: 0px;
- border: 0px solid; border-radius: 0px;
-}
-
-fieldset.inline-fieldset > legend {
- display: block; border: 0px solid $color-fg; box-shadow: none;
- box-sizing: content-box; top: auto; bottom: auto; left: auto;
- font-size: 14px; font-style: normal; font-weight: 600;
- height: 20px; line-height: 20px; margin: 0px; padding-bottom: 0px;
- padding-left: 5px; padding-right: 5px; padding-top: 0px;
- vertical-align: middle; width: auto;
-}
-
-fieldset.inline-fieldset-without-border legend {
- border: none; margin-bottom: 0px !important;
- }
-
-fieldset.inline-fieldset > div {
- padding: 0px; margin: 0px; border: 0px;
-}
-
-/* Override CSS for Colour Picker to match it with pgAdmin4 style */
-.sp-replacer {
- background: $color-bg;
- border: solid 1px $color-gray-light;
- border-radius: 3px;
-}
-
-.sp-replacer:hover {
- border-color: $color-gray-light;
-}
-
-.sp-replacer.sp-active {
- border-color: $color-primary-light;
- border-radius: 4px;
- -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
- box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
- -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
- -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
- transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
-}
-
-.sp-replacer.sp-disabled {
- background-color: $color-gray-lighter;
-}
-
-.sp-container {
- background-color: $color-bg;
- border: solid 1px $color-gray-light;
- border-radius: 3px !important;
-}
-
-.sp-palette-button-container button,
-.sp-palette-button-container button:hover {
- padding: 5px;
- background-color: $color-primary;
- background-image: none;
- font-family: $font-family-primary;
- font-size: 0.75rem;
- color: $color-primary-fg;
- text-shadow: none;
- -webkit-font-smoothing: auto;
-}
-
-.sp-container button:active {
- border: 1px solid $color-primary;
- border-bottom: none;
- -webkit-box-shadow: inset 0 0 5px 2px $color-primary, 0 1px 0 0 $color-primary-light;
- -moz-box-shadow: inset 0 0 5px 2px $color-primary, 0 1px 0 0 $color-primary-light;
- -ms-box-shadow: inset 0 0 5px 2px $color-primary, 0 1px 0 0 $color-primary-light;
- -o-box-shadow: inset 0 0 5px 2px $color-primary, 0 1px 0 0 $color-primary-light;
- box-shadow: inset 0 0 5px 2px $color-primary, 0 1px 0 0 $color-primary-light;
-}
-
-.sp-dd {
- font-size: 8px;
- color: $color-gray;
-}
-
-.pgadmin-control-error-message{
- padding: 15px;
-}
-
-.tab-pane.sql-code-control {
- & .pgadmin-control-group{
- margin: 0px;
- padding: 0px;
- height: 100%;
- }
-}
-
-.dashboard-tab-container,
-.pg-panel-statistics-container,
-.pg-panel-dependencies-container,
-.pg-panel-dependents-container,
-.pg-prop-coll-container {
- width: 100%;
- overflow: auto;
- border-radius: $card-border-radius;
- border: $panel-border;
-}
-
-.pg-prop-header {
- position: relative;
- left: 0px;
- right: 0px;
- top : 0px;
- background-color: $color-bg;
-}
-
-/* Overrides/fixes for pgAdmin specific styling */
-
-.highlight {
- padding: 5px;
- margin-bottom: 5px;
- background-color: $color-gray-lighter;
- border: 1px solid $color-gray-lighter;
- border-radius: 3px;
-}
-
-.icon-fa::before {
- font: normal normal normal 14px/1 $font-family-icon;
- text-rendering: auto;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- transform: translate(0, 0);
- display: inline-block;
- margin-left: -18px;
- margin-right: 9px;
-}
-
-.width_percent_3 { width: 3%; }
-.width_percent_5 { width: 5%; }
-.width_percent_10 { width: 10%; }
-.width_percent_15 { width: 15%; }
-.width_percent_20 { width: 20%; }
-.width_percent_25 { width: 25%; }
-.width_percent_30 { width: 30%; }
-.width_percent_35 { width: 35%; }
-.width_percent_40 { width: 40%; }
-.width_percent_45 { width: 45%; }
-.width_percent_50 { width: 50%; }
-.width_percent_55 { width: 55%; }
-.width_percent_60 { width: 60%; }
-.width_percent_65 { width: 65%; }
-.width_percent_70 { width: 70%; }
-.width_percent_75 { width: 75%; }
-.width_percent_80 { width: 80%; }
-.width_percent_85 { width: 85%; }
-.width_percent_90 { width: 90%; }
-.width_percent_95 { width: 95%; }
-.width_percent_99 { width: 99%; }
-.width_percent_100 { width: 100%; }
-
-.navtab-inline-controls {
-
- height: $title-height;
- display: flex;
- text-align: right !important;
- border-bottom: $panel-border;
-
- & .input-group-text,
- & .form-control,
- & .btn {
- border: none;
- border-radius: 0px;
- border-left: $panel-border;
- height: 100%;
- }
-
- & .btn-secondary:focus {
- box-shadow: $input-btn-focus-box-shadow;
- }
-
- & .input-group {
- & .input-group-text {
- background: $input-bg;
- }
- & .form-control {
- border-left: none !important;
- }
- }
-}
-
-.negative-space {
- min-height: 100%;
- min-width: 100%;
- background: $negative-bg;
- overflow: auto;
-}
-
-/* This rule will stop Chrome apply highlighting to elements such as DIV's used as modals */
-*:focus {
- outline: none;
-}
-
-input[type="checkbox"],
-select,
-a {
- &:focus {
- &.navbar-brand, &.dropdown-item {
- outline: none !important;
- }
- outline: 2px solid $input-focus-border-color !important;
- }
-}
-
-div.rolmembership {
- margin-top: 15px;
-}
-
-
-.inline-tab-panel > ul.nav-tabs > li:first-child > a,
-.inline-tab-panel > ul.nav-tabs > li:first-child > a:active,
-.inline-tab-panel > ul.nav-tabs > li:first-child > a:hover,
-.inline-tab-panel > ul.nav-tabs > li:first-child > a:focus {
- border-top-left-radius: 5px;
- border-top-right-radius: 5px;
-}
-
-.inline-tab-panel > ul.tab-content {
- padding-left: 5px; padding-right: 5px; border-color: $color-gray-lighter;
- border-width: 0px 1px 1px 1px; border-bottom-right-radius: 5px;
- border-bottom-left-radius: 5px; border-style: solid solid;
-}
-
-.inline-tab-panel {
- float: left; width: 100%;
- background-color: $header-bg;
- border: 1px solid $border-color;
- border-radius: $card-border-radius;
- & > .tab-content {
- padding: 0px;
- margin: 0px;
- border-top: none;
- border-bottom-left-radius: 5px;
- border-bottom-right-radius: 5px;
- }
- &.inline-tab-panel-padded > .tab-content {
- padding: 0.5rem;
- }
-}
-
-.inline-tab-panel > ul.tab-content > div.tab-pane {
- min-height: 150px; padding: 0px !important;
-}
-
-.inline-tab-panel > ul.tab-content > div.tab-pane > *:first-child {
- margin-top: 5px;
-}
-
-.inline-tab-panel > ul.tab-content > div.tab-pane > *:last-child {
- margin-bottom: 5px;
-}
-
-.inline-tab-panel > .tab-content > div.tab-pane {
- padding: 0px;
- & > .pgadmin-control-group {
- & > div.subnode {
- border: none !important;
- border-bottom: $panel-border;
- }
- }
-}
-
-table tr th {
- & button {
- background: none;
- border: none;
- color: $color-fg;
- padding: 0;
- }
- & button:focus {
- outline: $input-focus-border-color auto 5px !important;
- }
-}
-
-table tr td {
- td.edit-cell:focus,
- td.delete-cell:focus,
- td.string-cell:focus {
- outline: $input-focus-border-color auto 5px !important;
- }
-}
-
-/* Specific to IE11 where we want to highlight the focus on grid buttons */
-@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
- table tr td {
- td.edit-cell:focus,
- td.delete-cell:focus,
- td.string-cell:focus {
- border: 2px solid $input-focus-border-color !important;
- }
- }
-}
-
-.privilege-checkbox{
- & .custom-control-label {
- font-size: 0.7rem;
- line-height: 1.7;
- &:before, &:after {
- height: 0.8rem;
- width: 0.8rem;
- }
- }
-}
-
-span.button-label {
- font-family: $font-family-primary;
- font-size: initial;
-}
-
-form[name="change_password_form"] .help-block {
- color: $color-danger !important;
-}
-
-/* animate blink */
-.blink {
- animation: blink-animation 1s steps(5, start) infinite;
- -webkit-animation: blink-animation 1s steps(5, start) infinite;
-
-}
-
-@keyframes blink-animation {
- to {
- visibility: hidden;
- }
-}
-
-@-webkit-keyframes blink-animation {
- to {
- visibility: hidden;
- }
-}
-
-.close-error {
- cursor: pointer;
-}
-
-.help-block {
- white-space: normal;
-}
-
-/* Disable text selection where not wanted */
-body {
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- font-size: 0.875rem;
- height: 100vh;
- overflow: hidden;
- margin: 0;
- font-family: $font-family-primary;
-}
-
-/* iFrames should have no border */
-iframe {
- border-width: 0;
-}
-
-/* Security label's label column font size */
-.override_label_class_font_size {
- font-size: inherit !important;
-}
-
-.multi-checkbox .check.checked,
-.multi-checkbox .check.unchecked {
- background: $color-bg;
-}
-
-.multi-checkbox .check.partial {
- background: $color-gray-lighter;
-}
-
-.multi-checkbox .check.checked:after {
- content: "\2713";
- font-weight: 900;
-}
-
-.multi-checkbox .check.partial:after {
- content: "\003F";
- font-weight: 900;
-}
-
-.nav-tabs {
- background-color: $header-bg;
-}
-
-.editor-toolbar {
- background: $editor-toolbar-bg;
- padding: 0.05rem 0.25rem;
-}
-
-
-table.table-noouter-border {
- border: none !important;
-
- & > tbody > tr:last-of-type{
- & > td {
- border-bottom: $table-border-width solid transparent;
- }
- }
-
- &.table-noheader {
- & > tbody tr:first-of-type td {
- border-top: none !important;
- }
- }
-}
-
-table.table-bottom-border {
- tbody tr:last-of-type{
- & td, & th {
- border-bottom: $panel-border;
- }
- }
-}
-
-table.table-right-border {
- tr {
- & td:last-of-type, & th:last-of-type {
- border-right: $panel-border;
- }
- }
-}
-
-table.table-empty-rows{
- thead th:last-of-type,tr:last-of-type{
- & td, & th {
- border-bottom: $panel-border;
- }
- }
-}
-
-
-.context-menu-list .context-menu-submenu:after {
- font-family: $font-family-icon;
- content: "\f054" !important;
- right: 15px;
- top: 3px;
- font-size: 0.6rem;
- line-height: 2;
- border-style: none;
- font-weight: 900;
-}
-
-.login_page {
- background-color: $login-page-background;
- height: 100%;
- position:relative;
- z-index:1;
- color: $security-text-color;
-
- & a {
- color: $security-text-color;
- }
-
- & .panel-container {
- background-color: rgba($security-btn-color, 0.25);
- padding: 0px;
- }
-
- & .panel-header {
- padding-bottom: 1.0rem;
- }
- & .panel-body {
- padding-bottom: 0.8rem;
- }
- & .btn-login {
- background-color: $security-btn-color;
- }
- & .btn-validate {
- background-color: $security-btn-color;
- }
- & .btn-oauth {
- background-color: $security-btn-color;
- }
- & .user-language {
- & select{
- background-color: $color-primary;
- color: $security-text-color;
-
- & option{
- background-color: $color-primary;
- color: $security-text-color;
- }
- }
- }
- & .pg-icon {
- width: 28px;
- height: 28px;
- background-size: 28px 28px;
- }
-}
-
-.login_banner {
- position: fixed;
- width: 80%;
- top: 50px;
- left: 50%;
- transform: translateX(-50%);
- text-align: center;
- z-index: 100;
-}
-
-.auth_page {
- background-color: $color-gray-light;
-
- & .panel-container {
- background-color: rgba($color-gray-dark, 0.75);
- border-radius: $border-radius * 2;
- }
-}
-
-.change_pass {
- height: 100%;
- position:relative;
- z-index:1;
-
- & .panel-header {
- padding-bottom: 1.0rem;
- }
- & .panel-body {
- padding-bottom: 0.8rem;
- }
-
- & .btn-change-pass {
- background-color: $security-btn-color;
- }
-
- & .pg-icon-blue {
- display: inline-block;
- width: 28px;
- height: 28px;
- /*
- * Using the SVG postgresql logo, modified to set the background color as
- * black
- * https://wiki.postgresql.org/images/a/a4/PostgreSQL_logo.3colors.svg
- */
- background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 42 42' style='enable-background:new 0 0 42 42;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bstroke:%23000000;stroke-width:3.3022;%7D .st1%7Bfill:%23336791;%7D .st2%7Bfill:none;stroke:%23FFFFFF;stroke-width:1.1007;stroke-linecap:round;stroke-linejoin:round;%7D .st3%7Bfill:none;stroke:%23FFFFFF;stroke-width:1.1007;stroke-linecap:round;stroke-linejoin:bevel;%7D .st4%7Bfill:%23FFFFFF;stroke:%23FFFFFF;stroke-width:0.3669;%7D .st5%7Bfill:%23FFFFFF;stroke:%23FFFFFF;stroke-width:0.1835;%7D .st6%7Bfill:none;stroke:%23FFFFFF;stroke-width:0.2649;stroke-linecap:round;stroke-linejoin:round;%7D%0A%3C/style%3E%3Cg id='orginal'%3E%3C/g%3E%3Cg id='Layer_x0020_3'%3E%3Cpath class='st0' d='M31.3,30c0.3-2.1,0.2-2.4,1.7-2.1l0.4,0c1.2,0.1,2.8-0.2,3.7-0.6c2-0.9,3.1-2.4,1.2-2 c-4.4,0.9-4.7-0.6-4.7-0.6c4.7-7,6.7-15.8,5-18c-4.6-5.9-12.6-3.1-12.7-3l0,0c-0.9-0.2-1.9-0.3-3-0.3c-2,0-3.5,0.5-4.7,1.4 c0,0-14.3-5.9-13.6,7.4c0.1,2.8,4,21.3,8.7,15.7c1.7-2,3.3-3.8,3.3-3.8c0.8,0.5,1.8,0.8,2.8,0.7l0.1-0.1c0,0.3,0,0.5,0,0.8 c-1.2,1.3-0.8,1.6-3.2,2.1c-2.4,0.5-1,1.4-0.1,1.6c1.1,0.3,3.7,0.7,5.5-1.8l-0.1,0.3c0.5,0.4,0.4,2.7,0.5,4.4 c0.1,1.7,0.2,3.2,0.5,4.1c0.3,0.9,0.7,3.3,3.9,2.6C29.1,38.3,31.1,37.5,31.3,30'/%3E%3Cpath class='st1' d='M38.3,25.3c-4.4,0.9-4.7-0.6-4.7-0.6c4.7-7,6.7-15.8,5-18c-4.6-5.9-12.6-3.1-12.7-3l0,0 c-0.9-0.2-1.9-0.3-3-0.3c-2,0-3.5,0.5-4.7,1.4c0,0-14.3-5.9-13.6,7.4c0.1,2.8,4,21.3,8.7,15.7c1.7-2,3.3-3.8,3.3-3.8 c0.8,0.5,1.8,0.8,2.8,0.7l0.1-0.1c0,0.3,0,0.5,0,0.8c-1.2,1.3-0.8,1.6-3.2,2.1c-2.4,0.5-1,1.4-0.1,1.6c1.1,0.3,3.7,0.7,5.5-1.8 l-0.1,0.3c0.5,0.4,0.8,2.4,0.7,4.3c-0.1,1.9-0.1,3.2,0.3,4.2c0.4,1,0.7,3.3,3.9,2.6c2.6-0.6,4-2,4.2-4.5c0.1-1.7,0.4-1.5,0.5-3 l0.2-0.7c0.3-2.3,0-3.1,1.7-2.8l0.4,0c1.2,0.1,2.8-0.2,3.7-0.6C39,26.4,40.2,24.9,38.3,25.3L38.3,25.3z'/%3E%3Cpath class='st2' d='M21.8,26.6c-0.1,4.4,0,8.8,0.5,9.8c0.4,1.1,1.3,3.2,4.5,2.5c2.6-0.6,3.6-1.7,4-4.1c0.3-1.8,0.9-6.7,1-7.7'/%3E%3Cpath class='st2' d='M18,4.7c0,0-14.3-5.8-13.6,7.4c0.1,2.8,4,21.3,8.7,15.7c1.7-2,3.2-3.7,3.2-3.7'/%3E%3Cpath class='st2' d='M25.7,3.6c-0.5,0.2,7.9-3.1,12.7,3c1.7,2.2-0.3,11-5,18'/%3E%3Cpath class='st3' d='M33.5,24.6c0,0,0.3,1.5,4.7,0.6c1.9-0.4,0.8,1.1-1.2,2c-1.6,0.8-5.3,0.9-5.3-0.1 C31.6,24.5,33.6,25.3,33.5,24.6c-0.1-0.6-1.1-1.2-1.7-2.7c-0.5-1.3-7.3-11.2,1.9-9.7c0.3-0.1-2.4-8.7-11-8.9 c-8.6-0.1-8.3,10.6-8.3,10.6'/%3E%3Cpath class='st2' d='M19.4,25.6c-1.2,1.3-0.8,1.6-3.2,2.1c-2.4,0.5-1,1.4-0.1,1.6c1.1,0.3,3.7,0.7,5.5-1.8c0.5-0.8,0-2-0.7-2.3 C20.5,25.1,20,24.9,19.4,25.6L19.4,25.6z'/%3E%3Cpath class='st2' d='M19.3,25.5c-0.1-0.8,0.3-1.7,0.7-2.8c0.6-1.6,2-3.3,0.9-8.5c-0.8-3.9-6.5-0.8-6.5-0.3c0,0.5,0.3,2.7-0.1,5.2 c-0.5,3.3,2.1,6,5,5.7'/%3E%3Cpath class='st4' d='M18,13.8c0,0.2,0.3,0.7,0.8,0.7c0.5,0.1,0.9-0.3,0.9-0.5c0-0.2-0.3-0.4-0.8-0.4C18.4,13.6,18,13.7,18,13.8 L18,13.8z'/%3E%3Cpath class='st5' d='M32,13.5c0,0.2-0.3,0.7-0.8,0.7c-0.5,0.1-0.9-0.3-0.9-0.5c0-0.2,0.3-0.4,0.8-0.4C31.6,13.2,32,13.3,32,13.5 L32,13.5z'/%3E%3Cpath class='st2' d='M33.7,12.2c0.1,1.4-0.3,2.4-0.4,3.9c-0.1,2.2,1,4.7-0.6,7.2'/%3E%3Cpath class='st6' d='M2.7,6.6'/%3E%3C/g%3E%3C/svg%3E%0A") 0 0 no-repeat;
- background-size: 28px 28px;
- }
-}
-
-.ajs-content {
- .tab-content {
- bottom: 0;
-
- }
-}
-
-.filter-textarea {
- height: 100%;
-}
-
-.dataview_filter_dialog {
- left: 0 !important;
- right: 0 !important;
- padding: 0px !important;
- position: absolute;
-}
-
-.drag-tree-node {
- position: absolute;
- top:-100px;
- left:0;
- z-index: 99999;
- color: $input-focus-color;
- background: $input-bg;
- border: $input-border-width solid $input-focus-border-color;
- border-radius: $input-border-radius;
- padding: $input-btn-padding-y $input-btn-padding-x;
- max-width: 30%;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
-}
-
-::placeholder {
- color: $input-placeholder-color;
-}
-
-.pg-font-icon {
- &:before {
- vertical-align: middle;
- }
-}
-
-.dialog-node-icon {
- margin-right: 2px !important;
- padding: 0px 10px;
- background-position: 50%;
-}
-
-textarea {
- color: $input-color;
- background-color: $input-bg;
-}
-
-/* Webkit customizations */
-
-::-webkit-scrollbar, ::-webkit-scrollbar-corner {
- width: $scrollbar-width !important;
- height: $scrollbar-width !important;
- background-color: rgba($scrollbar-base-color, 0.2);
-}
-
-::-webkit-scrollbar-thumb {
- border: 0.25rem solid transparent;
- border-radius: $border-radius*2;
- background: rgba($scrollbar-base-color, 0.7) !important;
- background-clip: content-box !important;
-}
-
-::-webkit-scrollbar-thumb:hover {
- border: 0.25rem solid transparent;
- background-color: $scrollbar-base-color !important;
- background-clip: content-box !important;
-}
-
-
-input:-webkit-autofill,
-input:-webkit-autofill:hover,
-input:-webkit-autofill:focus,
-textarea:-webkit-autofill,
-textarea:-webkit-autofill:hover,
-textarea:-webkit-autofill:focus,
-select:-webkit-autofill,
-select:-webkit-autofill:hover,
-select:-webkit-autofill:focus {
- -webkit-text-fill-color: $color-primary-light-fg;
- -webkit-box-shadow: 0 0 0px 1000px $color-primary-light inset;
- transition: background-color 5000s ease-in-out 0s;
-}
-
-/* Left side has a check icon, right side corrected */
-.btn-radiomodern {
- padding-right: 1.75*$input-btn-padding-x !important;
- &.disabled {
- pointer-events: none !important;
- }
-}
-
-.fa {
- font-weight: 600 !important;
-}
-
-.pull-left{
- float:left
-}
-
-.menu-groups-a:hover span{
- color: $white !important;
-}
-
-#myDropdown a:hover {background-color: $dropdown-link-hover-bg; color:$white !important;}
-
-.text-wrap {
- word-break: break-word;
-}
-
-.sql_textarea {
- height: 100%;
-}
-
-.visibility-hidden {
- visibility: hidden;
-}
-
-ul {
- margin-left: 0;
- padding: 0;
- cursor: default;
-}
-
-li {
- padding: 0 0 0 0px;
- list-style: none;
- margin: 0;
-}
diff --git a/web/pgadmin/static/scss/pgadmin.scss b/web/pgadmin/static/scss/pgadmin.scss
deleted file mode 100644
index fb5efa82b..000000000
--- a/web/pgadmin/static/scss/pgadmin.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-$theme-colors: (
- "primary": $color-primary,
- "danger": $color-danger,
- "success": $color-success,
- "warning": $color-warning,
-);
-
-/* Certain variables are required in JS directly */
-:root {
- --color-fg: #{$color-fg};
- --color-bg: #{$color-bg};
- --border-color: #{$border-color};
- --psql-background: #{$psql-background};
- --psql-foreground: #{$psql-foreground};
- --psql-cursor: #{$psql-cursor};
- --psql-cursorAccent: #{$psql-cursorAccent};
- --psql-selection: #{$psql-selection};
-}
-
-@import 'pgadmin.style';
-@import 'jsoneditor.overrides';
-@import 'rc-dock/dist/rc-dock.css';
-@import '@szhsin/react-menu/dist/index.css';
diff --git a/web/pgadmin/static/scss/resources/_default.style.scss b/web/pgadmin/static/scss/resources/_default.style.scss
deleted file mode 100644
index 186f20051..000000000
--- a/web/pgadmin/static/scss/resources/_default.style.scss
+++ /dev/null
@@ -1,163 +0,0 @@
-/* Background color */
-
-.bg-white {
- background-color: $color-bg;
-}
-
-.bg-primary {
- background-color: $color-primary;
-
- &-light{
- background-color: $color-primary-light;
- }
-}
-
-.bg-danger {
- background-color: $color-danger;
-
- &-light {
- background-color: $color-danger-light;
- }
-
- &-lighter {
- background-color: $color-danger-lighter;
- }
-}
-
-.bg-success {
- background-color: $color-success;
-
- &-light {
- background-color: $color-success-light;
- }
-}
-
-
-.bg-warning {
- background-color: $color-warning;
-
- &-light {
- background-color: $color-warning-light;
- }
-}
-
-
-.bg-gray {
- background-color: $color-gray;
-
- &-lighter {
- background-color: $color-gray-lighter;
- }
-
- &-light {
- background-color: $color-gray-light;
- }
-
- &-dark {
- background-color: $color-gray-dark;
- }
-}
-
-/* Borders */
-.border-primary {
- border-color: $color-primary;
-
- &-light {
- border-color: $color-primary-light;
- }
-}
-
-.border-danger {
- border-color: $color-danger;
-
- &-light {
- border-color: $color-danger-light;
- }
-
- &-lighter {
- border-color: $color-danger-lighter;
- }
-}
-
-.border-success {
- border-color: $color-success-light;
-
- &-light {
- border-color: $color-success-light;
- }
-}
-
-.border-gray {
- border: 2px solid $color-gray;
-
- &-lighter {
- border: 2px solid $color-gray-lighter;
- }
-
- &-light {
- border: 2px solid $color-gray-light;
- }
-
- &-dark {
- border: 2px solid $color-gray-dark;
- }
-}
-
-/* Typography */
-.text-gray {
- color: $color-gray;
-
- &-dark {
- color: $color-gray-dark;
- }
-}
-
-.text-danger {
- color: $color-danger-fg;
-}
-
-.text-primary {
- color: $color-primary-fg;
-}
-
-.text-success {
- color: $color-success-fg;
-}
-
-.text-bold {
- font-weight: bold;
-}
-
-.text-14 {
- font-family: $font-family-primary;
- font-size: 14px;
-}
-
-.text-13 {
- font-family: $font-family-primary;
- font-size: 13px;
-}
-
-.text-12 {
- font-family: $font-family-primary;
- font-size: 12px;
-}
-
-.text-11 {
- font-family: $font-family-primary;
- font-size: 11px;
-}
-
-.text-semibold {
- font-family: $font-family-semibold;
-}
-
-.not-selectable {
- -webkit-touch-callout: none;
- -webkit-user-select: none;
- -khtml-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- cursor: default;
-}
diff --git a/web/pgadmin/static/scss/resources/_default.variables.scss b/web/pgadmin/static/scss/resources/_default.variables.scss
deleted file mode 100644
index fdd915967..000000000
--- a/web/pgadmin/static/scss/resources/_default.variables.scss
+++ /dev/null
@@ -1,376 +0,0 @@
-/** Dividing a pixel var with 1px or rem var with 1rem removes the unit px/rem **/
-$enable-flex: true;
-
-$white: #fff;
-$black: #000;
-
-$span-text-color: #6B6B6B !default;
-$span-text-color-hover: #6B6B6B !default;
-
-$color-bg: $white !default;
-$color-fg: #222222 !default;
-
-$color-primary: #326690 !default;
-$color-primary-fg: $white !default;
-$color-primary-light: #d6effc !default;
-$color-primary-light-fg: $color-primary !default;
-
-$color-secondary: $white !default;
-
-$color-ternary: #5b6d7c !default;
-$color-ternary-fg: $white !default;
-
-$color-danger: #CC0000 !default;
-$color-danger-icon-fg: $color-danger !default;
-$color-danger-fg: $white !default;
-$color-danger-light: #F39999 !default;
-$color-danger-lighter: #FAECEC !default;
-
-$color-success: #26852B !default;
-$color-success-fg: $black !default;
-$color-success-light: #D9ECDA !default;
-
-$color-success-disabled-fg: $color-bg !default;
-$color-success-disabled-bg: $color-success !default;
-$color-success-disabled-border-color: $color-success !default;
-$color-success-hover-fg: $white !default;
-
-$color-warning: #eea236 !default;
-$color-warning-fg: $black !default;
-$color-warning-light: #fce5c5 !default;
-
-$color-gray-dark: #848ea0 !default;
-$color-gray: #bac1cd !default;
-$color-gray-light: #ebeef3 !default;
-$color-gray-lighter: #f3f5f9 !default;
-
-$color-brand: $color-primary !default;
-
-
-/* Typography */
-$font-family-primary: "Roboto", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-$font-family-semibold: "Roboto Medium";
-$font-family-editor: "Source Code Pro", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-$font-family-icon: "Font Awesome 5 Free";
-
-$border-width: 1px;
-$border-color: #dde0e6 !default;
-$border-color-dark: $color-gray;
-
-$shadow-base-color: $color-gray-dark !default;
-
-$font-family-monospace: $font-family-editor;
-$font-family-base: $font-family-primary;
-$body-color: $color-fg;
-$font-size-base: 0.875rem;
-$line-height-base: 1.5;
-$text-height-calc: math.div($line-height-base*$font-size-base, 1rem);
-$grid-gutter-width: 15px;
-$border-radius: 0.25rem;
-
-$text-muted: #646B82 !default;
-$header-bg: $color-bg !default;
-$badge-header-bg: $header-bg !default;
-
-$tree-font-size: 0.815rem;
-
-$alert-primary-bg: $color-primary-light !default;
-$alert-primary-color: $color-primary !default;
-$alert-danger-bg: $color-danger-lighter !default;
-$alert-danger-color: $color-danger !default;
-$alert-success-bg: $color-success-light !default;
-$alert-success-color: $color-success !default;
-$alert-warning-bg: $color-warning !default;
-$alert-warning-color: $color-bg !default;
-
-$navbar-bg: $color-primary !default;
-$navbar-font-size: 0.925rem;
-$navbar-height: 32px;
-$navbar-dropdown-top: 100%;
-$navbar-dark-color: $color-primary-fg !default;
-$navbar-dark-hover-color: $color-primary-fg;
-$navbar-dark-active-color: $color-primary-fg !default;
-$navbar-dark-disabled-color: $color-gray !default;
-
-$navbar-toggler-padding-y: 0.25rem; //no-change
-
-$form-group-margin-bottom: 0.5rem;
-$btn-active-box-shadow: none;
-
-$negative-bg: $color-gray-light !default;
-
-$dropdown-bg: $color-bg;
-$dropdown-color: $color-fg;
-$dropdown-link-color: $color-fg;
-$dropdown-link-hover-color: $color-primary-fg;
-$dropdown-link-hover-bg: $color-primary;
-$dropdown-link-remove-color: $color-primary !default;
-$dropdown-border-color: $border-color;
-$dropdown-box-shadow: 0 0.125rem 0.5rem rgba($shadow-base-color, .275);
-$dropdown-divider-bg: $dropdown-border-color;
-$dropdown-padding-y: 0.25rem;
-$dropdown-item-padding-x: 1rem;
-$dropdown-spacer: .125rem; //no-change
-$dropdown-link-disabled-color: $text-muted;
-$nav-divider-margin-y: .25rem;
-
-$popover-bg: $color-fg !default;
-$popover-body-color: $color-bg !default;
-$popover-border-color: $dropdown-border-color;
-$popover-box-shadow: $dropdown-box-shadow;
-
-$input-btn-focus-width: 0.1rem;
-$btn-disabled-opacity: 0.65;
-$btn-transition: color .05s ease-in-out, background-color .05s ease-in-out, border-color .05s ease-in-out, box-shadow .05s ease-in-out;
-
-$card-spacer-y: 0rem;
-$card-spacer-x: 0rem;
-$card-border-radius: $border-radius;
-$card-border-color: $border-color !default;
-$card-cap-bg: $header-bg !default;
-$card-bg: $color-bg !default;
-
-$navbar-padding-y: 0rem;
-$navbar-padding-x: 0rem;
-$navbar-brand-padding-y: 0rem;
-$navbar-toggler-padding-y: 0rem;
-$navbar-toggler-padding-x: 0rem;
-$navbar-toggler-font-size: $font-size-base;
-$navbar-dark-toggler-border-color: tranparent;
-
-$nav-tabs-border-color: $border-color;
-$nav-tabs-border-width: 1px;
-$nav-tabs-border-radius: 0px;
-$nav-tabs-link-hover-border-color: none;
-$nav-tabs-link-active-color: $color-primary;
-$nav-tabs-link-active-bg: none;
-$nav-tabs-link-active-border-color: none;
-
-$table-cell-padding: 0.25rem;
-$table-header-cell-padding: 0.75rem;
-$table-hover-bg: none !default; //we will use our own classes
-$table-hover-color: #000 !default;
-$table-active-bg: $color-primary-light !default;
-$table-border-width: $border-width;
-$table-border-color: $border-color;
-$table-head-bg: $color-primary;
-$table-head-color: $color-primary-fg;
-
-$input-bg: $white !default;
-$input-color: $color-fg !default;
-$input-placeholder-color: $text-muted;
-$input-border-color: $border-color !default;
-$input-border-radius: $border-radius;
-$input-disabled-bg: $color-gray-lighter !default;
-$input-btn-border-width: $border-width;
-$input-border-width: $input-btn-border-width;
-$input-btn-padding-y: .25rem;
-$input-btn-padding-x: .75rem;
-
-$btn-primary-color: $color-primary-fg;
-$btn-success-color: $color-success-fg;
-$btn-warning-color: $color-warning-fg;
-$btn-danger-color: $color-danger-fg;
-
-$component-active-bg: $color-primary;
-$input-btn-focus-width: .2rem;
-$input-btn-focus-color: rgba($component-active-bg, .25);
-$input-btn-focus-shadow-color: $input-btn-focus-color !default;
-$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-shadow-color;
-$input-focus-bg: $input-bg;
-$input-focus-border-color: lighten($component-active-bg, 25%) !default;
-$input-focus-color: $input-color;
-$input-focus-width: $input-btn-focus-width;
-$input-focus-box-shadow: $input-btn-focus-box-shadow;
-
-$btn-border-radius: $border-radius;
-
-$color-editor-fg: $input-color !default;
-$color-editor-bg: $input-bg;
-$color-editor-keyword: #908 !default;
-$color-editor-number: #964 !default;
-$color-editor-string: #a11 !default;
-$color-editor-variable: $color-fg !default;
-$color-editor-variable-2: #05a !default;
-$color-editor-builtin: #30a !default;
-$color-editor-comment: #a50 !default;
-$color-editor-bracket: #737373 !default;
-$color-editor-operator: $color-fg !default;
-$color-editor-foldmarker: #0000FF !default;
-$color-editor-activeline: #EDF9FF !default;
-$color-editor-activeline-light: #EDF9FF !default;
-$color-editor-activeline-border-color: #BCDEF3 !default;
-
-$active-color: $color-primary !default;
-$active-border: 3px solid $active-color !default;
-$panel-border-width: $border-width;
-$panel-border-color: $border-color !default;
-$panel-border-radius: $border-radius;
-$panel-border: $panel-border-width solid $panel-border-color !important;
-$panel-border-dark: $panel-border-width solid $border-color-dark !important;
-$panel-color-fg: $color-fg !default;
-$tabs-padding: 5px 10px 2px;
-$title-height: ($line-height-base*16px) + 5px + 2px + $border-width;
-$footer-padding: 0.5rem;
-$footer-min-height: 2rem;
-$footer-height-calc: $footer-min-height+$footer-padding*2;
-
-// ($splitter-hover-width - $panel-border-width) should be even number to split evenly.
-$splitter-hover-width: 7px;
-
-$dropdown-submenu-top: -$dropdown-spacer;
-
-$table-bg: $color-bg !default;
-$table-bg-selected: $color-primary-light;
-$table-hover-border-color: $color-primary;
-$table-hover-border: $panel-border-width solid $color-primary !important;
-$table-hover-bg-color: $color-primary-light !default;
-$datagrid-bg: $color-gray-light !default;
-$datagrid-selected-color: $color-fg !default;
-
-$tree-text-fg: $color-fg !default;
-$tree-text-hover-fg: $color-fg !default;
-$tree-fg-hover: $color-fg !default;
-$tree-bg-hover: $color-gray-light !default;
-$tree-fg-selected: $color-fg !default;
-$tree-bg-selected: $color-primary-light !default;
-
-$sql-grid-data-cell-fg: $input-color;
-$sql-grid-data-cell-bg: $input-bg;
-$sql-grid-title-cell-fg: $input-color;
-$sql-grid-title-cell-bg: $input-bg;
-
-$sql-title-padding: 3px;
-$sql-title-bg: $color-ternary !default;
-$sql-title-fg: $color-ternary-fg !default;
-// Toolbar + editor title heights + title bottom border
-$sql-editor-panel-top: $title-height + $text-height-calc*16px + $sql-title-padding*2 + $panel-border-width - 0.5px;
-$sql-editor-disable-bg: $color-gray-lighter !default;
-$sql-editor-selection-bg: $color-primary-light !default;
-$sql-gutters-bg: $datagrid-bg !default;
-$sql-history-detail-bg: $color-gray-lighter !default;
-$sql-history-success-bg: $color-primary-light;
-$sql-history-success-fg: $active-color !default;
-$sql-history-error-bg: $color-danger-lighter;
-$sql-history-error-fg: $color-danger;
-$sql-hint-bg: $color-bg;
-$sql-hint-active-bg: $color-primary;
-$sql-hint-active-fg: $white !default;
-$sql-bracket-match-fg: #5b6d7c;
-$sql-bracket-match-bg: #f5d2af;
-
-/* For explain analysis */
-$explain-sev-2-bg: #FFEE88 !default;
-$explain-sev-3-bg: #EE8800 !default;
-$explain-sev-4-bg: #880000 !default;
-$explain-sev-2-color: #222222 !default;
-$explain-sev-3-color: #FFFFFF !default;
-$explain-sev-4-color: #FFFFFF !default;
-
-$dialog-box-shadow: 0 0.5rem 3rem $shadow-base-color;
-
-$alert-icon-color: $white;
-$alert-header-bg: $color-primary !default;
-$alert-header-fg: $white !default;
-$alert-action-bg: $color-secondary !default;
-$alert-action-hover-bg: $color-gray-light !default;
-$alert-color-fg: $color-fg !default;
-$alert-dialog-body-bg: $color-bg !default;
-
-$btn-primary-hover-bg: darken($color-primary, 7.5%) !default;
-$btn-primary-border-hover-bg: darken($color-primary, 7.5%) !default;
-$btn-primary-disabled-bg: $color-primary !default;
-
-$btn-secondary-bg: $color-secondary !default;
-$btn-secondary-border-hover-bg: $color-gray !default;
-$btn-secondary-fg: $color-fg !default;
-$btn-secondary-hover-fg: $color-fg !default;
-$btn-secondary-border: $color-gray !default;
-$btn-secondary-hover-bg: $color-gray-light !default;
-$btn-secondary-disabled-border-color: $color-gray !default;
-$btn-secondary-disabled-fg: $color-fg !default;
-
-$btn-frame-close-bg:$btn-secondary-hover-bg !default;
-
-$btn-ternary-border: $color-ternary !default;
-$btn-ternary-hover-bg: darken($color-ternary, 7.5%) !default;
-
-$btn-ternary-disabled-bg: $color-ternary !default;
-$btn-ternary-disabled-fg: $color-bg !default;
-$btn-ternary-disabled-border-color: $btn-ternary-disabled-bg !default;
-
-$card-header-padding : 0.25rem 0.5rem;
-$card-header-bg: $color-bg !default;
-$card-header-fg: $color-fg !default;
-$card-header-border-color: $border-color !default;
-$no-border-radius: 0px !important;
-
-$tooltip-color: $color-bg;
-$tooltip-bg: $color-fg;
-
-$btn-checkbox-padding: $input-btn-padding-y $input-btn-padding-x;
-
-$scrollbar-base-color: #bac1cd !default;
-$scrollbar-width: 1rem;
-
-$security-text-color: $white;
-$security-btn-color: #038bba;
-
-$loading-bg : rgba(#090d11, 0.6);
-$loading-fg : $white;
-
-$loader-icon : url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='utf-8'?%3e%3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 38 38' style='enable-background:new 0 0 38 38;' xml:space='preserve'%3e%3cstyle type='text/css'%3e .st0%7bfill:none;stroke:%23ebeef3;stroke-width:2;%7d .st1%7bfill:none;stroke:%23326690;stroke-width:2;%7d %3c/style%3e%3cg%3e%3cg transform='translate(1 1)'%3e%3ccircle class='st0' cx='18' cy='18' r='18'/%3e%3cpath class='st1' d='M36,18c0-9.9-8.1-18-18-18 '%3e%3canimateTransform accumulate='none' additive='replace' attributeName='transform' calcMode='linear' dur='0.7s' fill='remove' from='0 18 18' repeatCount='indefinite' restart='always' to='360 18 18' type='rotate'%3e%3c/animateTransform%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/svg%3e ") !default;
-
-$loader-icon-small: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 23.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 38 38' style='enable-background:new 0 0 38 38;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23EBEEF3;stroke-width:5;%7D .st1%7Bfill:none;stroke:%23326690;stroke-width:5;%7D%0A%3C/style%3E%3Cg%3E%3Cg transform='translate(1 1)'%3E%3Ccircle class='st0' cx='18' cy='18' r='16'/%3E%3Cpath class='st1' d='M34,18c0-8.8-7.2-16-16-16 '%3E%3CanimateTransform accumulate='none' additive='replace' attributeName='transform' calcMode='linear' dur='0.7s' fill='remove' from='0 18 18' repeatCount='indefinite' restart='always' to='360 18 18' type='rotate'%3E%3C/animateTransform%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A") !default;
-
-/***************/
-
-$schemadiff-diff-row-color: #fff9c4 !default;
-$schemadiff-source-row-color: #ffebee !default;
-$schemadiff-target-row-color: #fbe3bf !default;
-$schema-diff-color-fg: $input-color !default;
-
-$btn-primary-icon-bg: $color-bg !default;
-$btn-primary-icon-fg: $color-fg !default;
-$btn-primary-icon-hover-fg: $color-fg !default;
-$btn-primary-icon-hover-bg: $color-gray-light !default;
-$btn-primary-icon-border-color: $color-gray !default;
-$btn-primary-icon-border-disable-bg: $color-gray !default;
-$btn-primary-icon-disable-fg: $color-fg !default;
-$btn-primary-icon-disable-bg: $color-bg !default;
-
-$editor-toolbar-bg: $sql-gutters-bg !default;
-$grid-hover-bg-color: $table-hover-bg-color !default;
-$grid-hover-fg-color: $color-fg !default;
-
-$btn-copied-color-fg: $active-color !default;
-
-$quick-search-a-text-color: $black !default;
-$quick-search-span-text: $span-text-color !default;
-$quick-search-span-text-hover: $span-text-color-hover !default;
-$quick-search-info-icon: #646C82 !default;
-/** ERD **/
-$erd-row-padding: 0.25rem;
-$erd-node-border-color: $border-color !default;
-$erd-canvas-bg: $color-bg !default;
-$erd-canvas-grid: $color-gray !default;
-$erd-link-color: $color-fg !default;
-$erd-link-selected-color: $color-fg !default;
-
-$login-page-background: $color-primary !default;
-
-@function url-friendly-colour($colour) {
- @return '%23' + str-slice('#{$colour}', 2, -1)
-}
-$erd-bg-grid: url("data:image/svg+xml, %3Csvg width='100%25' viewBox='0 0 45 45' style='background-color:#{url-friendly-colour($erd-canvas-bg)}' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='smallGrid' width='15' height='15' patternUnits='userSpaceOnUse'%3E%3Cpath d='M 15 0 L 0 0 0 15' fill='none' stroke='#{url-friendly-colour($erd-canvas-grid)}' stroke-width='0.5'/%3E%3C/pattern%3E%3Cpattern id='grid' width='45' height='45' patternUnits='userSpaceOnUse'%3E%3Crect width='100' height='100' fill='url(%23smallGrid)'/%3E%3Cpath d='M 100 0 L 0 0 0 100' fill='none' stroke='#{url-friendly-colour($erd-canvas-grid)}' stroke-width='1'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23grid)' /%3E%3C/svg%3E%0A");
-
-// psql tool variables
-$psql-background: $color-bg !default;
-$psql-foreground: $color-fg !default;
-$psql-cursor: $color-fg !default;
-$psql-cursorAccent: $color-fg !default;
-$psql-selection: #326690 !default;
-
-
-/* After removing bootstrap */
-$dropdown-border-radius: 4px;
diff --git a/web/pgadmin/static/scss/resources/_theme.variables.scss.sample b/web/pgadmin/static/scss/resources/_theme.variables.scss.sample
deleted file mode 100644
index 5b6de74b3..000000000
--- a/web/pgadmin/static/scss/resources/_theme.variables.scss.sample
+++ /dev/null
@@ -1,71 +0,0 @@
-$color-bg: $white;
-$color-fg: #222222;
-$color-primary: #326690;
-$color-primary-fg: $white;
-$color-primary-light: #d6effc;
-$color-primary-light-fg: $color-primary;
-$color-secondary: $white;
-$color-ternary: #5b6d7c;
-$color-ternary-fg: $white;
-$color-danger: #e53935;
-$color-danger-fg: $white;
-$color-danger-light: #F39999;
-$color-danger-lighter: #FAECEC;
-$color-success: #43a047;
-$color-success-fg: $black;
-$color-success-light: #DDF1DE;
-$color-warning: #eea236;
-$color-warning-fg: $black;
-$color-warning-light: #fce5c5;;
-$color-gray-dark: #848ea0;
-$color-gray: #bac1cd;
-$color-gray-light: #ebeef3;
-$color-gray-lighter: #f3f5f9;
-$color-brand: $color-primary;
-$border-color: #dde0e6;
-$shadow-base-color: $color-gray-dark;
-$text-muted: $color-gray-dark;
-$header-bg: $color-bg;
-$alert-primary-bg: $color-primary-light !default;
-$alert-primary-color: $color-primary !default;
-$alert-danger-bg: $color-danger-lighter !default;
-$alert-danger-color: $color-danger !default;
-$alert-success-bg: $color-success-light !default;
-$alert-success-color: $color-success !default;
-$alert-warning-bg: $color-success-light !default;
-$alert-warning-color: $color-success !default;
-$negative-bg: $color-gray-light;
-$popover-bg: $color-gray-dark;
-$popover-body-color: $white;
-$table-hover-color: #000;
-$input-bg: $white;
-$input-color: $color-fg;
-$input-border-color: $border-color;
-$input-disabled-bg: $color-gray-lighter;
-$color-editor-fg: $input-color;
-$color-editor-keyword: #908;
-$color-editor-number: #964;
-$color-editor-string: #a11;
-$color-editor-variable: $color-fg;
-$color-editor-variable-2: #05a;
-$color-editor-builtin: #30a;
-$color-editor-comment: #a50;
-$color-editor-bracket: #997;
-$color-editor-operator: $color-fg;
-$color-editor-foldmarker: #0000FF;
-$color-editor-activeline: #50B0F0;
-$active-color: $color-primary;
-$table-bg: $color-bg;
-$explain-sev-2-bg: #FFEE88;
-$explain-sev-3-bg: #EE8800;
-$explain-sev-4-bg: #880000;
-$explain-sev-3-color: #FFFFFF;
-$explain-sev-4-color: #FFFFFF;
-$btn-ternary-border: $color-ternary;
-$btn-ternary-hover-bg: darken($color-ternary, 7.5%);
-$scrollbar-base-color: #bac1cd;
-$loader-icon : url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='utf-8'?%3e%3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 38 38' style='enable-background:new 0 0 38 38;' xml:space='preserve'%3e%3cstyle type='text/css'%3e .st0%7bfill:none;stroke:%23ebeef3;stroke-width:2;%7d .st1%7bfill:none;stroke:%23326690;stroke-width:2;%7d %3c/style%3e%3cg%3e%3cg transform='translate(1 1)'%3e%3ccircle class='st0' cx='18' cy='18' r='18'/%3e%3cpath class='st1' d='M36,18c0-9.9-8.1-18-18-18 '%3e%3canimateTransform accumulate='none' additive='replace' attributeName='transform' calcMode='linear' dur='0.7s' fill='remove' from='0 18 18' repeatCount='indefinite' restart='always' to='360 18 18' type='rotate'%3e%3c/animateTransform%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/svg%3e ");
-$loader-icon-small: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 23.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 38 38' style='enable-background:new 0 0 38 38;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23EBEEF3;stroke-width:5;%7D .st1%7Bfill:none;stroke:%23326690;stroke-width:5;%7D%0A%3C/style%3E%3Cg%3E%3Cg transform='translate(1 1)'%3E%3Ccircle class='st0' cx='18' cy='18' r='16'/%3E%3Cpath class='st1' d='M34,18c0-8.8-7.2-16-16-16 '%3E%3CanimateTransform accumulate='none' additive='replace' attributeName='transform' calcMode='linear' dur='0.7s' fill='remove' from='0 18 18' repeatCount='indefinite' restart='always' to='360 18 18' type='rotate'%3E%3C/animateTransform%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
-$schemadiff-diff-row-color: #fff9c4;
-$schemadiff-source-row-color: #ffebee;
-$schemadiff-target-row-color: #fbe3bf;
diff --git a/web/pgadmin/static/scss/resources/dark/_theme.variables.scss b/web/pgadmin/static/scss/resources/dark/_theme.variables.scss
deleted file mode 100644
index 5ab50e122..000000000
--- a/web/pgadmin/static/scss/resources/dark/_theme.variables.scss
+++ /dev/null
@@ -1,147 +0,0 @@
-$white: #fff;
-$black: #000;
-
-$color-bg: #212121;
-$color-fg: #d4d4d4;
-
-$color-primary: #234d6e;
-$color-primary-fg: $color-fg;
-$color-primary-light: #323E43;
-$color-primary-light-fg: $color-primary-fg;
-
-$color-secondary: #6b6b6b;
-
-$color-danger: #da6758;
-$color-danger-fg: $white;
-$color-danger-light: #914649;
-$color-danger-lighter: #212121;
-
-$color-success: #26852B;
-$color-success-fg: $black;
-$color-success-light: #2B472C;
-
-$color-success-disabled-fg: $color-fg;
-$color-success-disabled-bg: $color-success;
-
-$color-warning: #eea236;
-$color-warning-fg: $black;
-$color-warning-light: #b18d5a;
-
-$color-gray-dark: #212121;
-$color-gray: #2e2e2e;
-$color-gray-light: #303030;
-$color-gray-lighter: #424242;
-
-$color-brand: #1b71b5;
-
-$border-color: #4a4a4a;
-$shadow-base-color: #111111;
-
-$text-muted: #8A8A8A;
-
-$table-hover-color: #fff;
-
-$input-bg: $color-bg;
-$input-color: $color-fg;
-$input-border-color: #6b6b6b;
-$input-disabled-bg: inherit;
-
-$popover-bg: $color-bg;
-$popover-body-color: $color-fg;
-
-$active-color: $color-fg;
-
-$header-bg: $color-gray-lighter;
-
-$alert-primary-bg: $color-bg;
-$alert-primary-color: #50B0F0;
-$alert-danger-bg: $color-bg;
-$alert-danger-color: $color-danger;
-$alert-success-bg: $color-bg;
-$alert-success-color: $color-success;
-$alert-warning-bg: $color-warning;
-$alert-warning-color: $color-bg;
-
-$alert-header-fg: $color-fg;
-
-$table-bg: $color-gray-lighter;
-// SET sql text selection background color.
-$sql-editor-selection-bg: #536270;
-
-$color-editor-fg: $white;
-$color-editor-keyword: #db7c74;
-$color-editor-number: #7fcc5c;
-$color-editor-string: #e4e487;
-$color-editor-variable: #7dc9f1;
-$color-editor-variable-2: #7dc9f1;
-$color-editor-builtin: #e4e487;
-$color-editor-comment: #7fcc5c;
-$color-editor-bracket: #d6aaaa;
-$color-editor-operator: #d6aaaa;
-$color-editor-foldmarker: #0000FF !default;
-$color-editor-activeline: #323e43 !default;
-$color-editor-activeline-light: $color-editor-activeline;
-$color-editor-activeline-border-color: none;
-
-$login-page-background: $color-bg;
-
-$explain-sev-2-bg: #ded17e;
-$explain-sev-3-bg: #824d18;
-$explain-sev-4-bg: #880000;
-$explain-sev-3-color: $color-fg;
-$explain-sev-4-color: $color-fg;
-$explain-sev-2-color: #212529;
-
-$negative-bg: $color-bg;
-
-$scrollbar-base-color: #616161;
-
-$loader-icon : url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='utf-8'?%3e%3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 38 38' style='enable-background:new 0 0 38 38;' xml:space='preserve'%3e%3cstyle type='text/css'%3e .st0%7bfill:none;stroke:%23ebeef3;stroke-width:2;%7d .st1%7bfill:none;stroke:%2340617d;stroke-width:2;%7d %3c/style%3e%3cg%3e%3cg transform='translate(1 1)'%3e%3ccircle class='st0' cx='18' cy='18' r='18'/%3e%3cpath class='st1' d='M36,18c0-9.9-8.1-18-18-18 '%3e%3canimateTransform accumulate='none' additive='replace' attributeName='transform' calcMode='linear' dur='0.7s' fill='remove' from='0 18 18' repeatCount='indefinite' restart='always' to='360 18 18' type='rotate'%3e%3c/animateTransform%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/svg%3e ") !default;
-$loader-icon-small: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 23.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 38 38' style='enable-background:new 0 0 38 38;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23EBEEF3;stroke-width:5;%7D .st1%7Bfill:none;stroke:%2340617d;stroke-width:5;%7D%0A%3C/style%3E%3Cg%3E%3Cg transform='translate(1 1)'%3E%3Ccircle class='st0' cx='18' cy='18' r='16'/%3E%3Cpath class='st1' d='M34,18c0-8.8-7.2-16-16-16 '%3E%3CanimateTransform accumulate='none' additive='replace' attributeName='transform' calcMode='linear' dur='0.7s' fill='remove' from='0 18 18' repeatCount='indefinite' restart='always' to='360 18 18' type='rotate'%3E%3C/animateTransform%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A") !default;
-
-$schemadiff-diff-row-color: #807a48 !default;
-$schemadiff-source-row-color: #402025 !default;
-$schemadiff-target-row-color: #6b5438 !default;
-
-$btn-secondary-fg: $white;
-$btn-secondary-border-hover-bg: $color-gray-light;
-$btn-secondary-hover-fg: $white;
-
-$card-header-bg: $color-gray-lighter;
-$card-header-fg: $color-fg;
-$card-header-border-color: $border-color;
-
-
-$btn-primary-icon-bg: $color-secondary;
-$btn-primary-icon-fg: $white;
-$btn-primary-icon-hover-fg: $white;
-$btn-primary-icon-hover-bg: $color-gray-light;
-$btn-primary-icon-border-color: $color-gray;
-$btn-primary-icon-border-disable-bg: $color-gray;
-$btn-primary-icon-disable-fg: $white;
-$btn-primary-icon-disable-bg: $color-secondary;
-
-$btn-ternary-disabled-fg: $color-fg;
-$color-success-hover-fg: $color-fg;
-
-$datagrid-selected-color: $color-primary-fg;
-
-$span-text-color: #9D9FA1 !default;
-$span-text-color-hover: $white !default;
-$quick-search-a-text-color: $white !default;
-$quick-search-info-icon: #8A8A8A !default;
-
-/* ERD */
-$erd-row-padding: 0.25rem;
-$erd-node-border-color: $border-color;
-$erd-canvas-bg: $color-gray-light;
-$erd-canvas-grid: #444952;
-$erd-link-color: $color-fg;
-$erd-link-selected-color: $color-fg;
-
-// psql tool variables
-$psql-background: $color-bg;
-$psql-foreground: $color-fg;
-$psql-cursor: $color-fg;
-$psql-cursorAccent: $color-fg;
-$psql-selection: #d6effc;
diff --git a/web/pgadmin/static/scss/resources/high_contrast/_theme.variables.scss b/web/pgadmin/static/scss/resources/high_contrast/_theme.variables.scss
deleted file mode 100644
index c2d8e278d..000000000
--- a/web/pgadmin/static/scss/resources/high_contrast/_theme.variables.scss
+++ /dev/null
@@ -1,211 +0,0 @@
-$white: #FFFFFF;
-$black: #000;
-$color-bg: #010B15;
-$color-fg: $white;
-
-$color-primary: #84D6FF;
-$color-primary-fg: $color-bg;
-$color-primary-light: #84D6FF;
-$color-primary-light-fg: $color-bg;
-$color-secondary: #6B6B6B;
-
-$color-ternary: #c9d0d7;
-$color-ternary-fg: $color-bg;
-
-$color-danger: #EE7A55;
-$color-danger-icon-fg: $color-bg;
-$color-danger-fg: $color-bg;
-$color-danger-light: #EE7A55;
-$color-danger-lighter: #EE7A55;
-
-$color-success: #45D48A;
-$color-success-fg: $color-bg;
-$color-success-light: #45D48A;
-
-$color-success-disabled-fg: $color-fg;
-$color-success-disabled-bg: $color-bg;
-$color-success-disabled-border-color: $color-fg;
-$color-success-hover-fg: #010B15;
-
-$color-warning: #F4D35E;
-$color-warning-fg: $color-bg;
-$color-warning-light: #F4D35E;
-
-
-$color-gray-dark: #010B15;
-$color-gray: #1F2932;
-$color-gray-light: #2D3A48;
-$color-gray-lighter: #8B9CAD;
-
-$login-page-background: $color-bg;
-
-$sql-gutters-bg: $color-gray-light;
-$sql-title-bg: #1F2932;
-$sql-title-fg: $color-fg;
-$sql-editor-disable-bg: $color-gray;
-$sql-editor-selection-bg: $color-gray;
-$sql-history-detail-bg: $color-gray;
-$sql-history-success-fg: #010B15;
-
-$color-brand: $color-primary;
-
-$border-color: #A6B7C8;
-
-// $shadow-base-color: #C9D0D7;
-$shadow-base-color: transparent;
-
-$text-muted: #8b9cad;
-
-$header-bg: $color-bg;
-$card-cap-bg: $color-bg;
-$badge-header-bg: $color-bg;
-
-$alert-primary-bg: $color-primary;
-$alert-primary-color: $color-bg;
-$alert-danger-bg: $color-danger;
-$alert-danger-color: $color-bg !important;
-$alert-success-bg: $color-success;
-$alert-success-color: $color-bg;
-$alert-warning-bg: $color-warning;
-$alert-warning-color: $color-bg;
-
-$alert-color-fg: $color-bg;
-
-$negative-bg: $color-bg;
-
-$popover-bg: $color-gray-dark;
-$popover-body-color: $color-fg;
-
-$table-hover-color: $color-bg;
-$table-hover-bg: $color-fg !important;
-$table-hover-bg-color: $color-primary-light;
-
-$input-bg: $color-bg;
-$input-color: $color-fg;
-$input-border-color: $border-color;
-$input-disabled-bg: $color-gray;
-$input-focus-border-color: $color-primary;
-$input-btn-focus-shadow-color: none;
-
-$color-editor-fg: $white;
-$color-editor-keyword: #F8845F;
-$color-editor-number: #45D48A;
-$color-editor-string: #EAEA43;
-$color-editor-variable: #7DC9F1;
-$color-editor-variable-2: #7DC9F1;
-$color-editor-builtin: #B394FC;
-$color-editor-comment: #FFAD65;
-$color-editor-bracket: #D6AAAA;
-$color-editor-operator: $color-fg;
-$color-editor-foldmarker: #FFFFFF;
-$color-editor-activeline: #063057;
-$color-editor-activeline-light: $color-editor-activeline;
-$color-editor-activeline-border-color: none;
-
-$active-color: $color-fg;
-$active-border: 3px solid $color-primary;
-
-$table-bg: $color-bg;
-
-$explain-sev-2-bg: #EAEA43;
-$explain-sev-3-bg: #FFAD65;
-$explain-sev-4-bg: #EE7A55;
-$explain-sev-2-color: #010B15;
-$explain-sev-3-color: #010B15;
-$explain-sev-4-color: #010B15;
-
-$btn-ternary-border: $color-ternary;
-$btn-ternary-hover-bg: #a6b7c8;
-$btn-ternary-disabled-bg: $color-bg;
-$btn-ternary-disabled-fg: $color-fg;
-$btn-ternary-disabled-border-color: $btn-ternary-disabled-fg;
-
-$scrollbar-base-color: #C9D0D7;
-
-$loader-icon : url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='utf-8'?%3e%3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 38 38' style='enable-background:new 0 0 38 38;' xml:space='preserve'%3e%3cstyle type='text/css'%3e .st0%7bfill:none;stroke:%23ebeef3;stroke-width:2;%7d .st1%7bfill:none;stroke:%23326690;stroke-width:2;%7d %3c/style%3e%3cg%3e%3cg transform='translate(1 1)'%3e%3ccircle class='st0' cx='18' cy='18' r='18'/%3e%3cpath class='st1' d='M36,18c0-9.9-8.1-18-18-18 '%3e%3canimateTransform accumulate='none' additive='replace' attributeName='transform' calcMode='linear' dur='0.7s' fill='remove' from='0 18 18' repeatCount='indefinite' restart='always' to='360 18 18' type='rotate'%3e%3c/animateTransform%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/svg%3e ");
-$loader-icon-small: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 23.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 38 38' style='enable-background:new 0 0 38 38;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23EBEEF3;stroke-width:5;%7D .st1%7Bfill:none;stroke:%23326690;stroke-width:5;%7D%0A%3C/style%3E%3Cg%3E%3Cg transform='translate(1 1)'%3E%3Ccircle class='st0' cx='18' cy='18' r='16'/%3E%3Cpath class='st1' d='M34,18c0-8.8-7.2-16-16-16 '%3E%3CanimateTransform accumulate='none' additive='replace' attributeName='transform' calcMode='linear' dur='0.7s' fill='remove' from='0 18 18' repeatCount='indefinite' restart='always' to='360 18 18' type='rotate'%3E%3C/animateTransform%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
-
-$schemadiff-diff-row-color: #CFC56E;
-$schemadiff-source-row-color: #EE97A5;
-$schemadiff-target-row-color: #FFAD65;
-$schema-diff-color-fg: #010B15;
-
-$tree-text-fg: $color-fg;
-$tree-text-hover-fg: $color-bg;
-$tree-fg-hover: $color-bg;
-$tree-bg-hover: $color-fg;
-$tree-fg-selected: $color-fg;
-$tree-bg-selected: $color-primary-light;
-
-$sql-hint-active-fg: $color-bg;
-
-$btn-primary-hover-bg: $color-fg;
-$btn-primary-border-hover-bg: $color-fg;
-$btn-primary-disabled-bg: $color-gray-lighter;
-
-$btn-secondary-hover-bg: transparent;
-$btn-secondary-border-hover-bg: $color-fg;
-$btn-secondary-bg: transparent;
-$btn-secondary-fg: $color-primary;
-$btn-secondary-hover-fg: $color-fg;
-$btn-secondary-border: $color-primary;
-$btn-secondary-disabled-border-color: $color-gray-lighter;
-$btn-secondary-disabled-fg: $color-gray-lighter;
-
-$btn-frame-close-bg: $color-gray-light;
-// $dialog-box-shadow: 0rem 0rem transparent !important;
-
-$navbar-bg: #062F57;
-$navbar-dark-color: $color-fg;
-$navbar-dark-active-color: $color-fg;
-// $navbar-dark-disabled-color: $color-gray !important;
-
-$alert-header-bg: #062F57 !important;
-$alert-header-fg: $color-fg;
-$alert-action-bg: $alert-header-fg;
-$alert-action-hover-bg: $color-fg;
-$alert-dialog-body-bg: $color-gray;
-
-$datagrid-bg: $color-bg;
-$datagrid-selected-color : $color-primary-fg;
-
-$card-header-bg: #062F57 !important;
-$card-header-fg: $color-fg !important;
-$card-header-border-color: $card-header-bg;
-$card-border-color: transparent;
-$card-bg: $color-gray;
-
-$panel-color-fg: $color-ternary;
-$panel-border-color: $color-gray;
-
-$btn-primary-icon-bg: $color-bg;
-$btn-primary-icon-border-color: $color-fg;
-$btn-primary-icon-border-disable-bg: $color-gray-lighter;
-$btn-primary-icon-fg: $color-fg;
-$btn-primary-icon-hover-bg: $color-fg;
-$btn-primary-icon-hover-fg: $color-bg;
-$btn-primary-icon-disable-fg: $color-gray-lighter;
-$btn-primary-icon-disable-bg: $color-gray;
-
-$dropdown-link-remove-color: $color-bg;
-
-$editor-toolbar-bg: $color-bg;
-
-$grid-hover-bg-color: $white;
-$grid-hover-fg-color: #010B15;
-
-$btn-copied-color-fg: #010B15;
-
-$span-text-color: #9D9FA1 !default;
-$span-text-color-hover: $black !default;
-$quick-search-a-text-color: $black !default;
-$quick-search-info-icon: #8A8A8A !default;
-
-$select2-readonly: $color-gray;
-
-// psql tool variables
-$psql-background: $color-bg;
-$psql-foreground: $color-fg;
-$psql-cursor: $color-fg;
-$psql-cursorAccent: $color-fg;
-$psql-selection: $color-primary-light;
diff --git a/web/pgadmin/static/scss/resources/pgadmin.resources.scss b/web/pgadmin/static/scss/resources/pgadmin.resources.scss
deleted file mode 100644
index a92a34470..000000000
--- a/web/pgadmin/static/scss/resources/pgadmin.resources.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-/* All the global variables, mixins goes here */
-@use "sass:math";
-@import 'default.variables.scss';
-@import 'default.style.scss';
diff --git a/web/pgadmin/templates/base.html b/web/pgadmin/templates/base.html
index 7589adb40..5c96784a6 100644
--- a/web/pgadmin/templates/base.html
+++ b/web/pgadmin/templates/base.html
@@ -15,8 +15,8 @@
position: absolute;
min-width: 100%;
min-height: 100%;
- background: rgba(#000,0.6);
- z-index: 9999;
+ background: #090d1199;
+ z-index: 1056;
top: 0;
}
.pg-sp-container .pg-sp-content {
@@ -39,9 +39,6 @@
-
- {% set theme = get_theme_css() %}
-
{% block css_link %}{% endblock %}
@@ -84,6 +81,19 @@
+
- self.pgAdmin.Browser.psql.psql_mount({
- "is_enable": '{{is_enable}}',
- "sid": '{{sid}}',
- "db":'{{db|safe}}',
- "server_type": '{{server_type}}',
- "role": '{{role|safe}}',
- "platform": '{{platform}}',
- "o_db_name": '{{o_db_name|safe}}'
- })
-
- });
-{% endblock %}
diff --git a/web/pgadmin/tools/psql/templates/psql/index.html b/web/pgadmin/tools/psql/templates/psql/index.html
new file mode 100644
index 000000000..3d59be987
--- /dev/null
+++ b/web/pgadmin/tools/psql/templates/psql/index.html
@@ -0,0 +1,56 @@
+{% extends "base.html" %}
+{% block title %}{{title}}{% endblock %}
+
+{% block css_link %}
+
+
+{% endblock %}
+
+
+{% block body %}
+
+
+
+{% endblock %}
+
+
+{% block init_script %}
+try {
+ require(
+ ['sources/generated/browser_nodes'],
+ function() {
+ require(['sources/generated/psql_tool'], function(module) {
+ window.pgAdmin.Tools.Psql.loadComponent(
+ document.getElementById('psql-container'),{{ params|safe }});
+ }, function() {
+ console.log(arguments);
+ });
+ },
+ function() {
+ console.log(arguments);
+ });
+} catch (err) {
+ console.log(err);
+}
+{% endblock %}
diff --git a/web/pgadmin/tools/schema_diff/static/js/components/InputComponent.jsx b/web/pgadmin/tools/schema_diff/static/js/components/InputComponent.jsx
index ec948b8a5..cdc766dd6 100644
--- a/web/pgadmin/tools/schema_diff/static/js/components/InputComponent.jsx
+++ b/web/pgadmin/tools/schema_diff/static/js/components/InputComponent.jsx
@@ -10,8 +10,8 @@ import PropTypes from 'prop-types';
import React, { useContext, useState } from 'react';
-import { Box, Grid, Typography } from '@material-ui/core';
-import { makeStyles } from '@material-ui/styles';
+import { Box, Grid, Typography } from '@mui/material';
+import { makeStyles } from '@mui/styles';
import { InputSelect } from '../../../../../static/js/components/FormComponents';
import { SchemaDiffEventsContext } from './SchemaDiffComponent';
diff --git a/web/pgadmin/tools/schema_diff/static/js/components/ResultGridComponent.jsx b/web/pgadmin/tools/schema_diff/static/js/components/ResultGridComponent.jsx
index 71660b7c3..cff1cd443 100644
--- a/web/pgadmin/tools/schema_diff/static/js/components/ResultGridComponent.jsx
+++ b/web/pgadmin/tools/schema_diff/static/js/components/ResultGridComponent.jsx
@@ -13,11 +13,11 @@ import clsx from 'clsx';
import { SelectColumn } from 'react-data-grid';
import React, { useContext, useEffect, useLayoutEffect, useReducer, useRef, useState } from 'react';
-import { Box } from '@material-ui/core';
-import { makeStyles } from '@material-ui/styles';
-import KeyboardArrowRightRoundedIcon from '@material-ui/icons/KeyboardArrowRightRounded';
-import KeyboardArrowDownRoundedIcon from '@material-ui/icons/KeyboardArrowDownRounded';
-import InfoIcon from '@material-ui/icons/InfoRounded';
+import { Box } from '@mui/material';
+import { makeStyles } from '@mui/styles';
+import KeyboardArrowRightRoundedIcon from '@mui/icons-material/KeyboardArrowRightRounded';
+import KeyboardArrowDownRoundedIcon from '@mui/icons-material/KeyboardArrowDownRounded';
+import InfoIcon from '@mui/icons-material/InfoRounded';
import gettext from 'sources/gettext';
import url_for from 'sources/url_for';
diff --git a/web/pgadmin/tools/schema_diff/static/js/components/Results.jsx b/web/pgadmin/tools/schema_diff/static/js/components/Results.jsx
index f440661a7..571fc0d25 100644
--- a/web/pgadmin/tools/schema_diff/static/js/components/Results.jsx
+++ b/web/pgadmin/tools/schema_diff/static/js/components/Results.jsx
@@ -10,8 +10,8 @@ import gettext from 'sources/gettext';
import React, { useContext, useState, useEffect } from 'react';
-import { Box } from '@material-ui/core';
-import { makeStyles } from '@material-ui/styles';
+import { Box } from '@mui/material';
+import { makeStyles } from '@mui/styles';
import { InputSQL } from '../../../../../static/js/components/FormComponents';
import { SchemaDiffEventsContext } from './SchemaDiffComponent';
import { SCHEMA_DIFF_EVENT } from '../SchemaDiffConstants';
@@ -84,7 +84,7 @@ export function Results() {
{gettext('Difference')}
-
+
}
onClick={compareDiff}>{gettext('Compare')}
- } color={'primary'} splitButton
+ } color={'primary'} splitButton
name={MENUS.COMPARE} ref={compareRef} onClick={toggleMenu} >
@@ -182,7 +182,7 @@ export function SchemaDiffButtonComponent({ sourceData, targetData, selectedRowI
} className={classes.noactionBtn}
>{gettext('Filter')}
- } splitButton
+ } splitButton
name={MENUS.FILTER} ref={filterRef} onClick={toggleMenu} >
diff --git a/web/pgadmin/tools/schema_diff/static/js/components/SchemaDiffCompare.jsx b/web/pgadmin/tools/schema_diff/static/js/components/SchemaDiffCompare.jsx
index 368a7d1b5..7918e32c3 100644
--- a/web/pgadmin/tools/schema_diff/static/js/components/SchemaDiffCompare.jsx
+++ b/web/pgadmin/tools/schema_diff/static/js/components/SchemaDiffCompare.jsx
@@ -11,10 +11,10 @@ import PropTypes from 'prop-types';
import React, { useContext, useEffect, useState } from 'react';
-import { Box, Grid } from '@material-ui/core';
-import InfoRoundedIcon from '@material-ui/icons/InfoRounded';
-import HelpIcon from '@material-ui/icons/HelpRounded';
-import { makeStyles } from '@material-ui/styles';
+import { Box, Grid } from '@mui/material';
+import InfoRoundedIcon from '@mui/icons-material/InfoRounded';
+import HelpIcon from '@mui/icons-material/HelpRounded';
+import { makeStyles } from '@mui/styles';
import gettext from 'sources/gettext';
import url_for from 'sources/url_for';
diff --git a/web/pgadmin/tools/schema_diff/static/js/components/SchemaDiffComponent.jsx b/web/pgadmin/tools/schema_diff/static/js/components/SchemaDiffComponent.jsx
index 88646d261..15adfbfae 100644
--- a/web/pgadmin/tools/schema_diff/static/js/components/SchemaDiffComponent.jsx
+++ b/web/pgadmin/tools/schema_diff/static/js/components/SchemaDiffComponent.jsx
@@ -14,7 +14,8 @@ import {DividerBox} from 'rc-dock';
import url_for from 'sources/url_for';
-import { Box, makeStyles } from '@material-ui/core';
+import { Box } from '@mui/material';
+import { makeStyles } from '@mui/styles';
import { Results } from './Results';
import { SchemaDiffCompare } from './SchemaDiffCompare';
diff --git a/web/pgadmin/tools/search_objects/static/js/SearchObjects.jsx b/web/pgadmin/tools/search_objects/static/js/SearchObjects.jsx
index 9eb2dbbd1..a2dc4e095 100644
--- a/web/pgadmin/tools/search_objects/static/js/SearchObjects.jsx
+++ b/web/pgadmin/tools/search_objects/static/js/SearchObjects.jsx
@@ -6,11 +6,12 @@
// This software is released under the PostgreSQL Licence
//
//////////////////////////////////////////////////////////////
-import { Box, makeStyles } from '@material-ui/core';
+import { Box } from '@mui/material';
+import { makeStyles } from '@mui/styles';
import React, { useState, useMemo, useCallback } from 'react';
import PropTypes from 'prop-types';
-import HelpIcon from '@material-ui/icons/HelpRounded';
-import SearchRoundedIcon from '@material-ui/icons/SearchRounded';
+import HelpIcon from '@mui/icons-material/HelpRounded';
+import SearchRoundedIcon from '@mui/icons-material/SearchRounded';
import pgAdmin from 'sources/pgadmin';
import gettext from 'sources/gettext';
import url_for from 'sources/url_for';
diff --git a/web/pgadmin/tools/sqleditor/static/js/components/QueryToolComponent.jsx b/web/pgadmin/tools/sqleditor/static/js/components/QueryToolComponent.jsx
index a7ef94523..4e6e6b6fa 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/QueryToolComponent.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/QueryToolComponent.jsx
@@ -20,7 +20,7 @@ import getApiInstance, {callFetch, parseApiError} from '../../../../../static/js
import url_for from 'sources/url_for';
import { PANELS, QUERY_TOOL_EVENTS, CONNECTION_STATUS, MAX_QUERY_LENGTH } from './QueryToolConstants';
import { useInterval } from '../../../../../static/js/custom_hooks';
-import { Box } from '@material-ui/core';
+import { Box } from '@mui/material';
import { getDatabaseLabel, getTitle, setQueryToolDockerTitle } from '../sqleditor_title';
import gettext from 'sources/gettext';
import NewConnectionDialog from './dialogs/NewConnectionDialog';
diff --git a/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/Editors.jsx b/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/Editors.jsx
index 0f5ab89e6..3a36775a8 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/Editors.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/Editors.jsx
@@ -6,11 +6,12 @@
// This software is released under the PostgreSQL Licence
//
//////////////////////////////////////////////////////////////
-import { makeStyles, Box, Portal } from '@material-ui/core';
+import { Box, Portal } from '@mui/material';
+import { makeStyles } from '@mui/styles';
import React, {useContext, useLayoutEffect, useRef} from 'react';
import { DefaultButton, PrimaryButton } from '../../../../../../static/js/components/Buttons';
-import CheckRoundedIcon from '@material-ui/icons/CheckRounded';
-import CloseIcon from '@material-ui/icons/Close';
+import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
+import CloseIcon from '@mui/icons-material/Close';
import gettext from 'sources/gettext';
import clsx from 'clsx';
import JSONBigNumber from 'json-bignumber';
diff --git a/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/Formatters.jsx b/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/Formatters.jsx
index 991bc52eb..400d270a9 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/Formatters.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/Formatters.jsx
@@ -8,7 +8,7 @@
//////////////////////////////////////////////////////////////
import React from 'react';
import _ from 'lodash';
-import { makeStyles } from '@material-ui/core';
+import { makeStyles } from '@mui/styles';
import PropTypes from 'prop-types';
import CustomPropTypes from '../../../../../../static/js/custom_prop_types';
diff --git a/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/index.jsx b/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/index.jsx
index 3792eee29..d265f4b41 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/index.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/index.jsx
@@ -6,18 +6,19 @@
// This software is released under the PostgreSQL Licence
//
//////////////////////////////////////////////////////////////
-import { Box, makeStyles } from '@material-ui/core';
+import { Box } from '@mui/material';
+import { makeStyles } from '@mui/styles';
import _ from 'lodash';
import React, {useState, useEffect, useContext, useRef, useLayoutEffect, useMemo} from 'react';
import {Row, useRowSelection} from 'react-data-grid';
-import LockIcon from '@material-ui/icons/Lock';
-import EditIcon from '@material-ui/icons/Edit';
+import LockIcon from '@mui/icons-material/Lock';
+import EditIcon from '@mui/icons-material/Edit';
import { QUERY_TOOL_EVENTS } from '../QueryToolConstants';
import * as Editors from './Editors';
import * as Formatters from './Formatters';
import clsx from 'clsx';
import { PgIconButton } from '../../../../../../static/js/components/Buttons';
-import MapIcon from '@material-ui/icons/Map';
+import MapIcon from '@mui/icons-material/Map';
import { QueryToolEventsContext } from '../QueryToolComponent';
import PropTypes from 'prop-types';
import gettext from 'sources/gettext';
diff --git a/web/pgadmin/tools/sqleditor/static/js/components/dialogs/CloseRunningDialog.jsx b/web/pgadmin/tools/sqleditor/static/js/components/dialogs/CloseRunningDialog.jsx
index 7c40cc0e9..f2ce6b53b 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/dialogs/CloseRunningDialog.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/dialogs/CloseRunningDialog.jsx
@@ -1,10 +1,10 @@
import React from 'react';
import { useModalStyles } from '../../../../../../static/js/helpers/ModalProvider';
import gettext from 'sources/gettext';
-import { Box } from '@material-ui/core';
+import { Box } from '@mui/material';
import { DefaultButton, PrimaryButton } from '../../../../../../static/js/components/Buttons';
-import CloseIcon from '@material-ui/icons/CloseRounded';
-import CheckRoundedIcon from '@material-ui/icons/CheckRounded';
+import CloseIcon from '@mui/icons-material/CloseRounded';
+import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
import HTMLReactParser from 'html-react-parser';
import PropTypes from 'prop-types';
diff --git a/web/pgadmin/tools/sqleditor/static/js/components/dialogs/ConfirmPromotionContent.jsx b/web/pgadmin/tools/sqleditor/static/js/components/dialogs/ConfirmPromotionContent.jsx
index df40aa560..346ba1dd0 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/dialogs/ConfirmPromotionContent.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/dialogs/ConfirmPromotionContent.jsx
@@ -1,12 +1,13 @@
import React, { useState } from 'react';
import { useModalStyles } from '../../../../../../static/js/helpers/ModalProvider';
import gettext from 'sources/gettext';
-import { Box, makeStyles } from '@material-ui/core';
+import { Box } from '@mui/material';
+import { makeStyles } from '@mui/styles';
import { DefaultButton, PrimaryButton } from '../../../../../../static/js/components/Buttons';
-import CloseIcon from '@material-ui/icons/CloseRounded';
+import CloseIcon from '@mui/icons-material/CloseRounded';
import HTMLReactParser from 'html-react-parser';
import PropTypes from 'prop-types';
-import CheckRounded from '@material-ui/icons/CheckRounded';
+import CheckRounded from '@mui/icons-material/CheckRounded';
import { InputCheckbox } from '../../../../../../static/js/components/FormComponents';
diff --git a/web/pgadmin/tools/sqleditor/static/js/components/dialogs/ConfirmTransactionContent.jsx b/web/pgadmin/tools/sqleditor/static/js/components/dialogs/ConfirmTransactionContent.jsx
index bfe88d97f..d47fb56c4 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/dialogs/ConfirmTransactionContent.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/dialogs/ConfirmTransactionContent.jsx
@@ -1,9 +1,9 @@
import React from 'react';
import { useModalStyles } from '../../../../../../static/js/helpers/ModalProvider';
import gettext from 'sources/gettext';
-import { Box } from '@material-ui/core';
+import { Box } from '@mui/material';
import { DefaultButton, PrimaryButton } from '../../../../../../static/js/components/Buttons';
-import CloseIcon from '@material-ui/icons/CloseRounded';
+import CloseIcon from '@mui/icons-material/CloseRounded';
import HTMLReactParser from 'html-react-parser';
import { CommitIcon, RollbackIcon } from '../../../../../../static/js/components/ExternalIcon';
import PropTypes from 'prop-types';
diff --git a/web/pgadmin/tools/sqleditor/static/js/components/dialogs/FilterDialog.jsx b/web/pgadmin/tools/sqleditor/static/js/components/dialogs/FilterDialog.jsx
index 21e3e28bd..653018661 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/dialogs/FilterDialog.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/dialogs/FilterDialog.jsx
@@ -6,7 +6,7 @@
// This software is released under the PostgreSQL Licence
//
//////////////////////////////////////////////////////////////
-import { makeStyles } from '@material-ui/core';
+import { makeStyles } from '@mui/styles';
import React from 'react';
import SchemaView from '../../../../../../static/js/SchemaView';
import BaseUISchema from '../../../../../../static/js/SchemaView/base_schema.ui';
diff --git a/web/pgadmin/tools/sqleditor/static/js/components/dialogs/MacrosDialog.jsx b/web/pgadmin/tools/sqleditor/static/js/components/dialogs/MacrosDialog.jsx
index 3aaef338b..1c6f82716 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/dialogs/MacrosDialog.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/dialogs/MacrosDialog.jsx
@@ -6,7 +6,7 @@
// This software is released under the PostgreSQL Licence
//
//////////////////////////////////////////////////////////////
-import { makeStyles } from '@material-ui/core';
+import { makeStyles } from '@mui/styles';
import React from 'react';
import SchemaView from '../../../../../../static/js/SchemaView';
import BaseUISchema from '../../../../../../static/js/SchemaView/base_schema.ui';
diff --git a/web/pgadmin/tools/sqleditor/static/js/components/dialogs/NewConnectionDialog.jsx b/web/pgadmin/tools/sqleditor/static/js/components/dialogs/NewConnectionDialog.jsx
index 4aa3a1b55..00e17af2f 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/dialogs/NewConnectionDialog.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/dialogs/NewConnectionDialog.jsx
@@ -6,7 +6,7 @@
// This software is released under the PostgreSQL Licence
//
//////////////////////////////////////////////////////////////
-import { makeStyles } from '@material-ui/core';
+import { makeStyles } from '@mui/styles';
import React, { useState } from 'react';
import SchemaView from '../../../../../../static/js/SchemaView';
import BaseUISchema from '../../../../../../static/js/SchemaView/base_schema.ui';
diff --git a/web/pgadmin/tools/sqleditor/static/js/components/sections/ConnectionBar.jsx b/web/pgadmin/tools/sqleditor/static/js/components/sections/ConnectionBar.jsx
index 7f0738527..b96beda6a 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/sections/ConnectionBar.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/sections/ConnectionBar.jsx
@@ -7,20 +7,20 @@
//
//////////////////////////////////////////////////////////////
import React from 'react';
-import { makeStyles } from '@material-ui/styles';
-import { Box, CircularProgress, Tooltip } from '@material-ui/core';
+import { makeStyles } from '@mui/styles';
+import { Box, CircularProgress, Tooltip } from '@mui/material';
import { DefaultButton, PgButtonGroup, PgIconButton } from '../../../../../../static/js/components/Buttons';
-import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import { ConnectedIcon, DisonnectedIcon, QueryToolIcon } from '../../../../../../static/js/components/ExternalIcon';
import { QueryToolContext } from '../QueryToolComponent';
import { CONNECTION_STATUS, CONNECTION_STATUS_MESSAGE } from '../QueryToolConstants';
-import HourglassEmptyRoundedIcon from '@material-ui/icons/HourglassEmptyRounded';
-import QueryBuilderRoundedIcon from '@material-ui/icons/QueryBuilderRounded';
-import ErrorOutlineRoundedIcon from '@material-ui/icons/ErrorOutlineRounded';
-import ReportProblemRoundedIcon from '@material-ui/icons/ReportProblemRounded';
+import HourglassEmptyRoundedIcon from '@mui/icons-material/HourglassEmptyRounded';
+import QueryBuilderRoundedIcon from '@mui/icons-material/QueryBuilderRounded';
+import ErrorOutlineRoundedIcon from '@mui/icons-material/ErrorOutlineRounded';
+import ReportProblemRoundedIcon from '@mui/icons-material/ReportProblemRounded';
import { PgMenu, PgMenuItem } from '../../../../../../static/js/components/Menu';
import gettext from 'sources/gettext';
-import RotateLeftRoundedIcon from '@material-ui/icons/RotateLeftRounded';
+import RotateLeftRoundedIcon from '@mui/icons-material/RotateLeftRounded';
import PropTypes from 'prop-types';
import { useKeyboardShortcuts } from '../../../../../../static/js/custom_hooks';
import CustomPropTypes from '../../../../../../static/js/custom_prop_types';
diff --git a/web/pgadmin/tools/sqleditor/static/js/components/sections/GeometryViewer.jsx b/web/pgadmin/tools/sqleditor/static/js/components/sections/GeometryViewer.jsx
index ac9014275..40a492176 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/sections/GeometryViewer.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/sections/GeometryViewer.jsx
@@ -8,7 +8,7 @@
//////////////////////////////////////////////////////////////
import React, { useEffect, useRef } from 'react';
import ReactDOMServer from 'react-dom/server';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@mui/styles';
import _ from 'lodash';
import { MapContainer, TileLayer, LayersControl, GeoJSON, useMap } from 'react-leaflet';
import Leaflet, { CRS } from 'leaflet';
@@ -18,7 +18,7 @@ import gettext from 'sources/gettext';
import Theme from 'sources/Theme';
import clsx from 'clsx';
import PropTypes from 'prop-types';
-import { Box } from '@material-ui/core';
+import { Box } from '@mui/material';
import { PANELS } from '../QueryToolConstants';
import { QueryToolContext } from '../QueryToolComponent';
diff --git a/web/pgadmin/tools/sqleditor/static/js/components/sections/GraphVisualiser.jsx b/web/pgadmin/tools/sqleditor/static/js/components/sections/GraphVisualiser.jsx
index 2fd4fefe5..24f605c8b 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/sections/GraphVisualiser.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/sections/GraphVisualiser.jsx
@@ -13,13 +13,13 @@ import gettext from 'sources/gettext';
import PropTypes from 'prop-types';
import url_for from 'sources/url_for';
import Loader from 'sources/components/Loader';
-import { makeStyles } from '@material-ui/styles';
-import { Box } from '@material-ui/core';
-import ShowChartRoundedIcon from '@material-ui/icons/ShowChartRounded';
-import ZoomOutMapIcon from '@material-ui/icons/ZoomOutMap';
-import SaveAltIcon from '@material-ui/icons/SaveAlt';
-import ExpandLessRoundedIcon from '@material-ui/icons/ExpandLessRounded';
-import ExpandMoreRoundedIcon from '@material-ui/icons/ExpandMoreRounded';
+import { makeStyles } from '@mui/styles';
+import { Box } from '@mui/material';
+import ShowChartRoundedIcon from '@mui/icons-material/ShowChartRounded';
+import ZoomOutMapIcon from '@mui/icons-material/ZoomOutMap';
+import SaveAltIcon from '@mui/icons-material/SaveAlt';
+import ExpandLessRoundedIcon from '@mui/icons-material/ExpandLessRounded';
+import ExpandMoreRoundedIcon from '@mui/icons-material/ExpandMoreRounded';
import { InputSelect } from '../../../../../../static/js/components/FormComponents';
import { DefaultButton, PgButtonGroup, PgIconButton} from '../../../../../../static/js/components/Buttons';
import { LineChart, BarChart, PieChart, DATA_POINT_STYLE, DATA_POINT_SIZE,
diff --git a/web/pgadmin/tools/sqleditor/static/js/components/sections/MainToolBar.jsx b/web/pgadmin/tools/sqleditor/static/js/components/sections/MainToolBar.jsx
index 8b646acb2..cc5f16e56 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/sections/MainToolBar.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/sections/MainToolBar.jsx
@@ -7,20 +7,20 @@
//
//////////////////////////////////////////////////////////////
import React, {useContext, useCallback, useEffect, useState} from 'react';
-import { makeStyles } from '@material-ui/styles';
-import { Box } from '@material-ui/core';
+import { makeStyles } from '@mui/styles';
+import { Box } from '@mui/material';
import { PgButtonGroup, PgIconButton } from '../../../../../../static/js/components/Buttons';
-import FolderRoundedIcon from '@material-ui/icons/FolderRounded';
-import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
-import SaveRoundedIcon from '@material-ui/icons/SaveRounded';
-import StopRoundedIcon from '@material-ui/icons/StopRounded';
-import PlayArrowRoundedIcon from '@material-ui/icons/PlayArrowRounded';
+import FolderRoundedIcon from '@mui/icons-material/FolderRounded';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import SaveRoundedIcon from '@mui/icons-material/SaveRounded';
+import StopRoundedIcon from '@mui/icons-material/StopRounded';
+import PlayArrowRoundedIcon from '@mui/icons-material/PlayArrowRounded';
import { FilterIcon, CommitIcon, RollbackIcon } from '../../../../../../static/js/components/ExternalIcon';
-import EditRoundedIcon from '@material-ui/icons/EditRounded';
-import AssessmentRoundedIcon from '@material-ui/icons/AssessmentRounded';
-import ExplicitRoundedIcon from '@material-ui/icons/ExplicitRounded';
-import FormatListNumberedRoundedIcon from '@material-ui/icons/FormatListNumberedRounded';
-import HelpIcon from '@material-ui/icons/HelpRounded';
+import EditRoundedIcon from '@mui/icons-material/EditRounded';
+import AssessmentRoundedIcon from '@mui/icons-material/AssessmentRounded';
+import ExplicitRoundedIcon from '@mui/icons-material/ExplicitRounded';
+import FormatListNumberedRoundedIcon from '@mui/icons-material/FormatListNumberedRounded';
+import HelpIcon from '@mui/icons-material/HelpRounded';
import {QUERY_TOOL_EVENTS, CONNECTION_STATUS} from '../QueryToolConstants';
import { QueryToolConnectionContext, QueryToolContext, QueryToolEventsContext } from '../QueryToolComponent';
import { PgMenu, PgMenuDivider, PgMenuItem, usePgMenuGroup } from '../../../../../../static/js/components/Menu';
@@ -457,10 +457,10 @@ export function MainToolBar({containerRef, onFilterClick, onManageMacros}) {
disabled={!queryToolCtx.params.is_query_tool} accesskey={shortcut_key(queryToolPref.btn_edit_options)}
name="menu-edit" ref={editMenuRef} onClick={toggleMenu} />
-
- }
+
+ }
onClick={onFilterClick} disabled={buttonsDisabled['filter']} accesskey={shortcut_key(queryToolPref.btn_filter_dialog)}/>
- } splitButton
+ } splitButton
disabled={buttonsDisabled['filter']} name="menu-filter" ref={filterMenuRef} accesskey={shortcut_key(queryToolPref.btn_filter_options)}
onClick={toggleMenu} />
diff --git a/web/pgadmin/tools/sqleditor/static/js/components/sections/Messages.jsx b/web/pgadmin/tools/sqleditor/static/js/components/sections/Messages.jsx
index f0575483f..a5ff19e6b 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/sections/Messages.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/sections/Messages.jsx
@@ -6,7 +6,7 @@
// This software is released under the PostgreSQL Licence
//
//////////////////////////////////////////////////////////////
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@mui/styles';
import React from 'react';
import { QueryToolEventsContext } from '../QueryToolComponent';
import { QUERY_TOOL_EVENTS } from '../QueryToolConstants';
diff --git a/web/pgadmin/tools/sqleditor/static/js/components/sections/Query.jsx b/web/pgadmin/tools/sqleditor/static/js/components/sections/Query.jsx
index 12228b288..119186ecc 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/sections/Query.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/sections/Query.jsx
@@ -6,7 +6,7 @@
// This software is released under the PostgreSQL Licence
//
//////////////////////////////////////////////////////////////
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@mui/styles';
import React, {useContext, useCallback, useEffect, useMemo } from 'react';
import { format } from 'sql-formatter';
import { QueryToolContext, QueryToolEventsContext } from '../QueryToolComponent';
@@ -258,6 +258,38 @@ export default function Query() {
eventBus.registerListener(QUERY_TOOL_EVENTS.TRIGGER_QUERY_CHANGE, ()=>{
change();
});
+ eventBus.registerListener(QUERY_TOOL_EVENTS.TRIGGER_FORMAT_SQL, ()=>{
+ let selection = true, sql = editor.current?.getSelection();
+ let sqlEditorPref = preferencesStore.getPreferencesForModule('sqleditor');
+ /* New library does not support capitalize casing
+ so if a user has set capitalize casing we will
+ use preserve casing which is default for the library.
+ */
+ let formatPrefs = {
+ language: 'postgresql',
+ keywordCase: sqlEditorPref.keyword_case === 'capitalize' ? 'preserve' : sqlEditorPref.keyword_case,
+ identifierCase: sqlEditorPref.identifier_case === 'capitalize' ? 'preserve' : sqlEditorPref.identifier_case,
+ dataTypeCase: sqlEditorPref.data_type_case,
+ functionCase: sqlEditorPref.function_case,
+ logicalOperatorNewline: sqlEditorPref.logical_operator_new_line,
+ expressionWidth: sqlEditorPref.expression_width,
+ linesBetweenQueries: sqlEditorPref.lines_between_queries,
+ tabWidth: sqlEditorPref.tab_size,
+ useTabs: !sqlEditorPref.use_spaces,
+ denseOperators: !sqlEditorPref.spaces_around_operators,
+ newlineBeforeSemicolon: sqlEditorPref.new_line_before_semicolon
+ };
+ if(sql == '') {
+ sql = editor.current.getValue();
+ selection = false;
+ }
+ let formattedSql = format(sql,formatPrefs);
+ if(selection) {
+ editor.current.replaceSelection(formattedSql, 'around');
+ } else {
+ editor.current.setValue(formattedSql);
+ }
+ });
eventBus.registerListener(QUERY_TOOL_EVENTS.EDITOR_TOGGLE_CASE, ()=>{
let selectedText = editor.current?.getSelection();
if (!selectedText) return;
diff --git a/web/pgadmin/tools/sqleditor/static/js/components/sections/QueryHistory.jsx b/web/pgadmin/tools/sqleditor/static/js/components/sections/QueryHistory.jsx
index c91d2c89a..d5c7281ad 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/sections/QueryHistory.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/sections/QueryHistory.jsx
@@ -6,20 +6,20 @@
// This software is released under the PostgreSQL Licence
//
//////////////////////////////////////////////////////////////
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@mui/styles';
import React, { useContext } from 'react';
import { PANELS, QUERY_TOOL_EVENTS, MAX_QUERY_LENGTH } from '../QueryToolConstants';
import gettext from 'sources/gettext';
import pgAdmin from 'sources/pgadmin';
import _ from 'lodash';
import clsx from 'clsx';
-import { Box, Grid, List, ListItem, ListSubheader } from '@material-ui/core';
+import { Box, Grid, List, ListItem, ListSubheader } from '@mui/material';
import url_for from 'sources/url_for';
import { QueryToolConnectionContext, QueryToolContext, QueryToolEventsContext } from '../QueryToolComponent';
import moment from 'moment';
-import PlayArrowRoundedIcon from '@material-ui/icons/PlayArrowRounded';
-import AssessmentRoundedIcon from '@material-ui/icons/AssessmentRounded';
-import ExplicitRoundedIcon from '@material-ui/icons/ExplicitRounded';
+import PlayArrowRoundedIcon from '@mui/icons-material/PlayArrowRounded';
+import AssessmentRoundedIcon from '@mui/icons-material/AssessmentRounded';
+import ExplicitRoundedIcon from '@mui/icons-material/ExplicitRounded';
import { SaveDataIcon, CommitIcon, RollbackIcon, ViewDataIcon } from '../../../../../../static/js/components/ExternalIcon';
import { InputSwitch } from '../../../../../../static/js/components/FormComponents';
import CodeMirror from '../../../../../../static/js/components/ReactCodeMirror';
@@ -512,7 +512,7 @@ export function QueryHistory() {
-
} tabIndex="0" onKeyDown={onKeyPressed}>
+
} tabIndex="0" onKeyDown={onKeyPressed}>
{qhu.current.getGroups().map(([groupKey, groupHeader]) => (
diff --git a/web/pgadmin/tools/sqleditor/static/js/components/sections/ResultSet.jsx b/web/pgadmin/tools/sqleditor/static/js/components/sections/ResultSet.jsx
index 21678e6aa..d4a8a8dc1 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/sections/ResultSet.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/sections/ResultSet.jsx
@@ -15,7 +15,7 @@ import getApiInstance, { parseApiError } from '../../../../../../static/js/api_i
import { QueryToolContext, QueryToolEventsContext } from '../QueryToolComponent';
import gettext from 'sources/gettext';
import Loader from 'sources/components/Loader';
-import { Box } from '@material-ui/core';
+import { Box } from '@mui/material';
import { ResultSetToolbar } from './ResultSetToolbar';
import { LayoutDockerContext } from '../../../../../../static/js/helpers/Layout';
import { GeometryViewer } from './GeometryViewer';
@@ -25,7 +25,7 @@ import { getBrowser } from '../../../../../../static/js/utils';
import CopyData from '../QueryToolDataGrid/CopyData';
import moment from 'moment';
import ConfirmSaveContent from '../../../../../../static/js/Dialogs/ConfirmSaveContent';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@mui/styles';
import EmptyPanelMessage from '../../../../../../static/js/components/EmptyPanelMessage';
import { GraphVisualiser } from './GraphVisualiser';
import { usePgAdmin } from '../../../../../../static/js/BrowserComponent';
diff --git a/web/pgadmin/tools/sqleditor/static/js/components/sections/ResultSetToolbar.jsx b/web/pgadmin/tools/sqleditor/static/js/components/sections/ResultSetToolbar.jsx
index e9e4281d6..88454137f 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/sections/ResultSetToolbar.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/sections/ResultSetToolbar.jsx
@@ -7,16 +7,16 @@
//
//////////////////////////////////////////////////////////////
import React, {useContext, useCallback, useEffect, useState} from 'react';
-import { makeStyles } from '@material-ui/styles';
-import { Box } from '@material-ui/core';
+import { makeStyles } from '@mui/styles';
+import { Box } from '@mui/material';
import { PgButtonGroup, PgIconButton } from '../../../../../../static/js/components/Buttons';
-import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
-import PlaylistAddRoundedIcon from '@material-ui/icons/PlaylistAddRounded';
-import FileCopyRoundedIcon from '@material-ui/icons/FileCopyRounded';
-import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
-import TimelineRoundedIcon from '@material-ui/icons/TimelineRounded';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import PlaylistAddRoundedIcon from '@mui/icons-material/PlaylistAddRounded';
+import FileCopyRoundedIcon from '@mui/icons-material/FileCopyRounded';
+import DeleteRoundedIcon from '@mui/icons-material/DeleteRounded';
+import TimelineRoundedIcon from '@mui/icons-material/TimelineRounded';
import { PasteIcon, SaveDataIcon } from '../../../../../../static/js/components/ExternalIcon';
-import GetAppRoundedIcon from '@material-ui/icons/GetAppRounded';
+import GetAppRoundedIcon from '@mui/icons-material/GetAppRounded';
import {QUERY_TOOL_EVENTS} from '../QueryToolConstants';
import { QueryToolContext, QueryToolEventsContext } from '../QueryToolComponent';
import { PgMenu, PgMenuItem } from '../../../../../../static/js/components/Menu';
diff --git a/web/pgadmin/tools/sqleditor/static/js/components/sections/StatusBar.jsx b/web/pgadmin/tools/sqleditor/static/js/components/sections/StatusBar.jsx
index 56bab6651..d14be8e4f 100644
--- a/web/pgadmin/tools/sqleditor/static/js/components/sections/StatusBar.jsx
+++ b/web/pgadmin/tools/sqleditor/static/js/components/sections/StatusBar.jsx
@@ -8,8 +8,8 @@
//
//////////////////////////////////////////////////////////////
import React, { useEffect, useState, useContext } from 'react';
-import { makeStyles } from '@material-ui/styles';
-import { Box } from '@material-ui/core';
+import { makeStyles } from '@mui/styles';
+import { Box } from '@mui/material';
import clsx from 'clsx';
import _ from 'lodash';
import { QUERY_TOOL_EVENTS } from '../QueryToolConstants';
diff --git a/web/pgadmin/tools/user_management/static/js/UserManagementDialog.jsx b/web/pgadmin/tools/user_management/static/js/UserManagementDialog.jsx
index c8d9a8a67..dfb55c5a1 100644
--- a/web/pgadmin/tools/user_management/static/js/UserManagementDialog.jsx
+++ b/web/pgadmin/tools/user_management/static/js/UserManagementDialog.jsx
@@ -7,7 +7,7 @@
//
//////////////////////////////////////////////////////////////
import React from 'react';
-import { makeStyles } from '@material-ui/core';
+import { makeStyles } from '@mui/styles';
import SchemaView from '../../../../static/js/SchemaView';
import BaseUISchema from '../../../../static/js/SchemaView/base_schema.ui';
import pgAdmin from 'sources/pgadmin';
diff --git a/web/pgadmin/tools/user_management/static/scss/_user_management.scss b/web/pgadmin/tools/user_management/static/scss/_user_management.scss
deleted file mode 100644
index 65c765b20..000000000
--- a/web/pgadmin/tools/user_management/static/scss/_user_management.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-.bg-user-invalid {
- @extend .bg-warning-light;
-}
-
-.user_container {
- border-bottom: $panel-border;
- height: 100%;
- min-height: 0;
- margin-top: $title-height;
-}
-
-.user_management {
- height: 100%;
- overflow: hidden;
-
- & .navtab-inline-controls {
- position: absolute;
- width: 100%;
- }
-}
-
-.user_management .search_users form {
- margin: 0;
-}
-
-.user_management table {
- display: block;
- height: 100%;
- overflow: auto;
- border: 0 none;
-}
diff --git a/web/regression/feature_tests/keyboard_shortcut_test.py b/web/regression/feature_tests/keyboard_shortcut_test.py
index 9a24cb0aa..08f352667 100644
--- a/web/regression/feature_tests/keyboard_shortcut_test.py
+++ b/web/regression/feature_tests/keyboard_shortcut_test.py
@@ -109,7 +109,7 @@ class KeyboardShortcutFeatureTest(BaseFeatureTest):
else:
attempt -= 1
- maximize_button = self.page.find_by_xpath(
+ maximize_button = self.page.find_by_css_selector(
NavMenuLocators.maximize_pref_dialogue_css)
maximize_button.click()
@@ -129,9 +129,5 @@ class KeyboardShortcutFeatureTest(BaseFeatureTest):
file_menu.click()
file_menu.send_keys(key)
- maximize_button = self.page.find_by_xpath(
- NavMenuLocators.maximize_pref_dialogue_css)
- maximize_button.click()
-
# save and close the preference dialog.
self.page.click_modal('Save')
diff --git a/web/regression/feature_tests/pg_datatype_validation_test.py b/web/regression/feature_tests/pg_datatype_validation_test.py
index 3f4f2aeda..d7364f8e9 100644
--- a/web/regression/feature_tests/pg_datatype_validation_test.py
+++ b/web/regression/feature_tests/pg_datatype_validation_test.py
@@ -123,7 +123,7 @@ class PGDataypeFeatureTest(BaseFeatureTest):
NavMenuLocators.show_system_objects_pref_label_xpath))
)
- maximize_button = self.page.find_by_xpath(
+ maximize_button = self.page.find_by_css_selector(
NavMenuLocators.maximize_pref_dialogue_css)
maximize_button.click()
@@ -148,11 +148,6 @@ class PGDataypeFeatureTest(BaseFeatureTest):
switch_box_element.click()
- maximize_button = self.page.find_by_xpath(
- NavMenuLocators.maximize_pref_dialogue_css)
- maximize_button.click()
- time.sleep(0.5)
-
# save and close the preference dialog.
self.page.click_modal('Save')
break
diff --git a/web/regression/feature_tests/pg_utilities_backup_restore_test.py b/web/regression/feature_tests/pg_utilities_backup_restore_test.py
index 67265136b..943ab3701 100644
--- a/web/regression/feature_tests/pg_utilities_backup_restore_test.py
+++ b/web/regression/feature_tests/pg_utilities_backup_restore_test.py
@@ -262,7 +262,7 @@ class PGUtilitiesBackupFeatureTest(BaseFeatureTest):
(By.XPATH, NavMenuLocators.show_system_objects_pref_label_xpath))
)
- maximize_button = self.page.find_by_xpath(
+ maximize_button = self.page.find_by_css_selector(
NavMenuLocators.maximize_pref_dialogue_css)
maximize_button.click()
@@ -325,10 +325,6 @@ class PGUtilitiesBackupFeatureTest(BaseFeatureTest):
print('Binary path Key is Incorrect or '
'server version is None.')
- maximize_button = self.page.find_by_xpath(
- NavMenuLocators.maximize_pref_dialogue_css)
- maximize_button.click()
-
# save and close the preference dialog.
if path_already_set:
self.page.click_modal('Cancel')
diff --git a/web/regression/feature_tests/test_copy_sql_to_query_tool.py b/web/regression/feature_tests/test_copy_sql_to_query_tool.py
index 454e19a06..2a0af0045 100644
--- a/web/regression/feature_tests/test_copy_sql_to_query_tool.py
+++ b/web/regression/feature_tests/test_copy_sql_to_query_tool.py
@@ -115,7 +115,7 @@ class CopySQLFeatureTest(BaseFeatureTest):
wait.until(EC.presence_of_element_located(
(By.XPATH, NavMenuLocators.show_system_objects_pref_label_xpath))
)
- maximize_button = self.page.find_by_xpath(
+ maximize_button = self.page.find_by_css_selector(
NavMenuLocators.maximize_pref_dialogue_css)
maximize_button.click()
@@ -144,9 +144,5 @@ class CopySQLFeatureTest(BaseFeatureTest):
switch_box_element.click()
- maximize_button = self.page.find_by_xpath(
- NavMenuLocators.maximize_pref_dialogue_css)
- maximize_button.click()
-
# save and close the preference dialog.
self.page.click_modal('Save')
diff --git a/web/regression/feature_tests/xss_checks_roles_control_test.py b/web/regression/feature_tests/xss_checks_roles_control_test.py
index 2362a19f6..d6a5aeca6 100644
--- a/web/regression/feature_tests/xss_checks_roles_control_test.py
+++ b/web/regression/feature_tests/xss_checks_roles_control_test.py
@@ -75,7 +75,7 @@ class CheckRoleMembershipControlFeatureTest(BaseFeatureTest):
edit_object.click()
membership_tab = WebDriverWait(self.page.driver, 4).until(
EC.presence_of_element_located((
- By.XPATH, "//span[normalize-space(text())='Membership']")))
+ By.XPATH, "//button[normalize-space(text())='Membership']")))
membership_tab.click()
# Fetch the source code for our custom control
@@ -89,7 +89,7 @@ class CheckRoleMembershipControlFeatureTest(BaseFeatureTest):
'<h1>test</h1>',
'Role Membership Control'
)
- self.page.find_by_xpath("//button/span[text()='Close']").click()
+ self.page.find_by_xpath("//button[text()='Close']").click()
def _check_escaped_characters(self, source_code, string_to_find, source):
# For XSS we need to search against element's html code
diff --git a/web/regression/feature_utils/locators.py b/web/regression/feature_utils/locators.py
index 1ef7a2718..a7ae5a31e 100644
--- a/web/regression/feature_utils/locators.py
+++ b/web/regression/feature_utils/locators.py
@@ -51,8 +51,9 @@ class NavMenuLocators:
show_system_objects_pref_label_xpath = \
"//label[contains(text(), 'Show system objects?')]"
- maximize_pref_dialogue_css = "//div[text()='Preferences']" \
- "//following::div//span[1]"
+ maximize_pref_dialogue_css = "button[data-label='Maximize']"
+
+ maximize_pref_dialogue_css = "button[data-label='Maximize']"
specified_pref_node_exp_status = \
"//*[@id='treeContainer']//div//span[text()='{0}']"
@@ -278,6 +279,6 @@ class PropertyDialogueLocators:
# This will contain xpaths for elements in properties dialogue
server_dialogue_title = "//span[text()='Register - Server']"
- server_connection_tab = "//button/span[text()='Connection']"
+ server_connection_tab = "//button[text()='Connection']"
- server_tab_save = "//button/span[text()='Save']"
+ server_tab_save = "//button[text()='Save']"
diff --git a/web/regression/feature_utils/pgadmin_page.py b/web/regression/feature_utils/pgadmin_page.py
index 24be4f3f1..a413e0028 100644
--- a/web/regression/feature_utils/pgadmin_page.py
+++ b/web/regression/feature_utils/pgadmin_page.py
@@ -155,8 +155,22 @@ class PgadminPage:
self.click_element(self.find_by_css_selector(
"li[data-label='Query Tool']"))
- self.wait_for_element_to_be_visible(
- self.driver, "//div[@id='btn-conn-status']", 5)
+ self.driver.switch_to.default_content()
+ WebDriverWait(self.driver, 10).until(
+ EC.frame_to_be_available_and_switch_to_it(
+ (By.TAG_NAME, "iframe")))
+
+ WebDriverWait(self.driver, self.timeout).until(
+ EC.visibility_of_element_located(
+ (By.CSS_SELECTOR, QueryToolLocators.btn_execute_query_css)
+ ), "Timed out waiting for execute query button to appear"
+ )
+
+ # Need to add this as by default tool tip is shown for file
+ ActionChains(self.driver).move_to_element(
+ self.driver.find_element(
+ By.CSS_SELECTOR,
+ QueryToolLocators.btn_execute_query_css)).perform()
def open_view_data(self, table_name):
self.click_element(self.find_by_css_selector(
@@ -898,9 +912,7 @@ class PgadminPage:
return element
except (NoSuchElementException, WebDriverException):
return False
-
time.sleep(1)
- # self.wait_for_query_tool_loading_indicator_to_disappear(12)
retry = 2
while retry > 0:
@@ -909,9 +921,7 @@ class PgadminPage:
WebDriverWait(self.driver, 10).until(
EC.frame_to_be_available_and_switch_to_it(
(By.TAG_NAME, "iframe")))
- self.find_by_css_selector(
- "div.dock-tab-btn[id$=\"id-query\"]").click()
- # self.find_by_xpath("//div[text()='Query Editor']").click()
+ self.find_by_xpath("//span[text()='Query']").click()
codemirror_ele = WebDriverWait(
self.driver, timeout=self.timeout, poll_frequency=0.01) \
diff --git a/web/regression/javascript/__mocks__/@material-ui/core.jsx b/web/regression/javascript/__mocks__/@mui/material.jsx
similarity index 92%
rename from web/regression/javascript/__mocks__/@material-ui/core.jsx
rename to web/regression/javascript/__mocks__/@mui/material.jsx
index 4c0b85e85..8907b5669 100644
--- a/web/regression/javascript/__mocks__/@material-ui/core.jsx
+++ b/web/regression/javascript/__mocks__/@mui/material.jsx
@@ -1,6 +1,6 @@
import React, { useRef } from 'react';
import CustomPropTypes from '../../../../pgadmin/static/js/custom_prop_types';
-export * from '@material-ui/core';
+export * from '@mui/material';
// mock popper
// eslint-disable-next-line no-unused-vars
diff --git a/web/regression/javascript/__mocks__/popper.js.js b/web/regression/javascript/__mocks__/popper.js.js
deleted file mode 100644
index 4e67d8c62..000000000
--- a/web/regression/javascript/__mocks__/popper.js.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import PopperJs from 'popper.js';
-
-export default class Popper {
- static placements = PopperJs.placements;
-
- destroy() {/* mock */}
- scheduleUpdate() {/* mock */}
- update() {/* mock */}
-}
diff --git a/web/regression/javascript/components/Buttons.spec.js b/web/regression/javascript/components/Buttons.spec.js
index 111518cf0..645519da8 100644
--- a/web/regression/javascript/components/Buttons.spec.js
+++ b/web/regression/javascript/components/Buttons.spec.js
@@ -10,7 +10,8 @@
import React from 'react';
import { withTheme } from '../fake_theme';
-import InfoIcon from '@material-ui/icons/InfoRounded';
+import InfoIcon from '@mui/icons-material/InfoRounded';
+
import {PrimaryButton, DefaultButton, PgIconButton} from 'sources/components/Buttons';
import { render, screen } from '@testing-library/react';
diff --git a/web/regression/javascript/erd/onetomany_link_spec.js b/web/regression/javascript/erd/onetomany_link_spec.js
index e59440fcb..13df64d1c 100644
--- a/web/regression/javascript/erd/onetomany_link_spec.js
+++ b/web/regression/javascript/erd/onetomany_link_spec.js
@@ -16,6 +16,7 @@ import {
import OneToManyPortModel from 'pgadmin.tools.erd/erd_tool/ports/OneToManyPort';
import {OneToManyLinkModel, OneToManyLinkWidget, OneToManyLinkFactory} from 'pgadmin.tools.erd/erd_tool/links/OneToManyLink';
import { render } from '@testing-library/react';
+import Theme from '../../../pgadmin/static/js/Theme';
describe('ERD OneToManyLinkModel', ()=>{
@@ -130,7 +131,9 @@ describe('ERD OneToManyLinkWidget', ()=>{
it('render', ()=>{
let linkWidget = render(
-
+
+
+
);
let paths = linkWidget.container.querySelectorAll('g g');
diff --git a/web/regression/javascript/quick_search/quick_search_spec.js b/web/regression/javascript/quick_search/quick_search_spec.js
index 562d64ade..83f40dc69 100644
--- a/web/regression/javascript/quick_search/quick_search_spec.js
+++ b/web/regression/javascript/quick_search/quick_search_spec.js
@@ -10,13 +10,16 @@
import React from 'react';
import QuickSearch from '../../../pgadmin/static/js/QuickSearch';
import { render } from '@testing-library/react';
+import Theme from '../../../pgadmin/static/js/Theme';
let ctrl;
describe('quick search test cases', function () {
beforeEach(() => {
ctrl = render(
-
+
+
+
);
});
diff --git a/web/regression/javascript/setup-jest.js b/web/regression/javascript/setup-jest.js
index 5b76c81a6..b17906cdb 100644
--- a/web/regression/javascript/setup-jest.js
+++ b/web/regression/javascript/setup-jest.js
@@ -65,5 +65,4 @@ document.createRange = () => {
};
-jest.setTimeout(15000); // 1 second
-
+jest.setTimeout(18000); // 1 second
diff --git a/web/webpack.config.js b/web/webpack.config.js
index 08df04708..3bc905dc2 100644
--- a/web/webpack.config.js
+++ b/web/webpack.config.js
@@ -11,13 +11,11 @@
// Import file, libraries and plugins
const path = require('path');
const webpack = require('webpack');
-const fs = require('fs');
const sourceDir = __dirname + '/pgadmin/static';
// webpack.shim.js contains path references for resolve > alias configuration
// and other util function used in CommonsChunksPlugin.
const webpackShimConfig = require('./webpack.shim');
const PRODUCTION = process.env.NODE_ENV === 'production';
-const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const extractStyle = new MiniCssExtractPlugin({
@@ -33,7 +31,6 @@ const devToolVal = PRODUCTION ? false : 'eval';
const analyzerMode = process.env.ANALYZE=='true' ? 'static' : 'disabled';
const outputPath = __dirname + '/pgadmin/static/js/generated';
-const pgadminThemesJson = __dirname + '/pgadmin/misc/themes/pgadmin.themes.json';
// Expose libraries in app context so they need not to
// require('libname') when used in a module
@@ -63,290 +60,13 @@ const bundleAnalyzer = new BundleAnalyzerPlugin({
const copyFiles = new CopyPlugin({
patterns: [
- pgadminThemesJson,
{
- from: './pgadmin/static/scss/resources/**/*.png',
+ from: './pgadmin/static/img/*.png',
to: 'img/[name][ext]',
},
],
});
-function cssToBeSkiped(curr_path) {
- /** Skip all templates **/
- if(curr_path.indexOf('template') > -1) {
- return true;
- }
-
- for(let value of webpackShimConfig.css_bundle_skip) {
- if(path.join(__dirname, value) === curr_path){
- return true;
- }
- }
- return false;
-}
-
-/* Get all the style files recursively and store in array to
- * give input to webpack.
- */
-function pushModulesStyles(curr_path, pgadminStyles, extn) {
- /** Skip Directories */
- if(cssToBeSkiped(curr_path)) {
- return;
- }
-
- fs.readdirSync(curr_path).map(function(curr_file) {
- /** Skip Files */
- if(cssToBeSkiped(path.join(curr_path, curr_file))) {
- return;
- }
-
- let stats = fs.statSync(path.join(curr_path, curr_file));
- /* if directory, dig further */
- if(stats.isDirectory()) {
- pushModulesStyles(path.join(curr_path, curr_file), pgadminStyles, extn);
- }
- else if(stats.isFile() && (curr_file.endsWith(extn))) {
- pgadminStyles.push(path.join(curr_path, curr_file));
- }
- });
-}
-
-let pgadminScssStyles = [];
-let pgadminCssStyles = [];
-
-/* Include what is given in shim config */
-for(let value of webpackShimConfig.css_bundle_include) {
- if(value.endsWith('.scss')) {
- pgadminScssStyles.push(path.join(__dirname, value));
- } else if(value.endsWith('.css')){
- pgadminCssStyles.push(path.join(__dirname, value));
- }
-}
-
-pushModulesStyles(path.join(__dirname,'./pgadmin'), pgadminScssStyles, '.scss');
-pushModulesStyles(path.join(__dirname,'./pgadmin'), pgadminCssStyles, '.css');
-pgadminCssStyles.push(path.join(__dirname,'./pgadmin/static/js/pgadmin.fonticon.js'));
-
-/* Get all the themes */
-
-let all_themes_dir = path.join(__dirname,'./pgadmin/static/scss/resources');
-let pgadminThemes = {};
-/* Read all the theme dirs */
-/* Theme format
- "theme_name": {
- "disp_name": "theme_name",
- "cssfile": "pgadmin.theme.theme_name",
- "preview_img": "theme_name_preview.png"
- }
-*/
-fs.readdirSync(all_themes_dir).map(function(curr_dir) {
- let stats = fs.statSync(path.join(all_themes_dir, curr_dir));
-
- if(stats.isDirectory()) {
- /* Theme directory found */
- let cssfile = 'pgadmin.theme.'+curr_dir;
-
- let disp_name = curr_dir;
-
- pgadminThemes[curr_dir] = {
- /* For now lets keep it as beta release */
- disp_name: disp_name,
- cssfile: cssfile,
- preview_img: curr_dir + '_preview.png',
- };
- }
-});
-
-fs.writeFileSync(pgadminThemesJson, JSON.stringify(pgadminThemes, null, 4));
-
-let themeCssRules = function(theme_name) {
- return [{
- test: /\.svg$/,
- oneOf: [
- {
- issuer: /\.[jt]sx?$/,
- resourceQuery: /svgr/,
- use: ['@svgr/webpack'],
- },
- {
- type: 'asset',
- parser: {
- dataUrlCondition: {
- maxSize: 4 * 1024, // 4kb
- }
- }
- },
- ],
- },{
- test: /\.(jpe?g|png|gif)$/i,
- type: 'asset',
- parser: {
- dataUrlCondition: {
- maxSize: 4 * 1024, // 4kb
- },
- },
- generator: {
- filename: 'img/[name].[ext]',
- },
- exclude: /vendor/,
- },{
- test: /\.(eot|ttf|woff|woff2)$/,
- type: 'asset/resource',
- generator: {
- filename: 'fonts/[name].[ext]',
- },
- include: [
- /node_modules/,
- path.join(sourceDir, '/css/'),
- path.join(sourceDir, '/scss/'),
- path.join(sourceDir, '/fonts/'),
- ],
- exclude: /vendor/,
- },{
- test: /\.scss$/,
- use: [
- {
- loader: MiniCssExtractPlugin.loader,
- options: {
- publicPath: '',
- },
- },
- {
- loader: 'css-loader',
- options: {
- url: false,
- sourceMap: true,
- },
- },
- {
- loader: 'postcss-loader',
- options: {
- postcssOptions: () =>({
- plugins: [
- require('autoprefixer')(),
- ],
- }),
- },
- },
- {loader: 'sass-loader'},
- {
- loader: 'sass-resources-loader',
- options: {
- resources: function(_theme_name){
- let ret_res = [
- './pgadmin/static/scss/resources/pgadmin.resources.scss',
- ];
- if(_theme_name!='standard') {
- ret_res.unshift('./pgadmin/static/scss/resources/' + _theme_name + '/_theme.variables.scss');
- }
- return ret_res;
- }(theme_name),
- },
- },
- ],
- }, {
- test: /\.css$/,
- use: [
- {
- loader: MiniCssExtractPlugin.loader,
- options: {
- publicPath: '',
- },
- },
- 'css-loader',
- {
- loader: 'postcss-loader',
- options: {
- postcssOptions: () =>({
- plugins: [
- require('autoprefixer')(),
- ],
- }),
- },
- },
- ],
- }];
-};
-
-let getThemeWebpackConfig = function(theme_name) {
- return {
- mode: envType,
- devtool: devToolVal,
- stats: { children: false },
- // The base directory, an absolute path, for resolving entry points and loaders
- // from configuration.
- context: __dirname,
- // Specify entry points of application
- entry: {
- [pgadminThemes[theme_name].cssfile]: pgadminScssStyles,
- },
- // path: The output directory for generated bundles(defined in entry)
- // Ref: https://webpack.js.org/configuration/output/#output-library
- output: {
- libraryTarget: 'amd',
- path: outputPath,
- filename: '[name].js',
- libraryExport: 'default',
- publicPath: '',
- },
- // Templates files which contains python code needs to load dynamically
- // Such files specified in externals are loaded at first and defined in
- // the start of generated bundle within define(['libname'],fn) etc.
- externals: webpackShimConfig.externals,
- module: {
- // References:
- // Module and Rules: https://webpack.js.org/configuration/module/
- // Loaders: https://webpack.js.org/loaders/
- //
- rules: themeCssRules(theme_name),
- },
- optimization: {
- minimize: true,
- minimizer: [
- new CssMinimizerPlugin({
- minimizerOptions: {
- preset: [
- 'default',
- {
- discardComments: { removeAll: true },
- },
- ],
- }
- }),
- ],
- },
- resolve: {
- alias: webpackShimConfig.resolveAlias,
- modules: ['node_modules', '.'],
- extensions: ['.js'],
- unsafeCache: true,
- fallback: {
- 'fs': false
- },
- },
- // Watch mode Configuration: After initial build, webpack will watch for
- // changes in files and compiles only files which are changed,
- // if watch is set to True
- // Reference: https://webpack.js.org/configuration/watch/#components/sidebar/sidebar.jsx
- watchOptions: {
- aggregateTimeout: 300,
- poll: 1000,
- ignored: /node_modules/,
- },
- // Define list of Plugins used in Production or development mode
- // Ref:https://webpack.js.org/concepts/plugins/#components/sidebar/sidebar.jsx
- plugins: [
- extractStyle,
- sourceMapDevToolPlugin,
- ]
- };
-};
-
-let pgadminThemesWebpack = [];
-Object.keys(pgadminThemes).forEach((theme_name)=>{
- pgadminThemesWebpack.push(getThemeWebpackConfig(theme_name));
-});
-
module.exports = [{
mode: envType,
devtool: devToolVal,
@@ -363,9 +83,7 @@ module.exports = [{
erd_tool: './pgadmin/tools/erd/static/js/index.js',
psql_tool: './pgadmin/tools/psql/static/js/index.js',
debugger: './pgadmin/tools/debugger/static/js/index.js',
- 'pgadmin.style': pgadminCssStyles,
- pgadmin: pgadminScssStyles,
- style: './pgadmin/static/css/style.css',
+ style: ['./pgadmin/static/css/style.css', './pgadmin/static/js/pgadmin.fonticon.js']
},
// path: The output directory for generated bundles(defined in entry)
// Ref: https://webpack.js.org/configuration/output/#output-library
@@ -529,13 +247,77 @@ module.exports = [{
'pure|pgadmin.tools.file_manager',
'pure|pgadmin.tools.search_objects',
'pure|pgadmin.tools.erd',
- 'pure|pgadmin.tools.psql_module',
+ 'pure|pgadmin.tools.psql',
'pure|pgadmin.tools.sqleditor',
'pure|pgadmin.misc.cloud',
],
},
},
- }].concat(themeCssRules('standard')),
+ },
+ {
+ test: /\.svg$/,
+ oneOf: [
+ {
+ issuer: /\.[jt]sx?$/,
+ resourceQuery: /svgr/,
+ use: ['@svgr/webpack'],
+ },
+ {
+ type: 'asset',
+ parser: {
+ dataUrlCondition: {
+ maxSize: 4 * 1024, // 4kb
+ }
+ }
+ },
+ ],
+ },{
+ test: /\.(jpe?g|png|gif)$/i,
+ type: 'asset',
+ parser: {
+ dataUrlCondition: {
+ maxSize: 4 * 1024, // 4kb
+ },
+ },
+ generator: {
+ filename: 'img/[name].[ext]',
+ },
+ exclude: /vendor/,
+ },{
+ test: /\.(eot|ttf|woff|woff2)$/,
+ type: 'asset/resource',
+ generator: {
+ filename: 'fonts/[name].[ext]',
+ },
+ include: [
+ /node_modules/,
+ path.join(sourceDir, '/css/'),
+ path.join(sourceDir, '/fonts/'),
+ ],
+ exclude: /vendor/,
+ },
+ {
+ test: /\.css$/,
+ use: [
+ {
+ loader: MiniCssExtractPlugin.loader,
+ options: {
+ publicPath: '',
+ },
+ },
+ 'css-loader',
+ {
+ loader: 'postcss-loader',
+ options: {
+ postcssOptions: () =>({
+ plugins: [
+ require('autoprefixer')(),
+ ],
+ }),
+ },
+ },
+ ],
+ }],
// Prevent module from parsing through webpack, helps in reducing build time
noParse: [/moment.js/],
},
@@ -668,4 +450,4 @@ module.exports = [{
sourceMapDevToolPlugin,
copyFiles,
],
-}].concat(pgadminThemesWebpack);
+}];
diff --git a/web/webpack.shim.js b/web/webpack.shim.js
index a4f7e2e4c..b56ac2e42 100644
--- a/web/webpack.shim.js
+++ b/web/webpack.shim.js
@@ -156,7 +156,6 @@ let webpackShimConfig = {
'pgadmin.tools.schema_diff': path.join(__dirname, './pgadmin/tools/schema_diff/static/js/'),
'pgadmin.tools.search_objects': path.join(__dirname, './pgadmin/tools/search_objects/static/js/'),
'pgadmin.tools.erd': path.join(__dirname, './pgadmin/tools/erd/static/js/'),
- 'pgadmin.tools.psql_module': path.join(__dirname, './pgadmin/tools/psql/static/js/psql_module'),
'pgadmin.tools.psql': path.join(__dirname, './pgadmin/tools/psql/static/js/'),
'pgadmin.tools.sqleditor': path.join(__dirname, './pgadmin/tools/sqleditor/static/js/'),
'pgadmin.tools.user_management': path.join(__dirname, './pgadmin/tools/user_management/static/js/user_management'),
@@ -212,17 +211,5 @@ let webpackShimConfig = {
}
return false;
},
-
- /* These will be skipped when webpack picks css/scss files recursively to bundle */
- css_bundle_skip: [
- './pgadmin/static',
- ],
-
- /* These will be included in array formed by recursive traversing for css/scss files */
- css_bundle_include: [
- './pgadmin/static/js/components/PgTree/scss/styles.scss',
- './pgadmin/static/scss/pgadmin.scss',
- './pgadmin/static/css/pgadmin.css',
- ],
};
module.exports = webpackShimConfig;
diff --git a/web/yarn.lock b/web/yarn.lock
index 1a1990d1c..0c9515117 100644
--- a/web/yarn.lock
+++ b/web/yarn.lock
@@ -2265,7 +2265,7 @@ __metadata:
languageName: node
linkType: hard
-"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.11.1, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.0, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.18.0, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.4.4, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.0, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.8.3, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
+"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.11.1, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.0, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.18.0, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.8.3, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
version: 7.22.5
resolution: "@babel/runtime@npm:7.22.5"
dependencies:
@@ -2274,6 +2274,24 @@ __metadata:
languageName: node
linkType: hard
+"@babel/runtime@npm:^7.23.2":
+ version: 7.24.0
+ resolution: "@babel/runtime@npm:7.24.0"
+ dependencies:
+ regenerator-runtime: ^0.14.0
+ checksum: 7a6a5d40fbdd68491ec183ba2e631c07415119960083b4fd76564cce3751e9acd2f12ab89575e38496fa389fa06d458732776e69ee1858e366cc3fbdb049f847
+ languageName: node
+ linkType: hard
+
+"@babel/runtime@npm:^7.23.9":
+ version: 7.23.9
+ resolution: "@babel/runtime@npm:7.23.9"
+ dependencies:
+ regenerator-runtime: ^0.14.0
+ checksum: 6bbebe8d27c0c2dd275d1ac197fc1a6c00e18dab68cc7aaff0adc3195b45862bae9c4cc58975629004b0213955b2ed91e99eccb3d9b39cabea246c657323d667
+ languageName: node
+ linkType: hard
+
"@babel/template@npm:^7.22.15, @babel/template@npm:^7.3.3":
version: 7.22.15
resolution: "@babel/template@npm:7.22.15"
@@ -2451,21 +2469,24 @@ __metadata:
languageName: node
linkType: hard
-"@date-io/core@npm:1.x, @date-io/core@npm:^1.3.13, @date-io/core@npm:^1.3.6":
- version: 1.3.13
- resolution: "@date-io/core@npm:1.3.13"
- checksum: 5a9e9d1de20f0346a3c7d2d5946190caef4bfb0b64d82ba1f4c566657a9192667c94ebe7f438d11d4286d9c190974daad4fb2159294225cd8af4d9a140239879
+"@date-io/core@npm:^3.0.0":
+ version: 3.0.0
+ resolution: "@date-io/core@npm:3.0.0"
+ checksum: 5fdecfb1c6bfe30864096c3ce3f9e73a359a6a12f34a5829504eea7a0327122e361a95d9501ad0eaaf02b2e45322913985d9f47e1c667f3c0a4f7d792c116884
languageName: node
linkType: hard
-"@date-io/date-fns@npm:1.x":
- version: 1.3.13
- resolution: "@date-io/date-fns@npm:1.3.13"
+"@date-io/date-fns@npm:3.x":
+ version: 3.0.0
+ resolution: "@date-io/date-fns@npm:3.0.0"
dependencies:
- "@date-io/core": ^1.3.13
+ "@date-io/core": ^3.0.0
peerDependencies:
- date-fns: ^2.0.0
- checksum: 0026c0e538ea4add57a11936ff6bdb07e99f25275f8bb28c4702bbb7e82c3a41b3e8124132aa719180d462c01a26a3b4801e41b7349cdb73813749d4bf5e8fbd
+ date-fns: ^3.2.0
+ peerDependenciesMeta:
+ date-fns:
+ optional: true
+ checksum: bf9c3bbcd5466d4e4d1847921c5b2e4e3b6166c0e27d601be292384ab7ba26fc0fa3934382b71a7c70d42e781955ac47280b2834d6a70d242618a044c4f098fb
languageName: node
linkType: hard
@@ -2547,7 +2568,7 @@ __metadata:
languageName: node
linkType: hard
-"@emotion/hash@npm:0.8.0, @emotion/hash@npm:^0.8.0":
+"@emotion/hash@npm:0.8.0":
version: 0.8.0
resolution: "@emotion/hash@npm:0.8.0"
checksum: 4b35d88a97e67275c1d990c96d3b0450451d089d1508619488fc0acb882cb1ac91e93246d471346ebd1b5402215941ef4162efe5b51534859b39d8b3a0e3ffaa
@@ -2591,7 +2612,28 @@ __metadata:
languageName: node
linkType: hard
-"@emotion/react@npm:^11.1.5, @emotion/react@npm:^11.8.1":
+"@emotion/react@npm:^11.11.3":
+ version: 11.11.3
+ resolution: "@emotion/react@npm:11.11.3"
+ dependencies:
+ "@babel/runtime": ^7.18.3
+ "@emotion/babel-plugin": ^11.11.0
+ "@emotion/cache": ^11.11.0
+ "@emotion/serialize": ^1.1.3
+ "@emotion/use-insertion-effect-with-fallbacks": ^1.0.1
+ "@emotion/utils": ^1.2.1
+ "@emotion/weak-memoize": ^0.3.1
+ hoist-non-react-statics: ^3.3.1
+ peerDependencies:
+ react: ">=16.8.0"
+ peerDependenciesMeta:
+ "@types/react":
+ optional: true
+ checksum: 2e4b223591569f0a41686d5bd72dc8778629b7be33267e4a09582979e6faee4d7218de84e76294ed827058d4384d75557b5d71724756539c1f235e9a69e62b2e
+ languageName: node
+ linkType: hard
+
+"@emotion/react@npm:^11.8.1":
version: 11.11.1
resolution: "@emotion/react@npm:11.11.1"
dependencies:
@@ -2638,6 +2680,19 @@ __metadata:
languageName: node
linkType: hard
+"@emotion/serialize@npm:^1.1.3":
+ version: 1.1.3
+ resolution: "@emotion/serialize@npm:1.1.3"
+ dependencies:
+ "@emotion/hash": ^0.9.1
+ "@emotion/memoize": ^0.8.1
+ "@emotion/unitless": ^0.8.1
+ "@emotion/utils": ^1.2.1
+ csstype: ^3.0.2
+ checksum: 5a756ce7e2692322683978d8ed2e84eadd60bd6f629618a82c5018c84d98684b117e57fad0174f68ec2ec0ac089bb2e0bcc8ea8c2798eb904b6d3236aa046063
+ languageName: node
+ linkType: hard
+
"@emotion/sheet@npm:0.9.4":
version: 0.9.4
resolution: "@emotion/sheet@npm:0.9.4"
@@ -2772,6 +2827,15 @@ __metadata:
languageName: node
linkType: hard
+"@floating-ui/core@npm:^1.0.0":
+ version: 1.6.0
+ resolution: "@floating-ui/core@npm:1.6.0"
+ dependencies:
+ "@floating-ui/utils": ^0.2.1
+ checksum: 2e25c53b0c124c5c9577972f8ae21d081f2f7895e6695836a53074463e8c65b47722744d6d2b5a993164936da006a268bcfe87fe68fd24dc235b1cb86bed3127
+ languageName: node
+ linkType: hard
+
"@floating-ui/core@npm:^1.3.1":
version: 1.3.1
resolution: "@floating-ui/core@npm:1.3.1"
@@ -2788,6 +2852,35 @@ __metadata:
languageName: node
linkType: hard
+"@floating-ui/dom@npm:^1.6.1":
+ version: 1.6.3
+ resolution: "@floating-ui/dom@npm:1.6.3"
+ dependencies:
+ "@floating-ui/core": ^1.0.0
+ "@floating-ui/utils": ^0.2.0
+ checksum: 81cbb18ece3afc37992f436e469e7fabab2e433248e46fff4302d12493a175b0c64310f8a971e6e1eda7218df28ace6b70237b0f3c22fe12a21bba05b5579555
+ languageName: node
+ linkType: hard
+
+"@floating-ui/react-dom@npm:^2.0.8":
+ version: 2.0.8
+ resolution: "@floating-ui/react-dom@npm:2.0.8"
+ dependencies:
+ "@floating-ui/dom": ^1.6.1
+ peerDependencies:
+ react: ">=16.8.0"
+ react-dom: ">=16.8.0"
+ checksum: 5da7f13a69281e38859a3203a608fe9de1d850b332b355c10c0c2427c7b7209a0374c10f6295b6577c1a70237af8b678340bd4cc0a4b1c66436a94755d81e526
+ languageName: node
+ linkType: hard
+
+"@floating-ui/utils@npm:^0.2.0, @floating-ui/utils@npm:^0.2.1":
+ version: 0.2.1
+ resolution: "@floating-ui/utils@npm:0.2.1"
+ checksum: 9ed4380653c7c217cd6f66ae51f20fdce433730dbc77f95b5abfb5a808f5fdb029c6ae249b4e0490a816f2453aa6e586d9a873cd157fdba4690f65628efc6e06
+ languageName: node
+ linkType: hard
+
"@fortawesome/fontawesome-free@npm:latest":
version: 6.4.2
resolution: "@fortawesome/fontawesome-free@npm:6.4.2"
@@ -3208,164 +3301,391 @@ __metadata:
languageName: node
linkType: hard
-"@material-ui/core@npm:4.12.4":
- version: 4.12.4
- resolution: "@material-ui/core@npm:4.12.4"
+"@mui/base@npm:5.0.0-beta.36":
+ version: 5.0.0-beta.36
+ resolution: "@mui/base@npm:5.0.0-beta.36"
dependencies:
- "@babel/runtime": ^7.4.4
- "@material-ui/styles": ^4.11.5
- "@material-ui/system": ^4.12.2
- "@material-ui/types": 5.1.0
- "@material-ui/utils": ^4.11.3
- "@types/react-transition-group": ^4.2.0
- clsx: ^1.0.4
+ "@babel/runtime": ^7.23.9
+ "@floating-ui/react-dom": ^2.0.8
+ "@mui/types": ^7.2.13
+ "@mui/utils": ^5.15.9
+ "@popperjs/core": ^2.11.8
+ clsx: ^2.1.0
+ prop-types: ^15.8.1
+ peerDependencies:
+ "@types/react": ^17.0.0 || ^18.0.0
+ react: ^17.0.0 || ^18.0.0
+ react-dom: ^17.0.0 || ^18.0.0
+ peerDependenciesMeta:
+ "@types/react":
+ optional: true
+ checksum: 25fda38025f2299908739b2d591c58884ee05a9af099f19124d12b16098fd245fed6716891288b1998c12477cc36d7e14f07c4d9eb5eb3a9e75b0400970cd7c9
+ languageName: node
+ linkType: hard
+
+"@mui/base@npm:5.0.0-beta.39, @mui/base@npm:^5.0.0-beta.22":
+ version: 5.0.0-beta.39
+ resolution: "@mui/base@npm:5.0.0-beta.39"
+ dependencies:
+ "@babel/runtime": ^7.23.9
+ "@floating-ui/react-dom": ^2.0.8
+ "@mui/types": ^7.2.13
+ "@mui/utils": ^5.15.13
+ "@popperjs/core": ^2.11.8
+ clsx: ^2.1.0
+ prop-types: ^15.8.1
+ peerDependencies:
+ "@types/react": ^17.0.0 || ^18.0.0
+ react: ^17.0.0 || ^18.0.0
+ react-dom: ^17.0.0 || ^18.0.0
+ peerDependenciesMeta:
+ "@types/react":
+ optional: true
+ checksum: 551de268d83a2924b75ae9e04900c3b8e1d338a9b71fd78b6fdbca71a0e96c8b5e13b7b44e70d6fd705930a7f37987350ea43edab9ae4dbe63af7e8ac9efcf58
+ languageName: node
+ linkType: hard
+
+"@mui/core-downloads-tracker@npm:^5.15.10":
+ version: 5.15.10
+ resolution: "@mui/core-downloads-tracker@npm:5.15.10"
+ checksum: aeb16b31f60c08cc03585fedadceadd54aa48dda394fb945ab885f884c1b1692efb72309465641b6ca2367bd53d5fdce15f189d4691f42b59206622ffb2d6f0f
+ languageName: node
+ linkType: hard
+
+"@mui/icons-material@npm:^5.15.10":
+ version: 5.15.10
+ resolution: "@mui/icons-material@npm:5.15.10"
+ dependencies:
+ "@babel/runtime": ^7.23.9
+ peerDependencies:
+ "@mui/material": ^5.0.0
+ "@types/react": ^17.0.0 || ^18.0.0
+ react: ^17.0.0 || ^18.0.0
+ peerDependenciesMeta:
+ "@types/react":
+ optional: true
+ checksum: 33be07435d511542516965b428044f6f823d001d9fbdc97d957172c310fe4292815842bd82a73a20b6f3a8f2feaa231c39f73e687b7bb36b63e33b531c134532
+ languageName: node
+ linkType: hard
+
+"@mui/lab@npm:^5.0.0-alpha.165":
+ version: 5.0.0-alpha.168
+ resolution: "@mui/lab@npm:5.0.0-alpha.168"
+ dependencies:
+ "@babel/runtime": ^7.23.9
+ "@mui/base": 5.0.0-beta.39
+ "@mui/system": ^5.15.13
+ "@mui/types": ^7.2.13
+ "@mui/utils": ^5.15.13
+ clsx: ^2.1.0
+ prop-types: ^15.8.1
+ peerDependencies:
+ "@emotion/react": ^11.5.0
+ "@emotion/styled": ^11.3.0
+ "@mui/material": ">=5.15.0"
+ "@types/react": ^17.0.0 || ^18.0.0
+ react: ^17.0.0 || ^18.0.0
+ react-dom: ^17.0.0 || ^18.0.0
+ peerDependenciesMeta:
+ "@emotion/react":
+ optional: true
+ "@emotion/styled":
+ optional: true
+ "@types/react":
+ optional: true
+ checksum: 20c10fac9ad6af64b6f35d6c6426d473857ead7de6cab31e1ed572ec8bc5dcf5081e30cd8656d5d8a04ae0c5d7e8bc4e305bb23ab4a71a942a7133b57624d910
+ languageName: node
+ linkType: hard
+
+"@mui/material@npm:^5.15.10":
+ version: 5.15.10
+ resolution: "@mui/material@npm:5.15.10"
+ dependencies:
+ "@babel/runtime": ^7.23.9
+ "@mui/base": 5.0.0-beta.36
+ "@mui/core-downloads-tracker": ^5.15.10
+ "@mui/system": ^5.15.9
+ "@mui/types": ^7.2.13
+ "@mui/utils": ^5.15.9
+ "@types/react-transition-group": ^4.4.10
+ clsx: ^2.1.0
+ csstype: ^3.1.3
+ prop-types: ^15.8.1
+ react-is: ^18.2.0
+ react-transition-group: ^4.4.5
+ peerDependencies:
+ "@emotion/react": ^11.5.0
+ "@emotion/styled": ^11.3.0
+ "@types/react": ^17.0.0 || ^18.0.0
+ react: ^17.0.0 || ^18.0.0
+ react-dom: ^17.0.0 || ^18.0.0
+ peerDependenciesMeta:
+ "@emotion/react":
+ optional: true
+ "@emotion/styled":
+ optional: true
+ "@types/react":
+ optional: true
+ checksum: 2c453877d8784ba6330c236888cac86f793ee914d27ccac426ec241c448b836a190017cb6402e9931d7a9d566f02ea2f317a14332e70c87ba136436d45ae18f2
+ languageName: node
+ linkType: hard
+
+"@mui/private-theming@npm:^5.15.13":
+ version: 5.15.13
+ resolution: "@mui/private-theming@npm:5.15.13"
+ dependencies:
+ "@babel/runtime": ^7.23.9
+ "@mui/utils": ^5.15.13
+ prop-types: ^15.8.1
+ peerDependencies:
+ "@types/react": ^17.0.0 || ^18.0.0
+ react: ^17.0.0 || ^18.0.0
+ peerDependenciesMeta:
+ "@types/react":
+ optional: true
+ checksum: 607a93b3845ba0d484ecdc7400023aa066d7aa30f4dd7c11f5af22489415d473cb343dce875717186b7861af0213f39fc5955c3db2c6f99d4e49f370dc58e332
+ languageName: node
+ linkType: hard
+
+"@mui/private-theming@npm:^5.15.9":
+ version: 5.15.9
+ resolution: "@mui/private-theming@npm:5.15.9"
+ dependencies:
+ "@babel/runtime": ^7.23.9
+ "@mui/utils": ^5.15.9
+ prop-types: ^15.8.1
+ peerDependencies:
+ "@types/react": ^17.0.0 || ^18.0.0
+ react: ^17.0.0 || ^18.0.0
+ peerDependenciesMeta:
+ "@types/react":
+ optional: true
+ checksum: 15cd0a7d8ba05452ef5f7a6a8856d333f6e6bfc3fe4ca0e242a4e37053856872603e374593f42a297d26353cdc0a8567d8424f8e7912b8bbd7f4507f9f9f2a74
+ languageName: node
+ linkType: hard
+
+"@mui/styled-engine@npm:^5.15.11":
+ version: 5.15.11
+ resolution: "@mui/styled-engine@npm:5.15.11"
+ dependencies:
+ "@babel/runtime": ^7.23.9
+ "@emotion/cache": ^11.11.0
+ csstype: ^3.1.3
+ prop-types: ^15.8.1
+ peerDependencies:
+ "@emotion/react": ^11.4.1
+ "@emotion/styled": ^11.3.0
+ react: ^17.0.0 || ^18.0.0
+ peerDependenciesMeta:
+ "@emotion/react":
+ optional: true
+ "@emotion/styled":
+ optional: true
+ checksum: a3e3e48e9d6db0d9d6b51b6762613940c1918e38b6153c1f22f28b1aa4e7dc9e8cbdaf0a5ffbc45ff4286bf31f8af66265b3eb4404259db3b060e6a950db4778
+ languageName: node
+ linkType: hard
+
+"@mui/styled-engine@npm:^5.15.9":
+ version: 5.15.9
+ resolution: "@mui/styled-engine@npm:5.15.9"
+ dependencies:
+ "@babel/runtime": ^7.23.9
+ "@emotion/cache": ^11.11.0
+ csstype: ^3.1.3
+ prop-types: ^15.8.1
+ peerDependencies:
+ "@emotion/react": ^11.4.1
+ "@emotion/styled": ^11.3.0
+ react: ^17.0.0 || ^18.0.0
+ peerDependenciesMeta:
+ "@emotion/react":
+ optional: true
+ "@emotion/styled":
+ optional: true
+ checksum: 0a02a3b83d47277fa38421a6cfe0e8c6451e7d5a4d5b5d389ba970ebc55172040f0f2bd628f0211b659b922965ead416da0453e4bc15e7e83942f03ffa57621d
+ languageName: node
+ linkType: hard
+
+"@mui/styles@npm:^5.15.10":
+ version: 5.15.10
+ resolution: "@mui/styles@npm:5.15.10"
+ dependencies:
+ "@babel/runtime": ^7.23.9
+ "@emotion/hash": ^0.9.1
+ "@mui/private-theming": ^5.15.9
+ "@mui/types": ^7.2.13
+ "@mui/utils": ^5.15.9
+ clsx: ^2.1.0
+ csstype: ^3.1.3
hoist-non-react-statics: ^3.3.2
- popper.js: 1.16.1-lts
- prop-types: ^15.7.2
- react-is: ^16.8.0 || ^17.0.0
- react-transition-group: ^4.4.0
+ jss: ^10.10.0
+ jss-plugin-camel-case: ^10.10.0
+ jss-plugin-default-unit: ^10.10.0
+ jss-plugin-global: ^10.10.0
+ jss-plugin-nested: ^10.10.0
+ jss-plugin-props-sort: ^10.10.0
+ jss-plugin-rule-value-function: ^10.10.0
+ jss-plugin-vendor-prefixer: ^10.10.0
+ prop-types: ^15.8.1
peerDependencies:
- "@types/react": ^16.8.6 || ^17.0.0
- react: ^16.8.0 || ^17.0.0
- react-dom: ^16.8.0 || ^17.0.0
+ "@types/react": ^17.0.0 || ^18.0.0
+ react: ^17.0.0
peerDependenciesMeta:
"@types/react":
optional: true
- checksum: 96b48deccda87ced841b1db45bed2be6d2b6d1b4eae72cd5c9b931201cb72026330688e0fead54e715bcead40b267ea88bde781c9f1563b1a71a5c51bf187289
+ checksum: da8456bffabd5b238c541c76102a36e79d90dd62575570a8ebaa00bf9be7c413a90000837f3989ffcf0f252ffae63d65d9b04eada93e047f0946cefb0dde2e79
languageName: node
linkType: hard
-"@material-ui/icons@npm:^4.11.2":
- version: 4.11.3
- resolution: "@material-ui/icons@npm:4.11.3"
+"@mui/system@npm:^5.15.13":
+ version: 5.15.13
+ resolution: "@mui/system@npm:5.15.13"
dependencies:
- "@babel/runtime": ^7.4.4
+ "@babel/runtime": ^7.23.9
+ "@mui/private-theming": ^5.15.13
+ "@mui/styled-engine": ^5.15.11
+ "@mui/types": ^7.2.13
+ "@mui/utils": ^5.15.13
+ clsx: ^2.1.0
+ csstype: ^3.1.3
+ prop-types: ^15.8.1
peerDependencies:
- "@material-ui/core": ^4.0.0
- "@types/react": ^16.8.6 || ^17.0.0
- react: ^16.8.0 || ^17.0.0
- react-dom: ^16.8.0 || ^17.0.0
+ "@emotion/react": ^11.5.0
+ "@emotion/styled": ^11.3.0
+ "@types/react": ^17.0.0 || ^18.0.0
+ react: ^17.0.0 || ^18.0.0
+ peerDependenciesMeta:
+ "@emotion/react":
+ optional: true
+ "@emotion/styled":
+ optional: true
+ "@types/react":
+ optional: true
+ checksum: 556fb0f1bd90d83497429b170f60fa92aaabbd0f91b1bf56b4c2ceed1a11ae11e7dfb93f878c874219ac706e549d033e7918bf7fcaba49a05c1696c86e4d6e7c
+ languageName: node
+ linkType: hard
+
+"@mui/system@npm:^5.15.9":
+ version: 5.15.9
+ resolution: "@mui/system@npm:5.15.9"
+ dependencies:
+ "@babel/runtime": ^7.23.9
+ "@mui/private-theming": ^5.15.9
+ "@mui/styled-engine": ^5.15.9
+ "@mui/types": ^7.2.13
+ "@mui/utils": ^5.15.9
+ clsx: ^2.1.0
+ csstype: ^3.1.3
+ prop-types: ^15.8.1
+ peerDependencies:
+ "@emotion/react": ^11.5.0
+ "@emotion/styled": ^11.3.0
+ "@types/react": ^17.0.0 || ^18.0.0
+ react: ^17.0.0 || ^18.0.0
+ peerDependenciesMeta:
+ "@emotion/react":
+ optional: true
+ "@emotion/styled":
+ optional: true
+ "@types/react":
+ optional: true
+ checksum: a5bda6f9c2b8e1241ed0f6865539fea65cdac31b61383c0f35bd1eedc838f67c68cce9609af5563aae6f45bec0c8242283fa408a2b989e23bdc9caeba9939950
+ languageName: node
+ linkType: hard
+
+"@mui/types@npm:^7.2.13":
+ version: 7.2.13
+ resolution: "@mui/types@npm:7.2.13"
+ peerDependencies:
+ "@types/react": ^17.0.0 || ^18.0.0
peerDependenciesMeta:
"@types/react":
optional: true
- checksum: f849a8c4fecddc112cfa94105a2c72e763ff76b9f8da74135b7bbadfd294ed6685897cbea6a2128099be0ce37843784893d8c64da6bde37d020956ab9067206c
+ checksum: 58dfc96f9654288519ff01d6b54e6a242f05cadad51210deb85710a81be4fa1501a116c8968e2614b16c748fc1f407dc23beeeeae70fa37fceb6c6de876ff70d
languageName: node
linkType: hard
-"@material-ui/lab@npm:4.0.0-alpha.61":
- version: 4.0.0-alpha.61
- resolution: "@material-ui/lab@npm:4.0.0-alpha.61"
+"@mui/utils@npm:^5.14.16, @mui/utils@npm:^5.15.13":
+ version: 5.15.13
+ resolution: "@mui/utils@npm:5.15.13"
dependencies:
- "@babel/runtime": ^7.4.4
- "@material-ui/utils": ^4.11.3
- clsx: ^1.0.4
- prop-types: ^15.7.2
- react-is: ^16.8.0 || ^17.0.0
+ "@babel/runtime": ^7.23.9
+ "@types/prop-types": ^15.7.11
+ prop-types: ^15.8.1
+ react-is: ^18.2.0
peerDependencies:
- "@material-ui/core": ^4.12.1
- "@types/react": ^16.8.6 || ^17.0.0
- react: ^16.8.0 || ^17.0.0
- react-dom: ^16.8.0 || ^17.0.0
+ "@types/react": ^17.0.0 || ^18.0.0
+ react: ^17.0.0 || ^18.0.0
peerDependenciesMeta:
"@types/react":
optional: true
- checksum: 8774a07d72615301e0099415580f87ea8f3d1d106f79e0b014738e302dd3e21959abf01d6c0a629e2e9afb8cb91abd8e9686c2886cddff06c27e6a8a8e063ea0
+ checksum: d3264ed4453b01bb2f5b7399eddc20cf6649ab50626b4287ef5678300ff8ea6413d5f80e5bfe939698f31c7eb5880d497f1f35efb80136dd237617f0021ef18a
languageName: node
linkType: hard
-"@material-ui/pickers@npm:3.3.10":
- version: 3.3.10
- resolution: "@material-ui/pickers@npm:3.3.10"
+"@mui/utils@npm:^5.15.9":
+ version: 5.15.9
+ resolution: "@mui/utils@npm:5.15.9"
dependencies:
- "@babel/runtime": ^7.6.0
- "@date-io/core": 1.x
- "@types/styled-jsx": ^2.2.8
- clsx: ^1.0.2
- react-transition-group: ^4.0.0
- rifm: ^0.7.0
+ "@babel/runtime": ^7.23.9
+ "@types/prop-types": ^15.7.11
+ prop-types: ^15.8.1
+ react-is: ^18.2.0
peerDependencies:
- "@date-io/core": ^1.3.6
- "@material-ui/core": ^4.0.0
- prop-types: ^15.6.0
- react: ^16.8.0 || ^17.0.0
- react-dom: ^16.8.0 || ^17.0.0
- checksum: b8ec52f2e8a4dfae8f14e29c41428a708c843d2c64b5ece64747d8d9401edaeb4d7de6cce985d13e486f2addec1b7787eeed7a3dfcbba90803c23f1ba2ed2420
- languageName: node
- linkType: hard
-
-"@material-ui/styles@npm:^4.11.5":
- version: 4.11.5
- resolution: "@material-ui/styles@npm:4.11.5"
- dependencies:
- "@babel/runtime": ^7.4.4
- "@emotion/hash": ^0.8.0
- "@material-ui/types": 5.1.0
- "@material-ui/utils": ^4.11.3
- clsx: ^1.0.4
- csstype: ^2.5.2
- hoist-non-react-statics: ^3.3.2
- jss: ^10.5.1
- jss-plugin-camel-case: ^10.5.1
- jss-plugin-default-unit: ^10.5.1
- jss-plugin-global: ^10.5.1
- jss-plugin-nested: ^10.5.1
- jss-plugin-props-sort: ^10.5.1
- jss-plugin-rule-value-function: ^10.5.1
- jss-plugin-vendor-prefixer: ^10.5.1
- prop-types: ^15.7.2
- peerDependencies:
- "@types/react": ^16.8.6 || ^17.0.0
- react: ^16.8.0 || ^17.0.0
- react-dom: ^16.8.0 || ^17.0.0
+ "@types/react": ^17.0.0 || ^18.0.0
+ react: ^17.0.0 || ^18.0.0
peerDependenciesMeta:
"@types/react":
optional: true
- checksum: dbf3985ef57c1b7dae3fd916d5bfd61f2097afb93c9e1f64832cfcb8fc9bbf38a504c9632ed7b76eb5d235670083d9e66d35942bc976b7cd148c71d75b808e82
+ checksum: 61e520c0a50cbf463d893b011eaea844dcf028e12387eec12378aa870d4342c688bfe5f48de1f4896dc1a0cc9d4224f90470d238105ee45c178cd8b4bbef7cf5
languageName: node
linkType: hard
-"@material-ui/system@npm:^4.12.2":
- version: 4.12.2
- resolution: "@material-ui/system@npm:4.12.2"
+"@mui/x-date-pickers@npm:^6.19.7":
+ version: 6.19.7
+ resolution: "@mui/x-date-pickers@npm:6.19.7"
dependencies:
- "@babel/runtime": ^7.4.4
- "@material-ui/utils": ^4.11.3
- csstype: ^2.5.2
- prop-types: ^15.7.2
+ "@babel/runtime": ^7.23.2
+ "@mui/base": ^5.0.0-beta.22
+ "@mui/utils": ^5.14.16
+ "@types/react-transition-group": ^4.4.8
+ clsx: ^2.0.0
+ prop-types: ^15.8.1
+ react-transition-group: ^4.4.5
peerDependencies:
- "@types/react": ^16.8.6 || ^17.0.0
- react: ^16.8.0 || ^17.0.0
- react-dom: ^16.8.0 || ^17.0.0
+ "@emotion/react": ^11.9.0
+ "@emotion/styled": ^11.8.1
+ "@mui/material": ^5.8.6
+ "@mui/system": ^5.8.0
+ date-fns: ^2.25.0 || ^3.2.0
+ date-fns-jalali: ^2.13.0-0
+ dayjs: ^1.10.7
+ luxon: ^3.0.2
+ moment: ^2.29.4
+ moment-hijri: ^2.1.2
+ moment-jalaali: ^0.7.4 || ^0.8.0 || ^0.9.0 || ^0.10.0
+ react: ^17.0.0 || ^18.0.0
+ react-dom: ^17.0.0 || ^18.0.0
peerDependenciesMeta:
- "@types/react":
+ "@emotion/react":
optional: true
- checksum: ebe6b3cc5f111034eacd763014f3260f7647b5e0cd132870f2ee18855cf3d51a996b4633035fe6f5f8965489944db4ac0cb3b71b84a765faa35a6861532ac9f6
- languageName: node
- linkType: hard
-
-"@material-ui/types@npm:5.1.0":
- version: 5.1.0
- resolution: "@material-ui/types@npm:5.1.0"
- peerDependencies:
- "@types/react": "*"
- peerDependenciesMeta:
- "@types/react":
+ "@emotion/styled":
optional: true
- checksum: 64ac0938ee6f48011ba596f7422ab0660d9a8d9b4f5f183b39bd63185b1ce724209f65580f0af686d59b524603ffa57418ca2d443b69bec894303f80779c61f8
- languageName: node
- linkType: hard
-
-"@material-ui/utils@npm:^4.11.3":
- version: 4.11.3
- resolution: "@material-ui/utils@npm:4.11.3"
- dependencies:
- "@babel/runtime": ^7.4.4
- prop-types: ^15.7.2
- react-is: ^16.8.0 || ^17.0.0
- peerDependencies:
- react: ^16.8.0 || ^17.0.0
- react-dom: ^16.8.0 || ^17.0.0
- checksum: 05ff67c982b33d3b4260cfaeaf566f3ccaecaebb231907ed626bcc30322d89d705bfe79b8805c0dda2f1dc2cfa98ca9d731ec8ae12868da7a98568a41c7dc231
+ date-fns:
+ optional: true
+ date-fns-jalali:
+ optional: true
+ dayjs:
+ optional: true
+ luxon:
+ optional: true
+ moment:
+ optional: true
+ moment-hijri:
+ optional: true
+ moment-jalaali:
+ optional: true
+ checksum: 7a5d1d94b52723cc38c268e121c978fdab4a62c8a77d858e01cb5b07b068303be5eda1feae77da7c3e4e9b717e045b136c3a4874691242e8b4e2c0558712cfc8
languageName: node
linkType: hard
@@ -3428,6 +3748,13 @@ __metadata:
languageName: node
linkType: hard
+"@popperjs/core@npm:^2.11.8":
+ version: 2.11.8
+ resolution: "@popperjs/core@npm:2.11.8"
+ checksum: e5c69fdebf52a4012f6a1f14817ca8e9599cb1be73dd1387e1785e2ed5e5f0862ff817f420a87c7fc532add1f88a12e25aeb010ffcbdc98eace3d55ce2139cf0
+ languageName: node
+ linkType: hard
+
"@projectstorm/geometry@npm:^6.7.4":
version: 6.7.4
resolution: "@projectstorm/geometry@npm:6.7.4"
@@ -4100,7 +4427,14 @@ __metadata:
languageName: node
linkType: hard
-"@types/react-dom@npm:<18.0.0, @types/react-dom@npm:^17.0.11":
+"@types/prop-types@npm:^15.7.11":
+ version: 15.7.11
+ resolution: "@types/prop-types@npm:15.7.11"
+ checksum: 7519ff11d06fbf6b275029fe03fff9ec377b4cb6e864cac34d87d7146c7f5a7560fd164bdc1d2dbe00b60c43713631251af1fd3d34d46c69cd354602bc0c7c54
+ languageName: node
+ linkType: hard
+
+"@types/react-dom@npm:<18.0.0":
version: 17.0.20
resolution: "@types/react-dom@npm:17.0.20"
dependencies:
@@ -4109,7 +4443,16 @@ __metadata:
languageName: node
linkType: hard
-"@types/react-transition-group@npm:^4.2.0, @types/react-transition-group@npm:^4.4.0":
+"@types/react-dom@npm:^17.0.25":
+ version: 17.0.25
+ resolution: "@types/react-dom@npm:17.0.25"
+ dependencies:
+ "@types/react": ^17
+ checksum: d1e582682478e0848c8d54ea3e89d02047bac6d916266b85ce63731b06987575919653ea7159d98fda47ade3362b8c4d5796831549564b83088e7aa9ce8b60ed
+ languageName: node
+ linkType: hard
+
+"@types/react-transition-group@npm:^4.4.0":
version: 4.4.6
resolution: "@types/react-transition-group@npm:4.4.6"
dependencies:
@@ -4118,6 +4461,15 @@ __metadata:
languageName: node
linkType: hard
+"@types/react-transition-group@npm:^4.4.10, @types/react-transition-group@npm:^4.4.8":
+ version: 4.4.10
+ resolution: "@types/react-transition-group@npm:4.4.10"
+ dependencies:
+ "@types/react": "*"
+ checksum: fe2ea11f70251e9f79f368e198c18fd469b1d4f1e1d44e4365845b44e15974b0ec925100036f449b023b0ca3480a82725c5f0a73040e282ad32ec7b0def9b57c
+ languageName: node
+ linkType: hard
+
"@types/react@npm:*":
version: 18.2.13
resolution: "@types/react@npm:18.2.13"
@@ -4129,17 +4481,6 @@ __metadata:
languageName: node
linkType: hard
-"@types/react@npm:^16.7.18":
- version: 16.14.43
- resolution: "@types/react@npm:16.14.43"
- dependencies:
- "@types/prop-types": "*"
- "@types/scheduler": "*"
- csstype: ^3.0.2
- checksum: 10ce3f8b80eadd66178a53845bddf264fa109fcfe0a615a0dce7e027dc426768573e87aee3eba7c53a2a867e159bba928bd86cac92ba93c5bd0152a63a49ccad
- languageName: node
- linkType: hard
-
"@types/react@npm:^17":
version: 17.0.62
resolution: "@types/react@npm:17.0.62"
@@ -4151,6 +4492,17 @@ __metadata:
languageName: node
linkType: hard
+"@types/react@npm:^17.0.80":
+ version: 17.0.80
+ resolution: "@types/react@npm:17.0.80"
+ dependencies:
+ "@types/prop-types": "*"
+ "@types/scheduler": ^0.16
+ csstype: ^3.0.2
+ checksum: 1c27bfc42305d77ef0da55f8f6d4c4a3471aa02b294fcf29ea0f2cfb0bf02892e5a0a3bc7559fa4a5ba50697b2e31076cb5aa5987f69cfc2e880f6426edb8bdf
+ languageName: node
+ linkType: hard
+
"@types/responselike@npm:^1.0.0":
version: 1.0.0
resolution: "@types/responselike@npm:1.0.0"
@@ -4167,6 +4519,13 @@ __metadata:
languageName: node
linkType: hard
+"@types/scheduler@npm:^0.16":
+ version: 0.16.8
+ resolution: "@types/scheduler@npm:0.16.8"
+ checksum: 6c091b096daa490093bf30dd7947cd28e5b2cd612ec93448432b33f724b162587fed9309a0acc104d97b69b1d49a0f3fc755a62282054d62975d53d7fd13472d
+ languageName: node
+ linkType: hard
+
"@types/semver@npm:^7.3.12":
version: 7.5.0
resolution: "@types/semver@npm:7.5.0"
@@ -4181,15 +4540,6 @@ __metadata:
languageName: node
linkType: hard
-"@types/styled-jsx@npm:^2.2.8":
- version: 2.2.9
- resolution: "@types/styled-jsx@npm:2.2.9"
- dependencies:
- "@types/react": "*"
- checksum: 0e7e9bce8435116168b2470c7599b3b6ad5775c678d5dc06b64b0bc4fe369c59603c794a7298e2ca4e209aa0135f98df89793a3a0778251c1907b34198c55e9e
- languageName: node
- linkType: hard
-
"@types/tough-cookie@npm:*":
version: 4.0.2
resolution: "@types/tough-cookie@npm:4.0.2"
@@ -4888,7 +5238,7 @@ __metadata:
languageName: node
linkType: hard
-"anymatch@npm:^3.0.3, anymatch@npm:~3.1.2":
+"anymatch@npm:^3.0.3":
version: 3.1.3
resolution: "anymatch@npm:3.1.3"
dependencies:
@@ -5545,13 +5895,6 @@ __metadata:
languageName: node
linkType: hard
-"binary-extensions@npm:^2.0.0":
- version: 2.2.0
- resolution: "binary-extensions@npm:2.2.0"
- checksum: ccd267956c58d2315f5d3ea6757cf09863c5fc703e50fbeb13a7dc849b812ef76e3cf9ca8f35a0c48498776a7478d7b4a0418e1e2b8cb9cb9731f2922aaad7f8
- languageName: node
- linkType: hard
-
"bindings@npm:^1.5.0":
version: 1.5.0
resolution: "bindings@npm:1.5.0"
@@ -5625,7 +5968,7 @@ __metadata:
languageName: node
linkType: hard
-"braces@npm:^3.0.2, braces@npm:~3.0.2":
+"braces@npm:^3.0.2":
version: 3.0.2
resolution: "braces@npm:3.0.2"
dependencies:
@@ -6144,25 +6487,6 @@ __metadata:
languageName: node
linkType: hard
-"chokidar@npm:>=3.0.0 <4.0.0":
- version: 3.5.3
- resolution: "chokidar@npm:3.5.3"
- dependencies:
- anymatch: ~3.1.2
- braces: ~3.0.2
- fsevents: ~2.3.2
- glob-parent: ~5.1.2
- is-binary-path: ~2.1.0
- is-glob: ~4.0.1
- normalize-path: ~3.0.0
- readdirp: ~3.6.0
- dependenciesMeta:
- fsevents:
- optional: true
- checksum: b49fcde40176ba007ff361b198a2d35df60d9bb2a5aab228279eb810feae9294a6b4649ab15981304447afe1e6ffbf4788ad5db77235dc770ab777c6e771980c
- languageName: node
- linkType: hard
-
"chownr@npm:^2.0.0":
version: 2.0.0
resolution: "chownr@npm:2.0.0"
@@ -6255,13 +6579,20 @@ __metadata:
languageName: node
linkType: hard
-"clsx@npm:^1.0.2, clsx@npm:^1.0.4, clsx@npm:^1.1.0, clsx@npm:^1.1.1":
+"clsx@npm:^1.1.0, clsx@npm:^1.1.1":
version: 1.2.1
resolution: "clsx@npm:1.2.1"
checksum: 30befca8019b2eb7dbad38cff6266cf543091dae2825c856a62a8ccf2c3ab9c2907c4d12b288b73101196767f66812365400a227581484a05f968b0307cfaf12
languageName: node
linkType: hard
+"clsx@npm:^2.0.0, clsx@npm:^2.1.0":
+ version: 2.1.0
+ resolution: "clsx@npm:2.1.0"
+ checksum: 43fefc29b6b49c9476fbce4f8b1cc75c27b67747738e598e6651dd40d63692135dc60b18fa1c5b78a2a9ba8ae6fd2055a068924b94e20b42039bd53b78b98e1d
+ languageName: node
+ linkType: hard
+
"co@npm:^4.6.0":
version: 4.6.0
resolution: "co@npm:4.6.0"
@@ -7032,7 +7363,7 @@ __metadata:
languageName: node
linkType: hard
-"csstype@npm:^2.5.2, csstype@npm:^2.5.7":
+"csstype@npm:^2.5.7":
version: 2.6.21
resolution: "csstype@npm:2.6.21"
checksum: 2ce8bc832375146eccdf6115a1f8565a27015b74cce197c35103b4494955e9516b246140425ad24103864076aa3e1257ac9bab25a06c8d931dd87a6428c9dccf
@@ -7046,6 +7377,13 @@ __metadata:
languageName: node
linkType: hard
+"csstype@npm:^3.1.3":
+ version: 3.1.3
+ resolution: "csstype@npm:3.1.3"
+ checksum: 8db785cc92d259102725b3c694ec0c823f5619a84741b5c7991b8ad135dfaa66093038a1cc63e03361a6cd28d122be48f2106ae72334e067dd619a51f49eddf7
+ languageName: node
+ linkType: hard
+
"cubic2quad@npm:^1.2.1":
version: 1.2.1
resolution: "cubic2quad@npm:1.2.1"
@@ -7081,12 +7419,10 @@ __metadata:
languageName: node
linkType: hard
-"date-fns@npm:^2.24.0":
- version: 2.30.0
- resolution: "date-fns@npm:2.30.0"
- dependencies:
- "@babel/runtime": ^7.21.0
- checksum: f7be01523282e9bb06c0cd2693d34f245247a29098527d4420628966a2d9aad154bd0e90a6b1cf66d37adcb769cd108cf8a7bd49d76db0fb119af5cdd13644f4
+"date-fns@npm:^3.6.0":
+ version: 3.6.0
+ resolution: "date-fns@npm:3.6.0"
+ checksum: 0daa1e9a436cf99f9f2ae9232b55e11f3dd46132bee10987164f3eebd29f245b2e066d7d7db40782627411ecf18551d8f4c9fcdf2226e48bb66545407d448ab7
languageName: node
linkType: hard
@@ -8732,16 +9068,6 @@ __metadata:
languageName: node
linkType: hard
-"fsevents@npm:~2.3.2":
- version: 2.3.2
- resolution: "fsevents@npm:2.3.2"
- dependencies:
- node-gyp: latest
- checksum: 97ade64e75091afee5265e6956cb72ba34db7819b4c3e94c431d4be2b19b8bb7a2d4116da417950c3425f17c8fe693d25e20212cac583ac1521ad066b77ae31f
- conditions: os=darwin
- languageName: node
- linkType: hard
-
"fsevents@patch:fsevents@^2.3.2#~builtin":
version: 2.3.3
resolution: "fsevents@patch:fsevents@npm%3A2.3.3#~builtin::version=2.3.3&hash=df0bf1"
@@ -8751,15 +9077,6 @@ __metadata:
languageName: node
linkType: hard
-"fsevents@patch:fsevents@~2.3.2#~builtin":
- version: 2.3.2
- resolution: "fsevents@patch:fsevents@npm%3A2.3.2#~builtin::version=2.3.2&hash=df0bf1"
- dependencies:
- node-gyp: latest
- conditions: os=darwin
- languageName: node
- linkType: hard
-
"function-bind@npm:^1.1.1":
version: 1.1.1
resolution: "function-bind@npm:1.1.1"
@@ -8908,7 +9225,7 @@ __metadata:
languageName: node
linkType: hard
-"glob-parent@npm:^5.1.2, glob-parent@npm:~5.1.2":
+"glob-parent@npm:^5.1.2":
version: 5.1.2
resolution: "glob-parent@npm:5.1.2"
dependencies:
@@ -9539,13 +9856,6 @@ __metadata:
languageName: node
linkType: hard
-"immutable@npm:^4.0.0":
- version: 4.3.0
- resolution: "immutable@npm:4.3.0"
- checksum: bbd7ea99e2752e053323543d6ff1cc71a4b4614fa6121f321ca766db2bd2092f3f1e0a90784c5431350b7344a4f792fa002eac227062d59b9377b6c09063b58b
- languageName: node
- linkType: hard
-
"import-fresh@npm:^3.0.0, import-fresh@npm:^3.1.0, import-fresh@npm:^3.2.1, import-fresh@npm:^3.3.0":
version: 3.3.0
resolution: "import-fresh@npm:3.3.0"
@@ -9780,15 +10090,6 @@ __metadata:
languageName: node
linkType: hard
-"is-binary-path@npm:~2.1.0":
- version: 2.1.0
- resolution: "is-binary-path@npm:2.1.0"
- dependencies:
- binary-extensions: ^2.0.0
- checksum: 84192eb88cff70d320426f35ecd63c3d6d495da9d805b19bc65b518984b7c0760280e57dbf119b7e9be6b161784a5a673ab2c6abe83abb5198a432232ad5b35c
- languageName: node
- linkType: hard
-
"is-boolean-object@npm:^1.1.0":
version: 1.1.2
resolution: "is-boolean-object@npm:1.1.2"
@@ -9895,7 +10196,7 @@ __metadata:
languageName: node
linkType: hard
-"is-glob@npm:^4.0.0, is-glob@npm:^4.0.1, is-glob@npm:^4.0.3, is-glob@npm:~4.0.1":
+"is-glob@npm:^4.0.0, is-glob@npm:^4.0.1, is-glob@npm:^4.0.3":
version: 4.0.3
resolution: "is-glob@npm:4.0.3"
dependencies:
@@ -11004,7 +11305,7 @@ __metadata:
languageName: node
linkType: hard
-"jss-plugin-camel-case@npm:^10.5.1":
+"jss-plugin-camel-case@npm:^10.10.0":
version: 10.10.0
resolution: "jss-plugin-camel-case@npm:10.10.0"
dependencies:
@@ -11015,7 +11316,7 @@ __metadata:
languageName: node
linkType: hard
-"jss-plugin-default-unit@npm:^10.5.1":
+"jss-plugin-default-unit@npm:^10.10.0":
version: 10.10.0
resolution: "jss-plugin-default-unit@npm:10.10.0"
dependencies:
@@ -11025,7 +11326,7 @@ __metadata:
languageName: node
linkType: hard
-"jss-plugin-global@npm:^10.5.1":
+"jss-plugin-global@npm:^10.10.0":
version: 10.10.0
resolution: "jss-plugin-global@npm:10.10.0"
dependencies:
@@ -11035,7 +11336,7 @@ __metadata:
languageName: node
linkType: hard
-"jss-plugin-nested@npm:^10.5.1":
+"jss-plugin-nested@npm:^10.10.0":
version: 10.10.0
resolution: "jss-plugin-nested@npm:10.10.0"
dependencies:
@@ -11046,7 +11347,7 @@ __metadata:
languageName: node
linkType: hard
-"jss-plugin-props-sort@npm:^10.5.1":
+"jss-plugin-props-sort@npm:^10.10.0":
version: 10.10.0
resolution: "jss-plugin-props-sort@npm:10.10.0"
dependencies:
@@ -11056,7 +11357,7 @@ __metadata:
languageName: node
linkType: hard
-"jss-plugin-rule-value-function@npm:^10.5.1":
+"jss-plugin-rule-value-function@npm:^10.10.0":
version: 10.10.0
resolution: "jss-plugin-rule-value-function@npm:10.10.0"
dependencies:
@@ -11067,7 +11368,7 @@ __metadata:
languageName: node
linkType: hard
-"jss-plugin-vendor-prefixer@npm:^10.5.1":
+"jss-plugin-vendor-prefixer@npm:^10.10.0":
version: 10.10.0
resolution: "jss-plugin-vendor-prefixer@npm:10.10.0"
dependencies:
@@ -11078,7 +11379,7 @@ __metadata:
languageName: node
linkType: hard
-"jss@npm:10.10.0, jss@npm:^10.5.1":
+"jss@npm:10.10.0, jss@npm:^10.10.0":
version: 10.10.0
resolution: "jss@npm:10.10.0"
dependencies:
@@ -11130,13 +11431,6 @@ __metadata:
languageName: node
linkType: hard
-"klona@npm:^2.0.4":
- version: 2.0.6
- resolution: "klona@npm:2.0.6"
- checksum: ac9ee3732e42b96feb67faae4d27cf49494e8a3bf3fa7115ce242fe04786788e0aff4741a07a45a2462e2079aa983d73d38519c85d65b70ef11447bbc3c58ce7
- languageName: node
- linkType: hard
-
"labeled-stream-splicer@npm:^2.0.0":
version: 2.0.2
resolution: "labeled-stream-splicer@npm:2.0.2"
@@ -12236,7 +12530,7 @@ __metadata:
languageName: node
linkType: hard
-"normalize-path@npm:^3.0.0, normalize-path@npm:~3.0.0":
+"normalize-path@npm:^3.0.0":
version: 3.0.0
resolution: "normalize-path@npm:3.0.0"
checksum: 88eeb4da891e10b1318c4b2476b6e2ecbeb5ff97d946815ffea7794c31a89017c70d7f34b3c2ebf23ef4e9fc9fb99f7dffe36da22011b5b5c6ffa34f4873ec20
@@ -12275,17 +12569,24 @@ __metadata:
languageName: node
linkType: hard
-"notistack@npm:^1.0.10":
- version: 1.0.10
- resolution: "notistack@npm:1.0.10"
+"notistack@npm:^2.0.8":
+ version: 2.0.8
+ resolution: "notistack@npm:2.0.8"
dependencies:
clsx: ^1.1.0
hoist-non-react-statics: ^3.3.0
peerDependencies:
- "@material-ui/core": ^4.0.0
- react: ^16.8.0 || ^17.0.0
- react-dom: ^16.8.0 || ^17.0.0
- checksum: 50223dbb30a33318bedfc03adbd81d75e5c74c8b74ae39aa9795377c51f556f0a7daa1061a516804e2a7cabf6a2f5a124dc5ed8e96c80731eec1377d16a65b42
+ "@emotion/react": ^11.4.1
+ "@emotion/styled": ^11.3.0
+ "@mui/material": ^5.0.0
+ react: ^16.8.0 || ^17.0.0 || ^18.0.0
+ react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+ peerDependenciesMeta:
+ "@emotion/react":
+ optional: true
+ "@emotion/styled":
+ optional: true
+ checksum: f95952ea7209840f6f05a65e74f0fb4e7a1bb321753b2955ae6052f2205d47a6a3c50a42b72db11eac2fc491c4105b4687bed89e79287399530973fa133a5380
languageName: node
linkType: hard
@@ -12865,7 +13166,7 @@ __metadata:
languageName: node
linkType: hard
-"picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.2.3, picomatch@npm:^2.3.1":
+"picomatch@npm:^2.0.4, picomatch@npm:^2.2.3, picomatch@npm:^2.3.1":
version: 2.3.1
resolution: "picomatch@npm:2.3.1"
checksum: 050c865ce81119c4822c45d3c84f1ced46f93a0126febae20737bd05ca20589c564d6e9226977df859ed5e03dc73f02584a2b0faad36e896936238238b0446cf
@@ -12932,20 +13233,6 @@ __metadata:
languageName: node
linkType: hard
-"popper.js@npm:1.16.1-lts":
- version: 1.16.1-lts
- resolution: "popper.js@npm:1.16.1-lts"
- checksum: 27c00b5b07afa91a5e9f9db78a9a61b50f44ca156d09c851cd29d79cd359e54cfde4288ae555b88801438227e452e56cb4b56bd79fd45ab17dac780a70a7e9ac
- languageName: node
- linkType: hard
-
-"popper.js@npm:^1.16.1":
- version: 1.16.1
- resolution: "popper.js@npm:1.16.1"
- checksum: c56ae5001ec50a77ee297a8061a0221d99d25c7348d2e6bcd3e45a0d0f32a1fd81bca29d46cb0d4bdf13efb77685bd6a0ce93f9eb3c608311a461f945fffedbe
- languageName: node
- linkType: hard
-
"postcss-calc@npm:^8.2.3":
version: 8.2.4
resolution: "postcss-calc@npm:8.2.4"
@@ -14331,14 +14618,14 @@ __metadata:
languageName: node
linkType: hard
-"react-is@npm:^16.8.0 || ^17.0.0, react-is@npm:^17.0.1":
+"react-is@npm:^17.0.1":
version: 17.0.2
resolution: "react-is@npm:17.0.2"
checksum: 9d6d111d8990dc98bc5402c1266a808b0459b5d54830bbea24c12d908b536df7883f268a7868cfaedde3dd9d4e0d574db456f84d2e6df9c4526f99bb4b5344d8
languageName: node
linkType: hard
-"react-is@npm:^18.0.0":
+"react-is@npm:^18.0.0, react-is@npm:^18.2.0":
version: 18.2.0
resolution: "react-is@npm:18.2.0"
checksum: e72d0ba81b5922759e4aff17e0252bd29988f9642ed817f56b25a3e217e13eea8a7f2322af99a06edb779da12d5d636e9fda473d620df9a3da0df2a74141d53e
@@ -14441,7 +14728,7 @@ __metadata:
languageName: node
linkType: hard
-"react-transition-group@npm:^4.0.0, react-transition-group@npm:^4.3.0, react-transition-group@npm:^4.4.0":
+"react-transition-group@npm:^4.3.0, react-transition-group@npm:^4.4.5":
version: 4.4.5
resolution: "react-transition-group@npm:4.4.5"
dependencies:
@@ -14578,15 +14865,6 @@ __metadata:
languageName: node
linkType: hard
-"readdirp@npm:~3.6.0":
- version: 3.6.0
- resolution: "readdirp@npm:3.6.0"
- dependencies:
- picomatch: ^2.2.1
- checksum: 1ced032e6e45670b6d7352d71d21ce7edf7b9b928494dcaba6f11fba63180d9da6cd7061ebc34175ffda6ff529f481818c962952004d273178acd70f7059b320
- languageName: node
- linkType: hard
-
"rechoir@npm:^0.7.0":
version: 0.7.1
resolution: "rechoir@npm:0.7.1"
@@ -14662,6 +14940,13 @@ __metadata:
languageName: node
linkType: hard
+"regenerator-runtime@npm:^0.14.0":
+ version: 0.14.1
+ resolution: "regenerator-runtime@npm:0.14.1"
+ checksum: 9f57c93277b5585d3c83b0cf76be47b473ae8c6d9142a46ce8b0291a04bb2cf902059f0f8445dcabb3fb7378e5fe4bb4ea1e008876343d42e46d3b484534ce38
+ languageName: node
+ linkType: hard
+
"regenerator-transform@npm:^0.15.1":
version: 0.15.1
resolution: "regenerator-transform@npm:0.15.1"
@@ -14889,17 +15174,6 @@ __metadata:
languageName: node
linkType: hard
-"rifm@npm:^0.7.0":
- version: 0.7.0
- resolution: "rifm@npm:0.7.0"
- dependencies:
- "@babel/runtime": ^7.3.1
- peerDependencies:
- react: ">=16.8"
- checksum: 7b89d9c5c92cb1b6848964ab5c5042d652ba803fe7ecea2282191e0e820b07fb3345306b2baf69af1cef2f0755c50e97efc51d0cfdd645b8956d05d5d19d381e
- languageName: node
- linkType: hard
-
"rimraf@npm:^2.5.4":
version: 2.7.1
resolution: "rimraf@npm:2.7.1"
@@ -14947,19 +15221,20 @@ __metadata:
"@babel/preset-react": ^7.12.13
"@babel/preset-typescript": ^7.22.5
"@codemirror/lang-sql": ^6.6.3
- "@date-io/core": ^1.3.6
- "@date-io/date-fns": 1.x
+ "@date-io/core": ^3.0.0
+ "@date-io/date-fns": 3.x
"@emotion/core": ^10.0.14
"@emotion/memoize": ^0.7.5
- "@emotion/react": ^11.1.5
+ "@emotion/react": ^11.11.3
"@emotion/sheet": ^1.0.1
"@emotion/styled": ^11.11.0
"@emotion/utils": ^1.0.0
"@fortawesome/fontawesome-free": latest
- "@material-ui/core": 4.12.4
- "@material-ui/icons": ^4.11.2
- "@material-ui/lab": 4.0.0-alpha.61
- "@material-ui/pickers": 3.3.10
+ "@mui/icons-material": ^5.15.10
+ "@mui/lab": ^5.0.0-alpha.165
+ "@mui/material": ^5.15.10
+ "@mui/styles": ^5.15.10
+ "@mui/x-date-pickers": ^6.19.7
"@projectstorm/react-diagrams": ^6.6.1
"@simonwep/pickr": ^1.5.1
"@svgr/webpack": ^8.1.0
@@ -14969,8 +15244,8 @@ __metadata:
"@testing-library/user-event": ^14.4.3
"@types/classnames": ^2.2.6
"@types/jest": ^29.5.4
- "@types/react": ^16.7.18
- "@types/react-dom": ^17.0.11
+ "@types/react": ^17.0.80
+ "@types/react-dom": ^17.0.25
"@typescript-eslint/eslint-plugin": ^5.59.9
"@typescript-eslint/parser": ^5.57.0
ajv: ^8.8.2
@@ -14998,7 +15273,7 @@ __metadata:
css-minimizer-webpack-plugin: ^5.0.0
cssnano: ^5.0.2
dagre: ^0.8.4
- date-fns: ^2.24.0
+ date-fns: ^3.6.0
diff-arrays-of-objects: ^1.1.8
eslint: ^8.37.0
eslint-plugin-jest: ^27.4.0
@@ -15029,11 +15304,10 @@ __metadata:
moment: ^2.29.4
moment-timezone: ^0.5.34
notificar: ^1.0.1
- notistack: ^1.0.10
+ notistack: ^2.0.8
path-fx: ^2.0.0
pathfinding: ^0.4.18
paths-js: ^0.4.9
- popper.js: ^1.16.1
postcss: ^8.4.31
postcss-loader: ^7.1.0
process: ^0.11.10
@@ -15061,9 +15335,6 @@ __metadata:
react-virtualized-auto-sizer: ^1.0.6
react-window: ^1.8.5
resize-observer-polyfill: ^1.5.1
- sass: ^1.24.4
- sass-loader: ^11.0.0
- sass-resources-loader: ^2.2.1
shim-loader: ^1.0.1
snapsvg-cjs: ^0.0.6
socket.io-client: ^4.5.0
@@ -15075,7 +15346,7 @@ __metadata:
svgo: ^2.7.0
svgo-loader: ^2.2.0
terser-webpack-plugin: ^5.1.1
- typescript: ^3.2.2
+ typescript: ^4.9.5
uplot: ^1.6.24
uplot-react: ^1.1.4
url-loader: ^4.1.1
@@ -15147,53 +15418,6 @@ __metadata:
languageName: node
linkType: hard
-"sass-loader@npm:^11.0.0":
- version: 11.1.1
- resolution: "sass-loader@npm:11.1.1"
- dependencies:
- klona: ^2.0.4
- neo-async: ^2.6.2
- peerDependencies:
- fibers: ">= 3.1.0"
- node-sass: ^4.0.0 || ^5.0.0 || ^6.0.0
- sass: ^1.3.0
- webpack: ^5.0.0
- peerDependenciesMeta:
- fibers:
- optional: true
- node-sass:
- optional: true
- sass:
- optional: true
- checksum: e969351003cfb2db09fea9100d6075cd4a188b04596e0c950dbd3b3367635d25f474ce06a15fb2b4e85e29f115ace49eaa3e0d4a1ab1c096f12c598b048b2963
- languageName: node
- linkType: hard
-
-"sass-resources-loader@npm:^2.2.1":
- version: 2.2.5
- resolution: "sass-resources-loader@npm:2.2.5"
- dependencies:
- async: ^3.2.3
- chalk: ^4.1.0
- glob: ^7.1.6
- loader-utils: ^2.0.0
- checksum: 7b406e7b31abd053c4a3a87825bbb20cdf89a5f7e189a4d9cd0607a3e35c1e48a6a680336a34ff842ae71e7f67d95b942bba98cfb2ccb836e98f8e1e371c534c
- languageName: node
- linkType: hard
-
-"sass@npm:^1.24.4":
- version: 1.63.6
- resolution: "sass@npm:1.63.6"
- dependencies:
- chokidar: ">=3.0.0 <4.0.0"
- immutable: ^4.0.0
- source-map-js: ">=0.6.2 <2.0.0"
- bin:
- sass: sass.js
- checksum: 3372319904658eeafaf78a09a6fcb3368a68e6d76fe3c43c2d009f4f72e475ab22b82ef483ef5c00fcda3ab00066846c0bd88c36b42771b855f6ab80c7eda541
- languageName: node
- linkType: hard
-
"sax@npm:^1.2.4":
version: 1.2.4
resolution: "sax@npm:1.2.4"
@@ -15613,7 +15837,7 @@ __metadata:
languageName: node
linkType: hard
-"source-map-js@npm:>=0.6.2 <2.0.0, source-map-js@npm:^1.0.1, source-map-js@npm:^1.0.2":
+"source-map-js@npm:^1.0.1, source-map-js@npm:^1.0.2":
version: 1.0.2
resolution: "source-map-js@npm:1.0.2"
checksum: c049a7fc4deb9a7e9b481ae3d424cc793cb4845daa690bc5a05d428bf41bf231ced49b4cf0c9e77f9d42fdb3d20d6187619fc586605f5eabe995a316da8d377c
@@ -16676,23 +16900,23 @@ __metadata:
languageName: node
linkType: hard
-"typescript@npm:^3.2.2":
- version: 3.9.10
- resolution: "typescript@npm:3.9.10"
+"typescript@npm:^4.9.5":
+ version: 4.9.5
+ resolution: "typescript@npm:4.9.5"
bin:
tsc: bin/tsc
tsserver: bin/tsserver
- checksum: 46c842e2cd4797b88b66ef06c9c41dd21da48b95787072ccf39d5f2aa3124361bc4c966aa1c7f709fae0509614d76751455b5231b12dbb72eb97a31369e1ff92
+ checksum: ee000bc26848147ad423b581bd250075662a354d84f0e06eb76d3b892328d8d4440b7487b5a83e851b12b255f55d71835b008a66cbf8f255a11e4400159237db
languageName: node
linkType: hard
-"typescript@patch:typescript@^3.2.2#~builtin":
- version: 3.9.10
- resolution: "typescript@patch:typescript@npm%3A3.9.10#~builtin::version=3.9.10&hash=3bd3d3"
+"typescript@patch:typescript@^4.9.5#~builtin":
+ version: 4.9.5
+ resolution: "typescript@patch:typescript@npm%3A4.9.5#~builtin::version=4.9.5&hash=289587"
bin:
tsc: bin/tsc
tsserver: bin/tsserver
- checksum: dc7141ab555b23a8650a6787f98845fc11692063d02b75ff49433091b3af2fe3d773650dea18389d7c21f47d620fb3b110ea363dab4ab039417a6ccbbaf96fc2
+ checksum: 1f8f3b6aaea19f0f67cba79057674ba580438a7db55057eb89cc06950483c5d632115c14077f6663ea76fd09fce3c190e6414bb98582ec80aa5a4eaf345d5b68
languageName: node
linkType: hard