Replace the current FontAwesome based PSQL tool icon with MUI Terminal icon. #7472

docs/en_US/release_notes_8_7.rst

@@ -27,6 +27,7 @@ Housekeeping
 ************
 
   | `Issue #7419 <https://github.com/pgadmin-org/pgadmin4/issues/7419>`_ -  Upgrade react-table from v7 to v8.
+  | `Issue #7472 <https://github.com/pgadmin-org/pgadmin4/issues/7472>`_ -  Replace the current FontAwesome based PSQL tool icon with MUI Terminal icon.
 
 Bug fixes
 *********

web/pgadmin/static/img/fonticon/terminal.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24"><g><rect fill="none" height="24" width="24"/><rect fill="none" height="24" width="24"/></g><g><path d="M20,4H4C2.89,4,2,4.9,2,6v12c0,1.1,0.89,2,2,2h16c1.1,0,2-0.9,2-2V6C22,4.9,21.11,4,20,4z M20,18H4V8h16V18z M12,16 c0-0.55,0.45-1,1-1h4c0.55,0,1,0.45,1,1c0,0.55-0.45,1-1,1h-4C12.45,17,12,16.55,12,16z M6.79,9.71c0.39-0.39,1.02-0.39,1.41,0 l2.59,2.59c0.39,0.39,0.39,1.02,0,1.41l-2.59,2.59c-0.39,0.39-1.02,0.39-1.41,0c-0.39-0.39-0.39-1.02,0-1.41L8.67,13l-1.88-1.88 C6.4,10.73,6.4,10.1,6.79,9.71z"/></g></svg>

web/pgadmin/static/img/terminal.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M9.4 86.6C-3.1 74.1-3.1 53.9 9.4 41.4s32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L178.7 256 9.4 86.6zM256 416H544c17.7 0 32 14.3 32 32s-14.3 32-32 32H256c-17.7 0-32-14.3-32-32s14.3-32 32-32z"/></svg>

web/pgadmin/static/js/Theme/overrides/pgadmin.classes.override.js

@@ -19,5 +19,10 @@ export default function pgadminOverride(theme) {
       width: '50px',
       height: '50px',
       backgroundAize: '50px 50px'
+    },
+    '.pg-font-icon': {
+      '&.icon-terminal': {
+        fontSize: '1.3rem !important',
+      }
     }
   };}

web/pgadmin/static/js/Theme/overrides/rcdock.override.js

@@ -132,6 +132,10 @@ export default function rcdockOverride(theme) {
               top: '-5px',
             }
           }
+        },
+        '& .dock-tab-icon': {
+          fontSize: '1rem',
+          marginRight: '4px'
         }
       },
       '& .dock-extra-content': {

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

@@ -21,7 +21,7 @@ import SQLFileSvg from '../../img/sql_file.svg?svgr';
 import MagicSvg from '../../img/magic.svg?svgr';
 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 TerminalSvg from '../../img/fonticon/terminal.svg?svgr';
 import RowFilterSvg from '../../img/fonticon/row_filter.svg?svgr';
 import SvgIcon from '@mui/material/SvgIcon';
 
@@ -75,7 +75,7 @@ ExpandDialogIcon.propTypes = {style: PropTypes.object};
 export const MinimizeDialogIcon = ({style})=><ExternalIcon Icon={Collapse} style={{height: '1.4rem', ...style}} data-label="MinimizeDialogIcon" />;
 MinimizeDialogIcon.propTypes = {style: PropTypes.object};
 
-export const TerminalIcon = ({style})=><ExternalIcon Icon={TerminalSvg} style={{height: '0.9rem', ...style}} data-label="TerminalIcon" />;
+export const TerminalIcon = ({style})=><ExternalIcon Icon={TerminalSvg} style={{height: '1.5rem', transform: 'scale(0.95)', ...style}} data-label="TerminalIcon" />;
 TerminalIcon.propTypes = {style: PropTypes.object};
 
 export const RowFilterIcon = ({style})=><ExternalIcon Icon={RowFilterSvg} style={{height: '1rem', ...style}} data-label="RowFilterIcon" />;

web/pgadmin/static/js/helpers/Layout/index.jsx

@@ -49,7 +49,7 @@ function TabTitle({id, closable, defaultInternal}) {
 
   return (
     <Box display="flex" alignItems="center" title={attrs.tooltip} onContextMenu={onContextMenu} width="100%">
-      {attrs.icon && <span style={{fontSize: '1rem', marginRight: '4px'}} className={attrs.icon}></span>}
+      {attrs.icon && <span className={`dock-tab-icon ${attrs.icon}`}></span>}
       <span style={{textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap'}} data-visible={layoutDocker.isTabVisible(id)}>{attrs.title}</span>
       {closable && <PgIconButton title={gettext('Close')} icon={<CloseIcon style={{height: '0.7em'}} />} size="xs" noBorder onClick={()=>{
         layoutDocker.close(id);

web/pgadmin/tools/psql/static/js/PsqlModule.js

@@ -151,7 +151,7 @@ export default class Psql {
       `${BROWSER_PANELS.PSQL_TOOL}_${transId}`,
       panelUrl,
       {title: escapedTitle, db: db_label},
-      {title: panelTitle, icon: 'fas fa-terminal psql-tab-style', manualClose: false, renamable: true},
+      {title: panelTitle, icon: 'pg-font-icon icon-terminal', manualClose: false, renamable: true},
       Boolean(open_new_tab?.includes('psql_tool'))
     );