diff --git a/wax-prosemirror-services/src/FillTheGapQuestionService/components/FillTheGapContainerComponent.js b/wax-prosemirror-services/src/FillTheGapQuestionService/components/FillTheGapContainerComponent.js index 32eaa416f85cc49ebbb2cd6a22c2e44459a9b87a..653f467a159adf6a40ffb82ea9dbca119d4ccd89 100644 --- a/wax-prosemirror-services/src/FillTheGapQuestionService/components/FillTheGapContainerComponent.js +++ b/wax-prosemirror-services/src/FillTheGapQuestionService/components/FillTheGapContainerComponent.js @@ -42,13 +42,28 @@ const InfoMsg = styled.div` bottom: 30px; color: #fff; display: none; - float: right; left: 100px; padding-left: 4px; padding-right: 4px; position: relative; `; +const ActionButton = styled.button` + background: transparent; + cursor: pointer; + margin-top: 16px; + border: none; + position: relative; + bottom: 14px; + left: -11px; + float: right; +`; + +const StyledIconActionRemove = styled(Icon)` + height: 24px; + width: 24px; +`; + export default ({ node, view, getPos }) => { const context = useContext(WaxContext); const { @@ -79,6 +94,8 @@ export default ({ node, view, getPos }) => { setInfoMsgIsOpen(!infoMsgIsOpen); }; + const removeQuestion = () => {}; + return ( <FillTheGapWrapper> <div> @@ -97,6 +114,13 @@ export default ({ node, view, getPos }) => { <InfoMsg ref={infoMsgRef}> enter answers seperated with a semi colon </InfoMsg> + <ActionButton + aria-label="delete this question" + onClick={removeQuestion} + type="button" + > + <StyledIconActionRemove name="deleteOutlined" /> + </ActionButton> </FillTheGapContainerTool> )} </div>