diff options
| author | Ty Dunn <ty@tydunn.com> | 2023-07-04 22:23:04 -0700 |
|---|---|---|
| committer | Ty Dunn <ty@tydunn.com> | 2023-07-04 22:23:04 -0700 |
| commit | 0adac52b7733b32540b91e254244a08467c8650f (patch) | |
| tree | 3e6a37795a9130fec1138d76f0daef776010290d /extension/react-app/src | |
| parent | 9dd364dc7f5a5a8513ee4805dfeb303076dc1274 (diff) | |
| download | sncontinue-0adac52b7733b32540b91e254244a08467c8650f.tar.gz sncontinue-0adac52b7733b32540b91e254244a08467c8650f.tar.bz2 sncontinue-0adac52b7733b32540b91e254244a08467c8650f.zip | |
stop inside of circle
Diffstat (limited to 'extension/react-app/src')
| -rw-r--r-- | extension/react-app/src/components/HeaderButtonWithText.tsx | 4 | ||||
| -rw-r--r-- | extension/react-app/src/components/StepContainer.tsx | 7 |
2 files changed, 7 insertions, 4 deletions
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 |