From d26b434eb1bf3aa084f00fa0eb143e43591713c3 Mon Sep 17 00:00:00 2001
From: Ty Dunn <ty@tydunn.com>
Date: Tue, 4 Jul 2023 22:23:04 -0700
Subject: stop inside of circle
---
extension/react-app/src/components/HeaderButtonWithText.tsx | 4 +++-
extension/react-app/src/components/StepContainer.tsx | 7 ++++---
2 files changed, 7 insertions(+), 4 deletions(-)
(limited to 'extension/react-app/src')
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
--
cgit v1.2.3-70-g09d2