aix-ui-library/samples/SiteModal.jsx

React component library + Other shared UI resources for AI X Lab

import React from 'react';
import styled from 'styled-components';
import {Modal, Button} from 'react-bootstrap';
import SiteButton from './../elements/SiteButton.jsx';

/*
 *  Props:
 *    className: css style class
*/

class SiteModal extends React.Component {
  constructor(props, context) {

    super(props, context);

    this.handleHide = this.handleHide.bind(this);

  }

  handleHide() {
   this.props.onHide();
  }

  render() {
    return (
      <div className={this.props.className}>

        <Modal
          show={this.props.show}
          onHide={this.handleHide}
          container={this}
          aria-labelledby="contained-modal-title"
          className="siteModal"
          style={{ height: 500 }}
        >

            <Modal.Header closeButton className="modalHeader">
              <Modal.Title id="contained-modal-title">
                This experience was inspired by:
              </Modal.Title>
            </Modal.Header>

            <Modal.Body>

              <div className="modalBodyContent">

                <h2 className="bodyHeader">Add your modal header here</h2>

                <p className="bodyText">and supporting text here</p>

              </div>

            </Modal.Body>

            <Modal.Footer className="modalFooter">
              <SiteButton className="buttonLink">Visit Blog</SiteButton>
              <SiteButton className="buttonLink paperButton">About Research</SiteButton>
            </Modal.Footer>

        </Modal>

      </div>
    );
  }
}

SiteModal.defaultProps = {
  show: false
};

export default styled(SiteModal) `

  .modal-container .modal, .modal-container .modal-backdrop {
    position: absolute;
  }

  .siteModal {
    margin-top: 300px;
  }

  .modal-content {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    background-color: #008381;
    color: white;
    border: 3px solid #2DA4A2;
    box-shadow: 0 2px 5px 0 rgba(69,69,69,0.10);
    border-radius: 6px;
    text-align: center;
    padding: 20px;
  }

  .modal-title {
    font-family: 'IBMPlex-Light';
    font-size: 14px;
  }

  .modalHeader {
    text-align: center;
    border-bottom: none;
  }

  .close {
    color: white !important;
    opacity: 1;
    margin: 0px;
  }

  .modalBodyContent {
    width: 70%;
    min-height: 100px;
    margin: 0% auto;
    text-align: center;
  }

  .bodyHeader {
    color: white;
    font-size: 18px;
  }

  .bodyText {
    font-size: 12px;
    font-family: 'IBMPlex-Light';
  }

  .modalFooter {
    border-top: none;
    float: none;
    text-align: center;
  }

`;