stop inside of circle

4 files changed, 35 insertions, 4 deletions

diff --git a/extension/react-app/package-lock.json b/extension/react-app/package-lock.json
index 85b8633b..fb13dffd 100644
--- a/extension/react-app/package-lock.json
+++ b/extension/react-app/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@styled-icons/heroicons-outline": "^10.47.0",
+        "@styled-icons/heroicons-solid": "^10.47.0",
         "@types/vscode-webview": "^1.57.1",
         "downshift": "^7.6.0",
         "posthog-js": "^1.58.0",
@@ -691,6 +692,23 @@
         "styled-components": "*"
       }
     },
+    "node_modules/@styled-icons/heroicons-solid": {
+      "version": "10.47.0",
+      "resolved": "https://registry.npmjs.org/@styled-icons/heroicons-solid/-/heroicons-solid-10.47.0.tgz",
+      "integrity": "sha512-j+tJx2NzLG2tc91IXJVwKNjsI/osxmak+wmLfnfBsB+49srpxMYjuLPMtl9ZY/xgbNsWO36O+/N5Zf5bkgiKcQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.7",
+        "@styled-icons/styled-icon": "^10.7.0"
+      },
+      "funding": {
+        "type": "GitHub",
+        "url": "https://github.com/sponsors/jacobwgillespie"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "styled-components": "*"
+      }
+    },
     "node_modules/@styled-icons/styled-icon": {
       "version": "10.7.0",
       "resolved": "https://registry.npmjs.org/@styled-icons/styled-icon/-/styled-icon-10.7.0.tgz",
@@ -3937,6 +3955,15 @@
         "@styled-icons/styled-icon": "^10.7.0"
       }
     },
+    "@styled-icons/heroicons-solid": {
+      "version": "10.47.0",
+      "resolved": "https://registry.npmjs.org/@styled-icons/heroicons-solid/-/heroicons-solid-10.47.0.tgz",
+      "integrity": "sha512-j+tJx2NzLG2tc91IXJVwKNjsI/osxmak+wmLfnfBsB+49srpxMYjuLPMtl9ZY/xgbNsWO36O+/N5Zf5bkgiKcQ==",
+      "requires": {
+        "@babel/runtime": "^7.20.7",
+        "@styled-icons/styled-icon": "^10.7.0"
+      }
+    },
     "@styled-icons/styled-icon": {
       "version": "10.7.0",
       "resolved": "https://registry.npmjs.org/@styled-icons/styled-icon/-/styled-icon-10.7.0.tgz",
diff --git a/extension/react-app/package.json b/extension/react-app/package.json
index e46fdc8c..12701906 100644
--- a/extension/react-app/package.json
+++ b/extension/react-app/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@styled-icons/heroicons-outline": "^10.47.0",
+    "@styled-icons/heroicons-solid": "^10.47.0",
     "@types/vscode-webview": "^1.57.1",
     "downshift": "^7.6.0",
     "posthog-js": "^1.58.0",
diff --git a/extension/react-app/src/components/HeaderButtonWithText.tsx b/extension/react-app/src/components/HeaderButtonWithText.tsx
index 3ddac93c..72a653c5 100644
--- a/extension/react-app/src/components/HeaderButtonWithText.tsx
+++ b/extension/react-app/src/components/HeaderButtonWithText.tsx
@@ -8,15 +8,17 @@ interface HeaderButtonWithTextProps {
   children: React.ReactNode;
   disabled?: boolean;
   inverted?: boolean;
+  active?: boolean;
 }
 
 const HeaderButtonWithText = (props: HeaderButtonWithTextProps) => {
   const [hover, setHover] = useState(false);
+  const paddingLeft = (props.disabled ? (props.active ?  "3px" : "1px"): (hover ? "4px" : "1px"));
   return (
     <HeaderButton
       inverted={props.inverted}
       disabled={props.disabled}
-      style={{ padding: "1px", paddingLeft: hover ? "4px" : "1px" }}
+      style={{ padding: (props.active ?  "3px" : "1px"), paddingLeft, borderRadius: (props.active ?  "50%" : undefined) }}
       onMouseEnter={() => {
         if (!props.disabled) {
           setHover(true);
diff --git a/extension/react-app/src/components/StepContainer.tsx b/extension/react-app/src/components/StepContainer.tsx
index 311f68cf..183ffeef 100644
--- a/extension/react-app/src/components/StepContainer.tsx
+++ b/extension/react-app/src/components/StepContainer.tsx
@@ -10,8 +10,8 @@ import {
 import {
   ChevronDown,
   ChevronRight,
-  XMark,
   ArrowPath,
+  XMark
 } from "@styled-icons/heroicons-outline";
 import {
   Stop,
@@ -210,9 +210,10 @@ function StepContainer(props: StepContainerProps) {
                   e.stopPropagation();
                   props.onDelete();
                 }}
-                text="Delete"
+                text={props.historyNode.active ? "Stop" : "Delete"}
+                active={props.historyNode.active}
               >
-                <Stop size="1.6em" onClick={props.onDelete} />
+                {props.historyNode.active ? <Stop size="1.6em" onClick={props.onDelete} /> :<XMark size="1.6em" onClick={props.onDelete} />}
               </HeaderButtonWithText>
               {props.historyNode.observation?.error ? (
                 <HeaderButtonWithText