chore(site): replace stop icon with pause icon #21173
Conversation
Replace CircleStopIcon and SquareIcon with PauseIcon from Lucide for workspace stop actions to better represent the stop/pause functionality. Changes: - WorkspaceActions/Buttons.tsx: CircleStopIcon -> PauseIcon - WorkspacesTable.tsx: SquareIcon -> PauseIcon Fixes #20195
There was a problem hiding this comment.
Pull request overview
This PR attempts to standardize workspace stop action icons by replacing CircleStopIcon and SquareIcon with PauseIcon from Lucide React. However, the changes are incomplete and create inconsistencies rather than resolving them, as several other locations in the codebase continue to use SquareIcon for stop actions.
Key Issues
- Only two of five locations using stop icons were updated, creating inconsistent UI
- Semantic mismatch between pause icon and "Stop" label (pause suggests temporary suspension, stop suggests full shutdown)
- Other stop-related icons remain unchanged (BuildIcon.tsx, WorkspacesPageView.tsx, workspace.tsx)
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| site/src/pages/WorkspacesPage/WorkspacesTable.tsx | Replaces SquareIcon with PauseIcon in workspace stop action button |
| site/src/pages/WorkspacePage/WorkspaceActions/Buttons.tsx | Replaces CircleStopIcon with PauseIcon in StopButton component |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| BanIcon, | ||
| CircleStopIcon, | ||
| CloudIcon, | ||
| PauseIcon, |
There was a problem hiding this comment.
The pause icon is semantically incorrect for the "Stop" action. A pause suggests a temporary suspension that can be quickly resumed, while stop suggests a full shutdown. This creates a semantic mismatch between the icon (pause) and the button label ("Stop"). Consider either:
- Keeping the stop icon (SquareIcon or CircleStopIcon) for semantic accuracy, or
- If pause is the correct semantic, update the button label to "Pause" to match the icon
Additionally, there are other locations in the codebase still using SquareIcon for stop actions (WorkspacesPageView.tsx line 178, BuildIcon.tsx line 11, utils/workspace.tsx line 244), creating an inconsistent experience.
| PauseIcon, | |
| SquareIcon, |
| EllipsisVertical, | ||
| ExternalLinkIcon, | ||
| FileIcon, | ||
| PauseIcon, |
There was a problem hiding this comment.
Inconsistent icon usage for stop actions across the codebase. While this file now uses PauseIcon, there are several other locations still using SquareIcon for the same stop action:
- WorkspacesPageView.tsx (line 178): Bulk actions menu uses
<SquareIcon /> Stop - BuildIcon.tsx (line 11): Maps stop transition to SquareIcon
- utils/workspace.tsx (line 244): Displays SquareIcon for "stopped" status
This creates an inconsistent user experience where different parts of the UI use different icons for the same action. Consider updating all stop-related icons consistently across the entire codebase.
Address review feedback to ensure consistency across all stop action icons in the codebase. Additional changes: - BuildIcon.tsx: SquareIcon -> PauseIcon for stop transition - WorkspacesPageView.tsx: SquareIcon -> PauseIcon in batch actions - workspace.tsx: SquareIcon -> PauseIcon for stopped status All stop-related icons now consistently use PauseIcon throughout the application. Addresses review feedback from #21173
|
@matifali I made a comment in the original issue, I am trying to avoid the semantic mismatch between calling the action stop and using the "Pause" icon, if possible. |
|
@jaaydenh I replied in the issue |
Description
This PR replaces the stop icons with the pause icon from Lucide React for workspace stop actions, providing better visual consistency and semantics.
Changes
CircleStopIcontoPauseIconSquareIcontoPauseIconBoth locations now use the same pause icon (⏸️) for consistency across the UI.
Testing
PauseIconis already used elsewhere in the codebaselucide-reactScreenshots
The pause icon now appears consistently in:
Fixes #20195