Change the stop/terminate icon at all the places for better UX. #8473

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

@@ -18,7 +18,7 @@ import Graphs from './Graphs';
 import { Box, Tab, Tabs } from '@mui/material';
 import { PgIconButton } from '../../../static/js/components/Buttons';
 import CancelIcon from '@mui/icons-material/Cancel';
-import StopSharpIcon from '@mui/icons-material/StopSharp';
+import StopCircleOutlinedIcon from '@mui/icons-material/StopCircleOutlined';
 import WelcomeDashboard from './WelcomeDashboard';
 import ActiveQuery from './ActiveQuery.ui';
 import ServerLog from './ServerLog.ui';
@@ -198,7 +198,7 @@ function getCancelCell(pgAdmin, sid, did, canTakeAction, onSuccess) {
       <PgIconButton
         size="xs"
         noBorder
-        icon={<StopSharpIcon/>}
+        icon={<StopCircleOutlinedIcon/>}
         onClick={() => {
           if (!canTakeAction(row, 'cancel'))
             return;

web/pgadmin/misc/bgprocess/static/js/Processes.jsx

@@ -14,7 +14,7 @@ import gettext from 'sources/gettext';
 import PropTypes from 'prop-types';
 import { BgProcessManagerEvents, BgProcessManagerProcessState } from './BgProcessConstants';
 import { PgButtonGroup, PgIconButton } from '../../../../static/js/components/Buttons';
-import CancelIcon from '@mui/icons-material/Cancel';
+import StopCircleOutlinedIcon from '@mui/icons-material/StopCircleOutlined';
 import DescriptionOutlinedIcon from '@mui/icons-material/DescriptionOutlined';
 import DeleteIcon from '@mui/icons-material/Delete';
 import HelpIcon from '@mui/icons-material/HelpRounded';
@@ -76,7 +76,7 @@ function CancelCell({row}) {
     <PgIconButton
       size="xs"
       noBorder
-      icon={<CancelIcon />}
+      icon={<StopCircleOutlinedIcon />}
       className='Processes-stopButton'
       disabled={row.original.process_state != BgProcessManagerProcessState.PROCESS_STARTED
         || row.original.server_id != null}

web/pgadmin/tools/debugger/static/js/components/ToolBar.jsx

@@ -17,7 +17,7 @@ import FormatIndentDecreaseIcon from '@mui/icons-material/FormatIndentDecrease';
 import PlayCircleFilledWhiteIcon from '@mui/icons-material/PlayCircleFilledWhite';
 import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
 import NotInterestedIcon from '@mui/icons-material/NotInterested';
-import StopIcon from '@mui/icons-material/Stop';
+import StopCircleOutlinedIcon from '@mui/icons-material/StopCircleOutlined';
 import HelpIcon from '@mui/icons-material/HelpRounded';
 import RotateLeftRoundedIcon from '@mui/icons-material/RotateLeftRounded';
 
@@ -180,7 +180,7 @@ export function ToolBar() {
           }} />
       </PgButtonGroup>
       <PgButtonGroup size="small">
-        <PgIconButton data-test='stop-debugger' title={gettext('Stop')} icon={<StopIcon style={{height: '2rem'}} />} disabled={buttonsDisabled[MENUS.STOP]} onClick={() => { stop(); }}
+        <PgIconButton data-test='stop-debugger' title={gettext('Stop')} icon={<StopCircleOutlinedIcon style={{height: '2rem'}} />} disabled={buttonsDisabled[MENUS.STOP]} onClick={() => { stop(); }}
           shortcut={preferences?.btn_stop} />
       </PgButtonGroup>
       <PgButtonGroup size="small">

web/pgadmin/tools/sqleditor/static/js/components/sections/MainToolBar.jsx

@@ -13,7 +13,7 @@ import { PgButtonGroup, PgIconButton } from '../../../../../../static/js/compone
 import FolderRoundedIcon from '@mui/icons-material/FolderRounded';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import SaveRoundedIcon from '@mui/icons-material/SaveRounded';
-import StopRoundedIcon from '@mui/icons-material/StopRounded';
+import StopCircleOutlinedIcon from '@mui/icons-material/StopCircleOutlined';
 import PlayArrowRoundedIcon from '@mui/icons-material/PlayArrowRounded';
 import { FilterIcon, CommitIcon, RollbackIcon, ExecuteQueryIcon } from '../../../../../../static/js/components/ExternalIcon';
 import EditRoundedIcon from '@mui/icons-material/EditRounded';
@@ -535,7 +535,7 @@ export function MainToolBar({containerRef, onFilterClick, onManageMacros, onAddT
           {label: gettext('100 rows'), value: '100'},
         ]} value={limit} onChange={onLimitChange} disabled={buttonsDisabled['limit'] || queryToolCtx.params.is_query_tool} />
         <PgButtonGroup size="small">
-          <PgIconButton title={gettext('Cancel query')} icon={<StopRoundedIcon style={{height: 'unset'}} />}
+          <PgIconButton title={gettext('Cancel query')} icon={<StopCircleOutlinedIcon style={{height: 'unset'}} />}
             onClick={cancelQuery} disabled={buttonsDisabled['cancel']} shortcut={queryToolPref.btn_cancel_query} />
           <PgIconButton title={gettext('Execute script')} icon={<PlayArrowRoundedIcon style={{height: 'unset'}} />}
             onClick={executeScript} disabled={buttonsDisabled['execute']} shortcut={queryToolPref.execute_script}/>