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 | d26b434eb1bf3aa084f00fa0eb143e43591713c3 (patch) | |
| tree | ecc15be2231abe1cdc8ac380760bd359cbab130b /extension/react-app/src/components | |
| parent | 26f147d2fdd5412117445c97a937c49b064da082 (diff) | |
| download | sncontinue-d26b434eb1bf3aa084f00fa0eb143e43591713c3.tar.gz sncontinue-d26b434eb1bf3aa084f00fa0eb143e43591713c3.tar.bz2 sncontinue-d26b434eb1bf3aa084f00fa0eb143e43591713c3.zip | |
stop inside of circle
Diffstat (limited to 'extension/react-app/src/components')
| -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 |