diff options
Diffstat (limited to 'src/client/views/nodes/TaskCompletedBox.tsx')
-rw-r--r-- | src/client/views/nodes/TaskCompletedBox.tsx | 35 |
1 files changed, 19 insertions, 16 deletions
diff --git a/src/client/views/nodes/TaskCompletedBox.tsx b/src/client/views/nodes/TaskCompletedBox.tsx index 2a3dd8d2d..9aab8c5a9 100644 --- a/src/client/views/nodes/TaskCompletedBox.tsx +++ b/src/client/views/nodes/TaskCompletedBox.tsx @@ -1,13 +1,11 @@ -import React = require("react"); -import { observer } from "mobx-react"; -import "./TaskCompletedBox.scss"; -import { observable, action } from "mobx"; -import { Fade } from "@material-ui/core"; - +import * as React from 'react'; +import { observer } from 'mobx-react'; +import './TaskCompletedBox.scss'; +import { observable, action } from 'mobx'; +import { Fade } from '@mui/material'; @observer export class TaskCompletionBox extends React.Component<{}> { - @observable public static taskCompleted: boolean = false; @observable public static popupX: number = 500; @observable public static popupY: number = 150; @@ -16,15 +14,20 @@ export class TaskCompletionBox extends React.Component<{}> { @action public static toggleTaskCompleted = () => { TaskCompletionBox.taskCompleted = !TaskCompletionBox.taskCompleted; - } + }; render() { - return <Fade in={TaskCompletionBox.taskCompleted}> - <div className="taskCompletedBox-fade" - style={{ - left: TaskCompletionBox.popupX ? TaskCompletionBox.popupX : 500, - top: TaskCompletionBox.popupY ? TaskCompletionBox.popupY : 150, - }}>{TaskCompletionBox.textDisplayed}</div> - </Fade>; + return ( + <Fade in={TaskCompletionBox.taskCompleted}> + <div + className="taskCompletedBox-fade" + style={{ + left: TaskCompletionBox.popupX ? TaskCompletionBox.popupX : 500, + top: TaskCompletionBox.popupY ? TaskCompletionBox.popupY : 150, + }}> + {TaskCompletionBox.textDisplayed} + </div> + </Fade> + ); } -}
\ No newline at end of file +} |