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

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

@@ -17,8 +17,8 @@ import url_for from 'sources/url_for';
 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 StopCircleOutlinedIcon from '@mui/icons-material/StopCircleOutlined';
+import BlockRoundedIcon from '@mui/icons-material/BlockRounded';
+import StopRoundedIcon from '@mui/icons-material/StopRounded';
 import WelcomeDashboard from './WelcomeDashboard';
 import ActiveQuery from './ActiveQuery.ui';
 import ServerLog from './ServerLog.ui';
@@ -81,9 +81,6 @@ const Root = styled('div')(({theme}) => ({
         height: '100%',
         display: 'flex',
         flexDirection: 'column',
-        '& .Dashboard-terminateButton': {
-          color: theme.palette.error.main
-        },
         '& .Dashboard-download': {
           '& .Dashboard-downloadButton': {
             width: '40px',
@@ -133,7 +130,7 @@ function getTerminateCell(pgAdmin, sid, did, canTakeAction, onSuccess) {
       <PgIconButton
         size="xs"
         noBorder
-        icon={<CancelIcon />}
+        icon={<BlockRoundedIcon />}
         className='Dashboard-terminateButton'
         onClick={() => {
           if (
@@ -198,7 +195,7 @@ function getCancelCell(pgAdmin, sid, did, canTakeAction, onSuccess) {
       <PgIconButton
         size="xs"
         noBorder
-        icon={<StopCircleOutlinedIcon/>}
+        icon={<StopRoundedIcon/>}
         onClick={() => {
           if (!canTakeAction(row, 'cancel'))
             return;

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

@@ -16,7 +16,7 @@ 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 '@mui/icons-material/HighlightOffRounded';
+import BlockRoundedIcon from '@mui/icons-material/BlockRounded';
 import AccessTimeRoundedIcon from '@mui/icons-material/AccessTimeRounded';
 import { useInterval } from '../../../../static/js/custom_hooks';
 import getApiInstance from '../../../../static/js/api_instance';
@@ -165,8 +165,8 @@ export default function ProcessDetails({data}) {
             pgAdmin.Tools.FileManager.openStorageManager(data.current_storage_dir);
           }} style={{marginRight: '4px'}} />}
           <DefaultButton disabled={process_state != BgProcessManagerProcessState.PROCESS_STARTED || data.server_id != null}
-            startIcon={<HighlightOffRoundedIcon />} className='ProcessDetails-terminateBtn' onClick={onStopProcess}>
-              Stop Process
+            startIcon={<BlockRoundedIcon />} className='ProcessDetails-terminateBtn' onClick={onStopProcess}>
+              End Process
           </DefaultButton>
         </Box>
       </Box>

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 StopCircleOutlinedIcon from '@mui/icons-material/StopCircleOutlined';
+import BlockRoundedIcon from '@mui/icons-material/BlockRounded';
 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={<StopCircleOutlinedIcon />}
+      icon={<BlockRoundedIcon />}
       className='Processes-stopButton'
       disabled={row.original.process_state != BgProcessManagerProcessState.PROCESS_STARTED
         || row.original.server_id != null}
@@ -84,8 +84,8 @@ function CancelCell({row}) {
         e.preventDefault();
         pgAdmin.Browser.BgProcessManager.stopProcess(row.original.id);
       }}
-      aria-label="Stop Process"
-      title={gettext('Stop Process')}
+      aria-label="End Process"
+      title={gettext('End Process')}
     ></PgIconButton>
   );
 }

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 StopCircleOutlinedIcon from '@mui/icons-material/StopCircleOutlined';
+import StopRoundedIcon from '@mui/icons-material/StopRounded';
 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={<StopCircleOutlinedIcon style={{height: '2rem'}} />} disabled={buttonsDisabled[MENUS.STOP]} onClick={() => { stop(); }}
+        <PgIconButton data-test='stop-debugger' title={gettext('Stop')} icon={<StopRoundedIcon 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 StopCircleOutlinedIcon from '@mui/icons-material/StopCircleOutlined';
+import StopRoundedIcon from '@mui/icons-material/StopRounded';
 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={<StopCircleOutlinedIcon style={{height: 'unset'}} />}
+          <PgIconButton title={gettext('Cancel query')} icon={<StopRoundedIcon 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}/>