- Update MUI v4 to v5

- Remove the SCSS dependency completely and use MUI for theming.
- Update - date-fns, @date-io, notistack. Remove - popper.js, sass-loader.
- Cleanup webpack config.
- Port PSQL tool to use MUI themes instead of SCSS theme.
- Theme change will reflect realtime without refreshing pgAdmin.

web/package.json

@@ -17,7 +17,7 @@
     "@babel/preset-typescript": "^7.22.5",
     "@emotion/core": "^10.0.14",
     "@emotion/memoize": "^0.7.5",
-    "@emotion/react": "^11.1.5",
+    "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@emotion/utils": "^1.0.0",
     "@svgr/webpack": "^8.1.0",
@@ -56,16 +56,13 @@
     "process": "^0.11.10",
     "prop-types": "^15.7.2",
     "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",
     "style-loader": "^3.3.2",
     "stylis": "^4.0.7",
     "svgo": "^2.7.0",
     "svgo-loader": "^2.2.0",
     "terser-webpack-plugin": "^5.1.1",
-    "typescript": "^3.2.2",
+    "typescript": "^4.9.5",
     "url-loader": "^4.1.1",
     "webfonts-loader": "^8.0.1",
     "webpack": "^5.88.2",
@@ -77,20 +74,21 @@
     "@babel/plugin-proposal-class-properties": "^7.10.4",
     "@babel/preset-react": "^7.12.13",
     "@codemirror/lang-sql": "^6.6.3",
-    "@date-io/core": "^1.3.6",
+    "@date-io/core": "^3.0.0",
-    "@date-io/date-fns": "1.x",
+    "@date-io/date-fns": "3.x",
     "@emotion/sheet": "^1.0.1",
     "@fortawesome/fontawesome-free": "latest",
-    "@material-ui/core": "4.12.4",
+    "@mui/icons-material": "^5.15.10",
-    "@material-ui/icons": "^4.11.2",
+    "@mui/lab": "^5.0.0-alpha.165",
-    "@material-ui/lab": "4.0.0-alpha.61",
+    "@mui/material": "^5.15.10",
-    "@material-ui/pickers": "3.3.10",
+    "@mui/styles": "^5.15.10",
+    "@mui/x-date-pickers": "^6.19.7",
     "@projectstorm/react-diagrams": "^6.6.1",
     "@simonwep/pickr": "^1.5.1",
     "@szhsin/react-menu": "^2.2.0",
     "@types/classnames": "^2.2.6",
-    "@types/react": "^16.7.18",
+    "@types/react": "^17.0.80",
-    "@types/react-dom": "^17.0.11",
+    "@types/react-dom": "^17.0.25",
     "ajv": "^8.8.2",
     "anti-trojan-source": "^1.4.0",
     "aspen-decorations": "^1.0.2",
@@ -107,7 +105,7 @@
     "convert-units": "^2.3.4",
     "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",
     "hotkeys-js": "^3.13.3",
     "html-to-image": "^1.11.11",
@@ -122,11 +120,10 @@
     "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",
     "raf": "^3.4.1",
     "rc-dock": "^3.2.9",
@@ -172,7 +169,7 @@
     "bundle:watch": "yarn run linter && yarn run webpacker:watch",
     "bundle:dev": "yarn run linter && yarn run webpacker",
     "bundle:analyze": "cross-env NODE_ENV=production ANALYZE=true yarn run bundle:dev",
-    "bundle": "cross-env NODE_ENV=production NODE_OPTIONS=--max-old-space-size=2048 yarn run bundle:dev",
+    "bundle": "cross-env NODE_ENV=production NODE_OPTIONS=--max-old-space-size=3072 yarn run bundle:dev",
     "test:js-once": "yarn run linter && yarn run jest --maxWorkers=50%",
     "test:js": "yarn run test:js-once --watch",
     "test:js-file": "yarn run test:js-once -t",

web/pgadmin.themes.json

@@ -1,7 +0,0 @@
- {
-    "dark": {
-        "disp_name": "dark_(Beta)",
-        "cssfile": "pgadmin.theme.dark",
-        "preview_img": "dark_preview.png"
-    }
-}

web/pgadmin/__init__.py

@@ -890,9 +890,6 @@ def create_app(app_name=None):
         from flask_compress import Compress
         Compress(app)
 
