import React, { Component } from 'react';
import Images from '../assets/Images';
import { Typography } from '@material-ui/core';

export default class PopUpFailedSave extends Component {
    render() {
        return (
            <div className="test app-popup-show">
                <div className="popup-content background-white border-radius" style={{ borderRadius: 8, padding: 50 }}>
                    <div style={{ display: 'flex', justifyContent: 'center' }}>
                        <img src={Images.failedCopy} />
                    </div>
                    <div style={{ display: 'grid', justifyContent: 'center', marginTop: 20 }}>
                        <span style={{ textAlign: 'center', fontSize: 14, fontWeight: 'bold' }}>
                            {`Sorry, form save failed.`}
                        </span>
                        <span style={{ textAlign: 'center', fontSize: 14, fontWeight: 'bold' }}>
                            {`Please try again later.`}
                        </span>
                    </div>
                    <div style={{ display: 'grid', justifyContent: 'center', marginTop: 24 }}>
                        <button
                            className={"btn-save"}
                            onClick={()=> this.props.onClickClose()}
                        >
                            <span style={{ color: 'white' }}>OK</span>
                        </button>
                    </div>
                </div>
            </div>
        );
    }
}