@material-ui/icons#Cancel TypeScript Examples

The following examples show how to use @material-ui/icons#Cancel. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: gameWindow.tsx    From mano-aloe with MIT License 6 votes vote down vote up 
render() {
        return (
            <div>
                <div className="game-background height-width-100"/>
                <div className="game-container height-width-100 justify-align-center">
                    <IconButton
                        className="game-exit-button"
                        onClick={this.props.close}>
                        <Cancel style={{fontSize: 50, color: 'white'}}/>
                    </IconButton>
                    {this.renderGame()}
                </div>
            </div>

        )
    }
Example #2
Source File: timer.tsx    From mano-aloe with MIT License 4 votes vote down vote up 
render() {
        const popupstyle = {
            display: this.state.isFinale ? 'inherit' : 'none',
            width: '300px',
            zIndex: 69,
            border: 'none',
            backgroundColor: '#333031',
            color: '#ffffff',
            padding: '5px',
        }
        const buttonstyle = {
            display: this.state.isFinale ? 'flex' : 'none',
            alignSelf: 'flex-start',
            marginLeft: '-1vw',
            marginTop: '-3vw',
            disableRipple: true,
            backgroundColor: 'transparent',
            color: '#fff',
        }
        //I am well aware that this is such a scuffed way of doing this but I don't care
        return (
            <React.Fragment>
                <div style={ popupstyle }>
                    <iframe src="https://www.youtube-nocookie.com/embed/vHOmLRcCVQ0"/>
                    <IconButton onClick={() => {this.setState({isFinale: false})}} style={buttonstyle}>
                        <Cancel />
                    </IconButton>
                </div>
                <div className="justify-center">
                    <div className="timer-container">
                        <div className="timer-overlay">
                            <img src={Coco_Dragon_1} id="coco1"   title="Drawn by Porukana (@Porukana_Art)"  className="sprite" />
                            <img src={Coco_Dragon_2} id="coco2"   title="Drawn by Porukana (@Porukana_Art)"  className="sprite" />
                            <img src={Coco_Dragon_3} id="coco3"   title="Drawn by Peanuts (@PistachiosChips)"   className="sprite-large" style={ { display: this.state.isFinale ? 'none' : 'inherit' } }/>
                            <img src={Coco_Dragon_4} id="coco4"   title="Drawn by Peanuts (@PistachiosChips)"   className="sprite-large" />
                            <img src={Haaton_1}      id="haaton1" title="Drawn by Porukana (@Porukana_Art)"  className="sprite" />
                            <img src={Haaton_2}      id="haaton2" title="Drawn by Porukana (@Porukana_Art)"  className="sprite" />
                            <img src={Haaton_3}      id="haaton3" title="Drawn by Peanuts (@PistachiosChips)"   className="sprite-large" style={ { display: this.state.isFinale ? 'none' : 'inherit' } }/>
                            <img src={Haaton_4}      id="haaton4" title="Drawn by Peanuts (@PistachiosChips)"   className="sprite-large" />
                            <img src={Haaton_5}      id="haaton5" title="Drawn by Peanuts (@PistachiosChips)"   className="sprite-large" />
                            <img src={Haaton_6}      id="haaton6" title="Drawn by Peanuts (@PistachiosChips)"   className="sprite-large" style={ { display: this.state.isFinale ? 'none' : 'inherit' } } />
                        </div>
                        <div className="timer-counter">
                            <div className="timer-item">
                                <div className="timer-value">
                                    {this.state.days}
                                </div>
                                <div className="timer-unit">
                                    Days
                                </div>
                            </div>
                            <div className="timer-item">
                                <div className="timer-value">
                                    {this.state.hours}
                                </div>
                                <div className="timer-unit">
                                    Hours
                                </div>
                            </div>
                            <div className="timer-item">
                                <div className="timer-value">
                                    {this.state.minutes}
                                </div>
                                <div className="timer-unit">
                                    Minutes
                                </div>
                            </div>
                            <div className="timer-item">
                                <div className="timer-value">
                                    {this.state.seconds}
                                </div>
                                <div className="timer-unit">
                                    Seconds
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </React.Fragment>
        );
    }