-    from pgadmin.misc.themes import themes
-    themes(app)
-
     @app.context_processor
     def inject_blueprint():
         """

web/pgadmin/about/static/js/AboutComponent.jsx

@@ -10,9 +10,9 @@
 import gettext from 'sources/gettext';
 import url_for from 'sources/url_for';
 import React, { useEffect, useState, useRef } from 'react';
-import { Box, Grid, InputLabel } from '@material-ui/core';
+import { Box, Grid, InputLabel } from '@mui/material';
 import { DefaultButton } from '../../../static/js/components/Buttons';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@mui/styles';
 import { InputText } from '../../../static/js/components/FormComponents';
 import getApiInstance from '../../../static/js/api_instance';
 import { copyToClipboard } from '../../../static/js/clipboard';
@@ -141,11 +141,11 @@ export default function AboutComponent() {
             }}>{copyText}</DefaultButton>
           </Box>
           <Box flexGrow="1" paddingTop="1px">
-            <InputText style={{height: '100%'}} controlProps={{multiline: true}} inputStyle={{resize: 'none'}}
+            <InputText style={{height: '100%'}} controlProps={{multiline: true}} inputStyle={{resize: 'none', height: '100%'}}
               value={aboutData.settings}/>
           </Box>
         </Box>
       }
     </Box>
   );
-}
+}

web/pgadmin/authenticate/mfa/tests/utils.py

@@ -53,7 +53,6 @@ def init_dummy_auth_class():
 def test_create_dummy_app(name=__name__):
     import os
     import pgadmin
-    from pgadmin.misc.themes import themes
 
     def index():
         return Response("<html><body>logged in</body></html>")
@@ -88,8 +87,6 @@ def test_create_dummy_app(name=__name__):
 
     app.register_logout_hook = types.MethodType(__dummy_logout_hook, app)
 
-    themes(app)
-
     return app
 
 

web/pgadmin/browser/__init__.py

@@ -474,10 +474,13 @@ def utils():
     snippets = []
 
     prefs = Preferences.module('paths')
-
     pg_help_path_pref = prefs.preference('pg_help_path')
     pg_help_path = pg_help_path_pref.get()
 
+    # Added to have theme value available at app start page loading
+    prefs = Preferences.module('misc')
+    theme = prefs.preference('theme').get()
+
     # Get sqleditor options
     prefs = Preferences.module('sqleditor')
 
@@ -539,6 +542,7 @@ def utils():
         render_template(
             'browser/js/utils.js',
             layout=layout,
+            theme=theme,
             jssnippets=snippets,
             pg_help_path=pg_help_path,
             editor_tab_size=editor_tab_size,

web/pgadmin/browser/server_groups/servers/static/scss/_servers.scss

@@ -1,12 +0,0 @@
-.bg-model-duplicate {
-  @extend .bg-warning-light;
-}
-
-.icon-server-connecting {
-  background-image: $loader-icon-small !important;
-  background-repeat: no-repeat;
-  background-size: 18px !important;
-  align-content: center;
-  vertical-align: middle;
-  height: 1.3em;
-}

web/pgadmin/browser/server_groups/servers/templates/servers/password.html

@@ -1,41 +0,0 @@
-<form name="frmPassword" id="frmPassword" style="height: 100%; width: 100%" onsubmit="return false;">
-    <div>
-        <div><span class="font-weight-bold" >
-            {% if username %}
-                {{ _('Please enter the password for the user \'{0}\' to connect the server - "{1}"').format(username,
-                server_label) }}
-            {% else %}
-                {{ _('Please enter the password for the user to connect the server - "{0}"').format(server_label) }}
-            {% endif %}
-        </span></div>
-        <div class="input-group row py-2">
-            <label for="password" class="col-sm-2 col-form-label" aria-hidden="true">{{ _('Password') }}</label>
-            <div class="col-sm-10">
-              <input id="password" class="form-control" name="password" type="password" autocomplete="new-password">
-            </div>
-        </div>
-        <div class="save-password-div input-group row py-2">
-            <span class="col-sm-2 col-form-label">&nbsp;</span>
-            <div class="col-sm-10">
-                <div class="custom-control custom-checkbox">
-                    <input class="custom-control-input" id="save_password" name="save_password" type="checkbox"
-                           {% if not allow_save_password %}disabled{% endif %}
-                    >
-                    <label class="custom-control-label" for="save_password">{{ _('Save Password') }}</label>
-                </div>
-            </div>
-        </div>
-        {% if errmsg %}
-        <div class='pg-prop-status-bar p-0'>
-            <div class="error-in-footer">
-              <div class="d-flex px-2 py-1">
-                <div class="pr-2">
-                  <i class="fa fa-exclamation-triangle text-danger" aria-hidden="true"></i>
-                </div>
-                <div class="alert-text" role="alert">{{ errmsg }}</div>
-              </div>
-            </div>
-        </div>
-        {% endif %}
-    </div>
-</form>

web/pgadmin/browser/server_groups/servers/templates/servers/tunnel_password.html

@@ -1,62 +0,0 @@
-<form name="frmPassword" id="frmPassword" onsubmit="return false;">
-    <div class="m-1">
-        {% if prompt_tunnel_password %}
-        {% if tunnel_identity_file %}
-        <div><label class="font-weight-bold" for="tunnel_password">{{ _('SSH Tunnel password for the identity file \'{0}\' to connect the server "{1}"').format(tunnel_identity_file, tunnel_host) }}</label></div>
-        {% else %}
-        <div><label class="font-weight-bold" for="tunnel_password">{{ _('SSH Tunnel password for the user \'{0}\' to connect the server "{1}"').format(tunnel_username, tunnel_host) }}</label></div>
-        {% endif %}
-        <div class="input-group py-2">
-            <div class="w-100">
-              <input id="tunnel_password" class="form-control" name="tunnel_password" type="password">
-            </div>
-        </div>
-        <div class="save-password-div input-group py-2">
-            <div class="w-100">
-                <div class="custom-control custom-checkbox">
-                    <input class="custom-control-input" id="save_tunnel_password" name="save_tunnel_password" type="checkbox"
-                           {% if not allow_save_tunnel_password  %}disabled{% endif %}
-                    >
-                    <label class="custom-control-label" for="save_tunnel_password" class="ml-1">{{ _('Save Password') }}</label>
-                </div>
-            </div>
-        </div>
-        {% endif %}
-        {% if prompt_password %}
-        <div><label class="font-weight-bold" for="password">
-            {% if service  %}
-                {{ _('Database server password for the user to connect the server "{0}"').format(server_label) }}
-            {% else %}
-                {{ _('Database server password for the user \'{0}\' to connect the server "{1}"').format(username, server_label) }}
-            {% endif %}
-        </label></div>
-        <div class="input-group py-2">
-            <div class="w-100">
-              <input id="password" class="form-control" name="password" type="password">
-            </div>
-        </div>
-        <div class="save-password-div input-group py-2">
-            <div class="w-100">
-                <div class="custom-control custom-checkbox">
-                    <input class="custom-control-input" id="save_password" name="save_password" type="checkbox"
-                           {% if not allow_save_password  %}disabled{% endif %}
-                    >
-                    <label class="custom-control-label" for="save_password" class="ml-1">{{ _('Save Password') }}</label>
-                </div>
-            </div>
-        </div>
-        {% endif %}
-        {% if errmsg %}
-        <div class='pg-prop-status-bar p-0'>
-            <div class="error-in-footer">
-              <div class="d-flex px-2 py-1">
-                <div class="pr-2">
-                  <i class="fa fa-exclamation-triangle text-danger" aria-hidden="true"></i>
-                </div>
-                <div class="alert-text" role="alert">{{ errmsg }}</div>
-              </div>
-            </div>
-        </div>
-        {% endif %}
-    </div>
-</form>

web/pgadmin/browser/static/js/node.js

@@ -664,7 +664,7 @@ define('pgadmin.browser.node', [
           t = pgBrowser.tree,
           i = input.item || t.selected(),
           d = i  ? t.itemData(i) : undefined;
-        pgBrowser.psql.psql_tool(d, i, true);
+        pgAdmin.Tools.Psql.openPsqlTool(d, i);
       },
 
       // Logic to change the server background colour

web/pgadmin/browser/static/scss/_browser.scss

@@ -1,65 +0,0 @@
-.browser-tab-bar {
-    padding-left: 5px;
-    padding-top: 5px;
-    background-color: $color-gray-lighter;
-}
-
-code,
-kbd,
-pre,
-samp {
-  font-family: $font-family-editor !important;
-}
-
-.sql-editor-grid-container {
-  font-family: $font-family-primary !important;
-}
-
-.select2-btn-container {
-    padding: 3px 0px;
-    background-color: $color-primary;
-    margin-bottom: 3px;
-}
-
-.pg-sp-container {
-  position: absolute;
-  min-width: 100%;
-  min-height: 100%;
-  background: $loading-bg;
-  z-index: 1056;
-  top: 0;
-
-  .pg-sp-content {
-    position: absolute;
-    width: 100%;
-    top: 40%;
-  }
-}
-.pg-sp-icon {
-  background: $loader-icon center center no-repeat;
-  height: 75px;
-  width: 100%;
-  text-align: center;
-}
-.pg-sp-text {
-  font-size: 20px;
-  text-align: center;
-  color: $loading-fg;
-}
-
-.pg-toolbar-btn {
-  margin-left: 0.25rem;
-  border-style: solid;
-  border-width: 1px;
-  font-size: 1.15em;
-
-  color: $color-fg;
-  border-color: $border-color;
-  background-color: $color-secondary;
-}
-
-.pg-toolbar-psql {
-  padding-top: 0em;
-  font-size: inherit;
-  align-items: center;
-}

web/pgadmin/browser/static/scss/_wizard.scss

@@ -1,51 +0,0 @@
-.wizard-header {
-  padding: 6px!important;
-  min-height: $title-height;
-  max-height: $title-height;
-  background-color: $alert-header-bg;
-  font-size: $font-size-base;
-  font-weight: bold;
-  color: $alert-header-fg;
-  overflow: hidden;
-  white-space: nowrap;
-  border-radius: 0rem;
-  border-top-left-radius: $panel-border-radius;
-  border-top-right-radius: $panel-border-radius;
-  border-bottom: none;
-}
-
-.wizard-content {
-  position: absolute;
-  overflow: auto;
-  top: $title-height;
-  bottom: $footer-height-calc;
-  left: 0;
-  right: 0;
-}
-
-.pgadmin-wizard .wizard-buttons {
-  border-top: $panel-border;
-  padding: $footer-padding
-}
-
-/* match the footer */
-.pgadmin-wizard .wizard-footer {
-  min-height: $footer-min-height;
-  border: none;
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  margin: 0;
-}
-
-/* Error message css */
-.pgadmin-wizard .error_msg_div {
-  background: $color-bg;
-  font-size: 13px;
-}
-
-.pgadmin-wizard .error_msg_div p {
-  background: $color-bg;
-  color: $color-danger;
-}

web/pgadmin/browser/templates/browser/js/utils.js

@@ -87,6 +87,7 @@ define('pgadmin.browser.utils',
 
   pgBrowser.utils = {
     layout: '{{ layout }}',
+    theme: '{{ theme }}',
     pg_help_path: '{{ pg_help_path }}',
     tabSize: '{{ editor_tab_size }}',
     wrapCode: '{{ editor_wrap_code }}' == 'True',

web/pgadmin/dashboard/static/js/Dashboard.jsx

@@ -12,13 +12,13 @@ import PropTypes from 'prop-types';
 import getApiInstance from 'sources/api_instance';
 import PgTable from 'sources/components/PgTable';
 import { InputCheckbox } from '../../../static/js/components/FormComponents';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 import url_for from 'sources/url_for';
 import Graphs from './Graphs';
-import { Box, Tab, Tabs } from '@material-ui/core';
+import { Box, Tab, Tabs } from '@mui/material';
 import { PgIconButton } from '../../../static/js/components/Buttons';
-import CancelIcon from '@material-ui/icons/Cancel';
+import CancelIcon from '@mui/icons-material/Cancel';
-import StopSharpIcon from '@material-ui/icons/StopSharp';
+import StopSharpIcon from '@mui/icons-material/StopSharp';
 import WelcomeDashboard from './WelcomeDashboard';
 import ActiveQuery from './ActiveQuery.ui';
 import _ from 'lodash';
@@ -62,7 +62,7 @@ const useStyles = makeStyles((theme) => ({
   },
   cardHeader: {
     padding: '0.25rem 0.5rem',
-    fontWeight: 'bold',
+    fontWeight: 'bold !important',
     backgroundColor: theme.otherVars.tableBg,
     borderBottom: '1px solid',
     borderBottomColor: theme.otherVars.borderColor,
@@ -96,7 +96,7 @@ const useStyles = makeStyles((theme) => ({
     height: '100%',
     width: '100%',
     minHeight: '400px',
-    padding: '8px'
+    padding: '4px'
   },
   mainTabs: {
     ...theme.mixins.panelBorder.all,
@@ -165,7 +165,8 @@ function Dashboard({
   const prefStore = usePreferences();
   const preferences = _.merge(
     usePreferences().getPreferencesForModule('dashboards'),
-    usePreferences().getPreferencesForModule('graphs')
+    usePreferences().getPreferencesForModule('graphs'),
+    usePreferences().getPreferencesForModule('misc')
   );
 
   if (!did) {
@@ -294,7 +295,6 @@ function Dashboard({
                 }
               );
             }}
-            color="default"
             aria-label="Terminate Session?"
             title={gettext('Terminate Session?')}
           ></PgIconButton>
@@ -363,7 +363,6 @@ function Dashboard({
                 }
               );
             }}
-            color="default"
             aria-label="Cancel the query"
             title={gettext('Cancel the active query')}
           ></PgIconButton>

web/pgadmin/dashboard/static/js/Graphs.jsx

@@ -16,7 +16,7 @@ import {getGCD, getEpoch} from 'sources/utils';
 import {useInterval, usePrevious} from 'sources/custom_hooks';
 import PropTypes from 'prop-types';
 import StreamingChart from '../../../static/js/components/PgChart/StreamingChart';
-import { Grid } from '@material-ui/core';
+import { Grid } from '@mui/material';
 
 export const X_AXIS_LENGTH = 75;
 
@@ -221,6 +221,7 @@ export default function Graphs({preferences, sid, did, pageVisible, enablePoll=t
           showTooltip={preferences['graph_mouse_track']}
           showDataPoints={preferences['graph_data_points']}
           lineBorderWidth={preferences['graph_line_border_width']}
+          theme={preferences['theme']}
           isDatabase={did > 0}
           isTest={isTest}
         />
@@ -249,11 +250,12 @@ export function GraphsWrapper(props) {
     showDataPoints: props.showDataPoints,
     showTooltip: props.showTooltip,
     lineBorderWidth: props.lineBorderWidth,
-  }), [props.showTooltip, props.showDataPoints, props.lineBorderWidth]);
+    theme: props.theme,
+  }), [props.showTooltip, props.showDataPoints, props.lineBorderWidth, props.theme]);
 
   return (
     <>
-      <Grid container spacing={1}>
+      <Grid container spacing={0.5}>
         <Grid item md={6}>
           <ChartContainer id='sessions-graph' title={props.isDatabase ?  gettext('Database sessions') : gettext('Server sessions')}
             datasets={props.sessionStats.datasets} errorMsg={props.errorMsg} isTest={props.isTest}>
@@ -266,7 +268,7 @@ export function GraphsWrapper(props) {
           </ChartContainer>
         </Grid>
       </Grid>
-      <Grid container spacing={1} style={{marginTop: '4px', marginBottom: '4px'}}>
+      <Grid container spacing={0.5} style={{marginTop: '4px', marginBottom: '4px'}}>
         <Grid item md={4}>
           <ChartContainer id='ti-graph' title={gettext('Tuples in')} datasets={props.tiStats.datasets} errorMsg={props.errorMsg} isTest={props.isTest}>
             <StreamingChart data={props.tiStats} dataPointSize={DATA_POINT_SIZE} xRange={X_AXIS_LENGTH} options={options} />
@@ -301,6 +303,7 @@ GraphsWrapper.propTypes = {
   showTooltip: PropTypes.bool.isRequired,
   showDataPoints: PropTypes.bool.isRequired,
   lineBorderWidth: PropTypes.number.isRequired,
+  theme: PropTypes.string,
   isDatabase: PropTypes.bool.isRequired,
   isTest: PropTypes.bool,
 };

web/pgadmin/dashboard/static/js/Replication/index.jsx

@@ -7,7 +7,7 @@
 //
 //////////////////////////////////////////////////////////////
 
-import { Box } from '@material-ui/core';
+import { Box } from '@mui/material';
 import React, { useEffect, useState } from 'react';
 
 import gettext from 'sources/gettext';

web/pgadmin/dashboard/static/js/SystemStats/CPU.jsx

@@ -11,10 +11,10 @@ import React, { useState, useEffect, useRef, useReducer, 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 {getGCD, getEpoch} from 'sources/utils';
 import ChartContainer from '../components/ChartContainer';
-import { Box, Grid } from '@material-ui/core';
+import { Box, Grid } from '@mui/material';
 import { DATA_POINT_SIZE } from 'sources/chartjs';
 import StreamingChart from '../../../../static/js/components/PgChart/StreamingChart';
 import {useInterval, usePrevious} from 'sources/custom_hooks';
@@ -263,19 +263,19 @@ export function CPUWrapper(props) {
   }), [props.showTooltip, props.showDataPoints, props.lineBorderWidth]);
   return (
     <>
-      <Grid container spacing={1} className={classes.container}>
+      <Grid container spacing={0.5} className={classes.container}>
-        <Grid item md={6} sm={12}>
+        <Grid item md={6}>
           <ChartContainer id='cu-graph' title={gettext('CPU usage')} datasets={props.cpuUsageInfo.datasets}  errorMsg={props.errorMsg} isTest={props.isTest}>
             <StreamingChart data={props.cpuUsageInfo} dataPointSize={DATA_POINT_SIZE} xRange={X_AXIS_LENGTH} options={options} />
           </ChartContainer>
         </Grid>
-        <Grid item md={6} sm={12}>
+        <Grid item md={6} >
           <ChartContainer id='la-graph' title={gettext('Load average')} datasets={props.loadAvgInfo.datasets}  errorMsg={props.errorMsg} isTest={props.isTest}>
             <StreamingChart data={props.loadAvgInfo} dataPointSize={DATA_POINT_SIZE} xRange={X_AXIS_LENGTH} options={options} />
           </ChartContainer>
         </Grid>
       </Grid>
-      <Grid container spacing={1} className={classes.fixedContainer}>
+      <Grid container spacing={0.5} className={classes.fixedContainer}>
         <div className={classes.tableContainer}>
           <PgTable
             className={classes.autoResizer}

web/pgadmin/dashboard/static/js/SystemStats/Memory.jsx

@@ -10,10 +10,10 @@ import React, { useState, useEffect, useRef, useReducer, 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 {getGCD, getEpoch} from 'sources/utils';
 import ChartContainer from '../components/ChartContainer';
-import { Box, Grid } from '@material-ui/core';
+import { Box, Grid } from '@mui/material';
 import { DATA_POINT_SIZE } from 'sources/chartjs';
 import StreamingChart from '../../../../static/js/components/PgChart/StreamingChart';
 import {useInterval, usePrevious} from 'sources/custom_hooks';
@@ -266,21 +266,21 @@ export function MemoryWrapper(props) {
 
   return (
     <>
-      <Grid container spacing={1} className={classes.container}>
+      <Grid container spacing={0.5} className={classes.container}>
-        <Grid item md={6} sm={12}>
+        <Grid item md={6}>
           <ChartContainer id='m-graph' title={gettext('Memory')} datasets={props.memoryUsageInfo.datasets}  errorMsg={props.errorMsg} isTest={props.isTest}>
             <StreamingChart data={props.memoryUsageInfo} dataPointSize={DATA_POINT_SIZE} xRange={X_AXIS_LENGTH} options={options}
               valueFormatter={toPrettySize}/>
           </ChartContainer>
         </Grid>
-        <Grid item md={6} sm={12}>
+        <Grid item md={6}>
           <ChartContainer id='sm-graph' title={gettext('Swap memory')} datasets={props.swapMemoryUsageInfo.datasets}  errorMsg={props.errorMsg} isTest={props.isTest}>
             <StreamingChart data={props.swapMemoryUsageInfo} dataPointSize={DATA_POINT_SIZE} xRange={X_AXIS_LENGTH} options={options}
               valueFormatter={toPrettySize}/>
           </ChartContainer>
         </Grid>
       </Grid>
-      <Grid container spacing={1} className={classes.fixedContainer}>
+      <Grid container spacing={0.5} className={classes.fixedContainer}>
         <div className={classes.tableContainer}>
           <PgTable
             className={classes.autoResizer}

web/pgadmin/dashboard/static/js/SystemStats/Storage.jsx

@@ -9,11 +9,11 @@
 import React, { useState, useEffect, useRef, useReducer, useMemo } from 'react';
 import gettext from 'sources/gettext';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 import url_for from 'sources/url_for';
 import {getGCD, getEpoch} from 'sources/utils';
 import ChartContainer from '../components/ChartContainer';
-import { Grid } from '@material-ui/core';
+import { Grid } from '@mui/material';
 import { DATA_POINT_SIZE } from 'sources/chartjs';
 import StreamingChart from '../../../../static/js/components/PgChart/StreamingChart';
 import {useInterval, usePrevious} from 'sources/custom_hooks';
@@ -521,14 +521,14 @@ export function StorageWrapper(props) {
           </Grid>
         </Grid>
       </Grid>
-      <Grid container spacing={1} className={classes.container}>
+      <Grid container spacing={0.5} className={classes.container}>
         {Object.keys(props.ioInfo).map((drive, index) => (
           <Grid key={`disk-${index}`} container spacing={1} className={classes.container}>
             <div className={classes.driveContainer}>
               <Grid container spacing={1} className={classes.driveContainerHeader}>
                 <div className={classes.containerHeaderText}>{gettext(drive)}</div>
               </Grid>
-              <Grid container spacing={1} className={classes.driveContainerBody}>
+              <Grid container spacing={0.5} className={classes.driveContainerBody}>
                 {Object.keys(props.ioInfo[drive]).map((type, innerKeyIndex) => (
                   <Grid key={`${type}-${innerKeyIndex}`} item md={4} sm={6}>
                     <ChartContainer id={`io-graph-${type}`} title={type.endsWith('_bytes_rw') ? gettext('Data transfer'): type.endsWith('_total_rw') ? gettext('I/O operations count'): type.endsWith('_time_rw') ? gettext('Time spent in I/O operations'):''} datasets={transformData(props.ioInfo[drive][type], props.ioRefreshRate).datasets}  errorMsg={props.errorMsg} isTest={props.isTest}>

web/pgadmin/dashboard/static/js/SystemStats/Summary.jsx

@@ -9,12 +9,12 @@
 import React, { useState, useEffect, useRef, useReducer, useMemo } from 'react';
 import gettext from 'sources/gettext';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@mui/styles';
 import url_for from 'sources/url_for';
 import getApiInstance from 'sources/api_instance';
 import {getGCD, getEpoch} from 'sources/utils';
 import ChartContainer from '../components/ChartContainer';
-import { Grid } from '@material-ui/core';
+import { Grid } from '@mui/material';
 import { DATA_POINT_SIZE } from 'sources/chartjs';
 import StreamingChart from '../../../../static/js/components/PgChart/StreamingChart';
 import {useInterval, usePrevious} from 'sources/custom_hooks';
@@ -267,21 +267,21 @@ function SummaryWrapper(props) {
   }), [props.showTooltip, props.showDataPoints, props.lineBorderWidth]);
   return (
     <>
-      <Grid container spacing={1} className={classes.container}>
+      <Grid container spacing={0.5} className={classes.container}>
-        <Grid item md={6} sm={12}>
+        <Grid item md={6}>
           <div className={classes.tableContainer}>
             <div className={classes.containerHeader}>{gettext('OS information')}</div>
             <SummaryTable data={props.osStats} />
           </div>
         </Grid>
-        <Grid item md={6} sm={12} className={classes.chartContainer}>
+        <Grid item md={6}className={classes.chartContainer}>
           <ChartContainer id='hpc-graph' title={gettext('Process & handle count')} datasets={props.processHandleCount.datasets}  errorMsg={props.errorMsg} isTest={props.isTest}>
             <StreamingChart data={props.processHandleCount} dataPointSize={DATA_POINT_SIZE} xRange={X_AXIS_LENGTH} options={options} showSecondAxis={true} />
           </ChartContainer>
         </Grid>
       </Grid>
-      <Grid container spacing={1} className={classes.container}>
+      <Grid container spacing={0.5} className={classes.container}>
-        <Grid item md={6} sm={12}>
+        <Grid item md={6}>
           <div className={classes.tableContainer}>
             <div className={classes.containerHeader}>{gettext('CPU information')}</div>
             <SummaryTable data={props.cpuStats} />

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 }) {
             <div className={classes.card}>
               <div className={classes.cardHeader}>{gettext('Welcome')}</div>
               <div className={classes.cardBody}>
-                <PgAdminLogo />
+                <div className={classes.welcomeLogo}>
+                  <PgAdminLogo />
+                </div>
                 <h4>
                   {gettext('Feature rich')} | {gettext('Maximises PostgreSQL')}{' '}
                   | {gettext('Open Source')}{' '}
@@ -148,22 +165,24 @@ export default function WelcomeDashboard({ pgBrowser }) {
                 <div className={classes.rowContent}>
                   <div className={classes.dashboardLink}>
                     <Link onClick={() => { AddNewServer(pgBrowser); }} className={classes.link}>
-                      <span
+                      <div className={classes.dashboardIcon}>
-                        className="fa fa-4x dashboard-icon fa-server"
+                        <span
-                        aria-hidden="true"
+                          className="fa fa-4x fa-server"
-                      ></span>
+                          aria-hidden="true"
-                      <br />
+                        ></span>
+                      </div>
                       {gettext('Add New Server')}
                     </Link>
                   </div>
                   <div className={classes.dashboardLink}>
                     <Link onClick={() => pgAdmin.Preferences.show()} className={classes.link}>
-                      <span
+                      <div className={classes.dashboardIcon}>
-                        id="mnu_preferences"
+                        <span
-                        className="fa fa-4x dashboard-icon fa-cogs"
+                          id="mnu_preferences"
-                        aria-hidden="true"
+                          className="fa fa-4x fa-cogs"
-                      ></span>
+                          aria-hidden="true"
-                      <br />
+                        ></span>
+                      </div>
                       {gettext('Configure pgAdmin')}
                     </Link>
                   </div>
@@ -184,21 +203,23 @@ export default function WelcomeDashboard({ pgBrowser }) {
                       target="postgres_help"
                       className={classes.link}
                     >
-                      <span
+                      <div className={classes.dashboardIcon}>
-                        className="fa fa-4x dashboard-icon dashboard-pg-doc"
+                        <span
-                        aria-hidden="true"
+                          className="fa fa-4x dashboard-pg-doc"
-                      ></span>
+                          aria-hidden="true"
-                      <br />
+                        ></span>
+                      </div>
                       {gettext('PostgreSQL Documentation')}
                     </a>
                   </div>
                   <div className={classes.gettingStartedLink}>
                     <a href="https://www.pgadmin.org" target="pgadmin_website" className={classes.link}>
-                      <span
+                      <div className={classes.dashboardIcon}>
-                        className="fa fa-4x dashboard-icon fa-globe"
+                        <span
-                        aria-hidden="true"
+                          className="fa fa-4x fa-globe"
-                      ></span>
+                          aria-hidden="true"
-                      <br />
+                        ></span>
+                      </div>
                       {gettext('pgAdmin Website')}
                     </a>
                   </div>
@@ -208,11 +229,12 @@ export default function WelcomeDashboard({ pgBrowser }) {
                       target="planet_website"
                       className={classes.link}
                     >
-                      <span
+                      <div className={classes.dashboardIcon}>
-                        className="fa fa-4x dashboard-icon fa-book"
+                        <span
-                        aria-hidden="true"
+                          className="fa fa-4x fa-book"
-                      ></span>
+                          aria-hidden="true"
-                      <br />
+                        ></span>
+                      </div>
                       {gettext('Planet PostgreSQL')}
                     </a>
                   </div>
@@ -222,11 +244,12 @@ export default function WelcomeDashboard({ pgBrowser }) {
                       target="postgres_website"
                       className={classes.link}
                     >
-                      <span
+                      <div className={classes.dashboardIcon}>
-                        className="fa fa-4x dashboard-icon fa-users"
+                        <span
-                        aria-hidden="true"
+                          className="fa fa-4x fa-users"
-                      ></span>
+                          aria-hidden="true"
-                      <br />
+                        ></span>
+                      </div>
                       {gettext('Community Support')}
                     </a>
                   </div>
@@ -244,4 +267,3 @@ export default function WelcomeDashboard({ pgBrowser }) {
 WelcomeDashboard.propTypes = {
   pgBrowser: PropTypes.object.isRequired
 };
-

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';
 

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) => ({

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) => ({

web/pgadmin/dashboard/static/scss/_dashboard.scss

@@ -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;
-    }
-}

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
   );
 }
-

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 HighlightOffRoundedIcon from '@mui/icons-material/HighlightOffRounded';
-import AccessTimeRoundedIcon from '@material-ui/icons/AccessTimeRounded';
+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)=>({

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 CancelIcon from '@mui/icons-material/Cancel';
-import DescriptionOutlinedIcon from '@material-ui/icons/DescriptionOutlined';
+import DescriptionOutlinedIcon from '@mui/icons-material/DescriptionOutlined';
-import DeleteIcon from '@material-ui/icons/Delete';
+import DeleteIcon from '@mui/icons-material/Delete';
-import HelpIcon from '@material-ui/icons/HelpRounded';
+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';

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 { Box, Paper } from '@mui/material';
-import { makeStyles } from '@material-ui/core/styles';
+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';

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(() =>

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(() =>
   ({

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 { ToggleButton, ToggleButtonGroup } from '@mui/material';
-import CheckRoundedIcon from '@material-ui/icons/CheckRounded';
+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';

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(() =>
   ({

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';

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';

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 CloseIcon from '@mui/icons-material/CloseRounded';
-import FolderSharedIcon from '@material-ui/icons/FolderShared';
+import FolderSharedIcon from '@mui/icons-material/FolderShared';
-import FolderIcon from '@material-ui/icons/Folder';
+import FolderIcon from '@mui/icons-material/Folder';
-import CheckRoundedIcon from '@material-ui/icons/CheckRounded';
+import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
-import HomeRoundedIcon from '@material-ui/icons/HomeRounded';
+import HomeRoundedIcon from '@mui/icons-material/HomeRounded';
-import ArrowUpwardRoundedIcon from '@material-ui/icons/ArrowUpwardRounded';
+import ArrowUpwardRoundedIcon from '@mui/icons-material/ArrowUpwardRounded';
-import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
-import MoreHorizRoundedIcon from '@material-ui/icons/MoreHorizRounded';
+import MoreHorizRoundedIcon from '@mui/icons-material/MoreHorizRounded';
-import SyncRoundedIcon from '@material-ui/icons/SyncRounded';
+import SyncRoundedIcon from '@mui/icons-material/SyncRounded';
-import CreateNewFolderRoundedIcon from '@material-ui/icons/CreateNewFolderRounded';
+import CreateNewFolderRoundedIcon from '@mui/icons-material/CreateNewFolderRounded';
-import GetAppRoundedIcon from '@material-ui/icons/GetAppRounded';
+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
               <PgIconButton title={gettext('Go Back')} onClick={async ()=>{
                 await openDir(fmUtilsObj.dirname(fmUtilsObj.currPath), selectedSS);
               }} icon={<ArrowUpwardRoundedIcon />} disabled={!fmUtilsObj.dirname(fmUtilsObj.currPath) || showUploader} />
-              <InputText className={classes.inputFilename}
+              <InputText size="small" className={classes.inputFilename}
                 data-label="file-path"
                 controlProps={{maxLength: null}}
                 onKeyDown={async (e)=>{

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 FolderIcon from '@mui/icons-material/Folder';
-import DescriptionIcon from '@material-ui/icons/Description';
+import DescriptionIcon from '@mui/icons-material/Description';
-import LockRoundedIcon from '@material-ui/icons/LockRounded';
+import LockRoundedIcon from '@mui/icons-material/LockRounded';
-import StorageRoundedIcon from '@material-ui/icons/StorageRounded';
+import StorageRoundedIcon from '@mui/icons-material/StorageRounded';
 import PropTypes from 'prop-types';
 import gettext from 'sources/gettext';
 

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 FolderIcon from '@mui/icons-material/Folder';
-import StorageRoundedIcon from '@material-ui/icons/StorageRounded';
+import StorageRoundedIcon from '@mui/icons-material/StorageRounded';
-import DescriptionIcon from '@material-ui/icons/Description';
+import DescriptionIcon from '@mui/icons-material/Description';
-import LockRoundedIcon from '@material-ui/icons/LockRounded';
+import LockRoundedIcon from '@mui/icons-material/LockRounded';
 import PropTypes from 'prop-types';
 import gettext from 'sources/gettext';
 

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 { Box, List, ListItem } from '@mui/material';
-import CloseIcon from '@material-ui/icons/CloseRounded';
+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';

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 { makeStyles } from '@mui/styles';
-import { Box } from '@material-ui/core';
+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 DeleteIcon from '@mui/icons-material/Delete';
-import DeleteSweepIcon from '@material-ui/icons/DeleteSweep';
+import DeleteSweepIcon from '@mui/icons-material/DeleteSweep';
-import DeleteForeverIcon from '@material-ui/icons/DeleteForever';
+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';

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';

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';

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';

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,
-        }

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 CloseSharpIcon from '@mui/icons-material/CloseSharp';
-import HelpIcon from '@material-ui/icons/HelpRounded';
+import HelpIcon from '@mui/icons-material/HelpRounded';
-import SaveSharpIcon from '@material-ui/icons/SaveSharp';
+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;
     }

web/pgadmin/preferences/static/scss/_preferences.scss

@@ -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;
-  }
-}

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';

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 KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
-import AccountCircleRoundedIcon from '@material-ui/icons/AccountCircleRounded';
+import AccountCircleRoundedIcon from '@mui/icons-material/AccountCircleRounded';
 import { usePgAdmin } from '../../static/js/BrowserComponent';
 
 const useStyles = makeStyles((theme)=>({

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';

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';

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 CloseIcon from '@mui/icons-material/CloseRounded';
-import CheckRoundedIcon from '@material-ui/icons/CheckRounded';
+import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
-import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
+import DeleteRoundedIcon from '@mui/icons-material/DeleteRounded';
 import HTMLReactParser from 'html-react-parser';
 import PropTypes from 'prop-types';
 

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 CloseIcon from '@mui/icons-material/CloseRounded';
-import CheckRoundedIcon from '@material-ui/icons/CheckRounded';
+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';

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 { Box } from '@mui/material';
-import CloseIcon from '@material-ui/icons/CloseRounded';
+import CloseIcon from '@mui/icons-material/CloseRounded';
-import DeleteForeverIcon from '@material-ui/icons/DeleteForever';
+import DeleteForeverIcon from '@mui/icons-material/DeleteForever';
-import CheckRoundedIcon from '@material-ui/icons/CheckRounded';
+import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
-import HelpIcon from '@material-ui/icons/Help';
+import HelpIcon from '@mui/icons-material/Help';
 
 import { DefaultButton, PrimaryButton, PgIconButton } from '../components/Buttons';
 import { useModalStyles } from '../helpers/ModalProvider';

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 CloseIcon from '@mui/icons-material/CloseRounded';
-import CheckRoundedIcon from '@material-ui/icons/CheckRounded';
+import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
 import PropTypes from 'prop-types';
 import { useModalStyles } from '../helpers/ModalProvider';
 import { InputText } from '../components/FormComponents';

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 { Box } from '@mui/material';
-import CloseIcon from '@material-ui/icons/CloseRounded';
+import CloseIcon from '@mui/icons-material/CloseRounded';
-import CheckRoundedIcon from '@material-ui/icons/CheckRounded';
+import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
 
 import gettext from 'sources/gettext';
 

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 { Box } from '@mui/material';
-import CloseIcon from '@material-ui/icons/CloseRounded';
+import CloseIcon from '@mui/icons-material/CloseRounded';
-import HelpIcon from '@material-ui/icons/Help';
+import HelpIcon from '@mui/icons-material/Help';
 
 import { DefaultButton, PgIconButton } from '../components/Buttons';
 import { useModalStyles } from '../helpers/ModalProvider';

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 ArrowRightAltIcon from '@mui/icons-material/ArrowRightAlt';
-import FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord';
+import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
 import HTMLReactParse from 'html-react-parser';
 import { commonTableStyles } from '../Theme';
 import PropTypes from 'prop-types';

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';

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 ZoomInIcon from '@mui/icons-material/ZoomIn';
-import ZoomOutIcon from '@material-ui/icons/ZoomOut';
+import ZoomOutIcon from '@mui/icons-material/ZoomOut';
-import ZoomOutMapIcon from '@material-ui/icons/ZoomOutMap';
+import ZoomOutMapIcon from '@mui/icons-material/ZoomOutMap';
-import SaveAltIcon from '@material-ui/icons/SaveAlt';
+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 (
     <Box ref={graphContainerRef} height="100%" width="100%" overflow="auto">
-      <Box position="absolute" top="4px" left="4px" gridGap="4px" display="flex">
+      <Box position="absolute" top="4px" left="4px" gap="4px" display="flex">
         <PgButtonGroup size="small">
           <PgIconButton title={gettext('Zoom in')} icon={<ZoomInIcon />} onClick={()=>onCmdClick('in')}/>
           <PgIconButton title={gettext('Zoom to original')} icon={<ZoomOutMapIcon />} onClick={()=>onCmdClick()}/>

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';

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 ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import ChevronRightIcon from '@material-ui/icons/ChevronRight';
+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) => ({

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 (
     <div id='quick-search-container' onClick={setSearchTerm} onKeyDown={()=>{/* no need */}}></div>,
-    <div id='quick-search-container' ref={wrapperRef} className={clsx('test', modalClasses.setTop)} role="menu">
+    <div id='quick-search-container' ref={wrapperRef} role="menu">
       <div>
         <div>
           <div style={{padding: '2px 2px 2px 2px'}}>

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 { Box } from '@mui/material';
-import { makeStyles } from '@material-ui/core/styles';
+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 DragIndicatorRoundedIcon from '@mui/icons-material/DragIndicatorRounded';
-import EditRoundedIcon from '@material-ui/icons/EditRounded';
+import EditRoundedIcon from '@mui/icons-material/EditRounded';
-import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
+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';

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(
-          <Box key={`ic-${inlineComponents[0].key}`} display="flex" className={controlClassName} gridRowGap="8px" flexWrap="wrap">
+          <Box key={`ic-${inlineComponents[0].key}`} display="flex" className={controlClassName} rowGap="8px" flexWrap="wrap">
             {inlineComponents}
           </Box>
         );
@@ -113,7 +113,7 @@ export default function FieldSetView({
   }
   if(inlineComponents?.length > 0) {
     viewFields.push(
-      <Box key={`ic-${inlineComponents[0].key}`} display="flex" className={controlClassName} gridRowGap="8px" flexWrap="wrap">
+      <Box key={`ic-${inlineComponents[0].key}`} display="flex" className={controlClassName} rowGap="8px" flexWrap="wrap">
         {inlineComponents}
       </Box>
     );

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(
-            <Box key={`ic-${inlineComponents[0].key}`} display="flex" className={classes.controlRow} gridRowGap="8px" flexWrap="wrap">
+            <Box key={`ic-${inlineComponents[0].key}`} display="flex" className={classes.controlRow} rowGap="8px" flexWrap="wrap">
               {inlineComponents}
             </Box>
           );
@@ -395,7 +396,7 @@ export default function FormView({
 
   if(inlineComponents?.length > 0) {
     tabs[inlineCompGroup].push(
-      <Box key={`ic-${inlineComponents[0].key}`} display="flex" className={classes.controlRow} gridRowGap="8px" flexWrap="wrap">
+      <Box key={`ic-${inlineComponents[0].key}`} display="flex" className={classes.controlRow} rowGap="8px" flexWrap="wrap">
         {inlineComponents}
       </Box>
     );

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 { Box, Accordion, AccordionSummary, AccordionDetails} from '@mui/material';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import { makeStyles } from '@mui/styles';
-import SaveIcon from '@material-ui/icons/Save';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import PublishIcon from '@material-ui/icons/Publish';
+import SaveIcon from '@mui/icons-material/Save';
-import DoneIcon from '@material-ui/icons/Done';
+import PublishIcon from '@mui/icons-material/Publish';
-import SettingsBackupRestoreIcon from '@material-ui/icons/SettingsBackupRestore';
+import DoneIcon from '@mui/icons-material/Done';
-import CloseIcon from '@material-ui/icons/Close';
+import SettingsBackupRestoreIcon from '@mui/icons-material/SettingsBackupRestore';
-import InfoIcon from '@material-ui/icons/InfoRounded';
+import CloseIcon from '@mui/icons-material/Close';
-import HelpIcon from '@material-ui/icons/HelpRounded';
+import InfoIcon from '@mui/icons-material/InfoRounded';
-import EditIcon from '@material-ui/icons/Edit';
+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';

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 (
     <Box className={classes.root}>
-      <Box display="flex" minWidth="80%" gridGap='40px' alignItems="center" padding="20px 80px">
+      <Box display="flex" minWidth="80%" gap="40px" alignItems="center" padding="20px 80px">
         <Box flexGrow={1} height="80%" textAlign="center">
           {pageImage}
         </Box>

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';

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' && <EmailRegisterView mfaView={mfaView} />}
             {mfaView.auth_method == 'authenticator' && <AuthenticatorRegisterView mfaView={mfaView} />}
-            <Box display="flex" gridGap="15px">
+            <Box display="flex" gap="15px">
               <SecurityButton name="continue" value="Continue">{gettext('Continue')}</SecurityButton>
               <DefaultButton type="submit" name="cancel" value="Cancel" style={{width: '100%'}}>{gettext('Cancel')}</DefaultButton>
             </Box>

web/pgadmin/static/js/Theme/dark.js

@@ -8,8 +8,7 @@
 //////////////////////////////////////////////////////////////
 
 /* The dark theme */
-import { createTheme } from '@material-ui/core/styles';
+import {  darken, createTheme} from '@mui/material/styles';
-import { darken } from '@material-ui/core/styles/colorManipulator';
 
 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',
+      }
     }
   });
 }

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',
+      }
     }
   });
 }

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',
+        backgroundColor: theme.otherVars.tree.treeBgSelected + '!important',
-        color: theme.otherVars.treeFgSelected + '!important',
+        color: theme.otherVars.tree.treeFgSelected + '!important',
       },
 
       '& .pg-cm-autocomplete-icon': {

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
+    }
+
+
+
+
+
+
+
+
+  };
+}

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'
+    }
+  };}

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

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',
+    },
+
+  };
+}

web/pgadmin/static/js/Theme/standard.js

@@ -8,8 +8,7 @@
 //////////////////////////////////////////////////////////////
 
 /* The standard theme */
-import { createTheme } from '@material-ui/core/styles';
+import { alpha, darken, createTheme} from '@mui/material/styles';
-import { alpha, darken } from '@material-ui/core/styles/colorManipulator';
 
 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',
+      tree: {
-      treeFgSelected: '#222',
+        textFg: '#222222',
+        inputBg: '#ffffff',
+        fgHover: '#222222',
+        bgHover: '#ebeef3',
+        textHoverFg: '#222222',
+        bgSelected: '#d6effc'
+      }
     }
   });
 }

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': {
+    '&.MuiButton-sizeSmall, &.MuiButton-outlined.MuiButton-sizeSmall, &.MuiButton-contained.MuiButton-sizeSmall': {
-      padding: '1px 4px',
     },
   },
   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 (
-    <Button ref={ref} size={size} className={clsx(allClassName)} data-label={dataLabel} {...otherProps} variant="contained" color="primary">{children}</Button>
+    <Button ref={ref} size={size} className={clsx(allClassName)} data-label={dataLabel} {...otherProps} color="primary" variant="contained">{children}</Button>
   );
 });
 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 (
-    <Button variant="outlined" color="default" ref={ref} size={size} className={clsx(allClassName)} data-label={dataLabel} {...otherProps}>{children}</Button>
+    <Button variant="outlined" ref={ref} size={size} className={clsx(allClassName)} data-label={dataLabel} color="default" {...otherProps}>{children}</Button>
   );
 });
 DefaultButton.displayName = 'DefaultButton';
@@ -220,7 +230,7 @@ PgIconButton.propTypes = {
 export const PgButtonGroup = forwardRef(({children, ...props}, ref)=>{
   /* Tooltip does not work for disabled items */
   return (
-    <ButtonGroup innerRef={ref} {...props}>
+    <ButtonGroup ref={ref} {...props}>
       {children}
     </ButtonGroup>
   );

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 CheckBoxIcon from '@mui/icons-material/CheckBox';
-import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
+import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
-import IndeterminateCheckBoxIcon from '@material-ui/icons/IndeterminateCheckBox';
+import IndeterminateCheckBoxIcon from '@mui/icons-material/IndeterminateCheckBox';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import ChevronRightIcon from '@material-ui/icons/ChevronRight';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import PropTypes from 'prop-types';
 
 const useStyles = makeStyles((theme) =>

web/pgadmin/static/js/components/EmptyPanelMessage.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { Box } from '@material-ui/core';
+import { Box } from '@mui/material';
-import InfoRoundedIcon from '@material-ui/icons/InfoRounded';
+import InfoRoundedIcon from '@mui/icons-material/InfoRounded';
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@mui/styles';
 import PropTypes from 'prop-types';
 
 const useStyles = makeStyles((theme)=>({

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 <Icon className={'MuiSvgIcon-root'} {...props} />;
+  return <SvgIcon component={Icon} inheritViewBox {...props}/>;
 }
 
 ExternalIcon.propTypes = {

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';

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';
+} from '@mui/material';
-import { ToggleButton, ToggleButtonGroup } from '@material-ui/lab';
+import ErrorRoundedIcon from '@mui/icons-material/ErrorOutlineRounded';
-import ErrorRoundedIcon from '@material-ui/icons/ErrorOutlineRounded';
+import InfoRoundedIcon from '@mui/icons-material/InfoRounded';
-import InfoRoundedIcon from '@material-ui/icons/InfoRounded';
+import CloseIcon from '@mui/icons-material/CloseRounded';
-import CloseIcon from '@material-ui/icons/CloseRounded';
+import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
-import CheckRoundedIcon from '@material-ui/icons/CheckRounded';
+import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
-import WarningRoundedIcon from '@material-ui/icons/WarningRounded';
+import FolderOpenRoundedIcon from '@mui/icons-material/FolderOpenRounded';
-import FolderOpenRoundedIcon from '@material-ui/icons/FolderOpenRounded';
+import DescriptionIcon from '@mui/icons-material/Description';
-import DescriptionIcon from '@material-ui/icons/Description';
+import AssignmentTurnedIn from '@mui/icons-material/AssignmentTurnedIn';
-import AssignmentTurnedIn from '@material-ui/icons/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
     <Grid container spacing={0} className={className} data-testid="form-input">
       <Grid item lg={labelGridBasis} md={labelGridBasis} sm={12} xs={12}>
         {
-          labelTooltip ? 
+          labelTooltip ?
             <Tooltip title={labelTooltip}>
               {labelComponent}
             </Tooltip> : 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,
+    format: format.replace('xxx', timeZoneString),
-    placeholder: placeholder,
     label: '',
     variant: 'inline',
-    readOnly: Boolean(readonly),
+    ampm: controlProps.ampm ? controlProps.ampm : undefined,
-    autoOk: controlProps.autoOk || false,
-    ampm: controlProps.ampm || false,
     disablePast: controlProps.disablePast || false,
-    invalidDateMessage: '',
-    maxDateMessage: '',
-    minDateMessage: '',
     onChange: handleChange,
-    fullWidth: true,
+    slotProps: {textField: {placeholder:placeholder}}
   };
 
   if (controlProps?.pickerType === 'Date') {
     return (
-      <MuiPickersUtilsProvider utils={DateFnsUtils}>
+      <DatePicker {...commonProps} />
-        <KeyboardDatePicker {...commonProps} />
-      </MuiPickersUtilsProvider>
     );
   } else if (controlProps?.pickerType === 'Time') {
     return (
-      <MuiPickersUtilsProvider utils={DateFnsUtils}>
+      <TimePicker {...commonProps} />
-        <KeyboardTimePicker {...commonProps} />
-      </MuiPickersUtilsProvider>
     );
   }
-
   return (
-    <MuiPickersUtilsProvider utils={DateFnsUtils}>
+    <DateTimePicker {...commonProps} />
-      <KeyboardDateTimePicker {...commonProps} />
-    </MuiPickersUtilsProvider>
   );
 }
 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,

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';

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';
 

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,
       }
     }
   },

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 AccountTreeIcon from '@mui/icons-material/AccountTree';
-import CommentIcon from '@material-ui/icons/Comment';
+import CommentIcon from '@mui/icons-material/Comment';
-import ArrowForwardIosRoundedIcon from '@material-ui/icons/ArrowForwardIosRounded';
+import ArrowForwardIosRoundedIcon from '@mui/icons-material/ArrowForwardIosRounded';
 import { usePgAdmin } from '../../../static/js/BrowserComponent';
 import usePreferences from '../../../preferences/static/js/store';
 

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;

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 KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
-import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import gettext from 'sources/gettext';
 
 const useStyles = makeStyles((theme)=>({

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 KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
-import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
-import ChevronRightIcon from '@material-ui/icons/ChevronRight';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import { PgIconButton } from './Buttons';
 
 /* eslint-disable react/display-name */

web/pgadmin/static/js/components/PgTree/scss/styles.scss

@@ -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;
-    }
-}

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';

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';

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 KeyboardArrowRightRoundedIcon from '@mui/icons-material/KeyboardArrowRightRounded';
-import ExpandMoreRoundedIcon from '@material-ui/icons/ExpandMoreRounded';
+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();

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 CloseIcon from '@mui/icons-material/CloseRounded';
-import ArrowDownwardRoundedIcon from '@material-ui/icons/ArrowDownwardRounded';
+import ArrowDownwardRoundedIcon from '@mui/icons-material/ArrowDownwardRounded';
-import ArrowUpwardRoundedIcon from '@material-ui/icons/ArrowUpwardRounded';
+import ArrowUpwardRoundedIcon from '@mui/icons-material/ArrowUpwardRounded';
-import SwapHorizRoundedIcon from '@material-ui/icons/SwapHorizRounded';
+import SwapHorizRoundedIcon from '@mui/icons-material/SwapHorizRounded';
-import SwapCallsRoundedIcon from '@material-ui/icons/SwapCallsRounded';
+import SwapCallsRoundedIcon from '@mui/icons-material/SwapCallsRounded';
 import { RegexIcon, FormatCaseIcon } from '../../ExternalIcon';
 
 import {

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: {